feat: button group docs

shuriken-ui · Sep 4, 2023 · 853eac2 · 853eac2
1 parent 2dfe0fa
commit 853eac2
Show file tree

Hide file tree

Showing 4 changed files with 219 additions and 4 deletions.
diff --git a/src/plugins/components/avatar-group/avatar-group.stories.ts b/src/plugins/components/avatar-group/avatar-group.stories.ts
@@ -34,7 +34,7 @@ const demoAvatars = [
 
 // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
 const meta = {
-  title: 'Shuriken UI/Base/Avatar Group',
+  title: 'Shuriken UI/Base/Avatar group',
   // tags: ['autodocs'],
   render: (args) => AvatarGroup(args),
   argTypes: {

diff --git a/src/plugins/components/button-group/button-group.doc.mdx b/src/plugins/components/button-group/button-group.doc.mdx
@@ -0,0 +1,98 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks'
+import * as ButtonGroupStories from './button-group.stories'
+import { defaultButtonGroupConfig } from '.'
+
+<Meta of={ButtonGroupStories} />
+
+# Button group
+
+When building web applications, it is often necessary to provide the user with a set of actions that can be performed on a given page. Actions can be grouped together in a button group.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Variants
+
+<br />
+
+### Size: sm
+
+Button groups act as containers that group buttons together, taking care of spacing and border radiuses. Below is a small button group example.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ButtonGroupStories.SizeSm} />
+</div>
+
+<br />
+
+### Size: md
+
+Button groups act as containers that group buttons together, taking care of spacing and border radiuses. Below is a medium button group example.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ButtonGroupStories.SizeMd} />
+</div>
+
+<br />
+
+### Size: Lg
+
+Button groups act as containers that group buttons together, taking care of spacing and border radiuses. Below is a large button group example.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ButtonGroupStories.SizeLg} />
+</div>
+
+<br />
+<br />
+
+## Slots
+
+### Slot: default
+
+Button groups have a default slot that serves as wrapper for their inner content.
+
+<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ButtonGroupStories.Main} />
+</div>
+
+<br />
+<br />
+
+## Customization
+
+### Default config
+
+<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(defaultButtonGroupConfig, null, 2)}
+      </pre>
+    </div>
+
+  </details>
+</div>
diff --git a/src/plugins/components/button-group/button-group.stories.ts b/src/plugins/components/button-group/button-group.stories.ts
@@ -7,8 +7,8 @@ import { Button } from '../button/button.component'
 
 // More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
 const meta = {
-  title: 'Shuriken UI/Base/Button Group',
-  tags: ['autodocs'],
+  title: 'Shuriken UI/Base/Button group',
+  // tags: ['autodocs'],
   render: (args) => ButtonGroup(args),
   argTypes: {},
 } satisfies Meta<ButtonGroupAttrs>
@@ -51,3 +51,120 @@ export const Main: Story = {
   },
 }
 // #endregion
+
+// #region Size:sm
+export const SizeSm: Story = {
+  name: 'Size: sm',
+  args: {
+    children: html`
+      ${Button({
+        shape: 'rounded',
+        size: 'sm',
+        children: html`
+          <span>Button 1</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'sm',
+        color: 'primary',
+        children: html`
+          <span>Button 2</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'sm',
+        children: html`
+          <span>Button 3</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'sm',
+        children: html`
+          <span>Button 4</span>
+        `,
+      })}
+    `,
+  },
+}
+// #endregion
+
+// #region Size:md
+export const SizeMd: Story = {
+  name: 'Size: md',
+  args: {
+    children: html`
+      ${Button({
+        shape: 'rounded',
+        size: 'md',
+        children: html`
+          <span>Button 1</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'md',
+        color: 'primary',
+        children: html`
+          <span>Button 2</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'md',
+        children: html`
+          <span>Button 3</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'md',
+        children: html`
+          <span>Button 4</span>
+        `,
+      })}
+    `,
+  },
+}
+// #endregion
+
+// #region Size:lg
+export const SizeLg: Story = {
+  name: 'Size: lg',
+  args: {
+    children: html`
+      ${Button({
+        shape: 'rounded',
+        size: 'lg',
+        children: html`
+          <span>Button 1</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'lg',
+        color: 'primary',
+        children: html`
+          <span>Button 2</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'lg',
+        children: html`
+          <span>Button 3</span>
+        `,
+      })}
+      ${Button({
+        shape: 'rounded',
+        size: 'lg',
+        children: html`
+          <span>Button 4</span>
+        `,
+      })}
+    `,
+  },
+}
+// #endregion
diff --git a/src/plugins/components/button-group/index.ts b/src/plugins/components/button-group/index.ts
@@ -2,7 +2,7 @@ import plugin from 'tailwindcss/plugin'
 import { defu } from 'defu'
 import { type PluginOption, defaultPluginOptions } from '../../options'
 
-const defaultButtonGroupConfig = {}
+export const defaultButtonGroupConfig = {}
 
 export default plugin.withOptions(
   function (options: PluginOption) {