Merged in feat/sw-3145-move-iconchip-to-design-system (pull request #2588)

feat(SW-3145): Move IconChip to design-system

* Move IconChip to design-system


Approved-by: Hrishikesh Vaipurkar

packages/design-system/lib/components/IconChip/iconChip.module.css

@@ -0,0 +1,22 @@
+.chip {
+  display: flex;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  border-radius: var(--Corner-radius-sm);
+}
+
+.blue {
+  background-color: var(--Scandic-Blue-00);
+  color: var(--UI-Semantic-Information);
+}
+
+.green {
+  background-color: var(--Scandic-Green-00);
+  color: var(--UI-Semantic-Success);
+}
+
+.red {
+  background-color: var(--Scandic-Red-00);
+  color: var(--UI-Semantic-Error);
+}

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

@@ -0,0 +1,26 @@
+import { iconChipVariants } from './variants'
+
+interface IconChipProps {
+  color: 'blue' | 'green' | 'red' | null | undefined
+  icon: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export default function IconChip({
+  color,
+  icon,
+  className,
+  children,
+}: IconChipProps) {
+  const classNames = iconChipVariants({
+    color: color,
+    className: className,
+  })
+  return (
+    <div className={classNames}>
+      {icon}
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,13 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './iconChip.module.css'
+
+export const iconChipVariants = cva(styles.chip, {
+  variants: {
+    color: {
+      blue: styles.blue,
+      green: styles.green,
+      red: styles.red,
+    },
+  },
+})

packages/design-system/package.json

@@ -20,6 +20,7 @@
     "./Form/ErrorMessage": "./dist/components/Form/ErrorMessage/index.js",
     "./Form/Phone": "./dist/components/Form/Phone/index.js",
     "./Form/RadioCard": "./dist/components/Form/RadioCard/index.js",
+    "./IconChip": "./dist/components/IconChip/index.js",
     "./Input": "./dist/components/Input/index.js",
     "./Label": "./dist/components/Label/index.js",
     "./OldDSButton": "./dist/components/OldDSButton/index.js",