feat(FullscreenDropfile): add new color prop

shuriken-ui · Feb 21, 2024 · 93022c8 · 93022c8
1 parent 1ca7540
commit 93022c8
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 10 deletions.
diff --git a/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.component.ts b/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.component.ts
@@ -9,14 +9,19 @@ import * as variants from './fullscreen-dropfile.variants'
  */
 export const FullscreenDropfile = ({
   label = 'Drop your files',
+  color = 'primary',
   icon,
   isDropping,
   classes,
   ...attrs
 }: FullscreenDropfileAttrs) => {
   return html`
     <div
-      class=${['nui-fullscreen-dropfile', classes?.wrapper]
+      class=${[
+        'nui-fullscreen-dropfile',
+        color && variants.color[color],
+        classes?.wrapper,
+      ]
         .filter(Boolean)
         .join(' ')}
       ${spread(attrs)}

diff --git a/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.config.ts b/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.config.ts
@@ -13,10 +13,20 @@ export const defaultConfig = {
     size: '10',
     font: {
       size: '6xl',
-      color: {
-        light: 'primary-500',
-        dark: 'primary-500',
-      },
+    },
+  },
+  color: {
+    primary: {
+      light: 'primary-500',
+      dark: 'primary-500',
+    },
+    dark: {
+      light: 'muted-900',
+      dark: 'muted-100',
+    },
+    black: {
+      light: 'black',
+      dark: 'white',
     },
   },
   border: {

diff --git a/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.stories.ts b/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.stories.ts
@@ -9,7 +9,13 @@ const meta = {
   title: 'Shuriken UI/Form/Fullscreen Dropfile',
   // tags: ['autodocs'],
   render: (args) => FullscreenDropfile(args),
-  argTypes: {},
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['primary', 'dark', 'black'],
+      defaultValue: 'primary',
+    },
+  },
 } satisfies Meta<FullscreenDropfileAttrs>
 
 export default meta

diff --git a/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.types.ts b/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.types.ts
@@ -3,6 +3,7 @@ import type { PropertyVariant } from '~/types/utils'
 export interface FullscreenDropfileProps extends Record<string, unknown> {
   label?: string
   filterFileDropped?: (file: File) => boolean
+  color?: 'primary' | 'dark' | 'black'
   classes?: {
     wrapper?: string | string[]
   }

diff --git a/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.variants.ts b/src/plugins/components/fullscreen-dropfile/fullscreen-dropfile.variants.ts
@@ -1 +1,7 @@
-export {}
+import type { FullscreenDropfileVariant } from './fullscreen-dropfile.types'
+
+export const color = {
+  primary: 'nui-dropfile-primary',
+  dark: 'nui-dropfile-dark',
+  black: 'nui-dropfile-black',
+} as const satisfies FullscreenDropfileVariant<'color'>
diff --git a/src/plugins/components/fullscreen-dropfile/index.ts b/src/plugins/components/fullscreen-dropfile/index.ts
@@ -41,8 +41,7 @@ export default plugin(({ addComponents, theme }) => {
               {},
             //Icon
             '.nui-fullscreen-dropfile-icon': {
-              [`@apply h-${config.icon.size} w-${config.icon.size} text-${config.icon.font.color.light} dark:text-${config.icon.font.color.dark}`]:
-                {},
+              [`@apply h-${config.icon.size} w-${config.icon.size}`]: {},
             },
             //Label
             '.nui-fullscreen-dropfile-label': {
@@ -52,6 +51,48 @@ export default plugin(({ addComponents, theme }) => {
           },
         },
       },
+      //Color: primary
+      '&.nui-dropfile-primary': {
+        '.nui-fullscreen-dropfile-inner': {
+          '.nui-fullscreen-dropfile-container': {
+            '.nui-fullscreen-dropfile-content': {
+              //Icon
+              '.nui-fullscreen-dropfile-icon': {
+                [`@apply text-${config.color.primary.light} dark:text-${config.color.primary.dark}`]:
+                  {},
+              },
+            },
+          },
+        },
+      },
+      //Color: dark
+      '&.nui-dropfile-dark': {
+        '.nui-fullscreen-dropfile-inner': {
+          '.nui-fullscreen-dropfile-container': {
+            '.nui-fullscreen-dropfile-content': {
+              //Icon
+              '.nui-fullscreen-dropfile-icon': {
+                [`@apply text-${config.color.dark.light} dark:text-${config.color.dark.dark}`]:
+                  {},
+              },
+            },
+          },
+        },
+      },
+      //Color: black
+      '&.nui-dropfile-black': {
+        '.nui-fullscreen-dropfile-inner': {
+          '.nui-fullscreen-dropfile-container': {
+            '.nui-fullscreen-dropfile-content': {
+              //Icon
+              '.nui-fullscreen-dropfile-icon': {
+                [`@apply text-${config.color.black.light} dark:text-${config.color.black.dark}`]:
+                  {},
+              },
+            },
+          },
+        },
+      },
     },
   })
 }, config)
diff --git a/src/plugins/components/input-file/input-file.stories.ts b/src/plugins/components/input-file/input-file.stories.ts
@@ -13,7 +13,7 @@ const meta = {
     color: {
       control: { type: 'select' },
       options: ['primary', 'dark', 'black'],
-      defaultValue: 'default',
+      defaultValue: 'primary',
     },
     rounded: {
       control: { type: 'select' },