@postnord/pn-marketweb-components 2.0.3-beta3 → 2.0.4

package/umd/modules/@postnord/web-components/collection/components/buttons/pn-button/pn-button.js

@@ -0,0 +1,483 @@
+import { Component, Host, Prop, h, Element, State, Watch } from "@stencil/core";
+export class Pnbutton {
+  constructor() {
+    /** small, bool */
+    this.small = false;
+    /** Button type, dark(blue background), light(white background), warning(destructive actions) */
+    this.appearance = 'primary ';
+    /** Altering the button style, options are: 'outlined' (bordered button with no background) or 'borderless' (borderless button with no background, mostly used for links) */
+    this.variant = '';
+    /** Loading indicator */
+    this.loading = false;
+    /** Icon on the left side instead of on the right */
+    this.leftIcon = false;
+    this.icon = null;
+    this.type = 'button';
+    /** If you're using a button with only an icon, button text is still REQUIRED for the tooltip */
+    this.iconOnly = false;
+    this.ariaLabel = null;
+    this.ariaLabelledby = null;
+    this.ariaControls = null;
+    this.ariaPressed = null;
+    /** Pass an href to make the button into link (a-tag) */
+    this.href = null;
+    this.rel = null;
+    this.target = null;
+    this.download = null;
+    /*---------------------------------------TOOLTIP LOGIC-------------------------------------------*/
+    this.tooltipOpen = false;
+    this.ripple = function (e, el) {
+      const elRect = el.getBoundingClientRect();
+      const elLeft = elRect.left;
+      const elTop = elRect.top;
+      const rippleEl = document.createElement('div');
+      const elSize = elRect.width > elRect.height ? elRect.width : elRect.height;
+      rippleEl.classList.add('pn-ripple');
+      el.querySelector('.pn-button-bg').appendChild(rippleEl);
+      rippleEl.style.height = `${elSize * 2}px`;
+      rippleEl.style.width = `${elSize * 2}px`;
+      rippleEl.style.left = e.clientX > 0 ? `${e.clientX - elLeft}px` : `50%`;
+      rippleEl.style.top = e.clientY > 0 ? `${e.clientY - elTop}px` : `50%`;
+      setTimeout(() => rippleEl.remove(), 400);
+    };
+  }
+  componentDidLoad() {
+    this.checkIfLink();
+    if (this.iconOnly)
+      this.initTooltip();
+  }
+  openHandler() {
+    if (this.tooltipOpen) {
+      this.checkTooltipPosition();
+      return;
+    }
+    this.setTooltipOffset();
+  }
+  initTooltip() {
+    this.tooltipEl = this.hostElement.querySelector('.button-tooltip');
+    const buttonEl = this.hostElement.querySelector('.pn-button');
+    const tooltipAnchor = this.linkEl ? this.linkEl : buttonEl;
+    const openEvents = ['mouseover', 'focus'];
+    const closeEvents = ['mouseleave', 'blur'];
+    const eventListeners = [...openEvents, ...closeEvents];
+    eventListeners.forEach((e) => {
+      tooltipAnchor.addEventListener(e, (event) => {
+        // Should open?
+        if (openEvents.includes(event.type)) {
+          this.tooltipOpen = true;
+          return;
+        }
+        // Should close?
+        if (closeEvents.includes(event.type)) {
+          this.tooltipOpen = false;
+        }
+      });
+    });
+  }
+  setTooltipOffset() {
+    this.tooltipEl.style.transform = `scale(${Number(this.tooltipOpen)}) translateX(-50%) translateX(${this.tooltipDx}px)`;
+  }
+  checkTooltipPosition() {
+    this.tooltipEl.style.transition = 'none';
+    this.tooltipEl.style.transform = 'scale(1) translateX(-50%)';
+    this.tooltipDownwards = false;
+    requestAnimationFrame(() => {
+      const { x, y, right } = this.tooltipEl.getBoundingClientRect();
+      const extraMargin = 8;
+      this.tooltipDx = '0';
+      this.tooltipDownwards = y < 0;
+      this.tooltipEl.style.transform = '';
+      if (x < 0)
+        this.tooltipDx = `${x * -1 + extraMargin}`;
+      if (right > window.innerWidth)
+        this.tooltipDx = `${window.innerWidth - right - extraMargin}`;
+      requestAnimationFrame(() => {
+        this.tooltipEl.style.transition = '';
+        this.setTooltipOffset();
+      });
+    });
+  }
+  /*---------------------------------------/TOOLTIP LOGIC-------------------------------------------*/
+  checkIfLink() {
+    var _a;
+    if (((_a = this.hostElement.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) === 'A') {
+      this.linkEl = this.hostElement.parentElement;
+      this.hostElement.parentElement.style.setProperty('outline', 'none');
+      this.hostElement.querySelector('button').setAttribute('tabindex', '-1');
+    }
+  }
+  getClassNames() {
+    let classNames = 'pn-button ';
+    const dark = ['primary', 'dark'];
+    const light = ['secondary', 'light'];
+    const variations = ['borderless', 'outlined'];
+    if (this.small)
+      classNames += 'pn-button-small ';
+    if (this.leftIcon)
+      classNames += 'pn-button-left-icon ';
+    if (variations.includes(this.variant))
+      classNames += `pn-button-variation-${this.variant} `;
+    if (this.iconOnly)
+      classNames += 'icon-only ';
+    if (this.tooltipDownwards)
+      classNames += 'button-tooltip-downwards ';
+    if (dark.includes(this.appearance)) {
+      classNames += 'pn-button-dark ';
+    }
+    else if (light.includes(this.appearance)) {
+      classNames += 'pn-button-light ';
+    }
+    else if (this.appearance === 'warning') {
+      classNames += 'pn-button-warning ';
+    }
+    else {
+      classNames += 'pn-button-dark ';
+    }
+    // Loading state
+    if (this.loading) {
+      this.hostElement.dataset.loading = "true";
+    }
+    else {
+      if (this.hostElement.dataset.loading)
+        delete this.hostElement.dataset.loading;
+    }
+    return classNames;
+  }
+  getAttributes() {
+    var _a, _b;
+    const btnAttrs = {
+      type: this.type
+    };
+    const linkAttrs = {
+      href: this.href,
+      rel: (!this.rel && this.target === "_blank") ? 'noopener' : this.rel,
+      target: (_a = this.target) !== null && _a !== void 0 ? _a : null,
+      download: (_b = this.download) !== null && _b !== void 0 ? _b : null
+    };
+    return this.href ? linkAttrs : btnAttrs;
+  }
+  getTagName() {
+    return this.href ? "a" : "button";
+  }
+  render() {
+    const TagName = this.getTagName();
+    return (h(Host, { class: "pn-button" },
+      h(TagName, Object.assign({ class: this.getClassNames(), "data-loading": this.loading, onClick: (e) => this.ripple(e, this.hostElement), "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "data-tooltip-open": this.tooltipOpen, "aria-controls": this.ariaControls, "aria-pressed": this.ariaPressed }, this.getAttributes()),
+        h("div", { class: "pn-button-bg" }),
+        h("div", { class: "pn-button-content" },
+          !this.iconOnly &&
+            h("slot", null),
+          this.icon &&
+            h("pn-icon", { small: this.small, symbol: this.icon })),
+        h("pn-spinner", { light: true }),
+        this.iconOnly &&
+          h("div", { class: "button-tooltip" },
+            h("slot", null)))));
+  }
+  static get is() { return "pn-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-button.css"]
+  }; }
+  static get properties() { return {
+    "small": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "small, bool"
+      },
+      "attribute": "small",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "appearance": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Button type, dark(blue background), light(white background), warning(destructive actions)"
+      },
+      "attribute": "appearance",
+      "reflect": false,
+      "defaultValue": "'primary '"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Altering the button style, options are: 'outlined' (bordered button with no background) or 'borderless' (borderless button with no background, mostly used for links)"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Loading indicator"
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "leftIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Icon on the left side instead of on the right"
+      },
+      "attribute": "left-icon",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'button'"
+    },
+    "iconOnly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If you're using a button with only an icon, button text is still REQUIRED for the tooltip"
+      },
+      "attribute": "icon-only",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "ariaLabelledby": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-labelledby",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "ariaControls": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-controls",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "ariaPressed": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "aria-pressed",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Pass an href to make the button into link (a-tag)"
+      },
+      "attribute": "href",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "rel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "rel",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "target",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "download": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "download",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "tooltipOpen": {},
+    "tooltipDownwards": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "tooltipOpen",
+      "methodName": "openHandler"
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/content/pn-accordion/accordion.stories.js

