chore: added new colors for data inputs from daisyui 2.35 (#259)

daisyui · Dec 3, 2022 · d54bc32 · d54bc32
1 parent aafa403
commit d54bc32
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 49 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "generate": "plop"
   },
   "peerDependencies": {
-    "daisyui": "^2.24.0",
+    "daisyui": "^2.42.1",
     "react": ">=16",
     "react-dom": ">=16",
     "tailwindcss": "^3.0.23"

diff --git a/src/Checkbox/Checkbox.stories.tsx b/src/Checkbox/Checkbox.stories.tsx
@@ -33,14 +33,20 @@ const FormTemplate: Story<CheckboxProps> = (args) => {
 export const FormControl = FormTemplate.bind({})
 FormControl.args = {}
 
-export const FormControlPrimary = FormTemplate.bind({})
-FormControlPrimary.args = { color: 'primary' }
-
-export const FormControlSecondary = FormTemplate.bind({})
-FormControlSecondary.args = { color: 'secondary' }
-
-export const FormControlAccent = FormTemplate.bind({})
-FormControlAccent.args = { color: 'accent' }
+export const Colors: Story<CheckboxProps> = (args) => {
+  return (
+    <div className="flex flex-col items-center float-left gap-2">
+      <Checkbox {...args} defaultChecked color="primary" />
+      <Checkbox {...args} defaultChecked color="secondary" />
+      <Checkbox {...args} defaultChecked color="accent" />
+      <Checkbox {...args} defaultChecked color="success" />
+      <Checkbox {...args} defaultChecked color="warning" />
+      <Checkbox {...args} defaultChecked color="info" />
+      <Checkbox {...args} defaultChecked color="error" />
+    </div>
+  )
+}
+Colors.args = {}
 
 export const Sizes: Story<CheckboxProps> = (args) => {
   return (

diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
@@ -9,7 +9,7 @@ import { twMerge } from 'tailwind-merge'
 
 import {
   IComponentBaseProps,
-  ComponentBrandColors,
+  ComponentColor,
   ComponentSize,
 } from '../types'
 
@@ -18,7 +18,7 @@ export type CheckboxProps = Omit<
   'size'
 > &
   IComponentBaseProps & {
-    color?: ComponentBrandColors
+    color?: ComponentColor
     size?: ComponentSize
     indeterminate?: boolean
   }

diff --git a/src/Radio/Radio.stories.tsx b/src/Radio/Radio.stories.tsx
@@ -21,14 +21,18 @@ const Template: Story<RadioProps> = (args) => {
 export const Default = Template.bind({})
 Default.args = {}
 
-export const PrimaryColor = Template.bind({})
-PrimaryColor.args = { color: 'primary' }
-
-export const SecondaryColor = Template.bind({})
-SecondaryColor.args = { color: 'secondary' }
-
-export const AccentColor = Template.bind({})
-AccentColor.args = { color: 'accent' }
+export const Colors: Story<RadioProps> = (args) => (
+  <div className="flex flex-col items-center float-left gap-2">
+    <Radio {...args} defaultChecked color="primary" />
+    <Radio {...args} defaultChecked color="secondary" />
+    <Radio {...args} defaultChecked color="accent" />
+    <Radio {...args} defaultChecked color="success" />
+    <Radio {...args} defaultChecked color="warning" />
+    <Radio {...args} defaultChecked color="info" />
+    <Radio {...args} defaultChecked color="error" />
+  </div>
+)
+Colors.args = {}
 
 export const Disabled = Template.bind({})
 Disabled.args = { disabled: true }

diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx
@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge'
 
 import {
   IComponentBaseProps,
-  ComponentBrandColors,
+  ComponentColor,
   ComponentSize,
 } from '../types'
 
@@ -13,7 +13,7 @@ export type RadioProps = Omit<
   'size'
 > &
   IComponentBaseProps & {
-    color?: ComponentBrandColors
+    color?: ComponentColor
     size?: ComponentSize
   }
 

diff --git a/src/Range/Range.stories.tsx b/src/Range/Range.stories.tsx
@@ -18,18 +18,24 @@ Default.args = {}
 export const WithSteps = Template.bind({})
 WithSteps.args = { step: 25 }
 
-export const PrimaryColor = Template.bind({})
-PrimaryColor.args = { color: 'primary' }
-
-export const SecondaryColor = Template.bind({})
-SecondaryColor.args = { color: 'secondary' }
-
-export const AccentColor = Template.bind({})
-AccentColor.args = { color: 'accent' }
+export const Colors: Story<RangeProps> = (args) => {
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <Range {...args} defaultValue="20" color="primary" />
+      <Range {...args} defaultValue="30" color="secondary" />
+      <Range {...args} defaultValue="40" color="accent" />
+      <Range {...args} defaultValue="50" color="success" />
+      <Range {...args} defaultValue="60" color="warning" />
+      <Range {...args} defaultValue="70" color="info" />
+      <Range {...args} defaultValue="80" color="error" />
+    </div>
+  )
+}
+Colors.args = {}
 
 export const Sizes: Story<RangeProps> = (args) => {
   return (
-    <div className="flex flex-col gap-2">
+    <div className="w-full flex flex-col gap-2">
       <Range {...args} defaultValue="40" size="xs" />
       <Range {...args} defaultValue="50" size="sm" />
       <Range {...args} defaultValue="60" size="md" />

diff --git a/src/Range/Range.tsx b/src/Range/Range.tsx
@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge'
 
 import {
   IComponentBaseProps,
-  ComponentBrandColors,
+  ComponentColor,
   ComponentSize,
 } from '../types'
 
@@ -13,7 +13,7 @@ export type RangeProps = Omit<
   'size'
 > &
   IComponentBaseProps & {
-    color?: ComponentBrandColors
+    color?: ComponentColor
     size?: ComponentSize
   }
 

diff --git a/src/Toggle/Toggle.stories.tsx b/src/Toggle/Toggle.stories.tsx
@@ -29,14 +29,20 @@ const FormTemplate: Story<ToggleProps> = (args) => {
 export const WithLabelAndForm = FormTemplate.bind({})
 WithLabelAndForm.args = {}
 
-export const PrimaryColor = FormTemplate.bind({})
-PrimaryColor.args = { color: 'primary' }
-
-export const SecondaryColor = FormTemplate.bind({})
-SecondaryColor.args = { color: 'secondary' }
-
-export const AccentColor = FormTemplate.bind({})
-AccentColor.args = { color: 'accent' }
+export const Colors: Story<ToggleProps> = (args) => {
+  return (
+    <div className="flex flex-col items-center float-left gap-2">
+      <Toggle {...args} defaultChecked color="primary" />
+      <Toggle {...args} defaultChecked color="secondary" />
+      <Toggle {...args} defaultChecked color="accent" />
+      <Toggle {...args} defaultChecked color="success" />
+      <Toggle {...args} defaultChecked color="warning" />
+      <Toggle {...args} defaultChecked color="info" />
+      <Toggle {...args} defaultChecked color="error" />
+    </div>
+  )
+}
+Colors.args = {}
 
 export const Disabled = Template.bind({})
 Disabled.args = { disabled: true }

diff --git a/src/Toggle/Toggle.tsx b/src/Toggle/Toggle.tsx
@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge'
 
 import {
   IComponentBaseProps,
-  ComponentBrandColors,
+  ComponentColor,
   ComponentSize,
 } from '../types'
 
@@ -13,7 +13,7 @@ export type ToggleProps = Omit<
   'size'
 > &
   IComponentBaseProps & {
-    color?: ComponentBrandColors
+    color?: ComponentColor
     size?: ComponentSize
   }