feat: migrate Heading to TypeScript (#594)

* feat(components): migrate Heading to TypeScript BREAKING CHANGE: The Heading component doesn't export sizes anymore. Instead of writing `size={Heading.GIGA}`, write `size="giga"`. feature/typescript-heading * fix: use single string placeholder in spec names feature/typescript-heading
sumup-oss · May 27, 2020 · 4675ef1 · 4675ef1
1 parent 9444fb0
commit 4675ef1
Show file tree

Hide file tree

Showing 18 changed files with 325 additions and 376 deletions.
diff --git a/.storybook/components/Icons.js b/.storybook/components/Icons.js
@@ -160,7 +160,7 @@ const Icons = () => {
       ) : (
         group('category', activeIcons).map(({ category, items }) => (
           <Category key={category}>
-            <Heading as="h3" size={Heading.GIGA}>
+            <Heading as="h3" size="giga">
               {category}
             </Heading>
             <List>

diff --git a/.storybook/components/Teaser.js b/.storybook/components/Teaser.js
@@ -42,7 +42,7 @@ const Wrapper = styled(Card)(
 const Teaser = ({ title, children, ...props }) => (
   <ThemeProvider theme={light}>
     <Wrapper shadow={Card.DOUBLE}>
-      <Heading as="h2" size={Heading.GIGA}>
+      <Heading as="h2" size="giga">
         {title}
       </Heading>
 

diff --git a/.storybook/util/theme.js b/.storybook/util/theme.js
@@ -42,17 +42,17 @@ const subHeadingStyles = theme => css`
 export const components = {
   h1: withThemeProvider(Heading, {
     as: 'h1',
-    size: Heading.ZETTA,
+    size: 'zetta',
     css: headingStyles
   }),
   h2: withThemeProvider(Heading, {
     as: 'h2',
-    size: Heading.PETA,
+    size: 'peta',
     css: headingStyles
   }),
   h3: withThemeProvider(Heading, {
     as: 'h3',
-    size: Heading.GIGA,
+    size: 'giga',
     css: headingStyles
   }),
   h4: withThemeProvider(SubHeading, {

diff --git a/docs/advanced/theme.story.mdx b/docs/advanced/theme.story.mdx
@@ -202,13 +202,13 @@ Avoid using `theme.typography` directly in your styles, rather use the specializ
 #### Headings
 
 <Preview>
-  <Type size={Heading.ZETTA} component={Heading} name="headings" />
-  <Type size={Heading.EXA} component={Heading} name="headings" />
-  <Type size={Heading.PETA} component={Heading} name="headings" />
-  <Type size={Heading.TERA} component={Heading} name="headings" />
-  <Type size={Heading.GIGA} component={Heading} name="headings" />
-  <Type size={Heading.MEGA} component={Heading} name="headings" />
-  <Type size={Heading.KILO} component={Heading} name="headings" />
+  <Type size="zetta" component={Heading} name="headings" />
+  <Type size="exa" component={Heading} name="headings" />
+  <Type size="peta" component={Heading} name="headings" />
+  <Type size="tera" component={Heading} name="headings" />
+  <Type size="giga" component={Heading} name="headings" />
+  <Type size="mega" component={Heading} name="headings" />
+  <Type size="kilo" component={Heading} name="headings" />
 </Preview>
 
 #### Subheading

diff --git a/scripts/static-styles/config.js b/scripts/static-styles/config.js
@@ -23,7 +23,6 @@ import {
   ButtonGroup,
   Card,
   Checkbox,
-  Heading,
   Hr,
   Image,
   Input,
@@ -147,17 +146,17 @@ export default {
     getComponentInfo(Checkbox),
     // TODO: Make React DocGen work with TypeScript
     // getComponentInfo(Hamburger),
-    getComponentInfo(Heading, {
-      size: [
-        Heading.KILO,
-        Heading.MEGA,
-        Heading.GIGA,
-        Heading.TERA,
-        Heading.PETA,
-        Heading.EXA,
-        Heading.ZETTA
-      ]
-    }),
+    // getComponentInfo(Heading, {
+    //   size: [
+    //     "kilo",
+    //     "mega",
+    //     "giga",
+    //     "tera",
+    //     "peta",
+    //     "exa",
+    //     "zetta"
+    //   ]
+    // }),
     { name: 'hr', component: Hr },
     { name: 'image', component: Image },
     getComponentInfo(Input, {