@scania/tegel 0.0.1-beta.9 → 0.0.31

package/dist/collection/components/divider/divider.stories.js

@@ -0,0 +1,134 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Divider',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Type',
+      description: 'Choose divider type.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Horizontal', 'Vertical'],
+      table: {
+        defaultValue: { summary: 'Horizontal' },
+      },
+    },
+    width: {
+      name: 'Width',
+      description: 'Choose divider width.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'type', eq: 'Horizontal' },
+    },
+    height: {
+      name: 'Height',
+      description: 'Choose divider height.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'type', eq: 'Vertical' },
+    },
+    direction: {
+      name: 'Direction',
+      description: 'Set the direction of the divider',
+      control: {
+        type: 'select',
+      },
+      options: ['Top', 'Right', 'Bottom', 'Left'],
+    },
+  },
+  args: {
+    type: 'Horizontal',
+    width: 150,
+    height: 150,
+    direction: 'Top',
+  },
+};
+const Template = ({ type, width, height }) => {
+  const classLookup = {
+    Horizontal: `sdds-divider`,
+    Vertical: `sdds-divider-vertical`,
+  };
+  return formatHtmlPreview(`
+      <style>
+         ${height
+    ? `/* demo-div is for demonstration purposes only*/
+        .demo-div {
+          height: ${height}px;
+          width: 1px;
+          padding: 0px;
+        }`
+    : ''}    ${width
+    ? `/* demo-div is for demonstration purposes only*/
+            .demo-div {
+              width: ${width}px;
+              height: 1px;
+              padding: 0px;
+            }`
+    : ''}
+      </style>
+     
+      
+      <div
+  class="demo-div ${classLookup[type]}"></div>
+  `);
+};
+const BorderTemplate = ({ direction }) => {
+  const directionLookup = {
+    Top: 'top',
+    Right: 'right',
+    Bottom: 'bottom',
+    Left: 'left',
+  };
+  return formatHtmlPreview(`
+      <style>
+      #demo-wrapper{
+        padding: 50px;
+        background-color: var(--sdds-grey-958)
+      }
+       /* border-demo-div is for demonstration purposes only*/
+        .border-demo-div {
+          height: 200px;
+          width: 200px;
+          background-color: var(--sdds-grey-868);
+          color: var(--sdds-grey-50);
+          text-align: center;
+          padding: 10px;
+        }
+           
+      </style>
+     <div id= "demo-wrapper">
+      
+      <div
+  class="border-demo-div sdds-divider-border-${directionLookup[direction]}">
+  <H4>DEMO</H4></div></div>
+  `);
+};
+export const Default = Template.bind({});
+Default.argTypes = {
+  direction: { table: { disable: true } }
+};
+export const Border = BorderTemplate.bind({});
+Border.args = {
+  direction: 'Top'
+};
+Border.argTypes = {
+  type: { table: { disable: true } }
+};
+//# sourceMappingURL=divider.stories.js.map

