feat(checkbox): add intent prop and use opacity-dim-3 class for disab…

…led components
adevinta · Mar 17, 2023 · 54ac320 · 54ac320
1 parent 222465a
commit 54ac320
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 16 deletions.
diff --git a/packages/components/checkbox/src/Checkbox.stories.mdx b/packages/components/checkbox/src/Checkbox.stories.mdx
@@ -36,3 +36,6 @@ import { Checkbox } from "@spark-ui/checkbox"
 
 <StoryHeading label="DefaultChecked" />
 <Story name="DefaultChecked" story={stories.DefaultChecked} />
+
+<StoryHeading label="Colors" />
+<Story name="Variants/Colors" story={stories.Colors} />
diff --git a/packages/components/checkbox/src/Checkbox.stories.tsx b/packages/components/checkbox/src/Checkbox.stories.tsx
@@ -2,20 +2,58 @@ import { ReactLiveBlock } from '@docs/helpers/ReactLiveBlock'
 
 import { Checkbox } from './Checkbox'
 
-export const Default = ({ id = 'c1', ...rest }) => (
+export const Default = () => (
   <ReactLiveBlock scope={{ Checkbox }}>
     <div className="flex items-center gap-sm">
-      <Checkbox id={id} {...rest} />
+      <Checkbox id={'c1'} />
       <label
-        htmlFor={id}
-        className="cursor-pointer pl-[4px] text-body-1 font-medium peer-disabled:cursor-not-allowed  peer-disabled:opacity-50"
+        htmlFor={'c1'}
+        className="cursor-pointer pl-[4px] text-body-1 font-medium peer-disabled:cursor-not-allowed  peer-disabled:opacity-dim-3"
       >
         Accept terms and conditions.
       </label>
     </div>
   </ReactLiveBlock>
 )
 
-export const Disabled = () => <Default id={'c2'} disabled={true} />
+export const Disabled = () => (
+  <ReactLiveBlock scope={{ Checkbox }}>
+    <div className="flex items-center gap-sm">
+      <Checkbox id={'c2'} disabled />
+      <label
+        htmlFor={'c2'}
+        className="cursor-pointer pl-[4px] text-body-1 font-medium peer-disabled:cursor-not-allowed  peer-disabled:opacity-dim-3"
+      >
+        Accept terms and conditions.
+      </label>
+    </div>
+  </ReactLiveBlock>
+)
+
+export const DefaultChecked = () => (
+  <ReactLiveBlock scope={{ Checkbox }}>
+    <div className="flex items-center gap-sm">
+      <Checkbox id={'c3'} defaultChecked />
+      <label
+        htmlFor={'c3'}
+        className="cursor-pointer pl-[4px] text-body-1 font-medium peer-disabled:cursor-not-allowed  peer-disabled:opacity-dim-3"
+      >
+        Accept terms and conditions.
+      </label>
+    </div>
+  </ReactLiveBlock>
+)
+const colors = ['primary', 'secondary', 'success', 'alert', 'error', 'info', 'neutral']
 
-export const DefaultChecked = () => <Default id={'c3'} defaultChecked />
+export const Colors = () => (
+  <ReactLiveBlock scope={{ Checkbox }}>
+    {colors.map(color => {
+      return (
+        <div className="flex items-center gap-sm" key={color}>
+          <Checkbox id={color} intent={color} />
+          <label htmlFor={color}>{color}</label>
+        </div>
+      )
+    })}
+  </ReactLiveBlock>
+)
diff --git a/packages/components/checkbox/src/Checkbox.tsx b/packages/components/checkbox/src/Checkbox.tsx
@@ -38,8 +38,8 @@ export interface CheckboxProps
 export const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   CheckboxProps
->(({ ...props }, ref) => (
-  <CheckboxPrimitive.Root ref={ref} className={styles()} {...props}>
+>(({ intent, ...props }, ref) => (
+  <CheckboxPrimitive.Root ref={ref} className={styles({ intent })} {...props}>
     <CheckboxPrimitive.Indicator className="flex items-center justify-center text-surface">
       <CheckIcon />
     </CheckboxPrimitive.Indicator>

diff --git a/packages/components/checkbox/src/Checkbox.variants.tsx b/packages/components/checkbox/src/Checkbox.variants.tsx
@@ -1,12 +1,33 @@
 import { cva, VariantProps } from 'class-variance-authority'
 
-export const styles = cva([
-  'peer h-[20px] w-[20px] rounded-sm border-md border-outline bg-transparent items-center justify-center',
-  'radix-state-checked:bg-primary radix-state-checked:border-primary',
-  'radix-state-indeterminate:bg-primary radix-state-indeterminate:border-primary',
-  'focus:outline-none focus:ring-2 focus:ring focus:ring-offset-0 focus:ring-[#000000]',
-  'hover:outline-none hover:ring-2 hover:ring hover:ring-offset-0',
-  'radix-disabled:opacity-50 radix-disabled:cursor-not-allowed radix-disabled:hover:ring-0',
-])
+const defaultVariants = {
+  intent: 'primary',
+} as const
+
+export const styles = cva(
+  [
+    'peer h-[20px] w-[20px] rounded-sm border-md border-outline bg-transparent items-center justify-center',
+    'radix-state-unchecked:border-outline',
+    'radix-disabled:opacity-dim-3 radix-disabled:cursor-not-allowed radix-disabled:hover:ring-0',
+    'radix-state-checked:bg-primary radix-state-checked:border-primary',
+    'radix-state-indeterminate:bg-primary radix-state-indeterminate:border-primary',
+    'focus:outline-none focus:ring-2 focus:ring focus:ring-offset-0 focus:ring-[#000000]',
+    'hover:outline-none hover:ring-2 hover:ring hover:ring-offset-0',
+  ],
+  {
+    variants: {
+      intent: {
+        primary: ['border-primary', 'radix-state-checked:bg-primary'],
+        secondary: ['border-secondary', 'radix-state-checked:bg-secondary'],
+        success: ['border-success', 'radix-state-checked:bg-success'],
+        alert: ['border-alert', 'radix-state-checked:bg-alert'],
+        error: ['border-error', 'radix-state-checked:bg-error'],
+        info: ['border-info', 'radix-state-checked:bg-info'],
+        neutral: ['border-neutral', 'radix-state-checked:bg-neutral'],
+      },
+    },
+    defaultVariants,
+  }
+)
 
 export type StylesProps = VariantProps<typeof styles>