@repobit/dex-system-design 0.22.12 → 0.23.1

package/src/components/radio/radio.stories.js

@@ -2,102 +2,251 @@ import { html } from 'lit';
 import './radio.js';
 
 export default {
-  title: 'Atoms/Radio',
-  component: 'bd-radio',
-  tags: ['autodocs'], // 👉 Asta activează Docs
-  argTypes: {
-    name: { control: 'text' },
-    value: { control: 'text' },
-    label: { control: 'text' },
-    checked: { control: 'boolean' },
-    disabled: { control: 'boolean' },
+  title     : 'Components/Radio',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Two radio components are available:
+
+- \`<bd-radio>\` — a standard radio button (once selected, stays selected; dispatches value on change)
+- \`<bd-toggle-radio>\` — a toggleable radio that can be unchecked again (behaves like a checkbox with radio styling)
+
+### Usage
+\`\`\`html
+<bd-radio name="plan" value="basic" label="Basic Plan"></bd-radio>
+<bd-radio name="plan" value="premium" label="Premium Plan" checked></bd-radio>
+<bd-toggle-radio name="addon" value="vpn" label="Add VPN"></bd-toggle-radio>
+\`\`\`
+
+### Key Differences
+| Feature | bd-radio | bd-toggle-radio |
+|---|---|---|
+| Can be unchecked | No | Yes |
+| role | \`radio\` | \`checkbox\` |
+| change detail | \`{ value }\` always | \`{ value }\` or \`null\` when unchecked |
+
+### Accessibility
+- Both use \`role\`, \`aria-checked\`, \`aria-disabled\`
+- Keyboard: Space and Enter toggle the state
+- Focus ring appears only on keyboard Tab navigation
+- \`tabindex="-1"\` when disabled
+
+### Events
+- \`change\` — CustomEvent with \`detail: { value }\`
+        `
+      }
+    }
   },
+  argTypes: {
+    label: {
+      control    : 'text',
+      description: 'Visible label text rendered next to the radio',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    },
+    name: {
+      control    : 'text',
+      description: 'Form group name for the radio',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Form' }
+    },
+    value: {
+      control    : 'text',
+      description: 'Value emitted in the change event detail',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Form' }
+    },
+    checked: {
+      control    : 'boolean',
+      description: 'Whether the radio is selected',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
+    },
+    disabled: {
+      control    : 'boolean',
+      description: 'Disables interaction and applies disabled styles',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
+    }
+  }
 };
 
-// 👇 Template de bază
-const Template = ({ name, value, label, checked, disabled }) => html`
+const radioArgs = { label: 'Select this option', name: 'plan', value: 'basic', checked: false, disabled: false };
+
+const renderRadio = (args) => html`
   <bd-radio
-    .name=${name}
-    .value=${value}
-    .label=${label}
-    .checked=${checked}
-    .disabled=${disabled}
+    label="${args.label}"
+    name="${args.name}"
+    value="${args.value}"
+    ?checked="${args.checked}"
+    ?disabled="${args.disabled}"
   ></bd-radio>
 `;
 
-// 👉 Exemples BdRadio
-export const Default = Template.bind({});
-Default.args = {
-  name: 'group1',
-  value: 'default',
-  label: 'Radio normal',
-  checked: false,
-  disabled: false,
-};
-
-export const Checked = Template.bind({});
-Checked.args = {
-  name: 'group1',
-  value: 'checked',
-  label: 'Radio checked',
-  checked: true,
-  disabled: false,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  name: 'group1',
-  value: 'disabled',
-  label: 'Radio disabled',
-  checked: false,
-  disabled: true,
-};
-
-export const DisabledChecked = Template.bind({});
-DisabledChecked.args = {
-  name: 'group1',
-  value: 'disabled-checked',
-  label: 'Radio disabled & checked',
-  checked: true,
-  disabled: true,
-};
-
-// ------------------------------
-// BdToggleRadio
-// ------------------------------
-export const ToggleRadio = ({ name, value, label, checked, disabled }) => html`
+const renderToggle = (args) => html`
   <bd-toggle-radio
-    .name=${name}
-    .value=${value}
-    .label=${label}
-    .checked=${checked}
-    .disabled=${disabled}
+    label="${args.label}"
+    name="${args.name}"
+    value="${args.value}"
+    ?checked="${args.checked}"
+    ?disabled="${args.disabled}"
   ></bd-toggle-radio>
 `;
 
