@postnord/pn-marketweb-components 1.0.4 → 1.0.8

package/collection/components/navigation/pn-language-selector/pn-language-selector.js

@@ -0,0 +1,92 @@
+import { Component, Prop, h, State, Host, Watch, Element } from "@stencil/core";
+import { translations } from "./translations";
+export class PnlanguageSelector {
+  constructor() {
+    /* Current language code  */
+    this.value = "";
+    this.selectedLanguageName = "";
+    this.options = [];
+  }
+  componentWillLoad() {
+    this.setTranslations();
+  }
+  componentDidLoad() {
+    this.initialize();
+  }
+  initialize() {
+    const options = [].slice.apply(this.hostElement.querySelectorAll("pn-language-selector-option"));
+    options.map((option) => {
+      // Set current label of language selector
+      if (option.getAttribute("code") == this.value || option.getAttribute("selected") == "true") {
+        this.selectedLanguageName = option.getAttribute("name");
+      }
+      // Bind event listener for when a user change language
+      option.addEventListener("setCurrentLanguage", (event) => {
+        this.onSetCurrentLanguage(event.detail);
+      });
+    });
+  }
+  onSetCurrentLanguage(option) {
+    this.value = option.code;
+    this.selectedLanguageName = option.name;
+  }
+  setTranslations() {
+    if (translations[this.value]) {
+      this.i18n = translations[this.value];
+    }
+  }
+  onValueChange() {
+    var _a;
+    const components = (_a = this.hostElement.querySelectorAll("pn-language-selector-option")) !== null && _a !== void 0 ? _a : [];
+    components.forEach((component) => {
+      // Pass values as props into slotted components
+      // component.setAttribute("current-language", this.value);
+      component.setAttribute("selected", (component.getAttribute("code") === this.value) + '');
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("pn-nav-dropdown", { label: this.selectedLanguageName, icon: "globe" },
+        h("nav", { class: "languageselector-nav", "aria-label": this.i18n.heading },
+          h("strong", { class: "languageselector-title" }, this.i18n.heading),
+          h("div", { class: "languageselector-list", role: "list" },
+            h("slot", null))))));
+  }
+  static get is() { return "pn-language-selector"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-language-selector.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-language-selector.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "selectedLanguageName": {},
+    "options": {},
+    "i18n": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "onValueChange"
+    }]; }
+}

package/collection/components/navigation/pn-language-selector/translations.js

@@ -0,0 +1,17 @@
+export const translations = {
+  'sv': {
+    "heading": "Språk",
+  },
+  'en': {
+    "heading": "Language"
+  },
+  'da': {
+    "heading": "Sprog"
+  },
+  'no': {
+    "heading": "Språk"
+  },
+  'fi': {
+    "heading": "Kieli"
+  }
+};

package/collection/components/navigation/pn-mainnav/main-nav.stories.js

