@scania/tegel 0.0.1-beta.9 → 0.0.2

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

@@ -0,0 +1,129 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Modal',
+  parameters: {
+    layout: 'fullscreen',
+    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: {
+    size: {
+      name: 'Size',
+      description: 'Size of modal',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+    },
+    showModal: {
+      name: 'Show modal',
+      description: 'Toggle if the modal is displayed',
+      control: {
+        type: 'boolean',
+      },
+    },
+    actions: {
+      name: 'Actions',
+      description: 'Behaviour of modal actions',
+      control: {
+        type: 'radio',
+      },
+      options: ['Sticky', 'Static'],
+    },
+    headline: {
+      name: 'Modal headline',
+      description: 'Customize headline',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyText: {
+      name: 'Modal body text',
+      description: 'Customize body text',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    headline: 'The buttons for the modal only works in the canvas tab',
+    bodyText: '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.',
+    actions: 'Static',
+    size: 'Large',
+    showModal: true,
+  },
+};
+const sizeLookUp = {
+  'Large': 'lg',
+  'Medium': 'md',
+  'Small': 'sm',
+  'Extra small': 'xs',
+};
+const Template = ({ headline, bodyText, size, actions, showModal }) => formatHtmlPreview(`    <style>
+  /* demo-wrapper and demo-styles is for demonstration purposes only*/
+  .demo-wrapper {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 100vh;
+  }
+  .demo-styles {
+    position: absolute;
+    margin-bottom: 20px;
+  }
+  </style>
+
+  <div class="demo-wrapper">
+    <button id="modal-button" class="sdds-btn sdds-btn-primary sdds-btn-lg">
+      <span class="sdds-btn-text">Open modal</span>
+    </button>
+    <div id="my-modal" class="sdds-modal-backdrop ${showModal ? 'show' : 'hide'} demo-styles">
+      <div class="sdds-modal sdds-modal-${sizeLookUp[size]} sdds-modal__actions-${actions.toLowerCase()}">
+        <div class="sdds-modal-header">
+          <h5 class="sdds-modal-headline">${headline}</h5>
+          <button class="sdds-modal-close" aria-label="close">
+            <sdds-icon name="cross" size="20px"></sdds-icon>
+          </button>
+        </div>
+          <div class="sdds-modal-body">
+            <p class="sdds-u-mb0 sdds-u-mt0">${bodyText}</p>
+          </div>
+          <div class="sdds-modal-actions">
+              <button class="sdds-btn sdds-btn-primary sdds-btn-md">Save</button>
+              <button class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
+          </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+  /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
+  modal = document.getElementById('my-modal');
+  buttons = modal.getElementsByTagName('button');
+  for (const button of buttons) {
+    button.addEventListener('click', () => {
+      modal.classList.replace('show', 'hide')
+    })
+  }
+
+  document.getElementsByClassName('sdds-modal-close')[0].addEventListener('click', () => {
+    modal.classList.replace('show', 'hide');
+  })
+
+  document.getElementById('modal-button').addEventListener('click', () => {
+    modal.classList.replace('hide', 'show')
+  })
+  </script>
+  `);
+export const Native = Template.bind({});
+Native.args = {};

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

@@ -0,0 +1,86 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/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: {
+    size: {
+      name: 'Size',
+      description: 'Size of modal',
+      control: {
+        type: 'radio',
+      },
+      options: ['Large', 'Medium', 'Small', 'Extra small'],
+    },
+    actions: {
+      name: 'Actions',
+      description: 'Behaviour of modal actions',
+      control: {
+        type: 'radio',
+      },
+      options: ['Sticky', 'Static'],
+    },
+    headline: {
+      name: 'Modal headline',
+      description: 'Customize headline',
+      control: {
+        type: 'text',
+      },
+    },
+    bodyText: {
+      name: 'Modal body text',
+      description: 'Customize body text',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    headline: 'The buttons for the modal only works in the canvas tab',
+    bodyText: '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.',
+    actions: 'Static',
+    size: 'Large',
+  },
+};
+const sizeLookUp = {
+  'Large': 'lg',
+  'Medium': 'md',
+  'Small': 'sm',
+  'Extra small': 'xs',
+};
+const ModalTemplate = ({ size, headline, bodyText, actions }) => formatHtmlPreview(`
+  <button id="my-modal-button" class="sdds-btn sdds-btn-primary">Open modal</button>
+
+  <sdds-modal open id="my-modal" size="${sizeLookUp[size]}" actions="${actions.toLowerCase()}">
+      <h5 class="sdds-modal-headline" slot="sdds-modal-headline">${headline}</h5>
+      <span slot="sdds-modal-body">
+          ${bodyText}
+      </span>
+      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('delete')" class="sdds-btn sdds-btn-danger sdds-btn-md">Delete</button>
+      <button slot="sdds-modal-actions" data-dismiss-modal onclick="console.log('cancel')" class="sdds-btn sdds-btn-secondary sdds-btn-md">Cancel</button>
+  </sdds-modal>
+  <script>
+
+    document.getElementById('my-modal-button').addEventListener('click', () => {
+      document.getElementById('my-modal').open = true;
+    })
+  </script>
+
+  `);
+export const WebComponent = ModalTemplate.bind({});
+WebComponent.args = {};

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

@@ -0,0 +1,350 @@
+: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);
+}
+
+.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);
+}
+
+/* MIXINS */
+/* MODAL STYLING */
+.sdds-modal {
+  box-sizing: border-box;
+  background-color: var(--sdds-modal-background);
+  margin: auto;
+  position: relative;
+  border-radius: 4px;
+  padding: 16px;
+  max-height: 85vh;
+  overflow-y: auto;
+  /* SCROLL STUFF */
+  /* width */
+  /* Track */
+  /* Handle */
+}
+.sdds-modal * {
+  box-sizing: border-box;
+}
+.sdds-modal::-webkit-scrollbar {
+  width: 5px;
+  background-color: var(--sdds-grey-300);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal::-webkit-scrollbar-track {
+  background-color: var(--sdds-grey-300);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-500);
+  border-radius: 0 1em 1em 0;
+}
+.sdds-modal__actions-sticky {
+  overflow: hidden;
+}
+.sdds-modal__actions-sticky .sdds-modal-body {
+  font: var(--sdds-body-01);
+  letter-spacing: var(--sdds-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 {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  background-color: var(--sdds-modal-background);
+  padding: var(--sdds-spacing-element-16);
+  display: flex;
+  gap: 16px;
+}
+.sdds-modal__actions-static .sdds-modal-actions {
+  background-color: var(--sdds-modal-background);
+  display: flex;
+  gap: 16px;
+}
+
+@media (min-width: 320px) {
+  .sdds-modal-xs {
+    width: 100%;
+  }
+
+  .sdds-modal-sm {
+    width: 100%;
+  }
+
+  .sdds-modal-md {
+    width: 100%;
+  }
+
+  .sdds-modal-lg {
+    width: 100%;
+  }
+}
+@media (min-width: 672px) {
+  .sdds-modal-xs {
+    width: 75%;
+  }
+
+  .sdds-modal-sm {
+    width: 62.5%;
+  }
+
+  .sdds-modal-md {
+    width: 75%;
+  }
+
+  .sdds-modal-lg {
+    width: 100%;
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-xs {
+    width: 31.25%;
+  }
+
+  .sdds-modal-sm {
+    width: 43.75%;
+  }
+
+  .sdds-modal-md {
+    width: 62.5%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (min-width: 1312px) {
+  .sdds-modal-xs {
+    width: 31.25%;
+  }
+
+  .sdds-modal-sm {
+    width: 37.5%;
+  }
+
+  .sdds-modal-md {
+    width: 62.5%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (min-width: 1584px) {
+  .sdds-modal-xs {
+    width: 25%;
+  }
+
+  .sdds-modal-sm {
+    width: 37.5%;
+  }
+
+  .sdds-modal-md {
+    width: 50%;
+  }
+
+  .sdds-modal-lg {
+    width: 75%;
+  }
+}
+@media (max-width: 320px) {
+  .sdds-modal-md,
+.sdds-modal-lg,
+.sdds-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(*) {
+    display: flex;
+  }
+}
+/* MODAL SUBELEMENTS */
+.sdds-modal-header {
+  display: flex;
+  padding-bottom: var(--sdds-spacing-element-8);
+  position: sticky;
+  top: 0;
+  background-color: var(--sdds-modal-background);
+  z-index: 1;
+}
+.sdds-modal-header::before {
+  content: " ";
+  position: absolute;
+  height: 16px;
+  top: -16px;
+  width: 100%;
+  background-color: var(--sdds-modal-background);
+}
+
+.sdds-modal-headline {
+  color: var(--sdds-modal-text);
+  font: var(--sdds-headline-05);
+  letter-spacing: var(--sdds-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);
+  padding-bottom: 40px;
+  overflow-y: visible;
+  padding-right: 16px;
+  /* SCROLL STUFF */
+  /* width */
+  /* Track */
+  /* Handle */
+}
+.sdds-modal-body::-webkit-scrollbar {
+  width: 5px;
+  background-color: var(--sdds-grey-300);
+}
+.sdds-modal-body::-webkit-scrollbar-track {
+  background-color: var(--sdds-grey-300);
+}
+.sdds-modal-body::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-500);
+}
+@media (min-width: 1056px) {
+  .sdds-modal-body {
+    padding-right: 64px;
+  }
+}
+
+.sdds-modal-backdrop {
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 600;
+  background-color: var(--sdds-modal-backdrop);
+  padding: 0 16px;
+}
+.sdds-modal-backdrop * {
+  box-sizing: border-box;
+}
+@media (max-width: 320px) {
+  .sdds-modal-backdrop {
+    padding: 0;
+  }
+}
+.sdds-modal-backdrop.show {
+  display: flex;
+}
+.sdds-modal-backdrop.hide {
+  display: none;
+}
+
+button.sdds-modal-close {
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  appearance: unset;
+}
+
+.sdds-modal-close {
+  display: inline-block;
+  height: auto;
+  color: var(--sdds-modal-icon);
+  cursor: pointer;
+}
+.sdds-modal-close:focus {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+@media (min-width: 320px) {
+  .sdds-modal-close {
+    margin-left: var(--sdds-spacing-element-16);
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-close {
+    margin-left: var(--sdds-spacing-element-48);
+  }
+}
+
+.sdds-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);
+  }
+}
+@media (min-width: 1056px) {
+  .sdds-modal-close-btn {
+    margin-left: var(--sdds-spacing-element-48);
+  }
+}
+.sdds-modal-close-btn svg {
+  fill: var(--sdds-modal-icon);
+}
+
+.sdds-modal-overflow {
+  overflow: hidden;
+}
+
+/* WEB COMPONENT STUFF */
+:host {
+  left: 0;
+  top: 0;
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  z-index: 600;
+  background-color: var(--sdds-modal-backdrop);
+  padding: 0 16px;
+}
+@media (max-width: 320px) {
+  :host {
+    padding: 0;
+  }
+}
+:host.show {
+  display: flex;
+}
+:host.hide {
+  display: none;
+}
+:host .sdds-modal-close {
+  border: none;
+  background-color: transparent;
+}
+:host .sdds-modal-close-btn {
+  border: none;
+  background-color: transparent;
+}
+
+:host(.show) {
+  display: flex;
+}
+
+:host(.hide) {
+  display: none;
+}

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

@@ -0,0 +1,148 @@
+import { h, Host } from '@stencil/core';
+export class Modal {
+  constructor() {
+    this.prevent = false;
+    this.size = 'md';
+    this.actions = 'static';
+    this.open = false;
+  }
+  /** Shows the modal  */
+  async openModal() {
+    this.open = true;
+  }
+  setDissmissButtons() {
+    const nodes = this.el.querySelectorAll('[data-dismiss-modal]');
+    [...Array.from(nodes), this.closeButtonEl].forEach((el) => {
+      el.addEventListener('click', () => {
+        this.open = false;
+      });
+    });
+  }
+  handleClick(e) {
+    const targetList = e.composedPath();
+    const target = targetList[0];
+    if (target.classList[0] === 'sdds-modal-close' ||
+      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)) {
+      this.open = false;
+    }
+  }
+  componentDidRender() {
+    this.setDissmissButtons();
+  }
+  render() {
+    return (h(Host, { onClick: (event) => {
+        this.handleClick(event);
+      }, class: `sdds-modal-backdrop ${this.open ? '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", ref: (el) => {
+        this.closeButtonEl = el;
+      } }, 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" })))));
+  }
+  static get is() { return "sdds-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "prevent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables closing modal on clicking on overlay area."
+        },
+        "attribute": "prevent",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of modal"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'md'"
+      },
+      "actions": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'sticky' | 'static'",
+          "resolved": "\"static\" | \"sticky\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sticky or Static Actions"
+        },
+        "attribute": "actions",
+        "reflect": false,
+        "defaultValue": "'static'"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "openModal": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the modal",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+}