@scania/tegel 0.0.1-beta.3 → 0.0.1-beta.4

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

@@ -0,0 +1,146 @@
+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]');
+    nodes.forEach((el) => {
+      el.addEventListener('click', () => {
+        this.open = false;
+      });
+    });
+  }
+  handleClick(e) {
+    const targetList = e.composedPath();
+    const target = targetList[0];
+    if (target.classList[0] === 'sdds-modal-btn' ||
+      (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-btn" })), 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. Accepted strings are: xs, sm, md, lg."
+        },
+        "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"; }
+}

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

@@ -0,0 +1,20 @@
+:host {
+  box-sizing: border-box;
+  min-width: 160px;
+  min-height: 160px;
+  background-color: var(--sdds-popover-bg-default);
+  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;
+  z-index: 20000;
+  /* same as tooltip */
+  display: none;
+}
+:host * {
+  box-sizing: border-box;
+}
+
+:host(.sdds-popover-canvas-show) {
+  opacity: 1;
+  display: block;
+}

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

@@ -0,0 +1,190 @@
+import { Host, h } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+export class PopoverCanvas {
+  constructor() {
+    this.selector = '';
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    this.target = document.querySelector(this.selector);
+    const _this = this;
+    createPopper(this.target, this.popoverCanvasElement, {
+      placement: _this.placement,
+      modifiers: [
+        {
+          name: 'positionCalc',
+          enabled: true,
+          phase: 'main',
+          fn({ state }) {
+            console.log('popover fn', state);
+          },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showCanvas = () => {
+      this.show = true;
+    };
+    const hideCanvas = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', event => {
+      event.stopPropagation();
+      if (this.show) {
+        hideCanvas();
+      }
+      else {
+        showCanvas();
+      }
+    });
+    this.popoverCanvasElement.addEventListener('mousemove', event => {
+      event.stopPropagation();
+    });
+    this.popoverCanvasElement.addEventListener('mousedown', event => {
+      event.stopPropagation();
+    });
+  }
+  render() {
+    return (h(Host, { class: `sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-popover-canvas"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["popover-canvas.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["popover-canvas.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The CSS-selector that will trigger this Popover Canvas"
+        },
+        "attribute": "selector",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the Popover Canvas should be visible from the start"
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@popperjs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides the placement of the Popover Canvas"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "offsetSkidding": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the offset skidding"
+        },
+        "attribute": "offset-skidding",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "offsetDistance": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the offset distance"
+        },
+        "attribute": "offset-distance",
+        "reflect": false,
+        "defaultValue": "8"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "target": {}
+    };
+  }
+  static get elementRef() { return "popoverCanvasElement"; }
+  static get listeners() {
+    return [{
+        "name": "mousedown",
+        "method": "handleOutsideClick",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -0,0 +1,87 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Popover Canvas',
+  parameters: {
+    layout: 'centered',
+    notes: readme,
+  },
+  argTypes: {
+    canvasPosition: {
+      name: 'Canvas position',
+      description: 'Position of the PopoverCanvas',
+      type: { summary: 'string' },
+      control: {
+        type: 'select',
+      },
+      options: [
+        'Bottom',
+        'Bottom start',
+        'Bottom end',
+        'Top',
+        'Top start',
+        'Top end',
+        'Left',
+        'Left-start',
+        'Left end',
+        'Right',
+        'Right start',
+        'Right end',
+      ],
+    },
+  },
+  args: {
+    canvasPosition: 'Bottom',
+  },
+};
+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',
+  };
+  return formatHtmlPreview(`
+    <style>
+  /* demo-wrapper and demo-styles is for demonstration purposes only */
+  .demo-wrapper {
+    display: flex;
+    flex-wrap; nowrap;
+    align-items: center;
+  }
+  sdds-icon:hover {
+    cursor:pointer;
+  }
+    </style>
+
+      <sdds-popover-canvas
+        placement="${canvasPosLookup[canvasPosition]}"
+        selector="#trigger">
+        <div>
+          <h2>A popover canvas!</h2>
+          <p>
+            Where you can put anything you want!
+          </p>
+          <p>
+            <a target="_blank" href="https://digitaldesign.scania.com">Even links!</a>
+          </p>
+        </div>
+      </sdds-popover-canvas>
+
+     <!-- demo-wrapper and demo-styles is for demonstration purposes only -->
+      <div class="demo-wrapper">
+        <span style="user-select: none;margin-right: 16px;">Click icon for popover canvas</span>
+        <sdds-icon id="trigger" name="kebab" size="16px"></sdds-icon> 
+      </div>
+    `);
+};
+export const Default = ComponentPopoverCanvas.bind({});
+Default.args = {};

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

@@ -0,0 +1,132 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/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: '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',
+      ],
+    },
+  },
+  args: {
+    menuPosition: 'Bottom',
+  },
+};
+const Template = ({ menuPosition }) => {
+  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',
+  };
+  return formatHtmlPreview(`
+        <style>
+        /* demo-wrapper is for demonstration purposes only*/
+        .demo-wrapper {
+          display: flex;
+          flex-wrap: nowrap;
+          alignt-items: center;
+        }
+        sdds-icon:hover {
+          cursor:pointer;
+        }
+      </style>
+
+      <sdds-popover-menu
+        placement="${menuPosLookup[menuPosition]}"
+        selector="#trigger">
+        <ul class="sdds-popover-menu-wrapper">
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">
+            <i>
+              <sdds-icon name="save" size="16px"></sdds-icon>
+            </i>
+                Menu item 1
+            </a>
+          </li>
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">
+            <i>
+              <sdds-icon name="save" size="16px"></sdds-icon>
+            </i>
+              Menu item 2
+            </a>
+          </li>
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">
+            <i>
+              <sdds-icon name="save" size="16px"></sdds-icon>
+            </i>
+              Menu item 3
+            </a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">
+            <i>
+              <sdds-icon name="save" size="16px"></sdds-icon>
+            </i>
+              Menu item 4
+            </a>
+          </li>
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">
+            <i>
+              <sdds-icon name="save" size="16px"></sdds-icon>
+            </i>
+              Menu item 5
+            </a>
+          </li>
+        </ul>
+      </sdds-popover-menu>
+
+      <!-- demo-wrapper code below is for demonstration purposes only -->
+      <div class="demo-wrapper">
+        <span style="user-select: none;margin-right: 16px;">Click icon for popover menu</span>
+        <sdds-icon id="trigger" name="kebab" size="16px"></sdds-icon>
+      </div>
+      `);
+};
+export const WithIcons = Template.bind({});
+WithIcons.args = {};

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

@@ -0,0 +1,19 @@
+:host {
+  box-sizing: border-box;
+  overflow: hidden;
+  width: 160px;
+  background-color: var(--sdds-popover-bg-default);
+  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;
+  display: none;
+  z-index: 20000;
+}
+:host * {
+  box-sizing: border-box;
+}
+
+:host(.sdds-popover-menu-show) {
+  opacity: 1;
+  display: block;
+}