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

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add `variant` prop to Heading for small, medium and large styles

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()
+    })
   })
 })

packages/react/src/Heading/Heading.docs.json

@@ -14,6 +14,10 @@
       "name": "as",
       "type": "React.ElementType",
       "defaultValue": "\"h2\""
+    },
+    {
+      "name": "variant",
+      "type": "'large' | 'medium' | 'small'"
     }
   ]
 }

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>

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'],
   },
 }

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>

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;