@@ -0,0 +1,92 @@
+import readme from "./readme.md";
+
+export default {
+  title: "navigation/Main Navigation",
+  parameters: {
+    notes: readme
+  }
+};
+
+  const Template = ({ ...args }) => {
+  return `
+  <pn-mainnav market="${args.market}" language="${args.language}">
+    <pn-mainnav-level>
+      <pn-mainnav-list>
+      <pn-mainnav-link name="Hem" href="/" itemid="homelink"></pn-mainnav-link>
+      <pn-mainnav-link name="Hej hej hej" href="/" itemid="homelink"></pn-mainnav-link>
+      <pn-mainnav-link name="Hej hej hej 2" href="/" itemid="homelink"></pn-mainnav-link>
+      <pn-mainnav-link name="Hej hej hej 3" href="/" itemid="homelink"></pn-mainnav-link>
+    <pn-mainnav-link name="Skicka (Org)" href="/skicka-forsandelser" linkid="level1idexample">
+      <pn-mainnav-level>
+        <pn-mainnav-list>
+          <pn-mainnav-link href="/skicka-forsandelser/brev-och-vykort" name="Brev och vykort" linkid="linkidexample"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/pakettjanster" name="Paket"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/pex-bud" name="PEX Bud"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/stort-tungt-och-skrymmande" name="Stort, tungt och skrymmande"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/reklam-och-tidningar" name="Reklam och tidningar"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/returer" name="Returer"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/forberedelser" name="Förberedelser"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/priser-och-villkor" name="Priser och villkor"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/har-finns-vi" name="Här finns vi"></pn-mainnav-link>
+        </pn-mainnav-list>
+      </pn-mainnav-level>
+    </pn-mainnav-link>
+    <pn-mainnav-link name="Skicka" href="/skicka-forsandelser">
+      <pn-mainnav-level>
+        <pn-mainnav-list heading="Läs mer om våra tjänster">
+          <pn-mainnav-link href="/skicka-forsandelser/brev-och-vykort" name="Brev och vykort"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/pakettjanster" name="Paket"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/pex-bud" name="PEX Bud"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/stort-tungt-och-skrymmande" name="Stort, tungt och skrymmande"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/reklam-och-tidningar" name="Reklam och tidningar"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/returer" name="Returer"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/forberedelser" name="Förberedelser"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/priser-och-villkor" name="Priser och villkor"></pn-mainnav-link>
+          <pn-mainnav-link href="/skicka-forsandelser/har-finns-vi" name="Här finns vi"></pn-mainnav-link>
+        </pn-mainnav-list>
+        <pn-mainnav-list heading="Populära tjänster">
+          <pn-mainnav-link href="https://portal.postnord.com/skickadirekt/" name="Skicka direkt"></pn-mainnav-link>
+          <pn-mainnav-link href="https://portal.postnord.com/skapa-utskick/" name="Skapa utskick"></pn-mainnav-link>
+        </pn-mainnav-list>
+      </pn-mainnav-level>
+    </pn-mainnav-link>
+      <pn-mainnav-link name="Ta emot (Org)" href="/ta-emot">
+        <pn-mainnav-level>
+          <pn-mainnav-list>
+            <pn-mainnav-link href="/ta-emot/hamta" name="Hämta"></pn-mainnav-link>
+            <pn-mainnav-link href="/ta-emot/valj-hur-du-vill-ta-emot-din-leverans" name="Välj hur du vill ta emot din leverans"></pn-mainnav-link>
+            <pn-mainnav-link href="/ta-emot/saknade-skadade-eller-forsenade-forsandelser" name="Saknade, skadade eller försenade försändelser"></pn-mainnav-link>
+            <pn-mainnav-link href="/ta-emot/hantera-post" name="Hantera post"></pn-mainnav-link>
+            <pn-mainnav-link href="/ta-emot/postutdelning" name="Postutdelning"></pn-mainnav-link>
+            <pn-mainnav-link href="/ta-emot/leveranser-till-hemmet" name="Leveranser till hemmet"></pn-mainnav-link>
+          </pn-mainnav-list>
+        </pn-main-nav-level>
+    </pn-mainnav-link>
+    <pn-mainnav-link name="Ta emot" href="/ta-emot">
+      <pn-mainnav-level>
+        <pn-mainnav-list>
+          <pn-mainnav-link href="/ta-emot/hamta" name="Hämta"></pn-mainnav-link>
+          <pn-mainnav-link href="/ta-emot/valj-hur-du-vill-ta-emot-din-leverans" name="Välj hur du vill ta emot din leverans"></pn-mainnav-link>
+          <pn-mainnav-link href="/ta-emot/saknade-skadade-eller-forsenade-forsandelser" name="Saknade, skadade eller försenade försändelser"></pn-mainnav-link>
+          <pn-mainnav-link href="/ta-emot/hantera-post" name="Hantera post"></pn-mainnav-link>
+          <pn-mainnav-link href="/ta-emot/postutdelning" name="Postutdelning"></pn-mainnav-link>
+          <pn-mainnav-link href="/ta-emot/leveranser-till-hemmet" name="Leveranser till hemmet"></pn-mainnav-link>
+        </pn-mainnav-list>
+        <pn-mainnav-list heading="Populära tjänster">
+          <pn-mainnav-link href="https://change.postnord.com/" name="Flex change" target="_blank"></pn-mainnav-link>
+          <pn-mainnav-link href="https://portal.postnord.com/betalamoms/search" name="Betala moms"></pn-mainnav-link>
+        </pn-mainnav-list>
+      </pn-main-nav-level>
+    </pn-mainnav-link>
+    </pn-mainnav-list>
+    </pn-mainnav-level>
+    <div slot="footer">Mobile footer content</div>
+  </pn-main-nav>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  market : "se",
+  language: 'sv'
+};