@scania/tegel 0.0.71-beta → 1.0.0

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

@@ -1,77 +1,32 @@
-import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
-export class PopoverMenu {
+import { Host, h } from "@stencil/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;
+    this.fluidWidth = false;
   }
-  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: `sdds-popover-menu ${this.show ? 'sdds-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,
+        'fluid-width': this.fluidWidth,
+      }, selector: this.selector, referenceEl: this.referenceEl, show: this.show, placement: this.placement, offsetSkidding: this.offsetSkidding, offsetDistance: this.offsetDistance }, h("div", { role: "list" }, h("slot", null)))));
   }
-  static get is() { return "sdds-popover-menu"; }
-  static get encapsulation() { return "shadow"; }
+  static get is() { return "tds-popover-menu"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["popover-menu.scss"]
@@ -96,7 +51,7 @@ export class PopoverMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The CSS-selector for an element that will trigger the popover"
+          "text": "The CSS-selector for an element that will trigger the pop-over"
         },
         "attribute": "selector",
         "reflect": false,
@@ -106,19 +61,20 @@ export class PopoverMenu {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLElement"
             }
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
-          "text": "Element that will trigger the popover (takes priority over selector)"
+          "text": "Element that will trigger the pop-over (takes priority over selector)"
         }
       },
       "show": {
@@ -133,11 +89,11 @@ export class PopoverMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the Popover Menu should be visible from the start"
+          "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."
         },
         "attribute": "show",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "null"
       },
       "placement": {
         "type": "string",
@@ -148,7 +104,8 @@ export class PopoverMenu {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "@popperjs/core",
+              "id": ""
             }
           }
         },
@@ -197,24 +154,26 @@ export class PopoverMenu {
         "attribute": "offset-distance",
         "reflect": false,
         "defaultValue": "8"
+      },
+      "fluidWidth": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true this unsets the width (160px) of the Popover Menu"
+        },
+        "attribute": "fluid-width",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
-  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,148 @@
+import { formatHtmlPreview } from "../../utils/utils";
+import popoverMenuReadme from "./readme.md";
+import popoverMenuItemReadme from "./popover-menu-item/readme.md";
+import { ComponentsFolder } from "../../utils/constants";
+export default {
+  title: `${ComponentsFolder}/Popover Menu`,
+  parameters: {
+    layout: 'centered',
+    notes: { 'Popover Menu': popoverMenuReadme, 'Popover Menu Item': popoverMenuItemReadme },
+    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',
+      },
+    },
+    fluidWidth: {
+      name: 'Fluid width',
+      description: 'Unsets the width of the Popover Menu.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    menuPosition: 'Auto',
+    icons: false,
+    fluidWidth: false,
+  },
+};
+const Template = ({ menuPosition, icons, fluidWidth }) => {
+  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]}"
+      ${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>
+    `);
+};
+export const Default = Template.bind({});

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

