Add variant prop to Heading

.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;