refactor: move divider to design system

remove not used variants and duplicate colors

packages/design-system/lib/components/Divider/Divider.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Divider } from './Divider'
+
+const meta: Meta<typeof Divider> = {
+  title: 'Components/Divider',
+  component: Divider,
+  argTypes: {},
+}
+
+export default meta
+
+type Story = StoryObj<typeof Divider>
+
+export const Default: Story = {
+  args: {},
+}

packages/design-system/lib/components/Divider/Divider.tsx

@@ -0,0 +1,8 @@
+import { dividerVariants } from './variants'
+
+import type { DividerProps } from './types'
+
+export function Divider({ className, color, variant }: DividerProps) {
+  const classNames = dividerVariants({ className, color, variant })
+  return <hr className={classNames} />
+}

packages/design-system/lib/components/Divider/divider.module.css

@@ -0,0 +1,38 @@
+.divider {
+  pointer-events: none;
+  border: 0;
+}
+
+.horizontal {
+  height: 1px;
+  width: 100%;
+}
+
+.vertical {
+  height: 100%;
+  width: 1px;
+}
+
+.burgundy {
+  background-color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  background-color: var(--Primary-Dark-On-Surface-Text);
+}
+
+.peach {
+  background-color: var(--Primary-Light-On-Surface-Divider);
+}
+
+.white {
+  background-color: var(--UI-Opacity-White-100);
+}
+
+.Border-Divider-Subtle {
+  background-color: var(--Border-Divider-Subtle);
+}
+
+.Border-Divider-Default {
+  background-color: var(--Border-Divider-Default);
+}

packages/design-system/lib/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from './Divider'

packages/design-system/lib/components/Divider/types.ts

@@ -0,0 +1,7 @@
+import type { VariantProps } from 'class-variance-authority'
+
+import type { dividerVariants } from './variants'
+
+export interface DividerProps
+  extends Omit<React.HTMLAttributes<HTMLHRElement>, 'color'>,
+    VariantProps<typeof dividerVariants> {}

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

@@ -0,0 +1,24 @@
+import { cva } from 'class-variance-authority'
+
+import styles from './divider.module.css'
+
+export const dividerVariants = cva(styles.divider, {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+      peach: styles.peach,
+      white: styles.white,
+      'Border/Divider/Default': styles['Border-Divider-Default'],
+      'Border/Divider/Subtle': styles['Border-Divider-Subtle'],
+    },
+    variant: {
+      horizontal: styles.horizontal,
+      vertical: styles.vertical,
+    },
+  },
+  defaultVariants: {
+    color: 'Border/Divider/Default',
+    variant: 'horizontal',
+  },
+})

packages/design-system/package.json

@@ -9,6 +9,7 @@
     "./ChipButton": "./dist/components/ChipButton/index.js",
     "./ChipLink": "./dist/components/ChipLink/index.js",
     "./Chips": "./dist/components/Chips/index.js",
+    "./Divider": "./dist/components/Divider/index.js",
     "./Select": "./dist/components/Select/index.js",
     "./Typography": "./dist/components/Typography/index.js",
     "./RegularRateCard": "./dist/components/RateCard/Regular/index.js",