Merge pull request #395 from 8base/feat-add-text-variants

feat: add variants to the Text component

src/components/Grid/Grid.stories.js

@@ -138,6 +138,17 @@ export const withGap = () => (
         <Block />
       </Grid.Box>
     </Grid.Layout>
+    <Grid.Layout inline gap="custom" customGap="64px" columns="auto auto auto">
+      <Grid.Box>
+        <Block>custom</Block>
+      </Grid.Box>
+      <Grid.Box>
+        <Block />
+      </Grid.Box>
+      <Grid.Box>
+        <Block />
+      </Grid.Box>
+    </Grid.Layout>
   </Column>
 );
 

src/components/Grid/GridLayout.js

@@ -9,7 +9,9 @@ type GridLayoutProps = {
   /** when true then stretch to full width */
   stretch?: boolean,
   /** possbile spaces between grid items */
-  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'none',
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'none' | 'custom',
+  /** custom grid-gap value (it is required if the gap set to custom) */
+  customGap?: string,
   /** when true then set inline-grid */
   inline?: boolean,
   /** possible paddings of the grid layout */
@@ -70,7 +72,7 @@ const [StyledTag, theme] = createThemeTag(name, {
 
     return style;
   },
-  modifiers: {
+  modifiers: (props) => ({
     gap: {
       xs: {
         gridGap: '4px',
@@ -91,6 +93,9 @@ const [StyledTag, theme] = createThemeTag(name, {
         gridGap: '40px',
       },
       none: {},
+      custom: {
+        gridGap: props.customGap,
+      },
     },
     padding: {
       none: {},
@@ -115,7 +120,7 @@ const [StyledTag, theme] = createThemeTag(name, {
       width: '100%',
       maxWidth: '100%',
     },
-  },
+  }),
 });
 
 class GridLayout extends React.PureComponent<GridLayoutProps> {

src/components/Paper/Paper.theme.js

@@ -11,7 +11,7 @@ const [PaperTag, theme] = createThemeTag(name, ({ COLORS, SIZES }: *) => ({
 
     background: COLORS.WHITE,
     color: COLORS.BLACK,
-    boxShadow: '0 1px 3px 0 rgba(50,50,93,.14), 0 4px 6px 0 rgba(112,157,199,.08)',
+    boxShadow: '0px 2px 10px rgb(50 60 71 / 10%)',
     position: 'relative',
     overflow: 'hidden',
   },

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 = {

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>

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(