@scania/tegel 0.0.9 → 0.0.10

package/dist/collection/components/radio-button/radio-button.js

@@ -1,4 +1,8 @@
 import { h } from '@stencil/core';
+import { generateUniqueId } from '../../utils/utils';
+/**
+ * @slot label - Slot for the label text.
+ */
 export class TdsRadioButton {
   constructor() {
     this.handleChange = () => {
@@ -9,7 +13,7 @@ export class TdsRadioButton {
     };
     this.name = undefined;
     this.value = undefined;
-    this.radioId = crypto.randomUUID();
+    this.radioId = generateUniqueId();
     this.checked = false;
     this.required = false;
     this.disabled = false;
@@ -81,7 +85,7 @@ export class TdsRadioButton {
         },
         "attribute": "radio-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       },
       "checked": {
         "type": "boolean",

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -0,0 +1,91 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Radio Button`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label text',
+      description: 'Sets the label for the Radio Button.',
+      controls: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Radio Button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    label: 'Label text',
+    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>
+  `);
+export const Default = Template.bind({});

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

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default>  - <b>Unnamed slot.</b> Used for injecting text presented in collapse button
+ * */
 export class TdsSideMenuCollapseButton {
   constructor() {
     this.handleClick = () => {

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

@@ -20,7 +20,7 @@
   position: absolute;
   left: var(--side-menu-width);
   box-shadow: var(--tds-nav-dropdown-menu-box);
-  background-color: var(--tds-grey-958);
+  background-color: var(--tds-sidebar-side-menu-subnav-background);
 }
 :host .state-collapsed .menu .heading-collapsed {
   all: unset;

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

@@ -1,4 +1,9 @@
 import { Fragment, h, Host } from '@stencil/core';
+/**
+ * @slot button-icon - Used for injecting the icon that compliments the dropdown title
+ * @slot button-label - Used for injecting the text, aka dropdown title
+ * @slot <default>  - <b>Unnamed slot.</b> Used for injection of <code>tds-side-menu-dropdown-list</code> subcomponent
+ * */
 export class TdsSideMenuDropdown {
   constructor() {
     this.defaultOpen = false;

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

@@ -1,4 +1,7 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default>  - <b>Unnamed slot.</b> Used for injection of <code>tds-side-menu-dropdown-list-item</code> subcomponent
+ * */
 export class TdsSideMenuDropdownList {
   constructor() {
     this.collapsed = false;

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

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default>  - <b>Unnamed slot.</b> Used for injecting native <code>button</code> and <code>link</code> elements
+ * */
 export class TdsSideMenuDropdownListItem {
   constructor() {
     this.selected = false;

package/dist/collection/components/side-menu/side-menu-item/side-menu-item.css

@@ -53,7 +53,7 @@
 
 @media (min-width: 992px) {
   :host .component.component-collapsed ::slotted(a),
-:host .component.component-collapsed ::slotted(button) {
+  :host .component.component-collapsed ::slotted(button) {
     color: rgba(90, 90, 90, 0);
     overflow: hidden;
   }

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

@@ -1,5 +1,8 @@
 import { h, Host } from '@stencil/core';
 import { dfs } from '../../../utils/utils';
+/**
+ * @slot <default>  - <b>Unnamed slot.</b> Used for injecting native <code>button</code> and <code>link</code> elements
+ * */
 export class TdsSideMenuItem {
   constructor() {
     this.selected = false;

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

@@ -1,4 +1,7 @@
 import { h, Host } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> Used as alternative to props to inject <code><img...</code> element directly into the DOM.
+ * */
 export class TdsSideMenuUser {
   constructor() {
     this.heading = undefined;

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

@@ -1,6 +1,11 @@
 import { h, Host } from '@stencil/core';
 // TODO this component is just for the dropdown detecting that it should
 // change layout
+// FIXME: Can the logic for it be directly integrated in side-menu-user instead?
+/**
+ * @slot <default> -
+ * <b>Unnamed slot.</b> Used as alternative to props to inject <code><img...</code> element directly into the DOM.
+ * */
 export class TdsSideMenuUserImage {
   constructor() {
     this.src = undefined;

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

@@ -2,11 +2,6 @@
   Contains spacing variables for the layout
 */
 /** The breakpoint at which the layout changes from fixed size to full-width. */
-:host([open]) {
-  pointer-events: auto;
-  z-index: 301;
-}
-
 :host {
   pointer-events: none;
   display: block;
@@ -52,6 +47,12 @@
   border-bottom: 1px solid var(--tds-sidebar-side-menu-bottom-menu-border-top);
 }
 
+@media (max-width: 992px) {
+  :host([open]) {
+    pointer-events: auto;
+    z-index: 301;
+  }
+}
 @media (min-width: 992px) {
   :host([persistent]) {
     pointer-events: auto;

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

@@ -3,6 +3,14 @@ import { dfs, isFocusable } from '../../utils/utils';
 const GRID_LG_BREAKPOINT = '992px';
 const OPENING_ANIMATION_DURATION = 400;
 const INITIALIZE_ANIMATION_DELAY = 500;
+/**
+ * @slot overlay - Used of injection of tds-side-menu-overlay
+ * @slot close-button - Used for injection of tds-side-menu-close-button that is show when in mobile view
+ * @slot <default> - <b>Unnamed slot.</b>
+ * Used for nesting main content of Side Menu, e.g. <code><tds-side-menu-item></code> and <code><tds-side-menu-dropdown></code> components
+ * @slot end - Used for items that are presented at the bottom of the Side Menu, e.g. profile settings
+ * @slot sticky-end - Used for tds-side-menu-collapse-button component
+ * */
 export class TdsSideMenu {
   constructor() {
     this.handleMatchesLgBreakpointChange = (e) => {
@@ -189,7 +197,7 @@ export class TdsSideMenu {
           "references": {
             "CollapseEvent": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/side-menu.tsx"
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/side-menu/side-menu.tsx"
             }
           }
         }
@@ -212,7 +220,7 @@ export class TdsSideMenu {
           "references": {
             "CollapseEvent": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/side-menu.tsx"
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/side-menu/side-menu.tsx"
             }
           }
         }
@@ -235,7 +243,7 @@ export class TdsSideMenu {
           "references": {
             "InternalTdsSideMenuPropChange": {
               "location": "local",
-              "path": "/Users/martin.jarsater/Documents/scania/tegel/core/src/components/side-menu/side-menu.tsx"
+              "path": "/Users/johnny/dev/scania/tegel/core/src/components/side-menu/side-menu.tsx"
             }
           }
         }

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

@@ -0,0 +1,215 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import readmeSideMenuUser from './side-menu-user/readme.md';
+import readmeSideMenuOverlay from './side-menu-overlay/readme.md';
+import readmeSideMenuCloseButton from './side-menu-close-button/readme.md';
+import readmeSideMenuCollapseButton from './side-menu-collapse-button/readme.md';
+import readmeSideMenuDropdown from './side-menu-dropdown/readme.md';
+import readmeSideMenuItem from './side-menu-item/readme.md';
+import readmeSideMenuDropdownList from './side-menu-dropdown-list/readme.md';
+import readmeSideMenuDropdownListItem from './side-menu-dropdown-list-item/readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Side Menu`,
+  parameters: {
+    notes: {
+      'Side Menu': readme,
+      'Side Menu Item': readmeSideMenuItem,
+      'Side Menu Dropdown': readmeSideMenuDropdown,
+      'Side Menu Dropdown List': readmeSideMenuDropdownList,
+      'Side Menu Dropdown List Item': readmeSideMenuDropdownListItem,
+      'Side Menu User': readmeSideMenuUser,
+      'Side Menu Collapse Button': readmeSideMenuCollapseButton,
+      'Side Menu Close Button': readmeSideMenuCloseButton,
+      'Side Menu Overlay': readmeSideMenuOverlay,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    persistent: {
+      name: 'Persistent',
+      description: 'Set the Side Menu to always show. This should be used if there are more navigation items to show than can always fit in the Header, more than three Header items is a good rule of thumb.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    collapsible: {
+      name: 'Collapsible',
+      description: 'Make the Side Menu collapsible',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'persistent', truthy: true },
+    },
+  },
+  args: {
+    persistent: true,
+    collapsible: false,
+  },
+};
+const Template = ({ persistent, collapsible }) => formatHtmlPreview(`
+    <script>
+    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+    window.demoSideMenu = document.querySelector('#demo-side-menu');
+  </script>
+  <style>
+    :root {
+      --app-bar-height: 64px;
+    }
+
+    /* Note: to make the layout fill the entire viewport height you'll need to set the */
+    /* height of the parent element and all of its ancestors to 100%. */
+    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
+    .demo-layout {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .demo-header {
+      position: sticky;
+      top: 0;
+    }
+    .demo-wrap-side-menu-and-main {
+      display: flex;
+      flex-grow: 1;
+    }
+    ${persistent
+  ? `
+        /* the lg breakpoint is used here to match the breakpoint used in the Header */
+    @media (min-width: 992px) {
+      #demo-side-menu {
+        /* We suggest you attach the persistent Side Menu to your layout like this: */
+        height: calc(100vh - var(--app-bar-height));
+        position: sticky;
+        top: var(--app-bar-height);
+        left: 0px;
+      }
+    }`
+  : ''}
+    /* If an extra button in the Header is required except on */
+    /* very narrow screens, you can use classes like these: */
+    .demo-hide {
+      display: none;
+    }
+
+    /* https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints */
+    @media (min-width: 375px) {
+      .demo-xs-hide {
+        display: none;
+      }
+      .demo-xs-show {
+        display: block;
+      }
+    }
+  </style>
+
+  <div class="demo-layout">
+    <tds-header class="demo-header">
+      <tds-header-hamburger onclick="demoSideMenu.open = true;" aria-expanded="false" aria-label="Open application drawer" aria-haspopup="true"></tds-header-hamburger>
+
+      <tds-header-title>
+        My Application
+      </tds-header-title>
+
+      <i style="color:white">Header items omitted for brevity. See patterns/navigation</i>
+
+      <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>
+
+    <div class="demo-wrap-side-menu-and-main">
+      <!-- Note: the "persistent" property keeps the menu open on desktop -->
+      <tds-side-menu aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
+        <tds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></tds-side-menu-overlay>
+
+        <tds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></tds-side-menu-close-button>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="timer" size="24"></tds-icon>
+            About us
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="truck" size="24"></tds-icon>
+            Trucks
+          </button>
+        </tds-side-menu-item>
+
+        <tds-side-menu-dropdown default-open selected>
+          <tds-icon slot="button-icon" name="profile" size="24"></tds-icon>
+          <span slot="button-label">
+            Wheel types
+          </span>
+          <tds-side-menu-dropdown-list>
+            <tds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">
+                Hub-centric wheel
+              </a>
+            </tds-side-menu-dropdown-list-item>
+            <tds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com" aria-current="page">
+                Rim wheel
+              </a>
+            </tds-side-menu-dropdown-list-item>
+          </tds-side-menu-dropdown-list>
+        </tds-side-menu-dropdown>
+
+        <tds-side-menu-item>
+          <button>
+            <tds-icon name="star" size="24"></tds-icon>
+            Values
+          </button>
+        </tds-side-menu-item>
+
+        ${collapsible
+  ? `<tds-side-menu-collapse-button slot="sticky-end">
+          Collapse  
+        </tds-side-menu-collapse-button>`
+  : ''}
+
+      </tds-side-menu>
+
+      <main class="tds-u-h-100 tds-u-p3" style="box-sizing: border-box;">
+        <p>If there are more than a few buttons and/or links in the Header, they might not fit on medium size screens. 
+        <br/>In that case they should be placed in a persistent Side Menu — which is always visible on large screens.</p>
+
+        <p><i>Note: The Side Menu is sticky, and should not scroll with the main content of the page.</i></p>
+
+        <p><i>Note: The collapse button is optional.</i></p>
+        <button id="test">Toggle the collapsed state programatically</button>
+      </main>
+    </div>
+  </div>
+  <script>
+    sideMenu = document.querySelector('tds-side-menu')
+    document.querySelector('#test').addEventListener('click', ()=> {
+      sideMenu.collapsed = !sideMenu.collapsed;
+    })
+
+    document.querySelector('tds-side-menu-collapse-button').addEventListener('tdsCollapse', (event) => {
+      console.log(event)
+    })
+  </script>
+  `);
+export const Default = Template.bind({});

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { generateUniqueId } from '../../utils/utils';
 export class TdsSlider {
   constructor() {
     this.wrapperElement = null;
@@ -12,7 +13,6 @@ export class TdsSlider {
     this.scrubberGrabbed = false;
     this.scrubberLeft = 0;
     this.tickValues = [];
-    this.disabledState = false;
     this.readonlyState = false;
     this.useControls = false;
     this.useInput = false;
@@ -36,7 +36,7 @@ export class TdsSlider {
     this.name = '';
     this.scrubberSize = 'lg';
     this.snap = false;
-    this.sliderId = crypto.randomUUID();
+    this.sliderId = generateUniqueId();
   }
   /** Public method to re-initialise the slider if some configuration props are changed */
   async reset() {
@@ -297,7 +297,6 @@ export class TdsSlider {
       }
       this.tickValues.push(this.getMax());
     }
-    this.disabledState = this.disabled;
     this.readonlyState = this.readOnly;
     this.useInput = false;
     this.useControls = false;
@@ -307,27 +306,23 @@ export class TdsSlider {
     else if (this.input) {
       this.useInput = true;
     }
-    this.useSmall = false;
-    if (this.scrubberSize === 'sm') {
-      this.useSmall = true;
-    }
-    this.useSnapping = false;
-    if (this.snap) {
-      this.useSnapping = true;
-    }
+    this.useSmall = this.scrubberSize === 'sm';
+    this.useSnapping = this.snap;
     const min = this.getMin();
     const max = this.getMax();
     if (min > max) {
       console.warn('min-prop must have a higher value than max-prop for the component to work correctly.');
-      this.disabledState = true;
+      this.disabled = true;
     }
   }
   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: `tds-slider ${this.disabledState ? 'disabled' : ''} ${this.useSmall ? 'tds-slider-small' : ''}`, ref: (el) => {
+    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: `tds-slider ${this.disabled ? 'disabled' : ''} ${this.useSmall ? 'tds-slider-small' : ''}`, ref: (el) => {
         this.wrapperElement = el;
       } }, h("label", { class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { class: "tds-slider__input-values" }, h("div", { ref: (el) => {
         this.minusElement = el;
-      }, class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => (this.minusElement = el), class: "tds-slider__control tds-slider__control-minus" }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
+      }, class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => {
+        this.minusElement = el;
+      }, class: "tds-slider__control tds-slider__control-minus" }, h("tds-icon", { name: "minus", size: "16px" })))), h("div", { class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { class: "tds-slider__value-dividers-wrapper" }, h("div", { class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { class: "tds-slider__track", ref: (el) => {
         this.trackElement = el;
       }, tabindex: this.disabled ? '-1' : '0' }, h("div", { class: "tds-slider__track-fill", ref: (el) => {
         this.trackFillElement = el;
@@ -344,7 +339,9 @@ export class TdsSlider {
         }
       }, size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, ref: (el) => {
         this.inputElement = el;
-      } })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => (this.plusElement = el), class: "tds-slider__control tds-slider__control-plus" }, h("tds-icon", { name: "plus", size: "16px" })))))));
+      } })))), this.useControls && (h("div", { class: "tds-slider__controls" }, h("div", { ref: (el) => {
+        this.plusElement = el;
+      }, class: "tds-slider__control tds-slider__control-plus" }, h("tds-icon", { name: "plus", size: "16px" })))))));
   }
   static get is() { return "tds-slider"; }
   static get originalStyleUrls() {
@@ -645,7 +642,7 @@ export class TdsSlider {
         },
         "attribute": "slider-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       }
     };
   }