@postnord/pn-marketweb-components 2.0.78 → 2.0.80

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

@@ -0,0 +1,69 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProxioProductcardPricelink {
+  render() {
+    return this.link && this.linktext ?
+      (h(Host, null,
+        this.price ? (h("h2", null, this.price)) : (null),
+        h("pn-button", { small: "true", icon: "arrow-right", appearance: "light", href: this.link, target: "_blank", rel: "noopener nofollower noreferrer" }, this.linktext))) : (null);
+  }
+  static get is() { return "pn-proxio-productcard-pricelink"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-proxio-productcard-pricelink.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-proxio-productcard-pricelink.css"]
+  }; }
+  static get properties() { return {
+    "price": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "price",
+      "reflect": false
+    },
+    "link": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "link",
+      "reflect": false
+    },
+    "linktext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "linktext",
+      "reflect": false
+    }
+  }; }
+}

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard.css

@@ -0,0 +1,60 @@
+pn-proxio-productcard .cardcontent {
+  display: flex;
+  flex-direction: row;
+  border: solid 0.1rem #F9F8F8;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1.6rem;
+}
+pn-proxio-productcard .carddetails {
+  min-width: 70%;
+  padding: 2rem;
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
+pn-proxio-productcard .cardcalltoactions {
+  min-width: 30%;
+  background-color: #EFFBFF;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+}
+pn-proxio-productcard .cardcalltoactions pn-illustration[slot=illustration] .pn-illustration {
+  max-width: 10rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+pn-proxio-productcard [slot=information] {
+  display: flex;
+  gap: 1rem;
+}
+pn-proxio-productcard [slot=uppertags] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2rem;
+}
+pn-proxio-productcard [slot=bottomtags] {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2rem;
+  margin: 1rem 0;
+}
+pn-proxio-productcard .heading {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+pn-proxio-productcard [slot=title] {
+  text-decoration: underline;
+}

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

@@ -2,14 +2,17 @@ import { Component, h, Host } from "@stencil/core";
 export class PnProxioProductcard {
   render() {
     return (h(Host, null,
-      h("slot", { name: "illustration" }),
-      h("div", { class: "tilecontent" },
-        h("div", { class: "details" },
-          h("slot", { name: "content" }),
-          h("div", { class: "info" },
-            h("slot", null)),
-          h("slot", { name: "note" })),
-        h("slot", { name: "price" }))));
+      h("div", { class: "cardcontent" },
+        h("div", { class: "carddetails" },
+          h("div", { class: "heading" },
+            h("slot", { name: "title" }),
+            h("slot", { name: "uppertags" })),
+          h("slot", { name: "description" }),
+          h("slot", { name: "information" }),
+          h("slot", { name: "bottomtags" })),
+        h("div", { class: "cardcalltoactions" },
+          h("slot", { name: "illustration" }),
+          h("slot", { name: "pricelink" })))));
   }
   static get is() { return "pn-proxio-productcard"; }
   static get originalStyleUrls() { return {

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

@@ -3,15 +3,34 @@ import readme from "./readme.md";
 export default {
   title: "Proxio/Product card",
   parameters: {
-    
+    notes: readme
   }
 };
 
 const Template = ({ ...args }) => {
   return `
-    <div style="max-width: 30em; margin:1em auto 0;">
-      <pn-proxio-productcard language="en" endpoint="https://se-integration.postnord.com/api/proxio">
-        
+    <div style="max-width: 67em; margin:1em auto 0;">
+      <pn-proxio-productcard>
+        <h2 slot="title">${args.heading}</h2>
+        <div slot="uppertags">
+          <pn-titletag icon="box-label" color="green700">${args.uppertag}</pn-titletag>
+        </div>
+        <pn-proxio-productcard-description slot="description" heading="${args.description}" highlight="${args.highlight}" list="${args.list}" ></pn-proxio-productcard-description>
+        <div slot="information">
+          <pn-proxio-productcard-information label="${args.paketlabel}" information="${args.paket}" ></pn-proxio-productcard-information>
+          <pn-proxio-productcard-information label="${args.rullelabel}" information="${args.rulle}" ></pn-proxio-productcard-information>
+        </div>
+        <div slot="bottomtags">
+          <pn-titletag color="gray50">${args.traceable}</pn-titletag>
+          <pn-titletag color="gray50">${args.usp1}</pn-titletag>
+          <pn-titletag color="gray50">${args.usp2}</pn-titletag>
+          <pn-titletag color="gray50">${args.usp3}</pn-titletag>
+        </div>
+        <pn-illustration slot="illustration" illustration="${args.illustration}" ></pn-illustration>
+        <div slot="pricelink">
+          <pn-proxio-productcard-pricelink price="${args.price1}" link="${args.link}" linktext="${args.linktext1}" ></pn-proxio-productcard-pricelink>
+          <pn-proxio-productcard-pricelink price="${args.price2}" link="${args.link}" linktext="${args.linktext2}" ></pn-proxio-productcard-pricelink>
+        </div>
       </pn-proxio-productcard>
     </div>
   `;
@@ -19,5 +38,23 @@ const Template = ({ ...args }) => {
 
 export const Primary = Template.bind({});
 Primary.args = {
-  
+  heading: "Brev",
+  description: "Skicka brev som väger upp till 2 kilo",
+  highlight: "Leverans senast 2 juni 2022",
+  list: ["Portot betalas med frimärken eller med portkod (digitalt frimärke)", "Levereras till postlåda om det får plats, annars till serviceställe", "Postas i någon av våra brevlådor eller lämnas in hos ett postombud."],
+  paketlabel: "Paket:",
+  paket: [{ item1: "Längd:", item2: "Max XX cm" }, { item1: "Längd + bredd + höjd:", item2: "Max XX cm" }],
+  rullelabel: "Rulle:",
+  rulle: [{ item1:"Längd:", item2:"Max XX cm" }, { item1:"Längd + bredd + höjd:", item2:"Max XX cm" }],
+  price1: "från 14 kronor",
+  price2: "från 13 kronor",
+  link: "www.google.com",
+  linktext1: "Köp portkod",
+  linktext2: "Till butiken",
+  uppertag: "Billigast",
+  traceable: "Inte spårbart",
+  usp1: "usp1",
+  usp2: "usp2",
+  usp3: "usp3",
+  illustration: "hand-letter-stamp"
 };

package/custom-elements/index.d.ts

@@ -242,10 +242,10 @@ export const PnProfileSelectorOption: {
   new (): PnProfileSelectorOption;
 };
 
-interface PnProxioPricefinder extends Components.PnProxioPricefinder, HTMLElement {}
-export const PnProxioPricefinder: {
-  prototype: PnProxioPricefinder;
-  new (): PnProxioPricefinder;
+interface PnProxioPricegroup extends Components.PnProxioPricegroup, HTMLElement {}
+export const PnProxioPricegroup: {
+  prototype: PnProxioPricegroup;
+  new (): PnProxioPricegroup;
 };
 
 interface PnProxioProductcard extends Components.PnProxioProductcard, HTMLElement {}
@@ -254,6 +254,24 @@ export const PnProxioProductcard: {
   new (): PnProxioProductcard;
 };
 
+interface PnProxioProductcardDescription extends Components.PnProxioProductcardDescription, HTMLElement {}
+export const PnProxioProductcardDescription: {
+  prototype: PnProxioProductcardDescription;
+  new (): PnProxioProductcardDescription;
+};
+
+interface PnProxioProductcardInformation extends Components.PnProxioProductcardInformation, HTMLElement {}
+export const PnProxioProductcardInformation: {
+  prototype: PnProxioProductcardInformation;
+  new (): PnProxioProductcardInformation;
+};
+
+interface PnProxioProductcardPricelink extends Components.PnProxioProductcardPricelink, HTMLElement {}
+export const PnProxioProductcardPricelink: {
+  prototype: PnProxioProductcardPricelink;
+  new (): PnProxioProductcardPricelink;
+};
+
 interface PnSidenav extends Components.PnSidenav, HTMLElement {}
 export const PnSidenav: {
   prototype: PnSidenav;