@scania/tegel 0.0.1-beta.9 → 0.0.4

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

@@ -0,0 +1,220 @@
+import { Host, h } from '@stencil/core';
+import { createPopper } from '@popperjs/core';
+export class PopoverCanvas {
+  constructor() {
+    this.selector = '';
+    this.referenceEl = undefined;
+    this.show = false;
+    this.placement = 'auto';
+    this.offsetSkidding = 0;
+    this.offsetDistance = 8;
+    this.renderedShowValue = false;
+    this.popperInstance = undefined;
+    this.target = undefined;
+  }
+  handleOutsideClick() {
+    if (this.show) {
+      this.show = false;
+    }
+  }
+  componentDidLoad() {
+    var _a;
+    this.target = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : document.querySelector(this.selector);
+    this.renderedShowValue = this.show;
+    this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {
+      placement: this.placement,
+      modifiers: [
+        {
+          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();
+    });
+  }
+  componentDidRender() {
+    if (this.show && !this.renderedShowValue) {
+      // Here we update the popper position since its position is wrong
+      // before it is rendered.
+      this.popperInstance.update();
+    }
+    this.renderedShowValue = this.show;
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
+  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 for an element that will trigger the popover"
+        },
+        "attribute": "selector",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "referenceEl": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Element that will trigger the popover (takes priority over selector)"
+        }
+      },
+      "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 {
+      "renderedShowValue": {},
+      "popperInstance": {},
+      "target": {}
+    };
+  }
+  static get elementRef() { return "popoverCanvasElement"; }
+  static get listeners() {
+    return [{
+        "name": "mousedown",
+        "method": "handleOutsideClick",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=popover-canvas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-canvas.js","sourceRoot":"","sources":["../../../src/components/popover-canvas/popover-canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ9C,MAAM,OAAO,aAAa;;oBAIG,EAAE;;gBAML,KAAK;qBAGE,MAAM;0BAGJ,CAAC;0BAGD,CAAC;6BAEI,KAAK;;;;EAO3C,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;EACH,CAAC;EAED,gBAAgB;;IACd,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,mCAAI,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;IAEnC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,oBAAoB,EAAE;MACzE,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,QAAQ;UACd,OAAO,EAAE;YACP,MAAM,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC;WACnD;SACF;OACF;KACF,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;MACtB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC,CAAC;IAEF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MAExB,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,UAAU,EAAE,CAAC;OACd;WAAM;QACL,UAAU,EAAE,CAAC;OACd;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAChE,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;MAChE,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;EACL,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;MACxC,iEAAiE;MACjE,yBAAyB;MACzB,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAC9B;IACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,IAAI,CAAC;EACrC,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;EACjC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE;MAC/E,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Element, Listen, h, Prop, State } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() popoverCanvasElement!: HTMLElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Decides if the Popover Canvas should be visible from the start */\n  @Prop() show: boolean = false;\n\n  /** Decides the placement of the Popover Canvas */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @Listen('mousedown', { target: 'window' })\n  handleOutsideClick() {\n    if (this.show) {\n      this.show = false;\n    }\n  }\n\n  componentDidLoad() {\n    this.target = this.referenceEl ?? document.querySelector(this.selector);\n    this.renderedShowValue = this.show;\n\n    this.popperInstance = createPopper(this.target, this.popoverCanvasElement, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n      ],\n    });\n\n    const showCanvas = () => {\n      this.show = true;\n    };\n\n    const hideCanvas = () => {\n      this.show = false;\n    };\n\n    this.target.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n\n      if (this.show) {\n        hideCanvas();\n      } else {\n        showCanvas();\n      }\n    });\n\n    this.popoverCanvasElement.addEventListener('mousemove', (event) => {\n      event.stopPropagation();\n    });\n\n    this.popoverCanvasElement.addEventListener('mousedown', (event) => {\n      event.stopPropagation();\n    });\n  }\n\n  componentDidRender() {\n    if (this.show && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.show;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,90 @@
+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;
+        }
+      </style>
+
+      <!-- The 'referenceEl' prop can be used instead of 'selector', 
+      wich might be preferable in frameworks like React -->
+      <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" rel="noopener noreferrer" href="https://digitaldesign.scania.com">Even links!</a>
+          </p>
+        </div>
+      </sdds-popover-canvas>
+
+      <!-- demo-wrapper code below is for demonstration purposes only -->
+      <div class="demo-wrapper">
+        <span class="sdds-u-mr2">Click icon for popover canvas</span>
+        
+        <sdds-button aria-label="menu" onlyIcon id="trigger" type="ghost" size="sm">
+          <sdds-icon slot="icon" class="sdds-btn-icon" size="16px" name="kebab"></sdds-icon>
+        </sdds-button>
+      </div>
+    `);
+};
+export const Default = ComponentPopoverCanvas.bind({});
+Default.args = {};
+//# sourceMappingURL=popover-canvas.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-canvas.stories.js","sourceRoot":"","sources":["../../../src/components/popover-canvas/popover-canvas.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,2BAA2B;EAClC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;GACd;EACD,QAAQ,EAAE;IACR,cAAc,EAAE;MACd,IAAI,EAAE,iBAAiB;MACvB,WAAW,EAAE,+BAA+B;MAC5C,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;OACZ;KACF;GACF;EACD,IAAI,EAAE;IACJ,cAAc,EAAE,QAAQ;GACzB;CACF,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;EACpD,MAAM,eAAe,GAAG;IACtB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;GACzB,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;;;qBAaiB,eAAe,CAAC,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;KAqB/C,CACF,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,OAAO,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Popover Canvas',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n  },\n  argTypes: {\n    canvasPosition: {\n      name: 'Canvas position',\n      description: 'Position of the PopoverCanvas',\n      type: { summary: 'string' },\n      control: {\n        type: 'select',\n      },\n      options: [\n        'Bottom',\n        'Bottom start',\n        'Bottom end',\n        'Top',\n        'Top start',\n        'Top end',\n        'Left',\n        'Left-start',\n        'Left end',\n        'Right',\n        'Right start',\n        'Right end',\n      ],\n    },\n  },\n  args: {\n    canvasPosition: 'Bottom',\n  },\n};\n\nconst ComponentPopoverCanvas = ({ canvasPosition }) => {\n  const canvasPosLookup = {\n    'Bottom': 'bottom',\n    'Bottom start': 'bottom-start',\n    'Bottom end': 'bottom-end',\n    'Top': 'top',\n    'Top start': 'top-start',\n    'Top end': 'top-end',\n    'Left': 'left',\n    'Left star': 'left-start',\n    'Left end': 'left-end',\n    'Right': 'right',\n    'Right start': 'right-start',\n    'Right end': 'right-end',\n  };\n\n  return formatHtmlPreview(\n    `\n      <style>\n        /* demo-wrapper and demo-styles is for demonstration purposes only */\n        .demo-wrapper {\n          display: flex;\n          flex-wrap; nowrap;\n          align-items: center;\n        }\n      </style>\n\n      <!-- The 'referenceEl' prop can be used instead of 'selector', \n      wich might be preferable in frameworks like React -->\n      <sdds-popover-canvas\n        placement=\"${canvasPosLookup[canvasPosition]}\"\n        selector=\"#trigger\">\n        <div>\n          <h2>A popover canvas!</h2>\n          <p>\n            Where you can put anything you want!\n          </p>\n          <p>\n            <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">Even links!</a>\n          </p>\n        </div>\n      </sdds-popover-canvas>\n\n      <!-- demo-wrapper code below is for demonstration purposes only -->\n      <div class=\"demo-wrapper\">\n        <span class=\"sdds-u-mr2\">Click icon for popover canvas</span>\n        \n        <sdds-button aria-label=\"menu\" onlyIcon id=\"trigger\" type=\"ghost\" size=\"sm\">\n          <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n        </sdds-button>\n      </div>\n    `,\n  );\n};\nexport const Default = ComponentPopoverCanvas.bind({});\nDefault.args = {};\n"]}

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

