@postnord/pn-marketweb-components 2.0.3-beta4 → 2.0.5

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-illustration-grid/pn-illustration-grid.js

@@ -0,0 +1,83 @@
+import { Component, Prop, h, State } from "@stencil/core";
+import allIllustrations from "../../../assets/illustrations";
+import colors from "../../../assets/colors";
+export class PnIllustrationGrid {
+  constructor() {
+    this.size = "medium";
+    this.color = colors["postnord-default"];
+    this.activeIllustration = null;
+  }
+  async copyIllustrationName(illustrationName) {
+    if (!navigator.clipboard) {
+      // Clipboard API not available
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(`<pn-illustration illustration="${illustrationName}" />`);
+      this.activeIllustration = illustrationName;
+      setTimeout(() => {
+        this.activeIllustration = null;
+      }, 3000);
+    }
+    catch (err) {
+      console.error("Failed to copy!", err);
+    }
+  }
+  render() {
+    return (h("div", { class: "illustration-grid" }, Object.keys(allIllustrations).map(illustrationName => (h("div", { class: illustrationName === this.activeIllustration
+        ? "active illustration"
+        : "illustration", onClick: () => this.copyIllustrationName(illustrationName) },
+      illustrationName === this.activeIllustration && (h("span", { class: "copied" }, "Copied")),
+      h("pn-illustration", { illustration: illustrationName }),
+      h("p", { class: "illustration-name" }, illustrationName),
+      h("p", { class: "copy" }, "Click to copy"))))));
+  }
+  static get is() { return "pn-illustration-grid"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-illustration-grid.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-illustration-grid.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"medium\""
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "colors[\"postnord-default\"]"
+    }
+  }; }
+  static get states() { return {
+    "activeIllustration": {}
+  }; }
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/modal.stories.js

