EuiToken enums (#1301)

* Enumerating SHAPES and COLORS

* Properly making use of the enumerated constants in classNames

* Updating the changelog

* updated snapshots

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- `EuiToken` now exports enumerated constants for `SHAPES` and `COLORS` ([#1301](https://github.com/elastic/eui/pull/1301))
+
 No public interface changes since `5.0.1`.
 
 ## [`5.0.1`](https://github.com/elastic/eui/tree/v5.0.1)

src/components/token/__snapshots__/token.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`EuiToken is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
+  class="euiToken euiToken--tokenTint01 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -30,7 +30,7 @@ exports[`EuiToken is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint01 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
+  class="euiToken euiToken--tokenTint01 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -58,7 +58,7 @@ exports[`EuiToken props color tokenTint01 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint02 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint02 euiToken--small"
+  class="euiToken euiToken--tokenTint02 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -86,7 +86,7 @@ exports[`EuiToken props color tokenTint02 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint03 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint03 euiToken--small"
+  class="euiToken euiToken--tokenTint03 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -114,7 +114,7 @@ exports[`EuiToken props color tokenTint03 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint04 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint04 euiToken--small"
+  class="euiToken euiToken--tokenTint04 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -142,7 +142,7 @@ exports[`EuiToken props color tokenTint04 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint05 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint05 euiToken--small"
+  class="euiToken euiToken--tokenTint05 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -170,7 +170,7 @@ exports[`EuiToken props color tokenTint05 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint06 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint06 euiToken--small"
+  class="euiToken euiToken--tokenTint06 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -198,7 +198,7 @@ exports[`EuiToken props color tokenTint06 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint07 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint07 euiToken--small"
+  class="euiToken euiToken--tokenTint07 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -226,7 +226,7 @@ exports[`EuiToken props color tokenTint07 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint08 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint08 euiToken--small"
+  class="euiToken euiToken--tokenTint08 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -254,7 +254,7 @@ exports[`EuiToken props color tokenTint08 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint09 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint09 euiToken--small"
+  class="euiToken euiToken--tokenTint09 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -282,7 +282,7 @@ exports[`EuiToken props color tokenTint09 is rendered 1`] = `
 
 exports[`EuiToken props color tokenTint10 is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint10 euiToken--small"
+  class="euiToken euiToken--tokenTint10 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -310,7 +310,7 @@ exports[`EuiToken props color tokenTint10 is rendered 1`] = `
 
 exports[`EuiToken props shape circle is rendered 1`] = `
 <div
-  class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--small"
+  class="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -338,7 +338,7 @@ exports[`EuiToken props shape circle is rendered 1`] = `
 
 exports[`EuiToken props shape rectangle is rendered 1`] = `
 <div
-  class="euiToken euiToken--rectangle euiToken--tokenTint01 euiToken--small"
+  class="euiToken euiToken--tokenTint01 euiToken--rectangle euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -366,7 +366,7 @@ exports[`EuiToken props shape rectangle is rendered 1`] = `
 
 exports[`EuiToken props shape square is rendered 1`] = `
 <div
-  class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
+  class="euiToken euiToken--tokenTint01 euiToken--square euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -394,7 +394,7 @@ exports[`EuiToken props shape square is rendered 1`] = `
 
 exports[`EuiToken props size l is rendered 1`] = `
 <div
-  class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--large"
+  class="euiToken euiToken--tokenTint01 euiToken--circle euiToken--large"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -422,7 +422,7 @@ exports[`EuiToken props size l is rendered 1`] = `
 
 exports[`EuiToken props size m is rendered 1`] = `
 <div
-  class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--medium"
+  class="euiToken euiToken--tokenTint01 euiToken--circle euiToken--medium"
 >
   <svg
     class="euiIcon euiIcon--medium"
@@ -450,7 +450,7 @@ exports[`EuiToken props size m is rendered 1`] = `
 
 exports[`EuiToken props size s is rendered 1`] = `
 <div
-  class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--small"
+  class="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
 >
   <svg
     class="euiIcon euiIcon--medium"

src/components/token/index.js

@@ -2,4 +2,5 @@ export {
   EuiToken,
   SIZES as TOKEN_SIZES,
   SHAPES as TOKEN_SHAPES,
+  COLORS as TOKEN_COLORS
 } from './token';

src/components/token/token.js

@@ -20,6 +20,23 @@ const shapeToClassMap = {
 
 export const SHAPES = Object.keys(shapeToClassMap);
 
+const colorToClassMap = {
+  tokenTint01: 'euiToken--tokenTint01',
+  tokenTint02: 'euiToken--tokenTint02',
+  tokenTint03: 'euiToken--tokenTint03',
+  tokenTint04: 'euiToken--tokenTint04',
+  tokenTint05: 'euiToken--tokenTint05',
+  tokenTint06: 'euiToken--tokenTint06',
+  tokenTint07: 'euiToken--tokenTint07',
+  tokenTint08: 'euiToken--tokenTint08',
+  tokenTint09: 'euiToken--tokenTint09',
+  tokenTint10: 'euiToken--tokenTint10',
+  tokenTint11: 'euiToken--tokenTint11',
+  tokenTint12: 'euiToken--tokenTint12',
+};
+
+export const COLORS = Object.keys(colorToClassMap);
+
 export const EuiToken = ({
   iconType,
   displayOptions,
@@ -52,8 +69,8 @@ export const EuiToken = ({
 
   const classes = classNames(
     'euiToken',
-    `euiToken--${tokenShape}`,
-    `euiToken--${tokenColor}`,
+    colorToClassMap[tokenColor],
+    shapeToClassMap[tokenShape],
     sizeToClassMap[size],
     {
       'euiToken--fill': fill,
@@ -89,8 +106,8 @@ EuiToken.propTypes = {
    * - `hideBorder`: disables the outer border
    */
   displayOptions: PropTypes.shape({
-    color: PropTypes.string,
-    shape: PropTypes.string,
+    color: PropTypes.oneOf(COLORS),
+    shape: PropTypes.oneOf(SHAPES),
     fill: PropTypes.boolean,
     hideBorder: PropTypes.boolean,
   }),