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

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

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

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

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