@scania/tegel 0.0.72 → 1.0.1

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

@@ -0,0 +1,214 @@
+import { h } from "@stencil/core";
+import { generateUniqueId } from "../../utils/utils";
+/**
+ * @slot label - Slot for the label text.
+ */
+export class TdsToggle {
+  constructor() {
+    this.handleToggle = () => {
+      this.checked = !this.checked;
+      this.tdsToggle.emit({
+        toggleId: this.toggleId,
+        checked: this.checked,
+      });
+    };
+    this.checked = false;
+    this.required = false;
+    this.size = 'lg';
+    this.name = undefined;
+    this.headline = undefined;
+    this.disabled = false;
+    this.toggleId = generateUniqueId();
+  }
+  /** Toggles the Toggle. */
+  async toggle() {
+    this.checked = !this.checked;
+    return {
+      toggleId: this.toggleId,
+      checked: this.checked,
+    };
+  }
+  render() {
+    return (h("div", { class: "tds-toggle" }, this.headline && (h("div", { class: `toggle-headline ${this.disabled ? 'disabled' : ''}` }, this.headline)), h("input", { "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-checked": this.checked, "aria-required": this.required, onChange: () => this.handleToggle(), class: `${this.size}`, checked: this.checked, disabled: this.disabled, required: this.required, type: "checkbox", name: this.name, id: this.toggleId, role: "switch" }), h("label", { class: `${this.disabled ? 'disabled' : ''}`, htmlFor: this.toggleId }, h("slot", { name: "label" }))));
+  }
+  static get is() { return "tds-toggle"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["toggle.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["toggle.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the Toggle as checked"
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Make the Toggle required"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sm' | 'lg'",
+          "resolved": "\"lg\" | \"sm\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the Toggle"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of the toggle's input element"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "headline": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Headline for the Toggle"
+        },
+        "attribute": "headline",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the Toggle in a disabled state"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "toggleId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ID of the Toggle's input element, if not specified, it's randomly generated"
+        },
+        "attribute": "toggle-id",
+        "reflect": false,
+        "defaultValue": "generateUniqueId()"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tdsToggle",
+        "name": "tdsToggle",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique Toggle identifier and status when it is toggled."
+        },
+        "complexType": {
+          "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
+          "resolved": "{ toggleId: string; checked: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggle": {
+        "complexType": {
+          "signature": "() => Promise<{ toggleId: string; checked: boolean; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<{ toggleId: string; checked: boolean; }>"
+        },
+        "docs": {
+          "text": "Toggles the Toggle.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -1,46 +1,46 @@
 :root,
-.sdds-mode-light {
-  --sdds-tooltip-background: var(--sdds-grey-800);
-  --sdds-tooltip-color: var(--sdds-white);
+.tds-mode-light {
+  --tds-tooltip-background: var(--tds-grey-800);
+  --tds-tooltip-color: var(--tds-white);
 }
 
-.sdds-mode-dark {
-  --sdds-tooltip-background: var(--sdds-grey-200);
-  --sdds-tooltip-color: var(--sdds-grey-958);
+.tds-mode-dark {
+  --tds-tooltip-background: var(--tds-grey-200);
+  --tds-tooltip-color: var(--tds-grey-958);
 }
 
-.sdds-tooltip {
+.tds-tooltip {
   box-sizing: border-box;
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-tooltip-color);
-  background-color: var(--sdds-tooltip-background);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-tooltip-color);
+  background-color: var(--tds-tooltip-background);
   border-radius: 4px;
   padding: 8px;
   word-wrap: break-word;
   max-width: 192px;
-  z-index: 800;
+  z-index: 900;
   opacity: 0;
   visibility: hidden;
   transition: opacity 200ms ease-in, visibility 200ms ease-in;
 }
-.sdds-tooltip * {
+.tds-tooltip * {
   box-sizing: border-box;
 }
-.sdds-tooltip.sdds-tooltip-top-left {
+.tds-tooltip.tds-tooltip-top-left {
   border-radius: 0 4px 4px;
 }
-.sdds-tooltip.sdds-tooltip-top-right {
+.tds-tooltip.tds-tooltip-top-right {
   border-radius: 4px 0 4px 4px;
 }
-.sdds-tooltip.sdds-tooltip-bottom-right {
+.tds-tooltip.tds-tooltip-bottom-right {
   border-radius: 4px 4px 0;
 }
-.sdds-tooltip.sdds-tooltip-bottom-left {
+.tds-tooltip.tds-tooltip-bottom-left {
   border-radius: 4px 4px 4px 0;
 }
 
-.sdds-tooltip-show {
+.tds-tooltip-show {
   opacity: 1;
   visibility: visible;
 }

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

@@ -1,97 +1,62 @@
-import { h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
-export class Tooltip {
+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: `sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-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 "sdds-tooltip"; }
-  static get encapsulation() { return "shadow"; }
+  static get is() { return "tds-tooltip"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["tooltip.scss"]
@@ -116,7 +81,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "In case tooltip contains only text, no HTML, text can be passed by this prop"
+          "text": "In case Tooltip contains only text, no HTML, a text can be passed by this prop"
         },
         "attribute": "text",
         "reflect": false,
@@ -134,7 +99,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The CSS-selector for an element that will trigger the tooltip"
+          "text": "The CSS-selector for an element that will trigger the Tooltip"
         },
         "attribute": "selector",
         "reflect": false,
@@ -144,19 +109,20 @@ export class Tooltip {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLElement"
             }
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "Element that will trigger the tooltip (takes priority over selector)"
+          "text": "Element that will trigger the Tooltip (takes priority over selector)"
         }
       },
       "mouseOverTooltip": {
@@ -171,7 +137,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Allow mouse over tooltip. Useful when tooltip contains clickable elements like link or button."
+          "text": "Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button."
         },
         "attribute": "mouse-over-tooltip",
         "reflect": false,
@@ -204,7 +170,8 @@ export class Tooltip {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "@popperjs/core",
+              "id": ""
             }
           }
         },
@@ -212,7 +179,7 @@ export class Tooltip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Placement of tooltip."
+          "text": "Placement of Tooltip."
         },
         "attribute": "placement",
         "reflect": false,
@@ -220,10 +187,5 @@ export class Tooltip {
       }
     };
   }
-  static get states() {
-    return {
-      "popperInstance": {},
-      "target": {}
-    };
-  }
+  static get elementRef() { return "host"; }
 }