@postnord/pn-marketweb-components 2.1.8 → 2.2.0

package/collection/components/cta/pn-share/pn-share.css

@@ -0,0 +1,23 @@
+pn-share .pn-share__container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+pn-share .pn-share__heading {
+  font-size: 1.6rem;
+  font-weight: 500;
+}
+pn-share .pn-share__heading:after {
+  content: "";
+  display: block;
+  height: 0.2rem;
+  background-color: #F3F2F2;
+  margin-top: 0.4rem;
+  margin-bottom: 0.8rem;
+}
+pn-share .pn-share__items {
+  display: flex;
+  flex-direction: row;
+  gap: 0.8rem;
+  align-items: center;
+}

package/collection/components/cta/pn-share/pn-share.js

@@ -0,0 +1,91 @@
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
+import { translations } from './translations';
+const SHARE_URLS = [
+  { platform: 'linkedin', url: 'https://www.linkedin.com/sharing/share-offsite/?url=', text: 'LinkedIn' },
+  { platform: 'twitter', url: 'https://twitter.com/intent/tweet?url=', text: 'Twitter' },
+  { platform: 'facebook', url: 'https://www.facebook.com/sharer/sharer.php?u=', text: 'Facebook' },
+];
+export class PnShare {
+  constructor() {
+    this.link = null;
+    this.language = 'sv';
+  }
+  componentWillLoad() {
+    this.setTranslations();
+  }
+  setTranslations() {
+    if (this.language === 'nb') {
+      this.language = 'no';
+    }
+    if (this.language && translations[this.language]) {
+      this.i18n = translations[this.language];
+    }
+  }
+  onLanguageChange() {
+    this.setTranslations();
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-share__container" },
+        h("h3", { class: "pn-share__heading" },
+          this.i18n.sharelabel,
+          ":"),
+        h("div", { class: "pn-share__items" }, SHARE_URLS.map(platform => {
+          return (h("pn-share-item", { link: `${platform.url}${this.link}`, text: platform.text },
+            h("pn-icon", { slot: "icon", symbol: platform.platform })));
+        })))));
+  }
+  static get is() { return "pn-share"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-share.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-share.css"]
+  }; }
+  static get properties() { return {
+    "link": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "language": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "'sv'"
+    }
+  }; }
+  static get states() { return {
+    "i18n": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "language",
+      "methodName": "onLanguageChange"
+    }]; }
+}

package/collection/components/cta/pn-share/pn-share.stories.js

