add text variants

8base · Apr 7, 2021 · 10f2a86 · 10f2a86
1 parent 941c1f8
commit 10f2a86
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 2 deletions.
diff --git a/...__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png b/...__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png
diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js
@@ -23,15 +23,29 @@ type TextProps = {
   /** possible types of the css cursor property */
   cursor?: 'pointer' | 'default' | 'auto',
   /** modern text kinds */
-  kind?: 'overline-2' | 'overline-1' | 'small-2' | 'small-1' | 'body' | 'subtitle',
+  kind?: 'overline-2' | 'overline-1' | 'small-2' | 'small-1' | 'body' | 'subtitle' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5',
+};
+
+const TAG_NAMES = {
+  'overline-2': 'span',
+  'overline-1': 'span',
+  'small-2': 'span',
+  'small-1': 'span',
+  body: 'span',
+  subtitle: 'span',
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
 };
 
 function Text({
   text,
   children,
   ...rest
 }: TextProps) {
-  return <TextTag { ...rest } tagName="span">{ children || text }</TextTag>;
+  return <TextTag { ...rest } tagName={ TAG_NAMES[rest.kind || 'body'] }>{ children || text }</TextTag>;
 }
 
 Text.defaultProps = {

diff --git a/src/components/Text/Text.stories.js b/src/components/Text/Text.stories.js
@@ -30,6 +30,11 @@ common.story = {
 
 export const withKindModifiers = () => (
   <Column>
+    <Text kind="h1">H1 kind: { placeholderText }</Text>
+    <Text kind="h2">H2 kind: { placeholderText }</Text>
+    <Text kind="h3">H3 kind: { placeholderText }</Text>
+    <Text kind="h4">H4 kind: { placeholderText }</Text>
+    <Text kind="h5">H5 kind: { placeholderText }</Text>
     <Text kind="subtitle">Subtitle kind: { placeholderText }</Text>
     <Text kind="body">Body kind: { placeholderText }</Text>
     <Text kind="overline-1">Overline-1 kind: { placeholderText }</Text>

diff --git a/src/components/Text/Text.theme.js b/src/components/Text/Text.theme.js
@@ -30,6 +30,21 @@ const [TextTag, theme] = createThemeTag(name, ({ COLORS, FONTS }: *): * => ({
       subtitle: {
         ...FONTS.SUBTITLE,
       },
+      h1: {
+        ...FONTS.H1,
+      },
+      h2: {
+        ...FONTS.H2,
+      },
+      h3: {
+        ...FONTS.H3,
+      },
+      h4: {
+        ...FONTS.H4,
+      },
+      h5: {
+        ...FONTS.H5,
+      },
     },
 
     color: fp.mapValues(