@postnord/pn-marketweb-components 2.0.103 → 2.0.105

package/collection/components/cta/pn-parcel-tracker/pn-parcel-tracker.stories.js

@@ -0,0 +1,71 @@
+import readme from './readme.md';
+
+export default {
+  title: 'CTA/Parcel tracker',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+const TemplatePrimary = ({ data, ...args }) => {
+  return `  
+  <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>  
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="blue">                   
+        <h2 slot="mobile-heading">${data[0].heading}</h2>
+        <div slot="content">
+            <pn-parcel-tracker form-action-url="${data[0].actionUrl}" placeholder="${data[0].placeholder}" heading="${data[0].heading}" button-label="${data[0].buttonLabel}" />
+        </div>                
+    </pn-spotlight>
+  </div>
+    <br />
+
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="coral">                   
+        <h2 slot="mobile-heading">${data[1].heading}</h2>
+        <div slot="content">
+            <pn-parcel-tracker form-action-url="${data[1].actionUrl}" placeholder="${data[1].placeholder}"heading="${data[1].heading}" button-label="${data[1].buttonLabel}" />
+        </div>                
+    </pn-spotlight>
+  </div>
+  
+  <br/>
+  
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="green">                   
+        <h2 slot="mobile-heading">${data[2].heading}</h2>
+        <div slot="content">
+            <pn-parcel-tracker form-action-url="${data[2].actionUrl}" placeholder="${data[2].placeholder}" heading="${data[2].heading}" button-label="${data[2].buttonLabel}" />
+        </div>                
+    </pn-spotlight>
+  </div>`;
+};
+
+export const Primary = TemplatePrimary.bind({});
+
+Primary.args = {
+  data: [
+    {
+      heading: 'Spåra din försändelse',
+      actionUrl: 'https://se-integration.postnord.com/vara-verktyg/spara-brev-paket-och-pall',
+      buttonLabel: 'Spåra',
+      locale: 'sv',
+      placeholder: 'Försändelse-ID',
+    },
+    {
+      heading: 'Track your parcel',
+      actionUrl: 'https://com-integration.postnord.com/vara-verktyg/spara-brev-paket-och-pall',
+      buttonLabel: 'Track',
+      locale: 'en',
+      placeholder: 'Enter shipment ID',
+    },
+    {
+      heading: 'Spor din pakke',
+      actionUrl: 'https://no-integration.postnord.com/pakkesporing',
+      buttonLabel: 'Spor',
+      locale: 'no',
+      placeholder: 'Sendningsnummer',
+    },
+  ],
+};

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

@@ -1,7 +1,11 @@
+pn-quick-cta {
+  width: 100%;
+}
 pn-quick-cta .quick-cta__content {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: flex-end;
   gap: 2.4rem;
   width: 100%;
 }

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

@@ -10,12 +10,43 @@ export default {
 
 const TemplatePrimary = ({ ...args }) => {
   return `
-  <pn-breakpoints></pn-breakpoints>      
-  <div id="container" style="margin: 0 auto;">       
-    <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}" >
-     <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
-    </pn-quick-cta>
-  </div>`;
+   <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>  
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="blue">                   
+        <h2 slot="mobile-heading">${args.heading}</h2>
+        <div slot="content">
+         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
+            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
+         </pn-quick-cta>
+        </div>                
+    </pn-spotlight>
+  </div> 
+  
+  <br/>
+
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="coral">                   
+        <h2 slot="mobile-heading">${args.heading}</h2>
+        <div slot="content">
+         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
+            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
+         </pn-quick-cta>
+        </div>                
+    </pn-spotlight>
+  </div> 
+
+  <br />
+
+  <div id="container" style="margin: 0 auto;">
+    <pn-spotlight data-cta-color="green">                   
+        <h2 slot="mobile-heading">${args.heading}</h2>
+        <div slot="content">
+         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
+            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
+         </pn-quick-cta>
+        </div>                
+    </pn-spotlight>
+  </div>  `;
 };
 
 export const Primary = TemplatePrimary.bind({});

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

@@ -21,9 +21,14 @@ pn-spotlight .pn-spotlight__container__wrapper {
   position: relative;
   max-width: 100%;
 }
-@media screen and (min-width: 1640px) {
+@media screen and (min-width: 992px) {
   pn-spotlight .pn-spotlight__container__wrapper {
+    max-width: 90%;
     margin: 0 auto;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-spotlight .pn-spotlight__container__wrapper {
     max-width: 80%;
   }
 }
@@ -32,8 +37,8 @@ pn-spotlight .pn-spotlight__container__wrapper__content {
   margin: 0 auto;
   display: flex;
   flex-direction: row;
-  left: -37.5px;
-  width: calc(100% + 37.5px);
+  left: -57.5px;
+  width: calc(100% + 57.5px);
 }
 @media screen and (min-width: 768px) {
   pn-spotlight .pn-spotlight__container__wrapper__content {
@@ -51,11 +56,12 @@ pn-spotlight .pn-spotlight__container__wrapper__content__ball {
   border-radius: 50%;
   min-height: 75px;
   aspect-ratio: 1/1;
-  margin-right: 2.5rem;
+  margin-right: 1.5rem;
 }
 @media screen and (min-width: 768px) {
   pn-spotlight .pn-spotlight__container__wrapper__content__ball {
     min-height: 85px;
+    margin-right: 2.5rem;
   }
 }
 pn-spotlight [slot=content] {
@@ -64,12 +70,13 @@ pn-spotlight [slot=content] {
   border-bottom-left-radius: 10rem;
   align-items: center;
   justify-content: right;
-  padding: 0 2rem;
+  padding: 0 1.5rem;
   padding-left: 50px;
   width: 100%;
 }
 @media screen and (min-width: 992px) {
   pn-spotlight [slot=content] {
+    padding: 0 2rem;
     border-radius: 10rem;
   }
 }

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

@@ -15,9 +15,7 @@ const TemplatePrimary = ({ ...args }) => {
     <pn-spotlight data-cta-color="blue">                   
         <h2 slot="mobile-heading">${args.heading}</h2>
         <div slot="content">
-         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
-            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
-         </pn-quick-cta>
+         
         </div>                
     </pn-spotlight>
   </div> 
@@ -28,9 +26,7 @@ const TemplatePrimary = ({ ...args }) => {
     <pn-spotlight data-cta-color="coral">                   
         <h2 slot="mobile-heading">${args.heading}</h2>
         <div slot="content">
-         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
-            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
-         </pn-quick-cta>
+        
         </div>                
     </pn-spotlight>
   </div> 
@@ -41,9 +37,7 @@ const TemplatePrimary = ({ ...args }) => {
     <pn-spotlight data-cta-color="green">                   
         <h2 slot="mobile-heading">${args.heading}</h2>
         <div slot="content">
-         <pn-quick-cta heading="${args.heading}" preamble="${args.preamble}">         
-            <pn-button slot="quick-cta-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>         
-         </pn-quick-cta>
+        
         </div>                
     </pn-spotlight>
   </div>  
@@ -53,7 +47,7 @@ const TemplatePrimary = ({ ...args }) => {
 export const Primary = TemplatePrimary.bind({});
 
 Primary.args = {
-  heading: 'A Spotlight component',
+  heading: 'A Spotlight Moble Header',
   preamble: 'With quick-cta component as content',
   ctaUrl: 'http://www.google.se',
   ctaLabel: 'Read more',

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

@@ -101,6 +101,9 @@ pn-site-footer[theme=dotcom] > svg path {
 }
 pn-site-footer[theme=dotcom] .pn-sitefooter-top {
   width: 100%;
+  position: relative;
+  top: -1px;
+  background-color: #0D234B;
 }
 pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols {
   display: flex;

package/collection/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.js

@@ -6,12 +6,14 @@ export class PnProxioPricegroup {
   constructor() {
     /** Specifies which endpoint domain we should load from */
     this.endpoint = null;
-    this.culture = "sv-SE";
+    //@Prop() culture: string = "sv-SE";
+    this.language = "sv";
+    this.market = "se";
     this.tariffid = "";
     this.cache = true;
     this.activeWeightIndex = 0;
     this.data = null;
-    this.i18n = translations["sv-SE"];
+    this.i18n = translations["sv"];
     this.fetchHelper = new FetchHelper("proxiopricegroup");
   }
   componentWillLoad() {
@@ -31,18 +33,19 @@ export class PnProxioPricegroup {
     }
   }
   init() {
-    this.setCulture();
+    this.setLanguage();
     this.fetchData();
   }
   async fetchData() {
-    if (!this.culture || !this.tariffid) {
+    if (!this.market || !this.language || !this.tariffid) {
       return;
     }
     const endpoint = (this.endpoint.lastIndexOf("/") === this.endpoint.length - 1) ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
-    const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&culture=${this.culture}&cached=${this.cache}`;
+    const fetchUrl = `${endpoint}/api/proxio/price-list-group?tariffId=${this.tariffid}&market=${this.market}&language=${this.language}&cached=${this.cache}`;
     const data = await this.fetchHelper.fetchJson(fetchUrl, {
-      'mode': 'cors'
+      'mode': 'cors',
     }, this.cache, this.onFetchData.bind(this));
+    ;
     if (data === null || data === void 0 ? void 0 : data.proxioProduct) {
       this.data = data;
     }
@@ -58,9 +61,9 @@ export class PnProxioPricegroup {
     weightIndex = weightIndex < minIndex ? minIndex : weightIndex;
     this.activeWeightIndex = weightIndex;
   }
-  setCulture() {
-    if (translations[this.culture]) {
-      this.i18n = translations[this.culture];
+  setLanguage() {
+    if (translations[this.language]) {
+      this.i18n = translations[this.language];
     }
   }
   getPriceString(product) {
@@ -130,8 +133,8 @@ export class PnProxioPricegroup {
         h("h2", { slot: "title" }, this.data.proxioProduct.productTitle),
         h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }),
         h("div", { slot: "information" },
-          h("pn-proxio-productcard-information", { label: this.i18n.labelPackage, information: this.data.proxioProduct.productPackageDimensionsList }),
-          h("pn-proxio-productcard-information", { label: this.i18n.labelRoll, information: this.data.proxioProduct.productRollDimensionsList })),
+          h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensions, information: this.data.proxioProduct.productPackageDimensionsList }),
+          h("pn-proxio-productcard-information", { label: this.i18n.labelMaxDimensionsRoll, information: this.data.proxioProduct.productRollDimensionsList })),
         h("div", { slot: "bottomtags" },
           this.data.proxioProduct.usp1 ?
             (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp1)) : (null),
@@ -170,7 +173,7 @@ export class PnProxioPricegroup {
       "reflect": false,
       "defaultValue": "null"
     },
-    "culture": {
+    "language": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -184,9 +187,27 @@ export class PnProxioPricegroup {
         "tags": [],
         "text": ""
       },
-      "attribute": "culture",
+      "attribute": "language",
       "reflect": false,
-      "defaultValue": "\"sv-SE\""
+      "defaultValue": "\"sv\""
+    },
+    "market": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "market",
+      "reflect": false,
+      "defaultValue": "\"se\""
     },
     "tariffid": {
       "type": "string",
@@ -237,8 +258,8 @@ export class PnProxioPricegroup {
       "capture": false,
       "passive": false
     }, {
-      "name": "culture",
-      "method": "setCulture",
+      "name": "language",
+      "method": "setLanguage",
       "target": undefined,
       "capture": false,
       "passive": false

package/collection/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.stories.js

@@ -11,7 +11,8 @@ const Template = ({ ...args }) => {
   return `
     <div style="max-width: 100rem; margin:1.6rem auto 0;">
       <pn-proxio-pricegroup
-        culture="${args.culture}"
+        market="${args.market}"
+        language="${args.language}"
         tariffid="${args.tariffId}"
         cache="${args.cache}" >
       </pn-proxio-pricegroup>
@@ -21,7 +22,8 @@ const Template = ({ ...args }) => {
 
 export const Primary = Template.bind({});
 Primary.args = {
-  culture: "sv-SE",
+  market: "se",
+  language: "sv",
   tariffId: "7c702ee4-d20c-4b01-aad8-6e5309d59bd0",
   cache: true
 };

package/collection/components/widgets/pn-proxio-pricegroup/translations.js

@@ -1,17 +1,17 @@
 export const translations = {
-  'sv-SE': {
+  'sv': {
     "from": "Från ",
-    "labelRoll": "Rulle",
-    "labelPackage": "Paket"
+    "labelMaxDimensionsRoll": "Rulle",
+    "labelMaxDimensions": "Maxmått"
   },
-  'en-GB': {
-    "from": "From ",
-    "labelRoll": "Roll",
-    "labelPackage": "Package"
+  'da': {
+    "from": "Från ",
+    "labelMaxDimensionsRoll": "Rulle",
+    "labelMaxDimensions": "Maks måle"
   },
-  'en-US': {
+  'en': {
     "from": "From ",
-    "labelRoll": "Roll",
-    "labelPackage": "Package"
+    "labelMaxDimensionsRoll": "Roll",
+    "labelMaxDimensions": "Maximum dimensions"
   }
 };

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.js

@@ -5,9 +5,9 @@ export class PnProxioProductcardInformation {
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "cardinfocontent" }, this.information && this.label ? (h("div", { class: "cardinfocontent-item" },
-        h("p", { class: "cardinfocontent-title" },
-          h("strong", null, this.label)),
+      h("div", { class: "cardinfocontent" }, this.information && this.information.length > 0 && this.label ? (h("div", { class: "cardinfocontent-item" },
+        this.label ? (h("p", { class: "cardinfocontent-title" },
+          h("strong", null, this.label))) : (null),
         this.information.map((item) => (item ?
           (h("p", null,
             h("strong", { class: "cardinfocontent-label" },

package/custom-elements/index.d.ts

@@ -158,6 +158,12 @@ export const PnMarketwebSiteheaderSearch: {
   new (): PnMarketwebSiteheaderSearch;
 };
 
+interface PnParcelTracker extends Components.PnParcelTracker, HTMLElement {}
+export const PnParcelTracker: {
+  prototype: PnParcelTracker;
+  new (): PnParcelTracker;
+};
+
 interface PnPexPricefinder extends Components.PnPexPricefinder, HTMLElement {}
 export const PnPexPricefinder: {
   prototype: PnPexPricefinder;