@scania/tegel 0.0.9 → 0.0.11

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: {
+    variant: {
+      name: 'Message variant',
+      description: 'Changes the variant 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: {
+    variant: 'Information',
+    header: 'Header',
+    subheader: 'Subheader',
+    bottom: '<a slot="bottom" href="#">This is a link.</a>',
+  },
+};
+const Template = ({ variant, header, subheader, bottom }) => formatHtmlPreview(`<tds-toast
+        variant="${variant.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

@@ -1,97 +1,62 @@
-import { h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
+import { h, Host } from '@stencil/core';
+import { inheritAttributes } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
+ */
 export class TdsTooltip {
   constructor() {
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
+    this.popperjsExtraModifiers = [
+      {
+        name: 'positionCalc',
+        enabled: true,
+        phase: 'main',
+        fn: ({ state }) => {
+          if (state.placement === 'bottom-start' || state.placement === 'right-start') {
+            this.border = 'top-left';
+          }
+          else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
+            this.border = 'top-right';
+          }
+          else if (state.placement === 'top-end' || state.placement === 'left-end') {
+            this.border = 'bottom-right';
+          }
+          else if (state.placement === 'top-start' || state.placement === 'right-end') {
+            this.border = 'bottom-left';
+          }
+          else if (state.placement === 'bottom' || state.placement === 'top') {
+            this.border = 'default';
+          }
+        },
+      },
+    ];
+    this.inheritedAttributes = [];
     this.text = '';
     this.selector = '';
     this.referenceEl = undefined;
     this.mouseOverTooltip = false;
     this.show = false;
     this.placement = 'bottom';
-    this.popperInstance = undefined;
-    this.target = undefined;
-  }
-  componentDidLoad() {
-    var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    const thisValue = this;
-    this.popperInstance = createPopper(this.target, this.tooltip, {
-      placement: thisValue.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({ state }) {
-            if (state.placement === 'bottom-start' || state.placement === 'right-start') {
-              thisValue.border = 'top-left';
-            }
-            else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
-              thisValue.border = 'top-right';
-            }
-            else if (state.placement === 'top-end' || state.placement === 'left-end') {
-              thisValue.border = 'bottom-right';
-            }
-            else if (state.placement === 'top-start' || state.placement === 'right-end') {
-              thisValue.border = 'bottom-left';
-            }
-            else if (state.placement === 'bottom' || state.placement === 'top') {
-              thisValue.border = 'default';
-            }
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showTooltip = () => {
-      this.show = true;
-    };
-    const hideTooltip = () => {
-      this.show = false;
-    };
-    // For tabbing over element
-    this.target.addEventListener('focusin', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('focusout', () => {
-      hideTooltip();
-    });
-    // For hovering over element with selector
-    this.target.addEventListener('mouseenter', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('mouseleave', () => {
-      hideTooltip();
-    });
-    // For hovering over Tooltip itself:
-    if (this.mouseOverTooltip === true) {
-      this.tooltip.addEventListener('mouseenter', () => {
-        showTooltip();
-      });
-      this.tooltip.addEventListener('mouseleave', () => {
-        hideTooltip();
-      });
-    }
   }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
-  /* Slot on line 118 is added to support adding HTML elements to component */
   render() {
-    return (h("span", { ref: (el) => {
-        this.tooltip = el;
-      }, class: `tds-tooltip tds-tooltip-${this.border} ${this.show ? 'tds-tooltip-show' : ''}` }, this.text, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        'tds-tooltip': true,
+        [`tds-tooltip-${this.border}`]: true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+        'tds-tooltip-show': this.show,
+      }, selector: this.selector, referenceEl: this.referenceEl, trigger: this.mouseOverTooltip ? 'hover-popover' : 'hover', modifiers: this.popperjsExtraModifiers, show: this.show, placement: this.placement, autoHide: false, onInternalTdsShow: () => {
+        this.show = true;
+      }, onInternalTdsClose: () => {
+        this.show = false;
+      } }), this.text, h("slot", null))));
   }
   static get is() { return "tds-tooltip"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["tooltip.scss"]
@@ -144,7 +109,7 @@ export class TdsTooltip {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -153,7 +118,7 @@ export class TdsTooltip {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Element that will trigger the Tooltip (takes priority over selector)"
@@ -220,10 +185,5 @@ export class TdsTooltip {
       }
     };
   }
-  static get states() {
-    return {
-      "popperInstance": {},
-      "target": {}
-    };
-  }
+  static get elementRef() { return "host"; }
 }

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

@@ -0,0 +1,136 @@
+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
+      id="tooltip-1"
+      placement="${positionLookup[tooltipPosition]}"
+      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>
+   <script>
+   (() => {
+     const tooltip = document.getElementById('tooltip-1');
+     const button = document.getElementById('button-1');
+
+     tooltip.referenceEl = button;
+    })();
+   </script>
+  `);
+export const Default = ComponentTooltip.bind({});