@@ -0,0 +1,122 @@
+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 start',
+  },
+};
+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;
+        align-items: center;
+      }
+    </style>
+
+    <sdds-popover-menu
+      placement="${menuPosLookup[menuPosition]}"
+      id="my-popover-menu">
+      <ul class="sdds-popover-menu-wrapper">
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            <i>
+              <sdds-icon name="save" size="16px"></sdds-icon>
+            </i>
+            Menu item 1
+          </a>
+        </li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            <i>
+              <sdds-icon name="save" size="16px"></sdds-icon>
+            </i>
+            Menu item 2
+          </a>
+        </li>
+        <li class="divider"></li>
+        <li>
+          <a target="_blank" rel="noopener noreferrer" href="https://digitaldesign.scania.com">
+            <i>
+              <sdds-icon name="save" size="16px"></sdds-icon>
+            </i>
+            Menu item 4
+          </a>
+        </li>
+      </ul>
+    </sdds-popover-menu>
+
+    <!-- demo-wrapper code below is for demonstration purposes only -->
+    <div class="demo-wrapper">
+      <span class="sdds-u-mr2">Click icon for popover menu</span>
+      
+      <sdds-button aria-label="menu" onlyIcon id="my-popover-button" type="ghost" size="sm">
+        <sdds-icon slot="icon" class="sdds-btn-icon" size="16px" name="kebab"></sdds-icon>
+      </sdds-button>
+    </div>
+
+    <script>
+      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React 
+      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');
+    </script>
+    `);
+};
+export const WithIcons = Template.bind({});
+WithIcons.args = {};
+//# sourceMappingURL=popover-menu-icons.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-menu-icons.stories.js","sourceRoot":"","sources":["../../../src/components/popover-menu/popover-menu-icons.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,IAAI,EAAE,eAAe;MACrB,WAAW,EAAE,8BAA8B;MAC3C,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,OAAO,EAAE;QACP,QAAQ;QACR,cAAc;QACd,YAAY;QACZ,KAAK;QACL,WAAW;QACX,SAAS;QACT,MAAM;QACN,YAAY;QACZ,UAAU;QACV,OAAO;QACP,aAAa;QACb,WAAW;OACZ;KACF;GACF;EACD,IAAI,EAAE;IACJ,YAAY,EAAE,cAAc;GAC7B;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;EACpC,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE,QAAQ;IAClB,cAAc,EAAE,cAAc;IAC9B,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,WAAW;IACxB,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,WAAW,EAAE,YAAY;IACzB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,OAAO;IAChB,aAAa,EAAE,aAAa;IAC5B,WAAW,EAAE,WAAW;GACzB,CAAC;EAEF,OAAO,iBAAiB,CACtB;;;;;;;;;;;mBAWe,aAAa,CAAC,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CzC,CACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Popover Menu',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=16794%3A59241&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    menuPosition: {\n      name: 'Menu position',\n      description: 'Position of the Popover menu',\n      control: {\n        type: 'select',\n      },\n      options: [\n        'Bottom',\n        'Bottom start',\n        'Bottom end',\n        'Top',\n        'Top start',\n        'Top end',\n        'Left',\n        'Left-start',\n        'Left end',\n        'Right',\n        'Right start',\n        'Right end',\n      ],\n    },\n  },\n  args: {\n    menuPosition: 'Bottom start',\n  },\n};\n\nconst Template = ({ menuPosition }) => {\n  const menuPosLookup = {\n    'Bottom': 'bottom',\n    'Bottom start': 'bottom-start',\n    'Bottom end': 'bottom-end',\n    'Top': 'top',\n    'Top start': 'top-start',\n    'Top end': 'top-end',\n    'Left': 'left',\n    'Left star': 'left-start',\n    'Left end': 'left-end',\n    'Right': 'right',\n    'Right start': 'right-start',\n    'Right end': 'right-end',\n  };\n\n  return formatHtmlPreview(\n    `\n    <style>\n      /* demo-wrapper styles is for demonstration purposes only */\n      .demo-wrapper {\n        display: flex;\n        flex-wrap: nowrap;\n        align-items: center;\n      }\n    </style>\n\n    <sdds-popover-menu\n      placement=\"${menuPosLookup[menuPosition]}\"\n      id=\"my-popover-menu\">\n      <ul class=\"sdds-popover-menu-wrapper\">\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 1\n          </a>\n        </li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 2\n          </a>\n        </li>\n        <li class=\"divider\"></li>\n        <li>\n          <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://digitaldesign.scania.com\">\n            <i>\n              <sdds-icon name=\"save\" size=\"16px\"></sdds-icon>\n            </i>\n            Menu item 4\n          </a>\n        </li>\n      </ul>\n    </sdds-popover-menu>\n\n    <!-- demo-wrapper code below is for demonstration purposes only -->\n    <div class=\"demo-wrapper\">\n      <span class=\"sdds-u-mr2\">Click icon for popover menu</span>\n      \n      <sdds-button aria-label=\"menu\" onlyIcon id=\"my-popover-button\" type=\"ghost\" size=\"sm\">\n        <sdds-icon slot=\"icon\" class=\"sdds-btn-icon\" size=\"16px\" name=\"kebab\"></sdds-icon>\n      </sdds-button>\n    </div>\n\n    <script>\n      // The 'selector' prop on Popover-Menu can be used instead, but it might be less ideal in frameworks like React \n      document.getElementById('my-popover-menu').referenceEl = document.getElementById('my-popover-button');\n    </script>\n    `,\n  );\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {};\n"]}

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-menu-background);
+  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: 800;
+}
+:host * {
+  box-sizing: border-box;
+}
+
+:host(.sdds-popover-menu-show) {
+  opacity: 1;
+  display: block;
+}