@scania/tegel 1.0.0 → 1.0.3

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

@@ -1,6 +1,6 @@
 import readme from "./readme.md";
 import readmeDropdownOption from "./dropdown-option/readme.md";
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { ComponentsFolder } from "../../utils/constants";
 export default {
   title: `${ComponentsFolder}/Dropdown`,
@@ -169,68 +169,64 @@ const defaultOptionLookUp = {
   'Option 4': 'option-4',
 };
 const getMultiselectDefaultValue = (multiDefaultOption) => multiDefaultOption.map((item) => defaultOptionLookUp[item]);
-const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, multiselect, openDirection, modeVariant, disabled, defaultOption, multiDefaultOption, }) => formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 300px;
-    height:200px;
-  }
-  </style>
-
-    <div class="demo-wrapper">
-        <tds-dropdown
+const Template = ({ placeholder, labelText, labelPosition, helperText, size, error, filter, multiselect, openDirection, modeVariant, disabled, defaultOption, multiDefaultOption, }) => formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 300px;
+    height:200px;
+  }
+  .hej {
+    margin-top: 79px;
+  }
+  </style>
+
+    <div class="demo-wrapper">
+        <tds-dropdown
         ${defaultOption && defaultOption !== 'No default'
   ? `default-value="${defaultOptionLookUp[defaultOption]}"`
-  : ''}
+  : ''}
         ${multiDefaultOption
   ? `default-value="${getMultiselectDefaultValue(multiDefaultOption)}"`
-  : ''}
-        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-          name="dropdown"
-          label="${labelText}"
+  : ''}
+        ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+          name="dropdown"
+          label="${labelText}"
           ${labelPosition && labelPosition !== 'None'
   ? `label-position="${labelPosition.toLowerCase()}"`
-  : ''}
-          placeholder="${placeholder}"
-          helper="${helperText}"
-          size="${sizeLookUp[size]}"
-          ${error ? 'error' : ''}
-          ${filter ? 'filter' : ''}
-          ${multiselect ? 'multiselect' : ''}
-          ${disabled ? 'disabled' : ''}
-          open-direction="${openDirection.toLowerCase()}"
-          >
-            <tds-dropdown-option value="option-1">
-              Option 1
-            </tds-dropdown-option>
-            <tds-dropdown-option disabled value="option-2">
-              Option 2
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-3">
-              Option 3
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-4">
-              Option 4
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-5">
-              Option 5
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-6">
-              Option 6
-            </tds-dropdown-option>
-            <tds-dropdown-option value="option-7">
-              Option 7
-            </tds-dropdown-option>
-        </tds-dropdown>
-    </div>
-
-    <script>
-    dropdown = document.querySelector('tds-dropdown')
-    dropdown.addEventListener('tdsChange', (event) => {
-      console.log(event)
-    })
-    </script>
-        
+  : ''}
+          placeholder="${placeholder}"
+          helper="${helperText}"
+          size="${sizeLookUp[size]}"
+          ${error ? 'error' : ''}
+          ${filter ? 'filter' : ''}
+          ${multiselect ? 'multiselect' : ''}
+          ${disabled ? 'disabled' : ''}
+          open-direction="${openDirection.toLowerCase()}"
+          >
+            <tds-dropdown-option value="option-1">
+              Option 1
+            </tds-dropdown-option>
+            <tds-dropdown-option disabled value="option-2">
+              Option 2
+            </tds-dropdown-option>
+            <tds-dropdown-option value="option-3">
+              Option 3
+            </tds-dropdown-option>
+            <tds-dropdown-option value="option-4">
+              Option 4
+            </tds-dropdown-option>
+        </tds-dropdown>
+    </div>
+
+    <script>
+      dropdown = document.querySelector('tds-dropdown')
+
+      dropdown.addEventListener('tdsChange', (event) => {
+        console.log(event)
+      })
+
+    </script>
+        
   `);
 export const Default = Template.bind({});

package/dist/collection/components/footer/footer-group/footer-group.js

@@ -21,8 +21,8 @@ export class TdsFooterGroup {
   render() {
     return (h(Host, null, this.titleText && this.topPartGroup && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.topPartGroup && (h("button", { onClick: () => {
         this.open = !this.open;
-      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
-            ${this.topPartGroup ? 'top-part-child' : ''}
+      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("tds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `${this.slotPosition ? this.slotPosition : ''}
+            ${this.topPartGroup ? 'top-part-child' : ''}
             ${this.open ? 'expanded' : 'closed'}` }, h("slot", null))));
   }
   static get is() { return "tds-footer-group"; }

package/dist/collection/components/footer/footer.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { Host } from "@stencil/core/internal";
-import { hasSlot } from "../../utils/utils";
+import hasSlot from "../../utils/hasSlot";
 /**
  * @slot top - Slot for the top part of the Footer.
  * @slot start - Slot for start (left side) of the Footers main part.

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { ComponentsFolder } from "../../utils/constants";
 import readme from "./readme.md";
 import readmeItem from "./footer-item/readme.md";
@@ -46,100 +46,100 @@ export default {
     topPart: false,
   },
 };
-const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
-    <main>
-      <div class="tds-u-p3 ">
-        <div class="tds-body-01">
-          Resize the window to see how the Footer behaves on smaller/bigger screens.
-        </div>
-      </div>
-    </main>
-    <tds-footer
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
+const Template = ({ topPart, modeVariant }) => formatHtmlPreview(`
+    <main>
+      <div class="tds-u-p3 ">
+        <div class="tds-body-01">
+          Resize the window to see how the Footer behaves on smaller/bigger screens.
+        </div>
+      </div>
+    </main>
+    <tds-footer
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
       ${topPart
-  ? `
-      <div slot="top">
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-
-        <tds-footer-group title-text="Title">
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
+  ? `
+      <div slot="top">
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+
+        <tds-footer-group title-text="Title">
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
       `
-  : ''}
-      <div slot="start">
-        <tds-footer-group>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> Link text</a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
-      <div slot="end">
-        <tds-footer-group>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-          <tds-footer-item >
-            <a href="#"> <tds-icon name="truck"></tds-icon></a>
-          </tds-footer-item>
-        </tds-footer-group>
-      </div>
-    </tds-footer>
-  
+  : ''}
+      <div slot="start">
+        <tds-footer-group>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> Link text</a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
+      <div slot="end">
+        <tds-footer-group>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+          <tds-footer-item >
+            <a href="#"> <tds-icon name="truck"></tds-icon></a>
+          </tds-footer-item>
+        </tds-footer-group>
+      </div>
+    </tds-footer>
+  
   `);
 export const Default = Template.bind({});

