Merge 5c41033 into 2ab2b3c

.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

@@ -30,4 +30,88 @@ test.describe('Heading', () => {
       })
     }
   })
+
+  test.describe('Small', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-heading--small',
+            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--small',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Medium', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-heading--medium',
+            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--medium',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Large', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-heading--large',
+            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--large',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

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

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

packages/react/src/Heading/Heading.featires.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',
+}
+
+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;