@scania/tegel 0.0.1-beta.9 → 0.0.2

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

@@ -0,0 +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
+      }];
+  }
+}

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

@@ -0,0 +1,167 @@
+import readme from './readme.md';
+import readmeOption from './dropdown-option/readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Dropdown',
+  parameters: {
+    layout: 'centered',
+    notes: { 'Dropdown': readme, 'Dropdown option': readmeOption },
+    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: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    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',
+    },
+    labelPosition: {
+      name: 'Label position',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Inside', 'Outside'],
+      description: 'Label text position',
+    },
+    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',
+      control: {
+        type: 'boolean',
+      },
+    },
+    state: {
+      name: 'State',
+      control: {
+        type: 'radio',
+      },
+      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 },
+    },
+    defaultOption: {
+      if: { arg: 'type', neq: 'Multiselect' },
+      name: 'Default option',
+      description: 'Sets a pre-selected option and replaces placeholder',
+      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: {
+    modeVariant: 'Inherit from parent',
+    size: 'Large',
+    placeholder: 'Placeholder',
+    state: 'Default',
+    disabled: false,
+    labelPosition: 'None',
+    labelText: 'Label text',
+    helper: false,
+    helperText: 'Helper text',
+    defaultOption: 'Option 1',
+    openDirection: 'Auto',
+  },
+};
+const Template = ({ modeVariant, size, disabled = false, labelPosition, helper, helperText, labelText, state = 'default', placeholder, defaultOption, openDirection, }) => {
+  const stateValue = state === 'Error' ? 'error' : 'default';
+  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
+  const labelPosLookup = { None: 'no-default', Inside: 'inside', 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
+          ${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}"
+          type="default"
+          default-option="${defaultOptionLookup[defaultOption]}" >
+          <sdds-dropdown-option value="option-1" tabindex="0" disabled>Option 1</sdds-dropdown-option>
+          <sdds-dropdown-option value="option-2" tabindex="0">Option 2</sdds-dropdown-option>
+          <sdds-dropdown-option value="option-3" tabindex="0">Option 3</sdds-dropdown-option>
+        </sdds-dropdown>
+      </div>
+  `);
+};
+export const WebComponentDefault = Template.bind({});

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

@@ -0,0 +1,146 @@
+import readme from './readme.md';
+import readmeOption from './dropdown-option/readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Dropdown',
+  parameters: {
+    layout: 'centered',
+    notes: { 'Dropdown': readme, 'Dropdown option': readmeOption },
+    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',
+    },
+    labelPosition: {
+      name: 'Label position',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Inside', 'Outside'],
+      description: 'Label text position',
+    },
+    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',
+      control: {
+        type: 'boolean',
+      },
+    },
+    state: {
+      name: 'State',
+      control: {
+        type: 'radio',
+      },
+      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 },
+    },
+    multiDefaultOption: {
+      name: 'Default options',
+      description: 'Sets a pre-selected option and replaces 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.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Up', 'Down', 'Auto'],
+      table: {
+        summary: {
+          defaultValue: 'auto',
+        },
+      },
+    },
+  },
+  args: {
+    size: 'Large',
+    placeholder: 'Placeholder',
+    state: 'Default',
+    disabled: false,
+    labelPosition: 'None',
+    labelText: 'Label text',
+    helper: false,
+    helperText: 'Helper text',
+    multiDefaultOption: ['Option 1', 'Option 2'],
+    openDirection: 'Auto',
+  },
+};
+const Template = ({ size, disabled = false, labelPosition, labelText, helper, helperText, state = 'default', placeholder, multiDefaultOption, openDirection, }) => {
+  const stateValue = state === 'Error' ? 'error' : 'default';
+  const sizeLookup = { Large: 'lg', Medium: 'md', Small: 'sm' };
+  const labelPosLookup = { None: 'no-default', Inside: 'inside', Outside: 'outside' };
+  const multiDefaultOptionValue = multiDefaultOption.map((value) => value.toLowerCase().replace(' ', '-'));
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 300px;
+    height:200px;
+  }
+  </style>
+
+    <div class="demo-wrapper">
+        <sdds-dropdown
+          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}"
+          type="multiselect"
+          default-option="${multiDefaultOptionValue}" >
+          <sdds-dropdown-option value="option-1" tabindex="0">Option 1</sdds-dropdown-option>
+          <sdds-dropdown-option value="option-2" tabindex="0" disabled>Option 2</sdds-dropdown-option>
+          <sdds-dropdown-option value="option-3" tabindex="0">Option 3</sdds-dropdown-option>
+        </sdds-dropdown>
+      </div>
+  `);
+};
+export const WebComponentMultiselect = Template.bind({});