@scania/tegel 0.0.9 → 0.0.10

package/dist/collection/components/toast/toast.css

@@ -6,37 +6,37 @@
 :host {
   z-index: 700;
 }
-:host .toast-wrapper {
+:host .wrapper {
   display: flex;
   width: 348px;
   background-color: var(--tds-toast-background-color);
   border-radius: 4px;
 }
-:host .toast-wrapper.information {
+:host .wrapper.information {
   border-left: 4px solid var(--tds-information);
 }
-:host .toast-wrapper.information tds-icon {
+:host .wrapper.information tds-icon {
   color: var(--tds-information);
 }
-:host .toast-wrapper.success {
+:host .wrapper.success {
   border-left: 4px solid var(--tds-positive);
 }
-:host .toast-wrapper.success tds-icon {
+:host .wrapper.success tds-icon {
   color: var(--tds-positive);
 }
-:host .toast-wrapper.error {
+:host .wrapper.error {
   border-left: 4px solid var(--tds-negative);
 }
-:host .toast-wrapper.error tds-icon {
+:host .wrapper.error tds-icon {
   color: var(--tds-negative);
 }
-:host .toast-wrapper.warning {
+:host .wrapper.warning {
   border-left: 4px solid var(--tds-warning);
 }
-:host .toast-wrapper.warning tds-icon {
+:host .wrapper.warning tds-icon {
   color: var(--tds-warning);
 }
-:host .toast-wrapper button.toast-close {
+:host .wrapper button.close {
   height: 20px;
   width: 20px;
   display: flex;
@@ -46,52 +46,59 @@
   border: none;
   background: transparent;
 }
-:host .toast-wrapper button.toast-close:hover {
+:host .wrapper button.close:hover {
   cursor: pointer;
 }
-:host .toast-wrapper button.toast-close:focus {
+:host .wrapper button.close:focus {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
-:host .toast-wrapper button.toast-close tds-icon {
+:host .wrapper button.close tds-icon {
   color: var(--tds-toast-dissmiss-color);
   padding: 0;
 }
 :host tds-icon {
   padding: 14px 0 0 12px;
 }
-:host .toast-content {
+:host .content {
   padding: 16px 0 16px 10px;
   display: flex;
   flex-direction: column;
   flex: 1;
 }
-:host .toast-content .toast-header {
+:host .content .header-subheader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:host .content .header,
+:host .content slot[name=header]::slotted(*) {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   color: var(--tds-toast-headline-color);
 }
-:host .toast-content .toast-header.no-subheader {
-  margin-bottom: 4px;
-}
-:host .toast-content .toast-header.only-header {
-  margin-bottom: 0;
-}
-:host .toast-content .toast-subheader slot::slotted(*) {
+:host .content .subheader,
+:host .content slot[name=subheader]::slotted(*) {
   margin-top: 4px;
   color: var(--tds-toast-subheadline-color);
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
-  padding-bottom: 16px;
   max-width: 252px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-:host .toast-content .toast-subheader.no-link slot::slotted(*) {
+:host .content .subheader.no-link slot::slotted(*),
+:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*) {
   padding-bottom: 0;
 }
-:host slot[name=toast-link]::slotted(*) {
+:host .content .toast-bottom.subheader {
+  margin-top: 16px;
+}
+:host .content .toast-bottom.no-subheader {
+  margin-top: 4px;
+}
+:host slot[name=bottom]::slotted(*) {
   color: var(--tds-toast-link-color);
 }
 :host .tds-mode-variant-primary {

package/dist/collection/components/toast/toast.js

@@ -1,4 +1,10 @@
 import { Host, h } from '@stencil/core';
+import { generateUniqueId, hasSlot } from '../../utils/utils';
+/**
+ * @slot header - Slot for the Toast header.
+ * @slot subheader - Slot for the Toast subheader.
+ * @slot bottom - Slot for the Toast bottom section, used for links.
+ */
 export class TdsToast {
   constructor() {
     this.getIconName = () => {
@@ -31,46 +37,30 @@ export class TdsToast {
         this.hidden = false;
       }
     };
-    this.getHeaderClasses = () => {
-      if (!this.hasSubheader && !this.hasLink) {
-        return 'only-header';
-      }
-      if (!this.hasSubheader) {
-        return 'no-subheader';
-      }
-      return '';
-    };
-    this.toastId = crypto.randomUUID();
+    this.toastId = generateUniqueId();
     this.header = undefined;
     this.subheader = undefined;
     this.type = 'information';
     this.hidden = false;
     this.toastRole = 'alert';
-    this.hasSubheader = undefined;
-    this.hasLink = undefined;
   }
   /** Hides the Toast. */
   async hideToast() {
-    this.handleClose();
+    this.hidden = true;
   }
   /** Shows the Toast. */
   async showToast() {
-    this.handleShow();
-  }
-  connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasSubheader = children.some((childElement) => childElement.slot === 'toast-subheader');
-    this.hasLink = children.some((childElement) => childElement.slot === 'toast-link');
+    this.hidden = false;
   }
   render() {
+    const usesHeaderSlot = hasSlot('header', this.host);
+    const usesSubheaderSlot = hasSlot('subheader', this.host);
+    const usesBottomSlot = hasSlot('bottom', this.host);
     return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
-            toast-wrapper
-            ${this.type}
-            ` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `toast-content` }, h("div", { class: `toast-header
-              ${this.getHeaderClasses()}
-              ` }, this.header), h("div", { class: `toast-subheader ${this.hasLink ? '' : 'no-link'}` }, h("slot", { name: "toast-subheader" })), h("slot", { name: "toast-link" })), h("button", { onClick: () => {
+            wrapper
+            ${this.type}` }, h("tds-icon", { name: this.getIconName(), 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("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "bottom" })))), h("button", { onClick: () => {
         this.handleClose();
-      }, class: `toast-close` }, h("tds-icon", { name: "cross", size: "20px" })))));
+      }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
   }
   static get is() { return "tds-toast"; }
   static get encapsulation() { return "shadow"; }
@@ -102,7 +92,7 @@ export class TdsToast {
         },
         "attribute": "toast-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       },
       "header": {
         "type": "string",
@@ -171,7 +161,7 @@ export class TdsToast {
           "text": "Hides the Toast."
         },
         "attribute": "hidden",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "toastRole": {
@@ -194,12 +184,6 @@ export class TdsToast {
       }
     };
   }
-  static get states() {
-    return {
-      "hasSubheader": {},
-      "hasLink": {}
-    };
-  }
   static get events() {
     return [{
         "method": "tdsClose",

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

@@ -0,0 +1,79 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Toast`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5903%3A245536&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    type: {
+      name: 'Message type',
+      description: 'Changes the type of Toast.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Success', 'Warning', 'Error'],
+      table: {
+        defaultValue: {
+          summary: 'information',
+        },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Adds a header text.',
+      control: {
+        type: 'text',
+      },
+    },
+    subheader: {
+      name: 'Subheader',
+      description: 'Adds a subheader text.',
+      control: {
+        type: 'text',
+      },
+    },
+    bottom: {
+      name: 'Bottom slot',
+      description: 'Slot for the bottom part of the Toast, used for links.',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    type: 'Information',
+    header: 'Header',
+    subheader: 'Subheader',
+    bottom: '<a slot="bottom" href="#">This is a link.</a>',
+  },
+};
+const Template = ({ type, header, subheader, bottom }) => formatHtmlPreview(`<tds-toast
+        type="${type.toLowerCase()}"
+        header="${header}"
+        ${subheader ? `subheader="${subheader}"` : ''}
+    >
+    ${bottom || ''}
+    </tds-toast>
+    
+    <script>
+      document.addEventListener('tdsClose', (event) => {
+          console.log(event)
+      })
+    </script>
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/toggle/toggle.js

@@ -1,4 +1,8 @@
 import { h } from '@stencil/core';
+import { generateUniqueId } from '../../utils/utils';
+/**
+ * @slot label - Slot for the label text.
+ */
 export class TdsToggle {
   constructor() {
     this.handleToggle = () => {
@@ -14,7 +18,7 @@ export class TdsToggle {
     this.name = undefined;
     this.headline = undefined;
     this.disabled = false;
-    this.toggleId = crypto.randomUUID();
+    this.toggleId = generateUniqueId();
   }
   /** Toggles the Toggle. */
   async toggle() {
@@ -163,7 +167,7 @@ export class TdsToggle {
         },
         "attribute": "toggle-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       }
     };
   }

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

@@ -0,0 +1,95 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Toggle`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2479%3A108951&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    size: {
+      name: 'Size',
+      description: 'Sets the size of the Toggle.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Small'],
+      table: {
+        defaultValue: { summary: 'lg' },
+      },
+    },
+    headline: {
+      name: 'Headline',
+      description: 'Sets the headline, displayed above the Toggle.',
+      control: {
+        type: 'text',
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: "Sets the label for the toggle's input element.",
+      control: {
+        type: 'text',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Sets the Toggle as checked.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Toggle.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    size: 'Large',
+    headline: 'Headline',
+    label: 'Label',
+    checked: false,
+    disabled: false,
+  },
+};
+const Template = ({ size, headline, label, checked, disabled }) => formatHtmlPreview(`
+      <tds-toggle
+        ${checked ? 'checked' : ''}
+        ${disabled ? 'disabled' : ''}
+        ${headline ? `headline="${headline}"` : ''}
+        size="${size === 'Large' ? 'lg' : 'sm'}">
+        <div slot="label">${label}</div>
+    </tds-toggle>
+
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+      toggleElement = document.querySelector('tds-toggle')
+
+      toggleElement.addEventListener('tdsToggle', (event)=> {
+        console.log(event)
+      })
+    </script>
+  `);
+export const Default = Template.bind({});

package/dist/collection/components/tooltip/tooltip.js

@@ -13,6 +13,11 @@ export class TdsTooltip {
     this.popperInstance = undefined;
     this.target = undefined;
   }
+  /** Method to update the Tooltip. Will reevaluate the Tooltips position. */
+  async updateTooltip() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+  }
   componentDidLoad() {
     var _a;
     this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
@@ -84,7 +89,6 @@ export class TdsTooltip {
     var _a;
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
-  /* Slot on line 118 is added to support adding HTML elements to component */
   render() {
     return (h("span", { ref: (el) => {
         this.tooltip = el;
@@ -144,7 +148,7 @@ export class TdsTooltip {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -153,7 +157,7 @@ export class TdsTooltip {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Element that will trigger the Tooltip (takes priority over selector)"
@@ -226,4 +230,24 @@ export class TdsTooltip {
       "target": {}
     };
   }
+  static get methods() {
+    return {
+      "updateTooltip": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Method to update the Tooltip. Will reevaluate the Tooltips position.",
+          "tags": []
+        }
+      }
+    };
+  }
 }

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

@@ -0,0 +1,128 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Tooltip`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2620%3A4152&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    tooltipPosition: {
+      name: 'Tooltip position',
+      description: 'Sets the position of the Tooltip.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        'Bottom-start',
+        'Bottom',
+        'Bottom-end',
+        'Top-start',
+        'Top',
+        'Top-end',
+        'Left-start',
+        'Left',
+        'Left-end',
+        'Right-start',
+        'Right',
+        'Right-end',
+      ],
+      table: {
+        defaultValue: {
+          summary: 'bottom',
+        },
+      },
+    },
+    text: {
+      name: 'Tooltip text',
+      description: 'Sets the text that will be displayed inside Tooltip.',
+      control: {
+        type: 'text',
+      },
+    },
+    slot: {
+      name: 'Tooltip html content',
+      description: 'A slot for the Tooltip to pass in html.',
+      control: {
+        type: 'text',
+      },
+    },
+    mouseOverTooltip: {
+      name: 'Open while hovering over Tooltip',
+      description: 'Keeps the Tooltip visible as long as the mouse hovers over it.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  },
+  args: {
+    tooltipPosition: 'Bottom',
+    text: 'Text inside Tooltip',
+    slot: '<p class="tds-detail-05 tds-u-m0"> Paragraph tag inside Tooltip with <b>bold</b> and <i>italic</i> tags too. </p>',
+    mouseOverTooltip: true,
+  },
+};
+const positionLookup = {
+  'Bottom-start': 'bottom-start',
+  'Bottom': 'bottom',
+  'Bottom-end': 'bottom-end',
+  'Top-start': 'top-start',
+  'Top': 'top',
+  'Top-end': 'top-end',
+  'Left-start': 'left-start',
+  'Left': 'left',
+  'Left-end': 'left-end',
+  'Right-start': 'right-start',
+  'Right': 'right',
+  'Right-end': 'right-end',
+};
+const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) => formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+     .demo-wrapper{
+       height: 300px;
+       display: flex;
+       justify-content: center;
+       align-items: center;
+     }
+    </style>
+
+   <div class="demo-wrapper">
+   <!-- The 'referenceEl' prop can be used instead of 'selector',
+    which might be preferable in frameworks like React -->
+   <tds-tooltip
+      placement="${positionLookup[tooltipPosition]}"
+      selector="#button-1"
+      text="${text}"
+      mouse-over-tooltip="${mouseOverTooltip}">
+      ${slot}
+    </tds-tooltip>
+
+    <!-- Demo button for presentation purposes -->
+    <tds-button size= 'sm' id="button-1" text='Hover me'></tds-button>
+   </div>
+  `);
+export const Default = ComponentTooltip.bind({});