@scania/tegel 0.0.9 → 0.0.10

package/dist/collection/components/modal/modal.css

@@ -56,7 +56,7 @@
 .tds-modal__actions-sticky {
   overflow: hidden;
 }
-.tds-modal__actions-sticky .tds-modal-body {
+.tds-modal__actions-sticky .body {
   font: var(--tds-body-01);
   letter-spacing: var(--tds-body-01-ls);
   padding-bottom: 96px;
@@ -64,7 +64,7 @@
   max-height: calc(85vh - 36px);
   overflow-y: auto;
 }
-.tds-modal__actions-sticky .tds-modal-actions {
+.tds-modal__actions-sticky slot[name=actions] {
   position: absolute;
   bottom: -1px;
   left: 0;
@@ -74,7 +74,7 @@
   display: flex;
   gap: 16px;
 }
-.tds-modal__actions-static .tds-modal-actions {
+.tds-modal__actions-static slot[name=actions] {
   background-color: var(--tds-modal-background);
   display: flex;
   gap: 16px;
@@ -84,15 +84,12 @@
   .tds-modal-xs {
     width: 100%;
   }
-
   .tds-modal-sm {
     width: 100%;
   }
-
   .tds-modal-md {
     width: 100%;
   }
-
   .tds-modal-lg {
     width: 100%;
   }
@@ -101,15 +98,12 @@
   .tds-modal-xs {
     width: 75%;
   }
-
   .tds-modal-sm {
     width: 62.5%;
   }
-
   .tds-modal-md {
     width: 75%;
   }
-
   .tds-modal-lg {
     width: 100%;
   }
@@ -118,15 +112,12 @@
   .tds-modal-xs {
     width: 31.25%;
   }
-
   .tds-modal-sm {
     width: 43.75%;
   }
-
   .tds-modal-md {
     width: 62.5%;
   }
-
   .tds-modal-lg {
     width: 75%;
   }
@@ -135,15 +126,12 @@
   .tds-modal-xs {
     width: 31.25%;
   }
-
   .tds-modal-sm {
     width: 37.5%;
   }
-
   .tds-modal-md {
     width: 62.5%;
   }
-
   .tds-modal-lg {
     width: 75%;
   }
@@ -152,33 +140,30 @@
   .tds-modal-xs {
     width: 25%;
   }
-
   .tds-modal-sm {
     width: 37.5%;
   }
-
   .tds-modal-md {
     width: 50%;
   }
-
   .tds-modal-lg {
     width: 75%;
   }
 }
 @media (max-width: 320px) {
   .tds-modal-md,
-.tds-modal-lg,
-.tds-modal-sm {
+  .tds-modal-lg,
+  .tds-modal-sm {
     height: 100%;
   }
-  .tds-modal-md slot[name=tds-modal-actions]::slotted(*),
-.tds-modal-lg slot[name=tds-modal-actions]::slotted(*),
-.tds-modal-sm slot[name=tds-modal-actions]::slotted(*) {
+  .tds-modal-md slot[name=actions]::slotted(*),
+  .tds-modal-lg slot[name=actions]::slotted(*),
+  .tds-modal-sm slot[name=actions]::slotted(*) {
     display: flex;
   }
 }
-/* MODAL SUBELEMENTS */
-.tds-modal-header {
+/* MODAL SUB ELEMENTS */
+.header {
   display: flex;
   padding-bottom: var(--tds-spacing-element-8);
   position: sticky;
@@ -186,7 +171,7 @@
   background-color: var(--tds-modal-background);
   z-index: 1;
 }
-.tds-modal-header::before {
+.header::before {
   content: " ";
   position: absolute;
   height: 16px;
@@ -195,16 +180,16 @@
   background-color: var(--tds-modal-background);
 }
 
-.tds-modal-headline {
+.header,
+slot[name=header]::slotted(*) {
   color: var(--tds-modal-text);
   font: var(--tds-headline-05);
   letter-spacing: var(--tds-headline-05-ls);
   margin: 0;
   flex: 1;
-  color: var(--tds-modal-text);
 }
 
-.tds-modal-body {
+.body {
   color: var(--tds-modal-text);
   font: var(--tds-body-01);
   letter-spacing: var(--tds-body-01-ls);
@@ -216,18 +201,18 @@
   /* Track */
   /* Handle */
 }
-.tds-modal-body::-webkit-scrollbar {
+.body::-webkit-scrollbar {
   width: 5px;
   background-color: var(--tds-grey-300);
 }
-.tds-modal-body::-webkit-scrollbar-track {
+.body::-webkit-scrollbar-track {
   background-color: var(--tds-grey-300);
 }
-.tds-modal-body::-webkit-scrollbar-thumb {
+.body::-webkit-scrollbar-thumb {
   background-color: var(--tds-grey-500);
 }
 @media (min-width: 1056px) {
-  .tds-modal-body {
+  .body {
     padding-right: 64px;
   }
 }
@@ -259,6 +244,7 @@
 }
 
 button.tds-modal-close {
+  margin: 0 0 auto auto;
   background-color: transparent;
   border: 0;
   padding: 0;

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

@@ -1,7 +1,12 @@
 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.tdsClose.emit(event);
       if (!closeEvent.defaultPrevented) {
@@ -34,6 +39,7 @@ export class TdsModal {
         }
       }
     };
+    this.header = undefined;
     this.prevent = false;
     this.size = 'md';
     this.actions = 'static';
@@ -44,11 +50,11 @@ export class TdsModal {
   }
   /** Shows the Modal.  */
   async showModal() {
-    this.handleShow();
+    this.isShown = true;
   }
   /** Closes the Modal. */
   async closeModal() {
-    this.handleClose();
+    this.isShown = false;
   }
   connectedCallback() {
     if (this.show !== null) {
@@ -56,6 +62,9 @@ export class TdsModal {
     }
     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. */
   handleOverlayClick(event) {
@@ -75,9 +84,13 @@ export class TdsModal {
     });
   }
   render() {
+    const usesHeaderSlot = hasSlot('header', this.host);
+    const usesActionsSlot = hasSlot('actions', this.host);
     return (h(Host, { onClick: (event) => {
         this.handleOverlayClick(event);
-      }, 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: "tds-modal-header" }, h("slot", { name: "tds-modal-headline" }), h("button", { class: "tds-modal-close", "aria-label": "close", onClick: () => this.handleClose() }, h("tds-icon", { name: "cross", size: "20px" }))), h("div", { class: "tds-modal-body" }, h("slot", { name: "tds-modal-body" })), h("div", { class: "tds-modal-actions" }, h("slot", { name: "tds-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 "tds-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -93,6 +106,23 @@ export class TdsModal {
   }
   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,
@@ -168,7 +198,7 @@ export class TdsModal {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -177,7 +207,7 @@ export class TdsModal {
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Element that will show the Modal (takes priority over selector)"

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.js

@@ -123,7 +123,7 @@ export class TdsPopoverCanvas {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -132,7 +132,7 @@ export class TdsPopoverCanvas {
           }
         },
         "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.js

@@ -106,7 +106,7 @@ export class TdsPopoverMenu {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "HTMLElement",
+          "original": "HTMLElement | null",
           "resolved": "HTMLElement",
           "references": {
             "HTMLElement": {
@@ -115,7 +115,7 @@ export class TdsPopoverMenu {
           }
         },
         "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({});

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