@scania/tegel 0.0.1-beta.7 → 0.0.2

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

@@ -0,0 +1,54 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Checkbox',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the checkbox',
+      control: {
+        type: 'boolean',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Checks the checkbox',
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'The label of the component',
+      type: 'string',
+    },
+  },
+  args: {
+    disabled: false,
+    checked: false,
+    label: 'Label',
+  },
+};
+const Template = ({ checked, disabled, label }) => formatHtmlPreview(`
+    <div class="sdds-checkbox-item">
+      <input class="sdds-form-input" type="checkbox" id="unique-id" ${checked ? 'checked="checked"' : ''}  ${disabled ? 'disabled' : ''}>
+      ${label
+  ? `<label class="sdds-form-label" for="unique-id" ${disabled ? 'disabled' : ''}>  ${label} </label>`
+  : ''}
+    </div>
+  `);
+export const Native = Template.bind({});

package/dist/collection/components/checkbox/sdds-checkbox.css

@@ -0,0 +1,95 @@
+.sdds-checkbox-webcomponent {
+  box-sizing: border-box;
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  color: var(--sdds-checkbox-text);
+  display: flex;
+  align-items: center;
+  margin-left: -4px;
+}
+.sdds-checkbox-webcomponent * {
+  box-sizing: border-box;
+}
+.sdds-checkbox-webcomponent input[type=checkbox] {
+  appearance: none;
+  outline: none;
+  margin: 0;
+  border: 0;
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  cursor: pointer;
+}
+.sdds-checkbox-webcomponent input[type=checkbox] + label {
+  color: var(--sdds-checkbox-color);
+  padding-left: var(--sdds-spacing-element-4);
+  padding-top: var(--sdds-spacing-element-4);
+  padding-bottom: var(--sdds-spacing-element-4);
+  cursor: pointer;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]::before, .sdds-checkbox-webcomponent input[type=checkbox]::after {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  border-radius: 2px;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]::before {
+  width: 24px;
+  height: 24px;
+  left: 0;
+  top: 0;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]::after {
+  border: 1px solid var(--sdds-checkbox-interaction-01);
+  background-color: var(--sdds-checkbox-interaction-02);
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  top: 4px;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:hover::before {
+  background-color: var(--sdds-checkbox-background-hover);
+  opacity: 0.12;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:focus::before {
+  background-color: var(--sdds-checkbox-background-focus);
+  opacity: 0.24;
+  transition: opacity 0.2s ease-in-out;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:disabled, .sdds-checkbox-webcomponent input[type=checkbox].disabled {
+  cursor: not-allowed;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:disabled::after, .sdds-checkbox-webcomponent input[type=checkbox].disabled::after {
+  border-color: var(--sdds-checkbox-border-color-disabled-after);
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:disabled + label, .sdds-checkbox-webcomponent input[type=checkbox].disabled + label {
+  color: var(--sdds-grey-600);
+  cursor: not-allowed;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox].disabled:hover::before {
+  display: none;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:checked::after {
+  background-image: var(--sdds-checkbox-background-img);
+  background-color: var(--sdds-checkbox-interaction-01);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:checked:hover::before {
+  background-color: var(--sdds-checkbox-background-hover);
+  opacity: 0.12;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled:hover::before, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled::before {
+  display: block;
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  top: 4px;
+  border: 1px solid #b0b7c4;
+}
+.sdds-checkbox-webcomponent input[type=checkbox]:checked:disabled::after, .sdds-checkbox-webcomponent input[type=checkbox]:checked.disabled::after {
+  background-image: var(--sdds-checkbox-background-img-disabled);
+  background-color: var(--sdds-checkbox-interaction-02);
+  color: var(--sdds-checkbox-color-disabled-after);
+}

package/dist/collection/components/checkbox/sdds-checkbox.js

@@ -0,0 +1,239 @@
+import { h } from '@stencil/core';
+export class SddsCheckbox {
+  constructor() {
+    this.handleChange = () => {
+      this.checked = !this.checked;
+      this.sddsChange.emit({
+        checkboxId: this.checkboxId,
+        checked: this.checked,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.checkboxId = crypto.randomUUID();
+    this.disabled = false;
+    this.required = false;
+    this.checked = false;
+    this.value = undefined;
+  }
+  /** Toggles the checked value of the component. */
+  async toggleCheckbox() {
+    this.checked = !this.checked;
+    return {
+      checkboxId: this.checkboxId,
+      checked: this.checked,
+    };
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocus(event) {
+    this.sddsFocus.emit(event);
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleBlur(event) {
+    this.sddsBlur.emit(event);
+  }
+  render() {
+    return (h("div", { class: "sdds-checkbox-webcomponent" }, h("input", { "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+        this.handleChange();
+      } }), h("label", { htmlFor: this.checkboxId }, h("slot", null))));
+  }
+  static get is() { return "sdds-checkbox"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-checkbox.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name for the checkbox's input element."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "checkboxId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the checkbox's input element. Randomly generated if not specified."
+        },
+        "attribute": "checkbox-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the checkbox in a disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Make the checkbox required"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the checkbox as checked"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value for the checkbox"
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique checkbox identifier and checked status when it is checked/unchecked."
+        },
+        "complexType": {
+          "original": "{\n    checkboxId: string;\n    checked: boolean;\n    value?: string;\n  }",
+          "resolved": "{ checkboxId: string; checked: boolean; value?: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "sddsFocus",
+        "name": "sddsFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event for the checkbox"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "sddsBlur",
+        "name": "sddsBlur",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Blur event for the checkbox"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggleCheckbox": {
+        "complexType": {
+          "signature": "() => Promise<{ checkboxId: string; checked: boolean; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<{ checkboxId: string; checked: boolean; }>"
+        },
+        "docs": {
+          "text": "Toggles the checked value of the component.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/checkbox/sdds-checkbox.stories.js

@@ -0,0 +1,71 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Checkbox',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17409&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the checkbox',
+      control: {
+        type: 'boolean',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Checks the checkbox',
+      control: {
+        type: 'boolean',
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'The label of the component',
+      type: 'string',
+    },
+  },
+  args: {
+    disabled: false,
+    checked: false,
+    label: 'Label',
+  },
+};
+const Template = ({ checked, disabled, label }) => formatHtmlPreview(`
+    <sdds-checkbox
+        ${checked ? 'checked' : ''}
+        ${disabled ? 'disabled' : ''}
+        value="checkbox-value"
+        >
+        ${label}
+    </sdds-checkbox>
+    
+    <!-- Script tag with event listener for demo purposes. -->
+    <script>
+        checkboxElement = document.querySelector('sdds-checkbox')
+        checkboxElement.addEventListener('sddsChange', (event) => {
+            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)
+        })
+        checkboxElement.addEventListener('sddsFocus',(event) => {
+          console.log(event)
+        })
+        checkboxElement.addEventListener('sddsBlur',(event) => {
+          console.log(event)
+        })
+    </script>
+  `);
+export const WebComponent = Template.bind({});

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

@@ -0,0 +1,106 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Chips',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11268%3A39456&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    placeholderText: {
+      name: 'Placeholder',
+      description: 'Set custom chip text',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Add an icon to the chip.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    iconType: {
+      name: 'Icon type',
+      description: 'Choose what icon type to use',
+      control: {
+        type: 'radio',
+      },
+      options: ['Native', 'Web Component'],
+      if: { arg: 'icon', eq: true },
+    },
+    iconPosition: {
+      name: 'Icon position',
+      description: 'Set the placement of the icon',
+      control: {
+        type: 'radio',
+      },
+      options: ['Icon left', 'Icon right'],
+      if: { arg: 'icon', eq: true },
+    },
+    state: {
+      name: 'State',
+      description: 'Set the chips state as active or default',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Active'],
+    },
+    size: {
+      name: 'Size',
+      description: 'Set the chip size',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Small'],
+    },
+  },
+  args: {
+    placeholderText: 'Chip text',
+    icon: false,
+    iconType: 'Native',
+    iconPosition: 'Icon right',
+    state: 'Default',
+    size: 'Default',
+  },
+};
+const Template = ({ icon, iconPosition, iconType, state, placeholderText, size }) => {
+  const stateValue = state === 'Active' ? 'sdds-chip-active' : '';
+  const sizeValue = size === 'Small' ? 'sdds-chip-sm' : '';
+  const iconPositionLookup = {
+    'Icon left': 'sdds-chip-icon-left',
+    'Icon right': 'sdds-chip-icon-right',
+  };
+  // TODO - Add dark theme to story
+  const iconSvg = `
+    ${iconType === 'Native'
+    ? '<i class="sdds-chip-icon sdds-icon notification"></i>'
+    : '<sdds-icon class="sdds-chip-icon" name="notification" size="16px"></sdds-icon>'}
+    `;
+  return formatHtmlPreview(`
+  ${iconType === 'Native'
+    ? `<style>
+/* Note: In case you are 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>`
+    : ''}
+    <!-- Below is a chip button implementation. Please use the proper html element 
+    depending on usage (button, checkbox, radio, etc) -->
+    <button class="sdds-chip ${icon ? iconPositionLookup[iconPosition] : ''} ${stateValue} ${sizeValue}">
+      ${icon ? iconSvg : ''}<span class="sdds-chip-text">${placeholderText}</span>
+    </button>
+    `);
+};
+export const Native = Template.bind({});