@postnord/pn-marketweb-components 1.0.49-beta4 → 2.0.1

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

@@ -26,12 +26,6 @@ export const PnFilterCheckbox: {
   new (): PnFilterCheckbox;
 };
 
-interface PnFilterSearch extends Components.PnFilterSearch, HTMLElement {}
-export const PnFilterSearch: {
-  prototype: PnFilterSearch;
-  new (): PnFilterSearch;
-};
-
 interface PnFindPrice extends Components.PnFindPrice, HTMLElement {}
 export const PnFindPrice: {
   prototype: PnFindPrice;
@@ -92,6 +86,18 @@ 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;
+  new (): PnMarketwebSearch;
+};
+
 interface PnMarketwebSitefooter extends Components.PnMarketwebSitefooter, HTMLElement {}
 export const PnMarketwebSitefooter: {
   prototype: PnMarketwebSitefooter;