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

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tile/pn-tile.js

@@ -0,0 +1,254 @@
+import { Host, Component, Prop, h, Element, State, forceUpdate } from "@stencil/core";
+import allIllustrations from "../../../assets/illustrations";
+export class Pntile {
+  constructor() {
+    /** The rel attribute of the link */
+    this.rel = "noopener";
+    /** You can pass an illustration name, but if you want to pass your own image you can add an image as a slot with the name of "illustration", check the "tile with slot" story. */
+    this.illustration = null;
+    /** This is to keep track of whether the tile has a description or just a title */
+    this.simple = false;
+    this.emInPx = 16;
+    this.titleEl = null;
+    //@ts-ignore
+    this.checkCardSize = new ResizeObserver(cards => {
+      const getCardWidth = (width) => {
+        // CardWidth is the em equivalent to 10% of the width of the card
+        const cardWidth = (width * 0.1) / this.emInPx;
+        return `${cardWidth}em`;
+      };
+      cards.forEach((card) => {
+        const width = card.contentRect.width;
+        card.target.classList.toggle('vertical', width < this.remToPx(31.99));
+        requestAnimationFrame(() => {
+          card.target.style.setProperty('--w', getCardWidth(width));
+        });
+      });
+    });
+    /*---------------------------------------UTILS-------------------------------------------*/
+    this.longpress = false;
+  }
+  setIllustration() {
+    const illustrationElement = this.hostElement.querySelector('.tile-illustration');
+    if (!this.illustration) {
+      illustrationElement.remove();
+      return;
+    }
+    const illustration = (allIllustrations[this.illustration]);
+    illustrationElement.outerHTML = illustration;
+  }
+  componentWillLoad() {
+    const slottedIllustration = this.hostElement.querySelector('[slot="illustration"]');
+    this.illustration = slottedIllustration ? null : this.illustration;
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
+    mo.observe(this.hostElement, { childList: true });
+    this.setIllustration();
+    const cardEl = this.hostElement.querySelector('.pn-tile');
+    const linkEl = this.hostElement.querySelector('.pn-tile-link');
+    this.checkCardSize.observe(cardEl);
+    this.clickHandler([linkEl, cardEl], (e) => this.ripple(e, cardEl));
+    this.simple = !this.hostElement.querySelector('.tile-slot').textContent.trim();
+    this.emInPx = parseFloat(window.getComputedStyle(this.hostElement).fontSize);
+  }
+  remToPx(rem) {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+  }
+  ripple(e, el) {
+    if (!e.isTrusted)
+      return;
+    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.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);
+  }
+  clickHandler(els, callback) {
+    const events = ['mouseup', 'mousedown'];
+    const excludedElements = ['pn-button', 'button', 'a', 'input', 'pn-checkbox', 'pn-radio-button'];
+    els.forEach(el => {
+      if (el.tagName === 'A') {
+        el.addEventListener('click', (e) => {
+          callback(e);
+        });
+      }
+      else {
+        events.forEach((e) => {
+          el.addEventListener(e, (event) => {
+            // Stop the tile-link from being pressed if the user clicks a link or a button that exists on the tile
+            // This is to allow the consumer to add external actions to the tile
+            const isExcludedElement = excludedElements.some((el) => event.target.closest(el));
+            if (isExcludedElement)
+              return;
+            if (event.type === 'mousedown') {
+              this.longpress = false;
+              this.timer = setTimeout(() => this.longpress = true, 200);
+            }
+            if (event.type === 'mouseup') {
+              clearTimeout(this.timer);
+              // Stop clicks in case of:
+              // * Long press
+              // * Right mouse button is used
+              if (this.longpress || event.button === 2)
+                return;
+              const link = event.target.closest('pn-tile').querySelector('a');
+              event.preventDefault();
+              callback(event);
+              // Don't refocus if already in focus
+              if (!link.matches(':focus'))
+                link.focus();
+              // If the tile or link was clicked when the ctrl key, cmd key or middle mouse button
+              // was pressed, open in a new window
+              if (event.ctrlKey || event.metaKey || event.button === 1) {
+                window.open(link.getAttribute('href'), "_blank");
+                return;
+              }
+              link.click();
+            }
+          });
+        });
+      }
+    });
+  }
+  /*---------------------------------------/UTILS-------------------------------------------*/
+  getClassNames() {
+    let classNames = 'pn-tile ';
+    if (this.simple)
+      classNames += 'simple ';
+    return classNames;
+  }
+  render() {
+    const linkAttributes = {
+      href: this.url,
+      target: this.target,
+      rel: (!this.rel && this.target === "_blank") ? "noopener" : this.rel
+    };
+    return (h(Host, null,
+      h("a", Object.assign({ class: "pn-tile-link" }, linkAttributes), this.label),
+      h("div", { class: this.getClassNames() },
+        h("div", { class: "tile-circle" }),
+        h("div", { class: "tile-illustration" }),
+        !this.illustration &&
+          h("div", { class: "tile-illustration-slot" },
+            h("slot", { name: "illustration" })),
+        h("div", { class: "text-cont" },
+          h("h3", null,
+            this.label,
+            (this.target === "_blank") ? (h("pn-icon", { symbol: "open-in-new", small: true, color: "blue700" })) : null),
+          h("div", { class: "tile-slot" },
+            h("slot", null))))));
+  }
+  static get is() { return "pn-tile"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-tile.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-tile.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Headline of the card and label of the link"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The link of the tile"
+      },
+      "attribute": "url",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The target attribute of the link"
+      },
+      "attribute": "target",
+      "reflect": false
+    },
+    "rel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The rel attribute of the link"
+      },
+      "attribute": "rel",
+      "reflect": false,
+      "defaultValue": "\"noopener\""
+    },
+    "illustration": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "You can pass an illustration name, but if you want to pass your own image you can add an image as a slot with the name of \"illustration\", check the \"tile with slot\" story."
+      },
+      "attribute": "illustration",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "simple": {},
+    "checkCardSize": {},
+    "longpress": {},
+    "timer": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tile/tile.stories.js

