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

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

@@ -1,146 +0,0 @@
-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

@@ -1,20 +0,0 @@
-: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

@@ -1,190 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,19 +0,0 @@
-: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;
-}