@@ -0,0 +1,125 @@
+:root,
+.tds-mode-light {
+  --tds-radio-button-color: var(--tds-grey-958);
+  --tds-radio-button-interaction-01: var(--tds-blue-800);
+  --tds-radio-button-interaction-02: var(--tds-white);
+  --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-500);
+  --tds-radio-button-color-disabled-after: var(--tds-grey-700);
+  --tds-radio-button-color-disabled-before: var(--tds-grey-700);
+}
+
+.tds-mode-dark {
+  --tds-radio-button-color: var(--tds-white);
+  --tds-radio-button-interaction-01: var(--tds-white);
+  --tds-radio-button-interaction-02: var(--tds-grey-958);
+  --tds-radio-button-background-hover: var(--tds-white);
+  --tds-radio-button-background-focus: var(--tds-white);
+  --tds-radio-button-disabled: var(--tds-grey-600);
+  --tds-radio-button-border-color-disabled-after: var(--tds-grey-700);
+  --tds-radio-button-color-disabled-after: var(--tds-grey-700);
+}
+
+.tds-radio-button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-left: -4px;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--tds-radio-button-color);
+}
+.tds-radio-button * {
+  box-sizing: border-box;
+}
+.tds-radio-button .tds-form-input[type=radio] {
+  appearance: none;
+  outline: none;
+  margin: 0;
+  border: 0;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  position: relative;
+  cursor: pointer;
+  flex-shrink: 0;
+  align-self: flex-start;
+}
+.tds-radio-button .tds-form-input[type=radio] + label {
+  padding: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4) var(--tds-spacing-element-4);
+  cursor: pointer;
+}
+.tds-radio-button .tds-form-input[type=radio]::before, .tds-radio-button .tds-form-input[type=radio]::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+.tds-radio-button .tds-form-input[type=radio]::before {
+  width: 24px;
+  height: 24px;
+  left: 0;
+  top: 0;
+}
+.tds-radio-button .tds-form-input[type=radio]::after {
+  border: 1px solid var(--tds-radio-button-interaction-01);
+  background-color: var(--tds-radio-button-interaction-02);
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  top: 4px;
+}
+.tds-radio-button .tds-form-input[type=radio]:hover::before {
+  background-color: var(--tds-radio-button-background-hover);
+  opacity: 0.12;
+}
+.tds-radio-button .tds-form-input[type=radio]:focus::before {
+  background-color: var(--tds-radio-button-background-focus);
+  opacity: 0.24;
+  animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
+}
+.tds-radio-button .tds-form-input[type=radio]:disabled, .tds-radio-button .tds-form-input[type=radio].disabled {
+  cursor: not-allowed;
+}
+.tds-radio-button .tds-form-input[type=radio]:disabled::after, .tds-radio-button .tds-form-input[type=radio].disabled::after {
+  border-color: var(--tds-radio-button-border-color-disabled-after);
+  background-color: var(--tds-radio-button-interaction-02);
+}
+.tds-radio-button .tds-form-input[type=radio]:disabled + label, .tds-radio-button .tds-form-input[type=radio].disabled + label {
+  color: var(--tds-radio-button-disabled);
+  cursor: not-allowed;
+}
+.tds-radio-button .tds-form-input[type=radio]:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio].disabled:hover::before {
+  display: none;
+  opacity: 1;
+}
+.tds-radio-button .tds-form-input[type=radio]:checked::after {
+  border: 4px solid var(--tds-radio-button-interaction-01);
+}
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked:disabled::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled:hover::before, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::before {
+  display: block;
+  width: 16px;
+  height: 16px;
+  left: 4px;
+  top: 4px;
+  border: 1px solid var(--tds-radio-button-color-disabled-before);
+  box-sizing: content-box;
+}
+.tds-radio-button .tds-form-input[type=radio]:checked:disabled::after, .tds-radio-button .tds-form-input[type=radio]:checked.disabled::after {
+  border: 4px solid var(--tds-radio-button-interaction-02);
+  background-color: var(--tds-radio-button-color-disabled-after);
+  left: 5px;
+  top: 5px;
+}
+@keyframes rb-focus {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0.24;
+  }
+}

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

@@ -1,36 +1,36 @@
-import { h } from '@stencil/core';
-export class RadioButton {
+import { h } from "@stencil/core";
+import { generateUniqueId } from "../../utils/utils";
+/**
+ * @slot label - Slot for the label text.
+ */
+export class TdsRadioButton {
   constructor() {
     this.handleChange = () => {
-      this.sddsChange.emit({
+      this.tdsChange.emit({
         radioId: this.radioId,
         value: this.value,
       });
     };
     this.name = undefined;
     this.value = undefined;
-    this.radioId = crypto.randomUUID();
+    this.radioId = generateUniqueId();
     this.checked = false;
     this.required = false;
     this.disabled = false;
   }
   render() {
-    return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked,
-      // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!
-      // aria-labelledby={this.ariaLabelledBy}
-      // aria-describedby={this.host.getAttribute('aria-describedby')}
-      required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
+    return (h("div", { class: "tds-radio-button" }, h("input", { class: "tds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange() }), h("label", { htmlFor: this.radioId }, h("slot", { name: "label" }))));
   }
-  static get is() { return "sdds-radio-button"; }
+  static get is() { return "tds-radio-button"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["radio-button-component.scss"]
+      "$": ["radio-button.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["radio-button-component.css"]
+      "$": ["radio-button.css"]
     };
   }
   static get properties() {
@@ -47,7 +47,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Name of radio button, used for reference."
+          "text": "Name of Radio Button, used for reference."
         },
         "attribute": "name",
         "reflect": false
@@ -81,11 +81,11 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Unique radio button identifier."
+          "text": "Unique Radio Button identifier."
         },
         "attribute": "radio-id",
         "reflect": false,
-        "defaultValue": "crypto.randomUUID()"
+        "defaultValue": "generateUniqueId()"
       },
       "checked": {
         "type": "boolean",
@@ -99,7 +99,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the radio button is checked or not."
+          "text": "Decides if the Radio Button is checked or not."
         },
         "attribute": "checked",
         "reflect": true,
@@ -117,7 +117,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the radio button is required or not."
+          "text": "Decides if the Radio Button is required or not."
         },
         "attribute": "required",
         "reflect": false,
@@ -135,7 +135,7 @@ export class RadioButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Decides if the radio button is disabled or not."
+          "text": "Decides if the Radio Button is disabled or not."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -145,17 +145,17 @@ export class RadioButton {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To 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.\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."
         },
         "complexType": {
-          "original": "{\n    radioId: string;\n    value: string;\n  }",
+          "original": "{\r\n    radioId: string;\r\n    value: string;\r\n  }",
           "resolved": "{ radioId: string; value: string; }",
           "references": {}
         }

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({});