package/dist/collection/components/divider/divider.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.stories.js","sourceRoot":"","sources":["../../../src/components/divider/divider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Divider',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=993%3A47555&t=M7Ova7xZaoeMwb5e-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Choose divider type.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Horizontal', 'Vertical'],\n      table: {\n        defaultValue: { summary: 'Horizontal' },\n      },\n    },\n    width: {\n      name: 'Width',\n      description: 'Choose divider width.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'type', eq: 'Horizontal' },\n    },\n    height: {\n      name: 'Height',\n      description: 'Choose divider height.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'type', eq: 'Vertical' },\n    },\n    direction: {\n      name: 'Direction',\n      description: 'Set the direction of the divider',\n      control: {\n        type: 'select',\n      },\n      options: ['Top', 'Right', 'Bottom', 'Left'],\n    },\n  },\n  args: {\n    type: 'Horizontal',\n    width: 150,\n    height: 150,\n    direction: 'Top',\n  },\n};\n\n\nconst Template = ({ type, width, height }) => {\n  const classLookup = {\n    Horizontal: `sdds-divider`,\n    Vertical: `sdds-divider-vertical`,\n  };\n  \n  return formatHtmlPreview(\n    `\n      <style>\n         ${\n      height\n        ? `/* demo-div is for demonstration purposes only*/\n        .demo-div {\n          height: ${height}px;\n          width: 1px;\n          padding: 0px;\n        }`\n        : ''\n    }    ${\n      width\n        ? `/* demo-div is for demonstration purposes only*/\n            .demo-div {\n              width: ${width}px;\n              height: 1px;\n              padding: 0px;\n            }`\n        : ''\n    }\n      </style>\n     \n      \n      <div\n  class=\"demo-div ${classLookup[type]}\"></div>\n  `,\n);\n};\n\nconst BorderTemplate= ({ direction }) => {\n  const directionLookup = {\n    Top: 'top',\n    Right: 'right',\n    Bottom: 'bottom',\n    Left: 'left',\n  };\n  return formatHtmlPreview(\n    `\n      <style>\n      #demo-wrapper{\n        padding: 50px;\n        background-color: var(--sdds-grey-958)\n      }\n       /* border-demo-div is for demonstration purposes only*/\n        .border-demo-div {\n          height: 200px;\n          width: 200px;\n          background-color: var(--sdds-grey-868);\n          color: var(--sdds-grey-50);\n          text-align: center;\n          padding: 10px;\n        }\n           \n      </style>\n     <div id= \"demo-wrapper\">\n      \n      <div\n  class=\"border-demo-div sdds-divider-border-${directionLookup[direction]}\">\n  <H4>DEMO</H4></div></div>\n  `,\n);\n};\n\n\nexport const Default = Template.bind({});\nDefault.argTypes={\n  direction: { table:  { disable: true } }  \n }\nexport const Border = BorderTemplate.bind({});\nBorder.args={\n  direction: 'Top'\n} \n \nBorder.argTypes={\n type: { table:  { disable: true } }  \n}\n\n\n"]}

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js

