@scania/tegel 0.0.9 → 0.0.10

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-launcher/header-launcher.js

@@ -1,8 +1,8 @@
 import { Host, h } from '@stencil/core';
-import { inheritAriaAttributes } from '../../../utils/utils';
+import { generateUniqueId, inheritAriaAttributes } from '../../../utils/utils';
 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-title/header-launcher-grid-title.js

@@ -1,10 +1,11 @@
 import { h, Host } from '@stencil/core';
+import { generateUniqueId } from '../../../utils/utils';
 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,7 +1,8 @@
 import { Host, h } from '@stencil/core';
+import { generateUniqueId } from '../../../utils/utils';
 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))));

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

@@ -1,10 +1,11 @@
 import { h, Host } from '@stencil/core';
+import { generateUniqueId } from '../../../utils/utils';
 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.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,10 @@
 import { h, Host } from '@stencil/core';
 import { inheritAriaAttributes, updateListChildrenRoles } from '../../utils/utils';
+/**
+ * @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,80 @@
+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 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,
+    },
+    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

@@ -14,6 +14,7 @@ export class TdsLink {
           ` }, 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,57 @@
+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(`
+    <tds-link
+        ${disabled ? 'disabled' : ''}
+        ${underline ? '' : 'underline="false"'}
+        >
+        <a href="#">This is a link.</a>
+    </tds-link>
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/message/message.css

@@ -1,63 +1,63 @@
-:host .message-wrapper {
+:host .wrapper {
   display: flex;
   padding: 16px;
   background-color: var(--tds-message-background);
   border-radius: 4px;
 }
-:host .message-wrapper.information {
+:host .wrapper.information {
   border-left: 4px solid var(--tds-information);
 }
-:host .message-wrapper.information tds-icon {
+:host .wrapper.information tds-icon {
   color: var(--tds-information);
 }
-:host .message-wrapper.success {
+:host .wrapper.success {
   border-left: 4px solid var(--tds-positive);
 }
-:host .message-wrapper.success tds-icon {
+:host .wrapper.success tds-icon {
   color: var(--tds-positive);
 }
-:host .message-wrapper.error {
+:host .wrapper.error {
   background-color: var(--tds-message-type-error-background);
   border-left: 4px solid var(--tds-negative);
 }
-:host .message-wrapper.error tds-icon {
+:host .wrapper.error tds-icon {
   color: var(--tds-negative);
 }
-:host .message-wrapper.warning {
+:host .wrapper.warning {
   border-left: 4px solid var(--tds-warning);
 }
-:host .message-wrapper.warning tds-icon {
+:host .wrapper.warning tds-icon {
   color: var(--tds-warning);
 }
-:host .message-wrapper.message-minimal {
+:host .wrapper.minimal {
   border: none;
   display: flex;
   align-items: center;
   padding: 0;
   background-color: transparent;
 }
-:host .message-wrapper.message-minimal .message-header {
+:host .wrapper.minimal .header {
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
 }
-:host .message-wrapper.message-minimal tds-icon {
-  padding-right: 8px;
+:host .wrapper.minimal.error .header {
+  color: var(--tds-negative);
 }
 :host tds-icon {
   padding-right: 16px;
 }
-:host .message-content {
+:host .content {
   display: flex;
   flex-direction: column;
   gap: 4px;
   color: var(--tds-message-color);
   padding: 2px 0;
 }
-:host .message-content .message-header {
+:host .content .header {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
 }
-:host .message-content .message-extended-message {
+:host .content .extended-message {
   color: var(--tds-message-color);
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);

package/dist/collection/components/message/message.js

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - Default slot for the extended message section.
+ */
 export class TdsMessage {
   constructor() {
     this.getIconName = () => {
@@ -23,9 +26,9 @@ export class TdsMessage {
   }
   render() {
     return (h(Host, null, h("div", { class: `
-        message-wrapper ${this.type}
-        ${this.minimal ? 'message-minimal' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
+        wrapper ${this.type}
+        ${this.minimal ? 'minimal' : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
   }
   static get is() { return "tds-message"; }
   static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,110 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Message`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-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' },
+      },
+    },
+    messageType: {
+      name: 'Message type',
+      description: 'Changes the type of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Error', 'Warning', 'Success'],
+      table: {
+        defaultValue: { summary: 'information' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Sets the header for the Message.',
+      control: {
+        type: 'text',
+      },
+    },
+    extendedMessage: {
+      name: 'Extended Message content',
+      description: 'Sets the content of an extended Message.',
+      control: {
+        type: 'text',
+      },
+    },
+    minimal: {
+      name: 'Minimal',
+      description: 'Applies minimal Message styling.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noIcon: {
+      name: 'No icon',
+      description: 'Hides the icon.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    messageType: 'Information',
+    header: 'Message header',
+    extendedMessage: 'Longer Message text can be placed here. Longer Message text can be placed here.',
+    minimal: false,
+    noIcon: false,
+  },
+};
+const Template = ({ modeVariant, messageType, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
+    <style>
+      .demo-wrapper {
+        width: 380px;
+      }
+    </style>
+    <div class="demo-wrapper">
+      <tds-message
+          type="${messageType.toLowerCase()}"
+          header="${header}"
+          ${noIcon ? 'no-icon' : ''}
+          ${minimal ? 'minimal' : ''}
+          mode-variant="${modeVariant.toLowerCase()}"
+          ${modeVariant !== 'Inherit from parent'
+  ? `mode-variant="${modeVariant.toLowerCase()}"`
+  : ''}
+      >
+      ${extendedMessage}
+      </tds-message>
+    </div>
+    `);
+export const Default = Template.bind({});