@@ -0,0 +1,22 @@
+import readme from './readme.md';
+
+export default {
+  title: 'CTA/Share',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+  <div style="width:200%; margin:0 auto">
+    <pn-share link=${args.link}></pn-share>
+    </div>
+    `;
+};
+
+export const Share = Template.bind({});
+Share.args = {
+  link: 'www.google.se',
+};

package/collection/components/cta/pn-share/translations.js

@@ -0,0 +1,17 @@
+export const translations = {
+  sv: {
+    sharelabel: 'Dela med',
+  },
+  en: {
+    sharelabel: 'Share to',
+  },
+  da: {
+    sharelabel: 'Del med',
+  },
+  no: {
+    sharelabel: 'Dele med',
+  },
+  fi: {
+    sharelabel: 'Jakaa',
+  },
+};

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection.js

@@ -1,18 +1,27 @@
-import { Component, Prop, h, State, Element, Host } from "@stencil/core";
-import { state as headerState } from "./pn-marketweb-siteheader-store";
+import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { state as headerState } from './pn-marketweb-siteheader-store';
 export class PnMarketwebSiteheaderLoginProfileselection {
   constructor() {
     // Login dialog
     this.loginDialog = null;
-    this.endpoint = "";
+    this.endpoint = '';
     this.loggedin = false;
-    this.idNamespace = "";
+    this.idNamespace = '';
     this.heading = null;
-    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
+    this.i18n = {
+      searchlabel: '',
+      searchplaceholder: '',
+      searchbuttontext: '',
+      menuHomeButton: '',
+      menuGoBackButton: '',
+      mainMenuButton: '',
+      menuStartButton: '',
+      profileSelectionFlyoutHeading: '',
+    };
     this.user = null;
     this.logoutLink = null;
     this.userName = null;
-    this.userEmail = "";
+    this.userEmail = '';
     this.currentProfile = null;
     this.profileoptions = [];
   }
@@ -32,84 +41,84 @@ export class PnMarketwebSiteheaderLoginProfileselection {
     if (!this.loggedin || this.profileoptions.length > 0) {
       return;
     }
-    let apiUrl = `${this.endpoint}${(this.endpoint.lastIndexOf('/') > -1 && this.endpoint.lastIndexOf('/') === this.endpoint.length - 1) ? '' : '/'}api/user/parentorganizations`;
+    let apiUrl = `${this.endpoint}${this.endpoint.lastIndexOf('/') > -1 && this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? '' : '/'}api/user/parentorganizations`;
     const req = await fetch(apiUrl);
     const reqdata = await req.json();
     const fallbackData = {
       loggedin: true,
       organizations: [
         {
-          name: "Forsheda Livs AB",
-          customerNumber: "5564513603",
-          id: "dbba867d-1dff-3dbb-b420-c57b4b828b73",
+          name: 'Forsheda Livs AB',
+          customerNumber: '5564513603',
+          id: 'dbba867d-1dff-3dbb-b420-c57b4b828b73',
           selected: true,
           profiles: [
             {
-              name: "Forsheda Livs AB",
-              customerNumber: "20685482",
-              id: "f757ba28-9a73-15a2-f128-4b394d970f3f",
-              ssid: "",
+              name: 'Forsheda Livs AB',
+              customerNumber: '20685482',
+              id: 'f757ba28-9a73-15a2-f128-4b394d970f3f',
+              ssid: '',
               selected: false,
-              customerGroup: "Business"
+              customerGroup: 'Business',
             },
             {
-              name: "ICA MAXI KUNGSBACKA",
-              customerNumber: "20831191",
-              id: "5aea41df-32b0-3f7e-2946-78598360177d",
-              ssid: "259686",
+              name: 'ICA MAXI KUNGSBACKA',
+              customerNumber: '20831191',
+              id: '5aea41df-32b0-3f7e-2946-78598360177d',
+              ssid: '259686',
               selected: true,
-              customerGroup: "Agent"
-            }
-          ]
+              customerGroup: 'Agent',
+            },
+          ],
         },
         {
-          name: "Hem Livs i Kungsbacka AB",
-          customerNumber: "5565271250",
-          id: "97ca363c-40ef-cca9-7a3c-9e7f025567c2",
+          name: 'Hem Livs i Kungsbacka AB',
+          customerNumber: '5565271250',
+          id: '97ca363c-40ef-cca9-7a3c-9e7f025567c2',
           selected: false,
           profiles: [
             {
-              name: "ICA KVANTUM KUNGSBACKA",
-              customerNumber: "20831193",
-              id: "fbd61ffd-41c6-2206-b88e-cfef91e1dc39",
-              ssid: "259691",
+              name: 'ICA KVANTUM KUNGSBACKA',
+              customerNumber: '20831193',
+              id: 'fbd61ffd-41c6-2206-b88e-cfef91e1dc39',
+              ssid: '259691',
               selected: false,
-              customerGroup: "Agent"
-            }
-          ]
+              customerGroup: 'Agent',
+            },
+          ],
         },
         {
-          name: "ICA SUPERMARKET TORGET",
-          customerNumber: "5568902679",
-          id: "7cb76a94-e1a5-5f57-58fd-bc563851b28e",
+          name: 'ICA SUPERMARKET TORGET',
+          customerNumber: '5568902679',
+          id: '7cb76a94-e1a5-5f57-58fd-bc563851b28e',
           selected: false,
           profiles: [
             {
-              name: "ICA SUPERMARKET TORGET",
-              customerNumber: "20831212",
-              id: "3a2db017-b68f-6fa0-fe70-542c08cd97ce",
-              ssid: "",
+              name: 'ICA SUPERMARKET TORGET',
+              customerNumber: '20831212',
+              id: '3a2db017-b68f-6fa0-fe70-542c08cd97ce',
+              ssid: '',
               selected: false,
-              customerGroup: "Agent"
-            }
-          ]
-        }
-      ]
+              customerGroup: 'Agent',
+            },
+          ],
+        },
+      ],
     };
-    const data = (window.location.href.indexOf('localhost:6008') !== -1) ? fallbackData : reqdata;
+    const data = window.location.href.indexOf('localhost:6008') !== -1 ? fallbackData : reqdata;
     if (!data || !data.organizations || !data.organizations.length) {
       return;
     }
-    data.organizations.forEach((org) => {
+    data.organizations.forEach(org => {
       if (org.selected === true && org.profiles) {
         const selectedProfile = org.profiles.filter(x => x.selected === true);
-        if (selectedProfile && selectedProfile[0] && selectedProfile[0].customerGroup.toLocaleLowerCase() === "agent" && selectedProfile[0].ssid) {
+        if (selectedProfile && selectedProfile[0] && selectedProfile[0].customerGroup.toLocaleLowerCase() === 'agent' && selectedProfile[0].ssid) {
           org.customerNumber = selectedProfile[0].ssid;
         }
       }
       else {
-        if (org.customerNumber.length === 10 && org.customerNumber.substring(0, 2) === "55") {
-          org.customerNumber = org.customerNumber.substring(0, 6) + "-" + org.customerNumber.substring(6);
+        if (org.customerNumber.length === 10 && org.customerNumber.substring(0, 2) === '55') {
+          org.customerNumber = org.customerNumber.substring(0, 6) + '-' + org.customerNumber.substring(6);
         }
         this.profileoptions.push(org);
       }
@@ -119,8 +128,8 @@ export class PnMarketwebSiteheaderLoginProfileselection {
       name: this.userName,
       customerNumber: '',
       id: '',
-      selected: (!currentProfileObj),
-      profiles: []
+      selected: !currentProfileObj,
+      profiles: [],
     };
     if (!currentProfileObj) {
       currentProfileObj = userProfileOption;
@@ -134,7 +143,7 @@ export class PnMarketwebSiteheaderLoginProfileselection {
     var _a, _b, _c, _d;
     const adjustLink = (link, i) => {
       if (!link.isLogoutLink) {
-        link.isLogoutLink = (link.pageLink.indexOf('location.href') !== -1 && link.pageLink.indexOf('logout') !== -1);
+        link.isLogoutLink = link.pageLink.indexOf('location.href') !== -1 && link.pageLink.indexOf('logout') !== -1;
       }
       if (link.isLogoutLink) {
         link.href = headerState.loginManager.getLogoutUrl(link.href);
@@ -162,7 +171,7 @@ export class PnMarketwebSiteheaderLoginProfileselection {
       this.userEmail = userInfo.email;
     }
     if (userInfo && userInfo.given_name) {
-      this.userName = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : "");
+      this.userName = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : '');
     }
     if (userInfo && userInfo.given_name) {
       this.userName = userInfo.given_name;
@@ -177,6 +186,9 @@ export class PnMarketwebSiteheaderLoginProfileselection {
       return;
     }
   }
+  filterLogoutLink(loggedInLinks) {
+    return loggedInLinks.filter((link) => !link.isLogoutLink);
+  }
   render() {
     if (!this.loginDialog) {
       return;
@@ -184,15 +196,15 @@ export class PnMarketwebSiteheaderLoginProfileselection {
     let hostElementAttribute = {};
     return (h(Host, Object.assign({}, hostElementAttribute),
       this.heading ? h("strong", { class: "pn-marketweb-siteheader-login-profileselection-heading" }, this.heading) : null,
-      this.currentProfile !== null && this.currentProfile.name ?
-        h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile" },
-          h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile-name" }, this.currentProfile.name),
-          h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile-description" }, this.currentProfile.customerNumber ? this.currentProfile.customerNumber : this.userEmail))
-        : null,
-      h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loggedInLinks, idNamespace: this.idNamespace }),
+      this.currentProfile !== null && this.currentProfile.name ? (h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile" },
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile-name" }, this.currentProfile.name),
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile-description" }, this.currentProfile.customerNumber ? this.currentProfile.customerNumber : this.userEmail))) : null,
+      h("pn-marketweb-siteheader-login-linklist", { links: this.filterLogoutLink(this.loginDialog.loggedInLinks), idNamespace: this.idNamespace }),
       h("div", { class: "pn-marketweb-siteheader-login-profileselection-divider" }),
-      this.profileoptions.filter(x => x.selected !== true).map((organization) => {
-        let customerNumber = (organization.profiles.length > 0) ? organization.profiles[0].customerNumber : organization.customerNumber;
+      this.profileoptions
+        .filter(x => x.selected !== true)
+        .map(organization => {
+        let customerNumber = organization.profiles.length > 0 ? organization.profiles[0].customerNumber : organization.customerNumber;
         return (h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption" },
           h("a", { href: `${this.endpoint}/api/user/setprofile?customernumber=${customerNumber}&returnUrl=${window.location.href}`, class: "pn-marketweb-siteheader-login-profileselection-profileoption-link" },
             h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption-content" },
@@ -200,10 +212,8 @@ export class PnMarketwebSiteheaderLoginProfileselection {
               h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption-description" }, organization.customerNumber ? organization.customerNumber : this.userEmail)),
             h("pn-icon", { symbol: "arrow-right", small: "false", color: "blue700" }))));
       }),
-      this.logoutLink ?
-        h("div", { class: "pn-marketweb-siteheader-login-profileselection-logout" },
-          h("a", { href: this.logoutLink.href, rel: "nofollower noopener", id: "pn-marketweb-header-logoutlink", onClick: () => headerState.loginManager.clearUserData(), class: "pn-marketweb-siteheader-login-profileselection-logout-link" }, this.logoutLink.linkText))
-        : null));
+      this.logoutLink ? (h("div", { class: "pn-marketweb-siteheader-login-profileselection-logout" },
+        h("a", { href: this.logoutLink.href, rel: "nofollower noopener", id: "pn-marketweb-header-logoutlink", onClick: () => headerState.loginManager.clearUserData(), class: "pn-marketweb-siteheader-login-profileselection-logout-link" }, this.logoutLink.linkText))) : null));
   }
   static get is() { return "pn-marketweb-siteheader-login-profileselection"; }
   static get originalStyleUrls() { return {
@@ -250,7 +260,7 @@ export class PnMarketwebSiteheaderLoginProfileselection {
       },
       "attribute": "endpoint",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "loggedin": {
       "type": "boolean",
@@ -286,7 +296,7 @@ export class PnMarketwebSiteheaderLoginProfileselection {
       },
       "attribute": "id-namespace",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "heading": {
       "type": "string",
@@ -325,7 +335,7 @@ export class PnMarketwebSiteheaderLoginProfileselection {
         "tags": [],
         "text": ""
       },
-      "defaultValue": "{ \"searchlabel\":\"\", \"searchplaceholder\":\"\", \"searchbuttontext\":\"\", \"menuHomeButton\": \"\", \"menuGoBackButton\": \"\", \"mainMenuButton\": \"\", \"menuStartButton\": \"\", \"profileSelectionFlyoutHeading\": \"\" } as SiteHeaderI18N"
+      "defaultValue": "{\n    searchlabel: '',\n    searchplaceholder: '',\n    searchbuttontext: '',\n    menuHomeButton: '',\n    menuGoBackButton: '',\n    mainMenuButton: '',\n    menuStartButton: '',\n    profileSelectionFlyoutHeading: '',\n  } as SiteHeaderI18N"
     },
     "currentProfile": {
       "type": "unknown",

package/custom-elements/index.d.ts

@@ -344,6 +344,18 @@ export const PnQuoteCard: {
   new (): PnQuoteCard;
 };
 
+interface PnShare extends Components.PnShare, HTMLElement {}
+export const PnShare: {
+  prototype: PnShare;
+  new (): PnShare;
+};
+
+interface PnShareItem extends Components.PnShareItem, HTMLElement {}
+export const PnShareItem: {
+  prototype: PnShareItem;
+  new (): PnShareItem;
+};
+
 interface PnSidenav extends Components.PnSidenav, HTMLElement {}
 export const PnSidenav: {
   prototype: PnSidenav;