@scania/tegel 0.0.8 → 0.0.10

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

@@ -0,0 +1,162 @@
+import readme from './readme.md';
+import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Card`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2891%3A125&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    header: {
+      name: 'Header text',
+      description: 'Sets the header text.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader text',
+      description: 'Sets the subheader text.',
+      control: {
+        type: 'text',
+      },
+    },
+    thumbnail: {
+      name: 'Header thumbnail',
+      description: 'Toggles a thumbnail in the header.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    imagePlacement: {
+      name: 'Body image placement',
+      description: 'Sets the placement of the body image, above or below the header.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Above', 'Below'],
+      table: {
+        defaultValue: { summary: 'below' },
+      },
+    },
+    bodyImg: {
+      name: 'Body image',
+      description: 'Toggles an image in the Card body. Cannot be combined with divider.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'bodyDivider', eq: false },
+    },
+    bodyContent: {
+      name: 'Body text',
+      description: 'Sets the body text for the Card.',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyDivider: {
+      name: 'Body divider',
+      description: 'Adds a divider above the body content. Cannot be combined with body image.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'bodyImg', eq: false },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    cardBottom: {
+      name: 'Content of the bottom of the Card',
+      description: 'Slot to add custom HTML elements to the bottom of the Card.',
+      control: {
+        type: 'text',
+      },
+    },
+    clickable: {
+      name: 'Clickable',
+      description: 'Toggles if the Card is clickable or not.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    header: 'Header text',
+    subheader: 'Subheader text',
+    thumbnail: true,
+    imagePlacement: 'Below',
+    bodyImg: false,
+    bodyContent: '',
+    bodyDivider: false,
+    cardBottom: `<tds-icon slot="bottom" size="20px" name="arrow_right"></tds-icon>`,
+    clickable: false,
+  },
+};
+const Template = ({ modeVariant, header, subheader, thumbnail, imagePlacement, bodyImg, bodyContent, bodyDivider, cardBottom, clickable, }) => formatHtmlPreview(`<style>
+    /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper {
+        width: 368px;
+    }
+    </style>
+    <div class="demo-wrapper">
+    <tds-card
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    ${header ? `header="${header}"` : ''}
+    image-placement="${imagePlacement.toLowerCase()}-header"
+    ${subheader ? `subheader="${subheader}"` : ''}
+    ${bodyImg ? `body-img="${CardPlaceholder}"` : ''}
+    ${clickable ? 'clickable' : ''}
+    ${bodyDivider ? 'body-divider' : ''}
+    >
+    ${thumbnail
+  ? `<img slot="thumbnail" src="${CardPlaceholder}" alt="Thumbnail for the card."/>`
+  : ''}
+  ${bodyContent
+  ? `
+    <div slot="body">
+        ${bodyContent}
+    </div>`
+  : ''}
+    ${cardBottom ? `${cardBottom}` : ''}
+    </tds-card>
+    </div>
+    ${clickable
+  ? `
+    <script>
+        document.addEventListener('tdsClick', (event)=>{
+            console.log('Card with id: ', event.detail.cardId, ' was clicked.')
+        })
+    </script>
+    `
+  : ''}
+  `);
+export const Default = Template.bind({});

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

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

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

@@ -0,0 +1,243 @@
+import { h } from '@stencil/core';
+import { generateUniqueId } from '../../utils/utils';
+/**
+ * @slot label - Slot for the label text.
+ */
+export class TdsCheckbox {
+  constructor() {
+    this.handleChange = () => {
+      this.checked = !this.checked;
+      this.tdsChange.emit({
+        checkboxId: this.checkboxId,
+        checked: this.checked,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.checkboxId = generateUniqueId();
+    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 component */
+  handleFocus(event) {
+    this.tdsFocus.emit(event);
+  }
+  /** Set the input as blur when clicking outside the component */
+  handleBlur(event) {
+    this.tdsBlur.emit(event);
+  }
+  render() {
+    return (h("div", { class: "tds-checkbox" }, 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", { name: "label" }))));
+  }
+  static get is() { return "tds-checkbox"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["checkbox.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["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": "generateUniqueId()"
+      },
+      "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": "tdsChange",
+        "name": "tdsChange",
+        "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": "tdsFocus",
+        "name": "tdsFocus",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event for the Checkbox"
+        },
+        "complexType": {
+          "original": "FocusEvent",
+          "resolved": "FocusEvent",
+          "references": {
+            "FocusEvent": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "tdsBlur",
+        "name": "tdsBlur",
+        "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/checkbox.stories.js

@@ -0,0 +1,80 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/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: {
+    label: {
+      name: 'Label text',
+      description: 'Sets the label of the component.',
+      control: {
+        type: 'text',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Checks the Checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Checkbox.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    label: 'Label',
+    checked: false,
+    disabled: false,
+  },
+};
+const Template = ({ label, checked, disabled }) => formatHtmlPreview(`
+    <tds-checkbox
+        ${checked ? 'checked' : ''}
+        ${disabled ? 'disabled' : ''}
+        value="checkbox-value"
+        >
+        <div slot="label">${label}</div>
+    </tds-checkbox>
+    
+    <!-- Script tag with event listener for demo purposes. -->
+    <script>
+        checkboxElement = document.querySelector('tds-checkbox')
+        checkboxElement.addEventListener('tdsChange', (event) => {
+            console.log('Checkbox with id: ', event.detail.checkboxId, ' is ', event.detail.checked)
+        })
+        checkboxElement.addEventListener('tdsFocus',(event) => {
+          console.log(event)
+        })
+        checkboxElement.addEventListener('tdsBlur',(event) => {
+          console.log(event)
+        })
+    </script>
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/chip/chip.css

@@ -0,0 +1,73 @@
+/* Styling for slotted content */
+::slotted(*) {
+  display: inline-flex;
+  align-items: center;
+}
+
+:host ::slotted([slot=label]) {
+  padding-top: 2px;
+}
+
+/* Component styling */
+.component .tds-chip-component {
+  display: inline-flex;
+}
+.component .tds-chip-component label {
+  background-color: var(--tds-chips-background);
+  color: var(--tds-chips-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  display: inline-flex;
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.component .tds-chip-component label:hover {
+  background-color: var(--tds-chips-background-hover);
+}
+.component .tds-chip-component.lg label {
+  height: 32px;
+  padding: 0 16px;
+  gap: 8px;
+}
+.component .tds-chip-component.sm label {
+  height: 24px;
+  padding: 0 12px;
+  gap: 6px;
+}
+.component .tds-chip-component.sm.prefix label {
+  padding: 0 12px 0 6px;
+}
+.component .tds-chip-component.sm.suffix label {
+  padding: 0 6px 0 12px;
+}
+.component .tds-chip-component.lg.prefix label {
+  padding: 0 16px 0 8px;
+}
+.component .tds-chip-component.lg.suffix label {
+  padding: 0 8px 0 16px;
+}
+.component .tds-chip-component.lg.prefix.suffix label {
+  padding: 0 8px;
+}
+.component .tds-chip-component.sm.prefix.suffix label {
+  padding: 0 6px;
+}
+.component .tds-chip-component input {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
+.component .tds-chip-component input:focus-visible + label {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+  background-color: var(--tds-chips-background-focus);
+}
+.component .tds-chip-component input:checked + label {
+  background-color: var(--tds-chips-background-active);
+  color: var(--tds-chips-color-active);
+}
+.component .tds-chip-component input:checked + label:hover {
+  background-color: var(--tds-chips-background-active-hover);
+}