From d9ec32a437adb5db6d1bb2d6b6cedaf048fa2c35 Mon Sep 17 00:00:00 2001
From: Andrea Forni <1233582+andreaforni@users.noreply.github.com>
Date: Tue, 9 Jan 2024 10:25:12 +0100
Subject: [PATCH] Fix/261 switch (#282)

* fix: update enabled/disabled colors

* fix: add Switch with Label story

* fix: add label with hint text

* fix: update hint color on dark theme. With label position in switch stories

---------

Co-authored-by: Andrea Forni <andrea.forni@everstream.ai>
---
 src/components/Label/index.tsx                | 35 ++++++++++++++-----
 src/components/Switch/index.tsx               | 10 +++---
 stories/Label/Docs.mdx                        | 15 ++++++--
 stories/Label/Label.example.tsx               | 14 --------
 stories/Label/Label.stories.ts                | 26 ++++++++++----
 stories/Switch/Docs.mdx                       | 10 ++++++
 .../{Switch.stories.ts => Switch.stories.tsx} | 22 +++++++++++-
 7 files changed, 93 insertions(+), 39 deletions(-)
 delete mode 100644 stories/Label/Label.example.tsx
 rename stories/Switch/{Switch.stories.ts => Switch.stories.tsx} (63%)

diff --git a/src/components/Label/index.tsx b/src/components/Label/index.tsx
index 11960d01..e7cd11d2 100644
--- a/src/components/Label/index.tsx
+++ b/src/components/Label/index.tsx
@@ -2,7 +2,6 @@
 
 import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
-import type { LabelProps as DefaultLabelProps } from '@radix-ui/react-label'
 import { cva, type VariantProps } from 'class-variance-authority'
 
 import { cn } from '@/lib/utils'
@@ -24,17 +23,35 @@ const labelVariants = cva(
 
 interface LabelProps
   extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,
-    VariantProps<typeof labelVariants> {}
+    VariantProps<typeof labelVariants> {
+  hintText?: string
+}
+
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   LabelProps
->(({ className, size, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants({ size }), className)}
-    {...props}
-  />
-))
+>(({ className, size, hintText, ...props }, ref) => {
+  const label = (
+    <LabelPrimitive.Root
+      ref={ref}
+      className={cn(labelVariants({ size }), className)}
+      {...props}
+    />
+  )
+
+  if (hintText) {
+    return (
+      <div className="flex flex-col">
+        {label}
+        <div className="font-semibold	text-xs text-foreground-muted dark:text-foreground-muted-dark">
+          {hintText}
+        </div>
+      </div>
+    )
+  }
+
+  return label
+})
 Label.displayName = LabelPrimitive.Root.displayName
 
 export { Label, LabelProps }
diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx
index 0a24c5b5..829a32bf 100644
--- a/src/components/Switch/index.tsx
+++ b/src/components/Switch/index.tsx
@@ -23,14 +23,14 @@ const switchVariants = cva([
     'disabled:cursor-not-allowed'
   ],
   [
-    'dark:data-[state=checked]:bg-blue-300', //TODO: change to accent/dark when colour changes are made
-    'dark:bg-foreground-subtle-dark',
+    'dark:enabled:data-[state=checked]:bg-accent-dark',
+    'dark:enabled:bg-foreground-subtle-dark',
     'dark:disabled:bg-grey-200'
   ],
   [
-    'data-[state=checked]:bg-accent',
-    'data-[state=unchecked]:bg-foreground-subtle',
-    'data-[disabled]:bg-grey-200'
+    'enabled:data-[state=checked]:bg-accent',
+    'enabled:bg-foreground-subtle',
+    'disabled:bg-grey-200'
   ]
 ])
 
diff --git a/stories/Label/Docs.mdx b/stories/Label/Docs.mdx
index 539eaed9..13633776 100644
--- a/stories/Label/Docs.mdx
+++ b/stories/Label/Docs.mdx
@@ -9,16 +9,20 @@ import * as LabelStories from './Label.stories'
 ## Sizes
 
 ### Default
-
 <Canvas of={LabelStories.Default} />
 
 ### Medium
-
 <Canvas of={LabelStories.Medium} />
+
 ### Large
 <Canvas of={LabelStories.Large} />
+
 ### Extra Large
 <Canvas of={LabelStories.ExtraLarge} />
