feat(Breadcrumb): update stories

shuriken-ui · Dec 9, 2023 · 660a1bc · 660a1bc
1 parent 7b39e9b
commit 660a1bc
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 20 deletions.
diff --git a/src/plugins/components/breadcrumb/breadcrumb.component.ts b/src/plugins/components/breadcrumb/breadcrumb.component.ts
@@ -9,7 +9,12 @@ import { DropdownItem } from '../dropdown-item/dropdown-item.component'
 /**
  * Primary UI component for user interaction
  */
-export const Breadcrumb = ({ items, classes, ...attrs }: BreadcrumbAttrs) => {
+export const Breadcrumb = ({
+  items,
+  classes,
+  separator = 'dot',
+  ...attrs
+}: BreadcrumbAttrs) => {
   return html`
     <nav
       class=${['nui-breadcrumb', classes?.wrapper].filter(Boolean).join(' ')}
@@ -76,11 +81,56 @@ export const Breadcrumb = ({ items, classes, ...attrs }: BreadcrumbAttrs) => {
             </li>
             <li class="nui-breadcrumb-item">
               <div class="nui-item-inner">
-                ${index < items.length - 1
+                ${index < items.length - 1 && separator === 'dot'
                   ? html`
                       <span class="nui-item-text">·</span>
                     `
                   : ''}
+                ${index < items.length - 1 && separator === 'slash'
+                  ? html`
+                      <span class="nui-item-text">/</span>
+                    `
+                  : ''}
+                ${index < items.length - 1 && separator === 'chevron'
+                  ? html`
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="32"
+                        height="32"
+                        viewBox="0 0 24 24"
+                        class="nui-item-text"
+                      >
+                        <path
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="m9 18l6-6l-6-6"
+                        />
+                      </svg>
+                    `
+                  : ''}
+                ${index < items.length - 1 && separator === 'arrow'
+                  ? html`
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="32"
+                        height="32"
+                        viewBox="0 0 24 24"
+                        class="nui-item-text"
+                      >
+                        <path
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M5 12h14m-7-7l7 7l-7 7"
+                        />
+                      </svg>
+                    `
+                  : ''}
               </div>
             </li>
           `,

diff --git a/src/plugins/components/breadcrumb/breadcrumb.doc.mdx b/src/plugins/components/breadcrumb/breadcrumb.doc.mdx
@@ -1,4 +1,4 @@
-import { Meta, Primary, Controls } from '@storybook/blocks'
+import { Meta, Primary, Controls, Story } from '@storybook/blocks'
 import * as BreadcrumbStories from './breadcrumb.stories'
 import { defaultConfig } from './breadcrumb.config'
 
@@ -14,6 +14,48 @@ Breadcrumbs allow you to quickly identify the path to the current web page.
 
 <Controls />
 
+## Variants
+
+<br />
+
+### Separator: dot
+
+Breadcrumbs can have different separators. Below is an example of the dot separator.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={BreadcrumbStories.SeparatorDot} />
+</div>
+
+<br />
+
+### Separator: slash
+
+Breadcrumbs can have different separators. Below is an example of the slash separator.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={BreadcrumbStories.SeparatorSlash} />
+</div>
+
+<br />
+
+### Separator: chevron
+
+Breadcrumbs can have different separators. Below is an example of the chevron separator.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={BreadcrumbStories.SeparatorChevron} />
+</div>
+
+<br />
+
+### Separator: arrow
+
+Breadcrumbs can have different separators. Below is an example of the arrow separator.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={BreadcrumbStories.SeparatorArrow} />
+</div>
+
 <br />
 <br />
 

diff --git a/src/plugins/components/breadcrumb/breadcrumb.stories.ts b/src/plugins/components/breadcrumb/breadcrumb.stories.ts
@@ -9,7 +9,13 @@ const meta = {
   title: 'Shuriken UI/Base/Breadcrumb',
   // tags: ['autodocs'],
   render: (args) => Breadcrumb(args),
-  argTypes: {},
+  argTypes: {
+    separator: {
+      control: { type: 'select' },
+      options: ['dot', 'slash', 'arrow', 'chevron'],
+      defaultValue: 'dot',
+    },
+  },
 } satisfies Meta<BreadcrumbAttrs>
 
 export default meta
@@ -43,3 +49,43 @@ export const Main: Story = {
   },
 }
 // #endregion
+
+// #region Dot
+export const SeparatorDot: Story = {
+  name: 'Separator: Dot',
+  args: {
+    items: data,
+    separator: 'dot',
+  },
+}
+// #endregion
+
+// #region Slash
+export const SeparatorSlash: Story = {
+  name: 'Separator: Slash',
+  args: {
+    items: data,
+    separator: 'slash',
+  },
+}
+// #endregion
+
+// #region Chevron
+export const SeparatorChevron: Story = {
+  name: 'Separator: Chevron',
+  args: {
+    items: data,
+    separator: 'chevron',
+  },
+}
+// #endregion
+
+// #region Arrow
+export const SeparatorArrow: Story = {
+  name: 'Separator: Arrow',
+  args: {
+    items: data,
+    separator: 'arrow',
+  },
+}
+// #endregion
diff --git a/src/plugins/components/breadcrumb/breadcrumb.types.ts b/src/plugins/components/breadcrumb/breadcrumb.types.ts
@@ -1,6 +1,7 @@
 import type { PropertyVariant } from '~/types/utils'
 
 export interface BreadcrumbProps extends Record<string, unknown> {
+  separator?: 'slash' | 'chevron' | 'dot' | 'arrow'
   items?: {
     label?: string
     hideLabel?: boolean

diff --git a/src/plugins/components/breadcrumb/index.ts b/src/plugins/components/breadcrumb/index.ts
@@ -33,6 +33,9 @@ export default plugin.withOptions(
               //Base
               [`@apply text-${config.item.text.font.size} flex items-center gap-x-1`]:
                 {},
+              //Color
+              [`@apply text-${config.item.text.font.color.light} dark:text-${config.item.text.font.color.dark}`]:
+                {},
               //Transition
               [`@apply transition-${config.item.transition.property} duration-${config.item.transition.duration}`]:
                 {},

diff --git a/src/plugins/components/button-group/button-group.stories.ts b/src/plugins/components/button-group/button-group.stories.ts
@@ -24,25 +24,25 @@ export const Main: Story = {
   args: {
     children: html`
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         children: html`
           <span>Button 1</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         children: html`
           <span>Button 2</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         children: html`
           <span>Button 3</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         children: html`
           <span>Button 4</span>
         `,
@@ -58,29 +58,29 @@ export const SizeSm: Story = {
   args: {
     children: html`
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'sm',
         children: html`
           <span>Button 1</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'sm',
         color: 'primary',
         children: html`
           <span>Button 2</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'sm',
         children: html`
           <span>Button 3</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'sm',
         children: html`
           <span>Button 4</span>
@@ -97,29 +97,29 @@ export const SizeMd: Story = {
   args: {
     children: html`
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'md',
         children: html`
           <span>Button 1</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'md',
         color: 'primary',
         children: html`
           <span>Button 2</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'md',
         children: html`
           <span>Button 3</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'md',
         children: html`
           <span>Button 4</span>
@@ -136,29 +136,29 @@ export const SizeLg: Story = {
   args: {
     children: html`
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'lg',
         children: html`
           <span>Button 1</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'lg',
         color: 'primary',
         children: html`
           <span>Button 2</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        rounded: 'sm',
         size: 'lg',
         children: html`
           <span>Button 3</span>
         `,
       })}
       ${Button({
-        shape: 'rounded',
+        shape: 'sm',
         size: 'lg',
         children: html`
           <span>Button 4</span>