@@ -0,0 +1,73 @@
+import { text, select } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+import illustrations from "../../../assets/illustrations.ts";
+
+export default {
+  title: "navigation/Tile",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const tile = () => {
+  // Storybook Knobs ------------------------------------------//
+  const label = text("Title", "Truth Adamant waited pursued!");
+  const description = text("description", "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit, consequatur est delectus et totam sit nesciunt reiciendis suscipit recusandae ut aspernatur cupiditate. Voluptates, ad culpa.");
+  const url = text("url", "#");
+  const illustration = select("illustration", Object.keys(illustrations), 'box-letters');
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-tile label="${label}" url="${url}" illustration="${illustration}">
+      <p>${description}</p>
+    </pn-tile>
+  `;
+};
+
+export const tileWithSlot = () => {
+  // Storybook Knobs ------------------------------------------//
+  const label = text("Title", "Truth Adamant waited pursued!");
+  const description = text("description", "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit, consequatur est delectus et totam sit nesciunt reiciendis suscipit recusandae ut aspernatur cupiditate. Voluptates, ad culpa.");
+  const url = text("url", "#");
+  const illustration = select("illustration", Object.keys(illustrations), 'box-letters');
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-tile label="${label}" url="${url}">
+      <pn-illustration illustration=${illustration} slot="illustration"></pn-illustration>
+      <p>${description}</p>
+    </pn-tile>
+  `;
+}
+
+
+export const tileSimple = () => {
+  // Storybook Knobs ------------------------------------------//
+  const label = text("Title", "Truth Adamant waited pursued!");
+    const url = text("url", "#");
+  const illustration = select("illustration", Object.keys(illustrations), 'box-letters');
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-tile label="${label}" url="${url}">
+      <pn-illustration illustration=${illustration} slot="illustration"></pn-illustration>
+      </pn-tile>
+  `;
+}
+
+export const tileOpenNewWindow = () => {
+  // Storybook Knobs ------------------------------------------//
+  const label = text("Title", "Truth Adamant waited pursued!");
+  const url = text("url", "https://www.postnord.com");
+  const target = text("Target", "_blank");
+  const rel = text("Rel attribute", "");
+  const illustration = select("illustration", Object.keys(illustrations), 'box-letters');
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-tile label="${label}" url="${url}" target="${target}">
+      <pn-illustration illustration=${illustration} slot="illustration"></pn-illustration>
+      </pn-tile>
+  `;
+}

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-ocr-search/ocr-search.stories.js

@@ -0,0 +1,21 @@
+import readme from "./readme.md";
+import { select } from "@storybook/addon-knobs";
+
+export default {
+  title: "web components/Generate Franko-license OCR",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  },
+};
+
+export const regular = () => {
+    // Storybook Knobs ------------------------------------------//
+    const languages = ["en", "sv", "da", "fi", "no"];
+    const language = select("language", languages, "sv");
+    // --------------------------------------------------------- //
+
+  return `
+    <pn-ocr-search language=${language} />
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-ocr-search/pn-ocr-search.css

@@ -0,0 +1,13 @@
+pn-ocr-search .bold {
+  font-weight: 700;
+}
+pn-ocr-search .search-results,
+pn-ocr-search .error-text-container {
+  padding: 1em 0.5em;
+}
+pn-ocr-search .invalid-text-container {
+  padding: 0.5em 1em;
+}
+pn-ocr-search .invalid-text-container .invalid-ocr {
+  color: #A70707;
+}

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-ocr-search/pn-ocr-search.js

@@ -0,0 +1,117 @@
+import { Component, h, State, Host, Prop } from "@stencil/core";
+import { translations } from "./translations";
+export class PnOcrSearch {
+  constructor() {
+    // Supported languages are en and sv
+    this.language = "";
+    this.loading = false;
+    this.error = false;
+    this.ocrNumber = "";
+    this.searchSuccess = false;
+    this.invalidOcrNumber = false;
+  }
+  getTranslation(key, language) {
+    var _a, _b;
+    return ((_a = translations[key]) === null || _a === void 0 ? void 0 : _a[language]) || ((_b = translations[key]) === null || _b === void 0 ? void 0 : _b.sv) || key;
+  }
+  handleSearch(e) {
+    // reset states
+    this.invalidOcrNumber = false;
+    this.searchSuccess = false;
+    this.error = false;
+    const validationResult = this.validateOcrNumber(e.detail);
+    if (validationResult.error) {
+      this.invalidOcrNumber = true;
+      return;
+    }
+    // call endpoint
+    this.ocrNumberSearch(validationResult.value);
+  }
+  async ocrNumberSearch(ocrNumber) {
+    this.loading = true;
+    await fetch(`https://portal.postnord.com/public-service/api/ocr?key=${ocrNumber}`)
+      .then((response) => {
+      return response.json();
+    })
+      .then((data) => {
+      this.loading = false;
+      this.ocrNumber = data.newOcr;
+      this.searchSuccess = true;
+    })
+      .catch(() => {
+      this.error = true;
+      this.loading = false;
+      this.searchSuccess = false;
+    });
+  }
+  validateOcrNumber(value) {
+    // Removes spaces and dashes
+    const formatValue = value ? value.replace(/[ -]/gi, "") : "";
+    // Looks for non-digits
+    const ocrRegex = new RegExp(/\D+/);
+    // Needs to be atleast 6 numbers
+    const error = ocrRegex.test(formatValue) || formatValue.length !== 6;
+    return { error, value: formatValue };
+  }
+  renderSearchResult() {
+    if (!this.loading && !this.error && this.searchSuccess) {
+      return (h("div", { class: "search-results" },
+        this.getTranslation("SEARCH_SUCCESS", this.language),
+        ": ",
+        h("b", null, this.ocrNumber)));
+    }
+  }
+  renderErrorMessage() {
+    if (this.invalidOcrNumber && !this.loading) {
+      return (h("div", { class: "invalid-text-container" },
+        h("p", { class: "invalid-ocr" }, this.getTranslation("ERROR_INVALID_LICENSE_NUMBER", this.language))));
+    }
+    if (this.error && !this.loading) {
+      return (h("div", { class: "error-text-container" },
+        h("p", { class: "bold" }, this.getTranslation("ERROR_NO_RESULTS", this.language)),
+        h("p", { class: "bold" }, this.getTranslation("ERROR_REASON_HEADER", this.language)),
+        h("p", null, this.getTranslation("ERROR_REASON_ONE", this.language)),
+        h("p", null, this.getTranslation("ERROR_REASON_TWO", this.language))));
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("pn-search-field", { loading: this.loading, label: this.getTranslation("SEARCH_BUTTON", this.language), button: "", placeholder: this.getTranslation("PLACEHOLDER_TEXT", this.language), onSearch: (e) => this.handleSearch(e) }),
+      this.renderSearchResult(),
+      this.renderErrorMessage()));
+  }
+  static get is() { return "pn-ocr-search"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-ocr-search.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-ocr-search.css"]
+  }; }
+  static get properties() { return {
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "loading": {},
+    "error": {},
+    "ocrNumber": {},
+    "searchSuccess": {},
+    "invalidOcrNumber": {}
+  }; }
+}

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-ocr-search/translations.js

