@scania/tegel 0.0.8 → 0.0.10

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

@@ -1,9 +1,14 @@
 import { h, Host, } from '@stencil/core';
-export class Modal {
+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,6 +39,7 @@ export class Modal {
         }
       }
     };
+    this.header = undefined;
     this.prevent = false;
     this.size = 'md';
     this.actions = 'static';
@@ -42,32 +48,35 @@ export class Modal {
     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 ${this.actions ? `tds-modal__actions-${this.actions}` : ''} ${this.size ? `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,7 +153,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size of modal"
+          "text": "Size of Modal"
         },
         "attribute": "size",
         "reflect": false,
@@ -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,7 +198,7 @@ export class Modal {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -177,10 +207,10 @@ export class Modal {
           }
         },
         "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 +225,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\nwill be decided by this prop and will need to be controlled from the outside."
         },
         "attribute": "show",
         "reflect": false
@@ -209,14 +239,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",
@@ -239,7 +269,7 @@ export class Modal {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Shows the modal.",
+          "text": "Shows the Modal.",
           "tags": []
         }
       },
@@ -255,7 +285,7 @@ export class Modal {
           "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: {
+    actions: {
+      name: 'Actions',
+      description: "Defines the behaviour 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: {
+    actions: '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 = ({ actions, 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="${actions.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,7 +1,7 @@
 :host {
   box-sizing: border-box;
-  color: var(--sdds-popover-canvas-color);
-  background-color: var(--sdds-popover-canvas-background);
+  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;
@@ -11,6 +11,6 @@
   box-sizing: border-box;
 }
 
-:host(.sdds-popover-canvas-show) {
+:host(.tds-popover-canvas-show) {
   display: block;
 }

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

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
-export class PopoverCanvas {
+export class TdsPopoverCanvas {
   constructor() {
     this.initialize = (referenceEl) => {
       this.popperInstance = createPopper(referenceEl, this.host, {
@@ -85,9 +85,9 @@ export class PopoverCanvas {
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return (h(Host, { class: `sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
+    return (h(Host, { class: `tds-popover-canvas ${this.isShown ? 'tds-popover-canvas-show' : ''}` }, h("slot", null)));
   }
-  static get is() { return "sdds-popover-canvas"; }
+  static get is() { return "tds-popover-canvas"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -123,7 +123,7 @@ export class PopoverCanvas {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -132,7 +132,7 @@ export class PopoverCanvas {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Element that will trigger the Popover (takes priority over selector)"

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

@@ -0,0 +1,92 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Popover Canvas`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+  },
+  argTypes: {
+    canvasPosition: {
+      name: 'Canvas position',
+      description: 'Sets the position of the Popover Canvas.',
+      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' },
+      },
+    },
+  },
+  args: {
+    canvasPosition: 'Auto',
+  },
+};
+const ComponentPopoverCanvas = ({ canvasPosition }) => {
+  const canvasPosLookup = {
+    'Bottom': 'bottom',
+    'Bottom start': 'bottom-start',
+    'Bottom end': 'bottom-end',
+    'Top': 'top',
+    'Top start': 'top-start',
+    'Top end': 'top-end',
+    'Left': 'left',
+    'Left star': 'left-start',
+    'Left end': 'left-end',
+    'Right': 'right',
+    'Right start': 'right-start',
+    '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>A Popover Canvas!</h2>
+        <p>
+          Where you can put anything you want!
+        </p>
+        <p>
+          <a target="_blank" rel="noopener noreferrer" href="https://tegel.scania.com">Even links!</a>
+        </p>
+      </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="ghost" 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-menu/popover-menu.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   overflow: hidden;
   width: 160px;
-  background-color: var(--sdds-popover-menu-background);
+  background-color: var(--tds-popover-menu-background);
   padding: 16px;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
@@ -13,7 +13,7 @@
   box-sizing: border-box;
 }
 
-:host(.sdds-popover-menu-show) {
+:host(.tds-popover-menu-show) {
   opacity: 1;
   display: block;
 }

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

@@ -1,6 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { createPopper } from '@popperjs/core';
-export class PopoverMenu {
+export class TdsPopoverMenu {
   constructor() {
     this.selector = '';
     this.referenceEl = undefined;
@@ -68,9 +68,9 @@ export class PopoverMenu {
     (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
   }
   render() {
-    return (h(Host, { class: `sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}` }, h("slot", null)));
+    return (h(Host, { class: `tds-popover-menu ${this.show ? 'tds-popover-menu-show' : ''}` }, h("slot", null)));
   }
-  static get is() { return "sdds-popover-menu"; }
+  static get is() { return "tds-popover-menu"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -106,7 +106,7 @@ export class PopoverMenu {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -115,7 +115,7 @@ export class PopoverMenu {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Element that will trigger the pop-over (takes priority over selector)"

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