@scania/tegel 0.0.4 → 0.0.6

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-option.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-option/dropdown-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Host,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-option',\n  styleUrl: './../dropdown.scss',\n  shadow: true,\n})\nexport class DropdownOption {\n  @Element() host: HTMLElement;\n\n  // Used as a fallback if value prop is not recognized to match handleClick\n  @State() innerValue: string;\n\n  /** Selected set to true if selected */\n  @Prop() selected: boolean = false;\n\n  /** Sets option to disabled state if true */\n  @Prop() disabled: boolean = false;\n\n  /** Value is a unique string that will be used for application logic */\n  @Prop({ reflect: true }) value: string;\n\n  @Event({\n    eventName: 'selectOption',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  selectOption: EventEmitter<any>;\n\n  isMultiSelectOption: boolean;\n\n  @Listen('mouseover')\n  changeFocusHandler() {\n    this.host.focus();\n  }\n\n  @Listen('mouseout')\n  removeFocusHandler() {\n    this.host.blur();\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter') {\n      this.selectOptionHandler({\n        value: this.value,\n        label: this.host.innerText,\n        parent: this.host.parentNode,\n      });\n    }\n  }\n\n  componentWillLoad() {\n    this.innerValue = this.value;\n    this.isMultiSelectOption = this.host\n      .closest('sdds-dropdown')\n      .classList.contains('sdds-dropdown-multiselect');\n  }\n\n  selectOptionHandler(value) {\n    if (!this.disabled) {\n      const listOptions = value.parent.childNodes;\n      this.selectOption.emit(value);\n      if (!this.isMultiSelectOption) {\n        listOptions.forEach((optionEl) => {\n          // TODO: fix and enable rule\n          // eslint-disable-next-line no-param-reassign\n          optionEl.selected = false;\n        });\n      }\n      const optionCheckbox = this.host.shadowRoot.querySelector('input');\n\n      if (this.selected) {\n        this.selected = false;\n        if (optionCheckbox) {\n          optionCheckbox.checked = false;\n        }\n      } else {\n        this.selected = true;\n        if (optionCheckbox) {\n          optionCheckbox.checked = true;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(ev) => {\n          if (this.isMultiSelectOption) {\n            ev.stopPropagation();\n          }\n          return this.selectOptionHandler({\n            value: this.value,\n            label: this.host.innerText,\n            parent: ev.target.parentNode,\n          });\n        }}\n        class={{\n          'selected': this.selected,\n          'sdds-dropdown-option-disabled': this.disabled,\n        }}\n        tabindex=\"-1\"\n        aria-disabled={this.disabled}\n      >\n        {this.isMultiSelectOption && (\n          <div class=\"sdds-checkbox-item sdds-option-checkbox\">\n            <label class=\"sdds-form-label\">\n              <input\n                class=\"sdds-form-input\"\n                type=\"checkbox\"\n                checked={this.selected}\n                disabled={this.disabled}\n              />\n            </label>\n          </div>\n        )}\n        <span class=\"sdds-option-label\">\n          <slot />\n        </span>\n        {!this.isMultiSelectOption && (\n          <span class=\"sdds-option-checkmark\">\n            <svg\n              width=\"10\"\n              height=\"7\"\n              viewBox=\"0 0 10 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 3L4 6L9 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"dropdown-option.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-option/dropdown-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Element,\n  Host,\n  Event,\n  EventEmitter,\n  Listen,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-option',\n  styleUrl: './../dropdown.scss',\n  shadow: true,\n})\nexport class DropdownOption {\n  @Element() host: HTMLElement;\n\n  // Used as a fallback if value prop is not recognized to match handleClick\n  @State() innerValue: string;\n\n  /** Selected set to true if selected */\n  @Prop() selected: boolean = false;\n\n  /** Sets option to disabled state if true */\n  @Prop() disabled: boolean = false;\n\n  /** Value is a unique string that will be used for application logic */\n  @Prop({ reflect: true }) value: string;\n\n  /** @internal Fires on click on one of the dropdown items */\n  @Event({\n    eventName: 'internalSddsSelect',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  internalSddsSelect: EventEmitter<{\n    value: string | number;\n    label: string | number;\n    parent: HTMLSddsDropdownElement;\n  }>;\n\n  isMultiSelectOption: boolean;\n\n  @Listen('mouseover')\n  changeFocusHandler() {\n    this.host.focus();\n  }\n\n  @Listen('mouseout')\n  removeFocusHandler() {\n    this.host.blur();\n  }\n\n  @Listen('keydown')\n  onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter') {\n      this.handleClick({\n        value: this.value,\n        label: this.host.innerText,\n        parent: this.host.parentNode,\n      });\n    }\n  }\n\n  componentWillLoad() {\n    this.innerValue = this.value;\n    this.isMultiSelectOption = this.host\n      .closest('sdds-dropdown')\n      .classList.contains('sdds-dropdown-multiselect');\n  }\n\n  handleClick(value) {\n    if (!this.disabled) {\n      const listOptions = value.parent.childNodes;\n      this.internalSddsSelect.emit(value);\n      if (!this.isMultiSelectOption) {\n        listOptions.forEach((optionEl) => {\n          optionEl.selected = false;\n        });\n      }\n      const optionCheckbox = this.host.shadowRoot.querySelector('input');\n\n      if (this.selected) {\n        this.selected = false;\n        if (optionCheckbox) {\n          optionCheckbox.checked = false;\n        }\n      } else {\n        this.selected = true;\n        if (optionCheckbox) {\n          optionCheckbox.checked = true;\n        }\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          if (this.isMultiSelectOption) {\n            event.stopPropagation();\n          }\n          return this.handleClick({\n            value: this.value,\n            label: this.host.innerText,\n            parent: event.target.parentNode,\n          });\n        }}\n        class={{\n          'selected': this.selected,\n          'sdds-dropdown-option-disabled': this.disabled,\n        }}\n        tabindex=\"-1\"\n        aria-disabled={this.disabled}\n      >\n        {this.isMultiSelectOption && (\n          <div class=\"sdds-checkbox-item sdds-option-checkbox\">\n            <label class=\"sdds-form-label\">\n              <input\n                class=\"sdds-form-input\"\n                type=\"checkbox\"\n                checked={this.selected}\n                disabled={this.disabled}\n              />\n            </label>\n          </div>\n        )}\n        <span class=\"sdds-option-label\">\n          <slot />\n        </span>\n        {!this.isMultiSelectOption && (\n          <span class=\"sdds-option-checkmark\">\n            <svg\n              width=\"10\"\n              height=\"7\"\n              viewBox=\"0 0 10 7\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M1 3L4 6L9 1\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.25\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown-wc-default.stories.js

@@ -22,7 +22,7 @@ export default {
   argTypes: {
     modeVariant: {
       name: 'Mode variant',
-      description: 'Mode variant of the component.',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
       control: {
         type: 'radio',
       },
@@ -31,100 +31,107 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
+    state: {
+      name: 'Error state',
+      description: 'Puts the component in error state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
     size: {
       name: 'Size',
+      description: 'Sets the size of the dropdown.',
       control: {
         type: 'radio',
       },
       options: ['Large', 'Medium', 'Small'],
-      description: 'Size of the dropdown',
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
     },
-    placeholder: {
-      name: 'Placeholder',
-      type: 'string',
-      description: 'Placeholder text when no option is selected',
+    openDirection: {
+      name: 'Open direction',
+      description: 'Sets which direction the dropdown will open in.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Up', 'Down', 'Auto'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
     },
     labelPosition: {
       name: 'Label position',
+      description: 'Sets the label text position.',
       control: {
         type: 'radio',
       },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
+      options: ['No label', 'Inside', 'Outside'],
+      table: {
+        defaultValue: { summary: 'no-label' },
+      },
     },
     labelText: {
       name: 'Label text',
-      control: 'text',
-      description: 'Label text helps to describe what the dropdown contains',
-      if: { arg: 'labelPosition', neq: 'None' },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component',
+      description: 'Sets a label text to help describe what the dropdown contains.',
       control: {
-        type: 'boolean',
+        type: 'text',
       },
+      if: { arg: 'labelPosition', neq: 'No label' },
     },
-    state: {
-      name: 'State',
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Sets the placeholder text when no option is selected.',
       control: {
-        type: 'radio',
+        type: 'text',
       },
-      options: ['Default', 'Error'],
-      description: 'Support error state',
     },
     helper: {
-      name: 'Add helper text',
-      control: 'boolean',
-      description: 'Adds a helper text.',
-    },
-    helperText: {
       name: 'Helper text',
-      description: 'Helper text assists the user with additional information about the dropdown',
-      control: 'text',
-      if: { arg: 'helper', eq: true },
+      description: 'Sets a helper text to assist the user with additional information about the dropdown.',
+      control: {
+        type: 'text',
+      },
     },
     defaultOption: {
       if: { arg: 'type', neq: 'Multiselect' },
       name: 'Default option',
-      description: 'Sets a pre-selected option and replaces placeholder',
+      description: 'Sets a pre-selected option and replaces the placeholder.',
       control: {
         type: 'radio',
       },
       options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
     },
-    openDirection: {
-      name: 'Open direction',
-      description: 'The direction the dropdown will open.',
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the dropdown.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
-      options: ['Up', 'Down', 'Auto'],
       table: {
-        summary: {
-          defaultValue: 'auto',
-        },
+        defaultValue: { summary: false },
       },
     },
   },
   args: {
     modeVariant: 'Inherit from parent',
+    state: false,
     size: 'Large',
-    placeholder: 'Placeholder',
-    state: 'Default',
-    disabled: false,
-    labelPosition: 'None',
+    openDirection: 'Auto',
+    labelPosition: 'No label',
     labelText: 'Label text',
-    helper: false,
-    helperText: 'Helper text',
+    placeholder: 'Placeholder',
+    helper: '',
     defaultOption: 'Option 1',
-    openDirection: 'Auto',
+    disabled: false,
   },
 };
-const Template = ({ modeVariant, size, disabled = false, labelPosition, helper, helperText, labelText, state = 'default', placeholder, defaultOption, openDirection, }) => {
-  const stateValue = state === 'Error' ? 'error' : 'default';
+const Template = ({ modeVariant, state = false, size, openDirection, labelText, labelPosition, placeholder, helper, defaultOption, disabled = false, }) => {
   const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { None: 'no-default', Inside: 'inside', Outside: 'outside' };
+  const labelPosLookup = { 'No label': 'no-label', 'Inside': 'inside', 'Outside': 'outside' };
   const defaultOptionLookup = {
     'No default': 'no-default',
     'Option 1': 'option-1',
@@ -152,9 +159,9 @@ const Template = ({ modeVariant, size, disabled = false, labelPosition, helper,
           disabled="${disabled}"
           open-direction="${openDirection.toLowerCase()}"
           label-position="${labelPosLookup[labelPosition]}"
-          ${labelPosLookup[labelPosition] !== 'no-default' ? `label="${labelText}"` : ''}
-          ${helper ? `helper="${helperText}"` : ''}
-          state="${stateValue}"
+          ${labelPosLookup[labelPosition] !== 'no-label' ? `label="${labelText}"` : ''}
+          ${helper !== '' ? `helper="${helper}"` : ''}
+          state="${state}"
           type="default"
           default-option="${defaultOptionLookup[defaultOption]}" >
           <sdds-dropdown-option value="option-1" tabindex="0" disabled>Option 1</sdds-dropdown-option>

package/dist/collection/components/dropdown/dropdown-wc-default.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-wc-default.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-wc-default.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport readmeOption from './dropdown-option/readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Dropdown',\n  parameters: {\n    layout: 'centered',\n    notes: { 'Dropdown': readme, 'Dropdown option': readmeOption },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    size: {\n      name: 'Size',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small'],\n      description: 'Size of the dropdown',\n    },\n    placeholder: {\n      name: 'Placeholder',\n      type: 'string',\n      description: 'Placeholder text when no option is selected',\n    },\n    labelPosition: {\n      name: 'Label position',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Inside', 'Outside'],\n      description: 'Label text position',\n    },\n    labelText: {\n      name: 'Label text',\n      control: 'text',\n      description: 'Label text helps to describe what the dropdown contains',\n      if: { arg: 'labelPosition', neq: 'None' },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the component',\n      control: {\n        type: 'boolean',\n      },\n    },\n    state: {\n      name: 'State',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Error'],\n      description: 'Support error state',\n    },\n    helper: {\n      name: 'Add helper text',\n      control: 'boolean',\n      description: 'Adds a helper text.',\n    },\n    helperText: {\n      name: 'Helper text',\n      description: 'Helper text assists the user with additional information about the dropdown',\n      control: 'text',\n      if: { arg: 'helper', eq: true },\n    },\n    defaultOption: {\n      if: { arg: 'type', neq: 'Multiselect' },\n      name: 'Default option',\n      description: 'Sets a pre-selected option and replaces placeholder',\n      control: {\n        type: 'radio',\n      },\n      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],\n    },\n    openDirection: {\n      name: 'Open direction',\n      description: 'The direction the dropdown will open.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Up', 'Down', 'Auto'],\n      table: {\n        summary: {\n          defaultValue: 'auto',\n        },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    size: 'Large',\n    placeholder: 'Placeholder',\n    state: 'Default',\n    disabled: false,\n    labelPosition: 'None',\n    labelText: 'Label text',\n    helper: false,\n    helperText: 'Helper text',\n    defaultOption: 'Option 1',\n    openDirection: 'Auto',\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  size,\n  disabled = false,\n  labelPosition,\n  helper,\n  helperText,\n  labelText,\n  state = 'default',\n  placeholder,\n  defaultOption,\n  openDirection,\n}) => {\n  const stateValue = state === 'Error' ? 'error' : 'default';\n  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };\n  const labelPosLookup = { None: 'no-default', Inside: 'inside', Outside: 'outside' };\n  const defaultOptionLookup = {\n    'No default': 'no-default',\n    'Option 1': 'option-1',\n    'Option 2': 'option-2',\n    'Option 3': 'option-3',\n  };\n\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    width: 300px;\n    height:200px;\n  }\n  </style>\n\n    <div class=\"demo-wrapper\">\n        <sdds-dropdown\n          ${\n            modeVariant !== 'Inherit from parent'\n              ? `mode-variant=\"${modeVariant.toLowerCase()}\".sdds-option-label {\n            `\n              : ''\n          }\n          id=\"sdds-dropdown-reg\"\n          size=\"${sizeLookup[size]}\"\n          placeholder=\"${placeholder}\"\n          disabled=\"${disabled}\"\n          open-direction=\"${openDirection.toLowerCase()}\"\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${labelPosLookup[labelPosition] !== 'no-default' ? `label=\"${labelText}\"` : ''}\n          ${helper ? `helper=\"${helperText}\"` : ''}\n          state=\"${stateValue}\"\n          type=\"default\"\n          default-option=\"${defaultOptionLookup[defaultOption]}\" >\n          <sdds-dropdown-option value=\"option-1\" tabindex=\"0\" disabled>Option 1</sdds-dropdown-option>\n          <sdds-dropdown-option value=\"option-2\" tabindex=\"0\">Option 2</sdds-dropdown-option>\n          <sdds-dropdown-option value=\"option-3\" tabindex=\"0\">Option 3</sdds-dropdown-option>\n        </sdds-dropdown>\n      </div>\n  `);\n};\n\nexport const WebComponentDefault = Template.bind({});\n"]}
+{"version":3,"file":"dropdown-wc-default.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-wc-default.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport readmeOption from './dropdown-option/readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Dropdown',\n  parameters: {\n    layout: 'centered',\n    notes: { 'Dropdown': readme, 'Dropdown option': readmeOption },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    state: {\n      name: 'Error state',\n      description: 'Puts the component in error state.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the dropdown.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    openDirection: {\n      name: 'Open direction',\n      description: 'Sets which direction the dropdown will open in.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Up', 'Down', 'Auto'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      description: 'Sets the label text position.',\n      control: {\n        type: 'radio',\n      },\n      options: ['No label', 'Inside', 'Outside'],\n      table: {\n        defaultValue: { summary: 'no-label' },\n      },\n    },\n    labelText: {\n      name: 'Label text',\n      description: 'Sets a label text to help describe what the dropdown contains.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'labelPosition', neq: 'No label' },\n    },\n    placeholder: {\n      name: 'Placeholder',\n      description: 'Sets the placeholder text when no option is selected.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Sets a helper text to assist the user with additional information about the dropdown.',\n      control: {\n        type: 'text',\n      },\n    },\n    defaultOption: {\n      if: { arg: 'type', neq: 'Multiselect' },\n      name: 'Default option',\n      description: 'Sets a pre-selected option and replaces the placeholder.',\n      control: {\n        type: 'radio',\n      },\n      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the dropdown.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: false,\n    size: 'Large',\n    openDirection: 'Auto',\n    labelPosition: 'No label',\n    labelText: 'Label text',\n    placeholder: 'Placeholder',\n    helper: '',\n    defaultOption: 'Option 1',\n    disabled: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  state = false,\n  size,\n  openDirection,\n  labelText,\n  labelPosition,\n  placeholder,\n  helper,\n  defaultOption,\n  disabled = false,\n}) => {\n  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };\n  const labelPosLookup = { 'No label': 'no-label', 'Inside': 'inside', 'Outside': 'outside' };\n  const defaultOptionLookup = {\n    'No default': 'no-default',\n    'Option 1': 'option-1',\n    'Option 2': 'option-2',\n    'Option 3': 'option-3',\n  };\n\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    width: 300px;\n    height:200px;\n  }\n  </style>\n\n    <div class=\"demo-wrapper\">\n        <sdds-dropdown\n          ${\n            modeVariant !== 'Inherit from parent'\n              ? `mode-variant=\"${modeVariant.toLowerCase()}\".sdds-option-label {\n            `\n              : ''\n          }\n          id=\"sdds-dropdown-reg\"\n          size=\"${sizeLookup[size]}\"\n          placeholder=\"${placeholder}\"\n          disabled=\"${disabled}\"\n          open-direction=\"${openDirection.toLowerCase()}\"\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${labelPosLookup[labelPosition] !== 'no-label' ? `label=\"${labelText}\"` : ''}\n          ${helper !== '' ? `helper=\"${helper}\"` : ''}\n          state=\"${state}\"\n          type=\"default\"\n          default-option=\"${defaultOptionLookup[defaultOption]}\" >\n          <sdds-dropdown-option value=\"option-1\" tabindex=\"0\" disabled>Option 1</sdds-dropdown-option>\n          <sdds-dropdown-option value=\"option-2\" tabindex=\"0\">Option 2</sdds-dropdown-option>\n          <sdds-dropdown-option value=\"option-3\" tabindex=\"0\">Option 3</sdds-dropdown-option>\n        </sdds-dropdown>\n      </div>\n  `);\n};\n\nexport const WebComponentDefault = Template.bind({});\n"]}

package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js

@@ -20,99 +20,118 @@ export default {
     ],
   },
   argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    state: {
+      name: 'Error state',
+      description: 'Puts the component in error state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
     size: {
       name: 'Size',
+      description: 'Sets the size of the dropdown.',
       control: {
         type: 'radio',
       },
       options: ['Large', 'Medium', 'Small'],
-      description: 'Size of the dropdown',
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
     },
-    placeholder: {
-      name: 'Placeholder',
-      type: 'string',
-      description: 'Placeholder text when no option is selected',
+    openDirection: {
+      name: 'Open direction',
+      description: 'Sets which direction the dropdown will open in.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Up', 'Down', 'Auto'],
+      table: {
+        defaultValue: { summary: 'auto' },
+      },
     },
     labelPosition: {
       name: 'Label position',
+      description: 'Sets the label text position.',
       control: {
         type: 'radio',
       },
-      options: ['None', 'Inside', 'Outside'],
-      description: 'Label text position',
+      options: ['No label', 'Inside', 'Outside'],
+      table: {
+        defaultValue: { summary: 'no-label' },
+      },
     },
     labelText: {
       name: 'Label text',
-      control: 'text',
-      description: 'Label text helps to describe what the dropdown contains',
-      if: { arg: 'labelPosition', neq: 'None' },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the component',
+      description: 'Sets a label text to help describe what the dropdown contains.',
       control: {
-        type: 'boolean',
+        type: 'text',
       },
+      if: { arg: 'labelPosition', neq: 'No label' },
     },
-    state: {
-      name: 'State',
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Sets the placeholder text when no option is selected.',
       control: {
-        type: 'radio',
+        type: 'text',
       },
-      options: ['Default', 'Error'],
-      description: 'Support error state',
     },
     helper: {
-      name: 'Add helper text',
-      control: 'boolean',
-      description: 'Adds a helper text.',
-    },
-    helperText: {
       name: 'Helper text',
-      description: 'Helper text assists the user with additional information about the dropdown',
-      control: 'text',
-      if: { arg: 'helper', eq: true },
+      description: 'Sets a helper text to assist the user with additional information about the dropdown.',
+      control: {
+        type: 'text',
+      },
     },
     multiDefaultOption: {
       name: 'Default options',
-      description: 'Sets a pre-selected option and replaces placeholder',
+      description: 'Sets a pre-selected option and replaces the placeholder.',
       if: { arg: 'type', neq: 'Default' },
       control: {
         type: 'check',
       },
       options: ['Option 1', 'Option 2', 'Option 3'],
     },
-    openDirection: {
-      name: 'Open direction',
-      description: 'The direction the dropdown will open.',
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the dropdown.',
       control: {
-        type: 'radio',
+        type: 'boolean',
       },
-      options: ['Up', 'Down', 'Auto'],
       table: {
-        summary: {
-          defaultValue: 'auto',
-        },
+        defaultValue: { summary: false },
       },
     },
   },
   args: {
+    modeVariant: 'Inherit from parent',
+    state: false,
     size: 'Large',
-    placeholder: 'Placeholder',
-    state: 'Default',
-    disabled: false,
-    labelPosition: 'None',
+    openDirection: 'Auto',
+    labelPosition: 'No label',
     labelText: 'Label text',
-    helper: false,
-    helperText: 'Helper text',
+    placeholder: 'Placeholder',
+    helper: '',
     multiDefaultOption: ['Option 1', 'Option 2'],
-    openDirection: 'Auto',
+    disabled: false,
   },
 };
-const Template = ({ size, disabled = false, labelPosition, labelText, helper, helperText, state = 'default', placeholder, multiDefaultOption, openDirection, }) => {
-  const stateValue = state === 'Error' ? 'error' : 'default';
+const Template = ({ modeVariant, state = false, size, openDirection, labelPosition, labelText, placeholder, helper, multiDefaultOption, disabled = false, }) => {
   const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
-  const labelPosLookup = { None: 'no-default', Inside: 'inside', Outside: 'outside' };
+  const labelPosLookup = { 'No label': 'no-label', 'Inside': 'inside', 'Outside': 'outside' };
   const multiDefaultOptionValue = multiDefaultOption.map((value) => value.toLowerCase().replace(' ', '-'));
   return formatHtmlPreview(`
   <style>
@@ -125,15 +144,19 @@ const Template = ({ size, disabled = false, labelPosition, labelText, helper, he
 
     <div class="demo-wrapper">
         <sdds-dropdown
+        ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariant.toLowerCase()}".sdds-option-label {
+          `
+    : ''}
           id="sdds-dropdown-reg"
           size="${sizeLookup[size]}"
           placeholder="${placeholder}"
           disabled="${disabled}"
           open-direction="${openDirection.toLowerCase()}"
           label-position="${labelPosLookup[labelPosition]}"
-          ${labelPosLookup[labelPosition] !== 'no-default' ? `label="${labelText}"` : ''}
-          ${helper ? `helper="${helperText}"` : ''}
-          state="${stateValue}"
+          ${labelPosLookup[labelPosition] !== 'no-label' ? `label="${labelText}"` : ''}
+          ${helper !== '' ? `helper="${helper}"` : ''}
+          state="${state}"
           type="multiselect"
           default-option="${multiDefaultOptionValue}" >
           <sdds-dropdown-option value="option-1" tabindex="0">Option 1</sdds-dropdown-option>

package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-wc-multiselect.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-wc-multiselect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE;IAC9D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;MACrC,WAAW,EAAE,sBAAsB;KACpC;IACD,WAAW,EAAE;MACX,IAAI,EAAE,aAAa;MACnB,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,6CAA6C;KAC3D;IACD,aAAa,EAAE;MACb,IAAI,EAAE,gBAAgB;MACtB,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC;MACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,OAAO,EAAE,MAAM;MACf,WAAW,EAAE,yDAAyD;MACtE,EAAE,EAAE,EAAE,GAAG,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,EAAE;KAC1C;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,wBAAwB;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;MAC7B,WAAW,EAAE,qBAAqB;KACnC;IACD,MAAM,EAAE;MACN,IAAI,EAAE,iBAAiB;MACvB,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,qBAAqB;KACnC;IACD,UAAU,EAAE;MACV,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,6EAA6E;MAC1F,OAAO,EAAE,MAAM;MACf,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE;KAChC;IACD,kBAAkB,EAAE;MAClB,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,qDAAqD;MAClE,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE;MACnC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC;KAC9C;IACD,aAAa,EAAE;MACb,IAAI,EAAE,gBAAgB;MACtB,WAAW,EAAE,uCAAuC;MACpD,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC;MAC/B,KAAK,EAAE;QACL,OAAO,EAAE;UACP,YAAY,EAAE,MAAM;SACrB;OACF;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,OAAO;IACb,WAAW,EAAE,aAAa;IAC1B,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,KAAK;IACf,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,aAAa;IACzB,kBAAkB,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC;IAC5C,aAAa,EAAE,MAAM;GACtB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,SAAS,EACT,MAAM,EACN,UAAU,EACV,KAAK,GAAG,SAAS,EACjB,WAAW,EACX,kBAAkB,EAClB,aAAa,GACd,EAAE,EAAE;EACH,MAAM,UAAU,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;EAC3D,MAAM,UAAU,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;EAC9D,MAAM,cAAc,GAAG,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;EACpF,MAAM,uBAAuB,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAC/D,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CACtC,CAAC;EACF,OAAO,iBAAiB,CAAC;;;;;;;;;;;;kBAYT,UAAU,CAAC,IAAI,CAAC;yBACT,WAAW;sBACd,QAAQ;4BACF,aAAa,CAAC,WAAW,EAAE;4BAC3B,cAAc,CAAC,aAAa,CAAC;YAC7C,cAAc,CAAC,aAAa,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE;YAC5E,MAAM,CAAC,CAAC,CAAC,WAAW,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;mBAC/B,UAAU;;4BAED,uBAAuB;;;;;;GAMhD,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport readmeOption from './dropdown-option/readme.md';\n\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Dropdown',\n  parameters: {\n    layout: 'centered',\n    notes: { 'Dropdown': readme, 'Dropdown option': readmeOption },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small'],\n      description: 'Size of the dropdown',\n    },\n    placeholder: {\n      name: 'Placeholder',\n      type: 'string',\n      description: 'Placeholder text when no option is selected',\n    },\n    labelPosition: {\n      name: 'Label position',\n      control: {\n        type: 'radio',\n      },\n      options: ['None', 'Inside', 'Outside'],\n      description: 'Label text position',\n    },\n    labelText: {\n      name: 'Label text',\n      control: 'text',\n      description: 'Label text helps to describe what the dropdown contains',\n      if: { arg: 'labelPosition', neq: 'None' },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the component',\n      control: {\n        type: 'boolean',\n      },\n    },\n    state: {\n      name: 'State',\n      control: {\n        type: 'radio',\n      },\n      options: ['Default', 'Error'],\n      description: 'Support error state',\n    },\n    helper: {\n      name: 'Add helper text',\n      control: 'boolean',\n      description: 'Adds a helper text.',\n    },\n    helperText: {\n      name: 'Helper text',\n      description: 'Helper text assists the user with additional information about the dropdown',\n      control: 'text',\n      if: { arg: 'helper', eq: true },\n    },\n    multiDefaultOption: {\n      name: 'Default options',\n      description: 'Sets a pre-selected option and replaces placeholder',\n      if: { arg: 'type', neq: 'Default' },\n      control: {\n        type: 'check',\n      },\n      options: ['Option 1', 'Option 2', 'Option 3'],\n    },\n    openDirection: {\n      name: 'Open direction',\n      description: 'The direction the dropdown will open.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Up', 'Down', 'Auto'],\n      table: {\n        summary: {\n          defaultValue: 'auto',\n        },\n      },\n    },\n  },\n  args: {\n    size: 'Large',\n    placeholder: 'Placeholder',\n    state: 'Default',\n    disabled: false,\n    labelPosition: 'None',\n    labelText: 'Label text',\n    helper: false,\n    helperText: 'Helper text',\n    multiDefaultOption: ['Option 1', 'Option 2'],\n    openDirection: 'Auto',\n  },\n};\n\nconst Template = ({\n  size,\n  disabled = false,\n  labelPosition,\n  labelText,\n  helper,\n  helperText,\n  state = 'default',\n  placeholder,\n  multiDefaultOption,\n  openDirection,\n}) => {\n  const stateValue = state === 'Error' ? 'error' : 'default';\n  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };\n  const labelPosLookup = { None: 'no-default', Inside: 'inside', Outside: 'outside' };\n  const multiDefaultOptionValue = multiDefaultOption.map((value) =>\n    value.toLowerCase().replace(' ', '-'),\n  );\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    width: 300px;\n    height:200px;\n  }\n  </style>\n\n    <div class=\"demo-wrapper\">\n        <sdds-dropdown\n          id=\"sdds-dropdown-reg\"\n          size=\"${sizeLookup[size]}\"\n          placeholder=\"${placeholder}\"\n          disabled=\"${disabled}\"\n          open-direction=\"${openDirection.toLowerCase()}\"\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${labelPosLookup[labelPosition] !== 'no-default' ? `label=\"${labelText}\"` : ''}\n          ${helper ? `helper=\"${helperText}\"` : ''}\n          state=\"${stateValue}\"\n          type=\"multiselect\"\n          default-option=\"${multiDefaultOptionValue}\" >\n          <sdds-dropdown-option value=\"option-1\" tabindex=\"0\">Option 1</sdds-dropdown-option>\n          <sdds-dropdown-option value=\"option-2\" tabindex=\"0\" disabled>Option 2</sdds-dropdown-option>\n          <sdds-dropdown-option value=\"option-3\" tabindex=\"0\">Option 3</sdds-dropdown-option>\n        </sdds-dropdown>\n      </div>\n  `);\n};\n\nexport const WebComponentMultiselect = Template.bind({});\n"]}
+{"version":3,"file":"dropdown-wc-multiselect.stories.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown-wc-multiselect.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import readme from './readme.md';\nimport readmeOption from './dropdown-option/readme.md';\n\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Dropdown',\n  parameters: {\n    layout: 'centered',\n    notes: { 'Dropdown': readme, 'Dropdown option': readmeOption },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    state: {\n      name: 'Error state',\n      description: 'Puts the component in error state.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the dropdown.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Large', 'Medium', 'Small'],\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    openDirection: {\n      name: 'Open direction',\n      description: 'Sets which direction the dropdown will open in.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Up', 'Down', 'Auto'],\n      table: {\n        defaultValue: { summary: 'auto' },\n      },\n    },\n    labelPosition: {\n      name: 'Label position',\n      description: 'Sets the label text position.',\n      control: {\n        type: 'radio',\n      },\n      options: ['No label', 'Inside', 'Outside'],\n      table: {\n        defaultValue: { summary: 'no-label' },\n      },\n    },\n    labelText: {\n      name: 'Label text',\n      description: 'Sets a label text to help describe what the dropdown contains.',\n      control: {\n        type: 'text',\n      },\n      if: { arg: 'labelPosition', neq: 'No label' },\n    },\n    placeholder: {\n      name: 'Placeholder',\n      description: 'Sets the placeholder text when no option is selected.',\n      control: {\n        type: 'text',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      description: 'Sets a helper text to assist the user with additional information about the dropdown.',\n      control: {\n        type: 'text',\n      },\n    },\n    multiDefaultOption: {\n      name: 'Default options',\n      description: 'Sets a pre-selected option and replaces the placeholder.',\n      if: { arg: 'type', neq: 'Default' },\n      control: {\n        type: 'check',\n      },\n      options: ['Option 1', 'Option 2', 'Option 3'],\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the dropdown.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    state: false,\n    size: 'Large',\n    openDirection: 'Auto',\n    labelPosition: 'No label',\n    labelText: 'Label text',\n    placeholder: 'Placeholder',\n    helper: '',\n    multiDefaultOption: ['Option 1', 'Option 2'],\n    disabled: false,\n  },\n};\n\nconst Template = ({\n  modeVariant,\n  state = false,\n  size,\n  openDirection,\n  labelPosition,\n  labelText,\n  placeholder,\n  helper,\n  multiDefaultOption,\n  disabled = false,\n}) => {\n  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };\n  const labelPosLookup = { 'No label': 'no-label', 'Inside': 'inside', 'Outside': 'outside' };\n  const multiDefaultOptionValue = multiDefaultOption.map((value) =>\n    value.toLowerCase().replace(' ', '-'),\n  );\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    width: 300px;\n    height:200px;\n  }\n  </style>\n\n    <div class=\"demo-wrapper\">\n        <sdds-dropdown\n        ${\n          modeVariant !== 'Inherit from parent'\n            ? `mode-variant=\"${modeVariant.toLowerCase()}\".sdds-option-label {\n          `\n            : ''\n        }\n          id=\"sdds-dropdown-reg\"\n          size=\"${sizeLookup[size]}\"\n          placeholder=\"${placeholder}\"\n          disabled=\"${disabled}\"\n          open-direction=\"${openDirection.toLowerCase()}\"\n          label-position=\"${labelPosLookup[labelPosition]}\"\n          ${labelPosLookup[labelPosition] !== 'no-label' ? `label=\"${labelText}\"` : ''}\n          ${helper !== '' ? `helper=\"${helper}\"` : ''}\n          state=\"${state}\"\n          type=\"multiselect\"\n          default-option=\"${multiDefaultOptionValue}\" >\n          <sdds-dropdown-option value=\"option-1\" tabindex=\"0\">Option 1</sdds-dropdown-option>\n          <sdds-dropdown-option value=\"option-2\" tabindex=\"0\" disabled>Option 2</sdds-dropdown-option>\n          <sdds-dropdown-option value=\"option-3\" tabindex=\"0\">Option 3</sdds-dropdown-option>\n        </sdds-dropdown>\n      </div>\n  `);\n};\n\nexport const WebComponentMultiselect = Template.bind({});\n"]}