feat(checkbox): add neutral and info intents

adevinta · Apr 28, 2023 · 50c5954 · 50c5954
1 parent 94e4ec0
commit 50c5954
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/components/checkbox/src/Checkbox.stories.tsx b/packages/components/checkbox/src/Checkbox.stories.tsx
@@ -73,7 +73,7 @@ export const ControlledState: StoryFn = _args => {
   )
 }
 
-const intent = ['primary', 'success', 'alert', 'error'] as const
+const intent = ['primary', 'success', 'alert', 'error', 'info', 'neutral'] as const
 
 export const Intent: StoryFn = _args => (
   <>

diff --git a/packages/components/checkbox/src/CheckboxInput.styles.ts b/packages/components/checkbox/src/CheckboxInput.styles.ts
@@ -11,7 +11,7 @@ export const inputStyles = cva(
   ],
   {
     variants: {
-      intent: makeVariants<'intent', ['primary', 'success', 'alert', 'error']>({
+      intent: makeVariants<'intent', ['primary', 'success', 'alert', 'error', 'info', 'neutral']>({
         primary: [
           'spark-state-unchecked:border-outline',
           'spark-state-indeterminate:border-primary spark-state-indeterminate:bg-primary',
@@ -32,6 +32,16 @@ export const inputStyles = cva(
           'spark-state-indeterminate:border-error spark-state-indeterminate:bg-error',
           'spark-state-checked:border-error spark-state-checked:bg-error',
         ],
+        info: [
+          'spark-state-unchecked:border-info',
+          'spark-state-indeterminate:border-info spark-state-indeterminate:bg-info',
+          'spark-state-checked:border-info spark-state-checked:bg-info',
+        ],
+        neutral: [
+          'spark-state-unchecked:border-neutral',
+          'spark-state-indeterminate:border-neutral spark-state-indeterminate:bg-neutral',
+          'spark-state-checked:border-neutral spark-state-checked:bg-neutral',
+        ],
       }),
     },
     defaultVariants: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -73,7 +73,7 @@ export const ControlledState: StoryFn = _args => { @@
       )
     }
-    const intent = ['primary', 'success', 'alert', 'error'] as const
+    const intent = ['primary', 'success', 'alert', 'error', 'info', 'neutral'] as const
     export const Intent: StoryFn = _args => (
       <>
@@ Expand Down @@