@scania/tegel 1.0.0 → 1.0.3

package/dist/collection/components/modal/modal.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 {
@@ -78,32 +78,32 @@ const sizeLookUp = {
   'Small': 'sm',
   'Extra small': 'xs',
 };
-const ModalTemplate = ({ actionsPosition, size, headerText, bodyContent, showModal }) => formatHtmlPreview(`
- <!-- The button below is just for demo purposes -->
-  <tds-button id="my-modal-button" text="Open Modal"></tds-button>
-  
-  
-  <tds-modal 
-  header="${headerText}"
-  selector="#my-modal-button"   
-   ${showModal ? 'show' : ''} 
-   id="my-modal" size="${sizeLookUp[size]}" 
-   actions-position="${actionsPosition.toLowerCase()}">          
-      <span slot="body">
-          ${bodyContent}
-      </span>      
-      <span slot='actions'>
-        <tds-button data-dismiss-modal size="md" text="Delete" type="danger"></tds-button>
-        <tds-button data-dismiss-modal size="md" text="Cancel"></tds-button>
-      </span>      
-  </tds-modal>
-  
-  <!-- The script below is just for demo purposes -->
-  <script>
-    modal = document.querySelector('tds-modal')
-    modal.addEventListener('tdsClose', (event) => {
-      console.log(event)
-    })
-  </script>
+const ModalTemplate = ({ actionsPosition, size, headerText, bodyContent, showModal }) => formatHtmlPreview(`
+ <!-- The button below is just for demo purposes -->
+  <tds-button id="my-modal-button" text="Open Modal"></tds-button>
+  
+  
+  <tds-modal 
+  header="${headerText}"
+  selector="#my-modal-button"   
+   ${showModal ? 'show' : ''} 
+   id="my-modal" size="${sizeLookUp[size]}" 
+   actions-position="${actionsPosition.toLowerCase()}">          
+      <span slot="body">
+          ${bodyContent}
+      </span>      
+      <span slot='actions'>
+        <tds-button data-dismiss-modal size="md" text="Delete" type="danger"></tds-button>
+        <tds-button data-dismiss-modal size="md" text="Cancel"></tds-button>
+      </span>      
+  </tds-modal>
+  
+  <!-- The script below is just for demo purposes -->
+  <script>
+    modal = document.querySelector('tds-modal')
+    modal.addEventListener('tdsClose', (event) => {
+      console.log(event)
+    })
+  </script>
   `);
 export const Default = ModalTemplate.bind({});

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { inheritAttributes } from "../../utils/utils";
+import inheritAttributes from "../../utils/inheritAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
  */
@@ -88,7 +88,7 @@ export class TdsPopoverCanvas {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\r\nwill be decided by this prop and will need to be controlled from the outside."
+          "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
         },
         "attribute": "show",
         "reflect": false,

package/dist/collection/components/popover-canvas/popover-canvas.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 {
@@ -54,39 +54,39 @@ const ComponentPopoverCanvas = ({ canvasPosition }) => {
     'Right end': 'right-end',
     'Auto': 'auto',
   };
-  return formatHtmlPreview(`
-      <style>
-        /* demo-wrapper and demo-styles is for demonstration purposes only */
-        .demo-wrapper {
-          display: flex;
-          flex-wrap; nowrap;
-          align-items: center;
-        }
-      </style>
-
-      <!-- The 'referenceEl' prop can be used instead of 'selector', 
-      wich might be preferable in frameworks like React -->
-      <tds-popover-canvas
-        placement="${canvasPosLookup[canvasPosition]}"
-        selector="#trigger"
-        class="tds-u-p2">
-        <h2 class="tds-headline-02 tds-u-mt0">A Popover Canvas!</h2>
-        <p class="tds-body-01">
-          Where you can put anything you want!
-        </p>  
-        <tds-link>
-          <a target="_blank" rel="noopener noreferrer" href="https://tegel.scania.com">Even links!</a>
-        </tds-link>
-      </tds-popover-canvas>
-
-      <!-- demo-wrapper code below is for demonstration purposes only -->
-      <div class="demo-wrapper">
-        <span class="tds-u-mr2">Click icon for Popover Canvas</span>
-        
-        <tds-button aria-label="menu" only-icon id="trigger" type="secondary" size="sm">
-          <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
-        </tds-button>
-      </div>
+  return formatHtmlPreview(`
+      <style>
+        /* demo-wrapper and demo-styles is for demonstration purposes only */
+        .demo-wrapper {
+          display: flex;
+          flex-wrap; nowrap;
+          align-items: center;
+        }
+      </style>
+
+      <!-- The 'referenceEl' prop can be used instead of 'selector', 
+      wich might be preferable in frameworks like React -->
+      <tds-popover-canvas
+        placement="${canvasPosLookup[canvasPosition]}"
+        selector="#trigger"
+        class="tds-u-p2">
+        <h2 class="tds-headline-02 tds-u-mt0">A Popover Canvas!</h2>
+        <p class="tds-body-01">
+          Where you can put anything you want!
+        </p>  
+        <tds-link>
+          <a target="_blank" rel="noopener noreferrer" href="https://tegel.scania.com">Even links!</a>
+        </tds-link>
+      </tds-popover-canvas>
+
+      <!-- demo-wrapper code below is for demonstration purposes only -->
+      <div class="demo-wrapper">
+        <span class="tds-u-mr2">Click icon for Popover Canvas</span>
+        
+        <tds-button aria-label="menu" only-icon id="trigger" type="secondary" size="sm">
+          <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
+        </tds-button>
+      </div>
     `);
 };
 export const Default = ComponentPopoverCanvas.bind({});

package/dist/collection/components/popover-core/popover-core.js

@@ -313,7 +313,7 @@ export class TdsPopoverCore {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the popover should hide automatically.\r\nAlternatevly it can be hidden externally based on emitted events."
+          "text": "Decides if the popover should hide automatically.\nAlternatevly it can be hidden externally based on emitted events."
         },
         "attribute": "auto-hide",
         "reflect": false,

package/dist/collection/components/popover-menu/popover-menu.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { inheritAttributes } from "../../utils/utils";
+import inheritAttributes from "../../utils/inheritAttributes";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
  */
@@ -89,7 +89,7 @@ export class TdsPopoverMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\r\nwill be decided by this prop and will need to be controlled from the outside. This\r\nalso means that clicking outside of the popover won't close it."
+          "text": "Controls whether the Popover is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside. This\nalso means that clicking outside of the popover won't close it."
         },
         "attribute": "show",
         "reflect": false,

