@postnord/pn-marketweb-components 2.0.96 → 2.0.98

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/animationHelper.js

@@ -0,0 +1,14 @@
+export const animateValue = (obj, start = 0, end = 100, duration = 1000) => {
+  let startTimestamp = null;
+  const step = (timestamp) => {
+    if (!startTimestamp)
+      startTimestamp = timestamp;
+    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+    //obj.innerHTML = Math.floor(progress * (end - start) + start); //integer
+    obj.innerHTML = (Math.round((progress * (end - start) + start) * 10) / 10).toString(); // decimal
+    if (progress < 1) {
+      window.requestAnimationFrame(step);
+    }
+  };
+  window.requestAnimationFrame(step);
+};

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.css

@@ -0,0 +1,47 @@
+pn-stats-info-data {
+  width: 50%;
+  /* &:last-of-type:nth-child(odd) {
+    width: 100%;
+  } */
+}
+pn-stats-info-data .pn-stats-info-data__container {
+  width: 100%;
+  background-color: transparent;
+  color: #F06365;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+}
+pn-stats-info-data .pn-stats-info-data__container__content {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+pn-stats-info-data .pn-stats-info-data__container__content__data {
+  font-weight: 700;
+  font-size: 3rem;
+  line-height: 110%;
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info-data .pn-stats-info-data__container__content__data {
+    font-size: 6.8rem;
+  }
+}
+pn-stats-info-data .pn-stats-info-data__container__content__unit {
+  font-weight: 700;
+  font-size: 3rem;
+  line-height: 110%;
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info-data .pn-stats-info-data__container__content__unit {
+    font-size: 6.8rem;
+  }
+}
+pn-stats-info-data .pn-stats-info-data__container__content__preamble {
+  text-align: center;
+  font-weight: 400;
+  font-size: 1.4rem;
+  line-height: 110%;
+  color: #FFFFFF;
+}

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.js

@@ -0,0 +1,143 @@
+import { Component, h, Host, Prop, State, Watch, } from '@stencil/core';
+import { animateValue } from './animationHelper';
+import { inViewport } from './viewIntersectionHelper';
+export class PnStatsInfoData {
+  constructor() {
+    this.data = 0;
+    this.unit = null;
+    this.preamble = null;
+    this.compId = null;
+    this.duration = 1000; //ms;
+    this.hasBeenShown = false;
+    this.inViewPortCallback = (entry) => {
+      if (entry.isIntersecting) {
+        this.hasBeenShown = true;
+      }
+    };
+  }
+  watchStateHandlder(newValue, oldValue) {
+    const obj = document.getElementById(`pn-stats-info-data-${this.compId}`);
+    if (obj.classList.contains('is-inViewport') && newValue !== oldValue) {
+      animateValue(obj, 0, this.data, this.duration);
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-stats-info-data__container" },
+        h("div", { class: "pn-stats-info-data__container__content" },
+          h("div", { class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}` }),
+          h("div", { class: "pn-stats-info-data__container__content__unit" }, this.unit)),
+        h("div", { class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
+  }
+  componentDidRender() {
+    const observer = new IntersectionObserver(entries => inViewport(entries, 'is-inViewport', this.inViewPortCallback));
+    const obj = document.getElementById(`pn-stats-info-data-${this.compId}`);
+    observer.observe(obj);
+  }
+  static get is() { return "pn-stats-info-data"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-stats-info-data.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-stats-info-data.css"]
+  }; }
+  static get properties() { return {
+    "data": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "unit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "unit",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "preamble": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "preamble",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "compId": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "comp-id",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "duration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "duration",
+      "reflect": false,
+      "defaultValue": "1000"
+    }
+  }; }
+  static get states() { return {
+    "hasBeenShown": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "hasBeenShown",
+      "methodName": "watchStateHandlder"
+    }]; }
+}

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/viewIntersectionHelper.js

@@ -0,0 +1,6 @@
+export const inViewport = (entries, toggleClass, isEntryIntersectingCallBack) => {
+  entries.forEach(entry => {
+    entry.target.classList.toggle(toggleClass, entry.isIntersecting);
+    isEntryIntersectingCallBack(entry);
+  });
+};

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.css

@@ -0,0 +1,106 @@
+.bleed-container:has(pn-stats-info) {
+  border-bottom-left-radius: 2.4rem;
+  border-bottom-right-radius: 2.4rem;
+  padding: 0;
+  overflow: hidden;
+}
+.bleed-container:has(pn-stats-info) .container > .mb-5 {
+  margin-bottom: 0 !important;
+}
+.bleed-container:has(pn-stats-info) .statsblock {
+  margin-bottom: 0 !important;
+}
+
+pn-stats-info {
+  width: 100%;
+}
+pn-stats-info .pn-stats-info__container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding-top: 2rem;
+}
+@media screen and (min-width: 768px) {
+  pn-stats-info .pn-stats-info__container {
+    padding-top: 6rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container {
+    padding-top: 8rem;
+  }
+}
+pn-stats-info .pn-stats-info__container__map {
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  pn-stats-info .pn-stats-info__container__map {
+    display: block;
+    max-width: 46rem;
+    width: 100%;
+    background-color: #0D234B;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: 55%;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container__map {
+    background-size: contain;
+  }
+}
+pn-stats-info .pn-stats-info__container__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 1rem;
+  width: 100%;
+  background-color: #0D234B;
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: 50%;
+  background-blend-mode: overlay;
+  padding-bottom: 2rem;
+}
+@media screen and (min-width: 768px) {
+  pn-stats-info .pn-stats-info__container__content {
+    max-width: 540px;
+    background-position: -999px -999px;
+    background-size: 0;
+    padding-bottom: 4rem;
+    padding-right: 4rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container__content {
+    max-width: 100%;
+    padding-bottom: 6rem;
+    padding-right: 6rem;
+  }
+}
+pn-stats-info .pn-stats-info__container__content__heading {
+  color: #F06365;
+  margin-bottom: 2.4rem;
+  align-self: center;
+  text-align: center;
+  font-size: 3rem;
+  line-height: 110%;
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container__content__heading {
+    font-weight: 700;
+    font-size: 4.8rem;
+  }
+}
+pn-stats-info .pn-stats-info__container__content__data {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  min-height: 20rem;
+}
+@media screen and (min-width: 1640px) {
+  pn-stats-info .pn-stats-info__container__content__data {
+    width: 65rem;
+  }
+}

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.js

@@ -0,0 +1,95 @@
+import { Component, h, Host, Prop, State, Watch, } from '@stencil/core';
+const mockStringArray = '[{ "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, { "preamble": "weighted parcel delivery quality", "data": 94.5, "unit": "%", "duration": 2500 },{ "preamble": "billion letters and other mail items", "data": 1.5, "unit": "", "duration": 3000 },{ "preamble": "carbon dioxide emissions since 2009", "data": -44, "unit": "%", "duration": 2000 }]';
+export class PnStatsInfo {
+  constructor() {
+    this.heading = 'Heading';
+    this.dataArray = mockStringArray;
+    this.backgroundUrl = null;
+    this.myParsedArray = JSON.parse(this.dataArray);
+  }
+  parseMyArrayProp(newValue) {
+    if (newValue)
+      this.myParsedArray = JSON.parse(newValue);
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-stats-info__container" },
+        h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }),
+        h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } },
+          h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading),
+          h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
+            this.myParsedArray.map((stats, index) => {
+              return h("pn-stats-info-data", { "comp-id": index, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration });
+            }))))));
+  }
+  static get is() { return "pn-stats-info"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-stats-info.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-stats-info.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "'Heading'"
+    },
+    "dataArray": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-array",
+      "reflect": false,
+      "defaultValue": "mockStringArray"
+    },
+    "backgroundUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "background-url",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get states() { return {
+    "myParsedArray": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "dataArray",
+      "methodName": "parseMyArrayProp"
+    }]; }
+}

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.stories.js

@@ -0,0 +1,29 @@
+import readme from './readme.md';
+
+export default {
+  title: 'Data Visualization/Stats Info',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+const PrimaryTemplate = ({ ...args }) => {
+  return `
+  <div style="height:1200px">
+  <h1 style="text-align:center;">Scroll Down...</h1>
+  </div>
+  <div style="background-color:#0D234B;">
+    <div style="width:100%; max-width:1140px; margin:0 auto">    
+        <pn-stats-info heading="${args.heading}" background-url="${args.backgroundUrl}">               
+        </pn-stats-info>
+    </div>
+    </div>
+    `;
+};
+
+export const Primary = PrimaryTemplate.bind({});
+Primary.args = {
+  heading: 'Postnord in figures 2022',
+  backgroundUrl: 'https://com-integration.postnord.com/siteassets/map.png?width=1410&height=793&mode=crop&quality=80',
+};

package/collection/components/data-visualization/pn-stats-info/types.js

@@ -0,0 +1 @@
+export {};

package/collection/components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.js

@@ -98,10 +98,8 @@ export class PnMarketwebSiteheader {
     }
     // Set site definition
     this.siteDefinition = data.sitedefinition;
-    console.log('data.sitedefinition', data.sitedefinition);
     // Set footer content
     this.footerContent = data.footer;
-    console.log('data.footer', data.footer);
     if (this.siteDomainInUrls) {
       this.adjustLinks();
     }

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

@@ -212,8 +212,15 @@ pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-con
   margin: 1.6rem;
 }
 
+header[data-header-theme=dotcom] > pn-marketweb-siteheader pn-button a {
+  text-decoration: none;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader pn-button a:hover {
+  text-decoration: none;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header {
   background-color: #0D234B;
+  box-shadow: none;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-row:not(:last-child) {
   border-bottom: 0.1rem solid #0D234B;
@@ -239,15 +246,15 @@ header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-logocontainer svg.siteheader-logo > path {
   fill: #FFFFFF;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright * {
-  color: #FFFFFF;
-}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright .siteheader-logindialog svg > path {
   fill: #FFFFFF;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright pn-language-selector pn-icon svg > path {
   fill: #FFFFFF;
 }
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright button {
+  color: #FFFFFF;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright button:hover {
   background-color: #005D92;
 }
@@ -267,58 +274,88 @@ header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-
   }
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu .mainnav-toggle button {
-  background-color: transparent;
+  background-color: #005D92;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu .first-level_icon svg > path {
   fill: #FFFFFF;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input {
-  background-color: #0D234B;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  color: #0D234B;
   border: 0.1rem solid #FFFFFF;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input:hover {
   border-color: #FFFFFF;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input::placeholder {
-  color: #FFFFFF;
+  color: #0D234B;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav {
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav {
   background-color: #0D234B;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav a {
-  color: #FFFFFF;
+@media screen and (min-width: 48em) {
+  header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav {
+    top: 6.4em;
+  }
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link a,
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link button {
-  background-color: #0D234B;
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav a {
   color: #FFFFFF;
-  border-bottom: 0.1rem solid rgba(0, 93, 146, 0.5);
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) {
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search {
+  padding-bottom: 0.5rem;
   background-color: #0D234B;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list {
-  color: #FFFFFF;
-}
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list a:hover {
-  background-color: #00A0D6;
-}
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search {
-  background-color: #0D234B;
-}
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container {
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container {
   border-top: 1px solid #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
-  border-right: 1px solid white;
+  border-right: 1px solid #FFFFFF;
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container button.clear {
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container button.clear {
   border: 2px solid #FFFFFF;
   border-radius: 50%;
   padding: 0.5rem;
 }
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level .mainnav-level-header .secondlevel-backbtn pn-icon svg > path {
+  fill: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link button,
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link a {
+  background-color: #0D234B;
+  border-bottom: 0.1rem solid rgba(0, 93, 146, 0.5);
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link button:hover,
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link a:hover {
+  text-decoration: none;
+}
+@media screen and (min-width: 1024px) {
+  header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link button,
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link a {
+    border-bottom: none;
+  }
+}
+@media screen and (max-width: 1023px) {
+  header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link:first-child {
+    border-top: 0.1rem solid rgba(0, 93, 146, 0.5);
+  }
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link a, header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link button {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link a:focus, header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link button:focus {
+  outline: none;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level:not([data-level="1"]) {
+  background-color: #0D234B;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list pn-mainnav-link > a:hover {
+  background-color: #00A0D6;
+  text-decoration: none;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header [data-level="1"] pn-mainnav-link pn-icon.first-level_arrow svg > path {
   fill: #FFFFFF;
 }

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

@@ -453,8 +453,8 @@ const DotComSiteHeaderTemplate = ({ ...args }) => {
     user-fullname="${args.name}"
     user-loggedin="${args.loggedin}"
     >
-      <pn-button slot="toprightend" small="true">Get started</pn-button>
-      <pn-button slot="menu-footer-cta" small="true">Get started</pn-button>
+      <pn-button slot="toprightend" href="http:www.google.se" small="true">Get started</pn-button>
+      <pn-button slot="menu-footer-cta" href="http:www.google.se" small="true">Get started</pn-button>
     </pn-marketweb-siteheader>
   </header>`;
 };

package/collection/components/navigation/pn-site-footer/pn-site-footer-col.css

@@ -91,7 +91,7 @@ pn-site-footer-col[theme=dotcom] div {
   margin-bottom: 1.4rem;
 }
 pn-site-footer-col[theme=dotcom] div p:nth-child(odd) {
-  font-weight: 600;
+  font-weight: 500;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   pn-site-footer-col[theme=dotcom] div {