Adding a token component.

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiToken` component ([#1270](https://github.com/elastic/eui/pull/1270)) 
 - Added `beaker` icon to `EuiIcon` and updated the `EuiBetaBadge` styling ([#1291](https://github.com/elastic/eui/pull/1291/))
 - Removed calls to deprecated `findDOMNode` ([#1285](https://github.com/elastic/eui/pull/1285))
 
@@ -10,6 +11,7 @@
 - `popover_positioning` service's methods no longer accept React node values ([#1285](https://github.com/elastic/eui/pull/1285))
 
 **Bug fixes**
+
 - Added TypeScript definitions for tab components ([#1288](https://github.com/elastic/eui/pull/1288))
 
 ## [`4.8.0`](https://github.com/elastic/eui/tree/v4.8.0)
@@ -36,6 +38,7 @@
 - Added [Framer X](http://www.framer.com) component source files under the `src-framer` directory ([#1263](https://github.com/elastic/eui/pull/1263))
 - Added `compressed` prop to `EuiComboBox` ([#1258](https://github.com/elastic/eui/pull/1258))
 - Added guidelines for Sass usage. ([#1257](https://github.com/elastic/eui/pull/1257))
+- Adding a `branch` icon to `EuiIcon` ([#1249](https://github.com/elastic/eui/pull/1249/))
 
 **Bug fixes**
 

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

@@ -9,6 +9,7 @@ import {
 import {
   EuiCode,
   EuiIcon,
+  EuiToken,
 } from '../../../../src/components';
 
 const iconHtmlWarning = () => (
@@ -24,6 +25,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 +99,37 @@ export const IconExample = {
       </p>
     ),
     demo: <Apps />,
+  }, {
+    title: 'Tokens',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: tokensSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: iconsHtml,
+    }],
+    text: (
+      <div>
+        <p>
+          Tokens are most commonly used in search to help visually classify results.
+          The tokens included in EUI can be used to identify a number of code-based
+          search results.
+        </p>
+
+        <p>
+          An <EuiCode>EuiToken</EuiCode> accepts any valid <EuiCode>EuiIcon</EuiCode> as its
+          <EuiCode>iconType</EuiCode> property. However, icons designed specifically for
+          use in the <EuiCode>EuiToken</EuiCode> are prefixed with &quot;token&quot; in their name.
+        </p>
+
+        <p>
+          Multiple variants are available including: <EuiCode>shape</EuiCode>, <EuiCode>size</EuiCode>,
+          <EuiCode>color</EuiCode>, <EuiCode>hideBorder</EuiCode>, and <EuiCode>fill</EuiCode>.
+        </p>
+      </div>
+    ),
+    props: { EuiToken },
+    demo: <Tokens />,
   }, {
     title: 'Machine learning icons',
     source: [{

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

@@ -153,7 +153,7 @@ const iconTypes = [
   'visText',
   'visTimelion',
   'visVega',
-  'visVisualBuilder',
+  'visVisualBuilder'
 ];
 
 export default () => (

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

@@ -0,0 +1,128 @@
+import React, { Fragment } from 'react';
+
+import {
+  EuiFlexGrid,
+  EuiFlexItem,
+  EuiPanel,
+  EuiText,
+  EuiToken,
+  EuiSpacer,
+} from '../../../../src/components';
+
+const tokens = [
+  'tokenAnnotation',
+  'tokenArray',
+  'tokenBoolean',
+  'tokenClass',
+  'tokenConstant',
+  'tokenElement',
+  'tokenEnum',
+  'tokenEnumMember',
+  'tokenEvent',
+  'tokenException',
+  'tokenField',
+  'tokenFunction',
+  'tokenInterface',
+  'tokenKey',
+  'tokenMethod',
+  'tokenNull',
+  'tokenNumber',
+  'tokenObject',
+  'tokenOperator',
+  'tokenPackage',
+  'tokenParameter',
+  'tokenProperty',
+  'tokenString',
+  'tokenStruct',
+  'tokenVariable',
+  'tokenFile',
+  'tokenSymbol',
+  'tokenRepo'
+];
+
+export default () => (
+  <Fragment>
+    <EuiFlexGrid columns={4}>
+      {
+        tokens.map(token => (
+          <EuiFlexItem
+            className="guideDemo__icon"
+            key={token}
+          >
+            <EuiPanel>
+              <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
+                <EuiToken iconType={token}/>
+              </div>
+              <EuiText size="s">
+                <p>{token}</p>
+              </EuiText>
+            </EuiPanel>
+          </EuiFlexItem>
+        ))
+      }
+    </EuiFlexGrid>
+
+    <EuiSpacer />
+
+    <EuiFlexGrid columns={4}>
+      <EuiFlexItem
+        className="guideDemo__icon"
+      >
+        <EuiPanel>
+          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
+            <EuiToken
+              iconType="tokenEvent"
+              size="m"
+              displayOptions={{
+                color: 'tokenTint10',
+                shape: 'square',
+                fill: true,
+              }}
+            />
+          </div>
+          <EuiText size="s">
+            <p>A custom token</p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem
+        className="guideDemo__icon"
+      >
+        <EuiPanel>
+          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
+            <EuiToken
+              iconType="visMapCoordinate"
+              displayOptions={{
+                color: 'tokenTint05',
+                shape: 'circle',
+              }}
+            />
+          </div>
+          <EuiText size="s">
+            <p>A custom token</p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+      <EuiFlexItem
+        className="guideDemo__icon"
+      >
+        <EuiPanel>
+          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
+            <EuiToken
+              iconType="tokenElement"
+              size="l"
+              displayOptions={{
+                color: 'tokenTint07',
+                shape: 'rectangle',
+                hideBorder: true
+              }}
+            />
+          </div>
+          <EuiText size="s">
+            <p>A custom token</p>
+          </EuiText>
+        </EuiPanel>
+      </EuiFlexItem>
+    </EuiFlexGrid>
+  </Fragment>
+);