diff --git a/e2e/__tests__/__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png b/e2e/__tests__/__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png index 257b306a..512a2893 100644 Binary files a/e2e/__tests__/__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png and b/e2e/__tests__/__image_snapshots__/text-test-js-components-text-with-kind-modifiers-1-snap.png differ diff --git a/src/components/Text/Text.js b/src/components/Text/Text.js index 8beb7e74..9cc5b4ae 100644 --- a/src/components/Text/Text.js +++ b/src/components/Text/Text.js @@ -23,7 +23,21 @@ 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({ @@ -31,7 +45,7 @@ function Text({ children, ...rest }: TextProps) { - return { children || text }; + return { children || text }; } Text.defaultProps = { diff --git a/src/components/Text/Text.stories.js b/src/components/Text/Text.stories.js index b559c888..d7a6db57 100644 --- a/src/components/Text/Text.stories.js +++ b/src/components/Text/Text.stories.js @@ -30,6 +30,11 @@ common.story = { export const withKindModifiers = () => ( + H1 kind: { placeholderText } + H2 kind: { placeholderText } + H3 kind: { placeholderText } + H4 kind: { placeholderText } + H5 kind: { placeholderText } Subtitle kind: { placeholderText } Body kind: { placeholderText } Overline-1 kind: { placeholderText } diff --git a/src/components/Text/Text.theme.js b/src/components/Text/Text.theme.js index 26494210..2c0a5677 100644 --- 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(