feat(Checkbox): config redesign and implementation

shuriken-ui · Dec 6, 2023 · 3ead369 · 3ead369
1 parent 6ecbbf5
commit 3ead369
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 121 deletions.
diff --git a/src/plugins/components/checkbox/checkbox.component.ts b/src/plugins/components/checkbox/checkbox.component.ts
@@ -3,14 +3,13 @@ import { spread } from '@open-wc/lit-helpers'
 
 import type { CheckboxAttrs } from './checkbox.types'
 import * as variants from './checkbox.variants'
-import { e } from 'vitest/dist/reporters-2ff87305'
 
 /**
  * Primary UI component for user interaction
  */
 export const Checkbox = ({
   id,
-  shape = 'rounded',
+  rounded = 'sm',
   color = 'default',
   label,
   error,
@@ -25,7 +24,7 @@ export const Checkbox = ({
     <div
       class=${[
         'nui-checkbox',
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         color && variants.color[color],
         classes?.wrapper,
         '?disabled' in attrs && 'opacity-50',

diff --git a/src/plugins/components/checkbox/checkbox.config.ts b/src/plugins/components/checkbox/checkbox.config.ts
@@ -1,53 +1,97 @@
 export const key = 'checkbox' as const
 
 export const defaultConfig = {
+  rounded: {
+    sm: 'rounded',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    full: 'rounded-full',
+  },
   outer: {
     size: '5',
   },
   inner: {
-    border: 'muted-400',
-    borderDark: 'muted-700',
-    bg: 'white',
-    bgDark: 'muted-700',
     size: 'full',
+    background: {
+      light: 'white',
+      dark: 'muted-700',
+    },
+    border: {
+      light: 'muted-400',
+      dark: 'muted-700',
+    },
   },
-  check: {
-    size: '2.5',
-    duration: '300',
-  },
-  indeterminate: {
+  icon: {
     size: '2.5',
-    duration: '300',
+    indeterminate: {
+      size: '2.5',
+      transition: {
+        property: 'all',
+        duration: '300',
+      },
+    },
+    transition: {
+      property: 'all',
+      duration: '300',
+    },
   },
   input: {
     size: '5',
   },
-  labelText: {
-    text: 'muted-400',
-    font: 'sans',
-    textSize: 'sm',
+  label: {
+    font: {
+      family: 'sans',
+      size: 'sm',
+      color: {
+        light: 'muted-400',
+        dark: 'muted-400',
+      },
+    },
   },
   error: {
-    text: 'danger-600',
-    font: 'sans',
-    textSixe: 'xs',
+    font: {
+      family: 'sans',
+      size: 'xs',
+      color: {
+        light: 'danger-600',
+        dark: 'danger-600',
+      },
+    },
+  },
+  color: {
+    default: {
+      light: 'muted-600',
+      dark: 'muted-200',
+    },
+    light: {
+      light: 'white',
+      dark: 'white',
+    },
+    muted: {
+      light: 'muted-400',
+      dark: 'muted-400',
+    },
+    primary: {
+      light: 'primary-500',
+      dark: 'primary-500',
+    },
+    info: {
+      light: 'info-500',
+      dark: 'info-500',
+    },
+    success: {
+      light: 'success-500',
+      dark: 'success-500',
+    },
+    warning: {
+      light: 'warning-500',
+      dark: 'warning-500',
+    },
+    danger: {
+      light: 'danger-500',
+      dark: 'danger-500',
+    },
   },
-  rounded: {
-    smooth: 'md',
-    curved: 'lg',
-    full: 'full',
-  },
-  default: {
-    text: 'muted-600',
-    textDark: 'muted-200',
-  },
-  light: 'white',
-  muted: 'muted-400',
-  primary: 'primary-500',
-  info: 'info-500',
-  success: 'success-500',
-  warning: 'warning-500',
-  danger: 'danger-500',
 }
 
 export type CheckboxConfig = typeof defaultConfig

diff --git a/src/plugins/components/checkbox/checkbox.doc.mdx b/src/plugins/components/checkbox/checkbox.doc.mdx
@@ -18,7 +18,7 @@ Checkboxes are an essential part of any application. Shuriken UI checkboxes can
 
 <br />
 
-### Shape: straight
+### Rounded: none
 
 Checkboxes can have different shapes and colors. Below are examples of the straight shape.
 
@@ -34,7 +34,7 @@ Checkboxes can have different shapes and colors. Below are examples of the strai
 
 <br />
 
-### Shape: rounded
+### Rounded: sm
 
 Checkboxes can have different shapes and colors. Below are examples of the rounded shape.
 
@@ -50,7 +50,7 @@ Checkboxes can have different shapes and colors. Below are examples of the round
 
 <br />
 
-### Shape: smooth
+### Rounded: md
 
 Checkboxes can have different shapes and colors. Below are examples of the smooth shape.
 
@@ -66,7 +66,7 @@ Checkboxes can have different shapes and colors. Below are examples of the smoot
 
 <br />
 
-### Shape: curved
+### Rounded: lg
 
 Checkboxes can have different shapes and colors. Below are examples of the curved shape.
 
@@ -82,7 +82,7 @@ Checkboxes can have different shapes and colors. Below are examples of the curve
 
 <br />
 
-### Shape: full
+### Rounded: full
 
 Checkboxes can have different shapes and colors. Below are examples of the full shape.