feat: add experimental IssueLabel component (#4960)

* feat: add experimental Label component

* chore: run format

* rename + agree to use color2k

* adding color algo for hex colors (#4844)

* adding color algo for hex colors

* fix tests

* update snap name

* test(vrt): update snapshots

---------

Co-authored-by: Katie Langerman <[email protected]>
Co-authored-by: langermank <[email protected]>

* refactor: move IssueLabel to experimental

* chore: add changeset

* docs: update feature stories

* test(vrt): update snapshots

* adding functionality to match dotcom

* cleanup

* stories

* docs

* vrt

* lint

* remove disable

* snap

* fix vrt

* test(vrt): update snapshots

---------

Co-authored-by: Josh Black <[email protected]>
Co-authored-by: langermank <[email protected]>
Co-authored-by: Lukas Oppermann <[email protected]>
Co-authored-by: langermank <[email protected]>

.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,139 @@
+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--variant-auburn',
+  },
+  {
+    title: 'Blue',
+    id: 'experimental-components-issuelabel-features--variant-blue',
+  },
+  {
+    title: 'Brown',
+    id: 'experimental-components-issuelabel-features--variant-brown',
+  },
+  {
+    title: 'Coral',
+    id: 'experimental-components-issuelabel-features--variant-coral',
+  },
+  {
+    title: 'Cyan',
+    id: 'experimental-components-issuelabel-features--variant-cyan',
+  },
+  {
+    title: 'Gray',
+    id: 'experimental-components-issuelabel-features--variant-gray',
+  },
+  {
+    title: 'Green',
+    id: 'experimental-components-issuelabel-features--variant-green',
+  },
+  {
+    title: 'Indigo',
+    id: 'experimental-components-issuelabel-features--variant-indigo',
+  },
+  {
+    title: 'Lemon',
+    id: 'experimental-components-issuelabel-features--variant-lemon',
+  },
+  {
+    title: 'Lime',
+    id: 'experimental-components-issuelabel-features--variant-lime',
+  },
+  {
+    title: 'Olive',
+    id: 'experimental-components-issuelabel-features--variant-olive',
+  },
+  {
+    title: 'Orange',
+    id: 'experimental-components-issuelabel-features--variant-orange',
+  },
+  {
+    title: 'Pine',
+    id: 'experimental-components-issuelabel-features--variant-pine',
+  },
+  {
+    title: 'Pink',
+    id: 'experimental-components-issuelabel-features--variant-pink',
+  },
+  {
+    title: 'Plum',
+    id: 'experimental-components-issuelabel-features--variant-plum',
+  },
+  {
+    title: 'Purple',
+    id: 'experimental-components-issuelabel-features--variant-purple',
+  },
+  {
+    title: 'Red',
+    id: 'experimental-components-issuelabel-features--variant-red',
+  },
+  {
+    title: 'Teal',
+    id: 'experimental-components-issuelabel-features--variant-teal',
+  },
+  {
+    title: 'Yellow',
+    id: 'experimental-components-issuelabel-features--variant-yellow',
+  },
+  {
+    title: 'Button',
+    id: 'experimental-components-issuelabel-features--as-button',
+  },
+  {
+    title: 'Link',
+    id: 'experimental-components-issuelabel-features--as-link',
+  },
+  {
+    title: 'Group Of Labels',
+    id: 'experimental-components-issuelabel-features--group-of-labels',
+  },
+  {
+    title: 'Hex',
+    id: 'experimental-components-issuelabel-features--hex-color',
+  },
+] 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()
+          })
+        })
+      }
+    })
+  }
+})

packages/react/package.json

@@ -109,6 +109,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

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

packages/react/src/experimental/IssueLabel/IssueLabel.docs.json

