@scania/tegel 0.0.10 → 0.0.12

package/dist/collection/components/button/button.css

@@ -40,12 +40,17 @@
   --tds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
   --tds-btn-icon-secondary-color-focus: var(--tds-black);
   --tds-btn-icon-secondary-fill-focus: var(--tds-black);
+  --tds-btn-icon-secondary-fill-active: var(--tds-black);
+  --tds-btn-icon-secondary-fill-active: var(--tds-black);
   /* ICON */
   --tds-btn-icon-secondary-fill: var(--tds-black);
   --tds-btn-icon-secondary-color: var(--tds-black);
   /* ICON HOVER */
   --tds-btn-icon-secondary-fill-hover: var(--tds-grey-50);
   --tds-btn-icon-secondary-color-hover: var(--tds-grey-50);
+  /* ICON HOVER */
+  --tds-btn-icon-secondary-fill-active: var(--tds-black);
+  --tds-btn-icon-secondary-color-active: var(--tds-black);
   --tds-btn-ghost-background: transparent;
   --tds-btn-ghost-color: var(--tds-black);
   --tds-btn-ghost-border-color: transparent;
@@ -315,6 +320,12 @@ button.primary:active, button.primary.active {
   color: var(--tds-btn-primary-color-active);
   outline-color: var(--tds-btn-primary-outline-color-active);
 }
