@scania/tegel 0.0.9 → 0.0.11

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-dropdown-list-user/header-dropdown-list-user.css

@@ -12,7 +12,7 @@
   border-bottom: 1px solid var(--tds-nav-dropdown-item-border-color);
 }
 :host img,
-:host slot[name=image]::slotted(*) {
+:host slot[name=thumbnail]::slotted(*) {
   width: 34px;
   border-radius: 100%;
 }

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

@@ -1,13 +1,17 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot thumbnail - Slot for the thumbnail.
+ * @slot header - Slot for the header.
+ */
 export class TdsHeaderDropdownListLgUser {
   constructor() {
     this.imgUrl = undefined;
     this.imgAlt = undefined;
-    this.heading = undefined;
-    this.subheading = undefined;
+    this.header = undefined;
+    this.subheader = undefined;
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { name: "image" }), h("div", { class: "user-content" }, h("div", { class: "header" }, this.heading, h("slot", { name: "heading" })), h("div", { class: "subheader" }, this.subheading, h("slot", { name: "subheading" }))))));
+    return (h(Host, { role: "listitem" }, h("div", { class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { name: "thumbanil" }), h("div", { class: "user-content" }, h("div", { class: "header" }, this.header, h("slot", { name: "header" })), h("div", { class: "subheader" }, this.subheader, h("slot", { name: "subheader" }))))));
   }
   static get is() { return "tds-header-dropdown-list-user"; }
   static get encapsulation() { return "shadow"; }
@@ -57,7 +61,7 @@ export class TdsHeaderDropdownListLgUser {
         "attribute": "img-alt",
         "reflect": false
       },
-      "heading": {
+      "header": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -69,12 +73,12 @@ export class TdsHeaderDropdownListLgUser {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Heading, usually the users first name and last name."
+          "text": "Header text, usually the users first name and last name."
         },
-        "attribute": "heading",
+        "attribute": "header",
         "reflect": false
       },
-      "subheading": {
+      "subheader": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -86,9 +90,9 @@ export class TdsHeaderDropdownListLgUser {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Subheading."
+          "text": "Subheader text."
         },
-        "attribute": "subheading",
+        "attribute": "subheader",
         "reflect": false
       }
     };

package/dist/collection/components/header/header-hamburger/header-hamburger.css

@@ -18,7 +18,6 @@
   :host tds-header-item {
     display: none;
   }
-
   :host([persistent]) tds-header-item {
     display: block;
   }

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,8 +1,11 @@
 import { Host, h } from '@stencil/core';
-import { inheritAriaAttributes } from '../../../utils/utils';
+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 = crypto.randomUUID();
+    this.uuid = generateUniqueId();
     this.open = false;
     this.buttonEl = undefined;
     this.hasListTypeMenu = false;

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,10 +1,14 @@
 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 = crypto.randomUUID();