package/dist/collection/components/popover-menu/popover-menu.stories.js

@@ -1,4 +1,4 @@
-import { formatHtmlPreview } from "../../utils/utils";
+import formatHtmlPreview from "../../stories/formatHtmlPreview";
 import popoverMenuReadme from "./readme.md";
 import popoverMenuItemReadme from "./popover-menu-item/readme.md";
 import { ComponentsFolder } from "../../utils/constants";
@@ -83,66 +83,64 @@ const Template = ({ menuPosition, icons, fluidWidth }) => {
     'Right end': 'right-end',
     'Auto': 'auto',
   };
-  return formatHtmlPreview(`
-    <style>
-      /* demo-wrapper styles is for demonstration purposes only */
-      .demo-wrapper {
-        display: flex;
-        flex-wrap: nowrap;
-        align-items: center;
-      }
-    </style>
-
-    <tds-popover-menu
-      id="my-popover-menu"
-      placement="${menuPosLookup[menuPosition]}"
-      ${fluidWidth ? 'fluid-width' : ''}
-      >
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} ${fluidWidth ? 'The menu width adjusts to the widest word' : 'Action'} </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item disabled>
-          <button> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </button>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-divider></tds-divider>
-        <tds-popover-menu-item>
-          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
-        </tds-popover-menu-item>
-        <tds-popover-menu-item>
-          <button> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </button>
-        </tds-popover-menu-item>
-    </tds-popover-menu>
-
-    <!-- demo-wrapper code below is for demonstration purposes only -->
-    <div class="demo-wrapper">
-      <span class="tds-u-mr2">Click icon for Popover Menu</span>
-      
-      <tds-button aria-label="menu" only-icon id="my-popover-button" type="ghost" size="sm">
-        <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
-      </tds-button>
-    </div>
-    
-    <script>
-      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
-      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');
-    </script>
+  return formatHtmlPreview(`
+    <style>
+      /* demo-wrapper styles is for demonstration purposes only */
+      .demo-wrapper {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+      }
+    </style>
+
+    <tds-popover-menu
+      id="my-popover-menu"
+      placement="${menuPosLookup[menuPosition]}"
+      ${fluidWidth ? 'fluid-width' : ''}
+      selector="#my-popover-button"
+      >
+        <tds-popover-menu-item>
+          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
+        </tds-popover-menu-item>
+        <tds-divider></tds-divider>
+        <tds-popover-menu-item>
+          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} ${fluidWidth ? 'The menu width adjusts to the widest word' : 'Action'} </a>
+        </tds-popover-menu-item>
+        <tds-popover-menu-item>
+          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
+        </tds-popover-menu-item>
+        <tds-popover-menu-item disabled>
+          <button> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </button>
+        </tds-popover-menu-item>
+        <tds-divider></tds-divider>
+        <tds-popover-menu-item>
+          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
+        </tds-popover-menu-item>
+        <tds-popover-menu-item>
+          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
+        </tds-popover-menu-item>
+        <tds-popover-menu-item>
+          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
+        </tds-popover-menu-item>
+        <tds-divider></tds-divider>
+        <tds-popover-menu-item>
+          <a href="#"> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </a>
+        </tds-popover-menu-item>
+        <tds-popover-menu-item>
+          <button> ${icons ? '<tds-icon name="share"></tds-icon>' : ''} Action </button>
+        </tds-popover-menu-item>
+    </tds-popover-menu>
+
+    <!-- demo-wrapper code below is for demonstration purposes only -->
+    <div class="demo-wrapper">
+      <span class="tds-u-mr2">Click icon for Popover Menu</span>
+      
+      <tds-button aria-label="menu" only-icon id="my-popover-button" type="ghost" size="sm">
+        <tds-icon slot="icon" size="16px" name="kebab"></tds-icon>
+      </tds-button>
+    </div>
+    
+    
     `);
 };
 export const Default = Template.bind({});

package/dist/collection/components/radio-button/radio-button.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.
  */
@@ -152,10 +152,10 @@ export class TdsRadioButton {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique Radio Button identifier and status when it is checked.\r\nIf no ID is specified, a random one will be generated.\r\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
+          "text": "Sends unique Radio Button identifier and status when it is checked.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
         },
         "complexType": {
-          "original": "{\r\n    radioId: string;\r\n    value: string;\r\n  }",
+          "original": "{\n    radioId: string;\n    value: string;\n  }",
           "resolved": "{ radioId: string; value: string; }",
           "references": {}
         }

package/dist/collection/components/radio-button/radio-button.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 {
@@ -43,49 +43,49 @@ export default {
     disabled: false,
   },
 };
-const Template = ({ label, disabled }) => formatHtmlPreview(`
-  <style>
-  .demo-fieldset-reset { 
-    border: 0;
-    margin: 0;
-    min-width: 0;
-    padding: 0; 
-  }
-</style>
-
-  <fieldset class="demo-fieldset-reset">
-  <tds-radio-button 
-    name="rb-example"
-    value="option1"
-    radio-id="option-1"
-    required=false
-    ${disabled ? 'disabled' : ''}
-    checked="true" 
-  >
-    <div slot="label">
-      ${label} 1
-    </div>
-  </tds-radio-button>
-
-  <tds-radio-button
-    name="rb-example"
-    value="option2"
-    radio-id="option-2"
-    required=false
-    ${disabled ? 'disabled' : ''} 
-  >
-    <div slot="label">
-      ${label} 2
-    </div>
-  </tds-radio-button>
-    
-  </fieldset>
-
-  <!-- Script tag with eventlistener for demo purposes. -->
-  <script>
-  document.addEventListener('tdsChange', (event) => {
-    console.log(event)
-  })
-  </script>
+const Template = ({ label, disabled }) => formatHtmlPreview(`
+  <style>
+  .demo-fieldset-reset { 
+    border: 0;
+    margin: 0;
+    min-width: 0;
+    padding: 0; 
+  }
+</style>
+
+  <fieldset class="demo-fieldset-reset">
+  <tds-radio-button 
+    name="rb-example"
+    value="option1"
+    radio-id="option-1"
+    required=false
+    ${disabled ? 'disabled' : ''}
+    checked="true" 
+  >
+    <div slot="label">
+      ${label} 1
+    </div>
+  </tds-radio-button>
+
+  <tds-radio-button
+    name="rb-example"
+    value="option2"
+    radio-id="option-2"
+    required=false
+    ${disabled ? 'disabled' : ''} 
+  >
+    <div slot="label">
+      ${label} 2
+    </div>
+  </tds-radio-button>
+    
+  </fieldset>
+
+  <!-- Script tag with eventlistener for demo purposes. -->
+  <script>
+  document.addEventListener('tdsChange', (event) => {
+    console.log(event)
+  })
+  </script>
   `);
 export const Default = Template.bind({});