@@ -0,0 +1,46 @@
+{
+  "id": "issue_label",
+  "name": "IssueLabel",
+  "status": "draft",
+  "a11yReviewed": false,
+  "stories": [],
+  "importPath": "@primer/react/experimental",
+  "props": [
+    {
+      "name": "fillColor",
+      "type": "string",
+      "description": "The hex code for a custom background color"
+    },
+    {
+      "name": "variant",
+      "type": "'pink'\n| 'plum'\n| 'purple'\n| 'indigo'\n| 'blue'\n| 'cyan'\n| 'teal'\n| 'pine'\n| 'green'\n| 'lime'\n| 'olive'\n| 'lemon'\n| 'yellow'\n| 'orange'\n| 'red'\n| 'coral'\n| 'gray'\n| 'brown'\n| 'auburn'",
+      "defaultValue": "'gray'",
+      "description": "Color variant for the background and text color"
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "description": "Class name for custom styling."
+    },
+    {
+      "name": "href",
+      "type": "string"
+    },
+    {
+      "name": "as",
+      "type": "React.ElementType",
+      "defaultValue": "'span'"
+    },
+    {
+      "name": "text",
+      "type": "string",
+      "description": "Label text."
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "description": "A unique identifier that can be associated with the label."
+    }
+  ],
+  "subcomponents": []
+}

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

@@ -0,0 +1,84 @@
+import React from 'react'
+import {IssueLabel} from '../IssueLabel'
+import type {Meta} from '@storybook/react'
+import {Stack} from '../../Stack'
+
+const meta = {
+  title: 'Experimental/Components/IssueLabel/Features',
+  component: IssueLabel,
+} satisfies Meta<typeof IssueLabel>
+
+export default meta
+
+export const VariantPink = () => <IssueLabel variant="pink" text="Issue label" />
+
+export const VariantPlum = () => <IssueLabel variant="plum" text="Issue label" />
+
+export const VariantPurple = () => <IssueLabel variant="purple" text="Issue label" />
+
+export const VariantIndigo = () => <IssueLabel variant="indigo" text="Issue label" />
+
+export const VariantBlue = () => <IssueLabel variant="blue" text="Issue label" />
+
+export const VariantCyan = () => <IssueLabel variant="cyan" text="Issue label" />
+
+export const VariantTeal = () => <IssueLabel variant="teal" text="Issue label" />
+
+export const VariantPine = () => <IssueLabel variant="pine" text="Issue label" />
+
+export const VariantGreen = () => <IssueLabel variant="green" text="Issue label" />
+
+export const VariantLime = () => <IssueLabel variant="lime" text="Issue label" />
+
+export const VariantOlive = () => <IssueLabel variant="olive" text="Issue label" />
+
+export const VariantLemon = () => <IssueLabel variant="lemon" text="Issue label" />
+
+export const VariantYellow = () => <IssueLabel variant="yellow" text="Issue label" />
+
+export const VariantOrange = () => <IssueLabel variant="orange" text="Issue label" />
+
+export const VariantRed = () => <IssueLabel variant="red" text="Issue label" />
+
+export const VariantCoral = () => <IssueLabel variant="coral" text="Issue label" />
+
+export const VariantGray = () => <IssueLabel variant="gray" text="Issue label" />
+
+export const VariantBrown = () => <IssueLabel variant="brown" text="Issue label" />
+
+export const VariantAuburn = () => <IssueLabel variant="auburn" text="Issue label" />
+
+export const HexColor = (args: {fillColor: `#${string}`}) => (
+  <IssueLabel text="Issue label" fillColor={args.fillColor} />
+)
+HexColor.args = {
+  fillColor: '#59B200',
+}
+HexColor.argTypes = {
+  fillColor: {control: {type: 'color'}},
+  variant: {table: {disable: true}},
+  text: {table: {disable: true}},
+  id: {table: {disable: true}},
+  className: {table: {disable: true}},
+  onClick: {table: {disable: true}},
+  onFocus: {table: {disable: true}},
+  as: {table: {disable: true}},
+  href: {table: {disable: true}},
+}
+
+export const AsLink = () => <IssueLabel href="/" text="Issue label" />
+
+export const AsButton = () => <IssueLabel text="Issue label" as="button" />
+
+export const OnClick = () => <IssueLabel text="Issue label" onClick={() => alert('clicked')} />
+
+export const GroupOfLabels = () => (
+  <Stack direction="horizontal" gap="condensed" wrap="wrap">
+    <IssueLabel variant="blue" text="Issue label" />
+    <IssueLabel variant="purple" text="Another label" />
+    <IssueLabel variant="green" text="A third label" />
+    <IssueLabel variant="orange" text="Issue label" />
+    <IssueLabel variant="yellow" text="Another label" />
+    <IssueLabel variant="brown" text="A third label" />
+  </Stack>
+)