@scania/tegel 0.0.9 → 0.0.10

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

@@ -0,0 +1,100 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import readmeItem from './accordion-item/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Accordion`,
+  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' },
+      },
+    },
+    iconPosition: {
+      name: 'Expand icon position',
+      description: 'Sets the horizontal position of the expand icon.',
+      control: {
+        type: 'radio',
+      },
+      options: { End: 'end', Start: 'start' },
+      table: {
+        defaultValue: { summary: 'end' },
+      },
+    },
+    paddingReset: {
+      name: 'Less padding right',
+      description: 'Sets less padding on the right inside Accordion Items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disable all items',
+      description: 'Disables all Accordion Items.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  parameters: {
+    notes: { 'Accordion': readme, 'Accordion Item': readmeItem },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    iconPosition: 'end',
+    paddingReset: false,
+    disabled: false,
+  },
+};
+const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
+  const affixAttr = iconPosition === 'start' ? 'expand-icon-position="start"' : '';
+  const disabledAttr = disabled ? 'disabled' : '';
+  const paddingResetAttr = paddingReset ? 'padding-reset' : '';
+  return formatHtmlPreview(`
+    <tds-accordion ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <tds-accordion-item header="First item" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum doler sit amet.
+      </tds-accordion-item>
+      <tds-accordion-item ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
+        <div slot="header">Second item</div>
+        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
+      </tds-accordion-item>
+    </tds-accordion>
+
+    <!-- Script tag for demo purposes -->
+  <script>    
+    accordionItems = document.querySelectorAll('tds-accordion-item');
+    for (let i = 0; i < accordionItems.length; i++) {
+      accordionItems[i].addEventListener('tdsToggle',(event) => {
+        console.log(event)
+      })
+    }
+  </script>`);
+};
+export const Default = Template.bind({});

package/dist/collection/components/badge/badge.js