+button.primary:active:not(.disabled) ::slotted([slot=icon]), button.primary.active:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-primary-fill-active);
+  color: var(--tds-btn-icon-primary-fill-active);
+  fill: var(--tds-btn-icon-primary-color-active);
+  color: var(--tds-btn-icon-primary-color-active);
+}
 button.primary.disabled, button.primary:disabled {
   cursor: not-allowed;
   background: var(--tds-btn-primary-background-disabled);
@@ -368,6 +379,12 @@ button.secondary:active, button.secondary.active {
   color: var(--tds-btn-secondary-color-active);
   outline-color: var(--tds-btn-secondary-outline-color-active);
 }
+button.secondary:active:not(.disabled) ::slotted([slot=icon]), button.secondary.active:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-secondary-fill-active);
+  color: var(--tds-btn-icon-secondary-fill-active);
+  fill: var(--tds-btn-icon-secondary-color-active);
+  color: var(--tds-btn-icon-secondary-color-active);
+}
 button.secondary.disabled, button.secondary:disabled {
   cursor: not-allowed;
   background: var(--tds-btn-secondary-background-disabled);
@@ -421,6 +438,12 @@ button.ghost:active, button.ghost.active {
   color: var(--tds-btn-ghost-color-active);
   outline-color: var(--tds-btn-ghost-outline-color-active);
 }
+button.ghost:active:not(.disabled) ::slotted([slot=icon]), button.ghost.active:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-ghost-fill-active);
+  color: var(--tds-btn-icon-ghost-fill-active);
+  fill: var(--tds-btn-icon-ghost-color-active);
+  color: var(--tds-btn-icon-ghost-color-active);
+}
 button.ghost.disabled, button.ghost:disabled {
   cursor: not-allowed;
   background: var(--tds-btn-ghost-background-disabled);
@@ -474,6 +497,12 @@ button.danger:active, button.danger.active {
   color: var(--tds-btn-danger-color-active);
   outline-color: var(--tds-btn-danger-outline-color-active);
 }
+button.danger:active:not(.disabled) ::slotted([slot=icon]), button.danger.active:not(.disabled) ::slotted([slot=icon]) {
+  fill: var(--tds-btn-icon-danger-fill-active);
+  color: var(--tds-btn-icon-danger-fill-active);
+  fill: var(--tds-btn-icon-danger-color-active);
+  color: var(--tds-btn-icon-danger-color-active);
+}
 button.danger.disabled, button.danger:disabled {
   cursor: not-allowed;
   background: var(--tds-btn-danger-background-disabled);
@@ -498,10 +527,10 @@ button.danger.disabled, button.danger:disabled {
   height: var(--tds-spacing-element-16);
 }
 
-:host(tds-button[disabled]) {
+:host(tds-button[disabled=true]) {
   pointer-events: none;
 }
-:host(tds-button[disabled]) ::slotted([slot=icon]) {
+:host(tds-button[disabled=true]) ::slotted([slot=icon]) {
   pointer-events: none;
 }
 
@@ -510,31 +539,21 @@ button.danger.disabled, button.danger:disabled {
   justify-content: center;
 }
 
-:host(tds-button[only-icon]) .sm {
-  padding: 11px;
-}
-:host(tds-button[only-icon]) .md {
-  padding: 13px;
-}
-:host(tds-button[only-icon]) .lg {
-  padding: 17px;
-}
-
-:host(tds-button:not([only-icon])) {
+tds-button :not(.only-icon) {
   display: inline-flex;
   align-items: center;
 }
-:host(tds-button:not([only-icon])) .sm ::slotted([slot=icon]) {
+tds-button :not(.only-icon).sm ::slotted([slot=icon]) {
   margin-left: var(--tds-spacing-element-12);
   width: var(--tds-spacing-element-16);
   height: var(--tds-spacing-element-16);
 }
-:host(tds-button:not([only-icon])) .md ::slotted([slot=icon]) {
+tds-button :not(.only-icon).md ::slotted([slot=icon]) {
   margin-left: var(--tds-spacing-element-16);
   width: var(--tds-spacing-element-20);
   height: var(--tds-spacing-element-20);
 }
-:host(tds-button:not([only-icon])) .lg ::slotted([slot=icon]) {
+tds-button :not(.only-icon).lg ::slotted([slot=icon]) {
   margin-left: var(--tds-spacing-element-20);
   width: var(--tds-spacing-element-20);
   height: var(--tds-spacing-element-20);

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

@@ -1,36 +1,43 @@
 import { h, Host } from '@stencil/core';
 import { hasSlot } from '../../utils/utils';
 /**
+ * @slot label - Slot for the text injection. Serves as alternative to text prop.
  * @slot icon - Slot used to display an Icon in the Button.
  */
 export class TdsButton {
   constructor() {
     this.text = undefined;
-    this.type = 'primary';
+    this.type = 'button';
+    this.variant = 'primary';
     this.size = 'lg';
     this.disabled = false;
     this.fullbleed = false;
     this.modeVariant = null;
     this.onlyIcon = false;
   }
-  connectedCallback() {
-    if (!this.text) {
+  render() {
+    const hasLabelSlot = hasSlot('label', this.host);
+    const hasIconSlot = hasSlot('icon', this.host);
+    if (!this.text && !hasLabelSlot) {
       this.onlyIcon = true;
-      this.host.setAttribute('only-icon', '');
     }
-  }
-  render() {
-    const usesIconSlot = hasSlot('icon', this.host);
-    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' : ''}
-            ${usesIconSlot ? 'icon' : ''}
-            ${this.onlyIcon ? 'only-icon' : ''}
-            ` }, this.text, h("slot", { name: "icon" }))));
+    return (h(Host, { class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { type: this.type, disabled: this.disabled, class: {
+        'primary': this.variant === 'primary',
+        'secondary': this.variant === 'secondary',
+        'ghost': this.variant === 'ghost',
+        'danger': this.variant === 'danger',
+        'lg': this.size === 'lg',
+        'md': this.size === 'md',
+        'sm': this.size === 'sm',
+        'xs': this.size === 'xs',
+        'disabled': this.disabled,
+        'fullbleed': this.fullbleed,
+        'icon': hasIconSlot,
+        'only-icon': this.onlyIcon,
+      } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { name: "label" }), hasIconSlot && h("slot", { name: "icon" }))));
   }
   static get is() { return "tds-button"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["button.scss"]
@@ -61,6 +68,24 @@ export class TdsButton {
         "reflect": false
       },
       "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'button' | 'submit' | 'reset'",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Button's type"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'button'"
+      },
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -72,9 +97,9 @@ export class TdsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Type of Button"
+          "text": "Variation of Button's design"
         },
-        "attribute": "type",
+        "attribute": "variant",
         "reflect": false,
         "defaultValue": "'primary'"
       },
@@ -90,7 +115,7 @@ export class TdsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Size of a Button"
         },
         "attribute": "size",
         "reflect": false,

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

@@ -32,9 +32,9 @@ export default {
         defaultValue: { summary: 'Inherit from parent' },
       },
     },
-    btnType: {
-      name: 'Type',
-      description: 'Four different Button types to help the user to distinguish the level of importance of the task they represent.',
+    variant: {
+      name: 'Variant',
+      description: 'Four different Button variants to help the user to distinguish the level of importance of the task they represent.',
       control: {
         type: 'radio',
       },
@@ -43,6 +43,17 @@ export default {
         defaultValue: { summary: 'primary' },
       },
     },
+    type: {
+      name: 'Type',
+      description: 'Native types of button',
+      control: {
+        type: 'radio',
+      },
+      options: ['Button', 'Submit', 'Reset'],
+      table: {
+        defaultValue: { summary: 'button' },
+      },
+    },
     size: {
       name: 'Size',
       description: 'Sets the size of the Button.',
@@ -106,7 +117,8 @@ export default {
   },
   args: {
     modeVariant: 'Inherit from parent',
-    btnType: 'Primary',
+    type: 'Button',
+    variant: 'Primary',
     size: 'Large',
     text: 'Button',
     fullbleed: false,
@@ -115,8 +127,8 @@ export default {
     disabled: false,
   },
 };
-const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', fullbleed, onlyIcon, icon, disabled, }) => {
-  const btnTypeLookUp = {
+const WebComponentTemplate = ({ modeVariant, type, variant, size, text = 'Button', fullbleed, onlyIcon, icon, disabled, }) => {
+  const variantLookUp = {
     Primary: 'primary',
     Secondary: 'secondary',
     Ghost: 'ghost',
@@ -132,6 +144,11 @@ const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', ful
     Primary: 'primary',
     Secondary: 'secondary',
   };
+  const typeLookup = {
+    Button: 'button',
+    Submit: 'submit',
+    Reset: 'reset',
+  };
   return formatHtmlPreview(`
     <style>
     /* demo-wrapper is for demonstration purposes only*/
@@ -142,7 +159,8 @@ const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', ful
 
   <div class="demo-wrapper">
     <tds-button
-      type="${btnTypeLookUp[btnType]}"
+      type='${typeLookup[type]}'
+      variant="${variantLookUp[variant]}"
       size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
       ${!onlyIcon ? `text="${text}"` : ''}
       ${modeVariant !== 'Inherit from parent'
@@ -153,7 +171,7 @@ const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', ful
     ? `
             <tds-icon slot="icon" class='tds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></tds-icon>
             `
-    : ''}
+    : ''}        
     </tds-button>
   </div>
   <script>

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

@@ -50,6 +50,9 @@
 .card .header-subheader slot[name=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);

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

@@ -25,7 +25,7 @@ export class TdsCard {
       const usesBodySlot = hasSlot('body', this.host);
       const usesBodyImageSlot = hasSlot('body-image', this.host);
       const usesBottomSlot = hasSlot('bottom', this.host);
-      return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: `card-body-img`, src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesBottomSlot && h("slot", { name: `bottom` })));
+      return (h("div", null, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesBottomSlot && h("slot", { name: `bottom` })));
     };
     this.modeVariant = null;
     this.imagePlacement = 'below-header';

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

@@ -1,5 +1,6 @@
 import readme from './readme.md';
 import CardPlaceholder from '../../stories/assets/image/card-placeholder.png';
+import CardBodyImage from '../../stories/assets/image/card-img.png';
 import { formatHtmlPreview } from '../../utils/utils';
 import { ComponentsFolder } from '../../utils/constants';
 export default {
@@ -133,7 +134,7 @@ const Template = ({ modeVariant, header, subheader, thumbnail, imagePlacement, b
     ${header ? `header="${header}"` : ''}
     image-placement="${imagePlacement.toLowerCase()}-header"
     ${subheader ? `subheader="${subheader}"` : ''}
-    ${bodyImg ? `body-img="${CardPlaceholder}"` : ''}
+    ${bodyImg ? `body-img="${CardBodyImage}"` : ''}
     ${clickable ? 'clickable' : ''}
     ${bodyDivider ? 'body-divider' : ''}
     >

package/dist/collection/components/chip/chip.js

@@ -3,7 +3,7 @@ import { generateUniqueId, hasSlot } from '../../utils/utils';
 /**
  * @slot prefix - Slot for the prefix icon.
  * @slot label - Slot for the label text.
- * @slot suffix- Slot for the suffix icon.
+ * @slot suffix - Slot for the suffix icon.
  */
 export class TdsChip {
   constructor() {
@@ -49,7 +49,7 @@ export class TdsChip {
         'lg': this.size === 'lg',
         'prefix': hasPrefixSlot,
         'suffix': hasSuffixSlot,
-      } }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { htmlFor: this.chipId }, hasPrefixSlot && h("slot", { name: "prefix" }), hasLabelSlot && h("slot", { name: "label" }), hasSuffixSlot && h("slot", { name: "suffix" }))))));
+      } }, h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), h("label", { onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { name: "prefix" }), hasLabelSlot && h("slot", { name: "label" }), hasSuffixSlot && h("slot", { name: "suffix" }))))));
   }
   static get is() { return "tds-chip"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/datetime/datetime.js

@@ -22,6 +22,8 @@ export class TdsDatetime {
     };
     this.type = 'datetime-local';
     this.value = '';
+    this.min = undefined;
+    this.max = undefined;
     this.defaultValue = 'none';
     this.disabled = false;
     this.size = 'lg';
@@ -85,7 +87,7 @@ export class TdsDatetime {
         ? `tds-form-datetime-${this.state}`
         : ''}
         ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
-        ` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), h("div", { class: "tds-datetime-helper" }, this.helper && (h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), h("div", { class: "tds-datetime-helper" }, this.helper && (h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
   }
   static get is() { return "tds-datetime"; }
   static get encapsulation() { return "scoped"; }
@@ -113,7 +115,7 @@ export class TdsDatetime {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Which input type, text, password or similar"
+          "text": "Sets input type"
         },
         "attribute": "type",
         "reflect": true,
@@ -137,6 +139,40 @@ export class TdsDatetime {
         "reflect": true,
         "defaultValue": "''"
       },
+      "min": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+        },
+        "attribute": "max",
+        "reflect": false
+      },
       "defaultValue": {
         "type": "string",
         "mutable": false,

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

@@ -64,7 +64,7 @@ export default {
     },
     defaultValue: {
       name: 'Default value',
-      description: 'Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
+      description: 'Sets max value. Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM.',
       control: {
         type: 'radio',
       },
@@ -73,6 +73,26 @@ export default {
         defaultValue: { summary: 'none' },
       },
     },
+    minValue: {
+      description: 'Sets min value. Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
+      name: 'Min value',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
+    maxValue: {
+      description: 'Example for different types: datetime="2023-01-31T00:00" date="2023-01-01" time="15:00"',
+      name: 'Max value',
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: undefined },
+      },
+    },
     noMinWidth: {
       name: 'No minimum width',
       description: 'Enables component to shrink below 208px which is the default width.',
@@ -114,13 +134,15 @@ export default {
     type: 'Datetime',
     size: 'Large',
     defaultValue: 'None',
+    minValue: '',
+    maxValue: '',
     noMinWidth: false,
     label: 'Label text',
     helper: 'Helper text',
     disabled: false,
   },
 };
-const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinWidth, label, helper, disabled, }) => {
+const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, minValue, maxValue, noMinWidth, label, helper, disabled, }) => {
   const typeLookup = {
     Datetime: 'datetime-local',
     Date: 'date',
@@ -166,7 +188,9 @@ const datetimeTemplate = ({ modeVariant, state, type, size, defaultValue, noMinW
       id="datetime"
       ${defaultValue !== 'None' ? `default-value="${getDefaultValue(defaultValue, type)}"` : ''}
       ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      type="${typeLookup[type]}"
+      type="${typeLookup[type]}"      
+      ${minValue ? `min=${minValue}` : ''}
+      ${maxValue ? `min=${maxValue}` : ''}
       size="${sizeLookup[size]}"
       state="${stateLookup[state]}"
       ${disabled ? 'disabled' : ''}

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

@@ -1,7 +1,10 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the option label text.
+ */
 export class TdsDropdownOption {
   constructor() {
-    this.connectedCallback = () => {
+    this.componentWillRender = () => {
       this.parentElement =
         this.host.parentElement.tagName === 'TDS-DROPDOWN'
           ? this.host.parentElement