+    this.uuid = generateUniqueId();
   }
   render() {
-    return (h(Host, null, h("h3", { class: "tds-header-launcher-grid-title", id: `tds-${this.uuid}` }, h("slot", null))));
+    return (h(Host, null, h("h3", { class: "tds-header-launcher-grid-title", id: `tds-header-launcher-grid-title-${this.uuid}` }, h("slot", null))));
   }
   static get is() { return "tds-header-launcher-grid-title"; }
   static get originalStyleUrls() {

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

@@ -1,10 +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 = crypto.randomUUID();
+    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,10 +1,14 @@
 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 = crypto.randomUUID();
+    this.uuid = generateUniqueId();
   }
   render() {
-    return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-${this.uuid}` }, h("slot", null))));
+    return (h(Host, null, h("h3", { class: "tds-header-launcher-list-title", id: `tds-header-launcher-${this.uuid}` }, h("slot", null))));
   }
   static get is() { return "tds-header-launcher-list-title"; }
   static get originalStyleUrls() {

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.css

@@ -45,7 +45,7 @@ nav .tds-header-middle-spacer {
 }
 @media screen and (min-width: 992px) {
   nav tds-header-dropdown,
-nav tds-header-item {
+  nav tds-header-item {
     display: block;
   }
 }

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

@@ -1,5 +1,11 @@
 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.
+ */
 export class TdsHeader {
   constructor() {
     const callback = (mutationsList) => {

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

@@ -0,0 +1,82 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import readmeHamburger from './header-hamburger/readme.md';
+import readmeTitle from './header-title/readme.md';
+import readmeItem from './header-item/readme.md';
+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 {
+  title: `${ComponentsFolder}/Header`,
+  parameters: {
+    notes: {
+      'Header': readme,
+      'Header hamburger': readmeHamburger,
+      'Header title': readmeTitle,
+      'Header item': readmeItem,
+      'Header dropdown': readmeDropdown,
+      'Header dropdown list': readmeDropdownList,
+      'Header dropdown list item': readmeDropdownListItem,
+      'Header dropdown list user': readmeDropdownListUser,
+      'Header launcher': readmeLauncher,
+      'Header brand symbol': readmeBrandSymbol,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {},
+  args: {},
+};
+const Template = () => formatHtmlPreview(`
+  <tds-header>
+    <tds-header-title>
+      Example: default
+    </tds-header-title>
+
+    <tds-header-launcher slot="end">
+      <tds-header-launcher-list-title>Cool apps</tds-header-launcher-list-title>
+      <tds-header-launcher-list>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Trucklyfe</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">HaulHub</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">WheelWizz</a>
+        </tds-header-launcher-list-item>
+      </tds-header-launcher-list>
+    </tds-header-launcher>
+
+
+    <tds-header-brand-symbol slot="end">
+      <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
+    </tds-header-brand-symbol>
+
+  </tds-header>
+  
+  <main class="tds-u-w-100 tds-u-p3" style="box-sizing: border-box;">
+    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
+  </main>
+  `);
+export const Default = Template.bind({});

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

@@ -0,0 +1,48 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from './iconsArray';
+import readme from './readme.md';
+export default {
+  title: 'Foundations',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9119%3A315952&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    icon: {
+      name: 'Icon name',
+      description: 'Select icon to display',
+      control: {
+        type: 'select',
+      },
+      options: iconsNames,
+    },
+    size: {
+      name: 'Size in pixels',
+      description: 'Set the size of the Icon',
+      control: {
+        type: 'select',
+      },
+      options: [16, 20, 24, 32],
+    },
+  },
+  args: {
+    size: 32,
+    icon: 'truck',
+  },
+};
+const IconTemplate = (args) => formatHtmlPreview(`
+  <tds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></tds-icon> 
+  `);
+export const Icons = IconTemplate.bind({});

package/dist/collection/components/link/link.css

@@ -1,41 +1,44 @@
-.tds-link-component {
+:host {
+  display: inline;
+}
+:host ::slotted(*) {
   all: unset;
   cursor: pointer;
   outline: none;
   color: var(--tds-link);
   text-decoration: underline;
 }
-.tds-link-component.active, .tds-link-component:active {
+:host ::slotted(*:focus-visible) {
+  color: var(--tds-link-focus);
+  text-decoration: none;
+  outline: 2px solid var(--tds-link-focus);
+  outline-offset: -2px;
+}
+:host ::slotted(*:active) {
   color: var(--tds-link);
   text-decoration: underline;
   text-decoration-color: var(--tds-link);
 }
-.tds-link-component:hover {
+:host ::slotted(*:hover) {
   color: var(--tds-link-hover);
   text-decoration: underline;
   text-decoration-color: var(--tds-link-hover);
 }
-.tds-link-component:visited {
+:host ::slotted(*:visited) {
   color: var(--tds-link-visited);
   text-decoration-color: var(--tds-link-visited);
 }
-.tds-link-component:focus {
-  color: var(--tds-link-focus);
-  text-decoration: none;
-  outline: 2px solid var(--tds-link-focus);
-  outline-offset: -2px;
-}
 
-.disabled .tds-link-component {
+.disabled ::slotted(*) {
   color: var(--tds-link-disabled);
   text-decoration-color: var(--tds-link-disabled);
   pointer-events: none;
 }
 
-.no-underline .tds-link-component {
+.no-underline ::slotted(*) {
   text-decoration: none;
 }
 
-.no-underline:hover .tds-link-component {
+.no-underline:hover ::slotted(*) {
   text-decoration: none;
 }

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,12 +11,13 @@ 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)));
   }
   static get is() { return "tds-link"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["link.scss"]

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

@@ -0,0 +1,59 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Link`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2147%3A99321&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    underline: {
+      name: 'Underline',
+      description: 'Adds an underline under the Link text.',
+      controls: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: true },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Link.',
+      controls: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    underline: true,
+    disabled: false,
+  },
+};
+const Template = ({ underline, disabled }) => formatHtmlPreview(`
+    <p class='tds-body-02'>The <tds-link
+        ${disabled ? 'disabled' : ''}
+        ${underline ? '' : 'underline="false"'}
+        >
+        <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({});