@@ -22,9 +22,9 @@ export class TdsBadge {
     }
     else {
       // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      this.value !== '' && this.size !== 'sm'
-        ? console.warn('The provided value is either empty or string, please provide value as number.')
-        : '';
+      if (this.value !== '' && this.size !== 'sm') {
+        console.warn('The provided value is either empty or string, please provide value as number.');
+      }
     }
   }
   render() {
@@ -77,7 +77,7 @@ export class TdsBadge {
           "text": "Changes visibility of Badge"
         },
         "attribute": "hidden",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "size": {

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

@@ -0,0 +1,106 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Badge`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: {
+        Large: 'lg',
+        Small: 'sm',
+      },
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    value: {
+      name: 'Value',
+      description: 'Sets a value to show on the Badge.',
+      control: {
+        type: 'number',
+      },
+      if: { arg: 'size', neq: 'sm' },
+    },
+    hidden: {
+      name: 'Hidden',
+      description: 'Toggles visibility of the Badge.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    demoCode: {
+      name: 'Demo code',
+      description: 'Displays code example of component usage. Not part of component props.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    size: 'lg',
+    value: 1,
+    hidden: false,
+    demoCode: false,
+  },
+};
+const Template = ({ value, size, hidden, demoCode }) => formatHtmlPreview(`
+    ${demoCode
+  ? `<style>
+    /* Note: Demo classes used here are just for demo purposes in Storybook */
+    .badge-demo-box {
+      margin:5px;
+      height: 32px;
+      width: 32px;
+      position: relative;
+      background-color: #C4C4C4;
+    }
+
+    .badge-demo-box tds-badge[size="lg"]{
+      position: absolute;
+      left: 16px;
+      top: -5px;
+    }
+
+    .badge-demo-box tds-badge[size="sm"]{
+      position: absolute;
+      left: 26px;
+      top: -2px;
+    }
+    </style>`
+  : ''}
+
+    <div class="${demoCode ? 'badge-demo-box' : ''}">
+      <tds-badge
+        ${value ? `value="${value}"` : ''}
+        ${hidden ? 'hidden' : ''}
+        size="${size}">
+      </tds-badge>
+    </div>`);
+export const Default = Template.bind({});

package/dist/collection/components/banner/banner.css

@@ -45,34 +45,37 @@
 :host .banner-icon.information {
   color: var(--tds-banner-prefix-info-color);
 }
-:host .banner-content {
+:host .content {
   color: var(--tds-banner-text-color);
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   padding: 16px 0;
 }
-:host .banner-content.no-icon {
+:host .content.no-icon {
   padding-left: 16px;
 }
-:host .banner-content .banner-header {
+:host .header-subheader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:host .header,
+:host slot[name=header] {
   font: var(--tds-headline-06);
   letter-spacing: var(--tds-headline-06-ls);
 }
-:host .banner-content slot[name=banner-subheader] {
+:host .subheader,
+:host slot[name=subheader] {
   display: block;
-  margin-top: 4px;
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
 }
-:host .banner-content .banner-link slot[name=banner-link] {
+:host slot[name=bottom]::slotted(*) {
   display: block;
   width: fit-content;
   margin-top: 16px;
 }
-:host .banner-content .banner-link.no-subheader slot[name=banner-link] {
-  margin-top: 4px;
-}
 :host .banner-close {
   color: var(--tds-banner-x-color);
 }

package/dist/collection/components/banner/banner.js

@@ -1,4 +1,10 @@
 import { Host, h } from '@stencil/core';
+import { generateUniqueId, hasSlot } from '../../utils/utils';
+/**
+ * @slot header - Slot for the Header of the Banner
+ * @slot subheader - Slot for the Subheader of the Banner
+ * @slot bottom - Slot for the bottom part of the Banner, used for links.
+ */
 export class TdsBanner {
   constructor() {
     this.handleClose = () => {
@@ -19,20 +25,19 @@ export class TdsBanner {
     };
     this.icon = undefined;
     this.header = undefined;
+    this.subheader = undefined;
     this.type = 'none';
-    this.bannerId = crypto.randomUUID();
+    this.bannerId = generateUniqueId();
     this.persistent = false;
     this.hidden = false;
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
   }
   /** Hides the Banner. */
   async hideBanner() {
-    this.handleClose();
+    this.hidden = true;
   }
   /** Shows the Banner */
   async showBanner() {
-    this.handleShow();
+    this.hidden = false;
   }
   connectedCallback() {
     if (this.type === 'error') {
@@ -41,12 +46,12 @@ export class TdsBanner {
     else if (this.type === 'information') {
       this.icon = 'info';
     }
-    const children = Array.from(this.host.children);
-    this.hasSubheader = children.some((childElement) => childElement.slot === 'banner-subheader');
-    this.hasLink = children.some((childElement) => childElement.slot === 'banner-link');
   }
   render() {
-    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.type}` }, h("tds-icon", { name: this.icon, size: "20px" }))), h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && h("span", { class: `banner-header` }, this.header), this.hasSubheader && h("slot", { name: "banner-subheader" }), this.hasLink && (h("div", { class: `banner-link ${!this.hasSubheader ? 'no-subheader' : ''}` }, h("slot", { name: "banner-link" })))), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
+    const usesHeaderSlot = hasSlot('subheader', this.host);
+    const usesSubheaderSlot = hasSlot('subheader', this.host);
+    const usesBottomSlot = hasSlot('bottom', this.host);
+    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.type}` }, h("tds-icon", { name: this.icon, size: "20px" }))), h("div", { class: "content" }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesBottomSlot && h("slot", { name: "bottom" })), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
         this.handleClose();
       } }, h("tds-icon", { name: "cross", size: "20px" }))))));
   }
@@ -98,6 +103,23 @@ export class TdsBanner {
         "attribute": "header",
         "reflect": false
       },
+      "subheader": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Subheader text."
+        },
+        "attribute": "subheader",
+        "reflect": false
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -132,7 +154,7 @@ export class TdsBanner {
         },
         "attribute": "banner-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       },
       "persistent": {
         "type": "boolean",
@@ -167,17 +189,11 @@ export class TdsBanner {
           "text": "Hides the Banner"
         },
         "attribute": "hidden",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       }
     };
   }
-  static get states() {
-    return {
-      "hasSubheader": {},
-      "hasLink": {}
-    };
-  }
   static get events() {
     return [{
         "method": "tdsClose",

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

@@ -0,0 +1,107 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import { iconsNames } from '../icon/iconsArray';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+// FIXME: CMS: Change state to type in Code tab of component
+export default {
+  title: `${ComponentsFolder}/Banner`,
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Type',
+      description: 'Changes the type of the component.',
+      options: ['Default', 'Error', 'Information'],
+      control: {
+        type: 'radio',
+      },
+      table: {
+        defaultValue: { summary: 'none' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Sets text to be displayed in the header section.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Sets text to be displayed in the subheader section.',
+      control: {
+        type: 'text',
+      },
+    },
+    bottom: {
+      name: 'Bottom slot',
+      description: 'Slot for the bottom part of the Banner, used for links.',
+      control: {
+        type: 'text',
+      },
+    },
+    icon: {
+      name: 'Icon',
+      description: 'Name of icon to display, choose `none` to remove the icon.',
+      control: {
+        type: 'select',
+      },
+      options: [...iconsNames, 'none'],
+      if: { arg: 'type', eq: 'Default' },
+    },
+    persistent: {
+      name: 'Disable closing',
+      description: `Removes the 'close button' in the Banner.`,
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    type: 'Default',
+    header: 'This is a header text area',
+    subheader: 'This is the subheader text area',
+    bottom: '<tds-link slot="bottom" ><a href="/">Link example</a></tds-link>',
+    icon: 'truck',
+    persistent: false,
+  },
+};
+const Template = ({ type, icon, header, subheader, persistent, bottom }) => formatHtmlPreview(`
+      <tds-banner
+          ${type !== 'Default' ? `type="${type.toLowerCase()}"` : ''}
+          ${icon !== 'none' ? `icon="${icon}"` : ''}
+          ${header !== '' ? `header="${header}"` : ''}
+          ${subheader ? `subheader="${subheader}"` : ''}
+          ${persistent ? `persistent` : ''}
+          >
+          ${bottom ? `${bottom}` : ''}
+      </tds-banner>
+
+      <!-- Script tag with eventlistener for demo purposes. -->
+      <script>
+        document.addEventListener('tdsClose', (event) => {
+          console.log(event)
+        })
+        document.addEventListener('tdsShow', (event) => {
+          console.log(event)
+        })
+      </script>
+    `);
+export const Default = Template.bind({});

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

@@ -0,0 +1,49 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Block`,
+  parameters: {
+    layout: 'padded',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9743%3A24020&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' },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+  },
+};
+const Template = ({ modeVariant }) => formatHtmlPreview(`
+      <tds-block ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+        <h2 class="tds-headline-02">Block</h2>
+        <p class="tds-body-01">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
+          <tds-block>
+              <h3 class="tds-headline-04">Nested block</h3>
+              <p class="tds-detail-03">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum nisi ut eleifend ultrices. Nunc venenatis maximus sapien, ac bibendum nisl aliquam in. Morbi ac velit et ligula consectetur interdum. Vestibulum condimentum, augue vitae lobortis rhoncus, mi est ultricies mi, sed tincidunt magna nibh in lectus. Pellentesque vel vulputate orci, vel lacinia orci. Sed suscipit leo at diam ullamcorper, vitae volutpat neque dapibus. Maecenas sit amet rhoncus arcu. Sed sed molestie elit. Nullam in interdum est, vitae aliquam ipsum. Nunc rutrum nibh ut arcu egestas egestas.</p>
+          </tds-block>
+      </tds-block>
+    `);
+export const Default = Template.bind({});

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css

