Adding a token component.

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- New `token` component has been created. ([#1270](https://github.com/elastic/eui/pull/1270)) 
 - Added `apmTrace` icon to `EuiIcon` set ([#1263](https://github.com/elastic/eui/pull/1263))
 
 No public interface changes since `4.6.1`.

src-docs/src/views/icon/icon_example.js

@@ -24,6 +24,9 @@ const iconsHtml = renderToHtml(iconHtmlWarning);
 import Icons from './icons';
 const iconsSource = require('!!raw-loader!./icons');
 
+import Tokens from './tokens';
+const tokensSource = require('!!raw-loader!./tokens');
+
 import Apps from './apps';
 const appsSource = require('!!raw-loader!./apps');
 
@@ -95,6 +98,32 @@ export const IconExample = {
       </p>
     ),
     demo: <Apps />,
+  }, {
+    title: 'Tokens',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: tokensSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: iconsHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Tokens are used in search to help visually classify the results.
+          The tokens included in EUI can be used to identifya number of
+          code-based search results.
+        </p>
+        <p>
+          Tokens utilize the EUI color pallete and <EuiCode>tint</EuiCode>
+          and <EuiCode>shade</EuiCode> SCSS color functions to maintain
+          legibility and accessibility. Tokens are also available in three
+          different sizes: <EuiCode>small</EuiCode> (16x16),
+          <EuiCode>medium</EuiCode> (24x24), and <EuiCode>large</EuiCode> (32x32).
+        </p>
+      </div>
+    ),
+    demo: <Tokens />,
   }, {
     title: 'Machine learning icons',
     source: [{

src-docs/src/views/icon/tokens.js

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiPanel,
+  EuiText,
+  EuiToken
+} from '../../../../src/components';
+
+const tokens = [
+  'tokenClass',
+  'tokenProperty',
+  'tokenEnum',
+  'tokenVariable',
+  'tokenMethod',
+  'tokenAnnotation',
+  'tokenException',
+  'tokenInterface',
+  'tokenParameter',
+  'tokenField',
+  'tokenElement',
+  'tokenFunction',
+  'tokenBoolean',
+  'tokenString',
+  'tokenArray',
+  'tokenNumber',
+  'tokenConstant',
+  'tokenObject',
+  'tokenEvent',
+  'tokenKey',
+  'tokenNull',
+  'tokenStruct',
+  'tokenPackage',
+  'tokenOperator',
+  'tokenEnumMember',
+  'tokenTypeRepo',
+  'tokenTypeSymbol',
+  'tokenTypeFile'
+];
+
+export default () => (
+  <EuiFlexGrid columns={4}>
+    {
+      tokens.map(token => (
+        <EuiFlexItem
+          className="guideDemo__icon"
+          key={token}
+          style={{ width: '200px' }}
+        >
+          <EuiPanel>
+            <div style={{ margin: '0 auto 8px auto', width: '16px' }}>
+              <EuiToken type={token}/>
+            </div>
+            <EuiText size="s">
+              <p>{token}</p>
+            </EuiText>
+          </EuiPanel>
+        </EuiFlexItem>
+      ))
+    }
+  </EuiFlexGrid>
+);

src/components/index.js

@@ -295,6 +295,10 @@ export {
   EuiTableSortMobileItem,
 } from './table';
 
+export {
+  EuiToken
+} from './token';
+
 export {
   EuiBasicTable,
   EuiInMemoryTable

src/components/index.scss

@@ -51,6 +51,7 @@
 @import 'tabs/index';
 @import 'title/index';
 @import 'toast/index';
+@import 'token/index';
 @import 'toggle/index';
 @import 'tool_tip/index';
 @import 'text/index';

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiToken is rendered 1`] = `
+<div
+  class="euiToken euiToken--small euiToken--primary"
+>
+  <svg
+    height="16"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.333 7.027H9.375c-.056-.708-.48-1.187-1.222-1.187-.972 0-1.5.806-1.5 2.16 0 1.43.545 2.16 1.486 2.16.708 0 1.139-.415 1.236-1.08l1.958.015C11.236 10.418 10.181 12 8.097 12c-1.958 0-3.43-1.41-3.43-4 0-2.6 1.514-4 3.43-4 1.792 0 3.084 1.095 3.236 3.027z"
+      fill-rule="evenodd"
+    />
+  </svg>
+</div>
+`;

src/components/token/_index.scss

@@ -0,0 +1 @@
+@import 'token';

src/components/token/_token.scss

@@ -0,0 +1,195 @@
+.euiToken {
+  border-radius: 50%;
+  position: relative;
+  svg {
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: auto;
+  }
+}
+
+.euiToken--square {
+  border-radius: 3px;
+}
+
+.euiToken--small {
+  width: 16px;
+  height: 16px;
+}
+
+.euiToken--medium {
+  width: 24px;
+  height: 24px;
+}
+
+.euiToken--large {
+  width: 32px;
+  height: 32px;
+}
+
+.euiToken--type {
+  width: 21.3333px;
+  height: 16px;
+  border-radius: 1px;
+  svg {
+    margin-left: 2.6665px;
+  }
+}
+
+.euiToken--primary {
+  box-shadow: 0 0 0 1px $euiColorPrimary;
+  background-color: tint($euiColorPrimary, 70%);
+  svg {
+    fill: shade($euiColorPrimary, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorPrimary;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--purple {
+  box-shadow: 0 0 0 1px $euiColorVis3;
+  background-color: tint($euiColorVis3, 70%);
+  svg {
+    fill: shade($euiColorVis3, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorVis3;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--blue {
+  box-shadow: 0 0 0 1px $euiColorVis1;
+  background-color: tint($euiColorVis1, 70%);
+  svg {
+    fill: shade($euiColorVis1, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorVis1;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--orange {
+  box-shadow: 0 0 0 1px $euiColorVis7;
+  background-color: tint($euiColorVis7, 70%);
+  svg {
+    fill: shade($euiColorVis7, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorVis7;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--teal {
+  box-shadow: 0 0 0 1px $euiColorVis0;
+  background-color: tint($euiColorVis0, 70%);
+  svg {
+    fill: shade($euiColorVis0, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorVis0;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--dark-red {
+  box-shadow: 0 0 0 1px $euiColorVis9;
+  background-color: tint($euiColorVis9, 70%);
+  svg {
+    fill: shade($euiColorVis9, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorVis9;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--pink {
+  box-shadow: 0 0 0 1px #FF00FF;
+  background-color: tint(#FF00FF, 70%);
+  svg {
+    fill: shade(#FF00FF, 30%);
+  }
+  &.euiToken--type {
+    background-color: #FF00FF;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--green {
+  box-shadow: 0 0 0 1px #26AB00;
+  background-color: tint(#26AB00, 70%);
+  svg {
+    fill: shade(#26AB00, 30%);
+  }
+  &.euiToken--type {
+    background-color: #26AB00;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--yellow {
+  box-shadow: 0 0 0 1px $euiColorVis5;
+  background-color: tint($euiColorVis5, 70%);
+  svg {
+    fill: shade($euiColorVis5, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorVis5;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--red {
+  box-shadow: 0 0 0 1px $euiColorAccent;
+  background-color: tint($euiColorAccent, 70%);
+  svg {
+    fill: shade($euiColorAccent, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorAccent;
+    svg {
+      fill: white;
+    }   
+  }
+}
+
+.euiToken--gray {
+  box-shadow: 0 0 0 1px $euiColorMediumShade;
+  background-color: tint($euiColorMediumShade, 70%);
+  svg {
+    fill: shade($euiColorMediumShade, 30%);
+  }
+  &.euiToken--type {
+    background-color: $euiColorMediumShade;
+    svg {
+      fill: white;
+    }   
+  }
+}
+