feat: add experimental IssueLabel component

.changeset/three-coins-tell.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for experimental IssueLabel component

e2e/components/IssueLabel.test.ts

@@ -0,0 +1,159 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const variants = [
+  {
+    title: 'Default',
+    id: 'experimental-components-issuelabel--default',
+  },
+  {
+    title: 'Auburn',
+    id: 'experimental-components-issuelabel-features--auburn',
+  },
+  {
+    title: 'Blue',
+    id: 'experimental-components-issuelabel-features--blue',
+  },
+  {
+    title: 'Brown',
+    id: 'experimental-components-issuelabel-features--brown',
+  },
+  {
+    title: 'Coral',
+    id: 'experimental-components-issuelabel-features--coral',
+  },
+  {
+    title: 'Cyan',
+    id: 'experimental-components-issuelabel-features--cyan',
+  },
+  {
+    title: 'Gray',
+    id: 'experimental-components-issuelabel-features--gray',
+  },
+  {
+    title: 'Green',
+    id: 'experimental-components-issuelabel-features--green',
+  },
+  {
+    title: 'Indigo',
+    id: 'experimental-components-issuelabel-features--indigo',
+  },
+  {
+    title: 'Lemon',
+    id: 'experimental-components-issuelabel-features--lemon',
+  },
+  {
+    title: 'Lime',
+    id: 'experimental-components-issuelabel-features--lime',
+  },
+  {
+    title: 'Olive',
+    id: 'experimental-components-issuelabel-features--olive',
+  },
+  {
+    title: 'Orange',
+    id: 'experimental-components-issuelabel-features--orange',
+  },
+  {
+    title: 'Pine',
+    id: 'experimental-components-issuelabel-features--pine',
+  },
+  {
+    title: 'Pink',
+    id: 'experimental-components-issuelabel-features--pink',
+  },
+  {
+    title: 'Plum',
+    id: 'experimental-components-issuelabel-features--plum',
+  },
+  {
+    title: 'Purple',
+    id: 'experimental-components-issuelabel-features--purple',
+  },
+  {
+    title: 'Red',
+    id: 'experimental-components-issuelabel-features--red',
+  },
+  {
+    title: 'Teal',
+    id: 'experimental-components-issuelabel-features--teal',
+  },
+  {
+    title: 'Yellow',
+    id: 'experimental-components-issuelabel-features--yellow',
+  },
+] as const
+
+const sizes = [
+  {
+    title: 'Size: Large',
+    id: 'experimental-components-issuelabel-features--size-large',
+  },
+  {
+    title: 'Size: Small',
+    id: 'experimental-components-issuelabel-features--size-small',
+  },
+] as const
+
+test.describe('IssueLabel', () => {
+  for (const story of variants) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            await page.setViewportSize({
+              width: 320,
+              height: 320,
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`IssueLabel.${story.title}.${theme}.png`)
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+
+  for (const story of sizes) {
+    test.describe(story.title, () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: story.id,
+        })
+
+        await page.setViewportSize({
+          width: 320,
+          height: 320,
+        })
+
+        // Default state
+        expect(await page.screenshot()).toMatchSnapshot(`IssueLabel.${story.title}.png`)
+      })
+
+      test('axe @aat', async ({page}) => {
+        await visit(page, {
+          id: story.id,
+        })
+        await expect(page).toHaveNoViolations()
+      })
+    })
+  }
+})

packages/react/package.json

@@ -102,6 +102,7 @@
     "deepmerge": "^4.3.1",
     "focus-visible": "^5.2.0",
     "history": "^5.0.0",