@@ -11,13 +11,13 @@
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-[role=listitem].disabled ::slotted(*), [role=listitem].current ::slotted(*),
+[role=listitem].current ::slotted(*),
 [role=listitem] [aria-current=page] ::slotted(*) {
   pointer-events: none;
   cursor: default;
-  color: var(--tds-breadcrumb-color-disabled);
+  color: var(--tds-breadcrumb-color-current);
 }
-[role=listitem].disabled:hover ::slotted(*), [role=listitem].current:hover ::slotted(*),
+[role=listitem].current:hover ::slotted(*),
 [role=listitem] [aria-current=page]:hover ::slotted(*) {
   text-decoration: none;
   cursor: not-allowed;
@@ -32,6 +32,6 @@
   height: 8px;
 }
 
-:host(.last) ::slotted(*)::after {
+:host(:last-of-type) ::slotted(*)::after {
   display: none;
 }

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

@@ -2,11 +2,9 @@ import { h } from '@stencil/core';
 export class TdsBreadcrumb {
   constructor() {
     this.current = false;
-    this.disabled = false;
   }
   render() {
-    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
-        ${this.disabled ? 'disabled' : ''}` }, h("slot", null)));
+    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''}` }, h("slot", null)));
   }
   static get is() { return "tds-breadcrumb"; }
   static get encapsulation() { return "shadow"; }
@@ -39,24 +37,6 @@ export class TdsBreadcrumb {
         "attribute": "current",
         "reflect": false,
         "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Toggle the disabled state for the Breadcrumb"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }

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

@@ -1,8 +1,5 @@
 import { h } from '@stencil/core';
 export class TdsBreadcrumbs {
-  connectedCallback() {
-    this.el.children[this.el.children.length - 1].classList.add('last');
-  }
   render() {
     return (h("nav", null, h("div", { role: "list", class: 'tds-breadcrumb' }, h("slot", null))));
   }

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