feat(components): migrate Text to TypeScript (#581)

alpha
sumup-oss · May 4, 2020 · 86f73dd · 86f73dd
1 parent 301414d
commit 86f73dd
Show file tree

Hide file tree

Showing 27 changed files with 662 additions and 672 deletions.
diff --git a/.storybook/components/BorderRadius.js b/.storybook/components/BorderRadius.js
@@ -58,7 +58,7 @@ const BorderRadius = ({ size, ...props }) => (
     <div>
       <Text as="span">{size}</Text>
       <BorderRadiusSize>
-        <BorderRadiusName size={Text.KILO} as="span">
+        <BorderRadiusName size="kilo" as="span">
           {light.borderRadius[size]}
         </BorderRadiusName>
       </BorderRadiusSize>

diff --git a/.storybook/components/BorderWidth.js b/.storybook/components/BorderWidth.js
@@ -61,7 +61,7 @@ const BorderWidth = ({ size }) => (
       <div>
         <Text as="span">{size}</Text>
         <BorderWidthSize>
-          <BorderWidthName size={Text.KILO} as="span">
+          <BorderWidthName size="kilo" as="span">
             {light.borderWidth[size]}
           </BorderWidthName>
         </BorderWidthSize>

diff --git a/.storybook/components/IconSize.js b/.storybook/components/IconSize.js
@@ -60,7 +60,7 @@ const IconSize = ({ size }) => (
       <div>
         <Text as="span">{size}</Text>
         <IconSizeSize>
-          <IconSizeName size={Text.KILO} as="span">
+          <IconSizeName size="kilo" as="span">
             {light.iconSizes[size]}
           </IconSizeName>
         </IconSizeSize>

diff --git a/.storybook/components/Intro.js b/.storybook/components/Intro.js
@@ -32,14 +32,14 @@ const StyledText = styled(Text)(
 
 const Intro = ({ children, ...props }) => (
   <ThemeProvider theme={light}>
-    <StyledText size={Text.GIGA} {...props}>
+    <StyledText size="giga" {...props}>
       {children}
     </StyledText>
   </ThemeProvider>
 );
 
-Intro.KILO = Text.KILO;
-Intro.MEGA = Text.MEGA;
-Intro.GIGA = Text.GIGA;
+Intro.KILO = 'kilo';
+Intro.MEGA = 'mega';
+Intro.GIGA = 'giga';
 
 export default Intro;
diff --git a/.storybook/components/Spacing.js b/.storybook/components/Spacing.js
@@ -60,7 +60,7 @@ const Spacing = ({ spacingName }) => (
       <div>
         <Text as="span">{spacingName}</Text>
         <SpacingSize>
-          <SpacingName size={Text.KILO} as="span">
+          <SpacingName size="kilo" as="span">
             {light.spacings[spacingName]}
           </SpacingName>
         </SpacingSize>

diff --git a/.storybook/components/Statuses.js b/.storybook/components/Statuses.js
@@ -49,7 +49,7 @@ const Status = ({ variant = 'stable' }) => {
 
 Status.Description = ({ children }) => (
   <ThemeProvider theme={light}>
-    <Text size={Text.KILO} as="span" italic>
+    <Text size="kilo" as="span" italic>
       {' '}
       {children}
     </Text>

diff --git a/.storybook/components/Type.js b/.storybook/components/Type.js
@@ -41,7 +41,7 @@ const Type = ({ size, component, name, fontWeight, ...props }) => {
         children: (
           <Fragment>
             This is {size}
-            <TypePx as="span" size={Text.KILO}>
+            <TypePx as="span" size="kilo">
               {weight ? `${weight}` : `${fontSize}, ${lineHeight}`}
             </TypePx>
           </Fragment>

diff --git a/.storybook/util/theme.js b/.storybook/util/theme.js
@@ -27,7 +27,7 @@ const withThemeProvider = (Component, baseProps = {}) => (props = {}) => (
   </ThemeProvider>
 );
 
-const TEXT_SIZE = Text.MEGA;
+const TEXT_SIZE = 'mega';
 
 const headingStyles = theme => css`
   *:not(h1):not(h2):not(h3) + & {

diff --git a/docs/advanced/theme.story.mdx b/docs/advanced/theme.story.mdx
@@ -221,9 +221,9 @@ Avoid using `theme.typography` directly in your styles, rather use the specializ
 #### Text
 
 <Preview>
-  <Type size={Text.GIGA} component={Text} name="text" />
-  <Type size={Text.MEGA} component={Text} name="text" />
-  <Type size={Text.KILO} component={Text} name="text" />
+  <Type size="giga" component={Text} name="text" />
+  <Type size="mega" component={Text} name="text" />
+  <Type size="kilo" component={Text} name="text" />
 </Preview>
 
 ### Font stack
@@ -243,8 +243,8 @@ theme.fontWeight.[regular|bold]
 You can only toggle the boldness of `Text`, but not `Heading` or `Subheading`.
 
 <Preview>
-  <Type size={Text.MEGA} bold component={Text} fontWeight="bold" name="text" />
-  <Type size={Text.MEGA} component={Text} fontWeight="regular" name="text" />
+  <Type size="mega" bold component={Text} fontWeight="bold" name="text" />
+  <Type size="mega" component={Text} fontWeight="regular" name="text" />
 </Preview>
 
 ### Grid

diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js
@@ -20,7 +20,6 @@ import { light } from '@sumup/design-tokens';
 import {
   Badge,
   Blockquote,
-  Button,
   ButtonGroup,
   Card,
   Checkbox,
@@ -36,14 +35,12 @@ import {
   Selector,
   SubHeading,
   Tag,
-  Text,
   TextArea,
   Toggle,
   styleConstants
 } from '../../src';
 
-const { colorNames, sizes } = styleConstants;
-const { KILO, MEGA, GIGA } = sizes;
+const { colorNames } = styleConstants;
 
 const element = props => <div {...props} />;
 
@@ -133,7 +130,8 @@ export default {
         circle: PropTypes.bool
       }
     },
-    getComponentInfo(Button, { size: [KILO, MEGA, GIGA] }),
+    // TODO: Make React DocGen work with TypeScript
+    // getComponentInfo(Button, { size: [KILO, MEGA, GIGA] }),
     getComponentInfo(Blockquote, {
       size: [Blockquote.KILO, Blockquote.MEGA, Blockquote.GIGA]
     }),
@@ -189,9 +187,10 @@ export default {
       prefix: PropTypes.element,
       suffix: PropTypes.element
     }),
-    getComponentInfo(Text, {
-      size: [Text.KILO, Text.MEGA, Text.GIGA]
-    }),
+    // TODO: Make React DocGen work with TypeScript
+    // getComponentInfo(Text, {
+    //   size: ['kilo', 'mega', 'giga']
+    // }),
     getComponentInfo(TextArea),
     getComponentInfo(Toggle)
   ]