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

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

@@ -0,0 +1,189 @@
+import { Host, h } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+export class PopoverMenu {
+  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.popoverMenuElement, {
+      strategy: 'fixed',
+      placement: _this.placement,
+      modifiers: [
+        {
+          name: 'positionCalc',
+          enabled: true,
+          phase: 'main',
+          fn({}) { },
+        },
+        {
+          name: 'offset',
+          options: {
+            offset: [this.offsetSkidding, this.offsetDistance],
+          },
+        },
+      ],
+    });
+    const showMenu = () => {
+      this.show = true;
+    };
+    const hideMenu = () => {
+      this.show = false;
+    };
+    this.target.addEventListener('mousedown', event => {
+      event.stopPropagation();
+      if (this.show) {
+        hideMenu();
+      }
+      else {
+        showMenu();
+      }
+    });
+    this.popoverMenuElement.addEventListener('mousemove', event => {
+      event.stopPropagation();
+    });
+    this.popoverMenuElement.addEventListener('mousedown', event => {
+      event.stopPropagation();
+    });
+  }
+  render() {
+    return (h(Host, { class: `sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-popover-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["popover-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["popover-menu.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 Menu"
+        },
+        "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 Menu 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 Menu"
+        },
+        "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 "popoverMenuElement"; }
+  static get listeners() {
+    return [{
+        "name": "mousedown",
+        "method": "handleOutsideClick",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -0,0 +1,109 @@
+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 styles 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">Menu item 1</a>
+          </li>
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">
+              Menu item 2
+            </a>
+          </li>
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">Menu item 3</a>
+          </li>
+          <li class="divider"></li>
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">Menu item 4</a>
+          </li>
+          <li>
+            <a target="_blank" href="https://digitaldesign.scania.com">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 Default = Template.bind({});
+Default.args = {};

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -0,0 +1,68 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Radio Button',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      description: 'The label for the radio button',
+      controls: {
+        type: 'string',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the radio button',
+      control: {
+        type: 'boolean',
+      },
+    },
+    checked: {
+      name: 'Checked',
+      description: 'Marks the radio button as checked',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    label: 'Label text',
+    disabled: false,
+    checked: false,
+  },
+};
+const Template = (args) => formatHtmlPreview(`
+   <div class="sdds-radio-button-group">
+   <div class="sdds-radio-item">
+     <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-1" checked="" ${args.disabled ? 'disabled' : ''}>
+     <label class="sdds-form-label" for="rb-option-1">
+       ${args.label} 1
+     </label>
+   </div>
+ </div>
+ <div class="sdds-radio-button-group">
+   <div class="sdds-radio-item">
+     <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-1" ${args.checked ? 'checked="checked"' : ''} >
+     <label class="sdds-form-label" for="rb-option-1">
+       ${args.label} 2
+     </label>
+   </div>
+
+   </div>
+`);
+export const Default = Template.bind({});
+Default.args = {};

package/dist/collection/components/side-menu/side-menu.stories.js

@@ -0,0 +1,182 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Side Menu',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    collapsed: {
+      name: 'Collapsed',
+      description: 'Toggle the side menus collapsed state.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    showIcons: {
+      name: 'Show icons',
+      description: 'Toggle if icons for side menu options are displayed.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'collapsed', neq: true },
+    },
+  },
+  args: {
+    collapsed: false,
+    showIcons: false,
+  },
+};
+const Template = ({ showIcons, collapsed }) => {
+  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    align-items: stretch;
+    height: 100vh;
+  }
+  .sdds-container {
+    overflow-y: auto;
+    max-width: 10000px;
+  }
+</style>
+
+<nav class="sdds-nav">
+  <div class="sdds-nav__left">
+    <button class="sdds-nav__mob-menu-btn">
+      <sdds-icon name="burger" size="20px"></sdds-icon>
+    </button>
+    <div class="sdds-nav__app-name">My application</div>
+  </div>
+  <div class="sdds-nav__right">
+    <a class="sdds-nav__item sdds-nav__app-logo" href="#"></a>
+  </div>
+</nav>
+<div class="sdds-push demo-wrapper">
+  <div class="sdds-sidebar side-menu ${collapsed ? 'collapsed' : ''}">
+    <div class="sdds-sidebar-mheader">
+    <button class="sdds-sidebar-mheader__close">
+      <sdds-icon name="cross" size="20px"></sdds-icon>
+    </button>
+    </div>
+    <ul class="sdds-sidebar-nav sdds-sidebar-nav--main ${icons}">
+      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
+        <button class="sdds-sidebar-nav__item-link">
+          <div>
+            <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
+          </div>
+          <span class="sdds-sidebar-nav__item-text">Sub-menu</span>
+          <div>
+            <sdds-icon class="sdds-sidebar-nav__chevron" name="chevron_down" size="16px"></sdds-icon>
+          </div>
+        </button>
+        <ul class="sdds-sidebar-nav-subnav">
+          <li class="sdds-sidebar-nav-subnav__item">
+            <span class="sdds-sidebar-nav__item-title">Sub-menu</span>
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+        </ul>
+      </li>
+      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
+      <button class="sdds-sidebar-nav__item-link">
+      <div>
+        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
+      </div>
+      <span class="sdds-sidebar-nav__item-text">Sub-menu</span>
+      <div>
+        <sdds-icon class="sdds-sidebar-nav__chevron" name="chevron_down" size="16px"></sdds-icon>
+      </div>
+      </button>
+        <ul class="sdds-sidebar-nav-subnav">
+          <li class="sdds-sidebar-nav-subnav__item">
+            <span class="sdds-sidebar-nav__item-title">Sub-menu</span>
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+        </ul>
+      </li>
+      <li class="sdds-sidebar-nav__item">
+        <a class="sdds-sidebar-nav__item-link" href="#">
+        <div>
+        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
+      </div>
+          <span class="sdds-sidebar-nav__item-text">Page link</span>
+        </a>
+      </li>
+      <li class="sdds-sidebar-nav__item">
+        <a class="sdds-sidebar-nav__item-link" href="#">
+        <div>
+        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
+      </div>
+          <span class="sdds-sidebar-nav__item-text">Page link</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="sdds-container" style="padding-top: 30px">
+  </div>
+</div>
+
+
+<script>
+    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
+  document.querySelector('button.sdds-nav__mob-menu-btn').addEventListener('click', () => {
+    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')
+  })
+  document.querySelector('button.sdds-sidebar-mheader__close').addEventListener('click', () => {
+    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')
+  })
+  expandableListItems = document.getElementsByClassName('sdds-sidebar-nav__extended');
+  for (let i = 0; i < expandableListItems.length; i++) {
+    expandableListItems[i].addEventListener('click', () => {
+      document.getElementsByClassName('sdds-sidebar-nav__extended')[i].classList.toggle('subnav-open');
+    });
+  }
+</script>
+  `);
+};
+export const Default = Template.bind({});