token_map converted to TS (#1870)

* `token_map` converted to TS * `token_map` updated Changelog * `TOKEN_MAP` code review fixes * `TOKEN_MAP` code review fixes
elastic · Apr 25, 2019 · c151fd7 · c151fd7
1 parent 4e83742
commit c151fd7
Show file tree

Hide file tree

Showing 4 changed files with 203 additions and 161 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `token_map` to TS ([#1870](https://github.com/elastic/eui/pull/1870))
 - Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858))
 - Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848))
 - Added `isLoading` prop to `EuiStat` ([#1848](https://github.com/elastic/eui/pull/1848))

diff --git a/src/components/token/index.d.ts b/src/components/token/index.d.ts
@@ -1,46 +1,32 @@
 import { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 import { IconType } from '../icon';
+import {
+  EuiTokenMapDisplayOptions as DisplayOptions,
+  TokenShape as TkShape,
+  TokenColor as TkColor,
+  EuiTokenMapType as TkMapType,
+} from './token_map';
 
 declare module '@elastic/eui' {
-
   /**
    * token type defs
    *
    * @see './token.js'
   */
-
   export type TokenSize = 's' | 'm' | 'l';
-
-  export type TokenColor =
-    | 'tokenTint01'
-    | 'tokenTint02'
-    | 'tokenTint03'
-    | 'tokenTint04'
-    | 'tokenTint05'
-    | 'tokenTint06'
-    | 'tokenTint07'
-    | 'tokenTint08'
-    | 'tokenTint09'
-    | 'tokenTint10'
-    | 'tokenTint11'
-    | 'tokenTint12'
-
-  export type TokenShape =
-    | 'circle'
-    | 'square'
-    | 'rectangle'
-
   export interface EuiTokenProps {
     iconType: IconType;
     size?: TokenSize;
-    displayOptions?: {
-      color?: TokenColor;
-      shape?: TokenShape;
-      fill?: boolean;
-      hasBorder?: boolean;
-    };
+    displayOptions?: DisplayOptions;
   }
 
-  export const EuiToken: FunctionComponent<CommonProps & EuiTokenProps & HTMLAttributes<HTMLDivElement>>;
+  export type TokenShape = TkShape;
+  export type TokenColor = TkColor;
+  export type TokenType = TkMapType;
+  export interface EuiTokenMapDisplayOptions extends DisplayOptions {}
+
+  export const EuiToken: FunctionComponent<
+    CommonProps & EuiTokenProps & HTMLAttributes<HTMLDivElement>
+  >;
 }
diff --git a/src/components/token/token_map.js b/src/components/token/token_map.js
diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts
@@ -0,0 +1,187 @@
+// Sets default displayOptions for EuiTokens based on iconType
+// tokenClass: {
+//   shape: 'square',
+//   color: 'tokenTint01',
+//   fill: false,
+// },
+
+export type TokenColor =
+  | 'tokenTint01'
+  | 'tokenTint02'
+  | 'tokenTint03'
+  | 'tokenTint04'
+  | 'tokenTint05'
+  | 'tokenTint06'
+  | 'tokenTint07'
+  | 'tokenTint08'
+  | 'tokenTint09'
+  | 'tokenTint10'
+  | 'tokenTint11'
+  | 'tokenTint12';
+
+export type TokenShape = 'circle' | 'square' | 'rectangle';
+
+export interface EuiTokenMapDisplayOptions {
+  color?: TokenColor;
+  shape?: TokenShape;
+  fill?: boolean;
+  hasBorder?: boolean;
+}
+
+export type EuiTokenMapType =
+  | 'tokenClass'
+  | 'tokenProperty'
+  | 'tokenEnum'
+  | 'tokenVariable'
+  | 'tokenMethod'
+  | 'tokenAnnotation'
+  | 'tokenException'
+  | 'tokenInterface'
+  | 'tokenParameter'
+  | 'tokenField'
+  | 'tokenFunction'
+  | 'tokenElement'
+  | 'tokenBoolean'
+  | 'tokenString'
+  | 'tokenArray'
+  | 'tokenConstant'
+  | 'tokenNumber'
+  | 'tokenObject'
+  | 'tokenEvent'
+  | 'tokenKey'
+  | 'tokenNull'
+  | 'tokenStruct'
+  | 'tokenPackage'
+  | 'tokenOperator'
+  | 'tokenEnumMember'
+  | 'tokenRepo'
+  | 'tokenSymbol'
+  | 'tokenFile'
+  | 'tokenNamespace'
+  | 'tokenModule';
+
+export const TOKEN_MAP: Record<EuiTokenMapType, EuiTokenMapDisplayOptions> = {
+  tokenClass: {
+    shape: 'circle',
+    color: 'tokenTint01',
+  },
+  tokenProperty: {
+    shape: 'circle',
+    color: 'tokenTint02',
+  },
+  tokenEnum: {
+    shape: 'circle',
+    color: 'tokenTint03',
+  },
+  tokenVariable: {
+    shape: 'circle',
+    color: 'tokenTint04',
+  },
+  tokenMethod: {
+    shape: 'square',
+    color: 'tokenTint02',
+  },
+  tokenAnnotation: {
+    shape: 'square',
+    color: 'tokenTint06',
+  },
+  tokenException: {
+    shape: 'circle',
+    color: 'tokenTint07',
+  },
+  tokenInterface: {
+    shape: 'circle',
+    color: 'tokenTint08',
+  },
+  tokenParameter: {
+    shape: 'square',
+    color: 'tokenTint09',
+  },
+  tokenField: {
+    shape: 'circle',
+    color: 'tokenTint10',
+  },
+  tokenElement: {
+    shape: 'square',
+    color: 'tokenTint03',
+  },
+  tokenFunction: {
+    shape: 'circle',
+    color: 'tokenTint02',
+  },
+  tokenBoolean: {
+    shape: 'square',
+    color: 'tokenTint05',
+  },
+  tokenString: {
+    shape: 'square',
+    color: 'tokenTint07',
+  },
+  tokenArray: {
+    shape: 'square',
+    color: 'tokenTint04',
+  },
+  tokenNumber: {
+    shape: 'circle',
+    color: 'tokenTint05',
+  },
+  tokenConstant: {
+    shape: 'circle',
+    color: 'tokenTint07',
+  },
+  tokenObject: {
+    shape: 'square',
+    color: 'tokenTint03',
+  },
+  tokenEvent: {
+    shape: 'circle',
+    color: 'tokenTint09',
+  },
+  tokenKey: {
+    shape: 'circle',
+    color: 'tokenTint06',
+  },
+  tokenNull: {
+    shape: 'square',
+    color: 'tokenTint02',
+  },
+  tokenStruct: {
+    shape: 'square',
+    color: 'tokenTint07',
+  },
+  tokenPackage: {
+    shape: 'square',
+    color: 'tokenTint10',
+  },
+  tokenOperator: {
+    shape: 'circle',
+    color: 'tokenTint09',
+  },
+  tokenEnumMember: {
+    shape: 'square',
+    color: 'tokenTint04',
+  },
+  tokenRepo: {
+    shape: 'rectangle',
+    color: 'tokenTint05',
+    fill: true,
+  },
+  tokenSymbol: {
+    shape: 'rectangle',
+    color: 'tokenTint07',
+    fill: true,
+  },
+  tokenFile: {
+    shape: 'rectangle',
+    color: 'tokenTint12',
+    fill: true,
+  },
+  tokenNamespace: {
+    shape: 'square',
+    color: 'tokenTint01',
+  },
+  tokenModule: {
+    shape: 'square',
+    color: 'tokenTint09',
+  },
+};