@scania/tegel 0.0.1-beta

package/dist/collection/components/textfield/textfield.js

@@ -0,0 +1,359 @@
+import { h } from '@stencil/core';
+export class Textfield {
+  constructor() {
+    this.type = 'text';
+    this.labelPosition = 'no-label';
+    this.label = '';
+    this.placeholder = '';
+    this.value = '';
+    this.disabled = false;
+    this.readonly = false;
+    this.size = 'lg';
+    this.modeVariant = 'primary';
+    this.noMinWidth = false;
+    this.name = '';
+    this.state = 'default';
+    this.maxLength = undefined;
+    this.autofocus = false;
+    this.focusInput = undefined;
+  }
+  // Data input event in value prop
+  handleInput(e) {
+    this.value = e.target.value;
+  }
+  // Change event isn't a composed:true by default in for input
+  handleChange(e) {
+    this.customChange.emit(e);
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocusClick() {
+    this.textInput.focus();
+    this.focusInput = true;
+  }
+  render() {
+    var _a;
+    let className = ' sdds-textfield-input';
+    if (this.size === 'md') {
+      className += `${className}-md`;
+    }
+    if (this.size === 'sm') {
+      className += `${className}-sm`;
+    }
+    return (h("div", { class: `
+        ${this.noMinWidth ? 'sdds-form-textfield-nomin' : ''}
+        ${this.focusInput && !this.disabled
+        ? 'sdds-form-textfield sdds-textfield-focus'
+        : ' sdds-form-textfield'}
+        ${this.value ? 'sdds-textfield-data' : ''}
+        ${this.labelPosition === 'inside' && this.size !== 'sm'
+        ? 'sdds-textfield-container-label-inside'
+        : ''}
+        ${this.disabled ? 'sdds-form-textfield-disabled' : ''}
+        ${this.readonly ? 'sdds-form-textfield-readonly' : ''}
+        ${this.modeVariant === 'primary' ? 'sdds-on-white-bg' : ''}
+        ${this.size === 'md' ? 'sdds-form-textfield-md' : ''}
+        ${this.size === 'sm' ? 'sdds-form-textfield-sm' : ''}
+        ${this.state === 'error' || this.state === 'success'
+        ? `sdds-form-textfield-${this.state}`
+        : ''}
+        ` }, this.labelPosition === 'outside' && (h("div", { class: "sdds-textfield-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.handleFocusClick(), class: "sdds-textfield-container" }, h("div", { class: `sdds-textfield-slot-wrap-prefix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-prefix" })), h("div", { class: "sdds-textfield-input-container" }, h("input", { onFocus: (e) => {
+        if (this.readonly) {
+          e.preventDefault();
+          this.textInput.blur();
+          return;
+        }
+        this.focusInput = true;
+      }, onBlur: () => {
+        this.focusInput = false;
+      }, ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e) }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "sdds-textfield-label-inside" }, this.label))), h("div", { class: "sdds-textfield-bar" }), h("div", { class: `sdds-textfield-slot-wrap-suffix sdds-textfield-${this.state}` }, h("slot", { name: "sdds-suffix" })), h("svg", { class: "sdds-textfield-icon__readonly", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.6242 10.7946L17.1365 7.28228C17.6247 6.79412 17.6247 6.00266 17.1365 5.5145L14.485 2.86295C13.9968 2.37479 13.2054 2.37479 12.7172 2.86295L9.20483 6.3753L10.0887 7.25919L11.3914 5.95654L14.0429 8.6081L12.7403 9.91075L13.6242 10.7946ZM13.6011 3.74684L16.2526 6.39839L14.9268 7.72421L12.2753 5.07265L13.6011 3.74684Z", fill: "#0D0F13" }), h("path", { d: "M7.43707 9.91075L5.00974 12.3381L4.01561 15.9837L7.6613 14.9896L10.0886 12.5623L10.9725 13.4462L8.54519 15.8735C8.39136 16.0274 8.20004 16.1384 7.99014 16.1956L3.28932 17.4774C3.07294 17.5364 2.84154 17.475 2.68295 17.3164C2.52436 17.1578 2.46291 16.9264 2.52191 16.71L3.80377 12.0092C3.861 11.7993 3.97202 11.608 4.12585 11.4542L6.55318 9.02686L7.43707 9.91075Z", fill: "#0D0F13" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M1.43306 1.43306C1.67714 1.18898 2.07287 1.18898 2.31695 1.43306L18.5671 17.6832C18.8112 17.9273 18.8112 18.323 18.5671 18.5671C18.323 18.8112 17.9273 18.8112 17.6832 18.5671L1.43306 2.31695C1.18898 2.07287 1.18898 1.67714 1.43306 1.43306Z", fill: "#0D0F13" })), h("span", { class: "sdds-textfield-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "sdds-textfield-helper" }, this.state === 'error' && (h("div", { class: "sdds-textfield-helper-error-state" }, h("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8 2.00015C4.6853 2.00015 1.9982 4.68725 1.9982 8.00195C1.9982 11.3167 4.6853 14.0038 8 14.0038C11.3147 14.0038 14.0018 11.3167 14.0018 8.00195C14.0018 4.68725 11.3147 2.00015 8 2.00015ZM1 8.00195C1 4.13596 4.13401 1.00195 8 1.00195C11.866 1.00195 15 4.13596 15 8.00195C15 11.8679 11.866 15.002 8 15.002C4.13401 15.002 1 11.8679 1 8.00195Z", fill: "#FF2340" }), h("path", { d: "M7.4014 7.2352V5H8.5894V7.2352L8.4134 9.3824H7.5774L7.4014 7.2352ZM7.375 10.0512H8.6246V11.248H7.375V10.0512Z", fill: "#FF2340" })), h("slot", { name: "sdds-helper" }))), this.state !== 'error' && h("slot", { name: "sdds-helper" }), this.maxLength > 0 && (h("div", { class: "sdds-textfield-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "sdds-textfield-textcounter-divider" }, " / "), this.maxLength)))));
+  }
+  static get is() { return "sdds-textfield"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["textfield.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["textfield.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'text' | 'password'",
+          "resolved": "\"password\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Which input type, text, password or similar"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'text'"
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'inside' | 'outside' | 'no-label'",
+          "resolved": "\"inside\" | \"no-label\" | \"outside\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the label for the textfield."
+        },
+        "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"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placeholder text"
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of the input text"
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set input in disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set input in readonly state"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the input"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the tabs, primary= on white, secondary= on grey50"
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "noMinWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "With setting"
+        },
+        "attribute": "no-min-width",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name property"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "state": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'error' | 'success' | 'default'",
+          "resolved": "\"default\" | \"error\" | \"success\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Error state of input"
+        },
+        "attribute": "state",
+        "reflect": false,
+        "defaultValue": "'default'"
+      },
+      "maxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Max length of input"
+        },
+        "attribute": "max-length",
+        "reflect": false
+      },
+      "autofocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Autofocus for input"
+        },
+        "attribute": "autofocus",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "focusInput": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "customChange",
+        "name": "customChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Change event for the textfield"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1,222 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Textfield',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1675%3A76544&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Placeholder text',
+      control: {
+        type: 'text',
+      },
+    },
+    type: {
+      name: 'Type',
+      description: 'Which type of textfield',
+      control: {
+        type: 'radio',
+        options: ['password', 'text'],
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Switch between different sizes',
+      control: {
+        type: 'radio',
+        options: ['Large', 'Medium', 'Small'],
+      },
+    },
+    minWidth: {
+      name: 'No minimum width',
+      description: 'Toggle the minimum width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      description: 'Set textfield to disabled state',
+      name: 'Disabled',
+      control: {
+        type: 'boolean',
+      },
+    },
+    readonly: {
+      description: 'Set textfield to read only',
+      name: 'Read Only',
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      description: 'Label text for specific textfield',
+      name: 'Label text',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      control: {
+        type: 'radio',
+      },
+      options: ['None', 'Inside', 'Outside'],
+      description: 'Label text position',
+    },
+    prefix: {
+      name: 'Prefix',
+      description: 'Add prefix symbol/text before the textfield',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    prefixType: {
+      name: 'Prefix type',
+      description: 'Choose icon or text for prefix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'prefix', eq: true },
+    },
+    suffix: {
+      name: 'Suffix',
+      description: 'Add suffix symbol/text after the textfield',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    suffixType: {
+      name: 'Suffix type',
+      description: 'Choose icon or text for suffix.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon', 'Text'],
+      if: { arg: 'suffix', eq: true },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Add helper text for the textfield',
+      control: {
+        type: 'text',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Set a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switch between success or error state',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+    },
+    variant: {
+      name: 'Mode Variant',
+      description: 'The variant of the textarea',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary'],
+    },
+  },
+  args: {
+    placeholderText: 'Placeholder',
+    disabled: false,
+    readonly: false,
+    label: 'Label',
+    labelPosition: 'None',
+    helper: '',
+    maxLength: 0,
+    state: 'Default',
+    variant: 'Secondary',
+    suffix: false,
+    suffixType: 'Icon',
+    prefix: false,
+    prefixType: 'Icon',
+    minWidth: 'Default',
+    size: 'Large',
+    type: 'text',
+  },
+};
+const Template = ({ type, placeholderText, size, minWidth, disabled, readonly, label, labelPosition, state, variant, helper, prefix, prefixType, suffix, suffixType, maxLength, }) => {
+  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
+  const variantValue = variant === 'Primary' ? 'primary' : 'secondary';
+  const stateValue = state.toLowerCase();
+  const sizeLookUp = {
+    Large: 'lg',
+    Medium: 'md',
+    Small: 'sm',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 200px;
+    height: 150px;
+  }
+    </style>
+
+  <div class="demo-wrapper">
+    <sdds-textfield
+      type="${type}"
+      size="${sizeLookUp[size]}"
+      state="${stateValue}"
+      mode-variant="${variantValue}"
+      label="${label}"
+      label-position="${labelPosition.toLowerCase()}"
+      ${maxlength}
+      ${disabled ? 'disabled' : ''}
+      ${readonly ? 'readonly' : ''}
+      ${minWidth ? 'no-min-width' : ''}
+      placeholder="${placeholderText}" >
+        ${prefix
+    ? `
+        <span slot="sdds-prefix">
+          ${prefixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
+        </span>`
+    : ''}
+        ${helper ? `<span slot='sdds-helper'>${helper}</span>` : ''}
+        ${suffix
+    ? `
+        <span slot="sdds-suffix">
+          ${suffixType === 'Text' ? '$' : '<sdds-icon name="truck" size="20px"></sdds-icon> '}
+        </span>`
+    : ''}
+        </sdds-textfield>
+  </div>
+  `);
+};
+// ${true ? '<sdds-icon name="cross" slot="sdds-prefix"></sdds-icon>' : ''}
+export const Default = Template.bind({});
+Default.args = {};

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

@@ -0,0 +1,119 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+export default {
+  title: 'Components/Toast',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    toastType: {
+      name: 'Message type',
+      description: 'Changes the type of message',
+      control: {
+        type: 'radio',
+      },
+      options: ['Success', 'Info', 'Warning', 'Error'],
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Adds a subheader',
+    },
+    link: {
+      name: 'Link',
+      description: 'Adds a CTA link',
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Native/Web Component',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Icon to display on the button. Choose "none" to exclude the icon, or choose "recommended" to pick the icon that is recommended for the type of toast.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', 'recommended', ...iconsNames],
+      if: { arg: 'size', neq: 'xs' },
+    },
+  },
+  args: {
+    toastType: 'Success',
+    subheader: false,
+    link: false,
+    iconType: 'Web Component',
+    icon: 'recommended',
+  },
+};
+const typeLookup = {
+  Success: 'success',
+  Info: 'info',
+  Warning: 'warning',
+  Error: 'error',
+};
+const iconLookup = {
+  Success: 'tick',
+  Info: 'info',
+  Warning: 'warning',
+  Error: 'error',
+};
+const Template = ({ toastType, subheader, link, iconType, icon }) => {
+  const iconValue = icon === 'recommended' ? iconLookup[toastType] : icon;
+  return formatHtmlPreview(`
+      ${iconType === 'Native'
+    ? `
+    <style>
+    /* Note: In case using WebFont icons, please make sure to import icons css file in your implementation */
+    @import url('https://cdn.digitaldesign.scania.com/icons/webfont/css/sdds-icons.css');
+
+    </style>
+      `
+    : ''}
+  <div class="sdds-toast sdds-toast-${typeLookup[toastType]}">
+  ${icon === 'none'
+    ? ''
+    : `
+    <div class="sdds-toast-icon">
+      ${iconType === 'Native'
+      ? `<i class="sdds-icon ${iconValue}"></i>`
+      : `<sdds-icon name="${iconValue}" size="20px"></sdds-icon>
+      `}
+    </div>
+  `}
+    <div class="sdds-toast-content">
+      <div class="sdds-toast-header">
+        <span class="sdds-toast-headline">This is ${toastType === 'Success' || toastType === 'Warning' ? 'a' : 'an'} ${toastType.toLowerCase()} message</span>
+        <button type="button" aria-label="close" class="sdds-toast-dismiss">
+          ${iconType === 'Native'
+    ? `<i class="sdds-icon cross"></i>`
+    : `<sdds-icon name="cross" size="20px"></sdds-icon>
+          `}
+        </button>
+      </div>
+      ${subheader || link
+    ? `\n<div class="sdds-toast-body">\
+          ${subheader ? '\n<span class="sdds-toast-subheadline">Short subheader</span>' : ''}\
+          ${link ? '\n<a class="sdds-toast-link" href="#">Link example</a>' : ''}
+          </div> `
+    : ''}
+    </div>
+  </div>
+  `);
+};
+export const Default = Template.bind({});
+Default.args = {};