@repobit/dex-system-design 0.22.12 → 0.23.1

package/src/components/badge/badge.stories.js

@@ -1,190 +1,302 @@
 import { html } from 'lit';
-import '../heading/heading.js';
 import './badge.js';
 
 export default {
-  title     : 'Atoms/Badge',
-  component : 'bd-badge',
+  title     : 'Components/Badge',
   tags      : ['autodocs'],
   parameters: {
     docs: {
       description: {
         component: `
-Un **badge** care poate afișa un text sau un element în slot.
-Badge-ul acceptă culori personalizate, variante predefinite, dimensiuni diferite și mărimi de font.
-Acest Storybook include toate exemplele posibile pentru testare completă.`
+**BdBadge** is a Lit web component that renders a styled pill/badge with optional icon, size, color, and variant support.
+
+### Usage
+\`\`\`html
+<bd-badge color="#026DFF" size="md">New</bd-badge>
+<bd-badge size="lg" icon="individual">Personal</bd-badge>
+<bd-badge size="sm" icon="family">Family</bd-badge>
+\`\`\`
+
+### Props
+| Prop | Values | Default |
+|---|---|---|
+| \`color\` | Any hex or CSS color | \`#026DFF\` |
+| \`variant\` | Any string class name | \`''\` |
+| \`size\` | \`sm\`, \`md\`, \`lg\` | \`md\` |
+| \`fontsize\` | \`12\`, \`14\`, \`16\` | \`14\` |
+| \`icon\` | \`individual\`, \`family\`, \`''\` | \`''\` |
+
+### Notes
+- \`color\` sets the \`--badge-bg\` CSS custom property via \`updated()\`
+- \`size\` controls padding, border-radius, and default font size
+- \`fontsize\` overrides the font size independently from \`size\`
+- \`icon\` renders an SVG icon span before the slotted text
+        `
       }
     }
   },
   argTypes: {
-    children: {
-      control     : 'text',
-      description : 'Conținutul afișat în interiorul badge-ului (prin slot).',
-      defaultValue: 'Badge'
-    },
     color: {
-      control     : 'color',
-      description : 'Culoarea de fundal a badge-ului.',
-      defaultValue: '#026DFF'
+      control    : 'color',
+      description: 'Background color of the badge. Sets the `--badge-bg` CSS variable.',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '#026DFF' },
+        category    : 'Appearance'
+      }
     },
     variant: {
-      control    : { type: 'select' },
-      options    : ['', 'bd-light-blue', 'bd-light-green'],
-      description: 'Variantă de stil predefinită pentru badge.'
+      control    : 'text',
+      description: 'Additional CSS class applied to the inner `<span>` for custom variants.',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: '' },
+        category    : 'Appearance'
+      }
     },
     size: {
       control    : { type: 'select' },
       options    : ['sm', 'md', 'lg'],
-      description: 'Dimensiunea badge-ului.'
+      description: 'Controls padding, border-radius, and default font size.',
+      table      : {
+        type        : { summary: "'sm' | 'md' | 'lg'" },
+        defaultValue: { summary: 'md' },
+        category    : 'Size'
+      }
     },
     fontsize: {
       control    : { type: 'select' },
       options    : ['12', '14', '16'],
-      description: 'Mărimea fontului textului.'
+      description: 'Explicitly overrides the font size, independent of `size`.',
+      table      : {
+        type        : { summary: "'12' | '14' | '16'" },
+        defaultValue: { summary: '14' },
+        category    : 'Size'
+      }
+    },
+    icon: {
+      control    : { type: 'select' },
+      options    : ['', 'individual', 'family'],
+      description: 'Renders an icon before the slotted text. Empty string means no icon.',
+      table      : {
+        type        : { summary: "'individual' | 'family' | ''" },
+        defaultValue: { summary: '' },
+        category    : 'Icon'
+      }
+    },
+    label: {
+      control    : 'text',
+      description: 'Slotted text content displayed inside the badge.',
+      table      : {
+        type        : { summary: 'string' },
+        defaultValue: { summary: 'Badge' },
+        category    : 'Content'
+      }
     }
   }
 };
 
-// TEMPLATE DE BAZĂ
-const Template = ({ children, color, variant, size, fontsize }) => html`
+const render = (args) => html`
   <bd-badge
