Merged in feat/sw-3271-move-chip-to-design-system (pull request #2659)

feat(SW-3271): Move Chip to design-system

* Move Chip to design-system


Approved-by: Joakim Jäderberg

packages/design-system/lib/components/Chip/chip.module.css

@@ -0,0 +1,43 @@
+div.chip {
+  --chip-text-color: var(--Base-Text-High-contrast);
+  --chip-background-color: var(--Base-Surface-Primary-light-Normal);
+  align-items: center;
+  color: var(--chip-text-color);
+  background-color: var(--chip-background-color);
+  border-radius: var(--Corner-radius-sm);
+  display: flex;
+  gap: var(--Spacing-x-half);
+  justify-content: center;
+}
+
+.chip.small {
+  padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
+}
+
+.chip.medium {
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.chip *,
+.chip svg * {
+  fill: var(--chip-text-color);
+}
+
+.chip.burgundy {
+  --chip-text-color: var(--Primary-Dark-On-Surface-Text);
+  --chip-background-color: var(--Base-Text-High-contrast);
+}
+
+.chip.transparent {
+  --chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
+  --chip-background-color: rgba(64, 57, 55, 0.9);
+}
+
+.chip.tag {
+  --chip-background-color: var(--Base-Surface-Subtle-Hover);
+}
+
+.chip.uiTextHighContrast {
+  --chip-background-color: var(--UI-Text-High-contrast);
+  --chip-text-color: var(--UI-Input-Controls-On-Fill-Normal);
+}

packages/design-system/lib/components/Chip/index.tsx

@@ -0,0 +1,27 @@
+import Footnote from '../Footnote'
+
+import { chipVariants } from './variants'
+
+import type { VariantProps } from 'class-variance-authority'
+
+interface ChipProps
+  extends React.HtmlHTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof chipVariants> {}
+
+export default function Chip({
+  children,
+  className,
+  size,
+  variant,
+}: ChipProps) {
+  const classNames = chipVariants({
+    className,
+    size,
+    variant,
+  })
+  return (
+    <Footnote asChild>
+      <div className={classNames}>{children}</div>
+    </Footnote>
+  )
+}

packages/design-system/lib/components/Chip/variants.ts

@@ -0,0 +1,23 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './chip.module.css'
+
+export const chipVariants = cva(styles.chip, {
+  variants: {
+    size: {
+      small: styles.small,
+      medium: styles.medium,
+    },
+    variant: {
+      default: styles.default,
+      burgundy: styles.burgundy,
+      transparent: styles.transparent,
+      tag: styles.tag,
+      uiTextHighContrast: styles.uiTextHighContrast,
+    },
+  },
+  defaultVariants: {
+    size: 'medium',
+    variant: 'default',
+  },
+})

packages/design-system/package.json

@@ -13,6 +13,7 @@
     "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
     "./Caption": "./lib/components/Caption/index.tsx",
     "./Card": "./lib/components/Card/index.tsx",
+    "./Chip": "./lib/components/Chip/index.tsx",
     "./ChipButton": "./lib/components/ChipButton/index.tsx",
     "./ChipLink": "./lib/components/ChipLink/index.tsx",
     "./Chips": "./lib/components/Chips/index.tsx",