+
+## With hint text
+<Canvas of={LabelStories.WithHint} />
+
 ## Attributes
 
 <table>
@@ -37,9 +41,14 @@ import * as LabelStories from './Label.stories'
     <td>`string`</td>
     <td>-</td>
   </tr>
+  <tr>
+    <td>hintText</td>
+    <td>`string`</td>
+    <td>-</td>
+  </tr>
   <tr>
     <td>asChild</td>
-    <td>boolean</td>
+    <td>`boolean`</td>
     <td>`false`</td>
   </tr>
 
diff --git a/stories/Label/Label.example.tsx b/stories/Label/Label.example.tsx
deleted file mode 100644
index 4d7c2c16..00000000
--- a/stories/Label/Label.example.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Label, LabelProps } from '@/components/Label'
-
-interface LabelDemoProps extends LabelProps {
-  labelText: string
-}
-const LabelDemo = (props: LabelDemoProps) => {
-  return (
-    <Label className={props.className} size={props.size}>
-      {props.labelText}
-    </Label>
-  )
-}
-
-export { LabelDemo }
diff --git a/stories/Label/Label.stories.ts b/stories/Label/Label.stories.ts
index d35aea97..1699f6ea 100644
--- a/stories/Label/Label.stories.ts
+++ b/stories/Label/Label.stories.ts
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { LabelDemo } from './Label.example'
+import { Label } from '@/index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'Form/Label',
-  component: LabelDemo,
+  component: Label,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'centered'
@@ -15,10 +15,13 @@ const meta = {
     size: {
       options: ['xs', 'sm', 'md', 'lg', 'xl '],
       control: 'radio'
+    },
+    children: {
+      name: 'label'
     }
   }
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-} satisfies Meta<typeof LabelDemo>
+} satisfies Meta<typeof Label>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -26,24 +29,33 @@ type Story = StoryObj<typeof meta>
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Default: Story = {
   args: {
-    labelText: 'Default-sized'
+    children: 'Default-sized',
+    size: 'sm'
   }
 }
 export const Medium: Story = {
   args: {
-    labelText: 'Medium-sized',
+    children: 'Medium-sized',
     size: 'md'
   }
 }
 export const Large: Story = {
   args: {
-    labelText: 'Large-sized',
+    children: 'Large-sized',
     size: 'lg'
   }
 }
 export const ExtraLarge: Story = {
   args: {
-    labelText: 'Extra-large-sized',
+    children: 'Extra-large-sized',
     size: 'xl'
   }
 }
+
+export const WithHint: Story = {
+  args: {
+    children: 'Label',
+    hintText: 'This is a hint',
+    size: 'sm'
+  }
+}
diff --git a/stories/Switch/Docs.mdx b/stories/Switch/Docs.mdx
index 1cf56b1a..13c6a921 100644
--- a/stories/Switch/Docs.mdx
+++ b/stories/Switch/Docs.mdx
@@ -16,6 +16,16 @@ A switch is a small, typically toggleable element that allows users to turn a sp
 
 <Canvas of={SwitchStories.Disabled} />
 
+## With label
+
+<Canvas of={SwitchStories.WithLabel} />
+
+## With label and hint
+
+<Canvas of={SwitchStories.WithLabelAndHint} />
+
+
+
 ## Attributes
 
 <table>
diff --git a/stories/Switch/Switch.stories.ts b/stories/Switch/Switch.stories.tsx
similarity index 63%
rename from stories/Switch/Switch.stories.ts
rename to stories/Switch/Switch.stories.tsx
index 5dcca204..2b55b686 100644
--- a/stories/Switch/Switch.stories.ts
+++ b/stories/Switch/Switch.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { Switch } from '@/index'
+import { Switch, Label } from '@/index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
@@ -25,3 +25,23 @@ export const Disabled: Story = {
     disabled: true
   }
 }
+
+export const WithLabel: Story = {
+  render: props => (
+    <div className="flex items-center space-x-1">
+      <Switch id="switchId1" {...props} />
+      <Label htmlFor="switchId1">Label</Label>
+    </div>
+  )
+}
+
+export const WithLabelAndHint: Story = {
+  render: props => (
+    <div className="flex items-center space-x-1">
+      <Switch id="switchId1" {...props} />
+      <Label htmlFor="switchId1" hintText="This is a hint">
+        Label
+      </Label>
+    </div>
+  )
+}