Merged in develop (pull request #14)

Develop
voidagency · Oct 13, 2020 · c91ed3d · c91ed3d
2 parents de3d8d2 + 037e092
commit c91ed3d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/src/components/Typography/Text.js b/src/components/Typography/Text.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Box } from '../Box';
-
+import { withTheme } from 'styled-components';
+import { themeGet } from '@styled-system/theme-get';
 
 export const Text = ({ children, as = 'p', ...rest }) => <Box {...rest} as={as} __css={{
     fontSize: 'inherit',
@@ -30,20 +31,26 @@ export const Paragraph = ({
     );
 }
 
-export const Heading = ({
-    children,
-    level = '1',
-    variant = "heading.default",
-    ...rest
-}) => <Text
-    __css={{
-        fontSize: `heading${level}`,
-        lineHeight: `heading${level}`,
-        mb: "small",
-    }}
-    variant={variant}
-    {...rest}
-    as={`h${level}`}>{children}</Text>
+export const Heading = withTheme(
+    ({
+        children,
+        level = '1',
+        variant = "heading.default",
+        ...rest
+    }) => {
+        const variantName = themeGet(variant + '.h'+level)(rest) ? variant + '.h'+level : variant;
+
+        return <Text
+        __css={{
+            fontSize: `heading${level}`,
+            lineHeight: `heading${level}`,
+            mb: "small",
+        }}
+        variant={variantName}
+        {...rest}
+        as={`h${level}`}>{children}</Text>
+    }
+)
 
 
 

diff --git a/src/components/Typography/stories/Heading.stories.js b/src/components/Typography/stories/Heading.stories.js
@@ -17,7 +17,7 @@ export const HeadingComponent = () => {
     return (
         <div>
             {levelOption.map((level, index) => {
-                return <Heading level={level}
+                return <Heading key={index} level={level}
                          color={select("color",colorOption, 'black', themeId )}
                          fontFamily={select("fontFamily", fontFamilyOption, 'sans', themeId)}
                 >