@repobit/dex-system-design 0.21.2 → 0.22.0

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

@@ -3,75 +3,382 @@ import './divider-horizontal.js';
 import './divider-vertical.js';
 
 export default {
-  title: 'Atoms/Divider',
-  tags: ['autodocs'],
+  title   : 'Atoms/Divider',
+  tags    : ['autodocs'],
   argTypes: {
+    // Common props
+    component: {
+      control    : { type: 'select' },
+      options    : ['horizontal', 'vertical'],
+      description: 'Which divider to render'
+    },
+    color: {
+      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)'
+    },
+
+    // Horizontal divider props
     width: {
-      control: 'text',
-      if: { arg: 'component', eq: 'horizontal' },
-      description: 'Width of the horizontal divider (e.g. 100%, 200px)',
+      control    : 'text',
+      if         : { arg: 'component', eq: 'horizontal' },
+      description: 'Width of the horizontal divider (e.g. 100%, 200px)'
     },
+
+    // Vertical divider props
     height: {
-      control: 'text',
-      if: { arg: 'component', eq: 'vertical' },
-      description: 'Height of the vertical divider (e.g. 100%, 40px)',
+      control    : 'text',
+      if         : { arg: 'component', eq: 'vertical' },
+      description: 'Height of the vertical divider (e.g. 100%, 40px)'
     },
     thickness: {
-      control: 'text',
-      if: { arg: 'component', eq: 'vertical' },
-      description: 'Thickness (visual width) of the vertical divider (e.g. 1px, 4px)',
-    },
-    component: {
-      control: { type: 'select' },
-      options: ['horizontal', 'vertical'],
-      description: 'Which divider to render',
-    },
+      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',
+    width    : '100%',
+    height   : '100px',
     thickness: '1px',
-  },
+    color    : 'var(--color-neutral-400)',
+    opacity  : 1.0
+  }
 };
 
-const Template = ({ component, width, height, thickness }) => {
+const Template = ({ component, width, height, thickness, color, opacity }) => {
   return component === 'horizontal'
-    ? html`<bd-divider-horizontal .width=${width}></bd-divider-horizontal>`
-    : html`<bd-divider-vertical .height=${height} .thickness=${thickness}></bd-divider-vertical>`;
+    ? 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%',
-  height: '100px',
-  thickness: '1px',
+  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',
+  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.'
+    }
+  }
+};
+
+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.'
+    }
+  }
+};
+
+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.'
+    }
+  }
+};
+
+// ============ VERTICAL DIVIDERS ============
 
 export const VerticalDefault = Template.bind({});
 VerticalDefault.args = {
   component: 'vertical',
-  height: '100px',
+  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 VerticalThick = Template.bind({});
 VerticalThick.args = {
   component: 'vertical',
-  height: '100px',
+  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 VerticalTall = Template.bind({});
 VerticalTall.args = {
   component: 'vertical',
-  height: '200px',
+  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 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.'
+    }
+  }
+};
+
+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.'
+    }
+  }
+};
+
+// ============ 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>
+    </div>
+  </div>
+`;
+AllHorizontalVariants.parameters = {
+  docs: {
+    description: {
+      story: 'Collection of different horizontal divider variants showing various width, color, and opacity combinations.'
+    }
+  }
+};
+
+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>
+    </div>
+  </div>
+`;
+AllVerticalVariants.parameters = {
+  docs: {
+    description: {
+      story: 'Collection of different vertical divider variants showing various height, thickness, color, and opacity combinations.'
+    }
+  }
+};
+
+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 -->
+    <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>
+    </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.'
+    }
+  }
+};