@scania/tegel 0.0.1-beta.3 → 0.0.1-beta.4

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

@@ -0,0 +1,339 @@
+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: `no-label` (default), `inside`, `outside`"
+        },
+        "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
+      }];
+  }
+}

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

@@ -0,0 +1,130 @@
+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({});

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

@@ -0,0 +1,90 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Dropdown',
+  parameters: {
+    layout: 'centered',
+    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: {
+    label: {
+      name: 'Label',
+      type: 'string',
+      description: 'Label text helps to describe what the dropdown contains',
+    },
+    size: {
+      name: 'Size',
+      description: 'Size of the dropdown',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small'],
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the component',
+      control: {
+        type: 'boolean',
+      },
+    },
+    state: {
+      name: 'State',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Error'],
+      description: 'Support error state',
+    },
+    helper: {
+      name: 'Helper text',
+      control: {
+        type: 'text',
+      },
+      description: 'Helper text assists the user with additional information about the dropdown',
+    },
+  },
+  args: {
+    label: '',
+    size: 'Large',
+    disabled: false,
+    state: 'Default',
+    helper: '',
+  },
+};
+const NativeTemplate = ({ disabled, size, helper, label, state }) => {
+  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
+  return formatHtmlPreview(`
+  <style>
+/* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 300px;
+  }
+</style>
+
+<div class="demo-wrapper">
+       <div class="sdds-dropdown ${size !== 'Large' ? `sdds-dropdown-${sizeLookup[size]}` : ''} ${state === 'Error' ? 'sdds-dropdown--error' : ''}" >
+       ${label !== '' ? `<span class="sdds-dropdown-label-outside">${label}</span> ` : ''}
+       <select
+       name="nativeDropdown"
+       id="mySelect"
+       ${disabled ? `disabled` : ''} >
+           <option value="truck">Truck</option>
+           <option value="bus">Bus</option>
+           <option value="car">Car</option>
+         </select>
+         ${helper !== '' ? `<span class="sdds-dropdown-helper">${helper}</span>` : ''}
+       </div>
+     </div>
+ `);
+};
+export const Native = NativeTemplate.bind({});