diff --git a/CHANGELOG.md b/CHANGELOG.md index 679346d3819..0c9da445adf 100644 --- 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 index c042d3c3dc4..5a605ef7f9b 100644 --- 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>; + export type TokenShape = TkShape; + export type TokenColor = TkColor; + export type TokenType = TkMapType; + export interface EuiTokenMapDisplayOptions extends DisplayOptions {} + + export const EuiToken: FunctionComponent< + CommonProps & EuiTokenProps & HTMLAttributes + >; } diff --git a/src/components/token/token_map.js b/src/components/token/token_map.js deleted file mode 100644 index 3324212377c..00000000000 --- a/src/components/token/token_map.js +++ /dev/null @@ -1,132 +0,0 @@ -// Sets default displayOptions for EuiTokens based on iconType -// tokenClass: { -// 'shape': 'square', -// 'color': 'tokenTint01', -// 'fill': false, -// }, - -export const TOKEN_MAP = { - 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' - } -}; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts new file mode 100644 index 00000000000..e9617f0cf59 --- /dev/null +++ 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 = { + 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', + }, +};