@scania/tegel 0.0.9 → 0.0.11

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

@@ -0,0 +1,36 @@
+import itemReadme from './breadcrumb/readme.md';
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Breadcrumbs`,
+  parameters: {
+    notes: { Breadcrumbs: readme, Breadcrumb: itemReadme },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+};
+const Template = () => formatHtmlPreview(`   
+      <tds-breadcrumbs>
+        <tds-breadcrumb>
+          <a href="#">Page 1</a>
+        </tds-breadcrumb>
+        <tds-breadcrumb>
+          <a href="#">Page 2</a>
+        </tds-breadcrumb>
+        <tds-breadcrumb current>
+          <a href="#">Page 3</a>
+        </tds-breadcrumb>
+      </tds-breadcrumbs>
+      `);
+export const Default = Template.bind({});

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,36 +498,33 @@ button.danger.disabled, button.danger:disabled {
   height: var(--tds-spacing-element-16);
 }
 
+:host(tds-button[disabled=true]) {
+  pointer-events: none;
+}
+:host(tds-button[disabled=true]) ::slotted([slot=icon]) {
+  pointer-events: none;
+}
+
 :host(tds-button[fullbleed]) {
   width: 100%;
   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,40 +1,46 @@
 import { h, Host } from '@stencil/core';
-import { disableClickOnElement } from '../../utils/utils';
+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;
-    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() {
-    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" }))));
+    const hasLabelSlot = hasSlot('label', this.host);
+    const hasIconSlot = hasSlot('icon', this.host);
+    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"]
@@ -65,6 +71,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": {
@@ -76,9 +100,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'"
       },
@@ -94,7 +118,7 @@ export class TdsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Size of a Button"
         },
         "attribute": "size",
         "reflect": false,
@@ -158,8 +182,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,185 @@
+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' },
+      },
+    },
+    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',
+      },
+      options: ['Primary', 'Secondary', 'Ghost', 'Danger'],
+      table: {
+        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.',
+      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',
+    type: 'Button',
+    variant: 'Primary',
+    size: 'Large',
+    text: 'Button',
+    fullbleed: false,
+    onlyIcon: false,
+    icon: 'none',
+    disabled: false,
+  },
+};
+const WebComponentTemplate = ({ modeVariant, type, variant, size, text = 'Button', fullbleed, onlyIcon, icon, disabled, }) => {
+  const variantLookUp = {
+    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',
+  };
+  const typeLookup = {
+    Button: 'button',
+    Submit: 'submit',
+    Reset: 'reset',
+  };
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper{
+      width: 100%;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+    <tds-button
+      type='${typeLookup[type]}'
+      variant="${variantLookUp[variant]}"
+      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,37 +13,41 @@
   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 {
@@ -58,7 +62,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 +71,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 +82,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"; }
 }