@scania/tegel 0.0.9 → 0.0.10

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

@@ -229,6 +229,9 @@ button.sm {
   padding: var(--tds-spacing-element-12);
   height: 40px;
 }
+button.sm.icon {
+  padding: 10px var(--tds-spacing-element-12);
+}
 button.sm.only-icon {
   padding: 11px;
 }
@@ -240,6 +243,9 @@ button.md {
   padding: var(--tds-spacing-element-16);
   height: 48px;
 }
+button.md.icon {
+  padding: 14px var(--tds-spacing-element-16);
+}
 button.md.only-icon {
   padding: 13px;
 }
@@ -251,6 +257,9 @@ button.lg {
   padding: var(--tds-spacing-element-20);
   height: 56px;
 }
+button.lg.icon {
+  padding: 18px var(--tds-spacing-element-20);
+}
 button.lg.only-icon {
   padding: 17px;
 }
@@ -489,6 +498,13 @@ button.danger.disabled, button.danger:disabled {
   height: var(--tds-spacing-element-16);
 }
 
+:host(tds-button[disabled]) {
+  pointer-events: none;
+}
+:host(tds-button[disabled]) ::slotted([slot=icon]) {
+  pointer-events: none;
+}
+
 :host(tds-button[fullbleed]) {
   width: 100%;
   justify-content: center;

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

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
-import { disableClickOnElement } from '../../utils/utils';
+import { hasSlot } from '../../utils/utils';
+/**
+ * @slot icon - Slot used to display an Icon in the Button.
+ */
 export class TdsButton {
   constructor() {
     this.text = undefined;
@@ -9,27 +12,20 @@ export class TdsButton {
     this.fullbleed = false;
     this.modeVariant = null;
     this.onlyIcon = false;
-    this.slotElement = undefined;
   }
   connectedCallback() {
-    var _a;
-    this.slotElement = this.host.children ? this.host.children[0] : null;
-    if (this.disabled) {
-      disableClickOnElement(this.host);
-      if (((_a = this.slotElement) === null || _a === void 0 ? void 0 : _a.slot) === 'icon') {
-        disableClickOnElement(this.slotElement);
-      }
-    }
     if (!this.text) {
       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" }))));
   }
@@ -158,8 +154,7 @@ export class TdsButton {
   }
   static get states() {
     return {
-      "onlyIcon": {},
-      "slotElement": {}
+      "onlyIcon": {}
     };
   }
   static get elementRef() { return "host"; }

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

@@ -0,0 +1,167 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Button`,
+  parameters: {
+    notes: readme,
+    layout: 'padded',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1574%3A72148&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' },
+      },
+    },
+    btnType: {
+      name: 'Type',
+      description: 'Four different Button types to help the user to distinguish the level of importance of the task they represent.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
+      table: {
+        defaultValue: { summary: 'primary' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the Button.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    text: {
+      name: 'Text',
+      description: 'Sets the text to be displayed on the Button.',
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    fullbleed: {
+      name: 'Fullbleed',
+      description: 'Sets a fluid width on the Button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'onlyIcon', truthy: false },
+    },
+    onlyIcon: {
+      name: 'Only Icon',
+      description: 'Displays only the icon and excludes any text from the Button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Sets icon to be displayed on the Button. Choose "none" to exclude the icon.',
+      control: {
+        type: 'select',
+      },
+      options: ['none', ...iconsNames],
+      if: { arg: 'size', neq: 'Extra small' },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    btnType: 'Primary',
+    size: 'Large',
+    text: 'Button',
+    fullbleed: false,
+    onlyIcon: false,
+    icon: 'none',
+    disabled: false,
+  },
+};
+const WebComponentTemplate = ({ modeVariant, btnType, size, text = 'Button', fullbleed, onlyIcon, icon, disabled, }) => {
+  const btnTypeLookUp = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Ghost: 'ghost',
+    Danger: 'danger',
+  };
+  const sizeLookUp = {
+    'Large': 'lg',
+    'Medium': 'md',
+    'Small': 'sm',
+    'Extra small': 'xs',
+  };
+  const modeVariantLookup = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper{
+      width: 100%;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+    <tds-button
+      type="${btnTypeLookUp[btnType]}"
+      size="${sizeLookUp[size]}" ${disabled ? 'disabled' : ''} ${fullbleed ? 'fullbleed' : ''}
+      ${!onlyIcon ? `text="${text}"` : ''}
+      ${modeVariant !== 'Inherit from parent'
+    ? `mode-variant="${modeVariantLookup[modeVariant]}"`
+    : ''}
+    >
+        ${onlyIcon || (icon && icon !== 'none')
+    ? `
+            <tds-icon slot="icon" class='tds-btn-icon ' size='${sizeLookUp[size] === 'sm' ? '16px' : '20px'}' name='${icon}'></tds-icon>
+            `
+    : ''}
+    </tds-button>
+  </div>
+  <script>
+        document.querySelector('tds-button').addEventListener('click', (event) => {
+          console.log(event)
+        })
+  </script>
+  `);
+};
+/** Button as a web component */
+export const Default = WebComponentTemplate.bind({});

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

@@ -13,42 +13,43 @@
   box-shadow: var(--tds-card-box-hover);
   cursor: pointer;
 }
-.card .card-top {
+.card .card-header {
   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 {
+.card .card-header slot[name=thumbnail]::slotted(*) {
   width: 36px;
   height: 36px;
   border-radius: 100%;
+  margin-right: 16px;
 }
-.card .card-top .card-top-header {
+.card .card-header .card-top-header {
   padding-left: 16px;
   display: flex;
   flex-direction: column;
-  row-gap: 4px;
 }
-.card .card-top .card-top-header.no-header-img {
+.card .card-header .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 {
+.card .card-header.below {
   padding-top: 16px;
 }
-.card .card-header {
+.card .header-subheader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.card .header-subheader .header,
+.card .header-subheader slot[name=header] {
   color: var(--tds-card-headline);
 }
-.card .card-subheader {
+.card .header-subheader .subheader,
+.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);
@@ -58,7 +59,7 @@
   display: block;
   word-wrap: break-word;
 }
-.card slot[name=card-body]::slotted(*) {
+.card slot[name=body]::slotted(*) {
   font: var(--tds-detail-03);
   letter-spacing: var(--tds-detail-03-ls);
   color: var(--tds-card-body-color);
@@ -67,7 +68,7 @@
   margin-top: 16px;
   max-width: 336px;
 }
-.card slot[name=card-bottom]::slotted(*) {
+.card slot[name=bottom]::slotted(*) {
   display: flex;
   padding: 16px;
   color: var(--tds-card-icon-color);
@@ -78,7 +79,7 @@ button {
   text-align: left;
   padding: 0;
 }
-button:focus {
+button:focus-visible {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }

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

@@ -1,4 +1,13 @@
 import { h, Host } from '@stencil/core';
+import { generateUniqueId, hasSlot } from '../../utils/utils';
+/**
+ * @slot header - Slot for the Card header.
+ * @slot subheader - Slot for the Card subheader.
+ * @slot thumbnail - Slot for the Card thumbnail.
+ * @slot body - Slot for the body section of the Card.
+ * @slot body-image - Slot for the body section of the Card, used for image.
+ * @slot bottom - Slot for the bottom section of the Card.
+ */
 export class TdsCard {
   constructor() {
     this.handleClick = () => {
@@ -6,39 +15,34 @@ export class TdsCard {
         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.getCardHeader = () => {
+      const usesHeaderSlot = hasSlot('header', this.host);
+      const usesSubheaderSlot = hasSlot('subheader', this.host);
+      const usesThumbnailSlot = hasSlot('thumbnail', this.host);
+      return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader" }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
+    };
+    this.getCardContent = () => {
+      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` })));
+    };
     this.modeVariant = null;
-    this.headerPlacement = 'above';
+    this.imagePlacement = 'below-header';
     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"]');
+    this.cardId = generateUniqueId();
   }
   render() {
-    return (h(Host, { class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
+    return (h(Host, { class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}`, onClick: () => {
         if (this.clickable) {
           this.handleClick();
         }
-      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
+      } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.imagePlacement}` }, this.getCardContent()))));
   }
   static get is() { return "tds-card"; }
   static get encapsulation() { return "shadow"; }
@@ -72,12 +76,12 @@ export class TdsCard {
         "reflect": false,
         "defaultValue": "null"
       },
-      "headerPlacement": {
+      "imagePlacement": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'above' | 'below'",
-          "resolved": "\"above\" | \"below\"",
+          "original": "'above-header' | 'below-header'",
+          "resolved": "\"above-header\" | \"below-header\"",
           "references": {}
         },
         "required": false,
@@ -86,9 +90,9 @@ export class TdsCard {
           "tags": [],
           "text": "Placement of the header"
         },
-        "attribute": "header-placement",
+        "attribute": "image-placement",
         "reflect": false,
-        "defaultValue": "'above'"
+        "defaultValue": "'below-header'"
       },
       "header": {
         "type": "string",
@@ -124,40 +128,6 @@ export class TdsCard {
         "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,
@@ -244,16 +214,10 @@ export class TdsCard {
         },
         "attribute": "card-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       }
     };
   }
-  static get states() {
-    return {
-      "hasCardBottomSlot": {},
-      "hasCardBodySlot": {}
-    };
-  }
   static get events() {
     return [{
         "method": "tdsClick",
@@ -272,5 +236,5 @@ export class TdsCard {
         }
       }];
   }
-  static get elementRef() { return "hostElement"; }
+  static get elementRef() { return "host"; }
 }

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({});