@repobit/dex-system-design 0.22.12 → 0.23.2

package/src/components/divider/divider.stories.js

@@ -3,382 +3,200 @@ import './divider-horizontal.js';
 import './divider-vertical.js';
 
 export default {
-  title   : 'Atoms/Divider',
-  tags    : ['autodocs'],
+  title     : 'Components/Divider',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Two divider components are available:
+
+- \`<bd-divider-horizontal>\` — a horizontal \`<hr>\` line with configurable width, color, and opacity
+- \`<bd-divider-vertical>\` — a vertical \`<div>\` line with configurable height, thickness, color, and opacity
+
+### Usage
+\`\`\`html
+<bd-divider-horizontal width="100%" color="#026DFF" opacity="0.5"></bd-divider-horizontal>
+<bd-divider-vertical height="24px" thickness="2px" color="#E53935" opacity="1"></bd-divider-vertical>
+\`\`\`
+        `
+      }
+    }
+  },
   argTypes: {
-    // Common props
-    component: {
-      control    : { type: 'select' },
-      options    : ['horizontal', 'vertical'],
-      description: 'Which divider to render'
+    width: {
+      control    : 'text',
+      description: '(Horizontal) Width of the line e.g. "100%", "200px"',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Horizontal' }
     },
-    color: {
+    hColor: {
       control    : 'color',
-      description: 'Color of the divider line'
-    },
-    opacity: {
-      control    : { type: 'range', min: 0, max: 1, step: 0.1 },
-      description: 'Opacity of the divider (0 = transparent, 1 = opaque)'
+      description: '(Horizontal) Border color',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'var(--color-neutral-400)' }, category: 'Horizontal' }
     },
-
-    // Horizontal divider props
-    width: {
+    hOpacity: {
       control    : 'text',
-      if         : { arg: 'component', eq: 'horizontal' },
-      description: 'Width of the horizontal divider (e.g. 100%, 200px)'
+      description: '(Horizontal) Opacity value between 0 and 1',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '0.25' }, category: 'Horizontal' }
     },
-
-    // Vertical divider props
     height: {
       control    : 'text',
-      if         : { arg: 'component', eq: 'vertical' },
-      description: 'Height of the vertical divider (e.g. 100%, 40px)'
+      description: '(Vertical) Height of the divider e.g. "15px"',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '15px' }, category: 'Vertical' }
     },
     thickness: {
       control    : 'text',
-      if         : { arg: 'component', eq: 'vertical' },
-      description: 'Thickness (visual width) of the vertical divider (e.g. 1px, 4px)'
-    }
-  },
-  args: {
-    component: 'horizontal',
-    width    : '100%',
-    height   : '100px',
-    thickness: '1px',
-    color    : 'var(--color-neutral-400)',
-    opacity  : 1.0
-  }
-};
-
-const Template = ({ component, width, height, thickness, color, opacity }) => {
-  return component === 'horizontal'
-    ? html`<bd-divider-horizontal 
-          .width=${width}
-          .color=${color}
-          .opacity=${opacity}
-        ></bd-divider-horizontal>`
-    : html`<bd-divider-vertical 
-          .height=${height}
-          .thickness=${thickness}
-          .color=${color}
-          .opacity=${opacity}
-        ></bd-divider-vertical>`;
-};
-
-// ============ HORIZONTAL DIVIDERS ============
-
-export const Default = Template.bind({});
-Default.args = {
-  component: 'horizontal',
-  width    : '100%',
-  color    : 'var(--color-neutral-400)',
-  opacity  : 1.0
-};
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Default horizontal divider with full width and neutral color.'
-    }
-  }
-};
-
-export const HorizontalCustomWidth = Template.bind({});
-HorizontalCustomWidth.args = {
-  component: 'horizontal',
-  width    : '200px',
-  color    : 'var(--color-neutral-400)',
-  opacity  : 1.0
-};
-HorizontalCustomWidth.parameters = {
-  docs: {
-    description: {
-      story: 'Horizontal divider with custom width (200px). Useful for creating shorter divider lines.'
+      description: '(Vertical) Width/thickness of the line e.g. "1px"',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '1px' }, category: 'Vertical' }
+    },
+    vColor: {
+      control    : 'color',
+      description: '(Vertical) Background color of the divider div',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'var(--color-neutral-400)' }, category: 'Vertical' }
+    },
+    vOpacity: {
+      control    : 'text',
+      description: '(Vertical) Opacity value between 0 and 1',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '1.00' }, category: 'Vertical' }
     }
   }
 };
 
