@postnord/pn-marketweb-components 2.0.0 → 2.0.1

package/collection/components/widgets/pn-find-price/pn-find-price-translations.js

@@ -2,7 +2,6 @@ export const translations = {
   'sv': {
     'componentheading': 'Våra priser och villkor för inrikesförsändelser för dig som direktbetalande kund?',
     'deliveryscopeheading': 'Endast leveranser inom Sverige',
-    'sizeheading': 'Uppskatta storlek och vikt på din försändelse',
     'resultlistheading': 'Några bra alternativ för dig',
     'weightlabel': 'Vikt',
     'maxweightlabel': 'Maxvikt',
@@ -11,12 +10,11 @@ export const translations = {
     'stampshopcta': 'Beställ fysiska frimärken',
     'message': '*Vid köp hos valfritt ombud',
     'servicePointHeader': 'Eller hitta närmaste serviceställe',
-    'servicePointLink': 'Sök brevlåda eller serviceställe'
+    'servicePointLink': 'Sök serviceställe eller brevlåda'
   },
   'en': {
     'componentheading': 'Our prices and terms and conditions for domestic shipments for you as a direct paying customer',
     'deliveryscopeheading': 'Deliveries within Sweden only',
-    'sizeheading': 'Estimate the size and weight of your shipment',
     'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Weight',
     'maxweightlabel': 'Max weight',
@@ -30,7 +28,6 @@ export const translations = {
   'da': {
     'componentheading': 'Vad vill du skicka?',
     'deliveryscopeheading': 'Kun leveringer indenfor Sverige',
-    'sizeheading': 'How much does it weigh?',
     'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Vægt',
     'maxweightlabel': 'Max vægt',
@@ -41,7 +38,6 @@ export const translations = {
   'no': {
     'componentheading': 'Vad vill du skicka?',
     'deliveryscopeheading': 'Kun leveranser innen Sverige',
-    'sizeheading': 'How much does it weigh?',
     'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Vekt',
     'maxweightlabel': 'Maks vekt',
@@ -52,7 +48,6 @@ export const translations = {
   'fi': {
     'componentheading': 'Vad vill du skicka?',
     'deliveryscopeheading': 'Toimitukset vain Ruotsin sisällä',
-    'sizeheading': 'How much does it weigh?',
     'resultlistheading': 'Some suitable options for you',
     'weightlabel': 'Paino',
     'maxweightlabel': 'Max paino',

package/collection/components/widgets/pn-find-price/pn-find-price.css

@@ -18,19 +18,19 @@ pn-find-price .findprice-form {
   margin: 0 auto 3em auto;
 }
 pn-find-price h2,
-pn-find-price .heading, pn-find-price .resultHeading {
+pn-find-price .heading {
   text-align: center;
   font-size: 1.5em;
   line-height: 1.1;
   font-weight: bold;
   margin-bottom: 1rem;
 }
-pn-find-price .sizeheading {
+pn-find-price .resultHeading {
   text-align: center;
-  font-size: 1.25em;
+  font-size: 1.5em;
   line-height: 1.1;
   font-weight: bold;
-  margin-bottom: 1rem;
+  margin-bottom: 2em;
 }
 pn-find-price .sizecategory {
   margin-top: 5em;
@@ -40,6 +40,11 @@ pn-find-price .sizecategory {
   align-items: center;
   justify-content: center;
 }
+pn-find-price .sizecategory #clouds {
+  position: absolute;
+  top: 4.87em;
+  left: 26.3em;
+}
 pn-find-price .weightoption {
   font-size: 0.9em;
   max-width: 41rem;
@@ -80,4 +85,9 @@ pn-find-price .servicePoint h3 {
 }
 pn-find-price .servicePoint a {
   color: #005D92;
+  text-decoration: none;
+}
+pn-find-price .servicePoint a:hover {
+  color: #0D234B;
+  text-decoration: underline;
 }

package/collection/components/widgets/pn-find-price/pn-find-price.js

@@ -7,6 +7,7 @@ import small from "./img/small-package.svg";
 import medium from "./img/medium-package.svg";
 import large from "./img/large-package.svg";
 import person from "./img/postnord-person1.svg";
+import clouds from "./img/clouds.svg";
 export class PnfindPrice {
   constructor() {
     this.source = fileLocation;
@@ -84,8 +85,8 @@ export class PnfindPrice {
   render() {
     return (h("div", { class: "findprice-form" },
       h("div", null,
-        (h("div", { class: "sizeheading" }, state.i18n.sizeheading)),
         h("div", { class: "sizecategory" },
+          h("img", { id: "clouds", src: clouds }),
           h("table", { class: "sizeTable" },
             h("tr", null,
               h("td", null,
@@ -116,8 +117,8 @@ export class PnfindPrice {
           h("pn-illustration", { illustration: "character-box-letters-house" }),
           h("h3", null, state.i18n.servicePointHeader),
           h("a", { href: ServicePointUrl, target: "_blank" },
-            state.i18n.servicePointLink,
-            h("pn-icon", { symbol: "map-marker", color: "blue700" }))))) : null));
+            h("pn-icon", { symbol: "map-marker", color: "blue700" }),
+            state.i18n.servicePointLink)))) : null));
   }
   static get is() { return "pn-find-price"; }
   static get originalStyleUrls() { return {

package/collection/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder.js

@@ -12,16 +12,24 @@ export class PnPexPricefinder {
     this.fromzip = null;
     this.tozip = null;
     this.weight = 100;
-    this.when = (new Date()).toISOString().split('T')[0];
+    this.when = '';
     this.response = null;
   }
   componentWillLoad() {
     this.init();
   }
   async init() {
+    this.setInitialTime();
     this.checkParameters();
     this.setLanguage();
   }
+  setInitialTime() {
+    const initialTime = (new Date());
+    initialTime.setHours(initialTime.getHours() + 1);
+    initialTime.setMinutes(0);
+    const splitTime = initialTime.toLocaleString('sv', { timeZoneName: 'short' }).split(' ');
+    this.when = `${splitTime[0]}T${splitTime[1].substring(0, 5)}`;
+  }
   checkParameters() {
     const params = new URLSearchParams(window.location.href);
     if (!params) {
@@ -96,7 +104,7 @@ export class PnPexPricefinder {
             h("pn-input", { type: "number", label: this.i18n.labelWeight, inputid: "weight", name: "weight", placeholder: this.i18n.weightPlaceholder, required: true, value: this.weight }),
             h("div", { class: "datepicker" },
               h("label", { htmlFor: "when" }, this.i18n.labelWhen),
-              h("pn-date-picker", { inputid: "when", name: "when", "start-of-week": "1", min: (new Date()).toISOString().split('T')[0], language: this.language, value: this.when })))),
+              h("pn-marketweb-input", { inputid: "when", name: "when", type: "datetime-local", min: (new Date()).toISOString().split('T')[0], value: this.when })))),
         h("fieldset", null,
           h("div", null,
             h("pn-button", { type: "submit" }, this.i18n.submitButtonText)))),

package/collection/components/widgets/pn-product-card/pn-product-card-info.css

@@ -4,18 +4,17 @@ pn-product-card-info {
 
 .cardinfocontent {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
   flex-grow: 1;
   font-size: 0.875em;
+  gap: 1.6rem;
 }
-.cardinfocontent > div p {
-  margin: 0.25em 0.25em 0 0;
-}
-.cardinfocontent #sp {
-  width: 5em;
+@media screen and (min-width: 36em) {
+  .cardinfocontent {
+    flex-direction: row;
+  }
 }
-
 [slot=formatPre] {
   font-family: "PostNordSans", "Verdana";
   margin: 0.5em 3em 0 0;

package/collection/components/widgets/pn-product-card/pn-product-card-info.js

@@ -4,7 +4,7 @@ export class PnProductCardInfo {
     return (this.label) ? (h(Host, null,
       h("div", { class: "cardinfocontent" }, (this.text) ? (h("pre", { slot: "formatPre" }, this.text)) : null))) : (h(Host, null,
       h("div", { class: "cardinfocontent" },
-        h("div", null,
+        h("div", { class: "cardinfocontent-item" },
           h("strong", null, "Paket:"),
           this.paket.split("/").map((item) => ((item.split(":").length > 0) ?
             h("p", null,
@@ -12,9 +12,8 @@ export class PnProductCardInfo {
               " ",
               item.split(":")[1]) :
             h("p", null, item)))),
-        h("div", { id: "sp" }),
         (this.rulle) ?
-          (h("div", null,
+          (h("div", { class: "cardinfocontent-item" },
             h("strong", null, "Rulle:"),
             this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
               h("p", null,

package/collection/components/widgets/pn-product-card/pn-product-card-price.css

@@ -1,7 +1,9 @@
 pn-product-card-price {
-  margin-top: 1em;
+  margin-top: 1.6rem;
   white-space: nowrap;
   text-align: center;
+  display: flex;
+  flex-direction: column;
 }
 pn-product-card-price span:last-child {
   display: inline-block;
@@ -15,16 +17,31 @@ pn-product-card-price pn-icon {
   align-self: center;
 }
 pn-product-card-price pn-button {
-  width: 12.8em;
-  margin-bottom: 1em;
-  margin-top: 0.5em;
+  min-width: 12.8em;
+  margin-top: 0.8rem;
   font-size: 1.25;
+  order: 2;
+}
+@media screen and (min-width: 48em) {
+  pn-product-card-price pn-button {
+    order: 3;
+    margin-bottom: 1.6rem;
+  }
+}
+pn-product-card-price h3 {
+  order: 1;
 }
 pn-product-card-price p {
   font-weight: lighter;
   font-size: 0.875em;
   align-self: center;
-  margin-top: 0.5em;
+  margin-top: 0.8rem;
+  order: 3;
+}
+@media screen and (min-width: 48em) {
+  pn-product-card-price p {
+    order: 2;
+  }
 }
 pn-product-card-price a {
   text-decoration: none;

package/collection/components/widgets/pn-product-card/pn-product-card-price.js

@@ -9,7 +9,7 @@ export class PnProductCardPrice {
         (this.amount) ? (h("span", null, this.amount)) : null,
         (this.currency) ? (h("span", null, " " + this.currency)) : null),
       (this.note) ? (h("p", null, this.note)) : null,
-      (this.label) ? (h("pn-button", { small: "true", icon: "arrow-right", appearance: "secondary", href: this.url, target: "_blank", id: this.service.split(" ").join("-").toLocaleLowerCase() }, this.label)) : null)) : (h(Host, null,
+      (this.label) ? (h("pn-button", { small: "true", icon: "open-in-new", appearance: "light", href: this.url, target: "_blank", id: this.service.split(" ").join("-").toLocaleLowerCase() }, this.label)) : null)) : (h(Host, null,
       h("h3", null,
         (this.amount) ? (h("span", null, this.amount)) : null,
         (this.currency) ? (h("span", null, this.currency)) : null)));

package/collection/components/widgets/pn-product-card/pn-product-card.css

@@ -1,53 +1,63 @@
 pn-product-card {
-  margin-bottom: 1em;
   border: 0.1rem solid #D3CECB;
   outline: none;
   background: #FFFFFF;
   box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
   display: flex;
-  padding: 1.5em;
   word-break: break-word;
   text-decoration: none;
   border-radius: 0.8rem;
+  position: relative;
+  padding: 11rem 2.4rem 2.4rem;
+  margin-bottom: 1.6rem;
+}
+@media screen and (min-width: 36em) {
+  pn-product-card {
+    padding: 2.4rem;
+  }
 }
 pn-product-card [slot=title] {
   display: flex;
   width: 100%;
-  margin-bottom: 0.5em;
+  margin-bottom: 0.8rem;
+  gap: 1.6rem;
+  flex-direction: column;
+  align-items: center;
 }
-pn-product-card [slot=title] > [slot=Biligast] {
-  color: #005E41;
-  background: #DCF6E7;
-  border-radius: 0.37em;
-  width: 6.3em;
-  height: 2em;
-  margin-left: 1.5em;
+@media screen and (min-width: 36em) {
+  pn-product-card [slot=title] {
+    flex-direction: row;
+    align-items: inherit;
+  }
+}
+pn-product-card [slot=title] h2 {
+  width: 100%;
+}
+@media screen and (min-width: 36em) {
+  pn-product-card [slot=title] h2 {
+    width: auto;
+  }
+}
+pn-product-card [slot=title] > [slot] {
+  border-radius: 0.4rem;
+  height: 2.5em;
   font-weight: normal;
   font-size: 0.75em;
   text-align: center;
   vertical-align: bottom;
-  padding-top: 0.25em;
+  padding: 0.6rem;
 }
-pn-product-card [slot=title] > [slot=Biligast] pn-icon {
+pn-product-card [slot=title] > [slot] pn-icon {
   vertical-align: middle;
   margin-left: 0.6em;
 }
+pn-product-card [slot=title] > [slot=Billigast] {
+  color: #005E41;
+  background: #DCF6E7;
+}
 pn-product-card [slot=title] > [slot=Snabbast] {
   background: #E0F8FF;
   color: #005D92;
-  border-radius: 0.37em;
-  width: 7em;
-  height: 2em;
-  margin-left: 1.5em;
-  font-weight: normal;
-  font-size: 0.75em;
-  text-align: center;
-  vertical-align: bottom;
-  padding-top: 0.25em;
-}
-pn-product-card [slot=title] > [slot=Snabbast] pn-icon {
-  vertical-align: middle;
-  margin-left: 0.6em;
 }
 pn-product-card [slot=note] {
   margin-top: 1em;
@@ -73,22 +83,70 @@ pn-product-card > pn-illustration {
   min-width: 8rem;
   width: 8rem;
   height: 8rem;
-  margin-right: 3rem;
   align-self: center;
+  position: absolute;
+  top: 1.6rem;
+  transform: translateX(-50%);
+  left: 50%;
+  box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
+  border-radius: 100%;
+}
+@media screen and (min-width: 36em) {
+  pn-product-card > pn-illustration {
+    box-shadow: none;
+    top: 1.6rem;
+    right: 1.6rem;
+    left: auto;
+    transform: none;
+  }
+}
+@media screen and (min-width: 48em) {
+  pn-product-card > pn-illustration {
+    position: static;
+    top: auto;
+    right: auto;
+    margin-right: 3rem;
+  }
 }
 pn-product-card .cardcontent {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: center;
   flex-grow: 1;
 }
+@media screen and (min-width: 48em) {
+  pn-product-card .cardcontent {
+    flex-direction: row;
+    gap: 1.6rem;
+  }
+}
+pn-product-card .cardcontent .description :first-child {
+  max-width: calc(100% - 10rem);
+}
+@media screen and (min-width: 48em) {
+  pn-product-card .cardcontent .description :first-child {
+    max-width: none;
+  }
+}
 pn-product-card [slot=cardprice] {
-  display: block;
-  flex-direction: row;
-  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
   flex-grow: 1;
 }
+@media screen and (min-width: 36em) {
+  pn-product-card [slot=cardprice] {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+@media screen and (min-width: 48em) {
+  pn-product-card [slot=cardprice] {
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-end;
+  }
+}
 pn-product-card .details {
   display: flex;
   flex-direction: column;

package/collection/components/widgets/pn-product-card/pn-product-card.js

@@ -11,7 +11,7 @@ export class PnProductCard {
             h("slot", null)),
           h("slot", { name: "note" }),
           h("slot", { name: "additionalUSP" })),
-        h("div", null,
+        h("div", { class: "cardprice" },
           h("slot", { name: "cardprice" })))));
   }
   static get is() { return "pn-product-card"; }

package/collection/components/widgets/pn-product-pricelist/pn-product-pricelist.css

@@ -21,6 +21,7 @@ pn-product-pricelist .weightoption {
 pn-product-pricelist .weightoption-input {
   width: 5em;
   position: relative;
+  display: none;
 }
 pn-product-pricelist .weightoption-input input::-webkit-outer-spin-button,
 pn-product-pricelist .weightoption-input input::-webkit-inner-spin-button {

package/collection/components/widgets/pn-product-pricelist/pn-product-pricelist.stories.js

@@ -31,5 +31,5 @@ Primary.args = {
   source: 'https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx',
   language: 'sv',
   market: 'se',
-  productid: 'expressletter'
+  productid: 'registered10000'
 };

package/custom-elements/index.d.ts

@@ -86,6 +86,12 @@ export const PnMainnavList: {
   new (): PnMainnavList;
 };
 
+interface PnMarketwebInput extends Components.PnMarketwebInput, HTMLElement {}
+export const PnMarketwebInput: {
+  prototype: PnMarketwebInput;
+  new (): PnMarketwebInput;
+};
+
 interface PnMarketwebSearch extends Components.PnMarketwebSearch, HTMLElement {}
 export const PnMarketwebSearch: {
   prototype: PnMarketwebSearch;