@@ -0,0 +1,340 @@
+import { h, Host } from '@stencil/core';
+export class DropdownFilter {
+  constructor() {
+    this.dataOptions = [];
+    this.filteredContent = [];
+    this.searchTerm = '';
+    this.selectedOptionState = undefined;
+    this.dropdownRef = undefined;
+    this.placeholder = '';
+    this.label = undefined;
+    this.defaultOption = undefined;
+    this.selectedOption = undefined;
+    this.disabled = undefined;
+    this.size = 'lg';
+    this.inline = false;
+    this.labelPosition = 'no-label';
+    this.state = 'default';
+    this.helper = '';
+    this.data = undefined;
+    this.selectedLabel = 'no-selected';
+    this.selectedValue = 'no-selected';
+  }
+  componentWillLoad() {
+    this.parseData(this.data);
+    if (this.defaultOption) {
+      this.selectedOptionState = this.defaultOption;
+    }
+  }
+  parseData(newValue) {
+    if (newValue)
+      this.dataOptions = JSON.parse(newValue);
+    this.filteredContent = this.dataOptions;
+  }
+  updateOptionsContent(event) {
+    this.searchTerm = event.detail;
+    this.findData();
+  }
+  selectOptionHandler(event) {
+    this.selectedOptionState = event.detail.value;
+    this.selectedLabel = event.detail.label;
+    this.selectedValue = event.detail.value;
+    // Reset list when search is done and user have selected one option
+    // To match with animation time for option list to fadeout first
+    setTimeout(() => {
+      this.filteredContent = this.dataOptions;
+    }, 200);
+  }
+  findData() {
+    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');
+    this.filteredContent = this.dataOptions.filter(option => {
+      if (option.label) {
+        const listItem = option.label.toLowerCase();
+        const searchResultList = listItem.match(searchAsRegEx);
+        if (searchResultList) {
+          return searchResultList;
+        }
+        this.selectedOptionState = null;
+        this.selectedLabel = 'no-result';
+        this.selectedValue = 'no-result';
+      }
+    });
+  }
+  setOptionsContent() {
+    const newList = this.filteredContent.map(obj => (h("sdds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
+    if (newList.length > 0) {
+      return newList;
+    }
+    return (h("sdds-dropdown-option", { tabindex: "-1", value: "no-result", class: "sdds-option--no-result" }, "No result"));
+  }
+  /** Use this method to reset the dropdown. Then it will go back to its initial state. */
+  async resetOption() {
+    var _a;
+    await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.resetOption());
+  }
+  render() {
+    return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel }, h("sdds-dropdown", { ref: el => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null }, this.setOptionsContent())));
+  }
+  static get is() { return "sdds-dropdown-filter"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./../dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text for dropdown with no selected item"
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label for dropdown with no selected item"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "defaultOption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add the value of the option to set it as default"
+        },
+        "attribute": "default-option",
+        "reflect": false
+      },
+      "selectedOption": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add the value of the option as string to set it as new selected value"
+        },
+        "attribute": "selected-option",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add the value of the option to set it as default"
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "inline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to make the width following the label text length"
+        },
+        "attribute": "inline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'no-label' | 'inside' | 'outside'",
+          "resolved": "\"inside\" | \"no-label\" | \"outside\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of label"
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'no-label'"
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Support `error` state"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "helper": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add helper text in the bottom of dropdown"
+        },
+        "attribute": "helper",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "data": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Data is an array of objects that contains label and value\n`data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`"
+        },
+        "attribute": "data",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "dataOptions": {},
+      "filteredContent": {},
+      "searchTerm": {},
+      "selectedOptionState": {},
+      "dropdownRef": {},
+      "selectedLabel": {},
+      "selectedValue": {}
+    };
+  }
+  static get methods() {
+    return {
+      "resetOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Use this method to reset the dropdown. Then it will go back to its initial state.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "parseData"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "inputSearch",
+        "method": "updateOptionsContent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "selectOption",
+        "method": "selectOptionHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=dropdown-filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-filter.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-filter/dropdown-filter.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-dropdown-filter',\n  shadow: true,\n  styleUrl: './../dropdown.scss',\n})\nexport class DropdownFilter {\n  @State() dataOptions = [];\n\n  @State() filteredContent = [];\n\n  @State() searchTerm = '';\n\n  @State() selectedOptionState: any;\n\n  @State() dropdownRef?: HTMLSddsDropdownElement;\n\n  /** Placeholder text for dropdown with no selected item */\n  @Prop() placeholder: string = '';\n\n  /** Label for dropdown with no selected item */\n  @Prop() label: string;\n\n  /** Add the value of the option to set it as default */\n  @Prop() defaultOption: string;\n\n  /** Add the value of the option as string to set it as new selected value */\n  @Prop() selectedOption: string;\n\n  /** Add the value of the option to set it as default */\n  @Prop() disabled: boolean;\n\n  /** Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */\n  @Prop() size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large' = 'lg';\n\n  /** Set to true to make the width following the label text length */\n  @Prop() inline: boolean = false;\n\n  /** Position of label */\n  @Prop() labelPosition: 'no-label' | 'inside' | 'outside' = 'no-label';\n\n  /** Support `error` state */\n  @Prop() state: string = 'default';\n\n  /** Add helper text in the bottom of dropdown */\n  @Prop() helper: string = '';\n\n  /** Data is an array of objects that contains label and value\n   * `data = [{label:'Option 1', value:'opt-1'},{label:'Option 2', value:'opt-2'}]`\n   */\n  @Prop() data: string;\n\n  @State() selectedLabel: string = 'no-selected';\n\n  @State() selectedValue: string = 'no-selected';\n\n  componentWillLoad() {\n    this.parseData(this.data);\n\n    if (this.defaultOption) {\n      this.selectedOptionState = this.defaultOption;\n    }\n  }\n\n  @Watch('data')\n  parseData(newValue: string) {\n    if (newValue) this.dataOptions = JSON.parse(newValue);\n    this.filteredContent = this.dataOptions;\n  }\n\n  @Listen('inputSearch')\n  updateOptionsContent(event: CustomEvent<any>) {\n    this.searchTerm = event.detail;\n    this.findData();\n  }\n\n  @Listen('selectOption')\n  selectOptionHandler(event: CustomEvent<any>) {\n    this.selectedOptionState = event.detail.value;\n    this.selectedLabel = event.detail.label;\n    this.selectedValue = event.detail.value;\n\n    // Reset list when search is done and user have selected one option\n    // To match with animation time for option list to fadeout first\n    setTimeout(() => {\n      this.filteredContent = this.dataOptions;\n    }, 200);\n  }\n\n  findData() {\n    const searchAsRegEx = new RegExp(this.searchTerm, 'gmi');\n    this.filteredContent = this.dataOptions.filter(option => {\n      if (option.label) {\n        const listItem = option.label.toLowerCase();\n        const searchResultList = listItem.match(searchAsRegEx);\n        if (searchResultList) {\n          return searchResultList;\n        }\n        this.selectedOptionState = null;\n        this.selectedLabel = 'no-result';\n        this.selectedValue = 'no-result';\n      }\n    });\n  }\n\n  setOptionsContent() {\n    const newList = this.filteredContent.map(obj => (\n      <sdds-dropdown-option tabindex=\"0\" value={obj.value} class={`${this.selectedOptionState === obj.value ? 'selected' : ''}`}>\n        {obj.label}\n      </sdds-dropdown-option>\n    ));\n    if (newList.length > 0) {\n      return newList;\n    }\n    return (\n      <sdds-dropdown-option tabindex=\"-1\" value=\"no-result\" class=\"sdds-option--no-result\">\n        No result\n      </sdds-dropdown-option>\n    );\n  }\n\n  /** Use this method to reset the dropdown. Then it will go back to its initial state. */\n  @Method() async resetOption() {\n    await this.dropdownRef?.resetOption();\n  }\n\n  render() {\n    return (\n      <Host selected-value={this.selectedValue} selected-text={this.selectedLabel}>\n        <sdds-dropdown\n          ref={el => (this.dropdownRef = el)}\n          exportparts=\"dropdown-filter-disabled\"\n          size={this.size}\n          label={this.label}\n          disabled={this.disabled}\n          labelPosition={this.labelPosition}\n          helper={this.helper}\n          state={this.state}\n          placeholder={this.placeholder}\n          defaultOption={this.defaultOption}\n          selectedOption={this.selectedOption}\n          type=\"filter\"\n          tabindex={this.disabled ? '-1' : null}\n        >\n          {this.setOptionsContent()}\n        </sdds-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js

@@ -0,0 +1,131 @@
+import { formatHtmlPreview } from '../../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Dropdown Filter',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9754%3A22916&t=M7Ova7xZaoeMwb5e-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small'],
+      description: 'Size of the dropdown',
+    },
+    placeholder: {
+      name: 'Placeholder',
+      type: 'string',
+      description: 'Placeholder text when no option is selected',
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the component',
+      control: {
+        type: 'boolean',
+      },
+    },
+    helper: {
+      name: 'Helper text',
+      control: {
+        type: 'text',
+      },
+      description: 'Helper text assists the user with additional information about the dropdown',
+    },
+    defaultOption: {
+      description: 'Sets a pre-selected option and replaces placeholder',
+      name: 'Default option',
+      control: {
+        type: 'radio',
+      },
+      options: ['No default', 'Option 1', 'Option 2', 'Option 3'],
+    },
+    openDirection: {
+      name: 'Open direction',
+      description: 'The direction the dropdown will open.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Up', 'Down', 'Auto'],
+      table: {
+        summary: {
+          defaultValue: 'auto',
+        },
+      },
+    },
+  },
+  args: {
+    size: 'Large',
+    placeholder: 'Placeholder',
+    disabled: false,
+    helper: '',
+    defaultOption: 'Option 1',
+    state: 'Default',
+    openDirection: 'Auto',
+  },
+};
+const FilterTemplate = ({ size, disabled = false, helper = '', label, state = 'default', placeholder, labelPosition, defaultOption, openDirection, }) => {
+  const stateValue = state === 'Error' ? 'error' : 'default';
+  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
+  const labelPosLookup = { None: 'no-default', Outside: 'outside' };
+  const defaultOptionLookup = {
+    'No default': 'no-default',
+    'Option 1': 'option-1',
+    'Option 2': 'option-2',
+    'Option 3': 'option-3',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+      .demo-wrapper {
+        width: 300px;
+        height:200px;
+        }
+    </style>
+
+    <div class="demo-wrapper">
+      <sdds-dropdown-filter
+        id="sdds-dropdown-filter"
+        size="${sizeLookup[size]}"
+        placeholder="${placeholder}"
+        disabled="${disabled}"
+        open-direction="${openDirection.toLowerCase()}"
+        label-position="${labelPosLookup[labelPosition]}"
+        ${labelPosLookup[labelPosition] !== 'no-default' ? `label="${label}"` : ''}
+        ${helper !== '' ? `helper="${helper}"` : ''}
+        state="${stateValue}"
+        data='[
+          {
+            "value": "option-1",
+            "label":"Jakarta"
+          },
+          {
+            "value":"option-2"
+            ,"label":"Stockholm"
+          },
+          {
+            "value":"option-3",
+            "label":"Barcelona"
+          }
+        ]'
+        default-option="${defaultOptionLookup[defaultOption]}">
+      </sdds-dropdown-filter>
+    </div>
+  `);
+};
+export const Default = FilterTemplate.bind({});
+//# sourceMappingURL=dropdown-filter.stories.js.map

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-filter.stories.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown-filter/dropdown-filter.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Dropdown Filter',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\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    disabled: {\n      name: 'Disabled',\n      description: 'Disables the component',\n      control: {\n        type: 'boolean',\n      },\n    },\n    helper: {\n      name: 'Helper text',\n      control: {\n        type: 'text',\n      },\n      description: 'Helper text assists the user with additional information about the dropdown',\n    },\n    defaultOption: {\n      description: 'Sets a pre-selected option and replaces placeholder',\n      name: 'Default option',\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    size: 'Large',\n    placeholder: 'Placeholder',\n    disabled: false,\n    helper: '',\n    defaultOption: 'Option 1',\n    state: 'Default',\n    openDirection: 'Auto',\n  },\n};\n\nconst FilterTemplate = ({\n  size,\n  disabled = false,\n  helper = '',\n  label,\n  state = 'default',\n  placeholder,\n  labelPosition,\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', 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-filter\n        id=\"sdds-dropdown-filter\"\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=\"${label}\"` : ''}\n        ${helper !== '' ? `helper=\"${helper}\"` : ''}\n        state=\"${stateValue}\"\n        data='[\n          {\n            \"value\": \"option-1\",\n            \"label\":\"Jakarta\"\n          },\n          {\n            \"value\":\"option-2\"\n            ,\"label\":\"Stockholm\"\n          },\n          {\n            \"value\":\"option-3\",\n            \"label\":\"Barcelona\"\n          }\n        ]'\n        default-option=\"${defaultOptionLookup[defaultOption]}\">\n      </sdds-dropdown-filter>\n    </div>\n  `);\n};\n\nexport const Default = FilterTemplate.bind({});\n"]}