fix: spinner and icons now expect tokens

twilio-labs · Oct 22, 2019 · 738fb1f · 738fb1f
1 parent d839f0c
commit 738fb1f
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 24 deletions.
diff --git a/packages/paste-core/components/spinner/package.json b/packages/paste-core/components/spinner/package.json
@@ -30,13 +30,15 @@
     "@emotion/core": "^10.0.10",
     "@emotion/styled": "^10.0.10",
     "@twilio-paste/icons": "^0.3.1",
+    "@twilio-paste/types": "^0.0.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-uid": "^2.2.0",
     "styled-system": "^4.1.0"
   },
   "devDependencies": {
     "@twilio-paste/icons": "^0.3.1",
+    "@twilio-paste/types": "^0.0.1",
     "rollup": "^1.16.2",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.1",

diff --git a/packages/paste-core/components/spinner/src/index.tsx b/packages/paste-core/components/spinner/src/index.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
 import {keyframes, css} from '@emotion/core';
 import styled from '@emotion/styled';
+import {IconSize} from '@twilio-paste/types';
 import {LoadingIcon, LoadingIconProps} from '@twilio-paste/icons/react/LoadingIcon';
-import {width, height} from 'styled-system';
+import {size} from 'styled-system';
 
 const rotate = keyframes`
   0% {
@@ -14,13 +15,11 @@ const rotate = keyframes`
 `;
 
 interface SpinnerWrapperProps {
-  width: number;
-  height: number;
+  size: IconSize;
 }
 
 const SpinningWrapper = styled.div<SpinnerWrapperProps>(
-  width,
-  height,
+  size,
   css({
     display: 'inline-block',
     animation: `${rotate} 2s linear infinite`,
@@ -32,16 +31,14 @@ const SpinningWrapper = styled.div<SpinnerWrapperProps>(
 
 interface SpinnerProps extends LoadingIconProps {
   title: string;
+  size?: IconSize;
 }
 
-const Spinner: React.FC<SpinnerProps> = ({size = 24, ...props}) => (
-  <SpinningWrapper width={size} height={size}>
-    <LoadingIcon size={size} {...props} />
+const Spinner: React.FC<SpinnerProps> = ({size = 'sizeIcon20', decorative = false, ...props}) => (
+  <SpinningWrapper size={size}>
+    <LoadingIcon size={size} decorative={decorative} {...props} />
   </SpinningWrapper>
 );
 
-Spinner.defaultProps = {
-  decorative: false,
-};
-
+Spinner.displayName = 'Spinner';
 export {Spinner};
diff --git a/packages/paste-core/components/spinner/stories/index.stories.tsx b/packages/paste-core/components/spinner/stories/index.stories.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
-import {withKnobs, text, number} from '@storybook/addon-knobs';
+import {withKnobs, text, select} from '@storybook/addon-knobs';
+import {DefaultTheme, ThemeShape} from '@twilio-paste/theme-tokens';
+import {IconSize} from '@twilio-paste/types';
 import {Spinner} from '../src';
 
+const sizeOptions = Object.keys(DefaultTheme.widths).filter(name => name.includes('Icon'));
+
 storiesOf('Components|Spinner', module)
   .addDecorator(withKnobs)
   .add('Default', () => {
-    return (
-      <Spinner color={text('color', 'currentColor')} size={number('size', 24)} title={text('title', 'Spinner Icon')} />
-    );
+    const sizeValue = select('size', sizeOptions, 'sizeIcon20') as IconSize;
+    return <Spinner color={text('color', 'currentColor')} size={sizeValue} title={text('title', 'Spinner Icon')} />;
   });
diff --git a/packages/paste-core/components/spinner/tsconfig.build.json b/packages/paste-core/components/spinner/tsconfig.build.json
@@ -10,6 +10,9 @@
   "references": [
     {
       "path": "../../../paste-icons"
+    },
+    {
+      "path": "../../../paste-types"
     }
   ]
 }
diff --git a/packages/paste-icons/package.json b/packages/paste-icons/package.json
@@ -21,6 +21,7 @@
   },
   "peerDependencies": {
     "@emotion/styled": "^10.0.14",
+    "@twilio-paste/types": "^0.0.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-uid": "^2.2.0",
@@ -33,6 +34,7 @@
     "@svgr/plugin-jsx": "^4.1.0",
     "@svgr/plugin-svgo": "^4.0.3",
     "@twilio-labs/svg-to-react": "^2.0.0",
+    "@twilio-paste/types": "^0.0.1",
     "@types/loadable__component": "^5.6.0",
     "@types/promise-timeout": "^1.3.0",
     "commander": "^2.20.0",

diff --git a/packages/paste-icons/src/react/helpers/IconWrapper.tsx b/packages/paste-icons/src/react/helpers/IconWrapper.tsx
@@ -1,18 +1,24 @@
 import styled from '@emotion/styled';
+import {IconSize} from '@twilio-paste/types';
+import {size} from 'styled-system';
 
 export interface IconWrapperProps {
   as?: string;
-  size?: number;
+  size?: IconSize;
   color?: string;
 }
 
-const IconWrapper = styled.span`
-  ${({size = 24, color = 'currentColor'}: IconWrapperProps) => `
-    width: ${size}px;
-    height: ${size}px;
+const IconWrapper = styled.span<IconWrapperProps>`
+  ${size};
+  ${({color = 'currentColor'}: IconWrapperProps) => `
     color: ${color};
     display: inline-block;
   `}
 `;
 
+IconWrapper.defaultProps = {
+  size: 'sizeIcon20',
+};
+
+IconWrapper.displayName = 'IconWrapper';
 export {IconWrapper};
diff --git a/packages/paste-icons/tsconfig.build.json b/packages/paste-icons/tsconfig.build.json
@@ -4,6 +4,12 @@
     "outDir": ".",
     "rootDir": "./src"
   },
-  "include": ["src/**/*"],
-  "references": []
-}
+  "include": [
+    "src/**/*"
+  ],
+  "references": [
+    {
+      "path": "../paste-types"
+    }
+  ]
+}