@@ -0,0 +1,42 @@
+import centeredContent from "@storybook/addon-centered/html";
+import { boolean } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "feedback/Modal",
+  decorators: [centeredContent],
+  parameters: {
+    notes: readme
+  }
+};
+
+export const modal = () => {
+  // Storybook Knobs ------------------------------------------//
+  const open = boolean("open", true);
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-modal open=${open}>
+      <h1>Example modal header</h1>
+      <p>Drove Hardly addled sun's expenses. Licensed ought upset tree struggle grab Garulf love. Shoulders Shadowfax death hard-won explanation bowmen starve judgment. Goblinses rides spike other's golf eaten happening mingled. Seems calls missed thick Durin's journeying proof drain. Butter Ring-bearer crawling killed brewing unleashed acts sapphire coneys gangrel sense injuries! Hear my voice. Come back to the light. Stand mushrooms surprises invitations Barad-dur? Mellon embrace glory. Grew Thorin's start coast realm yearns?</p>
+    </pn-modal>
+  `;
+};
+
+export const withButtons = () => {
+  // Storybook Knobs ------------------------------------------//
+  const open = boolean("open", true);
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-modal open=${open}>
+      <h1>Example modal header</h1>
+      <p>Drove Hardly addled sun's expenses. Licensed ought upset tree struggle grab Garulf love. Shoulders Shadowfax death hard-won explanation bowmen starve judgment. Goblinses rides spike other's golf eaten happening mingled. Seems calls missed thick Durin's journeying proof drain. Butter Ring-bearer crawling killed brewing unleashed acts sapphire coneys gangrel sense injuries! Hear my voice. Come back to the light. Stand mushrooms surprises invitations Barad-dur? Mellon embrace glory. Grew Thorin's start coast realm yearns?</p>
+      
+      <div slot="buttons">
+        <pn-button appearance="light">Go back to start</pn-button>
+        <pn-button>Save changes</pn-button>
+      </div>
+    </pn-modal>
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.css

@@ -0,0 +1,146 @@
+pn-modal .pn-modal {
+  position: fixed;
+  bottom: 50%;
+  left: 50%;
+  width: 95%;
+  max-width: 45em;
+  max-height: 85vh;
+  border: 0.1rem solid #F3F2F2;
+  border-radius: 0.8rem;
+  transform: translate(-50%, 60%);
+  box-shadow: 0px 4.8px 14.4px rgba(0, 0, 0, 0.18), 0px 25.6px 57.6px rgba(0, 0, 0, 0.22);
+  background: #FFFFFF;
+  z-index: 999;
+  transition: none;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  overflow-y: auto;
+  transition: visibility 0s linear 0.55s, opacity 0.25s 0.15s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
+}
+
+pn-modal[data-open] .pn-modal {
+  visibility: visible;
+  opacity: 1;
+  pointer-events: auto;
+  transition: visibility 0s linear 0s, opacity 0.55s, transform 0.55s cubic-bezier(0.7, 0, 0.3, 1);
+  transform: translate(-50%, 50%);
+}
+
+/*---------------------------------------Content slot-------------------------------------------*/
+.pn-modal > .pn-modal-content {
+  width: 100%;
+  padding: 1.5em;
+}
+
+/*---------------------------------------/Content slot-------------------------------------------*/
+/*---------------------------------------Close Button-------------------------------------------*/
+.pn-modal > .pn-modal-close-button {
+  position: absolute;
+  right: 1em;
+  top: 1em;
+  outline: none;
+  border: none;
+  border-radius: 50%;
+  padding: 0.3em;
+  transition: box-shadow 0.15s, background 0.15s;
+  cursor: pointer;
+  background: #FFFFFF;
+}
+.pn-modal > .pn-modal-close-button svg path {
+  transition: fill 0.15s;
+  pointer-events: none;
+}
+.pn-modal > .pn-modal-close-button:hover, .pn-modal > .pn-modal-close-button:focus {
+  background: #E0F8FF;
+}
+.pn-modal > .pn-modal-close-button:focus {
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+}
+.pn-modal > .pn-modal-close-button:active {
+  background: #0D234B;
+}
+.pn-modal > .pn-modal-close-button:active svg path {
+  fill: #FFFFFF;
+}
+
+/*---------------------------------------/Close Button-------------------------------------------*/
+/*---------------------------------------Button slot-------------------------------------------*/
+pn-modal .pn-modal > [slot=buttons] {
+  position: static;
+  width: 100%;
+  background: white;
+  border-top: 0.1rem solid #D3CECB;
+  padding: 0.5em 1em;
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap-reverse;
+}
+pn-modal .pn-modal > [slot=buttons] > * {
+  margin: 0.5em;
+}
+
+/*---------------------------------------/Button slot-------------------------------------------*/
+/*---------------------------------------Backdrop-------------------------------------------*/
+pn-modal > .pn-modal-backdrop {
+  position: fixed;
+  width: 120vw;
+  height: 120vh;
+  top: -10vh;
+  left: -10vw;
+  background: #2D2013;
+  opacity: 0;
+  z-index: 9;
+  visibility: hidden;
+  transition: visibility 0s linear 0.3s, opacity 0.3s;
+}
+
+pn-modal[data-open] .pn-modal-backdrop {
+  opacity: 0.65;
+  visibility: visible;
+  transition: visibility 0s linear 0s, opacity 0.3s;
+}
+
+/*---------------------------------------/Backdrop-------------------------------------------*/
+/*---------------------------------------Mobile-------------------------------------------*/
+@media screen and (max-width: 30em) {
+  pn-modal .pn-modal {
+    width: 100%;
+    max-height: 95vh;
+    bottom: 0;
+    transform: translate(-50%, 10%);
+    border-radius: 0.8rem 0.8rem 0 0;
+  }
+
+  pn-modal[data-open] .pn-modal {
+    transform: translate(-50%, 0);
+  }
+
+  pn-modal .pn-modal > [slot=buttons] {
+    justify-content: center;
+  }
+  pn-modal .pn-modal > [slot=buttons] > * {
+    flex: 1 0 auto;
+  }
+}
+/*---------------------------------------/Mobile-------------------------------------------*/
+/*---------------------------------------Modern browser styles-------------------------------------------*/
+@supports (position: sticky) {
+  pn-modal .pn-modal > [slot=buttons] {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+  }
+  pn-modal .pn-modal > .pn-modal-close-button {
+    position: sticky;
+    display: block;
+    left: 100%;
+    margin: 1em 1em 0 0;
+    z-index: 10;
+  }
+  pn-modal .pn-modal > .pn-modal-content {
+    margin-top: -3em;
+  }
+}
+/*---------------------------------------Modern browser styles-------------------------------------------*/

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-modal/pn-modal.js

@@ -0,0 +1,153 @@
+import { Component, Element, h, Host, Prop, State, Watch, Event, forceUpdate } from "@stencil/core";
+export class PnModal {
+  constructor() {
+    /** Bind to this property if you want to control the visibility of the modal from your own data. */
+    this.open = false;
+    this.handleFocus = this.focusHandler.bind(this);
+    this.handleBlur = this.blurHandler.bind(this);
+    this.handleEsc = this.escHandler.bind(this);
+    this.handleGlobalClick = this.globalClickHandler.bind(this);
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      forceUpdate(this.hostElement);
+      this.setFocusableElements();
+    });
+    mo.observe(this.hostElement.querySelector('.pn-modal'), { childList: true, subtree: true });
+    // If the modal is opened when the page loads we still want to register the events.
+    if (this.open)
+      this.addEventListeners();
+    this.setFocusableElements();
+  }
+  openHandler() {
+    if (this.open) {
+      this.addEventListeners();
+    }
+    else {
+      this.removeEventListeners();
+      this.elToFocus = null;
+      this.close.emit(this.open);
+    }
+  }
+  setFocusableElements() {
+    // This place is where I see the most coming changes/bugs taking place.
+    requestAnimationFrame(() => {
+      this.focusableEls = Array.from(this.hostElement.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]):not(.pn-modal-backdrop), pn-option'));
+      this.untabbable = Array.from(this.hostElement.querySelectorAll('[tabindex="-1"]'));
+    });
+  }
+  addEventListeners() {
+    const root = this.hostElement.getRootNode();
+    root.addEventListener('focusin', this.handleFocus);
+    root.addEventListener('focusout', this.handleBlur);
+    root.addEventListener('keydown', this.handleEsc);
+    // Adding RAF to ensure clicks aren't registered before the modal has opened.
+    requestAnimationFrame(() => {
+      document.addEventListener('pointerdown', this.handleGlobalClick);
+    });
+  }
+  removeEventListeners() {
+    const root = this.hostElement.getRootNode();
+    root.removeEventListener('focusin', this.handleFocus);
+    root.removeEventListener('focusout', this.handleBlur);
+    root.removeEventListener('keydown', this.handleEsc);
+    document.removeEventListener('pointerdown', this.handleGlobalClick);
+  }
+  focusHandler(e) {
+    const target = e.composedPath()[0];
+    if (!this.focusableEls.includes(target) && !this.untabbable.includes(target) || target.classList.contains('pn-modal-backdrop')) {
+      if (this.elToFocus) {
+        this.elToFocus.focus();
+        return;
+      }
+      this.focusableEls[0].focus();
+    }
+  }
+  blurHandler(e) {
+    var _a;
+    const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
+    const index = this.focusableEls.indexOf(target);
+    const numberOfEls = this.focusableEls.length - 1;
+    if (index === 0)
+      this.elToFocus = this.focusableEls[numberOfEls];
+    if (index === numberOfEls)
+      this.elToFocus = this.focusableEls[0];
+  }
+  escHandler({ code }) {
+    if ((code) === 'Escape')
+      this.open = false;
+  }
+  globalClickHandler(e) {
+    var _a;
+    const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
+    if (!this.hostElement.contains(target) || target.classList.contains('pn-modal-backdrop')) {
+      // This is to prevent the focus and blur events from being triggered when closing the modal.
+      e.preventDefault();
+      this.open = false;
+    }
+  }
+  render() {
+    return (h(Host, { "data-open": this.open },
+      h("div", { class: "pn-modal-backdrop", tabindex: "0" }),
+      h("div", { class: "pn-modal" },
+        h("button", { class: "pn-modal-close-button", onClick: () => this.open = false, type: "button", title: "close", "aria-label": "close" },
+          h("pn-icon", { symbol: "close", color: "blue700" })),
+        h("div", { class: "pn-modal-content" },
+          h("slot", null)),
+        h("slot", { name: "buttons" })),
+      h("div", { class: "pn-modal-backdrop", tabindex: "0" })));
+  }
+  static get is() { return "pn-modal"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-modal.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Bind to this property if you want to control the visibility of the modal from your own data."
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "focusableEls": {}
+  }; }
+  static get events() { return [{
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when the modal is closed, either by clicking outside or by triggering close button."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openHandler"
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-bar/pn-progress-bar.css

@@ -0,0 +1,75 @@
+pn-progress-bar {
+  display: inline;
+  overflow: hidden;
+}
+pn-progress-bar .pn-progress-container {
+  margin: 16px 16px 8px 0;
+  display: inline-block;
+  min-width: 380px;
+}
+pn-progress-bar .pn-progress-container .pn-progress-label {
+  height: 20px;
+  color: #1e1e1e;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 20px;
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+pn-progress-bar .pn-progress-container .pn-progress-label > pn-spinner {
+  vertical-align: middle;
+  margin-left: 5px;
+}
+pn-progress-bar .pn-progress-container .pn-progress-bar {
+  position: relative;
+  padding-top: 1px;
+}
+pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line {
+  width: 0;
+  position: absolute;
+  top: 0;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1,
+pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2 {
+  width: 100%;
+  height: 7px;
+}
+pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1 {
+  background-color: #8EDDF9;
+}
+pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2 {
+  background-color: #00A0D6;
+}
+pn-progress-bar .pn-progress-container .pn-progress-bar .pn-progress-bar-bg {
+  height: 12px;
+  background-color: #D3CECB;
+}
+pn-progress-bar .pn-progress-container .pn-progress-percentage {
+  margin-top: 5px;
+  text-align: right;
+  font-size: 12px;
+  line-height: 16px;
+  color: #00A0D6;
+}
+pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-line1,
+pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-line2 {
+  height: 4px;
+}
+pn-progress-bar.pn-progress-size-small .pn-progress-container .pn-progress-bar .pn-progress-bar-bg {
+  height: 6px;
+}
+pn-progress-bar.pn-progress-color-success .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1 {
+  background-color: #5EC584;
+}
+pn-progress-bar.pn-progress-color-success .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2 {
+  background-color: #005E41;
+}
+pn-progress-bar.pn-progress-color-error .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line1 {
+  background-color: #A70707;
+}
+pn-progress-bar.pn-progress-color-error .pn-progress-container .pn-progress-bar .pn-progress-bar-line .pn-progress-bar-line2 {
+  background-color: #A70707;
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-bar/pn-progress-bar.js

@@ -0,0 +1,182 @@
+import { Component, Element, Prop, h } from "@stencil/core";
+export class PnSpinner {
+  constructor() {
+    this.progress = 0;
+    this.size = "medium";
+    this.color = "default";
+    this.width = "300px";
+    this.label = null;
+    this.showSpinner = false;
+    this.showPercentage = false;
+  }
+  render() {
+    const progress = this.progress !== undefined ? this.progress : 0;
+    const progressWidth = progress < 100 ? Math.ceil(progress) : 100;
+    const progressStyles = {
+      width: progressWidth.toString() + "%"
+    };
+    const styles = {
+      width: this.width || "300px"
+    };
+    const sizes = ["medium", "small"];
+    const size = !!~sizes.indexOf(this.size) ? this.size : "medium";
+    this.hostElement.classList.add("pn-progress-size-" + size);
+    const colors = ["default", "success", "error"];
+    const color = !!~colors.indexOf(this.color) ? this.color : "default";
+    this.hostElement.classList.add("pn-progress-color-" + color);
+    if (this.showPercentage) {
+      this.hostElement.classList.add("pn-progress-show-percentage");
+    }
+    return (h("div", { class: "pn-progress-container", style: styles },
+      this._hasLabel() ? (h("div", { class: "pn-progress-label" },
+        this.label,
+        this.showSpinner ? h("pn-spinner", null) : null)) : null,
+      h("div", { class: "pn-progress-bar" },
+        h("div", { class: "pn-progress-bar-line", style: progressStyles },
+          h("div", { class: "pn-progress-bar-line1" }),
+          h("div", { class: "pn-progress-bar-line2" })),
+        h("div", { class: "pn-progress-bar-bg" })),
+      this.showPercentage ? (h("div", { class: "pn-progress-percentage", style: progressStyles },
+        progress,
+        "%")) : null));
+  }
+  _hasLabel() {
+    return this.label && this.label !== "";
+  }
+  static get is() { return "pn-progress-bar"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-progress-bar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-progress-bar.css"]
+  }; }
+  static get properties() { return {
+    "progress": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "progress",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "\"medium\""
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "\"default\""
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "\"300px\""
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "showSpinner": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-spinner",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showPercentage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-percentage",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}