@scania/tegel 1.0.0 → 1.0.3

package/dist/collection/components/text-field/text-field.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
+import hasSlot from "../../utils/hasSlot";
 /**
  * @slot prefix - Slot for the prefix in the Text Field
  * @slot suffix - Slot for the suffix in the Text Field
@@ -46,21 +46,21 @@ export class TdsTextField {
     var _a;
     const usesPrefixSlot = hasSlot('prefix', this.host);
     const usesSuffixSlot = hasSlot('suffix', this.host);
-    return (h("div", { class: `
-        ${this.noMinWidth ? 'form-text-field-nomin' : ''}
+    return (h("div", { class: `
+        ${this.noMinWidth ? 'form-text-field-nomin' : ''}
         ${this.focusInput && !this.disabled
         ? 'form-text-field text-field-focus'
-        : ' form-text-field'}
-        ${this.value ? 'text-field-data' : ''}
+        : ' form-text-field'}
+        ${this.value ? 'text-field-data' : ''}
         ${this.labelPosition === 'inside' && this.size !== 'sm'
         ? 'text-field-container-label-inside'
-        : ''}
-        ${this.disabled ? 'form-text-field-disabled' : ''}
-        ${this.readOnly ? 'form-text-field-readonly' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
-        ${this.size === 'md' ? 'form-text-field-md' : ''}
-        ${this.size === 'sm' ? 'form-text-field-sm' : ''}
-        ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
+        : ''}
+        ${this.disabled ? 'form-text-field-disabled' : ''}
+        ${this.readOnly ? 'form-text-field-readonly' : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ${this.size === 'md' ? 'form-text-field-md' : ''}
+        ${this.size === 'sm' ? 'form-text-field-sm' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
         ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" }))), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);
@@ -69,7 +69,7 @@ export class TdsTextField {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), usesSuffixSlot && (h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" }))), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength)))));
+      } }), this.labelPosition === 'inside' && this.size !== 'sm' && (h("label", { class: "text-field-label-inside" }, this.label))), h("div", { class: "text-field-bar" }), usesSuffixSlot && (h("div", { class: `text-field-slot-wrap-suffix text-field-${this.state}` }, h("slot", { name: "suffix" }))), h("span", { class: "text-field-icon__readonly" }, h("tds-icon", { name: "edit_inactive", size: "20px" })), h("span", { class: "text-field-icon__readonly-label" }, "This field is non-editable")), (this.helper || this.maxLength > 0) && (h("div", { class: "text-field-helper" }, this.state === 'error' && (h("div", { class: "text-field-helper-error-state" }, h("tds-icon", { name: "error", size: "16px" }), this.helper)), this.state !== 'error' && this.helper, this.maxLength > 0 && (h("div", { class: "text-field-textcounter" }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "text-field-textcounter-divider" }, " / "), this.maxLength))))));
   }
   static get is() { return "tds-text-field"; }
   static get encapsulation() { return "scoped"; }
@@ -276,7 +276,7 @@ export class TdsTextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "With setting"
+          "text": "Unset minimum width of 208px."
         },
         "attribute": "no-min-width",
         "reflect": false,

package/dist/collection/components/text-field/text-field.stories.js

@@ -1,5 +1,5 @@
 import readme from "./readme.md";
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
   title: `${ComponentsFolder}/Text Field`,
@@ -193,55 +193,55 @@ const Template = ({ modeVariant, state, type, size, label, labelPosition, placeh
     Medium: 'md',
     Small: 'sm',
   };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 200px;
-    height: 150px;
-  }
-    </style>
-
-  <div class="demo-wrapper">
-    <tds-text-field
-      type="${type}"
-      size="${sizeLookUp[size]}"
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      state="${stateValue}"
-      label="${label}"
-      label-position="${labelPosition.toLowerCase()}"
-      ${helper ? `helper="${helper}"` : ''}
-      ${maxlength}
-      ${disabled ? 'disabled' : ''}
-      ${readonly ? 'read-only' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      placeholder="${placeholderText}" >
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 200px;
+    height: 150px;
+  }
+    </style>
+
+  <div class="demo-wrapper">
+    <tds-text-field
+      type="${type}"
+      size="${sizeLookUp[size]}"
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      state="${stateValue}"
+      label="${label}"
+      label-position="${labelPosition.toLowerCase()}"
+      ${helper ? `helper="${helper}"` : ''}
+      ${maxlength}
+      ${disabled ? 'disabled' : ''}
+      ${readonly ? 'read-only' : ''}
+      ${noMinWidth ? 'no-min-width' : ''}
+      placeholder="${placeholderText}" >
         ${prefix || suffix
-    ? `
+    ? `
           ${prefixType || suffixType === 'Text'
       ? `<span slot="${prefix ? 'prefix' : 'suffix'}">$</span>`
-      : `<tds-icon slot="${prefix ? 'prefix' : 'suffix'}" name="truck" size="20px"></tds-icon>`}
+      : `<tds-icon slot="${prefix ? 'prefix' : 'suffix'}" name="truck" size="20px"></tds-icon>`}
         `
-    : ''}
-
-        </tds-text-field>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('tds-text-field')
-    textElement.addEventListener('tdsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsChange',(event) => {
-      console.log(event)
-    })
-  </script>
+    : ''}
+
+        </tds-text-field>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('tds-text-field')
+    textElement.addEventListener('tdsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsChange',(event) => {
+      console.log(event)
+    })
+  </script>
   `);
 };
 export const Default = Template.bind({});

package/dist/collection/components/textarea/textarea.js

@@ -38,16 +38,16 @@ export class TdsTextarea {
   }
   render() {
     var _a;
-    return (h("div", { class: `
-        textarea-container
-        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
-        ${this.focusInput ? 'textarea-focus' : ''}
-        ${this.disabled ? 'textarea-disabled' : ''}
-        ${this.readOnly ? 'textarea-readonly' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
-        ${this.value ? 'textarea-data' : ''}
-        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
-        ${this.noMinWidth ? 'no-min-width' : ''}
+    return (h("div", { class: `
+        textarea-container
+        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
+        ${this.focusInput ? 'textarea-focus' : ''}
+        ${this.disabled ? 'textarea-disabled' : ''}
+        ${this.readOnly ? 'textarea-readonly' : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ${this.value ? 'textarea-data' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
+        ${this.noMinWidth ? 'no-min-width' : ''}
         ` }, this.labelPosition !== 'no-label' && h("span", { class: 'textarea-label' }, this.label), h("div", { class: "textarea-wrapper" }, h("textarea", { class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);

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

@@ -1,5 +1,5 @@
 import readme from "./readme.md";
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
   title: `${ComponentsFolder}/Textarea`,
@@ -141,48 +141,48 @@ const Template = ({ modeVariant, state, label, labelPosition, placeholder, helpe
     'Inside': 'inside',
     'Outside': 'outside',
   };
-  return formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-      width: 400px;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-        <tds-textarea
-          rows="${rows}"
-          state="${stateValue}"
-          label="${label}"
-          helper="${helper}"
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper {
+      width: 400px;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+        <tds-textarea
+          rows="${rows}"
+          state="${stateValue}"
+          label="${label}"
+          helper="${helper}"
           ${modeVariant !== 'Inherit from parent'
     ? `mode-variant="${modeVariant.toLowerCase()}"`
-    : ''}
-          label-position="${labelPosLookup[labelPosition]}"
-          ${disabled ? 'disabled' : ''}
-          ${readonly ? 'read-only' : ''}
-          ${noMinWidth ? 'no-min-width' : ''}
-          placeholder="${placeholder}"
-          ${maxlength}>
-        </tds-textarea>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('tds-textarea')
-
-    textElement.addEventListener('tdsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsChange',(event) => {
-      console.log(event)
-    })
-  </script>
+    : ''}
+          label-position="${labelPosLookup[labelPosition]}"
+          ${disabled ? 'disabled' : ''}
+          ${readonly ? 'read-only' : ''}
+          ${noMinWidth ? 'no-min-width' : ''}
+          placeholder="${placeholder}"
+          ${maxlength}>
+        </tds-textarea>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('tds-textarea')
+
+    textElement.addEventListener('tdsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsChange',(event) => {
+      console.log(event)
+    })
+  </script>
   `);
 };
 export const Default = Template.bind({});

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { generateUniqueId, hasSlot } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
+import hasSlot from "../../utils/hasSlot";
 /**
  * @slot header - Slot for the Toast header.
  * @slot subheader - Slot for the Toast subheader.
@@ -56,8 +57,8 @@ export class TdsToast {
     const usesHeaderSlot = hasSlot('header', this.host);
     const usesSubheaderSlot = hasSlot('subheader', this.host);
     const usesActionsSlot = hasSlot('actions', this.host);
-    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
-            wrapper
+    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+            wrapper
             ${this.variant}` }, 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" })), usesActionsSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "actions" })))), h("button", { onClick: () => {
         this.handleClose();
       }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
@@ -196,7 +197,7 @@ export class TdsToast {
           "text": "Sends unique Toast identifier when component is closed."
         },
         "complexType": {
-          "original": "{\r\n    toastId: string;\r\n  }",
+          "original": "{\n    toastId: string;\n  }",
           "resolved": "{ toastId: string; }",
           "references": {}
         }

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
@@ -59,23 +59,23 @@ export default {
     variant: 'Information',
     header: 'Header',
     subheader: 'Subheader',
-    actions: `<tds-link slot="actions">
-          <a href="https://tegel.scania.com/home" target="_blank">Tegel</a>
+    actions: `<tds-link slot="actions">
+          <a href="https://tegel.scania.com/home" target="_blank">Tegel</a>
       </tds-link>`,
   },
 };
-const Template = ({ variant, header, subheader, actions }) => formatHtmlPreview(`<tds-toast
-        variant="${variant.toLowerCase()}"
-        header="${header}"
-        ${subheader ? `subheader="${subheader}"` : ''}
-    >
-    ${actions || ''}
-    </tds-toast>
-    
-    <script>
-      document.addEventListener('tdsClose', (event) => {
-          console.log(event)
-      })
-    </script>
+const Template = ({ variant, header, subheader, actions }) => formatHtmlPreview(`<tds-toast
+        variant="${variant.toLowerCase()}"
+        header="${header}"
+        ${subheader ? `subheader="${subheader}"` : ''}
+    >
+    ${actions || ''}
+    </tds-toast>
+    
+    <script>
+      document.addEventListener('tdsClose', (event) => {
+          console.log(event)
+      })
+    </script>
   `);
 export const Default = Template.bind({});

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { generateUniqueId } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
 /**
  * @slot label - Slot for the label text.
  */
@@ -183,7 +183,7 @@ export class TdsToggle {
           "text": "Sends unique Toggle identifier and status when it is toggled."
         },
         "complexType": {
-          "original": "{\r\n    toggleId: string;\r\n    checked: boolean;\r\n  }",
+          "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
           "resolved": "{ toggleId: string; checked: boolean; }",
           "references": {}
         }

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
@@ -74,22 +74,22 @@ export default {
     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>
+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,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { inheritAttributes } from "../../utils/utils";
+import inheritAttributes from "../../utils/inheritAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
  */

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
@@ -99,38 +99,28 @@ const positionLookup = {
   '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>
+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">
+   <tds-tooltip
+      placement="${positionLookup[tooltipPosition]}"
+      text="${text}"
+      selector="#my-tooltip-button"
+      mouse-over-tooltip="${mouseOverTooltip}">
+      ${slot}
+    </tds-tooltip>
+
+    <!-- Demo button for presentation purposes -->
+    <tds-button size= 'sm' id="my-tooltip-button" text='Hover me'></tds-button>
+   </div>
   `);
 export const Default = ComponentTooltip.bind({});