@postnord/pn-marketweb-components 2.1.0 → 2.1.2

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

@@ -1,15 +1,15 @@
-import { Component, Prop, h, Element, Host } from "@stencil/core";
-import { state as headerState } from "./pn-marketweb-siteheader-store";
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+import { state as headerState } from './pn-marketweb-siteheader-store';
 export class PnMarketwebSiteheaderLoginLinklist {
   constructor() {
     this.heading = null;
     this.links = [];
-    this.idNamespace = "";
-  }
-  componentWillLoad() {
+    this.idNamespace = '';
+    this.showUnifiedLogin = false;
   }
+  componentWillLoad() { }
   uniqueId(text) {
-    return "loginlink-" + text.replace(/[^A-Za-z0-9.\\\/]/igm, "") + "-" + this.idNamespace;
+    return 'loginlink-' + text.replace(/[^A-Za-z0-9.\\\/]/gim, '') + '-' + this.idNamespace;
   }
   linkAppearanceAttributes(link) {
     let attributes = {};
@@ -18,13 +18,13 @@ export class PnMarketwebSiteheaderLoginLinklist {
         case 'primary':
           attributes = {
             appearance: '',
-            variant: ''
+            variant: '',
           };
           break;
         case 'secondary':
           attributes = {
             appearance: 'light',
-            variant: 'outlined'
+            variant: 'outlined',
           };
           break;
         case 'regularlink':
@@ -32,7 +32,7 @@ export class PnMarketwebSiteheaderLoginLinklist {
           attributes = {
             appearance: 'light',
             variant: 'borderless',
-            icon: 'arrow-right'
+            icon: 'arrow-right',
           };
           break;
       }
@@ -40,22 +40,39 @@ export class PnMarketwebSiteheaderLoginLinklist {
     }
     if (!link.linkType) {
       attributes = {
-        appearance: link.primaryLinkApperance ? "dark" : "light"
+        appearance: link.primaryLinkApperance ? 'dark' : 'light',
       };
     }
     return attributes;
   }
+  renderListAsButtons(link) {
+    return (h("li", null,
+      h("pn-button", Object.assign({ href: link.href, id: this.uniqueId(link.linkText) }, (link.openInNewWindow && { target: '_blank' }), this.linkAppearanceAttributes(link), { onClick: () => {
+          if (link.isLogoutLink) {
+            headerState.loginManager.clearUserData();
+          }
+        } }), link.linkText)));
+  }
+  renderListAsLinks(link) {
+    return (h("li", null,
+      h("a", Object.assign({ href: link.href, id: this.uniqueId(link.linkText) }, (link.openInNewWindow && { target: '_blank' }), { onClick: () => {
+          if (link.isLogoutLink) {
+            headerState.loginManager.clearUserData();
+          }
+        } }),
+        link.linkText,
+        link.isLogoutLink ? h("pn-icon", { symbol: "transfer" }) : h("pn-icon", { symbol: "arrow-right" }))));
+  }
   render() {
     if (!this.links || this.links.length === 0) {
       return;
     }
     return (h(Host, null,
       this.heading ? h("strong", null, this.heading) : null,
-      h("ul", null, this.links.map((link) => {
-        return (h("li", null,
-          h("pn-button", Object.assign({ href: link.href, id: this.uniqueId(link.linkText) }, (link.openInNewWindow && { target: '_blank' }), this.linkAppearanceAttributes(link), { onClick: () => { if (link.isLogoutLink) {
-              headerState.loginManager.clearUserData();
-            } } }), link.linkText)));
+      h("ul", null, this.links.map(link => {
+        {
+          return this.showUnifiedLogin ? this.renderListAsLinks(link) : this.renderListAsButtons(link);
+        }
       }))));
   }
   static get is() { return "pn-marketweb-siteheader-login-linklist"; }
@@ -121,7 +138,25 @@ export class PnMarketwebSiteheaderLoginLinklist {
       },
       "attribute": "id-namespace",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
+    },
+    "showUnifiedLogin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-unified-login",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "hostElement"; }

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

@@ -1,12 +1,13 @@
-import { Component, Prop, h, Element, Watch, Host } from "@stencil/core";
-import { state as headerState } from "./pn-marketweb-siteheader-store";
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { state as headerState } from './pn-marketweb-siteheader-store';
 export class PnMarketwebSiteheaderLoginLinks {
   constructor() {
     // Login dialog
     this.loginDialog = null;
-    this.idNamespace = "";
+    this.idNamespace = '';
     this.loggedin = false;
-    this.username = "";
+    this.username = '';
+    this.showUnifiedLogin = false;
   }
   componentWillLoad() {
     this.init();
@@ -21,12 +22,12 @@ export class PnMarketwebSiteheaderLoginLinks {
     }
     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);
       }
-      link.href = link.href.replace("window.location.href", window.location.href);
+      link.href = link.href.replace('window.location.href', window.location.href);
       if (i === 0 && !link.href) {
         link.href = headerState.loginManager.getLoginUrl();
         link.linkType = 'primary';
@@ -49,7 +50,7 @@ export class PnMarketwebSiteheaderLoginLinks {
         isLogoutLink: false,
         pageLink: null,
         linkType: 'primary',
-        primaryLinkApperance: true
+        primaryLinkApperance: true,
       },
       {
         href: headerState.loginManager.getLoginUrl(this.loginDialog.registerUrl),
@@ -57,8 +58,8 @@ export class PnMarketwebSiteheaderLoginLinks {
         openInNewWindow: false,
         isLogoutLink: false,
         pageLink: null,
-        primaryLinkApperance: false
-      }
+        primaryLinkApperance: false,
+      },
     ];
   }
   render() {
@@ -75,18 +76,8 @@ export class PnMarketwebSiteheaderLoginLinks {
       hostElementAttribute.loggedin = this.loggedin;
     }
     return (h(Host, Object.assign({}, hostElementAttribute),
-      (!this.loginDialog.overrideLoginMenu) ?
-        h("div", { "data-loggedin": this.loggedin + '' }, (this.loggedin) ?
-          h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loggedInLinks, idNamespace: this.idNamespace })
-          :
-            h("div", null, ((_a = this.loginDialog.loginMenuLinks) === null || _a === void 0 ? void 0 : _a.length) > 0 ?
-              h("pn-marketweb-siteheader-login-linklist", { heading: this.loginDialog.loginTitle, links: this.loginDialog.loginMenuLinks, idNamespace: this.idNamespace })
-              :
-                h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.legacyLoginLinks, idNamespace: this.idNamespace })))
-        : null,
-      (this.loginDialog.overrideLoginMenu) ?
-        h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loginMenuLinks, idNamespace: this.idNamespace })
-        : null));
+      !this.loginDialog.overrideLoginMenu ? (h("div", { "data-loggedin": this.loggedin + '' }, this.loggedin ? (h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loggedInLinks, idNamespace: this.idNamespace })) : (h("div", null, ((_a = this.loginDialog.loginMenuLinks) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (h("pn-marketweb-siteheader-login-linklist", { heading: this.loginDialog.loginTitle, links: this.loginDialog.loginMenuLinks, idNamespace: this.idNamespace, showUnifiedLogin: this.showUnifiedLogin })) : (h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.legacyLoginLinks, idNamespace: this.idNamespace })))))) : null,
+      this.loginDialog.overrideLoginMenu ? (h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loginMenuLinks, idNamespace: this.idNamespace })) : null));
   }
   static get is() { return "pn-marketweb-siteheader-login-links"; }
   static get originalStyleUrls() { return {
@@ -133,7 +124,7 @@ export class PnMarketwebSiteheaderLoginLinks {
       },
       "attribute": "id-namespace",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "loggedin": {
       "type": "boolean",
@@ -169,7 +160,25 @@ export class PnMarketwebSiteheaderLoginLinks {
       },
       "attribute": "username",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
+    },
+    "showUnifiedLogin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-unified-login",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "hostElement"; }

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

@@ -0,0 +1,55 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class PnMarketwebSiteheaderLoginMypageButton {
+  constructor() {
+    this.label = 'Mina sidor!';
+  }
+  render() {
+    return (h(Host, null,
+      h("pn-button", { href: this.myPageUrl }, this.label)));
+  }
+  static get is() { return "pn-marketweb-siteheader-login-mypage-button"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-mypage-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-mypage-button.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "'Mina sidor!'"
+    },
+    "myPageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "my-page-url",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -1,26 +1,41 @@
-import { Component, Prop, h, State, Element, Watch, Event, Host } from "@stencil/core";
-import { MarketWebLoginManager } from "../../../globals/MarketWebLoginManager";
-import { state as headerState } from "./pn-marketweb-siteheader-store";
+import { Component, Element, Event, h, Host, Prop, State, Watch } from '@stencil/core';
+import { MarketWebLoginManager } from '../../../globals/MarketWebLoginManager';
+import { state as headerState } from './pn-marketweb-siteheader-store';
 export class PnMarketwebSiteheaderLogin {
   constructor() {
     var _a;
     /** Specifies which endpoint domain we should load from */
-    this.endpoint = "";
+    this.endpoint = '';
     /** Access token passed from backend */
-    this.token = "";
-    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
+    this.token = '';
+    this.i18n = {
+      searchlabel: '',
+      searchplaceholder: '',
+      searchbuttontext: '',
+      menuHomeButton: '',
+      menuGoBackButton: '',
+      mainMenuButton: '',
+      menuStartButton: '',
+      profileSelectionFlyoutHeading: '',
+      unifiedLoginButton: '',
+      unifiedMyPagesButton: '',
+    };
     this.siteUrl = '';
     this.emitEvents = true;
     // Login dialog
     this.loginDialog = null;
     /** User Fullname */
-    this.fullname = "";
+    this.fullname = '';
     this.loggedin = false;
     /** If this is selected we will show the new profile selection dropdown instead of the login version */
     this.showProfileSelection = false;
+    /** if this is selected we will show the unifiedlogin button along with new look for dropdown */
+    this.showUnifiedLogin = false;
     /** Continiously check if a user is logged in **/
     this.checkUserLoggedInStateInterval = 0;
-    this.toggleButtonText = (((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinkText) ? this.loginDialog.loginMenuLinkText : "");
+    this.loginButtonText = 'Placeholder';
+    this.loginInformationRichText = '<a href="#">Read more about the benefits of becoming a customer in the business portal</a>';
+    this.toggleButtonText = ((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinkText) ? this.loginDialog.loginMenuLinkText : '';
     this.username = this.fullname;
   }
   componentWillLoad() {
@@ -29,14 +44,15 @@ export class PnMarketwebSiteheaderLogin {
       endpoint: this.endpoint,
       eventTarget: this.hostElement,
       checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval,
-      userInfo
+      userInfo,
     });
     headerState.loginManager.setSiteUrl(this.siteUrl);
-    this.hostElement["loginmanager"] = headerState.loginManager;
+    this.hostElement['loginmanager'] = headerState.loginManager;
     if (this.token) {
       headerState.loginManager.registerToken(this.token, 'backend');
     }
-    else if (this.emitEvents) { // The primary login instance
+    else if (this.emitEvents) {
+      // The primary login instance
       headerState.loginManager.invalidateTokenOfType('backend');
     }
     this.hostElement.addEventListener(headerState.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
@@ -56,7 +72,7 @@ export class PnMarketwebSiteheaderLogin {
     }
     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);
@@ -82,7 +98,7 @@ export class PnMarketwebSiteheaderLogin {
         isLogoutLink: false,
         pageLink: null,
         linkType: 'primary',
-        primaryLinkApperance: true
+        primaryLinkApperance: true,
       },
       {
         href: headerState.loginManager.getLoginUrl(this.loginDialog.registerUrl),
@@ -90,18 +106,18 @@ export class PnMarketwebSiteheaderLogin {
         openInNewWindow: false,
         isLogoutLink: false,
         pageLink: null,
-        primaryLinkApperance: false
-      }
+        primaryLinkApperance: false,
+      },
     ];
   }
   setUserName() {
     const userInfo = headerState.loginManager.getUserInfo();
-    let name = "";
+    let name = '';
     if (!this.loggedin || !userInfo) {
       this.username = name;
     }
     if (userInfo && userInfo.given_name) {
-      name = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : "");
+      name = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : '');
     }
     if (!name && userInfo && userInfo.email) {
       name = userInfo.email;
@@ -143,10 +159,10 @@ export class PnMarketwebSiteheaderLogin {
       hostElementAttribute.loggedin = this.loggedin + '';
     }
     return (h(Host, Object.assign({}, hostElementAttribute),
-      h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, this.loggedin && this.showProfileSelection ?
-        h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })
-        :
-          h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username }))));
+      h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" },
+        this.showUnifiedLogin && (h("pn-marketweb-siteheader-unified-login", { loggedIn: this.loggedin, myPageLabel: this.i18n.unifiedMyPagesButton, myPageUrl: "https://account.postnord.com/secure/profile", logInLabel: this.i18n.unifiedLoginButton })),
+        this.loggedin && this.showProfileSelection ? (h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })) : (h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username, showUnifiedLogin: this.showUnifiedLogin })),
+        this.showUnifiedLogin && h("span", { innerHTML: `${this.loginInformationRichText}` }))));
   }
   static get is() { return "pn-marketweb-siteheader-login"; }
   static get originalStyleUrls() { return {
@@ -172,7 +188,7 @@ export class PnMarketwebSiteheaderLogin {
       },
       "attribute": "endpoint",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "token": {
       "type": "string",
@@ -190,7 +206,7 @@ export class PnMarketwebSiteheaderLogin {
       },
       "attribute": "token",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "i18n": {
       "type": "unknown",
@@ -211,7 +227,7 @@ export class PnMarketwebSiteheaderLogin {
         "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    unifiedLoginButton: '',\n    unifiedMyPagesButton: '',\n  } as SiteHeaderI18N"
     },
     "siteUrl": {
       "type": "string",
@@ -286,7 +302,7 @@ export class PnMarketwebSiteheaderLogin {
       },
       "attribute": "fullname",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "loggedin": {
       "type": "boolean",
@@ -324,6 +340,24 @@ export class PnMarketwebSiteheaderLogin {
       "reflect": false,
       "defaultValue": "false"
     },
+    "showUnifiedLogin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "if this is selected we will show the unifiedlogin button along with new look for dropdown"
+      },
+      "attribute": "show-unified-login",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "checkUserLoggedInStateInterval": {
       "type": "number",
       "mutable": false,
@@ -341,6 +375,59 @@ export class PnMarketwebSiteheaderLogin {
       "attribute": "check-user-logged-in-state-interval",
       "reflect": false,
       "defaultValue": "0"
+    },
+    "environment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "environment",
+      "reflect": false
+    },
+    "loginButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "login-button-text",
+      "reflect": false,
+      "defaultValue": "'Placeholder'"
+    },
+    "loginInformationRichText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "login-information-rich-text",
+      "reflect": false,
+      "defaultValue": "'<a href=\"#\">Read more about the benefits of becoming a customer in the business portal</a>'"
     }
   }; }
   static get states() { return {

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

@@ -0,0 +1,88 @@
+import { Component, Element, h, Host, Prop } from '@stencil/core';
+export class PnMarketwebSiteheaderUnifiedLogin {
+  constructor() {
+    this.loggedIn = false;
+  }
+  render() {
+    return (h(Host, null, this.loggedIn ? (h("pn-marketweb-siteheader-login-mypage-button", { label: this.myPageLabel, myPageUrl: this.myPageUrl })) : (h("pn-marketweb-siteheader-login-button", { label: this.logInLabel }))));
+  }
+  static get is() { return "pn-marketweb-siteheader-unified-login"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-marketweb-siteheader-unified-login.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-marketweb-siteheader-unified-login.css"]
+  }; }
+  static get properties() { return {
+    "loggedIn": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "logged-in",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "myPageLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "my-page-label",
+      "reflect": false
+    },
+    "myPageUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "my-page-url",
+      "reflect": false
+    },
+    "logInLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "log-in-label",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.css

@@ -87,6 +87,36 @@ pn-marketweb-siteheader .siteheader-row > pn-marketweb-siteheader-search {
 pn-marketweb-siteheader pn-spinner {
   display: none;
 }
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content {
+  max-width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  padding: 4rem;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content pn-button {
+  width: 100%;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content pn-marketweb-siteheader-login-links::before,
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content span::before {
+  display: block;
+  content: "";
+  height: 2px;
+  background: #F9F8F8;
+  width: 100%;
+  margin-bottom: 2.4rem;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content span {
+  font-size: 1.4rem;
+  color: #005D92;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content span a {
+  text-decoration: none;
+  color: #005D92;
+}
+pn-marketweb-siteheader pn-nav-dropdown .nav-dropdown-content-container .nav-dropdown-content span a:hover {
+  text-decoration: underline;
+}
 pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-container {
   display: none;
 }
@@ -360,6 +390,9 @@ header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav
   background-color: #00A0D6;
   text-decoration: none;
 }
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-marketweb-siteheader-login-linklist ul li a {
+  color: #005D92;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header [data-level="1"] pn-mainnav-link pn-icon.first-level_arrow svg > path {
   fill: #FFFFFF;
 }