@scania/tegel 0.0.9 → 0.0.11

package/dist/collection/components/message/message.css

@@ -1,63 +1,63 @@
-:host .message-wrapper {
+:host .wrapper {
   display: flex;
   padding: 16px;
   background-color: var(--tds-message-background);
   border-radius: 4px;
 }
-:host .message-wrapper.information {
+:host .wrapper.information {
   border-left: 4px solid var(--tds-information);
 }
-:host .message-wrapper.information tds-icon {
+:host .wrapper.information tds-icon {
   color: var(--tds-information);
 }
-:host .message-wrapper.success {
+:host .wrapper.success {
   border-left: 4px solid var(--tds-positive);
 }
-:host .message-wrapper.success tds-icon {
+:host .wrapper.success tds-icon {
   color: var(--tds-positive);
 }
-:host .message-wrapper.error {
+:host .wrapper.error {
   background-color: var(--tds-message-type-error-background);
   border-left: 4px solid var(--tds-negative);
 }
-:host .message-wrapper.error tds-icon {
+:host .wrapper.error tds-icon {
   color: var(--tds-negative);
 }
-:host .message-wrapper.warning {
+:host .wrapper.warning {
   border-left: 4px solid var(--tds-warning);
 }
-:host .message-wrapper.warning tds-icon {
+:host .wrapper.warning tds-icon {
   color: var(--tds-warning);
 }
-:host .message-wrapper.message-minimal {
+:host .wrapper.minimal {
   border: none;
   display: flex;
   align-items: center;
   padding: 0;
   background-color: transparent;
 }
-:host .message-wrapper.message-minimal .message-header {
+:host .wrapper.minimal .header {
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);
 }
-:host .message-wrapper.message-minimal tds-icon {
-  padding-right: 8px;
+:host .wrapper.minimal.error .header {
+  color: var(--tds-negative);
 }
 :host tds-icon {
   padding-right: 16px;
 }
-:host .message-content {
+:host .content {
   display: flex;
   flex-direction: column;
   gap: 4px;
   color: var(--tds-message-color);
   padding: 2px 0;
 }
-:host .message-content .message-header {
+:host .content .header {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
 }
-:host .message-content .message-extended-message {
+:host .content .extended-message {
   color: var(--tds-message-color);
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);

package/dist/collection/components/message/message.js

@@ -1,8 +1,11 @@
 import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the extended message. Not visible on minimal messages.
+ */
 export class TdsMessage {
   constructor() {
     this.getIconName = () => {
-      switch (this.type) {
+      switch (this.variant) {
         case 'information':
           return 'info';
         case 'error':
@@ -17,15 +20,15 @@ export class TdsMessage {
     };
     this.header = undefined;
     this.modeVariant = null;
-    this.type = 'information';
+    this.variant = 'information';
     this.noIcon = false;
     this.minimal = false;
   }
   render() {
     return (h(Host, null, h("div", { class: `
-        message-wrapper ${this.type}
-        ${this.minimal ? 'message-minimal' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `message-content` }, this.header && h("div", { class: "message-header" }, this.header), !this.minimal && (h("div", { class: "message-extended-message" }, h("slot", null)))))));
+        wrapper ${this.variant}
+        ${this.minimal ? 'minimal' : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, !this.noIcon && h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, this.header && h("div", { class: "header" }, this.header), !this.minimal && (h("div", { class: "extended-message" }, h("slot", null)))))));
   }
   static get is() { return "tds-message"; }
   static get encapsulation() { return "shadow"; }
@@ -76,7 +79,7 @@ export class TdsMessage {
         "reflect": false,
         "defaultValue": "null"
       },
-      "type": {
+      "variant": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -88,9 +91,9 @@ export class TdsMessage {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Type of Message."
+          "text": "Variant of Message."
         },
-        "attribute": "type",
+        "attribute": "variant",
         "reflect": false,
         "defaultValue": "'information'"
       },

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

@@ -0,0 +1,110 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Message`,
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11884%3A47370&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    messageVariant: {
+      name: 'Message variant',
+      description: 'Changes the variant of the component.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Information', 'Error', 'Warning', 'Success'],
+      table: {
+        defaultValue: { summary: 'information' },
+      },
+    },
+    header: {
+      name: 'Header',
+      description: 'Sets the header for the Message.',
+      control: {
+        type: 'text',
+      },
+    },
+    extendedMessage: {
+      name: 'Extended Message content',
+      description: 'Sets the content of an extended Message.',
+      control: {
+        type: 'text',
+      },
+    },
+    minimal: {
+      name: 'Minimal',
+      description: 'Applies minimal Message styling.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    noIcon: {
+      name: 'No icon',
+      description: 'Hides the icon.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    messageVariant: 'Information',
+    header: 'Message header',
+    extendedMessage: 'Longer Message text can be placed here. Longer Message text can be placed here.',
+    minimal: false,
+    noIcon: false,
+  },
+};
+const Template = ({ modeVariant, messageVariant, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
+    <style>
+      .demo-wrapper {
+        width: 380px;
+      }
+    </style>
+    <div class="demo-wrapper">
+      <tds-message
+          variant="${messageVariant.toLowerCase()}"
+          header="${header}"
+          ${noIcon ? 'no-icon' : ''}
+          ${minimal ? 'minimal' : ''}
+          mode-variant="${modeVariant.toLowerCase()}"
+          ${modeVariant !== 'Inherit from parent'
+  ? `mode-variant="${modeVariant.toLowerCase()}"`
+  : ''}
+      >
+      ${extendedMessage}
+      </tds-message>
+    </div>
+    `);
+export const Default = Template.bind({});

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

@@ -1,16 +1,12 @@
-:host {
+.tds-popover-canvas {
   box-sizing: border-box;
+  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;
 }
-:host * {
+.tds-popover-canvas * {
   box-sizing: border-box;
-}
-
-:host(.tds-popover-canvas-show) {
-  display: block;
 }