@repobit/dex-system-design 0.23.9 → 0.23.11

package/src/components/dropdown/dropdown.stories.js

@@ -0,0 +1,221 @@
+import { html } from 'lit';
+import './dropdown.js';
+
+export default {
+  title     : 'Components/Dropdown',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**CustomDropdown** is a Lit form select component with label, validation states, tooltip, and size variants.
+
+### Usage
+\`\`\`html
+<bd-custom-dropdown
+  label="Select country"
+  .options="${['Romania', 'Germany', 'France']}"
+  kind="md"
+  required
+></bd-custom-dropdown>
+\`\`\`
+
+### States
+| State | Prop | CSS Class |
+|---|---|---|
+| Default | — | — |
+| Invalid | \`invalid\` | \`form-input--error\` |
+| Valid | \`validated\` | \`form-input--success\` |
+| Disabled | \`disabled\` | \`form-input--disabled\` |
+
+### Size Variants
+| Kind | Input Class | Label Class |
+|---|---|---|
+| \`sm\` | \`input-sm\` | \`label-sm\` |
+| \`md\` | \`input-md\` | \`label-md\` |
+| \`lg\` | \`input-lg\` | \`label-lg\` |
+
+### Notes
+- Options can be passed as an Array or a JSON string
+- First option is auto-selected by default
+- Tooltip/help text is only rendered when \`tooltip\` prop is non-empty
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control    : 'text',
+      description: 'Label text shown above the select',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'Select an option' }, category: 'Content' }
+    },
+    options: {
+      control    : 'object',
+      description: 'Array of option strings. Can also be passed as a JSON string.',
+      table      : { type: { summary: 'string[]' }, defaultValue: { summary: '[]' }, category: 'Content' }
+    },
+    kind: {
+      control    : { type: 'select' },
+      options    : ['sm', 'md', 'lg'],
+      description: 'Size variant controlling input and label CSS classes',
+      table      : { type: { summary: "'sm'|'md'|'lg'" }, defaultValue: { summary: 'md' }, category: 'Appearance' }
+    },
+    required: {
+      control    : 'boolean',
+      description: 'Adds a required asterisk to the label and `required` attribute to the select',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
+    },
+    invalid: {
+      control    : 'boolean',
+      description: 'Applies error styling and `form-help-text--error` to the tooltip',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
+    },
+    validated: {
+      control    : 'boolean',
+      description: 'Applies success styling and `form-help-text--success` to the tooltip',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
+    },
+    disabled: {
+      control    : 'boolean',
+      description: 'Disables the select element',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
+    },
+    tooltip: {
+      control    : 'text',
+      description: 'Help text shown below the select. Empty string hides it.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    }
+  }
+};
+
+const defaultOptions = ['Select a plan', 'Antivirus Plus', 'Total Security', 'Premium Security'];
+
+const render = (args) => html`
+  <bd-custom-dropdown
+    label="${args.label}"
+    .options="${args.options}"
+    kind="${args.kind}"
+    tooltip="${args.tooltip}"
+    ?required="${args.required}"
+    ?invalid="${args.invalid}"
+    ?validated="${args.validated}"
+    ?disabled="${args.disabled}"
+  ></bd-custom-dropdown>
+`;
+
+const defaultArgs = {
+  label    : 'Select a plan', options  : defaultOptions,
+  kind     : 'md', tooltip  : '', required : false,
+  invalid  : false, validated: false, disabled : false
+};
+
+// ─── Stories ───────────────────────────────────────────────────────────────
+
+export const Default = {
+  name  : 'Default',
+  render: () => html`
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md"></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Default dropdown with no validation state and no tooltip.' } } }
+};
+
+export const AllSizes = {
+  name  : 'All Sizes',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:20px; max-width:400px;">
+      <bd-custom-dropdown label="Small"  .options="${defaultOptions}" kind="sm"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Medium" .options="${defaultOptions}" kind="md"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Large"  .options="${defaultOptions}" kind="lg"></bd-custom-dropdown>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All three size variants stacked for comparison.' } } }
+};
+
+export const Required = {
+  name  : 'Required',
+  render: () => html`
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md" required></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Required field — shows a `*` after the label.' } } }
+};
+
+export const WithTooltip = {
+  name  : 'With Tooltip / Help Text',
+  render: () => html`
+    <bd-custom-dropdown
+      label="Select a plan"
+      .options="${defaultOptions}"
+      kind="md"
+      tooltip="Choose the plan that best fits your needs."
+    ></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Help text rendered below the select via the `tooltip` prop.' } } }
+};
+
+export const Invalid = {
+  name  : 'Invalid State',
+  render: () => html`
+    <bd-custom-dropdown
+      label="Select a plan"
+      .options="${defaultOptions}"
+      kind="md"
+      invalid
+      tooltip="Please select a valid option."
+    ></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Error state — applies `form-input--error` and `form-help-text--error` classes.' } } }
+};
+
+export const Validated = {
+  name  : 'Validated State',
+  render: () => html`
+    <bd-custom-dropdown
+      label="Select a plan"
+      .options="${defaultOptions}"
+      kind="md"
+      validated
+      tooltip="Great choice!"
+    ></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Success state — applies `form-input--success` and `form-help-text--success` classes.' } } }
+};
+
+export const Disabled = {
+  name  : 'Disabled',
+  render: () => html`
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md" disabled></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Disabled select — applies `form-input--disabled` class.' } } }
+};
+
+export const AllStates = {
+  name  : 'All Validation States',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:20px; max-width:400px;">
+      <bd-custom-dropdown label="Default"   .options="${defaultOptions}" kind="md" tooltip="Default help text."></bd-custom-dropdown>
+      <bd-custom-dropdown label="Invalid"   .options="${defaultOptions}" kind="md" invalid    tooltip="This field has an error."></bd-custom-dropdown>
+      <bd-custom-dropdown label="Validated" .options="${defaultOptions}" kind="md" validated  tooltip="Looks good!"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Disabled"  .options="${defaultOptions}" kind="md" disabled></bd-custom-dropdown>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All four states stacked: default, invalid, validated, disabled.' } } }
+};
+
+export const ManyOptions = {
+  name  : 'Many Options',
+  render: () => html`
+    <bd-custom-dropdown
+      label="Select your country"
+      .options="${['Select country', 'Romania', 'Germany', 'France', 'Spain', 'Italy', 'Netherlands', 'Belgium', 'Poland', 'Sweden']}"
+      kind="md"
+    ></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Dropdown with 10 options. Tests scroll behavior of the native select.' } } }
+};
+
+export const Playground = {
+  name      : '🛝 Playground',
+  args      : { ...defaultArgs },
+  render,
+  parameters: { docs: { description: { story: 'Fully interactive playground. Adjust all props via Controls.' } } }
+};