-ToggleRadio.args = {
-  name: 'toggle-group',
-  value: 'toggle1',
-  label: 'Toggle radio',
-  checked: false,
-  disabled: false,
+// ─── bd-radio Stories ──────────────────────────────────────────────────────
+
+export const RadioDefault = {
+  name      : 'Radio — Default (Unchecked)',
+  render    : () => html`<bd-radio name="plan" value="basic" label="Basic Plan"></bd-radio>`,
+  parameters: { docs: { description: { story: 'Default unchecked radio button.' } } }
+};
+
+export const RadioChecked = {
+  name      : 'Radio — Checked',
+  render    : () => html`<bd-radio name="plan" value="premium" label="Premium Plan" checked></bd-radio>`,
+  parameters: { docs: { description: { story: 'Radio pre-selected via the `checked` attribute.' } } }
+};
+
+export const RadioDisabled = {
+  name      : 'Radio — Disabled (Unchecked)',
+  render    : () => html`<bd-radio name="plan" value="enterprise" label="Enterprise (unavailable)" disabled></bd-radio>`,
+  parameters: { docs: { description: { story: 'Disabled radio — not interactable, `tabindex="-1"`, `aria-disabled="true"`.' } } }
+};
+
+export const RadioDisabledChecked = {
+  name      : 'Radio — Disabled (Checked)',
+  render    : () => html`<bd-radio name="plan" value="locked" label="Locked selection" checked disabled></bd-radio>`,
+  parameters: { docs: { description: { story: 'Disabled radio in the checked/selected state — locked selection.' } } }
+};
+
+export const RadioAllStates = {
+  name  : 'Radio — All States',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:12px;">
+      <bd-radio name="s1" value="1" label="Unchecked"></bd-radio>
+      <bd-radio name="s2" value="2" label="Checked" checked></bd-radio>
+      <bd-radio name="s3" value="3" label="Disabled unchecked" disabled></bd-radio>
+      <bd-radio name="s4" value="4" label="Disabled checked" checked disabled></bd-radio>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All four radio states: unchecked, checked, disabled unchecked, disabled checked.' } } }
 };
 
-export const ToggleChecked = ToggleRadio.bind({});
-ToggleChecked.args = {
-  ...ToggleRadio.args,
-  checked: true,
+export const RadioGroup = {
+  name  : 'Radio — Group (Single Select)',
+  render: () => html`
+    <fieldset style="border:none; padding:0;">
+      <legend style="font-weight:600; margin-bottom:12px;">Choose your plan</legend>
+      <div style="display:flex; flex-direction:column; gap:8px;">
+        <bd-radio name="plan" value="basic"     label="Basic — 1 device"      checked></bd-radio>
+        <bd-radio name="plan" value="standard"  label="Standard — 3 devices"></bd-radio>
+        <bd-radio name="plan" value="premium"   label="Premium — 5 devices"></bd-radio>
+        <bd-radio name="plan" value="unlimited" label="Unlimited devices" disabled></bd-radio>
+      </div>
+    </fieldset>
+  `,
+  parameters: { docs: { description: { story: 'A group of radio buttons sharing the same `name`. Only one can be selected at a time. Note: mutual exclusivity requires a parent controller — `bd-radio` does not auto-deselect siblings.' } } }
 };
 
-export const ToggleDisabled = ToggleRadio.bind({});
-ToggleDisabled.args = {
-  ...ToggleRadio.args,
-  disabled: true,
+export const RadioKeyboard = {
+  name  : 'Radio — Keyboard Navigation',
+  render: () => html`
+    <p style="font-size:14px; margin-bottom:8px;">Tab to focus, Space or Enter to select.</p>
+    <div style="display:flex; flex-direction:column; gap:8px;">
+      <bd-radio name="kb" value="a" label="Option A"></bd-radio>
+      <bd-radio name="kb" value="b" label="Option B"></bd-radio>
+      <bd-radio name="kb" value="c" label="Option C"></bd-radio>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Focus ring appears only via keyboard Tab navigation. Clicking with mouse does not show the focus ring.' } } }
 };
 
-export const ToggleDisabledChecked = ToggleRadio.bind({});
-ToggleDisabledChecked.args = {
-  ...ToggleRadio.args,
-  checked: true,
-  disabled: true,
+// ─── bd-toggle-radio Stories ───────────────────────────────────────────────
+
+export const ToggleRadioDefault = {
+  name      : 'ToggleRadio — Default (Unchecked)',
+  render    : () => html`<bd-toggle-radio name="addon" value="vpn" label="Add VPN"></bd-toggle-radio>`,
+  parameters: { docs: { description: { story: 'Default unchecked toggle radio. Unlike `bd-radio`, clicking again will uncheck it.' } } }
+};
+
+export const ToggleRadioChecked = {
+  name      : 'ToggleRadio — Checked',
+  render    : () => html`<bd-toggle-radio name="addon" value="vpn" label="VPN Enabled" checked></bd-toggle-radio>`,
+  parameters: { docs: { description: { story: 'Toggle radio pre-checked. Clicking toggles it off and emits `{ value: null }`.' } } }
+};
+
+export const ToggleRadioDisabled = {
+  name      : 'ToggleRadio — Disabled',
+  render    : () => html`<bd-toggle-radio name="addon" value="parental" label="Parental Controls (unavailable)" disabled></bd-toggle-radio>`,
+  parameters: { docs: { description: { story: 'Disabled toggle radio — cannot be interacted with.' } } }
+};
+
+export const ToggleRadioDisabledChecked = {
+  name      : 'ToggleRadio — Disabled Checked',
+  render    : () => html`<bd-toggle-radio name="addon" value="firewall" label="Firewall (always on)" checked disabled></bd-toggle-radio>`,
+  parameters: { docs: { description: { story: 'Disabled toggle in the checked state — locked feature.' } } }
+};
+
+export const ToggleRadioAllStates = {
+  name  : 'ToggleRadio — All States',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:12px;">
+      <bd-toggle-radio name="t1" value="1" label="Unchecked"></bd-toggle-radio>
+      <bd-toggle-radio name="t2" value="2" label="Checked" checked></bd-toggle-radio>
+      <bd-toggle-radio name="t3" value="3" label="Disabled unchecked" disabled></bd-toggle-radio>
+      <bd-toggle-radio name="t4" value="4" label="Disabled checked" checked disabled></bd-toggle-radio>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All four toggle radio states side by side.' } } }
 };
+
+export const ToggleRadioGroup = {
+  name  : 'ToggleRadio — Add-on Group',
+  render: () => html`
+    <fieldset style="border:none; padding:0;">
+      <legend style="font-weight:600; margin-bottom:12px;">Optional add-ons</legend>
+      <div style="display:flex; flex-direction:column; gap:8px;">
+        <bd-toggle-radio name="addon" value="vpn"      label="VPN Protection" checked></bd-toggle-radio>
+        <bd-toggle-radio name="addon" value="password" label="Password Manager"></bd-toggle-radio>
+        <bd-toggle-radio name="addon" value="parental" label="Parental Controls"></bd-toggle-radio>
+      </div>
+    </fieldset>
+  `,
+  parameters: { docs: { description: { story: 'Multiple toggle radios as independent on/off add-on selectors. Each can be toggled independently.' } } }
+};
+
+// ─── Combined ──────────────────────────────────────────────────────────────
+
+export const BothTypes = {
+  name  : 'Both Types Side by Side',
+  render: () => html`
+    <div style="display:flex; gap:48px; flex-wrap:wrap;">
+      <div>
+        <p style="font-weight:600; margin-bottom:8px;">bd-radio (stays selected)</p>
+        <div style="display:flex; flex-direction:column; gap:8px;">
+          <bd-radio name="compare" value="a" label="Option A" checked></bd-radio>
+          <bd-radio name="compare" value="b" label="Option B"></bd-radio>
+        </div>
+      </div>
+      <div>
+        <p style="font-weight:600; margin-bottom:8px;">bd-toggle-radio (can uncheck)</p>
+        <div style="display:flex; flex-direction:column; gap:8px;">
+          <bd-toggle-radio name="toggle-compare" value="x" label="Toggle X" checked></bd-toggle-radio>
+          <bd-toggle-radio name="toggle-compare" value="y" label="Toggle Y"></bd-toggle-radio>
+        </div>
+      </div>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'Side-by-side comparison of `bd-radio` and `bd-toggle-radio` behavior.' } } }
+};
+
+export const PlaygroundRadio = {
+  name      : '🛝 Playground — Radio',
+  args      : { ...radioArgs },
+  render    : renderRadio,
+  parameters: { docs: { description: { story: 'Interactive playground for `bd-radio`. Toggle checked, disabled, and edit label/value via Controls.' } } }
+};
+
+export const PlaygroundToggleRadio = {
+  name      : '🛝 Playground — ToggleRadio',
+  args      : { ...radioArgs, label: 'Toggle this option' },
+  render    : renderToggle,
+  parameters: { docs: { description: { story: 'Interactive playground for `bd-toggle-radio`. Toggle checked, disabled, and edit label/value via Controls.' } } }
+};

