@scania/tegel 0.0.8 → 0.0.10

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

@@ -0,0 +1,138 @@
+import { Host, h } from '@stencil/core';
+/**
+ * @slot <default> - Default slot for the extended message section.
+ */
+export class TdsMessage {
+  constructor() {
+    this.getIconName = () => {
+      switch (this.type) {
+        case 'information':
+          return 'info';
+        case 'error':
+          return 'error';
+        case 'warning':
+          return 'warning';
+        case 'success':
+          return 'tick';
+        default:
+          return 'info';
+      }
+    };
+    this.header = undefined;
+    this.modeVariant = null;
+    this.type = 'information';
+    this.noIcon = false;
+    this.minimal = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `
+        wrapper ${this.type}
+        ${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"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["message.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "header": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Header text for the component."
+        },
+        "attribute": "header",
+        "reflect": false
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant of the component, based on current mode."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'information' | 'error' | 'warning' | 'success'",
+          "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of Message."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'information'"
+      },
+      "noIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the icon in the Message."
+        },
+        "attribute": "no-icon",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "minimal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimal Message styling."
+        },
+        "attribute": "minimal",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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' },
+      },
+    },
+    messageType: {
+      name: 'Message type',
+      description: 'Changes the type 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',
+    messageType: '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, messageType, header, extendedMessage, minimal, noIcon }) => formatHtmlPreview(`
+    <style>
+      .demo-wrapper {
+        width: 380px;
+      }
+    </style>
+    <div class="demo-wrapper">
+      <tds-message
+          type="${messageType.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

@@ -1,31 +1,31 @@
 :root,
-.sdds-mode-light {
-  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
-  --sdds-modal-background: var(--sdds-white);
-  --sdds-modal-text: var(--sdds-grey-958);
-  --sdds-modal-icon: var(--sdds-black);
-  --sdds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A");
-  --sdds-modal-scrollbar: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+.tds-mode-light {
+  --tds-modal-backdrop: rgba(0 0 0 / 40%);
+  --tds-modal-background: var(--tds-white);
+  --tds-modal-text: var(--tds-grey-958);
+  --tds-modal-icon: var(--tds-black);
+  --tds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A");
+  --tds-modal-scrollbar: var(--tds-grey-300);
+  --tds-modal-scrollbar-track: var(--tds-grey-300);
+  --tds-modal-scrollbar-thumb: var(--tds-grey-500);
 }
 
-.sdds-mode-dark {
-  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
-  --sdds-modal-background: var(--sdds-grey-900);
-  --sdds-modal-text: var(--sdds-grey-50);
-  --sdds-modal-icon: var(--sdds-white);
-  --sdds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A");
-  --sdds-modal-scrollbar: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-track: var(--sdds-grey-300);
-  --sdds-modal-scrollbar-thumb: var(--sdds-grey-500);
+.tds-mode-dark {
+  --tds-modal-backdrop: rgba(0 0 0 / 40%);
+  --tds-modal-background: var(--tds-grey-900);
+  --tds-modal-text: var(--tds-grey-50);
+  --tds-modal-icon: var(--tds-white);
+  --tds-modal-icon-native: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A");
+  --tds-modal-scrollbar: var(--tds-grey-300);
+  --tds-modal-scrollbar-track: var(--tds-grey-300);
+  --tds-modal-scrollbar-thumb: var(--tds-grey-500);
 }
 
 /* MIXINS */
 /* MODAL STYLING */
-.sdds-modal {
+.tds-modal {
   box-sizing: border-box;
-  background-color: var(--sdds-modal-background);
+  background-color: var(--tds-modal-background);
   margin: auto;
   position: relative;
   border-radius: 4px;
@@ -37,177 +37,162 @@
   /* Track */
   /* Handle */
 }
-.sdds-modal * {
+.tds-modal * {
   box-sizing: border-box;
 }
-.sdds-modal::-webkit-scrollbar {
+.tds-modal::-webkit-scrollbar {
   width: 5px;
-  background-color: var(--sdds-grey-300);
+  background-color: var(--tds-grey-300);
   border-radius: 0 1em 1em 0;
 }
-.sdds-modal::-webkit-scrollbar-track {
-  background-color: var(--sdds-grey-300);
+.tds-modal::-webkit-scrollbar-track {
+  background-color: var(--tds-grey-300);
   border-radius: 0 1em 1em 0;
 }
-.sdds-modal::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-500);
+.tds-modal::-webkit-scrollbar-thumb {
+  background-color: var(--tds-grey-500);
   border-radius: 0 1em 1em 0;
 }
-.sdds-modal__actions-sticky {
+.tds-modal__actions-sticky {
   overflow: hidden;
 }
-.sdds-modal__actions-sticky .sdds-modal-body {
-  font: var(--sdds-body-01);
-  letter-spacing: var(--sdds-body-01-ls);
+.tds-modal__actions-sticky .body {
+  font: var(--tds-body-01);
+  letter-spacing: var(--tds-body-01-ls);
   padding-bottom: 96px;
   margin: 0 -16px 0 0;
   max-height: calc(85vh - 36px);
   overflow-y: auto;
 }
-.sdds-modal__actions-sticky .sdds-modal-actions {
+.tds-modal__actions-sticky slot[name=actions] {
   position: absolute;
   bottom: -1px;
   left: 0;
   right: 0;
-  background-color: var(--sdds-modal-background);
-  padding: var(--sdds-spacing-element-16);
+  background-color: var(--tds-modal-background);
+  padding: var(--tds-spacing-element-16);
   display: flex;
   gap: 16px;
 }
-.sdds-modal__actions-static .sdds-modal-actions {
-  background-color: var(--sdds-modal-background);
+.tds-modal__actions-static slot[name=actions] {
+  background-color: var(--tds-modal-background);
   display: flex;
   gap: 16px;
 }
 
 @media (min-width: 320px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 100%;
   }
-
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 100%;
   }
-
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 100%;
   }
-
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 100%;
   }
 }
 @media (min-width: 672px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 75%;
   }
-
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 62.5%;
   }
-
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 75%;
   }
-
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 100%;
   }
 }
 @media (min-width: 1056px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 31.25%;
   }
-
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 43.75%;
   }
-
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 62.5%;
   }
-
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 75%;
   }
 }
 @media (min-width: 1312px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 31.25%;
   }
