@scania/tegel 0.0.9 → 0.0.11

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

@@ -1,77 +1,30 @@
 import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
+import { inheritAttributes } from '../../utils/utils';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
+ */
 export class TdsPopoverMenu {
   constructor() {
+    this.inheritedAttributes = [];
     this.selector = '';
     this.referenceEl = undefined;
-    this.show = false;
+    this.show = null;
     this.placement = 'auto';
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
   }
-  handleOutsideClick() {
-    if (this.show) {
-      this.show = false;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-    this.renderedShowValue = this.show;
-    this.popperInstance = createPopper(this.target, this.popoverMenuElement, {
-      strategy: 'fixed',
-      placement: this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showMenu = () => {
-      this.show = true;
-    };
-    const hideMenu = () => {
-      this.show = false;
-    };
-    this.target.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-      if (this.show) {
-        hideMenu();
-      }
-      else {
-        showMenu();
-      }
-    });
-    this.popoverMenuElement.addEventListener('mousemove', (event) => {
-      event.stopPropagation();
-    });
-    this.popoverMenuElement.addEventListener('mousedown', (event) => {
-      event.stopPropagation();
-    });
-  }
-  componentDidRender() {
-    if (this.show && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.show;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.host, ['style', 'class']);
   }
   render() {
-    return (h(Host, { class: `tds-popover-menu ${this.show ? 'tds-popover-menu-show' : ''}` }, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", { class: {
+        'tds-popover-menu': true,
+        [(_a = this.inheritedAttributes.class) !== null && _a !== void 0 ? _a : '']: true,
+      }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, h("slot", null))));
   }
   static get is() { return "tds-popover-menu"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["popover-menu.scss"]
@@ -106,7 +59,7 @@ export class TdsPopoverMenu {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -115,7 +68,7 @@ export class TdsPopoverMenu {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Element that will trigger the pop-over (takes priority over selector)"
@@ -137,7 +90,7 @@ export class TdsPopoverMenu {
         },
         "attribute": "show",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "null"
       },
       "placement": {
         "type": "string",
@@ -200,21 +153,5 @@ export class TdsPopoverMenu {
       }
     };
   }
-  static get states() {
-    return {
-      "renderedShowValue": {},
-      "popperInstance": {},
-      "target": {}
-    };
-  }
-  static get elementRef() { return "popoverMenuElement"; }
-  static get listeners() {
-    return [{
-        "name": "mousedown",
-        "method": "handleOutsideClick",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
+  static get elementRef() { return "host"; }
 }

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

@@ -0,0 +1,140 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Popover Menu`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    menuPosition: {
+      name: 'Menu position',
+      description: 'Sets the position of the Popover Menu.',
+      control: {
+        type: 'select',
+      },
+      options: [
+        'Bottom',
+        'Bottom start',
+        'Bottom end',
+        'Top',
+        'Top start',
+        'Top end',
+        'Left',
+        'Left start',
+        'Left end',
+        'Right',
+        'Right start',
+        'Right end',
+        'Auto',
+      ],
+      table: {
+        defaultValue: { summary: 'auto' },
+      },
+    },
+    icons: {
+      name: 'Icons',
+      description: 'Shows the Popover Menu with/without icons.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    menuPosition: 'Auto',
+    icons: false,
+  },
+};
+const Template = ({ menuPosition, icons }) => {
+  const menuPosLookup = {
+    'Bottom': 'bottom',
+    'Bottom start': 'bottom-start',
+    'Bottom end': 'bottom-end',
+    'Top': 'top',
+    'Top start': 'top-start',
+    'Top end': 'top-end',
+    'Left': 'left',
+    'Left start': 'left-start',
+    'Left end': 'left-end',
+    'Right': 'right',
+    'Right start': 'right-start',
+    '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]}">
+      <ul class="tds-popover-menu-wrapper">
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            ${icons ? `<tds-icon name="save" size="16px"></tds-icon>` : ''}
+          Menu item 1
+          </a>
+        </li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            ${icons ? `<tds-icon name="save" size="16px"></tds-icon>` : ''}
+            Menu item 2
+          </a>
+        </li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            ${icons ? `<tds-icon name="save" size="16px"></tds-icon>` : ''}
+            Menu item 3
+          </a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            ${icons ? `<tds-icon name="save" size="16px"></tds-icon>` : ''}
+            Menu item 4
+          </a>
+        </li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            ${icons ? `<tds-icon name="save" size="16px"></tds-icon>` : ''}  
+            Menu item 5
+          </a>
+        </li>
+      </ul>
+    </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>
+    `);
+};
+export const Default = Template.bind({});

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

@@ -6,7 +6,7 @@
   --tds-radio-button-background-hover: var(--tds-blue-800);
   --tds-radio-button-background-focus: var(--tds-blue-800);
   --tds-radio-button-disabled: var(--tds-grey-600);
-  --tds-radio-button-border-color-disabled-after: var(--tds-grey-700);
+  --tds-radio-button-border-color-disabled-after: var(--tds-grey-500);
   --tds-radio-button-color-disabled-after: var(--tds-grey-700);
   --tds-radio-button-color-disabled-before: var(--tds-grey-700);
 }

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> For the text label of the 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> For injection of the <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> For injection of <code>tds-side-menu-dropdown-list-item</code> subcomponents.
+ * */
 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> For injecting a native <code>&lt;button></code> or <code>&lt;a></code> element.
+ * */
 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> For injecting a native <code>&lt;button</code> and <code>&lt;a></code> element.
+ * */
 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> For primary content of the side menu - like buttons.
+ * 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"
             }
           }
         }