@uh-design-system/component-library 1.5.1 → 1.5.2-rc.1

package/dist/collection/components/01-base-components/ds-select/stories/ds-select.features.stories.js

@@ -1,230 +0,0 @@
-import { useArgs } from "@storybook/preview-api";
-import { html } from "lit";
-const meta = {
-    title: 'Base Components/Select/Features',
-    component: 'ds-select',
-};
-export default meta;
-export const Native = {
-    render: () => html `
-    <ds-select ds-label="Native Select" ds-placeholder="Select an option" ds-variant="native">
-      <option slot="native" value="option1">Option 1</option>
-      <option slot="native" value="option2">Option 2</option>
-      <option slot="native" value="option3">Option 3</option>
-    </ds-select>
-  `,
-};
-export const CustomId = {
-    render: () => html `
-    <ds-select ds-label="Select with Custom ID" ds-placeholder="Select an option" ds-variant="default" ds-id="custom-select-id">
-      <ds-option ds-value="option1">Option 1</ds-option>
-      <ds-option ds-value="option2">Option 2</ds-option>
-      <ds-option ds-value="option3">Option 3</ds-option>
-    </ds-select>
-  `,
-};
-export const GroupedOptions = {
-    render: () => html `
-    <ds-select ds-label="Grouped Options" ds-placeholder="Select an option" ds-variant="default">
-      <ds-option-group ds-label="Group 1">
-        <ds-option ds-value="group1-option1">Option 1</ds-option>
-        <ds-option ds-value="group1-option2">Option 2</ds-option>
-      </ds-option-group>
-      <ds-option-group ds-label="Group 2">
-        <ds-option ds-value="group2-option1">Option 3</ds-option>
-        <ds-option ds-value="group2-option2">Option 4</ds-option>
-      </ds-option-group>
-    </ds-select>
-  `,
-};
-export const Disabled = {
-    render: () => html `
-    <ds-select ds-label="Disabled Select" ds-placeholder="Select an option" ds-variant="default" ds-disabled>
-      <ds-option ds-value="option1">Option 1</ds-option>
-      <ds-option ds-value="option2">Option 2</ds-option>
-      <ds-option ds-value="option3">Option 3</ds-option>
-    </ds-select>
-  `,
-};
-export const Invalid = {
-    render: () => html `
-    <ds-select ds-label="Invalid Select" ds-placeholder="Select an option" ds-variant="default" ds-error-text="This field is required">
-      <ds-option ds-value="option1">Option 1</ds-option>
-      <ds-option ds-value="option2">Option 2</ds-option>
-      <ds-option ds-value="option3">Option 3</ds-option>
-    </ds-select>
-  `,
-};
-export const FullWidth = {
-    render: () => html `
-    <ds-select ds-label="Full Width Select" ds-placeholder="Select an option" ds-variant="default" ds-full-width>
-      <ds-option ds-value="option1">Option 1</ds-option>
-      <ds-option ds-value="option2">Option 2</ds-option>
-      <ds-option ds-value="option3">Option 3</ds-option>
-    </ds-select>
-  `,
-};
-export const LongList = {
-    render: () => html `
-    <ds-select ds-label="Long List" ds-placeholder="Select an option" ds-variant="default">
-      ${Array.from({ length: 50 }, (_, i) => html `<ds-option ds-value=${`option${i + 1}`}>Option ${i + 1}</ds-option>`)}
-    </ds-select>
-  `,
-};
-export const LongGroupedList = {
-    render: () => html `
-    <ds-select ds-label="Long Grouped List" ds-placeholder="Select an option" ds-variant="default">
-      <ds-option-group ds-label="Group 1">
-        ${Array.from({ length: 25 }, (_, i) => html `<ds-option ds-value=${`group1-option${i + 1}`}>Group 1 - Option ${i + 1}</ds-option>`)}
-      </ds-option-group>
-      <ds-option-group ds-label="Group 2">
-        ${Array.from({ length: 25 }, (_, i) => html `<ds-option ds-value=${`group2-option${i + 1}`}>Group 2 - Option ${i + 1}</ds-option>`)}
-      </ds-option-group>
-    </ds-select>
-  `,
-};
-export const WithIcon = {
-    render: () => html `
-    <ds-select ds-label="Select with Icon" ds-placeholder="Search for an option" ds-variant="default" ds-icon="language">
-      <ds-option ds-value="option1">Option 1</ds-option>
-      <ds-option ds-value="option2">Option 2</ds-option>
-      <ds-option ds-value="option3">Option 3</ds-option>
-    </ds-select>
-  `,
-};
-export const WithDescriptions = {
-    render: () => html `
-    <ds-select ds-label="Select with Descriptions" ds-placeholder="Choose an option" ds-variant="default">
-      <ds-option ds-value="option1" ds-description="This is the first option">Option 1</ds-option>
-      <ds-option ds-value="option2" ds-description="This is the second option">Option 2</ds-option>
-      <ds-option ds-value="option3" ds-description="This is the third option">Option 3</ds-option>
-    </ds-select>
-  `,
-};
-export const LongOptionText = {
-    render: () => html `
-    <ds-select ds-label="Select with long option texts" ds-placeholder="Choose an option" ds-variant="default">
-      <ds-option ds-value="option1">This is a very long option text that should be truncated if it exceeds the width of the select</ds-option>
-      <ds-option ds-value="option2">Another long option text that might not fit in the select</ds-option>
-      <ds-option ds-value="option3">Short option</ds-option>
-    </ds-select>
-  `,
-};
-export const LongOptionTextMultiple = {
-    render: () => html `
-    <ds-select ds-variant="multiple" ds-label="Select with long option texts" ds-placeholder="Choose an option" ds-variant="default">
-      <ds-option ds-value="option1" ds-variant="multiple">This is a very long option text that should be truncated if it exceeds the width of the select</ds-option>
-      <ds-option ds-value="option2" ds-variant="multiple">Another long option text that might not fit in the select</ds-option>
-      <ds-option ds-value="option3" ds-variant="multiple">Short option</ds-option>
-    </ds-select>
-  `,
-};
-export const DynamicOptionsLoading = {
-    args: {},
-    render: () => {
-        const select = document.createElement('ds-select');
-        select.setAttribute('ds-label', 'Dynamic options');
-        select.setAttribute('ds-placeholder', 'Choose an option');
-        select.setAttribute('ds-variant', 'default');
-        select.setAttribute('ds-loading', 'true');
-        select.setAttribute('ds-loading-text', 'Loading options from server...');
-        setTimeout(() => {
-            select.removeAttribute('ds-loading');
-            const option1 = document.createElement('ds-option');
-            option1.setAttribute('ds-value', 'option1');
-            option1.textContent = 'Option 1';
-            const option2 = document.createElement('ds-option');
-            option2.setAttribute('ds-value', 'option2');
-            option2.textContent = 'Option 2';
-            const option3 = document.createElement('ds-option');
-            option3.setAttribute('ds-value', 'option3');
-            option3.textContent = 'Option 3';
-            select.appendChild(option1);
-            select.appendChild(option2);
-            select.appendChild(option3);
-        }, 3000);
-        return select;
-    },
-    name: 'Dynamic options',
-};
-export const DynamicOptionsError = {
-    args: {},
-    render: () => {
-        const select = document.createElement('ds-select');
-        select.setAttribute('ds-label', 'Dynamic options (error)');
-        select.setAttribute('ds-placeholder', 'Choose an option');
-        select.setAttribute('ds-variant', 'default');
-        select.setAttribute('ds-loading', 'true');
-        select.setAttribute('ds-loading-text', 'Connecting to server...');
-        setTimeout(() => {
-            select.removeAttribute('ds-loading');
-            select.setAttribute('ds-options-error', 'true');
-            select.setAttribute('ds-options-error-title', 'Connection failed');
-            select.setAttribute('ds-options-error-text', 'Could not load options. Check your network connection and try again.');
-        }, 3000);
-        return select;
-    },
-    name: 'Dynamic options (error)',
-};
-export const Multiple = {
-    argTypes: {
-        dsValue: { control: 'multi-select', options: ['option1', 'option2', 'option3', 'option4'] },
-    },
-    args: {
-        dsValue: ['option2', 'option3'],
-    },
-    render: () => {
-        const [{ dsValue }, updateArgs] = useArgs();
-        return html `
-      <ds-select
-        @dsMultipleChange=${(e) => updateArgs({ dsValue: e.detail.values })}
-        ds-label="Multiple"
-        ds-placeholder="Select options"
-        ds-variant="multiple"
-        .dsValue=${dsValue}
-      >
-        <ds-option ds-variant="multiple" ds-value="option1">Option 1</ds-option>
-        <ds-option ds-variant="multiple" ds-value="option2">Option 2</ds-option>
-        <ds-option ds-variant="multiple" ds-value="option3">Option 3</ds-option>
-        <ds-option ds-variant="multiple" ds-value="option4">Option 4</ds-option>
-      </ds-select>
-    `;
-    },
-};
-const slotsStyles = html `
-  <style>
-    .ds-sb-slots {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-  </style>
-`;
-export const Slots = {
-    render: () => html `
-    ${slotsStyles}
-    <div class="ds-sb-slots">
-      <ds-select ds-variant="default">
-        <div slot="label">Label slot</div>
-        <ds-option ds-value="option1">Default 1</ds-option>
-        <ds-option ds-value="option2">Default 2</ds-option>
-        <ds-option ds-value="option3">Default 3</ds-option>
-      </ds-select>
-      <ds-select ds-variant="native">
-        <div slot="label">Label slot</div>
-        <option slot="native" value="option1">Native 1</option>
-        <option slot="native" value="option2">Native 2</option>
-        <option slot="native" value="option3">Native 3</option>
-      </ds-select>
-    </div>
-  `,
-};
-export const CustomTagName = {
-    render: () => html `
-    <custom-ds-select ds-label="Select with Icon" ds-placeholder="Search for an option" ds-variant="default" ds-icon="language">
-      <custom-ds-option ds-value="option1">Option 1</custom-ds-option>
-      <custom-ds-option ds-value="option2">Option 2</custom-ds-option>
-      <custom-ds-option ds-value="option3">Option 3</custom-ds-option>
-    </custom-ds-select>
-  `,
-};