@scania/tegel 0.0.71-beta → 1.0.0

package/dist/collection/components/modal/modal.js

@@ -1,9 +1,14 @@
-import { h, Host, } from '@stencil/core';
-export class Modal {
+import { h, Host, } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot header - Slot for header text
+ * @slot body - Slot for main content of modal
+ * @slot actions - Slot for extra buttons
+ * */
+export class TdsModal {
   constructor() {
-    /** Emits a close event and then close the modal if it is not prevented. */
     this.handleClose = (event) => {
-      const closeEvent = this.sddsClose.emit(event);
+      const closeEvent = this.tdsClose.emit(event);
       if (!closeEvent.defaultPrevented) {
         this.isShown = false;
       }
@@ -11,7 +16,7 @@ export class Modal {
     this.handleShow = () => {
       this.isShown = true;
     };
-    /** Adds an event listener to the reference element that shows/closes the modal. */
+    /** Adds an event listener to the reference element that shows/closes the Modal. */
     this.initializeReferenceElement = (referenceEl) => {
       if (referenceEl) {
         referenceEl.addEventListener('click', (event) => {
@@ -34,40 +39,44 @@ export class Modal {
         }
       }
     };
+    this.header = undefined;
     this.prevent = false;
     this.size = 'md';
-    this.actions = 'static';
+    this.actionsPosition = 'static';
     this.selector = undefined;
     this.referenceEl = undefined;
     this.show = undefined;
     this.isShown = false;
   }
-  /** Shows the modal.  */
+  /** Shows the Modal.  */
   async showModal() {
-    this.handleShow();
+    this.isShown = true;
   }
-  /** Closes the modal. */
+  /** Closes the Modal. */
   async closeModal() {
-    this.handleClose();
+    this.isShown = false;
   }
   connectedCallback() {
     if (this.show !== null) {
       this.isShown = this.show;
     }
-    this.setDissmissButtons();
+    this.setDismissButtons();
     this.setShowButton();
+    if (this.header && hasSlot('header', this.host)) {
+      console.warn("Tegel Modal component: Using both header prop and header slot might break modal's design. Please use just one of them. ");
+    }
   }
-  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
+  /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
   handleOverlayClick(event) {
     const targetList = event.composedPath();
     const target = targetList[0];
-    if (target.classList[0] === 'sdds-modal-close' ||
-      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+    if (target.classList[0] === 'tds-modal-close' ||
+      (target.classList[0] === 'tds-modal-backdrop' && this.prevent === false)) {
       this.handleClose(event);
     }
   }
-  /** Adds an event listener to the dismiss buttons that closes the modal. */
-  setDissmissButtons() {
+  /** Adds an event listener to the dismiss buttons that closes the Modal. */
+  setDismissButtons() {
     this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {
       dismissButton.addEventListener('click', (event) => {
         this.handleClose(event);
@@ -75,11 +84,15 @@ export class Modal {
     });
   }
   render() {
+    const usesHeaderSlot = hasSlot('header', this.host);
+    const usesActionsSlot = hasSlot('actions', this.host);
     return (h(Host, { onClick: (event) => {
         this.handleOverlayClick(event);
-      }, class: `sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${this.size ? `sdds-modal-${this.size}` : ''} ` }, h("div", { class: "sdds-modal-header" }, h("slot", { name: "sdds-modal-headline" }), h("button", { class: "sdds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("sdds-icon", { name: "cross", size: "20px" }))), h("div", { class: "sdds-modal-body" }, h("slot", { name: "sdds-modal-body" })), h("div", { class: "sdds-modal-actions" }, h("slot", { name: "sdds-modal-actions" })))));
+      }, class: `tds-modal-backdrop ${this.isShown ? 'show' : 'hide'}` }, h("div", { class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { class: "header" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: (event) => {
+        this.handleClose(event);
+      } }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "body" }, h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: "actions" }))));
   }
-  static get is() { return "sdds-modal"; }
+  static get is() { return "tds-modal"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -93,6 +106,23 @@ export class Modal {
   }
   static get properties() {
     return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the header of the Modal."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
       "prevent": {
         "type": "boolean",
         "mutable": false,
@@ -105,7 +135,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disables closing modal on clicking on overlay area."
+          "text": "Disables closing Modal on clicking on overlay area."
         },
         "attribute": "prevent",
         "reflect": false,
@@ -123,13 +153,13 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size of modal"
+          "text": "Size of Modal"
         },
         "attribute": "size",
         "reflect": false,
         "defaultValue": "'md'"
       },
-      "actions": {
+      "actionsPosition": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -141,9 +171,9 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sticky or Static Actions"
+          "text": "Changes the position behaviour of the actions slot."
         },
-        "attribute": "actions",
+        "attribute": "actions-position",
         "reflect": false,
         "defaultValue": "'static'"
       },
@@ -159,7 +189,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "CSS selector for the element that will show the modal."
+          "text": "CSS selector for the element that will show the Modal."
         },
         "attribute": "selector",
         "reflect": false
@@ -168,19 +198,20 @@ export class Modal {
         "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 show the modal (takes priority over selector)"
+          "text": "Element that will show the Modal (takes priority over selector)"
         }
       },
       "show": {
@@ -195,7 +226,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls whether the modal 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."
+          "text": "Controls whether the Modal 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."
         },
         "attribute": "show",
         "reflect": false
@@ -209,14 +240,14 @@ export class Modal {
   }
   static get events() {
     return [{
-        "method": "sddsClose",
-        "name": "sddsClose",
+        "method": "tdsClose",
+        "name": "tdsClose",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitts when the modal is closed."
+          "text": "Emits when the Modal is closed."
         },
         "complexType": {
           "original": "any",
@@ -233,13 +264,14 @@ export class Modal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Shows the modal.",
+          "text": "Shows the Modal.",
           "tags": []
         }
       },
@@ -249,13 +281,14 @@ export class Modal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Closes the modal.",
+          "text": "Closes the Modal.",
           "tags": []
         }
       }

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

@@ -0,0 +1,109 @@
+import { formatHtmlPreview } from "../../utils/utils";
+import readme from "./readme.md";
+import { ComponentsFolder } from "../../utils/constants";
+export default {
+  title: `${ComponentsFolder}/Modal`,
+  parameters: {
+    layout: 'fullscreen',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=4398%3A181325&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    actionsPosition: {
+      name: 'Actions position',
+      description: "Defines the postion of Modal action's slot - if slot scrolls or stays on top of the content.",
+      control: {
+        type: 'radio',
+      },
+      options: ['Sticky', 'Static'],
+      table: {
+        defaultValue: { summary: 'static' },
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the size of Modal.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+      table: {
+        defaultValue: { summary: 'md' },
+      },
+    },
+    headerText: {
+      name: 'Modal header',
+      description: 'Sets the header text of the Modal.',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyContent: {
+      name: 'Modal body text',
+      description: 'Sets the body content of the Modal.',
+      control: {
+        type: 'text',
+      },
+    },
+    showModal: {
+      name: 'Show Modal',
+      description: 'Toggles if the Modal is displayed.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    actionsPosition: 'Static',
+    size: 'Large',
+    headerText: 'The buttons for the Modal only works in the canvas tab',
+    bodyContent: 'The steps fell lightly and oddly, with a certain swing, for all they went so slowly; it was different indeed from the heavy creaking tread of Henry Jekyll. Utterson sighed. “Is there never anything else?” he asked.',
+    showModal: true,
+  },
+};
+const sizeLookUp = {
+  'Large': 'lg',
+  'Medium': 'md',
+  '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>
+  `);
+export const Default = ModalTemplate.bind({});

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

@@ -1,16 +1,12 @@
-:host {
+.tds-popover-canvas {
   box-sizing: border-box;
-  color: var(--sdds-popover-canvas-color);
-  background-color: var(--sdds-popover-canvas-background);
+  display: inline-block;
+  color: var(--tds-popover-canvas-color);
+  background-color: var(--tds-popover-canvas-background);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  z-index: 800;
-  display: none;
+  z-index: 900;
 }
-:host * {
+.tds-popover-canvas * {
   box-sizing: border-box;
-}
-
-:host(.sdds-popover-canvas-show) {
-  display: block;
 }

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

@@ -1,32 +1,11 @@
-import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
-export class PopoverCanvas {
+import { Host, h } from "@stencil/core";
+import { inheritAttributes } from "../../utils/utils";
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
+ */
+export class TdsPopoverCanvas {
   constructor() {
-    this.initialize = (referenceEl) => {
-      this.popperInstance = createPopper(referenceEl, this.host, {
-        placement: this.placement,
-        modifiers: [
-          {
-            name: 'offset',
-            options: {
-              offset: [this.offsetSkidding, this.offsetDistance],
-            },
-          },
-          ...this.modifiers,
-        ],
-      });
-      if (this.show === null) {
-        referenceEl.addEventListener('click', (event) => {
-          event.stopPropagation();
-          if (this.isShown) {
-            this.isShown = false;
-          }
-          else {
-            this.isShown = true;
-          }
-        });
-      }
-    };
+    this.inheritedAttributes = [];
     this.selector = '';
     this.referenceEl = undefined;
     this.show = null;
@@ -34,66 +13,19 @@ export class PopoverCanvas {
     this.offsetSkidding = 0;
     this.offsetDistance = 8;
     this.modifiers = [];
-    this.renderedShowValue = false;
-    this.popperInstance = undefined;
-    this.target = undefined;
-    this.isShown = false;
-  }
-  onShowChange(newValue) {
-    this.isShown = newValue;
-  }
-  onReferenceElChange(newValue, oldValue) {
-    var _a;
-    if (newValue !== oldValue) {
-      (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
-      if (newValue) {
-        this.initialize(newValue);
-      }
-    }
-  }
-  onAnyClick(event) {
-    if (this.isShown && this.show === null) {
-      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
-      const isClickOutside = !event.composedPath().includes(this.host);
-      if (isClickOutside) {
-        this.isShown = false;
-      }
-    }
-  }
-  connectedCallback() {
-    if (this.show !== null) {
-      this.isShown = this.show;
-    }
-  }
-  componentDidLoad() {
-    var _a;
-    if (this.selector || this.referenceEl) {
-      const referenceEl = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
-      if (referenceEl) {
-        this.initialize(referenceEl);
-      }
-      else {
-        console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`);
-      }
-    }
   }
-  componentDidRender() {
-    if (this.isShown && !this.renderedShowValue) {
-      // Here we update the popper position since its position is wrong
-      // before it is rendered.
-      this.popperInstance.update();
-    }
-    this.renderedShowValue = this.isShown;
-  }
-  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-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
+    var _a;
+    return (h(Host, null, h("tds-popover-core", Object.assign({}, this.inheritedAttributes, { class: {
+        'tds-popover-canvas': 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, modifiers: this.modifiers, trigger: 'click' }), h("div", null, h("slot", null)))));
   }
-  static get is() { return "sdds-popover-canvas"; }
-  static get encapsulation() { return "shadow"; }
+  static get is() { return "tds-popover-canvas"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["popover-canvas.scss"]
@@ -118,7 +50,7 @@ export class PopoverCanvas {
         "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 Popover"
         },
         "attribute": "selector",
         "reflect": false,
@@ -128,19 +60,20 @@ export class PopoverCanvas {
         "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 Popover (takes priority over selector)"
         }
       },
       "show": {
@@ -155,7 +88,7 @@ export class PopoverCanvas {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls wether 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."
+          "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."
         },
         "attribute": "show",
         "reflect": false,
@@ -170,7 +103,8 @@ export class PopoverCanvas {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "@popperjs/core",
+              "id": ""
             }
           }
         },
@@ -228,7 +162,8 @@ export class PopoverCanvas {
           "resolved": "Object[]",
           "references": {
             "Object": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Object"
             }
           }
         },
@@ -242,31 +177,5 @@ export class PopoverCanvas {
       }
     };
   }
-  static get states() {
-    return {
-      "renderedShowValue": {},
-      "popperInstance": {},
-      "target": {},
-      "isShown": {}
-    };
-  }
   static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "show",
-        "methodName": "onShowChange"
-      }, {
-        "propName": "referenceEl",
-        "methodName": "onReferenceElChange"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "onAnyClick",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }