@scania/tegel 0.0.1-beta.7 → 0.0.2

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({});

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

@@ -1,185 +1,185 @@
-import { h, Host, } from '@stencil/core';
-export class DropdownOption {
-  constructor() {
-    this.innerValue = undefined;
-    this.selected = false;
-    this.disabled = false;
-    this.value = undefined;
-  }
-  changeFocusHandler() {
-    this.host.focus();
-  }
-  removeFocusHandler() {
-    this.host.blur();
-  }
-  onKeyDown(event) {
-    if (event.code === 'Enter') {
-      this.selectOptionHandler({
-        value: this.value,
-        label: this.host.innerText,
-        parent: this.host.parentNode,
-      });
-    }
-  }
-  componentWillLoad() {
-    this.innerValue = this.value;
-    this.isMultiSelectOption = this.host
-      .closest('sdds-dropdown')
-      .classList.contains('sdds-dropdown-multiselect');
-  }
-  selectOptionHandler(value) {
-    if (!this.disabled) {
-      const listOptions = value.parent.childNodes;
-      this.selectOption.emit(value);
-      if (!this.isMultiSelectOption) {
-        listOptions.forEach((optionEl) => {
-          // TODO: fix and enable rule
-          // eslint-disable-next-line no-param-reassign
-          optionEl.selected = false;
-        });
-      }
-      const optionCheckbox = this.host.shadowRoot.querySelector('input');
-      if (this.selected) {
-        this.selected = false;
-        if (optionCheckbox) {
-          optionCheckbox.checked = false;
-        }
-      }
-      else {
-        this.selected = true;
-        if (optionCheckbox) {
-          optionCheckbox.checked = true;
-        }
-      }
-    }
-  }
-  render() {
-    return (h(Host, { onClick: (ev) => {
-        if (this.isMultiSelectOption) {
-          ev.stopPropagation();
-        }
-        return this.selectOptionHandler({
-          value: this.value,
-          label: this.host.innerText,
-          parent: ev.target.parentNode,
-        });
-      }, class: {
-        'selected': this.selected,
-        'sdds-dropdown-option-disabled': this.disabled,
-      }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (h("div", { class: "sdds-checkbox-item sdds-option-checkbox" }, h("label", { class: "sdds-form-label" }, h("input", { class: "sdds-form-input", type: "checkbox", checked: this.selected, disabled: this.disabled })))), h("span", { class: "sdds-option-label" }, h("slot", null)), !this.isMultiSelectOption && (h("span", { class: "sdds-option-checkmark" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
-  }
-  static get is() { return "sdds-dropdown-option"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./../dropdown.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../dropdown.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Selected set to true if selected"
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets option to disabled state if true"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value is a unique string that will be used for application logic"
-        },
-        "attribute": "value",
-        "reflect": true
-      }
-    };
-  }
-  static get states() {
-    return {
-      "innerValue": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "selectOption",
-        "name": "selectOption",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
-  static get listeners() {
-    return [{
-        "name": "mouseover",
-        "method": "changeFocusHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "mouseout",
-        "method": "removeFocusHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": true
-      }, {
-        "name": "keydown",
-        "method": "onKeyDown",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h, Host, } from '@stencil/core';
+export class DropdownOption {
+  constructor() {
+    this.innerValue = undefined;
+    this.selected = false;
+    this.disabled = false;
+    this.value = undefined;
+  }
+  changeFocusHandler() {
+    this.host.focus();
+  }
+  removeFocusHandler() {
+    this.host.blur();
+  }
+  onKeyDown(event) {
+    if (event.code === 'Enter') {
+      this.selectOptionHandler({
+        value: this.value,
+        label: this.host.innerText,
+        parent: this.host.parentNode,
+      });
+    }
+  }
+  componentWillLoad() {
+    this.innerValue = this.value;
+    this.isMultiSelectOption = this.host
+      .closest('sdds-dropdown')
+      .classList.contains('sdds-dropdown-multiselect');
+  }
+  selectOptionHandler(value) {
+    if (!this.disabled) {
+      const listOptions = value.parent.childNodes;
+      this.selectOption.emit(value);
+      if (!this.isMultiSelectOption) {
+        listOptions.forEach((optionEl) => {
+          // TODO: fix and enable rule
+          // eslint-disable-next-line no-param-reassign
+          optionEl.selected = false;
+        });
+      }
+      const optionCheckbox = this.host.shadowRoot.querySelector('input');
+      if (this.selected) {
+        this.selected = false;
+        if (optionCheckbox) {
+          optionCheckbox.checked = false;
+        }
+      }
+      else {
+        this.selected = true;
+        if (optionCheckbox) {
+          optionCheckbox.checked = true;
+        }
+      }
+    }
+  }
+  render() {
+    return (h(Host, { onClick: (ev) => {
+        if (this.isMultiSelectOption) {
+          ev.stopPropagation();
+        }
+        return this.selectOptionHandler({
+          value: this.value,
+          label: this.host.innerText,
+          parent: ev.target.parentNode,
+        });
+      }, class: {
+        'selected': this.selected,
+        'sdds-dropdown-option-disabled': this.disabled,
+      }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (h("div", { class: "sdds-checkbox-item sdds-option-checkbox" }, h("label", { class: "sdds-form-label" }, h("input", { class: "sdds-form-input", type: "checkbox", checked: this.selected, disabled: this.disabled })))), h("span", { class: "sdds-option-label" }, h("slot", null)), !this.isMultiSelectOption && (h("span", { class: "sdds-option-checkmark" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+  }
+  static get is() { return "sdds-dropdown-option"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./../dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["../dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Selected set to true if selected"
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets option to disabled state if true"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value is a unique string that will be used for application logic"
+        },
+        "attribute": "value",
+        "reflect": true
+      }
+    };
+  }
+  static get states() {
+    return {
+      "innerValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selectOption",
+        "name": "selectOption",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "mouseover",
+        "method": "changeFocusHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "mouseout",
+        "method": "removeFocusHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "keydown",
+        "method": "onKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}