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

package/umd/modules/@postnord/web-components/collection/components/input/pn-select/select.stories.js

@@ -0,0 +1,33 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "input/Select",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const select = () => {
+  // Storybook Knobs ------------------------------------------//
+  const searchable = boolean("searchable", false);
+  const label = text("label", "Description of choice");
+  const placeholder = text("placeholder", "Select an option");
+  const checkbox = boolean("checkboxes", false);
+  const checkboxid = text("checkboxid", "pn-select");
+  const error = text("error", "");
+  const invalid = boolean("invalid", false);
+  // --------------------------------------------------------- //
+
+  return `
+    <div style="max-width: 40em; padding: 2em; margin: auto;">
+      <pn-select searchable=${searchable} checkbox=${checkbox} checkboxid="${checkboxid}" placeholder="${placeholder}" label="${label}" error="${error}" invalid="${invalid}">
+        <pn-option checkbox=${checkbox} value="1">one</pn-option>
+        <pn-option checkbox=${checkbox} value="2">two</pn-option>
+        <pn-option checkbox=${checkbox} value="3">three</pn-option>
+        <pn-option checkbox=${checkbox} value="4">four</pn-option>
+        <pn-option checkbox=${checkbox} value="5">five</pn-option>
+      </pn-select>
+    </div>
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/input/pn-toggle-switch/pn-toggle-switch.css

@@ -0,0 +1,113 @@
+pn-toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: 3rem;
+}
+
+pn-toggle-switch .pn-toggle-switch {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  margin: 0;
+  position: absolute;
+}
+
+.pn-toggle {
+  width: 1em;
+  height: 1em;
+  padding: 0.2em;
+  position: relative;
+  cursor: pointer;
+  box-sizing: content-box;
+  margin-right: 1.4em;
+  transition: transform 0.2s cubic-bezier(0.5, 0, 0.5, 1);
+  -webkit-tap-highlight-color: transparent;
+}
+.pn-toggle .bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 175%;
+  height: 100%;
+  z-index: 0;
+  border-radius: 2em;
+  transition: width 0.2s cubic-bezier(0.5, 0, 0.5, 1), box-shadow 0.1s, background-color 0.2s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.1s;
+}
+.pn-toggle > .circle {
+  width: 1em;
+  height: 1em;
+  background: white;
+  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  transition: inherit;
+  z-index: 1;
+  position: relative;
+  padding: 0.1em;
+}
+.pn-toggle > .circle > svg {
+  transform: rotate(-90deg);
+  margin: -0.1em;
+}
+.pn-toggle pn-spinner {
+  opacity: 0;
+  transition: opacity 0.15s cubic-bezier(0.5, 0, 0.5, 1);
+  width: 100%;
+  height: 100%;
+}
+
+pn-toggle-switch .pn-toggle-switch {
+  /*---------------------------------------Focus-------------------------------------------*/
+  /*---------------------------------------/Focus-------------------------------------------*/
+  /*---------------------------------------Hover-------------------------------------------*/
+  /*---------------------------------------/Hover-------------------------------------------*/
+  /*------------------------------------Indeterminate----------------------------------------*/
+  /*------------------------------------/Indeterminate----------------------------------------*/
+  /*---------------------------------------Checked-------------------------------------------*/
+  /*---------------------------------------/Checked-------------------------------------------*/
+  /*---------------------------------------Disabled-------------------------------------------*/
+  /*---------------------------------------/Disabled-------------------------------------------*/
+}
+pn-toggle-switch .pn-toggle-switch + .pn-toggle .bg {
+  background: #969087;
+}
+pn-toggle-switch .pn-toggle-switch:focus + .pn-toggle .bg, pn-toggle-switch .pn-toggle-switch:active + .pn-toggle .bg {
+  box-shadow: 0 0 0 0.3rem white, 0 0 0 0.6rem #005D92;
+}
+pn-toggle-switch .pn-toggle-switch:hover + .pn-toggle .bg {
+  background: #5E554A;
+}
+pn-toggle-switch .pn-toggle-switch:hover:checked + .pn-toggle .bg {
+  background: #0D234B;
+  opacity: 1;
+}
+pn-toggle-switch .pn-toggle-switch:indeterminate + .pn-toggle {
+  transform: translateX(50%);
+}
+pn-toggle-switch .pn-toggle-switch:indeterminate + .pn-toggle .bg {
+  width: 100%;
+}
+pn-toggle-switch .pn-toggle-switch:indeterminate + .pn-toggle pn-spinner {
+  opacity: 1;
+  transition-delay: 0.3s;
+}
+pn-toggle-switch .pn-toggle-switch:checked + .pn-toggle .bg {
+  background: #005D92;
+}
+pn-toggle-switch .pn-toggle-switch:checked + .pn-toggle > .circle {
+  transform: translateX(100%);
+}
+pn-toggle-switch .pn-toggle-switch:disabled + .pn-toggle {
+  cursor: not-allowed;
+}
+pn-toggle-switch .pn-toggle-switch:disabled + .pn-toggle .bg {
+  box-shadow: none;
+  opacity: 0.5;
+}
+pn-toggle-switch .pn-toggle-switch:disabled:hover + .pn-toggle .bg {
+  opacity: 0.5;
+  background: #969087;
+}
+pn-toggle-switch .pn-toggle-switch:disabled:hover:checked + .pn-toggle .bg {
+  background: #005D92;
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-toggle-switch/pn-toggle-switch.js

@@ -0,0 +1,127 @@
+import { Component, Element, Prop, h, Host } from "@stencil/core";
+export class PnToggleSwitch {
+  constructor() {
+    this.checked = false;
+    this.disabled = false;
+    this.indeterminate = false;
+    this.name = null;
+  }
+  componentDidUpdate() {
+    this.checkIndeterminateState();
+  }
+  componentDidLoad() {
+    this.checkIndeterminateState();
+  }
+  checkIndeterminateState() {
+    const toggleSwitch = this.hostElement.querySelector(`#${this.toggleid}`);
+    if (toggleSwitch)
+      toggleSwitch.indeterminate = this.indeterminate;
+  }
+  render() {
+    return (h(Host, null,
+      h("input", { id: this.toggleid, name: this.name || this.toggleid, type: "checkbox", checked: this.checked, class: "pn-toggle-switch", disabled: this.disabled }),
+      h("label", { htmlFor: this.toggleid, class: "pn-toggle" },
+        h("div", { class: "bg" }),
+        h("div", { class: "circle" },
+          h("pn-spinner", null)))));
+  }
+  static get is() { return "pn-toggle-switch"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-toggle-switch.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-toggle-switch.css"]
+  }; }
+  static get properties() { return {
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "toggleid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Required!"
+      },
+      "attribute": "toggleid",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-toggle-switch/toggle-switch.stories.js

@@ -0,0 +1,31 @@
+import readme from "./readme.md";
+import { boolean, text } from "@storybook/addon-knobs";
+
+export default {
+  title: "input/Toggle Switch",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const regular = () => {
+
+  // Storybook Knobs ------------------------------------------//
+  const toggleid = text("id", 'pn-toggle');
+  const name = text("name", '');
+  const disabled = boolean("disabled", false);
+  const indeterminate = boolean("indeterminate", false);
+  const checked = boolean("checked", false)
+  // --------------------------------------------------------- //
+  
+  return `
+  <pn-toggle-switch
+    checked=${checked}
+    indeterminate=${indeterminate}
+    disabled=${disabled}
+    toggleid=${toggleid}
+    name=${name}
+    />
+  `
+};

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

@@ -0,0 +1,11 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Navigation/Footer",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const footer = () => '<pn-footer />';

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-footer/pn-footer.css

@@ -0,0 +1,32 @@
+pn-footer {
+  color: #5E554A;
+  padding-bottom: 2em;
+  display: block;
+}
+pn-footer .pn-footer-row {
+  padding: 0.2em 0;
+  font-size: 0.9em;
+  text-align: center;
+}
+pn-footer .pn-footer-row p,
+pn-footer .pn-footer-row a {
+  margin-right: 0.2em;
+  display: inline-block;
+}
+pn-footer a {
+  color: #005D92;
+}
+pn-footer pn-icon {
+  margin-left: 0.2em;
+}
+pn-footer #ot-sdk-btn {
+  -webkit-box-direction: normal;
+  box-sizing: border-box;
+  color: #005D92;
+  display: inline-block;
+  font-size: 0.9em;
+  margin-right: 0.2em;
+  text-align: center;
+  text-decoration: none;
+  visibility: inherit;
+}

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

@@ -0,0 +1,145 @@
+import { Component, State, h, Host } from "@stencil/core";
+import { contactUrls, cookieUrls, domainUrls, privacyUrls, termsandConditionsUrls } from "./urls";
+import { translations } from "./translations";
+export class PnFooter {
+  constructor() {
+    this.market = "SE";
+    this.language = "en";
+    this.isLoggedIn = false;
+    this.isBusinessUser = false;
+  }
+  componentWillLoad() {
+    const topbar = window.pnTopbar;
+    if (topbar) {
+      this.init();
+    }
+    else {
+      window.addEventListener("topbarLoaded", () => {
+        this.init();
+      });
+    }
+  }
+  init() {
+    const topbar = window.pnTopbar;
+    if (topbar) {
+      this.market = topbar.market;
+      this.language = topbar.language;
+      this.isLoggedIn = topbar.isLoggedIn;
+      this.isBusinessUser = topbar.isBusinessUser;
+      topbar.onChangeMarket = (market) => {
+        this.market = market;
+      };
+      topbar.onChangeLanguage = (language) => {
+        this.language = language;
+      };
+    }
+  }
+  getTranslation(keyToMatch, languageToMatch) {
+    // Loop through translations
+    for (const [key, languages] of Object.entries(translations)) {
+      if (key === keyToMatch.toUpperCase()) {
+        const englishTranslation = translations[key].en;
+        // Loop through languages
+        for (const [language, translation] of Object.entries(languages)) {
+          if (language === languageToMatch.toLowerCase()) {
+            if (this.isEmpty(translation)) {
+              return englishTranslation;
+            }
+            else {
+              return translation;
+            }
+          }
+        }
+        // If no matching language, return the english translation as fallback
+        return englishTranslation;
+      }
+    }
+    return keyToMatch; // If no translation found, return the key as last fallback
+  }
+  getUrl(urls, marketToMatch, languageToMatch) {
+    // Loop through markets
+    for (const [market, languages] of Object.entries(urls)) {
+      if (market === marketToMatch.toUpperCase()) {
+        // Loop through languages
+        for (const [language, url] of Object.entries(languages)) {
+          if (language === languageToMatch.toLowerCase()) {
+            return url;
+          }
+        }
+        // Return the default URL as fallback
+        const defaultMarketUrl = urls[market].default;
+        return defaultMarketUrl;
+      }
+    }
+    // As last fallback, return the english version from postnord.se
+    const defaultUrl = urls.SE.default;
+    return defaultUrl;
+  }
+  getDomain(urls, marketToMatch) {
+    const defaultUrl = urls.SE.default;
+    // Loop through markets
+    for (const [market, domains] of Object.entries(urls)) {
+      if (market === marketToMatch.toUpperCase()) {
+        const domain = domains[market.toLowerCase()];
+        if (this.isEmpty(domain)) {
+          return defaultUrl;
+        }
+        else {
+          return domain;
+        }
+      }
+    }
+    // As last fallback, return the english version: postnord.com
+    return defaultUrl;
+  }
+  render() {
+    const isPrivateFiUser = this.market === "FI" && this.isLoggedIn && !this.isBusinessUser;
+    return (h(Host, null,
+      h("div", { class: "pn-footer-row" },
+        h("p", null, this.getTranslation("DO_YOU_HAVE_ANY_QUESTIONS", this.language)),
+        this.isLoggedIn && !isPrivateFiUser ? (h("a", { href: contactUrls.customerService }, this.getTranslation("GET_IN_TOUCH", this.language))) : (h("a", { target: "_blank", rel: "noopener noreferrer", href: this.getUrl(contactUrls, this.market, this.language) },
+          this.getTranslation("GET_IN_TOUCH", this.language),
+          h("pn-icon", { color: "blue700", small: true, symbol: "open-in-new" })))),
+      h("div", { class: "pn-footer-row" },
+        this.market !== "NO" ? (h("a", { target: "_blank", rel: "noopener noreferrer", href: this.getUrl(termsandConditionsUrls, this.market, this.language) },
+          this.getTranslation("TERMS_AND_CONDITIONS", this.language),
+          h("pn-icon", { color: "blue700", small: true, symbol: "open-in-new" }))) : null,
+        h("a", { target: "_blank", rel: "noopener noreferrer", href: this.getUrl(privacyUrls, this.market, this.language) },
+          this.getTranslation("PRIVACY_POLICY", this.language),
+          h("pn-icon", { color: "blue700", small: true, symbol: "open-in-new" })),
+        h("a", { target: "_blank", rel: "noopener noreferrer", href: this.getUrl(cookieUrls, this.market, this.language) },
+          this.getTranslation("COOKIES", this.language),
+          h("pn-icon", { color: "blue700", small: true, symbol: "open-in-new" }))),
+      h("div", { class: "pn-footer-row" },
+        h("p", null, this.getTranslation("MORE_INFO_ABOUT_POSTNORD_CAN_BE_FOUND_AT", this.language)),
+        h("a", { target: "_blank", rel: "noopener noreferrer", href: `https://www.${this.getDomain(domainUrls, this.market)}` },
+          this.getDomain(domainUrls, this.market),
+          h("pn-icon", { color: "blue700", small: true, symbol: "open-in-new" })))));
+  }
+  isEmpty(input) {
+    const isNullOrUndefined = !input;
+    if (isNullOrUndefined) {
+      return true;
+    }
+    const isEmptyStr = input.trim().length === 0;
+    if (isEmptyStr) {
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  static get is() { return "pn-footer"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-footer.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-footer.css"]
+  }; }
+  static get states() { return {
+    "market": {},
+    "language": {},
+    "isLoggedIn": {},
+    "isBusinessUser": {}
+  }; }
+}

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

@@ -0,0 +1,44 @@
+export const translations = {
+  COOKIES: {
+    da: 'Cookies',
+    en: 'Cookies',
+    fi: 'Evästeet',
+    no: 'Cookies',
+    sv: 'Cookies',
+  },
+  DO_YOU_HAVE_ANY_QUESTIONS: {
+    da: 'Har du nogen spørgsmål?',
+    en: 'Do you have any questions?',
+    fi: 'Onko sinulla kysyttävää?',
+    no: '',
+    sv: 'Undrar du över något?',
+  },
+  GET_IN_TOUCH: {
+    da: 'Kontakt os',
+    en: 'Get in touch',
+    fi: 'Ota yhteyttä',
+    no: '',
+    sv: 'Kontakta oss',
+  },
+  MORE_INFO_ABOUT_POSTNORD_CAN_BE_FOUND_AT: {
+    da: 'Mere information om PostNord findes på',
+    en: 'More information about PostNord can be found at',
+    fi: 'Lisää tietoa PostNordista löydät osoitteesta',
+    no: '',
+    sv: 'Mer information om PostNord hittar du på',
+  },
+  PRIVACY_POLICY: {
+    da: 'Integritetspolitik',
+    en: 'Privacy policy',
+    fi: 'Yksityisyysasetukset',
+    no: 'Privacy policy',
+    sv: 'Integritetspolicy',
+  },
+  TERMS_AND_CONDITIONS: {
+    da: 'Vilkår og betingelser',
+    en: 'Terms and conditions',
+    fi: 'Sopimusehdot',
+    no: 'Betingelser og vilkår',
+    sv: 'Villkor',
+  }
+};

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

@@ -0,0 +1,90 @@
+export const contactUrls = {
+  DK: {
+    default: 'https://www.postnord.dk/en/help-and-support',
+    da: 'https://www.postnord.dk/kundeservice'
+  },
+  FI: {
+    default: 'https://www.postnord.fi/en/customer-service',
+    fi: 'https://www.postnord.fi/asiakaspalvelu/ota-yhteytta'
+  },
+  NO: {
+    default: 'https://www.postnord.no/en/contact-postnord',
+    no: 'https://www.postnord.no/kundeservice'
+  },
+  SE: {
+    default: 'https://www.postnord.se/en/help-and-support/contact-us',
+    sv: 'https://www.postnord.se/kundservice'
+  },
+  customerService: 'https://portal.postnord.com/customerservice',
+};
+export const cookieUrls = {
+  DK: {
+    default: 'https://www.postnord.dk/en/cookies',
+    da: 'https://www.postnord.dk/cookies'
+  },
+  FI: {
+    default: 'https://www.postnord.fi/en/privacy-policy/information-about-the-cookies',
+    fi: 'https://www.postnord.fi/yksityisyydensuoja/tietoa-evasteista'
+  },
+  NO: {
+    default: 'https://www.postnord.no/en/cookies',
+    no: 'https://www.postnord.no/cookies'
+  },
+  SE: {
+    default: 'https://www.postnord.se/en/cookies',
+    sv: 'https://www.postnord.se/cookies'
+  }
+};
+export const domainUrls = {
+  DK: {
+    default: 'postnord.com',
+    dk: 'postnord.dk'
+  },
+  FI: {
+    default: 'postnord.com',
+    fi: 'postnord.fi'
+  },
+  NO: {
+    default: 'postnord.com',
+    no: 'postnord.no'
+  },
+  SE: {
+    default: 'postnord.com',
+    se: 'postnord.se'
+  }
+};
+export const privacyUrls = {
+  DK: {
+    default: 'https://www.postnord.se/en/privacy-policy',
+    da: 'https://www.postnord.dk/personlige-oplysninger'
+  },
+  FI: {
+    default: 'https://www.postnord.se/en/privacy-policy',
+    fi: 'https://www.postnord.fi/yksityisyydensuoja'
+  },
+  NO: {
+    default: 'https://www.postnord.se/en/privacy-policy',
+    no: 'https://www.postnord.no/personvernerklaering'
+  },
+  SE: {
+    default: 'https://www.postnord.se/en/privacy-policy',
+    sv: 'https://www.postnord.se/integritetspolicy'
+  }
+};
+export const termsandConditionsUrls = {
+  DK: {
+    default: 'https://www.postnord.dk/kundeservice/kundeservice-erhverv/forretningsbetingelser',
+    da: 'https://www.postnord.dk/siteassets/pdf/forretningsbetingelser/2020/kundeportalen.pdf',
+  },
+  FI: {
+    default: 'https://www.postnord.fi/en/sending/terms',
+    fi: 'https://www.postnord.fi/laheta/sopimusehdot'
+  },
+  // NO: {
+  //   default: 'https://www.postnord.se/en/privacy-policy',
+  //   no: 'https://www.postnord.no/personvernerklaering'
+  // },
+  SE: {
+    default: 'https://www.postnord.se/siteassets/pdf/villkor/anvandarvillkor-postnord-konto.pdf',
+  }
+};

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/pn-tab.css

@@ -0,0 +1,45 @@
+pn-tab {
+  margin-right: 2.5em;
+  flex-shrink: 0;
+  scroll-snap-align: center;
+}
+pn-tab:last-of-type {
+  padding-right: 1.5em;
+  margin-right: 0;
+}
+pn-tab:first-child {
+  padding-left: 1.5em;
+}
+
+button.pn-tab {
+  padding: 0 0.5em 0.5em;
+  border: none;
+  font: inherit;
+  background-color: transparent;
+  cursor: pointer;
+  font-size: 0.9em;
+  color: #000;
+  font-weight: 300;
+  outline: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.3s ease-in-out;
+}
+button.pn-tab svg {
+  margin-right: 0.4em;
+  width: 1.7em;
+  height: 1.7em;
+}
+button.pn-tab svg path,
+button.pn-tab svg polygon {
+  transition: fill 0.3s ease-in-out;
+  fill: #000;
+}
+button.pn-tab.active {
+  color: #005D92;
+}
+button.pn-tab.active svg path,
+button.pn-tab.active svg polygon {
+  fill: #005D92;
+}