feat: customize sb, finish button stories

shuriken-ui · Sep 2, 2023 · d29d128 · d29d128
1 parent 01a1d7f
commit d29d128
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 40 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,3 +1,22 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<style>
+  #storybook-preview-iframe {
+    background-color: transparent !important;
+  }
+
+  h2 {
+    color: #4c1d95 !important;
+  }
+
+  h3 {
+    font-weight: 500 !important;
+    font-size: 1.15rem !important;
+  }
+
+  h3 + p {
+    margin-top: 0.25rem !important;
+    color: #64748b !important;
+  }
+</style>
diff --git a/src/plugins/components/button/button.component.ts b/src/plugins/components/button/button.component.ts
@@ -24,6 +24,7 @@ export const Button = ({
   return html`
     <button
       type="button"
+      ?disabled=${disabled}
       class=${[
         'nui-button',
         variants.size[size],

diff --git a/src/plugins/components/button/button.docs.mdx b/src/plugins/components/button/button.docs.mdx
@@ -16,7 +16,7 @@ Buttons are an essential part of any application. Shuriken UI buttons can have d
 
 ## Variants
 
-<br/>
+<br />
 
 ### Shape
 
@@ -30,7 +30,7 @@ Button shapes allow you to change the border radiuses.
   <Story of={ButtonStories.Full} />
 </div>
 
-<br/>
+<br />
 
 ### Size
 
@@ -42,7 +42,7 @@ Size allows you to change the size of the button.
   <Story of={ButtonStories.Lg} />
 </div>
 
-<br/>
+<br />
 
 ### Flavor: solid
 
@@ -58,7 +58,7 @@ Flavors represent the visual styles applied to a button. Below are examples of t
   <Story of={ButtonStories.SolidDanger} />
 </div>
 
-<br/>
+<br />
 
 ### Flavor: pastel
 
@@ -72,7 +72,7 @@ Flavors represent the visual styles applied to a button. Below are examples of t
   <Story of={ButtonStories.PastelDanger} />
 </div>
 
-<br/>
+<br />
 
 ### Flavor: outline
 
@@ -86,27 +86,11 @@ Flavors represent the visual styles applied to a button. Below are examples of t
   <Story of={ButtonStories.OutlineDanger} />
 </div>
 
-<br/>
-
-### With icons
-
-Buttons can have icons, both on the left and on the right. Use svg icons inside the button slot to render an icon button.
-
-<div className="flex gap-2">
-  <Story of={ButtonStories.IconDefault} />
-  <Story of={ButtonStories.IconMuted} />
-  <Story of={ButtonStories.IconPrimary} />
-  <Story of={ButtonStories.IconInfo} />
-  <Story of={ButtonStories.IconSuccess} />
-  <Story of={ButtonStories.IconWarning} />
-  <Story of={ButtonStories.IconDanger} />
-</div>
-
-<br/>
+<br />
 
 ### Shadow: flat
 
-Flavors represent the visual styles applied to a button. Below are examples of the solid flavor.
+Button can have shadows based on the selected color. Below are examples of flat static shadows.
 
 <div className="flex gap-2">
   <Story of={ButtonStories.ShadowFlatDefault} />
@@ -118,11 +102,11 @@ Flavors represent the visual styles applied to a button. Below are examples of t
   <Story of={ButtonStories.ShadowFlatDanger} />
 </div>
 
-<br/>
+<br />
 
 ### Shadow: hover
 
-Flavors represent the visual styles applied to a button. Below are examples of the solid flavor.
+Buttons can have shadows based on the selected color. Below are examples of hover shadows.
 
 <div className="flex gap-2">
   <Story of={ButtonStories.ShadowHoverDefault} />
@@ -134,12 +118,11 @@ Flavors represent the visual styles applied to a button. Below are examples of t
   <Story of={ButtonStories.ShadowHoverDanger} />
 </div>
 
-<br/>
-<br/>
+<br />
+<br />
 
 ## State
 
-
 ### State: loading
 
 Buttons can be shown in a loading state. The loading indicator informs the user that something is being loaded.
@@ -154,7 +137,7 @@ Buttons can be shown in a loading state. The loading indicator informs the user
   <Story of={ButtonStories.LoadingDanger} />
 </div>
 
-<br/>
+<br />
 
 ### State: disabled
 
@@ -170,25 +153,69 @@ Buttons can be shown in a disabled state. They are a bit opaque and cannot be cl
   <Story of={ButtonStories.DisabledDanger} />
 </div>
 
-<br/>
-<br/>
+<br />
+<br />
 
 ## Slots
 
 ### Slot: default
 
+Button have a default slot that serves as wrapper for their inner content.
+
 <div className="flex gap-2">
   <Story of={ButtonStories.LabelSlot} />
 </div>
 
-<br/>
-<br/>
+<br />
+
+### Slot: with icons
+
+Buttons can have icons, both on the left and on the right. Use svg icons inside the button slot to render an icon button.
+
+<div className="flex gap-2">
+  <Story of={ButtonStories.IconDefault} />
+  <Story of={ButtonStories.IconMuted} />
+  <Story of={ButtonStories.IconPrimary} />
+  <Story of={ButtonStories.IconInfo} />
+  <Story of={ButtonStories.IconSuccess} />
+  <Story of={ButtonStories.IconWarning} />
+  <Story of={ButtonStories.IconDanger} />
+</div>
+
+<br />
+<br />
 
 ## Customization
 
 ### Default config
 
-<details>
-  <summary>View default config</summary>
-  <pre>{JSON.stringify(defaultButtonConfig, null, 2)}</pre>
-</details>
+<div class="relative">
+  <details class="relative bg-slate-50 border border-slate-200 rounded-lg p-4 [&>summary>svg]:open:-rotate-180">
+    <summary class="list-none cursor-pointer">
+      <span class="font-sans text-slate-500">View configuration options</span>
+      <svg
+        class="w-5 h-5 text-slate-500 absolute top-5 end-4 transition-transform duration-300"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m6 9l6 6l6-6"
+        />
+      </svg>
+    </summary>
+
+    <div class="!mt-4">
+      <pre >
+        {JSON.stringify(defaultButtonConfig, null, 2)}
+      </pre>
+    </div>
+
+  </details>
+</div>
diff --git a/src/plugins/components/button/button.stories.ts b/src/plugins/components/button/button.stories.ts
@@ -16,7 +16,7 @@ const meta = {
       defaultValue: false,
     },
     disabled: {
-      name: '?disabled',
+      name: 'disabled',
       control: { type: 'boolean' },
       defaultValue: false,
     },
@@ -893,7 +893,7 @@ export const DisabledDanger: Story = {
     color: 'danger',
     label: 'Button',
     flavor: 'solid',
-    loading: false,
+    disabled: true,
     shape: 'rounded',
     size: 'md',
   },