-    color="${color}"
-    variant="${variant}"
-    size="${size}"
-    fontsize="${fontsize}"
-  >
-    ${children}
-  </bd-badge>
+    color="${args.color}"
+    variant="${args.variant}"
+    size="${args.size}"
+    fontsize="${args.fontsize}"
+    icon="${args.icon}"
+  >${args.label}</bd-badge>
 `;
 
-export const Default = Template.bind({});
-Default.args = {
-  children: 'Badge',
+const defaultArgs = {
   color   : '#026DFF',
   variant : '',
   size    : 'md',
-  fontsize: '14'
+  fontsize: '14',
+  icon    : '',
+  label   : 'Badge'
 };
 
-Default.parameters = {
-  docs: {
-    description: {
-      story: 'Exemplul de bază pentru componenta Badge.'
+// ─── Size Stories ──────────────────────────────────────────────────────────
+
+export const SizeSmall = {
+  name      : 'Size — Small (sm)',
+  render    : () => html`<bd-badge size="sm">Small Badge</bd-badge>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Small badge with compact padding and smallest border-radius.'
+      }
     }
   }
 };
 
-// TEMPLATE SECȚIUNI
-const GridTemplate = (items) => html`
-  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">
-    ${items}
-  </div>
-`;
+export const SizeMedium = {
+  name      : 'Size — Medium (md)',
+  render    : () => html`<bd-badge size="md">Medium Badge</bd-badge>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default medium size badge.'
+      }
+    }
+  }
+};
 
-const SectionTemplate = (title, items) => html`
-  <div style="margin-bottom: 32px;">
-    <bd-h as="h3" style="margin-bottom: 16px; color: #333;">${title}</bd-h>
-    ${GridTemplate(items)}
-  </div>
-`;
+export const SizeLarge = {
+  name      : 'Size — Large (lg)',
+  render    : () => html`<bd-badge size="lg">Large Badge</bd-badge>`,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large badge with more padding and a larger border-radius.'
+      }
+    }
+  }
+};
 
-// ===================
-// 🔵 TOATE VARIANTELE
-// ===================
-export const Variants = () => {
-  const variants = [
-    { variant: '', label: 'Default' },
-    { variant: 'bd-light-blue', label: 'Light Blue' },
-    { variant: 'bd-light-green', label: 'Light Green' }
-  ];
-
-  return SectionTemplate(
-    'Variante disponibile',
-    variants.map(item => html`
-      <bd-badge variant="${item.variant}">${item.label}</bd-badge>
-    `)
-  );
+export const AllSizes = {
+  name  : 'All Sizes',
+  render: () => html`
+    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
+      <bd-badge size="sm">Small</bd-badge>
+      <bd-badge size="md">Medium</bd-badge>
+      <bd-badge size="lg">Large</bd-badge>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'All three sizes rendered side by side for visual comparison.'
+      }
+    }
+  }
 };
 
-Variants.parameters = {
-  docs: {
-    description: { story: 'Toate variantele vizuale ale componentei bd-badge.' }
+// ─── Color Stories ─────────────────────────────────────────────────────────
+
+export const DefaultColor = {
+  name      : 'Color — Default Blue',
+  render    : () => html`<bd-badge color="#026DFF">Default</bd-badge>`,
+  parameters: {
+    docs: {
+      description: { story: 'Default blue badge using the `#026DFF` color.' }
+    }
   }
 };
 
-// ===================
-// 🔶 TOATE DIMENSIUNILE
-// ===================
-export const Sizes = () => {
-  const sizes = [
-    { size: 'sm', label: 'Small' },
-    { size: 'md', label: 'Medium' },
-    { size: 'lg', label: 'Large' }
-  ];
-
-  return SectionTemplate(
-    'Dimensiuni disponibile',
-    sizes.map(item => html`
-      <bd-badge size="${item.size}">${item.label}</bd-badge>
-    `)
-  );
+export const CustomColors = {
+  name  : 'Color — Custom Colors',
+  render: () => html`
+    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+      <bd-badge color="#026DFF">Blue</bd-badge>
+      <bd-badge color="#E53935">Red</bd-badge>
+      <bd-badge color="#43A047">Green</bd-badge>
+      <bd-badge color="#FB8C00">Orange</bd-badge>
+      <bd-badge color="#8E24AA">Purple</bd-badge>
+      <bd-badge color="#333333">Dark</bd-badge>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Multiple badges with different `color` values applied via the `--badge-bg` CSS variable.'
+      }
+    }
+  }
 };
 
-Sizes.parameters = {
-  docs: {
-    description: { story: 'Dimensiuni disponibile pentru badge.' }
+// ─── Font Size Stories ─────────────────────────────────────────────────────
+
+export const FontSizes = {
+  name  : 'Font Sizes (12 / 14 / 16)',
+  render: () => html`
+    <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
+      <bd-badge fontsize="12">Font 12</bd-badge>
+      <bd-badge fontsize="14">Font 14</bd-badge>
+      <bd-badge fontsize="16">Font 16</bd-badge>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'All three `fontsize` values rendered. Font size overrides the default derived from `size`.'
+      }
+    }
   }
 };
 