package/dist/collection/components/side-menu/side-menu-close-button/side-menu-close-button.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaAttributes } from "../../../utils/utils";
+import inheritAriaAttributes from "../../../utils/inheritAriaAttributes";
 export class TdsSideMenuCloseButton {
   render() {
     const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));

package/dist/collection/components/side-menu/side-menu-collapse-button/side-menu-collapse-button.js

@@ -63,7 +63,7 @@ export class TdsSideMenuCollapseButton {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event that is broadcast when the collapse button is clicked.\r\nPrevent it from disabling automatic collapsing, and set the collapsed prop on the Side Menu yourself."
+          "text": "Event that is broadcast when the collapse button is clicked.\nPrevent it from disabling automatic collapsing, and set the collapsed prop on the Side Menu yourself."
         },
         "complexType": {
           "original": "CollapseEvent",

package/dist/collection/components/side-menu/side-menu-dropdown/side-menu-dropdown.js

@@ -101,7 +101,7 @@ export class TdsSideMenuDropdown {
         "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": "button-label",
         "reflect": false

package/dist/collection/components/side-menu/side-menu-item/side-menu-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 injecting a native <code>&lt;button</code> and <code>&lt;a></code> element.
  * */
@@ -103,7 +103,7 @@ export class TdsSideMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the item should appear active. Can be used when the item is\r\ntriggering a dropdown, and the dropdown is open, for example."
+          "text": "If the item should appear active. Can be used when the item is\ntriggering a dropdown, and the dropdown is open, for example."
         },
         "attribute": "active",
         "reflect": false,

package/dist/collection/components/side-menu/side-menu.js

@@ -123,7 +123,7 @@ export class TdsSideMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\r\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tds-Collapse event."
+          "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tds-Collapse event."
         },
         "attribute": "collapsed",
         "reflect": false,
@@ -154,7 +154,7 @@ export class TdsSideMenu {
           "references": {
             "CollapseEvent": {
               "location": "local",
-              "path": "C:/Users/nliglf/Repos/tegel/core/src/components/side-menu/side-menu.tsx",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
             }
           }
@@ -178,7 +178,7 @@ export class TdsSideMenu {
           "references": {
             "CollapseEvent": {
               "location": "local",
-              "path": "C:/Users/nliglf/Repos/tegel/core/src/components/side-menu/side-menu.tsx",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
             }
           }
@@ -202,7 +202,7 @@ export class TdsSideMenu {
           "references": {
             "InternalTdsSideMenuPropChange": {
               "location": "local",
-              "path": "C:/Users/nliglf/Repos/tegel/core/src/components/side-menu/side-menu.tsx",
+              "path": "/Users/martin.jarsater/Documents/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
               "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
             }
           }