package/src/components/tabs/tabs.stories.js

@@ -1,18 +1,134 @@
 import { html } from 'lit';
-import './tabs.js'; 
+import './tabs.js';
 
 export default {
-  title: 'Components/Tabs', 
-  component: 'bd-tabs-component',
-  decorators: [
-    (story) => html`<div class="tabs">${story()}</div>`, 
-  ],
+  title     : 'Components/TabsComponent',
+  tags      : ['autodocs'],
   parameters: {
-    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+**TabsComponent** is a Lit component that renders a four-tab feature showcase with image, heading, description, and a "Find out more" link.
+
+### Usage
+\`\`\`html
+<bd-tabs-component></bd-tabs-component>
+\`\`\`
+
+### Tabs
+| Index | Title |
+|---|---|
+| 0 | Privacy Protection |
+| 1 | Identity Protection |
+| 2 | Device Protection |
+| 3 | Financial Insurance |
+
+### Structure
+- A \`<bd-highlight>\` heading with subtitle
+- A row of tab buttons (icon + label), each with \`role="tab"\` and \`aria-selected\`
+- A card with left image (\`<picture>\` with WebP/PNG sources) and right content (heading + description + link)
+
+### Behavior
+- Clicking a tab updates \`selectedTab\` and re-renders the card content
+- Image sources include width/format/optimize query params for responsive loading
+- Active tab has \`bd-selected\` class and \`aria-selected="true"\`
+
+### Accessibility
+- Tab buttons have \`role="tab"\`, \`aria-selected\`, \`aria-controls\`, and \`id\` attributes
+- Content panel has \`aria-labelledby\` linked to the heading
+        `
+      }
+    }
   },
