@scania/tegel 0.0.10 → 0.0.11

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

@@ -1,12 +1,14 @@
 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;
@@ -20,17 +22,25 @@ export class TdsButton {
     }
   }
   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" }))));
+    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"]
@@ -61,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": {
@@ -72,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'"
       },
@@ -90,7 +118,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() {

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

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

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

@@ -1,5 +1,8 @@
 import { Host, h } from '@stencil/core';
 import { appendChildElement, appendHiddenInput, findNextFocusableItem, findPreviousFocusableItem, } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For dropdown option elements.
+ */
 export class TdsDropdown {
   constructor() {
     this.connectedCallback = () => {
@@ -17,18 +20,22 @@ export class TdsDropdown {
                 ? [...this.selection, { value: element.value, label: element.textContent }]
                 : [{ value: element.value, label: element.textContent }];
             }
+            else {
+              element.setSelected(false);
+            }
           });
         }
         else {
           if (this.defaultValue === element.value) {
-            this.reset();
             element.setSelected(true);
             this.selection = [{ value: element.value, label: element.textContent }];
           }
+          else {
+            element.setSelected(false);
+          }
         }
         return element;
       });
-      this.handleChange();
     };
     this.getOpenDirection = () => {
       var _a, _b, _c, _d, _e;
@@ -53,14 +60,14 @@ export class TdsDropdown {
     this.handleFilter = (event) => {
       this.tdsInput.emit(event);
       const query = event.target.value.toLowerCase();
-      /* Check if the query is empty, and if so show all options */
+      /* Check if the query is empty, and if so, show all options */
       if (query === '') {
         this.children = this.children.map((element) => {
           element.removeAttribute('hidden');
           return element;
         });
         this.filterResult = null;
-        /* Hide the options that does not match the query */
+        /* Hide the options that do not match the query */
       }
       else {
         this.filterResult = this.children.filter((element) => {
@@ -168,7 +175,7 @@ export class TdsDropdown {
       return;
     }
     if (event.key === 'ArrowDown') {
-      /* Get the index of the currently focus index, if there is no
+      /* Get the index of the current focus index, if there is no
       nextElementSibling return the index for the first child in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.nextElementSibling)
@@ -177,7 +184,7 @@ export class TdsDropdown {
       this.children[elementIndex].focus();
     }
     else if (event.key === 'ArrowUp') {
-      /* Get the index of the currently focus index, if there is no
+      /* Get the index of the current focus index, if there is no
       previousElementSibling return the index for the first last in our Dropdown.  */
       const startingIndex = activeElement.nextElementSibling
         ? this.children.findIndex((element) => element === activeElement.previousElementSibling)
@@ -189,7 +196,8 @@ export class TdsDropdown {
       this.open = false;
     }
   }
-  // If the Dropdown gets closed this sets the value of the drodpown to the current selection labels or null if no selection is made.
+  // If the Dropdown gets closed,
+  // this sets the value of the dropdown to the current selection labels or null if no selection is made.
   handleOpenState() {
     var _a, _b;
     if (this.filter && this.multiselect) {

package/dist/collection/components/footer/footer-group/footer-group.js

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For footer items.
+ */
 export class TdsFooterGroup {
   constructor() {
     /** If the group is placed in the main part of the Footer,

package/dist/collection/components/footer/footer-item/footer-item.js

@@ -1,4 +1,7 @@
 import { h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For slotting a link, button, or similar.
+ */
 export class TdsFooterItem {
   constructor() {
     this.parentIsTopPart = false;

package/dist/collection/components/footer/footer.css

@@ -2,6 +2,7 @@
   display: block;
 }
 :host slot[name=top]::slotted(*) {
+  box-sizing: border-box;
   background-color: var(--tds-footer-top-background);
   padding: 40px;
   display: grid;

package/dist/collection/components/header/core-header-item/core-header-item.js

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For content.
+ */
 export class TdsCoreHeaderItem {
   render() {
     return (h(Host, null, h("div", { class: "item" }, h("slot", null))));

package/dist/collection/components/header/header-brand-symbol/header-brand-symbol.js

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link.
+ */
 export class TdsHeaderBrandSymbol {
   render() {
     return (h(Host, null, h("tds-header-item", null, h("slot", null))));

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

@@ -1,6 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
 /**
+ * @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
  * @slot icon - Slot for an Icon in the dropdown button.
  * @slot label - Slot for a label text in the dropdown button.
  */

package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.css

@@ -5,7 +5,7 @@
   padding: 0;
   margin: 0;
   list-style: none;
-  border-radius: none;
+  border-radius: unset;
   background-color: var(--tds-header-app-launcher-menu-bg);
 }
 @media all and (max-width: 384px) {
@@ -14,6 +14,6 @@
   }
 }
 
-:host([type=lg]) {
+:host([size=lg]) {
   width: 320px;
 }

package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.js

@@ -1,19 +1,22 @@
 import { Host, h } from '@stencil/core';
 import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a dropdown list item.
+ */
 export class TdsHeaderDropdownList {
   constructor() {
     // A Map to store the slots and their associated slotchange listeners.
     this.slotListeners = new Map();
-    this.type = 'md';
+    this.size = 'md';
     this.headingElement = undefined;
   }
   componentWillLoad() {
     const { children } = this.host;
-    // Set the type prop for each child, if they have such a property
+    // Set the size prop for each child, if they have such a property
     for (let i = 0; i < children.length; i++) {
       const child = children[i];
-      if ('type' in child) {
-        child.type = this.type;
+      if ('size' in child) {
+        child.size = this.size;
       }
     }
     let listRoot = this.host;
@@ -84,7 +87,7 @@ export class TdsHeaderDropdownList {
   }
   static get properties() {
     return {
-      "type": {
+      "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -96,9 +99,9 @@ export class TdsHeaderDropdownList {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The size of the component."
         },
-        "attribute": "type",
+        "attribute": "size",
         "reflect": true,
         "defaultValue": "'md'"
       }

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css

@@ -46,11 +46,11 @@
   border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
 }
 
-:host([type=lg]) {
+:host([size=lg]) {
   height: var(--tds-header-height);
 }
-:host([type=lg]) ::slotted(a),
-:host([type=lg]) ::slotted(button) {
+:host([size=lg]) ::slotted(a),
+:host([size=lg]) ::slotted(button) {
   padding: 0 16px;
   color: var(--tds-header-app-launcher-item-color);
 }

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.js

@@ -1,8 +1,11 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
 export class TdsHeaderDropdownListItem {
   constructor() {
     this.selected = false;
-    this.type = 'md';
+    this.size = 'md';
   }
   render() {
     return (h(Host, null, h("div", { class: {
@@ -42,7 +45,7 @@ export class TdsHeaderDropdownListItem {
         "reflect": false,
         "defaultValue": "false"
       },
-      "type": {
+      "size": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -54,9 +57,9 @@ export class TdsHeaderDropdownListItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The type of the list."
+          "text": "The size of the component."
         },
-        "attribute": "type",
+        "attribute": "size",
         "reflect": true,
         "defaultValue": "'md'"
       }

package/dist/collection/components/header/header-item/header-item.js

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { dfs } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
 export class TdsHeaderItem {
   constructor() {
     this.active = false;

package/dist/collection/components/header/header-launcher/header-launcher.js

@@ -1,5 +1,8 @@
 import { Host, h } from '@stencil/core';
 import { generateUniqueId, inheritAriaAttributes } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a launcher list (or grid) element.
+ */
 export class TdsHeaderLauncher {
   constructor() {
     this.uuid = generateUniqueId();

package/dist/collection/components/header/header-launcher-grid/header-launcher-grid.js

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a grid item element.
+ */
 export class TdsHeaderLauncherGrid {
   constructor() {
     this.headingElement = undefined;

package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.js

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
 export class TdsHeaderLauncherGridItem {
   render() {
     return (h(Host, { role: "listitem" }, h("slot", null)));

package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.js

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the title text.
+ */
 export class TdsHeaderLauncherGridTitle {
   constructor() {
     this.uuid = generateUniqueId();

package/dist/collection/components/header/header-launcher-list/header-launcher-list.js

@@ -1,11 +1,14 @@
 import { Host, h } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For list items.
+ */
 export class TdsHeaderLauncherList {
   constructor() {
     this.uuid = generateUniqueId();
   }
   render() {
-    return (h(Host, null, h("tds-header-dropdown-list", { type: "lg" }, h("slot", null))));
+    return (h(Host, null, h("tds-header-dropdown-list", { size: "lg" }, h("slot", null))));
   }
   static get is() { return "tds-header-launcher-list"; }
 }

package/dist/collection/components/header/header-launcher-list-item/header-launcher-list-item.js

@@ -1,7 +1,10 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
 export class TdsHeaderLauncherListItem {
   render() {
-    return (h(Host, null, h("tds-header-dropdown-list-item", { type: "lg" }, h("slot", null))));
+    return (h(Host, null, h("tds-header-dropdown-list-item", { size: "lg" }, h("slot", null))));
   }
   static get is() { return "tds-header-launcher-list-item"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.js

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { generateUniqueId } from '../../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the title text.
+ */
 export class TdsHeaderLauncherListTitle {
   constructor() {
     this.uuid = generateUniqueId();

package/dist/collection/components/header/header-title/header-title.js

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the header title text.
+ */
 export class TdsHeaderTitle {
   render() {
     return (h(Host, null, h("div", { class: "component" }, h("slot", null))));

package/dist/collection/components/header/header.js

@@ -1,6 +1,7 @@
 import { h, Host } from '@stencil/core';
 import { inheritAriaAttributes, updateListChildrenRoles } from '../../utils/utils';
 /**
+ * @slot <default> - <b>Unnamed slot.</b> Slot for the left-aligned content consisting of buttons, dropdowns, links, etc.
  * @slot hamburger - Slot for the hamburger button for opening the mobile menu.
  * @slot title - Slot for the title.
  * @slot end - Slot for the end (right side) of the header.

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

@@ -7,6 +7,7 @@ import readmeDropdown from './header-dropdown/readme.md';
 import readmeDropdownList from './header-dropdown-list/readme.md';
 import readmeDropdownListItem from './header-dropdown-list-item/readme.md';
 import readmeDropdownListUser from './header-dropdown-list-user/readme.md';
+import readmeBrandSymbol from './header-brand-symbol/readme.md';
 import readmeLauncher from './header-launcher/readme.md';
 import { ComponentsFolder } from '../../utils/constants';
 export default {
@@ -22,6 +23,7 @@ export default {
       'Header dropdown list item': readmeDropdownListItem,
       'Header dropdown list user': readmeDropdownListUser,
       'Header launcher': readmeLauncher,
+      'Header brand symbol': readmeBrandSymbol,
     },
     layout: 'fullscreen',
     docs: {

package/dist/collection/components/link/link.js

@@ -1,4 +1,7 @@
 import { h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link element. Eg. <code>&lt;a><a></code>.
+ */
 export class TdsLink {
   constructor() {
     this.disabled = false;
@@ -8,7 +11,7 @@ export class TdsLink {
     this.host.children[0].classList.add('tds-link-component');
   }
   render() {
-    return (h("div", { class: `
+    return (h("span", { class: `        
           ${this.disabled ? 'disabled' : ''}
           ${!this.underline ? 'no-underline' : ''}
           ` }, h("slot", null)));

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

@@ -47,11 +47,13 @@ export default {
   },
 };
 const Template = ({ underline, disabled }) => formatHtmlPreview(`
-    <tds-link
+    <p class='tds-body-02'>The <tds-link
         ${disabled ? 'disabled' : ''}
         ${underline ? '' : 'underline="false"'}
         >
-        <a href="#">This is a link.</a>
-    </tds-link>
+        <a href="https://tegel.scania.com/home" target='_blank'>Tegel</a>
+    </tds-link> Design System is for digital products and services at Scania.
+     It enables an efficient development process and ensures a premium experience across all of Scania's digital touchpoints.    
+    </p>  
   `);
 export const Default = Template.bind({});