package/dist/collection/components/header/header-dropdown/header-dropdown.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
  * @slot icon - Slot for an Icon in the dropdown button.
@@ -66,7 +66,7 @@ export class TdsHeaderDropdown {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The label of the button that opens the dropdown.\r\nThis is an alternative to the label slot."
+          "text": "The label of the button that opens the dropdown.\nThis is an alternative to the label slot."
         },
         "attribute": "label",
         "reflect": false

package/dist/collection/components/header/header-dropdown-list/header-dropdown-list.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from "../../../utils/utils";
+import isHeadingElement from "../../../utils/isHeadingElement";
+import getPreviousNestedChildOfSiblingsMatching from "../../../utils/getPreviousNestedChildOfSiblingsMatching";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a dropdown list item.
  */

package/dist/collection/components/header/header-hamburger/header-hamburger.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes } from "../../../utils/utils";
+import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderHamburger {
   render() {
     const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));

package/dist/collection/components/header/header-item/header-item.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { dfs } from "../../../utils/utils";
+import dfs from "../../../utils/dfs";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
  */
@@ -68,7 +68,7 @@ export class TdsHeaderItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the button should appear active. Can be used when the button is\r\ntriggering a dropdown, and the dropdown is open, for example."
+          "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
         },
         "attribute": "active",
         "reflect": false,

package/dist/collection/components/header/header-launcher/header-launcher.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { generateUniqueId, inheritAriaAttributes } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
+import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a launcher list (or grid) element.
  */

package/dist/collection/components/header/header-launcher-button/header-launcher-button.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes } from "../../../utils/utils";
+import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsHeaderLauncherButton {
   constructor() {
     this.active = false;
@@ -35,7 +35,7 @@ export class TdsHeaderLauncherButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the button should appear active. Can be used when the button is\r\ntriggering a dropdown, and the dropdown is open, for example."
+          "text": "If the button should appear active. Can be used when the button is\ntriggering a dropdown, and the dropdown is open, for example."
         },
         "attribute": "active",
         "reflect": false,

package/dist/collection/components/header/header-launcher-grid/header-launcher-grid.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { getPreviousNestedChildOfSiblingsMatching, isHeadingElement } from "../../../utils/utils";
+import getPreviousNestedChildOfSiblingsMatching from "../../../utils/getPreviousNestedChildOfSiblingsMatching";
+import isHeadingElement from "../../../utils/isHeadingElement";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a grid item element.
  */

package/dist/collection/components/header/header-launcher-grid-title/header-launcher-grid-title.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the title text.
  */

package/dist/collection/components/header/header-launcher-list/header-launcher-list.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For list items.
  */

package/dist/collection/components/header/header-launcher-list-title/header-launcher-list-title.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the title text.
  */

package/dist/collection/components/header/header.js

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes, updateListChildrenRoles } from "../../utils/utils";
+import updateListChildrenRoles from "../../utils/updateListChildrenRoles";
+import inheritAriaAttributes from "../../utils/inheritAriaAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> Slot for the left-aligned content consisting of buttons, dropdowns, links, etc.
  * @slot hamburger - Slot for the hamburger button for opening the mobile menu.

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import readmeHamburger from "./header-hamburger/readme.md";
 import readmeTitle from "./header-title/readme.md";
