@scania/tegel 1.0.1 → 1.1.0

package/dist/collection/components/slider/slider.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { generateUniqueId } from "../../utils/utils";
+import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsSlider {
   constructor() {
     this.wrapperElement = null;
@@ -13,7 +13,6 @@ export class TdsSlider {
     this.thumbGrabbed = false;
     this.thumbLeft = 0;
     this.tickValues = [];
-    this.readonlyState = false;
     this.useControls = false;
     this.useInput = false;
     this.useSmall = false;
@@ -91,6 +90,11 @@ export class TdsSlider {
     }
     this.thumbCore(event);
   }
+  handleValueUpdate(newVal) {
+    this.calculateThumbLeftFromValue(newVal);
+    this.updateValueForced(newVal);
+    this.updateTrack();
+  }
   updateSupposedValueSlot(localLeft) {
     const numTicks = parseInt(this.ticks);
     const trackWidth = this.getTrackWidth();
@@ -237,7 +241,7 @@ export class TdsSlider {
     this.updateTrack();
   }
   grabThumb() {
-    if (this.readonlyState) {
+    if (this.readOnly) {
       return;
     }
     this.thumbGrabbed = true;
@@ -247,7 +251,7 @@ export class TdsSlider {
     return this.max.length;
   }
   controlsStep(delta) {
-    if (this.readonlyState || this.disabled) {
+    if (this.readOnly || this.disabled) {
       return;
     }
     const numTicks = parseInt(this.ticks);
@@ -297,7 +301,6 @@ export class TdsSlider {
       }
       this.tickValues.push(this.getMax());
     }
-    this.readonlyState = this.readOnly;
     this.useInput = false;
     this.useControls = false;
     if (this.controls) {
@@ -316,7 +319,7 @@ export class TdsSlider {
     }
   }
   render() {
-    return (h("div", { class: `tds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: {
+    return (h("div", { class: `tds-slider-wrapper ${this.readOnly ? 'read-only' : ''}` }, h("input", { class: "tds-slider-native-element", type: "range", value: this.value, name: this.name, min: this.min, max: this.max, disabled: this.disabled }), h("div", { class: {
         'tds-slider': true,
         'disabled': this.disabled,
         'tds-slider-small': this.useSmall,
@@ -337,7 +340,7 @@ export class TdsSlider {
       } })))), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
       }, class: "tds-slider__input-value" }, this.max), h("div", { class: "tds-slider__input-field-wrapper" }, h("input", { onFocus: (e) => {
-        if (this.readonlyState) {
+        if (this.readOnly) {
           e.preventDefault();
           this.inputElement.blur();
         }
@@ -689,6 +692,12 @@ export class TdsSlider {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "handleValueUpdate"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "keydown",

package/dist/collection/components/slider/slider.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 {
@@ -229,11 +229,11 @@ const Template = ({ min, max, initialValue, showLabel, labelText, showTicks, num
         >
       </tds-slider>
     </div>
-
+    
      <!-- Script tag for demo purposes -->
     <script>
       slider = document.querySelector('tds-slider')
-
+      
       slider.removeEventListener('tdsChange', null)
       slider.addEventListener('tdsChange', (event) => {
         console.log(event);

package/dist/collection/components/spinner/spinner.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 {

package/dist/collection/components/stepper/stepper.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 the step elements.
  */
@@ -163,7 +163,10 @@ export class TdsStepper {
         "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "internal",
+              "text": "Broadcasts changes in props to the Stepper children"
+            }],
           "text": ""
         },
         "complexType": {
@@ -172,7 +175,7 @@ export class TdsStepper {
           "references": {
             "InternalTdsStepperPropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/stepper/stepper.tsx",
+              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/stepper/stepper.tsx",
               "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
             }
           }

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

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import readmeStepper from "./readme.md";
 import readmeStep from "./step/readme.md";
 import { ComponentsFolder } from "../../utils/constants";

package/dist/collection/components/table/table/table.js

@@ -1,7 +1,7 @@
 // https://stackoverflow.com/questions/63051941/how-to-pass-data-as-array-of-object-in-stencil-js
 // https://medium.com/@scottmgerstl/passing-an-object-or-array-to-stencil-dd62b7d92641
 import { h, Host, } from "@stencil/core";
-import { generateUniqueId } from "../../../utils/utils";
+import generateUniqueId from "../../../utils/generateUniqueId";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the table contents.
  */
@@ -255,7 +255,7 @@ export class TdsTable {
           "references": {
             "InternalTdsTablePropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/table/table/table.tsx",
+              "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/table/table/table.tsx",
               "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
             }
           }

package/dist/collection/components/table/table-component-basic.stories.js

@@ -1,4 +1,3 @@
-import { formatHtmlPreview } from "../../utils/utils";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";
@@ -9,6 +8,7 @@ import tdsBodyRowExpandable from "./table-body-row-expandable/readme.md";
 import tdsBodyCell from "./table-body-cell/readme.md";
 import tdsTableFooter from "./table-footer/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 export default {
   title: `${ComponentsFolder}/Table`,
   parameters: {

package/dist/collection/components/table/table-component-batch-actions.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";

package/dist/collection/components/table/table-component-custom-width.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";

package/dist/collection/components/table/table-component-expandable-rows.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";

package/dist/collection/components/table/table-component-filtering.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";
@@ -56,13 +56,6 @@ export default {
         defaultValue: { summary: false },
       },
     },
-    useDataProp: {
-      name: 'Use data prop',
-      description: 'Loads Table data from property.',
-      control: {
-        type: 'boolean',
-      },
-    },
     verticalDivider: {
       name: 'Vertical dividers',
       description: 'Enables vertical dividers between Table columns.',
@@ -117,7 +110,6 @@ export default {
     modeVariant: 'Inherit from parent',
     compactDesign: false,
     responsiveDesign: true,
-    useDataProp: true,
     verticalDivider: false,
     noMinWidth: false,
     column1Width: '',

package/dist/collection/components/table/table-component-multiselect.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";
@@ -110,7 +110,6 @@ export default {
     modeVariant: 'Inherit from parent',
     compactDesign: false,
     responsiveDesign: false,
-    multiselect: true,
     verticalDivider: false,
     noMinWidth: false,
     column1Width: '',

package/dist/collection/components/table/table-component-pagination.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";

package/dist/collection/components/table/table-component-sorting.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import tdsTable from "./table/readme.md";
 import tdsTableToolbar from "./table-toolbar/readme.md";
 import tdsHeader from "./table-header/readme.md";

package/dist/collection/components/table/table.filtering.spec.js

@@ -19,8 +19,5 @@ describe('tds-table filtering', () => {
     inputEl.dispatchEvent(new Event('keydown'));
     inputEl.dispatchEvent(new Event('input'));
     inputEl.dispatchEvent(new Event('keyup'));
-    // eslint-disable-next-line
-    const mismatchingCellEl = (await page.doc.querySelector('tds-body-cell[cell-value^=Ferrell]'));
-    // TODO: assert that mismatchingCellEl is not visible, not sure how to do it..
   });
 });

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -10,8 +10,9 @@
   min-width: 142px;
   display: block;
   width: calc(100% - 32px);
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
+  font: var(--tds-headline-07) !important;
+  letter-spacing: var(--tds-headline-07-ls) !important;
   cursor: pointer;
   padding: 16px;
   white-space: nowrap;

package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js

@@ -1,7 +1,7 @@
-import { formatHtmlPreview } from "../../../utils/utils";
 import readme from "./readme.md";
 import readmeItem from "./folder-tab/readme.md";
 import { ComponentsFolder } from "../../../utils/constants";
+import formatHtmlPreview from "../../../stories/formatHtmlPreview";
 export default {
   title: `${ComponentsFolder}/Tabs`,
   parameters: {

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.css

@@ -9,8 +9,9 @@
 }
 :host ::slotted(*) {
   all: unset;
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
+  font: var(--tds-headline-07) !important;
+  letter-spacing: var(--tds-headline-07-ls) !important;
   color: var(--tds-navigation-tabs-tab-color);
   text-decoration: none;
   display: block;

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
  */
@@ -44,9 +44,6 @@ export class TdsInlineTabs {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;
-              this.tdsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-              });
             }
           }
         });
@@ -68,9 +65,6 @@ export class TdsInlineTabs {
         if (index === tabIndex) {
           element.setSelected(true);
           this.selectedIndex = tabIndex;
-          this.tdsChange.emit({
-            selectedTabIndex: this.selectedIndex,
-          });
         }
         return element;
       });

package/dist/collection/components/tabs/inline-tabs/inline-tabs.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import readmeTab from "./inline-tab/readme.md";
 import { ComponentsFolder } from "../../../utils/constants";

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.css

@@ -8,9 +8,10 @@
 }
 :host ::slotted(*) {
   all: unset;
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
-  color: var(--tds-navigation-tabs-tab-color);
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
+  font: var(--tds-headline-07) !important;
+  letter-spacing: var(--tds-headline-07-ls) !important;
+  color: var(--tds-navigation-tabs-tab-color) !important;
   text-decoration: none;
   display: block;
   position: relative;

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -46,9 +46,6 @@ export class TdsNavigationTabs {
               this.children.forEach((element) => element.setSelected(false));
               item.setSelected(true);
               this.selectedIndex = index;
-              this.tdsChange.emit({
-                selectedTabIndex: this.selectedIndex,
-              });
             }
           }
         });

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../../stories/formatHtmlPreview";
 import readme from "./readme.md";
 import readmeTab from "./navigation-tab/readme.md";
 import { ComponentsFolder } from "../../../utils/constants";

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
@@ -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"; }

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`,

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`,

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

@@ -73,15 +73,17 @@
 }
 :host .content .header,
 :host .content slot[name=header]::slotted(*) {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
+  font: var(--tds-headline-07) !important;
+  letter-spacing: var(--tds-headline-07-ls) !important;
   color: var(--tds-toast-headline-color);
 }
 :host .content .subheader,
 :host .content slot[name=subheader]::slotted(*) {
+  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
   color: var(--tds-toast-subheadline-color);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font: var(--tds-detail-02) !important;
+  letter-spacing: var(--tds-detail-02-ls) !important;
   max-width: 252px;
   white-space: nowrap;
   overflow: hidden;

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.

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 {

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.
  */

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 {

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 {
@@ -111,26 +111,16 @@ const ComponentTooltip = ({ tooltipPosition, mouseOverTooltip, text, slot }) =>
     </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}"
+      selector="#my-tooltip-button"
       mouse-over-tooltip="${mouseOverTooltip}">
       ${slot}
     </tds-tooltip>
 
     <!-- Demo button for presentation purposes -->
-    <tds-button size= 'sm' id="button-1" text='Hover me'></tds-button>
+    <tds-button size= 'sm' id="my-tooltip-button" 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({});

package/dist/collection/stories/Installation/installation.stories.js

@@ -44,8 +44,7 @@ export const Installation = {
             <li>
                 <p>Paste the following into that file:</p>
                 <pre>
-<code>import &#123; defineCustomElements, JSX as LocalJSX &#125; from
-    '@scania/tegel/loader';
+<code>import &#123; defineCustomElements, JSX as LocalJSX &#125; from '@scania/tegel/loader';
 import &#123; DetailedHTMLProps, HTMLAttributes &#125; from 'react';
 
 type StencilProps&lt;T&gt; = &#123;
@@ -79,8 +78,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import './register-webcomponents';
 
-const root = ReactDOM.createRoot(document.
-    getElementById('root') as HTMLElement);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
 &lt;React.StrictMode&gt;
     &lt;App /&gt;
@@ -115,8 +113,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { defineCustomElements } from '@scania/tegel/loader';
 
-const root = ReactDOM.createRoot(document.
-    getElementById('root') as HTMLElement);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
 &lt;React.StrictMode&gt;
     &lt;App /&gt;
@@ -145,8 +142,7 @@ defineCustomElements();</code>
             <li>
                 <p>In your main.ts import and call the function <code>defineCustomElements()</code></p>
                 <pre>
-                    <code>import { platformBrowserDynamic } from
-                        '@angular/platform-browser-dynamic';
+                    <code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { defineCustomElements } from '@scania/tegel/loader';
 import { AppModule } from './app/app.module';
 

package/dist/collection/stories/formatHtmlPreview.js

@@ -0,0 +1,10 @@
+import prettier from "prettier/standalone";
+import parserBabel from "prettier/parser-babel";
+import parserHtml from "prettier/parser-html";
+const prettierOptions = {
+  bracketSameLine: false,
+  htmlWhitespaceSensitivity: 'ignore',
+  printWidth: 100,
+};
+const formatHtmlPreview = (htmlStr) => prettier.format(htmlStr, Object.assign({ parser: 'html', plugins: [parserBabel, parserHtml] }, prettierOptions));
+export default formatHtmlPreview;

package/dist/collection/stories/foundations/color/color-brand.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Color',
   parameters: {

package/dist/collection/stories/foundations/color/color-scales.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Color',
   parameters: {

package/dist/collection/stories/foundations/color/color-semantic.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Color',
   parameters: {
@@ -37,4 +37,4 @@ const Template = () => formatHtmlPreview(`
   <div class="demo-wrapper" style="background-color: var(--tds-information)">
     <span>--tds-information</span>
   </div>`);
-export const Sematic = Template.bind({});
+export const Semantic = Template.bind({});

package/dist/collection/stories/foundations/grid/grid.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Grid',
   parameters: {

package/dist/collection/stories/foundations/spacing/spacing-element.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Spacing',
   parameters: {

package/dist/collection/stories/foundations/spacing/spacing-layout.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Spacing',
   parameters: {

package/dist/collection/stories/foundations/typography/typography-body.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Typography',
   parameters: {

package/dist/collection/stories/foundations/typography/typography-detail.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Typography',
   parameters: {

package/dist/collection/stories/foundations/typography/typography-headline.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../../utils/utils";
+import formatHtmlPreview from "../../formatHtmlPreview";
 export default {
   title: 'Foundations/Typography',
   parameters: {