-// ==========================
-// 🔤 TOATE MĂRIMILE DE FONT
-// ==========================
-export const FontSizes = () => {
-  const fontSizes = [
-    { fontsize: '12', label: 'Font 12' },
-    { fontsize: '14', label: 'Font 14' },
-    { fontsize: '16', label: 'Font 16' }
-  ];
-
-  return SectionTemplate(
-    'Mărimi de font disponibile',
-    fontSizes.map(item => html`
-      <bd-badge fontsize="${item.fontsize}">${item.label}</bd-badge>
-    `)
-  );
+// ─── Icon Stories ──────────────────────────────────────────────────────────
+
+export const IconIndividual = {
+  name      : 'Icon — Individual',
+  render    : () => html`<bd-badge icon="individual" size="md">Individual</bd-badge>`,
+  parameters: {
+    docs: {
+      description: {
+        story: '`icon="individual"` renders the individual user icon before the slotted text.'
+      }
+    }
+  }
 };
 
-FontSizes.parameters = {
-  docs: {
-    description: { story: 'Toate mărimile de font suportate de badge.' }
+export const IconFamily = {
+  name      : 'Icon — Family',
+  render    : () => html`<bd-badge icon="family" size="md">Family</bd-badge>`,
+  parameters: {
+    docs: {
+      description: {
+        story: '`icon="family"` renders the family icon before the slotted text.'
+      }
+    }
   }
 };
 
-// =======================================
-// 🧪 COMBINAȚII: VARIANTE × DIMENSIUNI
-// =======================================
-export const Combinations = () => {
-  const combinations = [
-    { variant: 'bd-light-blue', size: 'sm', label: 'Light Blue Small' },
-    { variant: 'bd-light-blue', size: 'md', label: 'Light Blue Medium' },
-    { variant: 'bd-light-blue', size: 'lg', label: 'Light Blue Large' },
-    { variant: 'bd-light-green', size: 'sm', label: 'Light Green Small' },
-    { variant: 'bd-light-green', size: 'md', label: 'Light Green Medium' },
-    { variant: 'bd-light-green', size: 'lg', label: 'Light Green Large' }
-  ];
-
-  return SectionTemplate(
-    'Combinații între variante și dimensiuni',
-    combinations.map(item => html`
-      <bd-badge variant="${item.variant}" size="${item.size}">
-        ${item.label}
-      </bd-badge>
-    `)
-  );
+export const AllIcons = {
+  name  : 'All Icons',
+  render: () => html`
+    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+      <bd-badge>No Icon</bd-badge>
+      <bd-badge icon="individual">Individual</bd-badge>
+      <bd-badge icon="family">Family</bd-badge>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'All three icon states: no icon, individual, and family — displayed side by side.'
+      }
+    }
+  }
 };
 
-Combinations.parameters = {
-  docs: {
-    description: { story: 'Combinații ale tuturor variantelor și dimensiunilor.' }
+// ─── Combined Stories ──────────────────────────────────────────────────────
+
+export const CombinedVariants = {
+  name  : 'Combined Variants',
+  render: () => html`
+    <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+      <bd-badge size="sm" color="#E53935">Sale</bd-badge>
+      <bd-badge size="md" color="#43A047" icon="individual">Personal Plan</bd-badge>
+      <bd-badge size="lg" color="#026DFF" icon="family" fontsize="16">Family Plan</bd-badge>
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Three badges combining different sizes, colors, icons, and font sizes for a real-world usage example.'
+      }
+    }
   }
 };
+
+export const Playground = {
+  name      : '🛝 Playground',
+  args      : { ...defaultArgs },
+  render,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fully interactive. Use Controls to adjust color, size, fontsize, icon, variant, and slotted label in real time.'
+      }
+    }
+  }
+};