fix: avatar dark light img, add listbox storybook

shuriken-ui · Sep 13, 2023 · 7e49211 · 7e49211
1 parent 3e11ae6
commit 7e49211
Show file tree

Hide file tree

Showing 9 changed files with 2,432 additions and 10 deletions.
diff --git a/src/plugins/components/autocomplete/autocomplete.test.ts b/src/plugins/components/autocomplete/autocomplete.test.ts
@@ -9,7 +9,6 @@ describe('Autocomplete', () => {
     const input = Autocomplete({
       label: 'Autocomplete',
       shape: 'rounded',
-      type: 'text',
       id: 'autocomplete',
       placeholder: 'Search...',
     })

diff --git a/src/plugins/components/avatar/avatar.component.ts b/src/plugins/components/avatar/avatar.component.ts
@@ -44,8 +44,20 @@ export const Avatar = ({
       <div class="nui-avatar-inner">
         ${src
           ? html`
-            <img class="dark:hidden" src="${src}" alt="${text}" />
-            <img class="hidden dark:block" src="${srcDark}" alt="${text}" />
+            <img
+              class="${srcDark ? 'dark:hidden' : ''}"
+              src="${src}"
+              alt="${text}"
+            />
+            ${srcDark
+                ? html`
+                  <img
+                    class="hidden dark:block"
+                    src="${srcDark}"
+                    alt="${text}"
+                  />
+                `
+                : ''}
           `
           : children ||
             html`

diff --git a/src/plugins/components/listbox.ts → src/plugins/components/listbox/index.ts b/src/plugins/components/listbox.ts → src/plugins/components/listbox/index.ts
@@ -1,8 +1,8 @@
 import plugin from 'tailwindcss/plugin'
 import { defu } from 'defu'
-import { type PluginOption, defaultPluginOptions } from '../options'
+import { type PluginOption, defaultPluginOptions } from '../../options'
 
-const defaultListboxConfig = {
+export const defaultListboxConfig = {
   labelFloat: {
     text: 'primary-500',
     size: '5',
@@ -65,6 +65,7 @@ const defaultListboxConfig = {
     },
     activeOrHover: {
       text: 'primary-600',
+      textDark: 'primary-400',
       bg: 'primary-500/10',
     },
   },
@@ -174,7 +175,7 @@ const defaultListboxConfig = {
     },
   },
   muted: {
-    bg: 'muted-200',
+    bg: 'muted-100',
     bgDark: 'muted-900',
     border: 'muted-300',
     borderDark: 'muted-700',
@@ -198,7 +199,7 @@ const defaultListboxConfig = {
     },
   },
   mutedContrast: {
-    bg: 'muted-200',
+    bg: 'muted-100',
     bgDark: 'muted-950',
     border: 'muted-300',
     borderDark: 'muted-800',
@@ -314,7 +315,7 @@ export default plugin.withOptions(
 
     return function ({ addComponents, theme }) {
       const config = theme(
-        'shurikenUi.listbox'
+        'shurikenUi.listbox',
       ) satisfies typeof defaultListboxConfig
 
       addComponents({
@@ -404,8 +405,12 @@ export default plugin.withOptions(
               },
             },
 
+            [`&:not(.${prefix}active), &:not(:hover)`]: {
+              [`@apply text-muted-600 dark:text-muted-200`]: {},
+            },
+
             [`&.${prefix}active, &:hover`]: {
-              [`@apply bg-${config.option.activeOrHover.bg} text-${config.option.activeOrHover.text}`]:
+              [`@apply bg-${config.option.activeOrHover.bg} text-${config.option.activeOrHover.text} dark:text-${config.option.activeOrHover.textDark}`]:
                 {},
             },
           },
@@ -774,5 +779,5 @@ export default plugin.withOptions(
         },
       },
     }
-  }
+  },
 )
diff --git a/src/plugins/components/listbox/listbox.component.ts b/src/plugins/components/listbox/listbox.component.ts
@@ -0,0 +1,118 @@
+import { html } from 'lit'
+import { spread } from '@open-wc/lit-helpers'
+
+import type { ListboxAttrs } from './listbox.types'
+import * as variants from './listbox.variants'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Listbox = ({
+  id,
+  value,
+  items,
+  shape = 'rounded',
+  size = 'md',
+  contrast = 'default',
+  label,
+  labelFloat,
+  multiple,
+  loading,
+  error,
+  classes,
+  iconSlot,
+  ...attrs
+}: ListboxAttrs) => {
+  return html`
+    <div
+      class=${[
+        'nui-listbox',
+        contrast && variants.contrast[contrast],
+        size && variants.size[size],
+        shape && variants.shape[shape],
+        error && !loading && 'nui-listbox-error',
+        loading && 'nui-listbox-loading',
+        labelFloat && 'nui-listbox-label-float',
+        iconSlot && 'nui-has-icon',
+        classes?.wrapper,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      ${label && !labelFloat
+        ? html`
+          <label
+            class="${['nui-listbox-label', classes?.label]
+                .filter(Boolean)
+                .join(' ')}"
+            for="${id}"
+          >
+            ${label}
+          </label>
+        `
+        : ''}
+      <div class="nui-listbox-outer">
+        <button type="button" class="nui-listbox-button" ${spread(attrs)}>
+          ${value}
+        </button>
+        ${label && labelFloat
+          ? html`
+            <label
+              class="${['nui-label-float', classes?.label]
+                  .filter(Boolean)
+                  .join(' ')}"
+              for="${id}"
+            >
+              ${label}
+            </label>
+          `
+          : ''}
+        ${iconSlot &&
+        html`
+          <div
+            class="${['nui-listbox-icon', classes?.icon]
+              .filter(Boolean)
+              .join(' ')}"
+          >
+            ${iconSlot}
+          </div>
+        `}
+        <div class="nui-listbox-chevron">
+          <svg
+            class="nui-listbox-chevron-inner"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="h-4 w-4"
+          >
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </div>
+        ${loading &&
+        html`
+          <div class="nui-listbox-placeload">
+            <span class="nui-placeload animate-nui-placeload"></span>
+          </div>
+        `}
+        ${error &&
+        typeof error === 'string' &&
+        html`
+          <span
+            class="${['nui-listbox-error-text', classes?.error]
+              .filter(Boolean)
+              .join(' ')}"
+          >
+            ${error}
+          </span>
+        `}
+        <div class="nui-listbox-options">${items}</div>
+      </div>
+    </div>
+  `
+}