+    "hsluv": "1.0.1",
     "lodash.isempty": "^4.4.0",
     "lodash.isobject": "^3.0.2",
     "react-intersection-observer": "^9.4.3",

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -286,6 +286,9 @@ exports[`@primer/react/experimental should not update exports without a semver c
   "type HiddenProps",
   "InlineMessage",
   "type InlineMessageProps",
+  "type InteractiveMarkdownViewerProps",
+  "IssueLabel",
+  "type IssueLabelProps",
   "KeybindingHint",
   "type KeybindingHintProps",
   "type NavigationProps",

packages/react/src/experimental/IssueLabel/IssueLabel.features.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import {IssueLabel} from '../IssueLabel'
+import type {Meta} from '@storybook/react'
+import type {Hex} from './IssueLabel'
+
+const meta = {
+  title: 'Experimental/Components/IssueLabel/Features',
+  component: IssueLabel,
+} satisfies Meta<typeof IssueLabel>
+
+export default meta
+
+export const Pink = () => <IssueLabel variant="pink">Issue label</IssueLabel>
+
+export const Plum = () => <IssueLabel variant="plum">Issue label</IssueLabel>
+
+export const Purple = () => <IssueLabel variant="purple">Issue label</IssueLabel>
+
+export const Indigo = () => <IssueLabel variant="indigo">Issue label</IssueLabel>
+
+export const Blue = () => <IssueLabel variant="blue">Issue label</IssueLabel>
+
+export const Cyan = () => <IssueLabel variant="cyan">Issue label</IssueLabel>
+
+export const Teal = () => <IssueLabel variant="teal">Issue label</IssueLabel>
+
+export const Pine = () => <IssueLabel variant="pine">Issue label</IssueLabel>
+
+export const Green = () => <IssueLabel variant="green">Issue label</IssueLabel>
+
+export const Lime = () => <IssueLabel variant="lime">Issue label</IssueLabel>
+
+export const Olive = () => <IssueLabel variant="olive">Issue label</IssueLabel>
+
+export const Lemon = () => <IssueLabel variant="lemon">Issue label</IssueLabel>
+
+export const Yellow = () => <IssueLabel variant="yellow">Issue label</IssueLabel>
+
+export const Orange = () => <IssueLabel variant="orange">Issue label</IssueLabel>
+
+export const Red = () => <IssueLabel variant="red">Issue label</IssueLabel>
+
+export const Coral = () => <IssueLabel variant="coral">Issue label</IssueLabel>
+
+export const Gray = () => <IssueLabel variant="gray">Issue label</IssueLabel>
+
+export const Brown = () => <IssueLabel variant="brown">Issue label</IssueLabel>
+
+export const Auburn = () => <IssueLabel variant="auburn">Issue label</IssueLabel>
+
+export const SizeLarge = () => <IssueLabel size="large">Issue label</IssueLabel>
+
+export const SizeSmall = () => <IssueLabel size="small">Issue label</IssueLabel>
+
+export const HexColor = (hex: Hex) => <IssueLabel fillColor={hex}>Issue label</IssueLabel>
+HexColor.args = {
+  hex: '#59B200',
+  variant: undefined,
+}
+HexColor.argTypes = {
+  hex: {control: {type: 'color'}},
+  variant: {control: {disable: true}},
+}

packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import {IssueLabel} from '../IssueLabel'
+import type {Meta, StoryObj} from '@storybook/react'
+
+const meta = {
+  title: 'Experimental/Components/IssueLabel',
+  component: IssueLabel,
+} satisfies Meta<typeof IssueLabel>
+
+export default meta
+
+export const Default = () => <IssueLabel>Issue label</IssueLabel>
+
+export const Playground: StoryObj<typeof IssueLabel> = {
+  render: args => <IssueLabel {...args}>Issue label</IssueLabel>,
+  args: {},
+  argTypes: {
+    fillColor: {
+      hex: undefined,
+      control: {type: 'color', presetColors: ['red', 'green', 'blue', 'brown', 'black', 'white', 'salmon', 'orange']},
+    },
+    size: {
+      control: 'select',
+      option: ['small', 'large'],
+    },
+    variant: {
+      control: 'select',
+      options: [
+        'pink',
+        'plum',
+        'purple',
+        'indigo',
+        'blue',
+        'cyan',
+        'teal',
+        'pine',
+        'green',
+        'lime',
+        'olive',
+        'lemon',
+        'yellow',
+        'orange',
+        'red',
+        'coral',
+        'gray',
+        'brown',
+        'auburn',
+      ],
+    },
+  },
+}