@@ -0,0 +1,58 @@
+export const translations = {
+  SEARCH_BUTTON: {
+    da: "Search",
+    en: "Search",
+    fi: "Search",
+    no: "Search",
+    sv: "Sök",
+  },
+  SEARCH_SUCCESS: {
+    da: "Your OCR number is",
+    en: "Your OCR number is",
+    fi: "Your OCR number is",
+    no: "Your OCR number is",
+    sv: "Ditt OCR-nummer är",
+  },
+  ERROR_INVALID_LICENSE_NUMBER: {
+    da: "Invalid license number",
+    en: "Invalid license number",
+    fi: "Invalid license number",
+    no: "Invalid license number",
+    sv: "Ogiltligt licensnummer",
+  },
+  ERROR_NO_RESULTS: {
+    da: "The search did not generate any results",
+    en: "The search did not generate any results",
+    fi: "The search did not generate any results",
+    no: "The search did not generate any results",
+    sv: "Sökningen genererade inga träffar",
+  },
+  ERROR_REASON_HEADER: {
+    da: "It may be due to:",
+    en: "It may be due to:",
+    fi: "It may be due to:",
+    no: "It may be due to:",
+    sv: "Det kan bero på:",
+  },
+  ERROR_REASON_ONE: {
+    da: "We could not find that license number",
+    en: "We could not find that license number",
+    fi: "We could not find that license number",
+    no: "We could not find that license number",
+    sv: "Vi hittar inget sådant licensnummer",
+  },
+  ERROR_REASON_TWO: {
+    da: "Check the information and try again.",
+    en: "Check the information and try again.",
+    fi: "Check the information and try again.",
+    no: "Check the information and try again.",
+    sv: "Kontrollera uppgifterna och försök igen.",
+  },
+  PLACEHOLDER_TEXT: {
+    da: "License number 6 digits",
+    en: "License number 6 digits",
+    fi: "License number 6 digits",
+    no: "License number 6 digits",
+    sv: "Licensnummer 6 tecken",
+  },
+};

package/umd/modules/@postnord/web-components/collection/components/web-components/pn-zipcode-search/pn-zipcode-search.css

@@ -0,0 +1,39 @@
+pn-zipcode-search {
+  display: block;
+  color: #5E554A;
+}
+pn-zipcode-search .search-results {
+  margin-top: 1em;
+  padding: 0.5em;
+}
+pn-zipcode-search .search-results > h3,
+pn-zipcode-search .search-results h2 {
+  font-weight: normal;
+}
+pn-zipcode-search .text-row {
+  display: flex;
+  align-items: center;
+}
+pn-zipcode-search .text-row + .text-row {
+  margin-top: 1em;
+}
+pn-zipcode-search .text-row > * + * {
+  margin-left: 0.25em;
+}
+pn-zipcode-search .error-text {
+  color: #A70707;
+  padding: 0.5em 1em;
+}
+pn-zipcode-search pn-search-field {
+  width: 100%;
+}
+@media screen and (max-width: 30em) {
+  pn-zipcode-search .text-row:nth-child(-n+2) {
+    flex-direction: column;
+    align-items: unset;
+  }
+  pn-zipcode-search .text-row:nth-child(-n+2) .delivery-date {
+    margin-left: auto;
+    margin-top: 0.25em;
+  }
+}