+  argTypes: {
+    selectedTab: {
+      control    : { type: 'select' },
+      options    : [0, 1, 2, 3],
+      description: 'Index of the initially selected tab (0–3)',
+      table      : { type: { summary: 'number' }, defaultValue: { summary: '0' }, category: 'State' }
+    }
+  }
 };
 
-const Template = () => html`<bd-tabs-component></bd-tabs-component>`;
+// ─── Stories ───────────────────────────────────────────────────────────────
+
+export const Default = {
+  name      : 'Default (Tab 0 — Privacy Protection)',
+  render    : () => html`<bd-tabs-component></bd-tabs-component>`,
+  parameters: { docs: { description: { story: 'Default state with the first tab (Privacy Protection) selected.' } } }
+};
+
+export const Tab1Selected = {
+  name  : 'Tab 1 — Identity Protection',
+  render: () => {
+    const el = document.createElement('bd-tabs-component');
+    el.selectedTab = 1;
+    return el;
+  },
+  parameters: { docs: { description: { story: 'Component initialized with the Identity Protection tab selected.' } } }
+};
+
+export const Tab2Selected = {
+  name  : 'Tab 2 — Device Protection',
+  render: () => {
+    const el = document.createElement('bd-tabs-component');
+    el.selectedTab = 2;
+    return el;
+  },
+  parameters: { docs: { description: { story: 'Component initialized with the Device Protection tab selected.' } } }
+};
 
-export const Default = Template.bind({});
-Default.storyName = 'Tabs Component';
+export const Tab3Selected = {
+  name  : 'Tab 3 — Financial Insurance',
+  render: () => {
+    const el = document.createElement('bd-tabs-component');
+    el.selectedTab = 3;
+    return el;
+  },
+  parameters: { docs: { description: { story: 'Component initialized with the Financial Insurance tab selected.' } } }
+};
+
+export const AllTabsOverview = {
+  name  : 'All Tabs Overview',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:64px;">
+      <div>
+        <p style="font-weight:600; margin-bottom:8px;">Tab 0 — Privacy Protection</p>
+        <bd-tabs-component></bd-tabs-component>
+      </div>
+    </div>
+    <p style="font-size:14px; margin-top:16px; color:#666;">
+      Click the tab buttons above to switch between Privacy, Identity, Device, and Financial Insurance tabs.
+    </p>
+  `,
+  parameters: { docs: { description: { story: 'Full interactive component. Click each tab to see the content switch between the four protection categories.' } } }
+};
+
+export const MobileView = {
+  name      : 'Mobile View (375px)',
+  render    : () => html`<bd-tabs-component></bd-tabs-component>`,
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+    docs    : { description: { story: 'Tabs component at 375px. Tests tab button layout, image sizing, and content reflow on small screens.' } }
+  }
+};
+
+export const TabletView = {
+  name      : 'Tablet View (768px)',
+  render    : () => html`<bd-tabs-component></bd-tabs-component>`,
+  parameters: {
+    viewport: { defaultViewport: 'tablet' },
+    docs    : { description: { story: 'Tabs component at 768px tablet width.' } }
+  }
+};
+
+export const Playground = {
+  name  : '🛝 Playground',
+  args  : { selectedTab: 0 },
+  render: (args) => {
+    const el = document.createElement('bd-tabs-component');
+    el.selectedTab = args.selectedTab;
+    return el;
+  },
+  parameters: { docs: { description: { story: 'Interactive playground. Use the Controls panel to select which tab is initially active (0–3).' } } }
+};