@boostdev/design-system-components 1.1.1 → 1.2.0

package/src/web-components/interaction/form/BdsCombobox.stories.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ComboboxOption } from './bds-combobox';
+import '../../index';
+
+const COUNTRIES: ComboboxOption[] = [
+  { value: 'nl', label: 'Netherlands' },
+  { value: 'be', label: 'Belgium' },
+  { value: 'de', label: 'Germany' },
+  { value: 'fr', label: 'France' },
+  { value: 'es', label: 'Spain' },
+  { value: 'it', label: 'Italy' },
+  { value: 'gb', label: 'United Kingdom', disabled: true },
+];
+
+function BdsCombobox({
+  placeholder = 'Search…',
+  disabled,
+}: {
+  placeholder?: string;
+  disabled?: boolean;
+}) {
+  return React.createElement('bds-combobox', {
+    options: JSON.stringify(COUNTRIES),
+    placeholder,
+    disabled: disabled || undefined,
+    style: { display: 'block', maxInlineSize: '280px' },
+  });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/Combobox',
+  component: BdsCombobox,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsCombobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { placeholder: 'Select a country…' } };
+export const Disabled: Story = { args: { placeholder: 'Select a country…', disabled: true } };
+export const WithValue: Story = {
+  render: () =>
+    React.createElement('bds-combobox', {
+      options: JSON.stringify(COUNTRIES),
+      value: 'nl',
+      placeholder: 'Search…',
+      style: { display: 'block', maxInlineSize: '280px' },
+    }),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxInlineSize: '280px' }}>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Default</p>
+        {React.createElement('bds-combobox', { options: JSON.stringify(COUNTRIES), placeholder: 'Search…' })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>With pre-selected value</p>
+        {React.createElement('bds-combobox', { options: JSON.stringify(COUNTRIES), value: 'be', placeholder: 'Search…' })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Disabled</p>
+        {React.createElement('bds-combobox', { options: JSON.stringify(COUNTRIES), placeholder: 'Search…', disabled: true })}
+      </div>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState<{ value: string; label: string } | null>(null);
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', maxInlineSize: '280px' }}>
+        <p style={{ margin: '0 0 8px', fontSize: '0.875rem' }}>
+          Selected: {selected ? `${selected.label} (${selected.value})` : '(none)'}
+        </p>
+        {React.createElement('bds-combobox', {
+          options: JSON.stringify(COUNTRIES),
+          placeholder: 'Type to filter…',
+          'onbds-change': (e: CustomEvent<{ value: string; label: string }>) => setSelected(e.detail),
+        })}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/BdsFileInput.mdx

@@ -0,0 +1,44 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsFileInput.stories';
+
+<Meta of={Stories} />
+
+# File Input
+
+`<bds-file-input>` is a form-associated file upload zone with drag-and-drop support. The slot content customises the zone label text.
+
+## Usage
+
+```html
+<bds-file-input name="avatar" accept="image/*">Upload your photo</bds-file-input>
+```
+
+## Attributes
+
+| Attribute  | Type      | Default | Description                              |
+|------------|-----------|---------|------------------------------------------|
+| `name`     | `string`  | `""`    | Form field name                          |
+| `accept`   | `string`  | `""`    | File types to accept (e.g. `"image/*"`)  |
+| `multiple` | `boolean` | `false` | Allow selecting multiple files           |
+| `disabled` | `boolean` | `false` | Disables the drop zone                   |
+
+## Events
+
+| Event        | Detail      | Description                              |
+|--------------|-------------|------------------------------------------|
+| `bds-change` | `FileList`  | Fired when files are selected or dropped |
+
+## Slots
+
+| Slot      | Description                    |
+|-----------|--------------------------------|
+| (default) | Custom label text for the zone |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/form/BdsFileInput.stories.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../../index';
+
+function BdsFileInput({
+  accept,
+  multiple,
+  disabled,
+}: {
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+}) {
+  return React.createElement('bds-file-input', {
+    accept,
+    multiple: multiple || undefined,
+    disabled: disabled || undefined,
+    style: { display: 'block', maxInlineSize: '480px' },
+  });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/FileInput',
+  component: BdsFileInput,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    multiple: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsFileInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: {} };
+export const ImagesOnly: Story = { args: { accept: 'image/*' } };
+export const Multiple: Story = { args: { multiple: true } };
+export const Disabled: Story = { args: { disabled: true } };
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxInlineSize: '480px' }}>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>Any file type</p>
+        {React.createElement('bds-file-input', { style: { display: 'block' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>Images only</p>
+        {React.createElement('bds-file-input', { accept: 'image/*', style: { display: 'block' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>Multiple files</p>
+        {React.createElement('bds-file-input', { multiple: true, style: { display: 'block' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>Disabled</p>
+        {React.createElement('bds-file-input', { disabled: true, style: { display: 'block' } })}
+      </div>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [files, setFiles] = React.useState<string[]>([]);
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', maxInlineSize: '480px' }}>
+        {React.createElement('bds-file-input', {
+          multiple: true,
+          style: { display: 'block' },
+          'onbds-change': (e: CustomEvent<FileList>) => {
+            setFiles(Array.from(e.detail).map(f => f.name));
+          },
+        })}
+        {files.length > 0 && (
+          <ul style={{ margin: 0, padding: '0 0 0 16px', fontSize: '0.875rem' }}>
+            {files.map(name => <li key={name}>{name}</li>)}
+          </ul>
+        )}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/BdsNumberInput.mdx

@@ -0,0 +1,41 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsNumberInput.stories';
+
+<Meta of={Stories} />
+
+# Number Input
+
+`<bds-number-input>` is a form-associated number input with decrement/increment stepper buttons. The native browser spin buttons are hidden in favour of the custom steppers.
+
+## Usage
+
+```html
+<bds-number-input name="qty" value="1" min="0" max="99" step="1"></bds-number-input>
+```
+
+## Attributes
+
+| Attribute  | Type      | Default     | Description                        |
+|------------|-----------|-------------|------------------------------------|
+| `name`     | `string`  | `""`        | Form field name                    |
+| `value`    | `number`  | `0`         | Current numeric value              |
+| `min`      | `number`  | `undefined` | Minimum allowed value              |
+| `max`      | `number`  | `undefined` | Maximum allowed value              |
+| `step`     | `number`  | `1`         | Increment/decrement step           |
+| `disabled` | `boolean` | `false`     | Disables all interaction           |
+
+## Events
+
+| Event    | Description                                |
+|----------|--------------------------------------------|
+| `input`  | Fired on stepper click and native input    |
+| `change` | Native change event                        |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/form/BdsNumberInput.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../../index';
+
+function BdsNumberInput({
+  value,
+  min,
+  max,
+  step,
+  disabled,
+}: {
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+}) {
+  return React.createElement('bds-number-input', {
+    value,
+    min,
+    max,
+    step,
+    disabled: disabled || undefined,
+    style: { display: 'block', maxInlineSize: '160px' },
+  });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/NumberInput',
+  component: BdsNumberInput,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    value: { control: 'number' },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsNumberInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 0 } };
+export const WithBounds: Story = { args: { value: 5, min: 0, max: 10 } };
+export const WithStep: Story = { args: { value: 0, min: 0, max: 100, step: 5 } };
+export const Disabled: Story = { args: { value: 42, disabled: true } };
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Default</p>
+        {React.createElement('bds-number-input', { value: 0, style: { display: 'block', maxInlineSize: '160px' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Bounded (0–10)</p>
+        {React.createElement('bds-number-input', { value: 5, min: 0, max: 10, style: { display: 'block', maxInlineSize: '160px' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Step 5</p>
+        {React.createElement('bds-number-input', { value: 50, min: 0, max: 100, step: 5, style: { display: 'block', maxInlineSize: '160px' } })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 4px', fontSize: '0.75rem', color: '#888' }}>Disabled</p>
+        {React.createElement('bds-number-input', { value: 7, disabled: true, style: { display: 'block', maxInlineSize: '160px' } })}
+      </div>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [qty, setQty] = React.useState(1);
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <p style={{ margin: '0 0 4px', fontSize: '0.875rem' }}>Quantity: {qty}</p>
+        {React.createElement('bds-number-input', {
+          value: qty,
+          min: 1,
+          max: 99,
+          step: 1,
+          style: { display: 'block', maxInlineSize: '160px' },
+          onInput: (e: Event) => setQty(parseInt((e.target as HTMLInputElement).value, 10) || 1),
+        })}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/BdsRadio.mdx

@@ -0,0 +1,41 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsRadio.stories';
+
+<Meta of={Stories} />
+
+# Radio
+
+`<bds-radio>` is a form-associated radio button custom element. Use multiple elements with the same `name` to create a radio group where only one option can be selected.
+
+## Usage
+
+```html
+<bds-radio name="size" value="s">Small</bds-radio>
+<bds-radio name="size" value="m" checked>Medium</bds-radio>
+<bds-radio name="size" value="l">Large</bds-radio>
+```
+
+## Attributes
+
+| Attribute  | Type      | Default | Description                         |
+|------------|-----------|---------|-------------------------------------|
+| `name`     | `string`  | `""`    | Groups radio buttons together       |
+| `value`    | `string`  | `""`    | Submitted value when selected       |
+| `checked`  | `boolean` | `false` | Whether this option is selected     |
+| `required` | `boolean` | `false` | Marks the field as required         |
+| `disabled` | `boolean` | `false` | Disables this option                |
+
+## Slots
+
+| Slot      | Description   |
+|-----------|---------------|
+| (default) | Label text    |
+
+## Stories
+
+<Canvas of={Stories.Group} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/form/BdsRadio.stories.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import '../../index';
+
+function BdsRadio({
+  label = 'Option',
+  value = 'option',
+  checked,
+  disabled,
+}: {
+  label?: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+}) {
+  return React.createElement(
+    'bds-radio',
+    {
+      name: 'demo',
+      value,
+      checked: checked || undefined,
+      disabled: disabled || undefined,
+    },
+    label,
+  );
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/Radio',
+  component: BdsRadio,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsRadio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { label: 'Option A', value: 'a' } };
+export const Checked: Story = { args: { label: 'Pre-selected', value: 'b', checked: true } };
+export const Disabled: Story = { args: { label: 'Disabled option', value: 'c', disabled: true } };
+
+export const Group: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      {React.createElement('bds-radio', { name: 'size', value: 's' }, 'Small')}
+      {React.createElement('bds-radio', { name: 'size', value: 'm', checked: true }, 'Medium')}
+      {React.createElement('bds-radio', { name: 'size', value: 'l' }, 'Large')}
+      {React.createElement('bds-radio', { name: 'size', value: 'xl', disabled: true }, 'Extra Large (unavailable)')}
+    </div>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      {React.createElement('bds-radio', { name: 'v', value: 'a' }, 'Unselected')}
+      {React.createElement('bds-radio', { name: 'v', value: 'b', checked: true }, 'Selected')}
+      {React.createElement('bds-radio', { name: 'v', value: 'c', disabled: true }, 'Disabled')}
+      {React.createElement('bds-radio', { name: 'v', value: 'd', checked: true, disabled: true }, 'Disabled selected')}
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('m');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <p style={{ margin: '0 0 8px', fontSize: '0.875rem' }}>Selected: {value}</p>
+        {(['s', 'm', 'l'] as const).map(v =>
+          React.createElement(
+            'bds-radio',
+            {
+              key: v,
+              name: 'ctrl',
+              value: v,
+              checked: value === v || undefined,
+              onChange: () => setValue(v),
+            },
+            v === 's' ? 'Small' : v === 'm' ? 'Medium' : 'Large',
+          ),
+        )}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/BdsSegmentedControl.mdx

@@ -0,0 +1,42 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsSegmentedControl.stories';
+
+<Meta of={Stories} />
+
+# Segmented Control
+
+`<bds-segmented-control>` renders a group of radio buttons styled as a unified segmented control with an animated sliding thumb. Uses a JSON `options` attribute.
+
+## Usage
+
+```html
+<bds-segmented-control
+  name="view"
+  value="list"
+  options='[{"value":"list","label":"List"},{"value":"grid","label":"Grid"}]'
+></bds-segmented-control>
+```
+
+## Attributes
+
+| Attribute  | Type      | Default | Description                                         |
+|------------|-----------|---------|-----------------------------------------------------|
+| `name`     | `string`  | `""`    | Form field name (also used for radio group)         |
+| `value`    | `string`  | `""`    | Currently selected value                            |
+| `options`  | `string`  | `"[]"`  | JSON array of `{ value, label, disabled? }` objects |
+| `disabled` | `boolean` | `false` | Disables all options                                |
+
+## Events
+
+| Event    | Description                          |
+|----------|--------------------------------------|
+| `change` | Fired when a new segment is selected |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />

package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { SegmentedOption } from './bds-segmented-control';
+import '../../index';
+
+const VIEW_OPTIONS: SegmentedOption[] = [
+  { value: 'list', label: 'List' },
+  { value: 'grid', label: 'Grid' },
+  { value: 'table', label: 'Table' },
+];
+
+const PERIOD_OPTIONS: SegmentedOption[] = [
+  { value: 'day', label: 'Day' },
+  { value: 'week', label: 'Week' },
+  { value: 'month', label: 'Month' },
+  { value: 'year', label: 'Year', disabled: true },
+];
+
+function BdsSegmentedControl({
+  value = 'list',
+  disabled,
+}: {
+  value?: string;
+  disabled?: boolean;
+}) {
+  return React.createElement('bds-segmented-control', {
+    name: 'view',
+    value,
+    options: JSON.stringify(VIEW_OPTIONS),
+    disabled: disabled || undefined,
+  });
+}
+
+const meta = {
+  title: 'Web Components/Interaction/Form/SegmentedControl',
+  component: BdsSegmentedControl,
+  tags: ['!stable', 'experimental'],
+  parameters: { layout: 'padded' },
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+} satisfies Meta<typeof BdsSegmentedControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { value: 'list' } };
+export const Disabled: Story = { args: { value: 'grid', disabled: true } };
+export const WithDisabledOption: Story = {
+  render: () =>
+    React.createElement('bds-segmented-control', {
+      name: 'period',
+      value: 'week',
+      options: JSON.stringify(PERIOD_OPTIONS),
+    }),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>View mode</p>
+        {React.createElement('bds-segmented-control', { name: 'view1', value: 'grid', options: JSON.stringify(VIEW_OPTIONS) })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>Time period (year disabled)</p>
+        {React.createElement('bds-segmented-control', { name: 'period1', value: 'week', options: JSON.stringify(PERIOD_OPTIONS) })}
+      </div>
+      <div>
+        <p style={{ margin: '0 0 8px', fontSize: '0.75rem', color: '#888' }}>Disabled</p>
+        {React.createElement('bds-segmented-control', { name: 'view2', value: 'list', options: JSON.stringify(VIEW_OPTIONS), disabled: true })}
+      </div>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [view, setView] = React.useState('list');
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <p style={{ margin: 0, fontSize: '0.875rem' }}>Active view: {view}</p>
+        {React.createElement('bds-segmented-control', {
+          name: 'view-ctrl',
+          value: view,
+          options: JSON.stringify(VIEW_OPTIONS),
+          onChange: (e: Event) => setView((e.target as HTMLInputElement).value),
+        })}
+      </div>
+    );
+  },
+};

package/src/web-components/interaction/form/BdsSelect.mdx

@@ -0,0 +1,38 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './BdsSelect.stories';
+
+<Meta of={Stories} />
+
+# Select
+
+`<bds-select>` is a form-associated Select custom element. It uses a JSON `options` attribute because slotting `<option>` elements into a shadow DOM `<select>` is not cross-browser supported.
+
+## Usage
+
+```html
+<bds-select
+  name="country"
+  placeholder="Choose…"
+  options='[{"value":"nl","label":"Netherlands"},{"value":"be","label":"Belgium"}]'
+></bds-select>
+```
+
+## Attributes
+
+| Attribute     | Type      | Default | Description                                          |
+|---------------|-----------|---------|------------------------------------------------------|
+| `name`        | `string`  | `""`    | Form field name                                      |
+| `value`       | `string`  | `""`    | Currently selected value                             |
+| `options`     | `string`  | `"[]"`  | JSON array of `{ value, label, disabled? }` objects  |
+| `placeholder` | `string`  | `""`    | Placeholder option label (disabled, empty value)     |
+| `required`    | `boolean` | `false` | Marks the field as required                          |
+| `disabled`    | `boolean` | `false` | Disables the select                                  |
+
+## Stories
+
+<Canvas of={Stories.Default} />
+<Canvas of={Stories.AllVariants} />
+
+## Controls
+
+<ArgTypes of={Stories} />