From a415d79950c68ff8781f05cc902797aeafec7804 Mon Sep 17 00:00:00 2001
From: Robin Mulder <116208434+r-mulder@users.noreply.github.com>
Date: Thu, 16 May 2024 14:38:02 +0200
Subject: [PATCH] feat: add variant options with new colors (#2121)

In this PR I've updated the divider to support the new colors and have the options to choose which one to use.

Different colors are being used when using the new variant prop.
---
 .changeset/shiny-crews-sleep.md               |  5 +++
 .../src/components/Divider/Divider.css.ts     | 44 ++++++++++++++-----
 .../components/Divider/Divider.stories.tsx    | 18 ++++++--
 .../src/components/Divider/Divider.tsx        | 21 +++++++--
 4 files changed, 70 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/shiny-crews-sleep.md

diff --git a/.changeset/shiny-crews-sleep.md b/.changeset/shiny-crews-sleep.md
new file mode 100644
index 0000000000..eaa7e5dffc
--- /dev/null
+++ b/.changeset/shiny-crews-sleep.md
@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": minor
+---
+
+Added a new variant to apply different colors to the Divider component
diff --git a/packages/libs/react-ui/src/components/Divider/Divider.css.ts b/packages/libs/react-ui/src/components/Divider/Divider.css.ts
index 7da7458cf6..1e660f34ba 100644
--- a/packages/libs/react-ui/src/components/Divider/Divider.css.ts
+++ b/packages/libs/react-ui/src/components/Divider/Divider.css.ts
@@ -1,15 +1,35 @@
-import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { token } from '../../styles';
 import { atoms } from '../../styles/atoms.css';
-import { tokens } from '../../styles/index';
 
-export const dividerClass = style([
-  atoms({
-    width: '100%',
-    marginBlock: 'lg',
-    border: 'none',
-  }),
-  {
-    backgroundColor: tokens.kda.foundation.color.border.base.bold,
-    height: tokens.kda.foundation.border.width.hairline,
+export const dividerClass = recipe({
+  base: [
+    atoms({
+      width: '100%',
+      marginBlock: 'lg',
+      border: 'none',
+    }),
+    {
+      height: token('border.width.hairline'),
+    },
+  ],
+  variants: {
+    variant: {
+      subtle: {
+        backgroundColor: token('color.border.base.subtle'),
+      },
+      base: {
+        backgroundColor: token('color.border.base.default'),
+      },
+      bold: {
+        backgroundColor: token('color.border.base.bold'),
+      },
+      boldest: {
+        backgroundColor: token('color.border.base.boldest'),
+      },
+      highContrast: {
+        backgroundColor: token('color.border.base.high-contrast'),
+      },
+    },
   },
-]);
+});
diff --git a/packages/libs/react-ui/src/components/Divider/Divider.stories.tsx b/packages/libs/react-ui/src/components/Divider/Divider.stories.tsx
index a12835f063..63318c29b1 100644
--- a/packages/libs/react-ui/src/components/Divider/Divider.stories.tsx
+++ b/packages/libs/react-ui/src/components/Divider/Divider.stories.tsx
@@ -1,14 +1,26 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { withContentWidth } from '../../storyDecorators';
+import { getVariants } from '../../storyDecorators/getVariants';
 import { Card } from '../Card';
 import { Divider } from './Divider';
+import { dividerClass } from './Divider.css';
+
+const variants = getVariants(dividerClass);
 
 const meta: Meta = {
   title: 'Layout/Divider',
   decorators: [withContentWidth],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: variants.variant,
+    },
+  },
   parameters: {
-    status: { type: 'releaseCandidate' },
+    status: { type: 'stable' },
     docs: {
       description: {
         component:
@@ -24,7 +36,7 @@ type Story = StoryObj;
 export const Static: Story = {
   name: 'Divider',
 
-  render: () => {
+  render: (args) => {
     return (
       <>
         <Card>
@@ -35,7 +47,7 @@ export const Static: Story = {
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
           culpa qui officia deserunt mollit anim id est laborum.
-          <Divider />
+          <Divider {...args} />
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
diff --git a/packages/libs/react-ui/src/components/Divider/Divider.tsx b/packages/libs/react-ui/src/components/Divider/Divider.tsx
index 912c31a4f7..7bb531d1f6 100644
--- a/packages/libs/react-ui/src/components/Divider/Divider.tsx
+++ b/packages/libs/react-ui/src/components/Divider/Divider.tsx
@@ -1,16 +1,31 @@
+import type { RecipeVariants } from '@vanilla-extract/recipes';
 import cn from 'classnames';
 import type { ComponentPropsWithRef, FC } from 'react';
 import React from 'react';
 import { useSeparator } from 'react-aria';
 import { dividerClass } from './Divider.css';
 
-export interface IDividerProps extends ComponentPropsWithRef<'hr'> {}
+type Variants = NonNullable<RecipeVariants<typeof dividerClass>>;
 
-export const Divider: FC<IDividerProps> = ({ className, ...props }) => {
+export interface IDividerProps extends ComponentPropsWithRef<'hr'> {
+  variant?: Variants['variant'];
+}
+
+export const Divider: FC<IDividerProps> = ({
+  className,
+  variant = 'base',
+  ...props
+}) => {
   const { separatorProps } = useSeparator({
     ...props,
     elementType: 'hr',
     orientation: 'horizontal',
   });
-  return <hr className={cn(dividerClass, className)} {...separatorProps} />;
+
+  return (
+    <hr
+      className={cn(dividerClass({ variant }), className)}
+      {...separatorProps}
+    />
+  );
 };