@scania/tegel 0.0.1-beta.9 → 0.0.2

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

@@ -0,0 +1,577 @@
+import { h, Host, } from '@stencil/core';
+export class Dropdown {
+  constructor() {
+    this.modeVariant = undefined;
+    this.placeholder = undefined;
+    this.defaultOption = undefined;
+    this.selectedOption = undefined;
+    this.disabled = undefined;
+    this.type = 'default';
+    this.size = 'lg';
+    this.inline = false;
+    this.labelPosition = 'no-label';
+    this.label = undefined;
+    this.state = 'default';
+    this.helper = '';
+    this.openDirection = 'auto';
+    this.optionValues = [];
+    this.optionLabels = [];
+    this.open = false;
+    this.node = undefined;
+    this.selectedLabel = '';
+    this.selectedValue = '';
+    this.selectedValuesArray = [];
+    this.selectedLabelsArray = [];
+    this.dropdownUniqueClass = '';
+    this.openUpwards = false;
+    this.dropdownMenuHeight = 0;
+    this.dropdownMenuSelector = undefined;
+    this.listItemIndex = -1;
+    this.listItemArray = undefined;
+  }
+  componentWillLoad() {
+    // If default option is set, update the default selectedLabel value
+    // this.host.children is a HTMLCollection type, cannot use forEach
+    this.listItemArray = Array.from(this.host.children);
+    this.listItemArray.map((listItem) => {
+      this.optionValues.push(listItem.value);
+      this.optionLabels.push(listItem.innerText.trim());
+    });
+    this.setOptionFromOutside(this.defaultOption);
+    if (this.size === 'small') {
+      this.size = 'sm';
+      console.warn('size="small" is deprecated, use size="sm" instead');
+    }
+    if (this.size === 'medium') {
+      this.size = 'md';
+      console.warn('size="medium" is deprecated, use size="md" instead');
+    }
+    if (this.size === 'large') {
+      this.size = 'lg';
+      console.warn('size="large" is deprecated, use size="lg" instead');
+    }
+  }
+  setOptionFromOutside(optionValue) {
+    if (optionValue) {
+      this.deselectAll();
+      // TODO
+      // eslint-disable-next-line no-param-reassign
+      optionValue = optionValue.split(',');
+      for (let i = 0; i < this.host.children.length; i++) {
+        // Todo - specify type
+        const el = this.host.children[i];
+        if (optionValue.includes(el.value.trim())) {
+          this.selectedLabelsArray = [...this.selectedLabelsArray, el.textContent.trim()];
+          this.selectedValuesArray = [...this.selectedValuesArray, el.value];
+          this.selectedLabel = el.textContent;
+          this.selectedValue = el.value;
+          el.setAttribute('selectedLabel', 'true');
+          el.setAttribute('selected', 'true');
+        }
+        else {
+          el.setAttribute('selectedLabel', 'false');
+          el.setAttribute('selected', 'false');
+        }
+      }
+    }
+  }
+  changeSelectedOption() {
+    if (this.selectedValuesArray.includes(this.selectedOption)) {
+      this.resetOption();
+    }
+    this.setOptionFromOutside(this.selectedOption);
+    this.host.setAttribute('selected-option', '');
+  }
+  handleDocClick(ev) {
+    // To stop bubble click
+    ev.stopPropagation();
+    const target = ev ? ev.composedPath()[0] : window.event.target[0];
+    if (this.node !== undefined && this.node.contains(target)) {
+      if (typeof this.textInput !== 'undefined' || this.textInput === null) {
+        this.textInput.focus();
+      }
+    }
+    else {
+      this.tabbingLabelReset();
+      this.open = false;
+    }
+  }
+  keyListener(ev) {
+    if (!this.disabled) {
+      switch (ev.key) {
+        case 'ArrowDown':
+          if (this.open) {
+            ev.preventDefault();
+            if (this.listItemIndex < this.listItemArray.length - 1) {
+              this.listItemIndex++;
+            }
+            else {
+              this.listItemIndex = 0;
+            }
+            this.listItemArray[this.listItemIndex].focus();
+          }
+          break;
+        case 'ArrowUp':
+          if (this.open) {
+            ev.preventDefault();
+            if (this.listItemIndex > 0) {
+              this.listItemIndex--;
+            }
+            else {
+              this.listItemIndex = this.listItemArray.length - 1;
+            }
+            this.listItemArray[this.listItemIndex].focus();
+          }
+          break;
+        case 'Tab':
+          this.open = false;
+          break;
+        case 'Escape':
+          this.open = false;
+          this.node.focus();
+          break;
+        default:
+          break;
+      }
+    }
+  }
+  handleClick() {
+    this.open = this.open === false;
+    if (this.openDirection === 'auto') {
+      this.dropdownMenuHeight = this.dropdownMenuSelector.offsetHeight;
+      const distanceToBottom = this.host.getBoundingClientRect().top;
+      const viewportHeight = window.innerHeight;
+      this.openUpwards = distanceToBottom + this.dropdownMenuHeight + 57 > viewportHeight;
+      // If summary of dropdown menu height and its distance to the bottom is more than viewport height, open menu upwards
+      // Additional 57px is added as compensation for dropdown element own input/button height
+      // It is added on handleClick due to possible dynamic injection of data when component is already rendered
+    }
+    else {
+      this.openUpwards = this.openDirection === 'up';
+    }
+  }
+  tabbingLabelReset() {
+    if (typeof this.textInput !== 'undefined' || this.textInput === null) {
+      if (!this.selectedLabel && this.selectedLabel.length <= 0) {
+        this.textInput.value = '';
+        this.inputSearch.emit('');
+      }
+      if (this.selectedLabel !== this.textInput.value) {
+        this.textInput.value = this.selectedLabel;
+      }
+    }
+  }
+  selectOptionHandler(event) {
+    this.open = this.type === 'multiselect';
+    if (this.type !== 'multiselect') {
+      this.selectedLabel = event.detail.label;
+      this.selectedValue = event.detail.value;
+      this.tabbingLabelReset();
+    }
+    else {
+      if (this.selectedValuesArray.includes(event.detail.value)) {
+        const itemIndex = this.selectedValuesArray.indexOf(event.detail.value);
+        this.selectedValuesArray = this.selectedValuesArray.filter((_value, index) => index !== itemIndex);
+        this.selectedLabelsArray = this.selectedLabelsArray.filter((_value, index) => index !== itemIndex);
+      }
+      else {
+        this.selectedValuesArray = [...this.selectedValuesArray, event.detail.value];
+        this.selectedLabelsArray = [...this.selectedLabelsArray, event.detail.label.trim()];
+      }
+    }
+  }
+  handleSearch(ev) {
+    const searchTerm = ev.target.value;
+    this.inputSearch.emit(searchTerm);
+    this.open = true;
+  }
+  deselectAll() {
+    this.selectedLabel = '';
+    this.selectedValue = '';
+    this.selectedLabelsArray = [];
+    this.selectedValuesArray = [];
+    this.listItemArray = this.listItemArray.map((optionItem) => (Object.assign(Object.assign({}, optionItem), { selected: false })));
+  }
+  async resetOption() {
+    this.deselectAll();
+    this.open = false;
+    if (this.defaultOption) {
+      this.setOptionFromOutside(this.defaultOption);
+    }
+  }
+  render() {
+    return (h(Host, { class: `
+        ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ${this.open && !this.disabled ? 'sdds-dropdown--open' : ''}
+        ${this.type === 'multiselect' ? 'sdds-dropdown-multiselect' : ''}
+        ${this.inline ? 'sdds-dropdown-inline' : ''}
+        ${this.selectedLabel.length > 0 || this.selectedLabel === ''
+        ? 'sdds-dropdown--selected'
+        : ''}
+        ${this.state === 'error' ? 'sdds-dropdown--error' : ''}
+        ${this.openUpwards ? 'sdds-dropdown--open-upwards' : ''}
+        ${this.labelPosition === 'inside' && this.selectedLabelsArray.length > 0
+        ? 'sdds-dropdown--label-inside-position'
+        : ''}
+       `, "selected-value": this.selectedValue, "selected-text": this.selectedLabel, "multi-selected-values": JSON.stringify(this.selectedValuesArray), "multi-selected-labels": JSON.stringify(this.selectedLabelsArray) }, h("span", { class: `sdds-dropdown sdds-dropdown-${this.size}` }, this.labelPosition === 'outside' && this.label.length > 0 ? (h("span", { class: "sdds-dropdown-label-outside" }, this.label)) : (''), h("button", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: this.disabled ? '-1' : null, class: `sdds-dropdown-toggle ${this.selectedValue === 'filter' ? 'is-filter' : ''} ${this.selectedValue !== '' || this.selectedLabelsArray.length > 0
+        ? 'sdds-dropdown-toggle--selected'
+        : ''}
+                ${this.labelPosition === 'inside' && this.selectedValue !== '' && this.size !== 'sm'
+        ? `sdds-dropdown-toggle-label-inside-${this.size}`
+        : `sdds-dropdown-toggle-${this.size}`}`, type: "button", onClick: () => this.handleClick(), ref: (node) => (this.node = node) }, h("span", { class: "sdds-dropdown-label" }, this.type === 'filter' ? (h("input", { part: this.disabled ? 'dropdown-filter-disabled' : '', disabled: this.disabled, tabindex: "-1", ref: (inputEl) => (this.textInput = inputEl), class: "sdds-dropdown-filter", type: "text", placeholder: this.placeholder, value: this.selectedLabel, onInput: (event) => this.handleSearch(event), autoComplete: "off" })) : (h("span", { class: {
+        'sdds-dropdown-label-container': true,
+        'sdds-dropdown-label-container--label-inside': this.labelPosition === 'inside' &&
+          this.size !== 'sm' &&
+          (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0),
+      } }, this.size !== 'sm' &&
+      (this.selectedLabel.length > 0 || this.selectedLabelsArray.length > 0) &&
+      this.labelPosition === 'inside' &&
+      this.label.length > 0 && (h("span", { class: "sdds-dropdown-label-inside" }, this.label)), h("span", { class: `sdds-dropdown-label-main ${(this.selectedLabel.length === 0 ||
+        (this.labelPosition === 'inside' && this.label.length < 0)) &&
+        'sdds-dropdown-placeholder'}` }, this.selectedLabel.length > 0 &&
+      this.type !== 'multiselect' &&
+      this.selectedLabel, this.type === 'multiselect' && (h("span", { class: "sdds-dropdown-multiselect-result" }, this.labelPosition !== 'inside' &&
+      this.selectedLabelsArray.toString().length < 1 &&
+      this.placeholder, this.selectedLabelsArray.toString().length > 0 &&
+      this.selectedLabelsArray.toString().split(',').join(', '))), !this.selectedLabel &&
+      this.labelPosition === 'inside' &&
+      this.size !== 'sm' &&
+      this.label, !this.selectedLabel &&
+      this.type !== 'multiselect' &&
+      this.labelPosition !== 'inside' &&
+      this.placeholder, !this.selectedLabel &&
+      this.size === 'sm' &&
+      this.labelPosition === 'inside' &&
+      this.placeholder)))), h("svg", { class: "sdds-dropdown-arrow", width: "12", height: "7", viewBox: "0 0 12 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 1L6 6L11 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { class: "sdds-dropdown-menu",
+      // Need to have reference in order to calc height and distance from bottom
+      ref: (dropdownMenu) => (this.dropdownMenuSelector = dropdownMenu) }, h("slot", null))), h("p", { class: "sdds-dropdown-helper" }, h("svg", { class: "sdds-dropdown-error-icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 4C9.37 4 3.996 9.374 3.996 16.004S9.371 28.007 16 28.007c6.63 0 12.004-5.374 12.004-12.003C28.004 9.374 22.629 4 16 4ZM2 16.004c0-7.732 6.268-14 14-14s14 6.268 14 14-6.268 14-14 14-14-6.268-14-14Z", fill: "currentColor" }), h("path", { d: "M14.803 14.47V10h2.376v4.47l-.352 4.295h-1.672l-.352-4.295Zm-.053 5.632h2.5v2.394h-2.5v-2.394Z", fill: "currentColor" })), h("span", null, this.helper))));
+  }
+  static get is() { return "sdds-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the variant of the the dropdown."
+        },
+        "attribute": "mode-variant",
+        "reflect": false
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text for dropdown with no selectedLabel item"
+        },
+        "attribute": "placeholder",
+        "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 as string 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": "Set to true for disabled states"
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'default' | 'multiselect' | 'filter'",
+          "resolved": "\"default\" | \"filter\" | \"multiselect\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "`Controls type of dropdown."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "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": "Controls position of label"
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'no-label'"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label text for label inside & outside"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "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": "''"
+      },
+      "openDirection": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'down' | 'up' | 'auto'",
+          "resolved": "\"auto\" | \"down\" | \"up\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Direction that the dropdown will open. By default set to auto."
+        },
+        "attribute": "open-direction",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "optionValues": {},
+      "optionLabels": {},
+      "open": {},
+      "node": {},
+      "selectedLabel": {},
+      "selectedValue": {},
+      "selectedValuesArray": {},
+      "selectedLabelsArray": {},
+      "dropdownUniqueClass": {},
+      "openUpwards": {},
+      "dropdownMenuHeight": {},
+      "dropdownMenuSelector": {},
+      "listItemIndex": {},
+      "listItemArray": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "inputSearch",
+        "name": "inputSearch",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "resetOption": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "selectedOption",
+        "methodName": "changeSelectedOption"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleDocClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "keyListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "selectOption",
+        "method": "selectOptionHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/footer/footer.stories.js

@@ -0,0 +1,117 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Footer',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7568%3A298118&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      description: 'Footer mode variant',
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    topPart: {
+      name: 'Top part',
+      description: 'Adds top part of the footer with more links',
+      table: {
+        defaultValue: { summary: false },
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    topPart: false,
+  }
+};
+const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
+  <style>
+  .demo-wrapper {
+    padding: 0;
+    margin: 0;
+    font-size: 14px;
+  }
+  </style>
+
+  <div class="demo-wrapper">
+  <div class="sdds-footer 
+  ${modeVariant !== 'Inherit from parent' ? `sdds-mode-variant-${modeVariant.toLowerCase()}` : ''}
+ ">
+    ${topPart
+  ? `
+      <div class="sdds-footer-top sdds-container-fluid">
+        <div class="sdds-row">
+          <div class="sdds-footer-top-col sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+            <div class="sdds-footer-title opened">
+              <span>Title 1</span>
+              <span class="sdds-footer-top-icon">
+                <sdds-icon name="chevron_down" size="16px"></sdds-icon>
+              </span>
+            </div>
+            <ul class="sdds-footer-main-links opened">
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+            </ul>
+          </div>
+
+          <div class="sdds-col-max sdds-col-xxlg sdds-col-xlg sdds-col-lg sdds-col-md-12 sdds-col-sm-12 sdds-col-xs-12">
+            <div class="sdds-footer-title">
+              <span>Title 2</span>
+              <span class="sdds-footer-top-icon">
+              <sdds-icon name="chevron_down" size="16px"></sdds-icon>
+              </span>
+            </div>
+            <ul class="sdds-footer-main-links">
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+              <li><a href="#">Legal link</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      `
+  : ''}
+    <div class="sdds-footer-main">
+      <ul class="sdds-footer-main-links">
+        <li><a href="#">Legal link</a></li>
+        <li><a href="#">Legal link</a></li>
+        <li><a href="#">Legal link</a></li>
+      </ul>
+      <ul class="sdds-footer-social-links">
+        <li><a href="#">Social link</a></li>
+        <li><a href="#">Social link</a></li>
+        <li><a href="#">Social link</a></li>
+      </ul>
+      <div class="sdds-footer-main-brand">
+        <p>Copyright &copy; 2022 Scania</p>
+      </div>
+    </div>
+  </div>
+    </div>
+  `);
+export const Default = Template.bind({});