@@ -47,36 +47,36 @@ export default {
   argTypes: {},
   args: {},
 };
-const Template = () => formatHtmlPreview(`
-  <tds-header>
-    <tds-header-title>
-      Example: default
-    </tds-header-title>
-
-    <tds-header-launcher slot="end">
-      <tds-header-launcher-list-title>Cool apps</tds-header-launcher-list-title>
-      <tds-header-launcher-list>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">Trucklyfe</a>
-        </tds-header-launcher-list-item>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">HaulHub</a>
-        </tds-header-launcher-list-item>
-        <tds-header-launcher-list-item>
-          <a href="https://tegel.scania.com">WheelWizz</a>
-        </tds-header-launcher-list-item>
-      </tds-header-launcher-list>
-    </tds-header-launcher>
-
-
-    <tds-header-brand-symbol slot="end">
-      <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
-    </tds-header-brand-symbol>
-
-  </tds-header>
-  
-  <main class="tds-u-w-100 tds-u-p3" style="box-sizing: border-box;">
-    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
-  </main>
+const Template = () => formatHtmlPreview(`
+  <tds-header>
+    <tds-header-title>
+      Example: default
+    </tds-header-title>
+
+    <tds-header-launcher slot="end">
+      <tds-header-launcher-list-title>Cool apps</tds-header-launcher-list-title>
+      <tds-header-launcher-list>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">Trucklyfe</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">HaulHub</a>
+        </tds-header-launcher-list-item>
+        <tds-header-launcher-list-item>
+          <a href="https://tegel.scania.com">WheelWizz</a>
+        </tds-header-launcher-list-item>
+      </tds-header-launcher-list>
+    </tds-header-launcher>
+
+
+    <tds-header-brand-symbol slot="end">
+      <a aria-label="Scania - red gryphon on blue shield" href="https://scania.com"></a>
+    </tds-header-brand-symbol>
+
+  </tds-header>
+  
+  <main class="tds-u-w-100 tds-u-p3" style="box-sizing: border-box;">
+    <p>Find complete examples under the <a href="/?path=/story/patterns-navigation--basic">Patterns section</a>.</p>
+  </main>
   `);
 export const Default = Template.bind({});

package/dist/collection/components/icon/icon.js

@@ -4,12 +4,14 @@ import { iconsCollection } from "./iconsArray";
 export class Icon {
   constructor() {
     this.setIcons = () => this.arrayOfIcons.map((element) => {
+      var _a;
       if (element.name === this.name) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, `icon ${element.name}`), h("path", { fill: "currentColor", d: element.definition })));
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": `icon ${element.name}`, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, h("title", null, (_a = this.svgTitle) !== null && _a !== void 0 ? _a : `${element.name} icon`), h("path", { fill: "currentColor", d: element.definition })));
       }
     });
     this.name = 'truck';
     this.size = '16px';
+    this.svgTitle = undefined;
     this.icons_object = iconsCollection;
     this.arrayOfIcons = [];
   }
@@ -77,6 +79,23 @@ export class Icon {
         "attribute": "size",
         "reflect": true,
         "defaultValue": "'16px'"
+      },
+      "svgTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Override the default title for the svg."
+        },
+        "attribute": "svg-title",
+        "reflect": false
       }
     };
   }

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import { iconsNames } from "./iconsArray";
 import readme from "./readme.md";
 export default {
@@ -42,7 +42,7 @@ export default {
     icon: 'truck',
   },
 };
-const IconTemplate = (args) => formatHtmlPreview(`
-  <tds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></tds-icon> 
+const IconTemplate = (args) => formatHtmlPreview(`
+  <tds-icon name="${args.icon}" size="${`${args.size.toString()}px`}"></tds-icon> 
   `);
 export const Icons = IconTemplate.bind({});