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

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

@@ -1,185 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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 },
-    },
-    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: {
-    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 = ({ 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
-          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

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