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 <[email protected]>

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 }

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'
   ]
 ])
 

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>
 

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,35 +15,47 @@ 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>
 
 // 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'
+  }
+}

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>

stories/Switch/Switch.stories.ts → 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>
+  )
+}