Sync Label component with PVC's Label component

.changeset/stale-badgers-search.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Introduces a draft for component to replace the existing Label component

docs/content/drafts/Label2.mdx

@@ -0,0 +1,93 @@
+---
+title: Label
+componentId: label2
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/Label2
+storybook: '/react/storybook?path=/story/label-label2--label'
+description: Use Label components to add contextual metadata to a design.
+---
+
+## Examples
+
+### Basic
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+
+render(<Label>Default</Label>)
+```
+
+### Appearances
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+render(
+  <>
+    <Label>Default</Label>
+    <Label scheme="primary">Primary</Label>
+    <Label scheme="secondary">Secondary</Label>
+    <Label scheme="accent">Info</Label>
+    <Label scheme="success">Success</Label>
+    <Label scheme="attention">Warning</Label>
+    <Label scheme="severe">Severe</Label>
+    <Label scheme="danger">Danger</Label>
+    <Label scheme="done">Done</Label>
+    <Label scheme="sponsors">Sponsors</Label>
+  </>
+)
+```
+
+### Sizes
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+render(
+  <>
+    <Label>Small (default)</Label>
+    <Label size="large">Large</Label>
+  </>
+)
+```
+
+## Props
+
+### Label
+
+<PropsTable>
+  <PropsTableRow
+    name="appearance"
+    type="'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done' | 'sponsors'"
+    defaultValue="'default'"
+    description="The color of the label"
+  />
+  <PropsTableRow
+    name="size"
+    type="'small' | 'large'"
+    defaultValue="'small'"
+    description="How large the label is rendered"
+  />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    hasStorybookStories: true,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>

src/Label2.tsx

@@ -0,0 +1,114 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {get} from './constants'
+
+interface Props {
+  /** The color of the label */
+  scheme?: LabelColorOptions
+  /** How large the label is rendered */
+  size?: LabelSizeKeys
+}
+interface LabelColorConfig {
+  borderColor: (props: Props) => React.CSSProperties['color']
+  textColor?: (props: Props) => React.CSSProperties['color']
+}
+export type LabelColorOptions =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'success'
+  | 'attention'
+  | 'severe'
+  | 'danger'
+  | 'done'
+  | 'sponsors'
+
+type LabelSizeKeys = 'small' | 'large'
+
+export const labelColorMap: Record<LabelColorOptions, LabelColorConfig> = {
+  default: {
+    borderColor: get('colors.border.default')
+  },
+  primary: {
+    borderColor: get('colors.fg.default')
+  },
+  secondary: {
+    borderColor: get('colors.border.muted'),
+    textColor: get('colors.fg.muted')
+  },
+  accent: {
+    borderColor: get('colors.accent.emphasis'),
+    textColor: get('colors.accent.fg')
+  },
+  success: {
+    borderColor: get('colors.success.emphasis'),
+    textColor: get('colors.success.fg')
+  },
+  attention: {
+    borderColor: get('colors.attention.emphasis'),
+    textColor: get('colors.attention.fg')
+  },
+  severe: {
+    borderColor: get('colors.severe.emphasis'),
+    textColor: get('colors.severe.fg')
+  },
+  danger: {
+    borderColor: get('colors.danger.emphasis'),
+    textColor: get('colors.danger.fg')
+  },
+  done: {
+    borderColor: get('colors.done.fg'),
+    textColor: get('colors.done.emphasis')
+  },
+  sponsors: {
+    borderColor: get('colors.sponsors.fg'),
+    textColor: get('colors.sponsors.emphasis')
+  }
+}
+
+const badgeBoxStyle: Record<LabelSizeKeys, Record<'height' | 'padding', number>> = {
+  small: {
+    height: 20,
+    padding: 7 // hard-coded to align with Primer ViewCompnents and Primer CSS
+  },
+  large: {
+    height: 24,
+    padding: 10 // hard-coded to align with Primer ViewCompnents and Primer CSS
+  }
+}
+
+const LabelContainer = styled.span<Props>`
+  align-items: center;
+  border-width: 1px;
+  border-radius: 999px;
+  border-style: solid;
+  display: inline-flex;
+  font-weight: ${get('fontWeights.bold')};
+  font-size: ${get('fontSizes.0')};
+  line-height: 1;
+  white-space: nowrap;
+
+  ${({scheme = 'default', size = 'small'}) => {
+    return css`
+      background-color: transparent;
+      border-color: ${labelColorMap[scheme].borderColor};
+      color: ${labelColorMap[scheme].textColor};
+      height: ${badgeBoxStyle[size].height}px;
+      padding: 0 ${badgeBoxStyle[size].padding}px;
+    `
+  }}
+`
+
+const Label: React.FC<Props> = ({children, size, ...other}) => (
+  <LabelContainer size={size} {...other}>
+    {children}
+  </LabelContainer>
+)
+
+Label.defaultProps = {
+  size: 'small',
+  scheme: 'default'
+}
+
+export default Label