-export const HorizontalCustomColor = Template.bind({});
-HorizontalCustomColor.args = {
-  component: 'horizontal',
-  width    : '100%',
-  color    : '#3b82f6',
-  opacity  : 1.0
-};
-HorizontalCustomColor.parameters = {
-  docs: {
-    description: {
-      story: 'Horizontal divider with custom blue color. Can be used to match brand colors or create visual emphasis.'
-    }
-  }
-};
+// ─── Horizontal Stories ────────────────────────────────────────────────────
 
-export const HorizontalFaded = Template.bind({});
-HorizontalFaded.args = {
-  component: 'horizontal',
-  width    : '100%',
-  color    : 'var(--color-neutral-400)',
-  opacity  : 0.5
-};
-HorizontalFaded.parameters = {
-  docs: {
-    description: {
-      story: 'Horizontal divider with reduced opacity (50%) for a subtle, faded appearance.'
-    }
-  }
+export const HorizontalDefault = {
+  name      : 'Horizontal — Default',
+  render    : () => html`<bd-divider-horizontal></bd-divider-horizontal>`,
+  parameters: { docs: { description: { story: 'Default horizontal divider with default color and 0.25 opacity.' } } }
 };
 
-// ============ VERTICAL DIVIDERS ============
-
-export const VerticalDefault = Template.bind({});
-VerticalDefault.args = {
-  component: 'vertical',
-  height   : '100px',
-  thickness: '1px',
-  color    : 'var(--color-neutral-400)',
-  opacity  : 1.0
-};
-VerticalDefault.parameters = {
-  docs: {
-    description: {
-      story: 'Default vertical divider with standard height and thickness.'
-    }
-  }
+export const HorizontalFullWidth = {
+  name      : 'Horizontal — Full Width',
+  render    : () => html`<bd-divider-horizontal width="100%"></bd-divider-horizontal>`,
+  parameters: { docs: { description: { story: 'Full-width horizontal divider.' } } }
 };
 
-export const VerticalThick = Template.bind({});
-VerticalThick.args = {
-  component: 'vertical',
-  height   : '100px',
-  thickness: '4px',
-  color    : 'var(--color-neutral-400)',
-  opacity  : 1.0
-};
-VerticalThick.parameters = {
-  docs: {
-    description: {
-      story: 'Vertical divider with increased thickness (4px) for more visual weight.'
-    }
-  }
+export const HorizontalCustomColor = {
+  name  : 'Horizontal — Custom Color',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:16px;">
+      <bd-divider-horizontal width="100%" color="#026DFF" opacity="1"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="#E53935" opacity="1"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="white"   opacity="1" style="background:#333; padding:4px;"></bd-divider-horizontal>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Horizontal dividers with custom color values at full opacity.' } } }
+};
+
+export const HorizontalOpacities = {
+  name  : 'Horizontal — Opacity Variants',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:12px;">
+      <bd-divider-horizontal width="100%" color="#026DFF" opacity="1"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="#026DFF" opacity="0.5"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="#026DFF" opacity="0.25"></bd-divider-horizontal>
+      <bd-divider-horizontal width="100%" color="#026DFF" opacity="0.1"></bd-divider-horizontal>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Four opacity levels: 1, 0.5, 0.25, 0.1.' } } }
 };
 
-export const VerticalTall = Template.bind({});
-VerticalTall.args = {
-  component: 'vertical',
-  height   : '200px',
-  thickness: '2px',
-  color    : 'var(--color-neutral-400)',
-  opacity  : 1.0
-};
-VerticalTall.parameters = {
-  docs: {
-    description: {
-      story: 'Tall vertical divider (200px) suitable for sidebar separators or tall content sections.'
-    }
-  }
+export const HorizontalFixedWidth = {
+  name      : 'Horizontal — Fixed Width',
+  render    : () => html`<bd-divider-horizontal width="200px" color="#026DFF" opacity="1"></bd-divider-horizontal>`,
+  parameters: { docs: { description: { story: 'Horizontal divider with a fixed pixel width of 200px.' } } }
 };
 
-export const VerticalBrandColor = Template.bind({});
-VerticalBrandColor.args = {
-  component: 'vertical',
-  height   : '100px',
-  thickness: '2px',
-  color    : '#8b5cf6',
-  opacity  : 1.0
-};
-VerticalBrandColor.parameters = {
-  docs: {
-    description: {
-      story: 'Vertical divider with brand purple color for consistent theming.'
-    }
-  }
-};
+// ─── Vertical Stories ──────────────────────────────────────────────────────
 
-export const VerticalSubtle = Template.bind({});
-VerticalSubtle.args = {
-  component: 'vertical',
-  height   : '100px',
-  thickness: '1px',
-  color    : 'var(--color-neutral-400)',
-  opacity  : 0.3
-};
-VerticalSubtle.parameters = {
-  docs: {
-    description: {
-      story: 'Subtle vertical divider with low opacity (30%) for minimal visual intrusion.'
-    }
-  }
+export const VerticalDefault = {
+  name  : 'Vertical — Default',
+  render: () => html`
+    <div style="display:flex; align-items:center; gap:8px; height:40px;">
+      <span>Left</span>
+      <bd-divider-vertical></bd-divider-vertical>
+      <span>Right</span>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Default vertical divider between two text elements.' } } }
+};
+
+export const VerticalCustomHeight = {
+  name  : 'Vertical — Custom Height',
+  render: () => html`
+    <div style="display:flex; align-items:center; gap:8px; height:60px;">
+      <span>Home</span>
+      <bd-divider-vertical height="40px"></bd-divider-vertical>
+      <span>Products</span>
+      <bd-divider-vertical height="40px"></bd-divider-vertical>
+      <span>Contact</span>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Vertical dividers with 40px height between nav-like items.' } } }
 };
 
-// ============ SHOWCASE EXAMPLES ============
-
-export const AllHorizontalVariants = () => html`
-  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 600px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h3" style="margin-bottom: 1rem;">Horizontal Divider Variants</bd-h>
-    
-    <div style="display: flex; flex-direction: column; gap: 1rem;">
-      <div>
-        <bd-p kind="small" style="margin-bottom: 0.5rem;">Default (100% width)</bd-p>
-        <bd-divider-horizontal></bd-divider-horizontal>
-      </div>
-      
-      <div>
-        <bd-p kind="small" style="margin-bottom: 0.5rem;">Custom Width (200px)</bd-p>
-        <bd-divider-horizontal width="200px"></bd-divider-horizontal>
-      </div>
-      
-      <div>
-        <bd-p kind="small" style="margin-bottom: 0.5rem;">Brand Color</bd-p>
-        <bd-divider-horizontal color="#3b82f6"></bd-divider-horizontal>
-      </div>
-      
-      <div>
-        <bd-p kind="small" style="margin-bottom: 0.5rem;">Faded (50% opacity)</bd-p>
-        <bd-divider-horizontal opacity="0.5"></bd-divider-horizontal>
-      </div>
-      
-      <div>
-        <bd-p kind="small" style="margin-bottom: 0.5rem;">Thick Red</bd-p>
-        <bd-divider-horizontal color="#ef4444" opacity="0.8"></bd-divider-horizontal>
-      </div>
+export const VerticalCustomThickness = {
+  name  : 'Vertical — Custom Thickness',
+  render: () => html`
+    <div style="display:flex; align-items:center; gap:16px; height:40px;">
+      <bd-divider-vertical height="30px" thickness="1px" color="#026DFF" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="30px" thickness="2px" color="#026DFF" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="30px" thickness="4px" color="#026DFF" opacity="1"></bd-divider-vertical>
     </div>
-  </div>
-`;
-AllHorizontalVariants.parameters = {
-  docs: {
-    description: {
-      story: 'Collection of different horizontal divider variants showing various width, color, and opacity combinations.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'Three thickness values: 1px, 2px, 4px.' } } }
 };
 
-export const AllVerticalVariants = () => html`
-  <div style="display: flex; gap: 3rem; align-items: center; max-width: 800px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h3" style="margin-bottom: 1rem;">Vertical Divider Variants</bd-h>
-    
-    <div style="display: flex; gap: 2rem; align-items: center;">
-      <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <bd-p kind="small">Default</bd-p>
-        <bd-divider-vertical></bd-divider-vertical>
-      </div>
-      
-      <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <bd-p kind="small">Thick (4px)</bd-p>
-        <bd-divider-vertical thickness="4px"></bd-divider-vertical>
-      </div>
-      
-      <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <bd-p kind="small">Brand Color</bd-p>
-        <bd-divider-vertical color="#8b5cf6" thickness="2px"></bd-divider-vertical>
-      </div>
-      
-      <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <bd-p kind="small">Subtle (30%)</bd-p>
-        <bd-divider-vertical opacity="0.3"></bd-divider-vertical>
-      </div>
-      
-      <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-        <bd-p kind="small">Tall (150px)</bd-p>
-        <bd-divider-vertical height="150px"></bd-divider-vertical>
-      </div>
+export const VerticalCustomColor = {
+  name  : 'Vertical — Custom Color',
+  render: () => html`
+    <div style="display:flex; align-items:center; gap:16px; height:40px;">
+      <bd-divider-vertical height="30px" thickness="2px" color="#026DFF" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="30px" thickness="2px" color="#E53935" opacity="1"></bd-divider-vertical>
+      <bd-divider-vertical height="30px" thickness="2px" color="#43A047" opacity="1"></bd-divider-vertical>
     </div>
-  </div>
-`;
-AllVerticalVariants.parameters = {
-  docs: {
-    description: {
-      story: 'Collection of different vertical divider variants showing various height, thickness, color, and opacity combinations.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'Blue, red, and green vertical dividers.' } } }
 };
 
-export const UsageExamples = () => html`
-  <div style="max-width: 800px; margin: 0 auto; padding: 2rem;">
-    <bd-h as="h2" style="margin-bottom: 2rem;">Practical Usage Examples</bd-h>
-    
-    <!-- Example 1: Content sections with horizontal dividers -->
-    <div style="margin-bottom: 3rem;">
-      <bd-h as="h3" style="margin-bottom: 1rem;">Content Sections</bd-h>
-      <div style="display: flex; flex-direction: column; gap: 2rem;">
-        <div>
-          <bd-h as="h4">Section 1</bd-h>
-          <bd-p kind="regular">This is the first content section with some sample text.</bd-p>
-        </div>
-        
-        <bd-divider-horizontal opacity="0.3"></bd-divider-horizontal>
-        
-        <div>
-          <bd-h as="h4">Section 2</bd-h>
-          <bd-p kind="regular">This is the second content section separated by a subtle divider.</bd-p>
-        </div>
-        
-        <bd-divider-horizontal color="#3b82f6" opacity="0.6"></bd-divider-horizontal>
-        
-        <div>
-          <bd-h as="h4">Section 3</bd-h>
-          <bd-p kind="regular">This section uses a branded blue divider for emphasis.</bd-p>
-        </div>
-      </div>
-    </div>
-    
-    <!-- Example 2: Toolbar with vertical dividers -->
-    <div style="margin-bottom: 3rem;">
-      <bd-h as="h3" style="margin-bottom: 1rem;">Toolbar Layout</bd-h>
-      <div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #f8fafc; border-radius: 8px;">
-        <button style="padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 4px; background: white;">File</button>
-        <button style="padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 4px; background: white;">Edit</button>
-        <button style="padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 4px; background: white;">View</button>
-        
-        <bd-divider-vertical height="20px" opacity="0.4"></bd-divider-vertical>
-        
-        <button style="padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 4px; background: white;">Save</button>
-        <button style="padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 4px; background: white;">Undo</button>
-        
-        <bd-divider-vertical height="20px" opacity="0.4"></bd-divider-vertical>
-        
-        <button style="padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 4px; background: white;">Help</button>
-      </div>
-    </div>
-    
-    <!-- Example 3: Card layout with custom dividers -->
+// ─── Combined ──────────────────────────────────────────────────────────────
+
+export const BothTypes = {
+  name  : 'Both Types Together',
+  render: () => html`
     <div>
-      <bd-h as="h3" style="margin-bottom: 1rem;">Card Layout</bd-h>
-      <div style="display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center;">
-        <div style="padding: 1.5rem; background: white; border: 1px solid #e2e8f0; border-radius: 8px;">
-          <bd-h as="h4">Left Card</bd-h>
-          <bd-p kind="small">Some content on the left side</bd-p>
-        </div>
-        
-        <bd-divider-vertical height="80px" color="#64748b" opacity="0.5"></bd-divider-vertical>
-        
-        <div style="padding: 1.5rem; background: white; border: 1px solid #e2e8f0; border-radius: 8px;">
-          <bd-h as="h4">Right Card</bd-h>
-          <bd-p kind="small">Some content on the right side</bd-p>
-        </div>
+      <div style="display:flex; align-items:center; gap:12px; margin-bottom:16px;">
+        <span>Home</span>
+        <bd-divider-vertical height="20px" thickness="1px" color="#026DFF" opacity="1"></bd-divider-vertical>
+        <span>Products</span>
+        <bd-divider-vertical height="20px" thickness="1px" color="#026DFF" opacity="1"></bd-divider-vertical>
+        <span>Contact</span>
       </div>
+      <bd-divider-horizontal width="100%" color="#026DFF" opacity="0.25"></bd-divider-horizontal>
+      <p style="margin-top:16px;">Content below the divider.</p>
     </div>
-  </div>
-`;
-UsageExamples.parameters = {
-  docs: {
-    description: {
-      story: 'Practical examples showing how dividers can be used in real-world scenarios like content sections, toolbars, and card layouts.'
-    }
-  }
-};
-
-export const InteractivePlayground = Template.bind({});
-InteractivePlayground.args = {
-  component: 'horizontal',
-  width    : '100%',
-  height   : '100px',
-  thickness: '1px',
-  color    : 'var(--color-neutral-400)',
-  opacity  : 1.0
-};
-InteractivePlayground.parameters = {
-  docs: {
-    description: {
-      story: 'Interactive playground where you can test all divider properties in real-time. Switch between horizontal and vertical dividers and customize their appearance.'
-    }
-  }
+  `,
+  parameters: { docs: { description: { story: 'Both divider types used together — vertical between nav links, horizontal as a section separator.' } } }
+};
+
+export const PlaygroundHorizontal = {
+  name  : '🛝 Playground — Horizontal',
+  args  : { width: '100%', hColor: '#026DFF', hOpacity: '0.5' },
+  render: (args) => html`
+    <bd-divider-horizontal width="${args.width}" color="${args.hColor}" opacity="${args.hOpacity}"></bd-divider-horizontal>
+  `,
+  parameters: { docs: { description: { story: 'Interactive horizontal divider playground.' } } }
+};
+
+export const PlaygroundVertical = {
+  name  : '🛝 Playground — Vertical',
+  args  : { height: '30px', thickness: '1px', vColor: '#026DFF', vOpacity: '1' },
+  render: (args) => html`
+    <div style="display:flex; align-items:center; gap:8px; height:50px;">
+      <span>Left</span>
+      <bd-divider-vertical height="${args.height}" thickness="${args.thickness}" color="${args.vColor}" opacity="${args.vOpacity}"></bd-divider-vertical>
+      <span>Right</span>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Interactive vertical divider playground.' } } }
 };