@@ -0,0 +1,29 @@
+import readme from "./readme.md";
+
+export default {
+  title: "content/Accordion",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const accordion = () => {
+  return `
+    <div style="max-width: 40em; margin: auto; padding: 3em 0;">
+      <pn-accordion>
+        <pn-accordion-row label="Accordion title 1">
+          Grubbs stew squeaking knife-work. Beheading tools breached Ungol knows thirty-four. Mice ferret signed 3434 everybody Moria tomato's. Solid gangrel forgive Minas Morgul! Flash-flame thunder sauteed two-faced smack Shire ransom? Nerve Bagshot Row shown disappear excessive. Dinner soon shatter moaning. It must be taken deep into Mordor and cast back into the fiery chasm from whence it came.
+        </pn-accordion-row>
+
+        <pn-accordion-row>
+          <div slot="label">Accordion title 2 (Slotted)</div>
+          Grubbs stew squeaking knife-work. Beheading tools breached Ungol knows thirty-four. Mice ferret signed 3434 everybody Moria tomato's. Solid gangrel forgive Minas Morgul! Flash-flame thunder sauteed two-faced smack Shire ransom? Nerve Bagshot Row shown disappear excessive. Dinner soon shatter moaning. It must be taken deep into Mordor and cast back into the fiery chasm from whence it came.
+        </pn-accordion-row>
+
+        <pn-accordion-row label="Accordion title 3">
+        Grubbs stew squeaking knife-work. Beheading tools breached Ungol knows thirty-four. Mice ferret signed 3434 everybody Moria tomato's. Solid gangrel forgive Minas Morgul! Flash-flame thunder sauteed two-faced smack Shire ransom? Nerve Bagshot Row shown disappear excessive. Dinner soon shatter moaning. It must be taken deep into Mordor and cast back into the fiery chasm from whence it came.
+        </pn-accordion-row>
+      </pn-accordion>
+    </div>
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/content/pn-accordion/pn-accordion.css

@@ -0,0 +1,18 @@
+pn-accordion {
+  display: block;
+  position: relative;
+}
+pn-accordion .accordion-bg {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  transform-origin: top left;
+  transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);
+  pointer-events: none;
+}
+[data-flipping] > pn-accordion .accordion-bg {
+  transition: none;
+  transform: scaleY(calc(1 / var(--dh)));
+}

package/umd/modules/@postnord/web-components/collection/components/content/pn-accordion/pn-accordion.js

@@ -0,0 +1,69 @@
+import { Component, h, Host, State, Element, Listen, forceUpdate } from "@stencil/core";
+export class Pnaccordion {
+  constructor() {
+    this.accordionRows = Array.from(document.querySelectorAll("pn-accordion-row"));
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      forceUpdate(this.hostElement);
+    });
+    mo.observe(this.hostElement, { childList: true });
+  }
+  toggleHandler({ detail }) {
+    const arr = this.accordionRows.slice(this.accordionRows.indexOf(detail) + 1);
+    ;
+    this.animate(() => this.toggleState(detail), [this.hostElement, ...arr]);
+  }
+  toggleState(el) {
+    el.dataset.state === "collapsed" ? el.dataset.state = "open" : el.dataset.state = "collapsed";
+  }
+  getRect(el) {
+    return el.getBoundingClientRect();
+  }
+  animate(layoutChange, firstEls, getLastEls = () => firstEls) {
+    const firstElsRects = Array.from(firstEls).map((el) => [el, this.getRect(el)]);
+    requestAnimationFrame(() => {
+      layoutChange();
+      const lastElsRects = Array.from(getLastEls()).map((el) => [el, this.getRect(el)]);
+      //@ts-ignore
+      firstElsRects.forEach(([firstEl, firstRect], i) => {
+        let [lastEl, lastRect] = lastElsRects[i];
+        const dx = lastRect.x - firstRect.x;
+        const dy = lastRect.y - firstRect.y;
+        const dw = lastRect.width / firstRect.width;
+        const dh = lastRect.height / firstRect.height;
+        lastEl.dataset.flipping = true;
+        lastEl.style.setProperty("--dx", dx);
+        lastEl.style.setProperty("--dy", dy);
+        lastEl.style.setProperty("--dw", dw);
+        lastEl.style.setProperty("--dh", dh);
+        requestAnimationFrame(() => delete lastEl.dataset.flipping);
+      });
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "accordion-bg" }),
+      h("slot", null)));
+  }
+  static get is() { return "pn-accordion"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-accordion.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-accordion.css"]
+  }; }
+  static get states() { return {
+    "accordionRows": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "togglerow",
+      "method": "toggleHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/content/pn-accordion-row/accordion-row.stories.js

@@ -0,0 +1,23 @@
+import { select } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "content/Accordion/Accordion row",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const state = select('state', ['open', 'collapsed'], 'collapsed');
+  // --------------------------------------------------------- //
+
+  return `
+    <div style="max-width: 45em; margin: auto; padding: 3em 0;">
+      <pn-accordion-row data-state=${state} label="This story is just to show in the docs tab how the component works, see pn-accordion to see it in action">
+        Grubbs stew squeaking knife-work. Beheading tools breached Ungol knows thirty-four. Mice ferret signed 3434 everybody Moria tomato's. Solid gangrel forgive Minas Morgul! Flash-flame thunder sauteed two-faced smack Shire ransom? Nerve Bagshot Row shown disappear excessive. Dinner soon shatter moaning. It must be taken deep into Mordor and cast back into the fiery chasm from whence it came.
+      </pn-accordion-row>
+    </div>
+  `;
+};