From 84d1604ecf2c07b5584f7c5db2cd078c18847cbf Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Wed, 7 Aug 2024 10:52:00 -0700
Subject: [PATCH] Add `variant` prop to Heading (#4806)
* ui mob pair
* Create clever-birds-press.md
* test(vrt): update snapshots
* fix
* reset
* test(vrt): update snapshots
* try to only test light
* reset
* test(vrt): update snapshots
* fix test
* test(vrt): update snapshots
* lint
* Update packages/react/src/Heading/Heading.docs.json
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
* fix typo
* lint
* fix story name
* reset
* fix test name
---------
Co-authored-by: langermank <langermank@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
---
.changeset/clever-birds-press.md | 5 +
.../Heading-Default-linux.png | Bin 0 -> 10986 bytes
.../Heading-Large-linux.png | Bin 0 -> 9811 bytes
.../Heading-Medium-linux.png | Bin 0 -> 8258 bytes
.../Heading-Small-linux.png | Bin 0 -> 7464 bytes
e2e/components/Heading.test.ts | 93 +++++++++++++-----
packages/react/src/Heading/Heading.docs.json | 4 +
.../src/Heading/Heading.features.stories.tsx | 24 +++++
.../react/src/Heading/Heading.stories.tsx | 11 ++-
packages/react/src/Heading/Heading.tsx | 16 ++-
.../__snapshots__/NavList.test.tsx.snap | 12 +++
11 files changed, 136 insertions(+), 29 deletions(-)
create mode 100644 .changeset/clever-birds-press.md
create mode 100644 .playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Default-linux.png
create mode 100644 .playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Large-linux.png
create mode 100644 .playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Medium-linux.png
create mode 100644 .playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Small-linux.png
create mode 100644 packages/react/src/Heading/Heading.features.stories.tsx
diff --git a/.changeset/clever-birds-press.md b/.changeset/clever-birds-press.md
new file mode 100644
index 00000000000..e4d6d63354c
--- /dev/null
+++ b/.changeset/clever-birds-press.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add `variant` prop to Heading for small, medium and large styles
diff --git a/.playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Default-linux.png b/.playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Default-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..395d4eeef2c9e2c7752c973331300649903a57b2
GIT binary patch
literal 10986
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
literal 0
HcmV?d00001
diff --git a/.playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Large-linux.png b/.playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Large-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4e845c7341d3eb89d4ee6b0b5ff64cedb19dc5a
GIT binary patch
literal 9811
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
Q+#e-3XAh^EU#_J653DjG_y7O^
literal 0
HcmV?d00001
diff --git a/.playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Medium-linux.png b/.playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Medium-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf82b6f4a5a6c0412d7261fbf9e144fe98c92d1b
GIT binary patch
literal 8258
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
VTSCr#*Y+&z*paxyoI|Jo`9E6wv1tGR
literal 0
HcmV?d00001
diff --git a/.playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Small-linux.png b/.playwright/snapshots/components/Heading.test.ts-snapshots/Heading-Small-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..377508c45194464ed7c91f366f83997fb61ce3cd
GIT binary patch
literal 7464
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
literal 0
HcmV?d00001
diff --git a/e2e/components/Heading.test.ts b/e2e/components/Heading.test.ts
index 1c573a8b6e7..9d13fb2110a 100644
--- a/e2e/components/Heading.test.ts
+++ b/e2e/components/Heading.test.ts
@@ -1,33 +1,74 @@
import {test, expect} from '@playwright/test'
import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
test.describe('Heading', () => {
test.describe('Default', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'components-heading--default',
- globals: {
- colorScheme: theme,
- },
- })
-
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`Heading.Default.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'components-heading--default',
- globals: {
- colorScheme: theme,
- },
- })
- await expect(page).toHaveNoViolations()
- })
- })
- }
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-heading--default',
+ })
+
+ // Default state
+ expect(await page.screenshot()).toMatchSnapshot(`Heading.Default.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-heading--default',
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+
+ test.describe('Small', () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-heading-features--small',
+ })
+
+ expect(await page.screenshot()).toMatchSnapshot(`Heading.Small.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-heading-features--small',
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+
+ test.describe('Medium', () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-heading-features--medium',
+ })
+
+ expect(await page.screenshot()).toMatchSnapshot(`Heading.Medium.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-heading-features--medium',
+ })
+ await expect(page).toHaveNoViolations()
+ })
+ })
+
+ test.describe('Large', () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: 'components-heading-features--large',
+ })
+
+ // Default state
+ expect(await page.screenshot()).toMatchSnapshot(`Heading.Large.png`)
+ })
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: 'components-heading-features--large',
+ })
+ await expect(page).toHaveNoViolations()
+ })
})
})
diff --git a/packages/react/src/Heading/Heading.docs.json b/packages/react/src/Heading/Heading.docs.json
index 5a63b0dd836..05a9a0214dd 100644
--- a/packages/react/src/Heading/Heading.docs.json
+++ b/packages/react/src/Heading/Heading.docs.json
@@ -14,6 +14,10 @@
"name": "as",
"type": "React.ElementType",
"defaultValue": "\"h2\""
+ },
+ {
+ "name": "variant",
+ "type": "'large' | 'medium' | 'small'"
}
]
}
diff --git a/packages/react/src/Heading/Heading.features.stories.tsx b/packages/react/src/Heading/Heading.features.stories.tsx
new file mode 100644
index 00000000000..59dd2c6cb80
--- /dev/null
+++ b/packages/react/src/Heading/Heading.features.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import type {StoryFn} from '@storybook/react'
+import Heading from './Heading'
+
+export default {
+ title: 'Components/Heading/Features',
+}
+
+export const TestSx: StoryFn<typeof Heading> = () => (
+ <Heading
+ sx={{
+ fontSize: 2,
+ fontWeight: 'normal',
+ }}
+ >
+ Heading with sx override
+ </Heading>
+)
+
+export const Small: StoryFn<typeof Heading> = () => <Heading variant="small">Small heading</Heading>
+
+export const Medium: StoryFn<typeof Heading> = () => <Heading variant="medium">Medium heading</Heading>
+
+export const Large: StoryFn<typeof Heading> = () => <Heading variant="large">Large heading</Heading>
diff --git a/packages/react/src/Heading/Heading.stories.tsx b/packages/react/src/Heading/Heading.stories.tsx
index 6e1cb334638..ecaa9062e98 100644
--- a/packages/react/src/Heading/Heading.stories.tsx
+++ b/packages/react/src/Heading/Heading.stories.tsx
@@ -6,6 +6,7 @@ export default {
title: 'Components/Heading',
component: Heading,
} as Meta<typeof Heading>
+
export const Default: StoryFn<typeof Heading> = () => <Heading>Default H2 Heading</Heading>
export const Playground: StoryFn<typeof Heading> = args => <Heading {...args}>Heading</Heading>
@@ -17,8 +18,14 @@ Playground.args = {
Playground.argTypes = {
as: {
control: {
- type: 'select',
- options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+ type: 'radio',
+ },
+ options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+ },
+ variant: {
+ control: {
+ type: 'radio',
},
+ options: ['large', 'medium', 'small'],
},
}
diff --git a/packages/react/src/Heading/Heading.tsx b/packages/react/src/Heading/Heading.tsx
index 048057004bd..78c14c77f58 100644
--- a/packages/react/src/Heading/Heading.tsx
+++ b/packages/react/src/Heading/Heading.tsx
@@ -9,15 +9,28 @@ import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../uti
type StyledHeadingProps = {
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+ variant?: 'large' | 'medium' | 'small'
} & SxProp
const StyledHeading = styled.h2<StyledHeadingProps>`
font-weight: ${get('fontWeights.bold')};
font-size: ${get('fontSizes.5')};
margin: 0;
+
+ &:where([data-variant='large']) {
+ font: var(--text-title-shorthand-large, 600 32px / 1.5 ${get('fonts.normal')});
+ }
+
+ &:where([data-variant='medium']) {
+ font: var(--text-title-shorthand-medium, 600 20px / 1.6 ${get('fonts.normal')});
+ }
+
+ &:where([data-variant='small']) {
+ font: var(--text-title-shorthand-small, 600 16px / 1.5 ${get('fonts.normal')});
+ }
${sx};
`
-const Heading = forwardRef(({as: Component = 'h2', ...props}, forwardedRef) => {
+const Heading = forwardRef(({as: Component = 'h2', variant, ...props}, forwardedRef) => {
const innerRef = React.useRef<HTMLHeadingElement>(null)
useRefObjectAsForwardedRef(forwardedRef, innerRef)
@@ -43,6 +56,7 @@ const Heading = forwardRef(({as: Component = 'h2', ...props}, forwardedRef) => {
{...props}
// @ts-ignore shh
ref={innerRef}
+ data-variant={variant}
/>
)
}) as PolymorphicForwardRefComponent<'h2', StyledHeadingProps>
diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
index dfae7671884..c46f758c1af 100644
--- a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -480,6 +480,18 @@ exports[`NavList renders with groups 1`] = `
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
}
+.c3:where([data-variant='large']) {
+ font: var(--text-title-shorthand-large,600 32px / 1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");
+}
+
+.c3:where([data-variant='medium']) {
+ font: var(--text-title-shorthand-medium,600 20px / 1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");
+}
+
+.c3:where([data-variant='small']) {
+ font: var(--text-title-shorthand-small,600 16px / 1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");
+}
+
.c0 {
margin: 0;
padding-inline-start: 0;