@scania/tegel 0.0.8 → 0.0.9

package/dist/collection/components/button/button.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 import { disableClickOnElement } from '../../utils/utils';
-export class SddsButton {
+export class TdsButton {
   constructor() {
     this.text = undefined;
     this.type = 'primary';
@@ -26,14 +26,14 @@ export class SddsButton {
     }
   }
   render() {
-    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { disabled: this.disabled, class: `${this.type}
+    return (h(Host, { class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { disabled: this.disabled, class: `${this.type}
             ${this.size}
             ${this.disabled ? 'disabled' : ''}
             ${this.fullbleed ? 'fullbleed' : ''}
             ${this.onlyIcon ? 'only-icon' : ''}
             ` }, this.text, h("slot", { name: "icon" }))));
   }
-  static get is() { return "sdds-button"; }
+  static get is() { return "tds-button"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {

package/dist/collection/components/card/card.css

@@ -0,0 +1,87 @@
+.card {
+  box-sizing: border-box;
+  box-shadow: var(--tds-card-box);
+  background-color: var(--tds-card-background);
+  display: block;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.card * {
+  box-sizing: border-box;
+}
+.card.clickable:hover {
+  box-shadow: var(--tds-card-box-hover);
+  cursor: pointer;
+}
+.card .card-top {
+  font: var(--tds-headline-06);
+  letter-spacing: var(--tds-headline-06-ls);
+  padding: 16px;
+  display: flex;
+  align-items: center;
+}
+.card .card-top img.card-top-image {
+  width: 36px;
+  height: 36px;
+  border-radius: 100%;
+}
+.card .card-top .card-top-header {
+  padding-left: 16px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
+.card .card-top .card-top-header.no-header-img {
+  padding-left: 0;
+}
+.card .card-top .card-top-header.single-line-header {
+  row-gap: 0;
+}
+.card .card-top.below {
+  padding-top: 16px;
+}
+.card .card-header {
+  color: var(--tds-card-headline);
+}
+.card .card-subheader {
+  color: var(--tds-card-sub-headline);
+}
+.card .card-body-img {
+  width: 100%;
+}
+.card .tds-divider {
+  margin: 16px 16px 0;
+  background-color: var(--tds-card-divider);
+  height: 1px;
+}
+.card .card-body {
+  display: block;
+  word-wrap: break-word;
+}
+.card slot[name=card-body]::slotted(*) {
+  font: var(--tds-detail-03);
+  letter-spacing: var(--tds-detail-03-ls);
+  color: var(--tds-card-body-color);
+  padding: 0 16px;
+  margin-bottom: 16px;
+  margin-top: 16px;
+  max-width: 336px;
+}
+.card slot[name=card-bottom]::slotted(*) {
+  display: flex;
+  padding: 16px;
+  color: var(--tds-card-icon-color);
+}
+
+button {
+  border: none;
+  text-align: left;
+  padding: 0;
+}
+button:focus {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+button:active {
+  box-shadow: var(--tds-card-box-pressed);
+}

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

@@ -0,0 +1,276 @@
+import { h, Host } from '@stencil/core';
+export class TdsCard {
+  constructor() {
+    this.handleClick = () => {
+      this.tdsClick.emit({
+        cardId: this.cardId,
+      });
+    };
+    this.getCardContent = () => (h("div", null, this.headerPlacement === 'above' && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), ' ', h("div", { class: `
+          card-top-header
+          ${!this.headerImg ? 'no-header-img' : ''}
+          ${!this.header || !this.subheader ? 'single-line-header' : ''}
+          ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), h("div", { class: `card-body` }, this.bodyImg && h("img", { class: `card-body-img`, src: this.bodyImg, alt: this.bodyImgAlt }), this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), h("div", { class: `
+            card-top-header
+            ${!this.headerImg ? 'no-header-img' : ''}
+            ${!this.header || !this.subheader ? 'single-line-header' : ''}
+            ` }, h("span", { class: `card-header` }, this.header), h("span", { class: `card-subheader` }, this.subheader)))), this.bodyDivider && h("tds-divider", null), h("slot", { name: "card-body" })), h("div", { class: `card-bottom` }, this.hasCardBottomSlot && h("slot", { name: `card-bottom` }))));
+    this.modeVariant = null;
+    this.headerPlacement = 'above';
+    this.header = undefined;
+    this.subheader = undefined;
+    this.headerImg = undefined;
+    this.headerImgAlt = undefined;
+    this.bodyImg = undefined;
+    this.bodyImgAlt = undefined;
+    this.bodyDivider = false;
+    this.clickable = false;
+    this.cardId = crypto.randomUUID();
+    this.hasCardBottomSlot = false;
+    this.hasCardBodySlot = false;
+  }
+  connectedCallback() {
+    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot="card-bottom"]');
+    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot="card-body"]');
+  }
+  render() {
+    return (h(Host, { class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
+        if (this.clickable) {
+          this.handleClick();
+        }
+      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
+  }
+  static get is() { return "tds-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card.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": "Variant of the Card based on the theme used."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "headerPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'above' | 'below'",
+          "resolved": "\"above\" | \"below\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Placement of the header"
+        },
+        "attribute": "header-placement",
+        "reflect": false,
+        "defaultValue": "'above'"
+      },
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text in the header"
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text in the header"
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
+      "headerImg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header image src"
+        },
+        "attribute": "header-img",
+        "reflect": false
+      },
+      "headerImgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alt text for the header image"
+        },
+        "attribute": "header-img-alt",
+        "reflect": false
+      },
+      "bodyImg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Body image src"
+        },
+        "attribute": "body-img",
+        "reflect": false
+      },
+      "bodyImgAlt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Alt text for the body image"
+        },
+        "attribute": "body-img-alt",
+        "reflect": false
+      },
+      "bodyDivider": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Divider for the body"
+        },
+        "attribute": "body-divider",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "clickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the Card clickable."
+        },
+        "attribute": "clickable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "cardId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID for the Card, must be unique.\n\n**NOTE**: If you're listening for Card events, you need to set this ID yourself to identify the Card,\nas the default ID is random and will be different every time."
+        },
+        "attribute": "card-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasCardBottomSlot": {},
+      "hasCardBodySlot": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsClick",
+        "name": "tdsClick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique Card identifier when the Card is clicked, if clickable=true"
+        },
+        "complexType": {
+          "original": "{\n    cardId: string;\n  }",
+          "resolved": "{ cardId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

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);
+}