-
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 37.5%;
   }
-
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 62.5%;
   }
-
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 75%;
   }
 }
 @media (min-width: 1584px) {
-  .sdds-modal-xs {
+  .tds-modal-xs {
     width: 25%;
   }
-
-  .sdds-modal-sm {
+  .tds-modal-sm {
     width: 37.5%;
   }
-
-  .sdds-modal-md {
+  .tds-modal-md {
     width: 50%;
   }
-
-  .sdds-modal-lg {
+  .tds-modal-lg {
     width: 75%;
   }
 }
 @media (max-width: 320px) {
-  .sdds-modal-md,
-.sdds-modal-lg,
-.sdds-modal-sm {
+  .tds-modal-md,
+  .tds-modal-lg,
+  .tds-modal-sm {
     height: 100%;
   }
-  .sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),
-.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),
-.sdds-modal-sm slot[name=sdds-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 */
-.sdds-modal-header {
+/* MODAL SUB ELEMENTS */
+.header {
   display: flex;
-  padding-bottom: var(--sdds-spacing-element-8);
+  padding-bottom: var(--tds-spacing-element-8);
   position: sticky;
   top: 0;
-  background-color: var(--sdds-modal-background);
+  background-color: var(--tds-modal-background);
   z-index: 1;
 }
-.sdds-modal-header::before {
+.header::before {
   content: " ";
   position: absolute;
   height: 16px;
   top: -16px;
   width: 100%;
-  background-color: var(--sdds-modal-background);
+  background-color: var(--tds-modal-background);
 }
 
-.sdds-modal-headline {
-  color: var(--sdds-modal-text);
-  font: var(--sdds-headline-05);
-  letter-spacing: var(--sdds-headline-05-ls);
+.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(--sdds-modal-text);
 }
 
-.sdds-modal-body {
-  color: var(--sdds-modal-text);
-  font: var(--sdds-body-01);
-  letter-spacing: var(--sdds-body-01-ls);
+.body {
+  color: var(--tds-modal-text);
+  font: var(--tds-body-01);
+  letter-spacing: var(--tds-body-01-ls);
   padding-bottom: 40px;
   overflow-y: visible;
   padding-right: 16px;
@@ -216,23 +201,23 @@
   /* Track */
   /* Handle */
 }
-.sdds-modal-body::-webkit-scrollbar {
+.body::-webkit-scrollbar {
   width: 5px;
-  background-color: var(--sdds-grey-300);
+  background-color: var(--tds-grey-300);
 }
-.sdds-modal-body::-webkit-scrollbar-track {
-  background-color: var(--sdds-grey-300);
+.body::-webkit-scrollbar-track {
+  background-color: var(--tds-grey-300);
 }
-.sdds-modal-body::-webkit-scrollbar-thumb {
-  background-color: var(--sdds-grey-500);
+.body::-webkit-scrollbar-thumb {
+  background-color: var(--tds-grey-500);
 }
 @media (min-width: 1056px) {
-  .sdds-modal-body {
+  .body {
     padding-right: 64px;
   }
 }
 
-.sdds-modal-backdrop {
+.tds-modal-backdrop {
   box-sizing: border-box;
   left: 0;
   top: 0;
@@ -240,73 +225,74 @@
   height: 100%;
   width: 100%;
   z-index: 600;
-  background-color: var(--sdds-modal-backdrop);
+  background-color: var(--tds-modal-backdrop);
   padding: 0 16px;
 }
-.sdds-modal-backdrop * {
+.tds-modal-backdrop * {
   box-sizing: border-box;
 }
 @media (max-width: 320px) {
-  .sdds-modal-backdrop {
+  .tds-modal-backdrop {
     padding: 0;
   }
 }
-.sdds-modal-backdrop.show {
+.tds-modal-backdrop.show {
   display: flex;
 }
-.sdds-modal-backdrop.hide {
+.tds-modal-backdrop.hide {
   display: none;
 }
 
-button.sdds-modal-close {
+button.tds-modal-close {
+  margin: 0 0 auto auto;
   background-color: transparent;
   border: 0;
   padding: 0;
   appearance: unset;
 }
 
-.sdds-modal-close {
+.tds-modal-close {
   display: inline-block;
   height: auto;
-  color: var(--sdds-modal-icon);
+  color: var(--tds-modal-icon);
   cursor: pointer;
 }
-.sdds-modal-close:focus {
-  outline: 2px solid var(--sdds-blue-400);
+.tds-modal-close:focus {
+  outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
 }
 @media (min-width: 320px) {
-  .sdds-modal-close {
-    margin-left: var(--sdds-spacing-element-16);
+  .tds-modal-close {
+    margin-left: var(--tds-spacing-element-16);
   }
 }
 @media (min-width: 1056px) {
-  .sdds-modal-close {
-    margin-left: var(--sdds-spacing-element-48);
+  .tds-modal-close {
+    margin-left: var(--tds-spacing-element-48);
   }
 }
 
-.sdds-modal-close-btn {
+.tds-modal-close-btn {
   display: inline-block;
   height: auto;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 @media (min-width: 320px) {
-  .sdds-modal-close-btn {
-    margin-left: var(--sdds-spacing-element-16);
+  .tds-modal-close-btn {
+    margin-left: var(--tds-spacing-element-16);
   }
 }
 @media (min-width: 1056px) {
-  .sdds-modal-close-btn {
-    margin-left: var(--sdds-spacing-element-48);
+  .tds-modal-close-btn {
+    margin-left: var(--tds-spacing-element-48);
   }
 }
-.sdds-modal-close-btn svg {
-  fill: var(--sdds-modal-icon);
+.tds-modal-close-btn svg {
+  fill: var(--tds-modal-icon);
 }
 
-.sdds-modal-overflow {
+.tds-modal-overflow {
   overflow: hidden;
 }
 
@@ -318,7 +304,7 @@ button.sdds-modal-close {
   height: 100%;
   width: 100%;
   z-index: 600;
-  background-color: var(--sdds-modal-backdrop);
+  background-color: var(--tds-modal-backdrop);
   padding: 0 16px;
 }
 @media (max-width: 320px) {
@@ -332,11 +318,11 @@ button.sdds-modal-close {
 :host.hide {
   display: none;
 }
-:host .sdds-modal-close {
+:host .tds-modal-close {
   border: none;
   background-color: transparent;
 }
-:host .sdds-modal-close-btn {
+:host .tds-modal-close-btn {
   border: none;
   background-color: transparent;
 }