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(