@postnord/pn-marketweb-components 1.0.44-beta1 → 1.0.44-beta2

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

@@ -0,0 +1,30 @@
+pn-product-card-info {
+  align-self: center;
+}
+
+.cardinfocontent {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-grow: 1;
+  font-size: 0.875em;
+}
+.cardinfocontent > div {
+  margin: 10px;
+}
+
+[slot=formatPre] {
+  font-size: 1em;
+  font-family: "PostNordSans", "Verdana";
+}
+[slot=formatPre] > strong {
+  font-weight: bold;
+}
+
+.cardinfoprice {
+  display: flex;
+  font-size: 1em;
+  flex-direction: row;
+  justify-content: center;
+  flex-grow: 1;
+}

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

@@ -0,0 +1,92 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProductCardInfo {
+  render() {
+    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("h4", null, "Paket:"),
+          h("pre", { slot: "formatPre" }, this.paket)),
+        h("div", null,
+          h("h4", null, "Rulle:"),
+          h("pre", { slot: "formatPre" }, this.rulle)))));
+  }
+  static get is() { return "pn-product-card-info"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-product-card-info.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-product-card-info.css"]
+  }; }
+  static get properties() { return {
+    "rulle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "rulle",
+      "reflect": false
+    },
+    "paket": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "paket",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false
+    }
+  }; }
+}
+h("pn-icon", { symbol: "align-center", small: "false", color: "black" });

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

@@ -0,0 +1,37 @@
+pn-product-card-price {
+  margin-top: 1em;
+  white-space: nowrap;
+  text-align: center;
+}
+pn-product-card-price span {
+  font-size: 1.25em;
+}
+pn-product-card-price span:last-child {
+  display: inline-block;
+  margin-left: 0.2em;
+}
+pn-product-card-price + pn-product-card-price {
+  margin-left: 1.5em;
+}
+pn-product-card-price pn-icon {
+  display: inline-block;
+  align-self: center;
+}
+pn-product-card-price pn-button {
+  width: 12.8em;
+  margin-bottom: 1em;
+  margin-top: 0.5em;
+}
+pn-product-card-price p {
+  font-weight: lighter;
+  font-size: 0.6em;
+  align-self: center;
+  margin-top: 0.5em;
+}
+pn-product-card-price a {
+  text-decoration: none;
+  color: #005D92;
+}
+pn-product-card-price a h3 {
+  text-decoration: underline;
+}

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

@@ -0,0 +1,112 @@
+import { Component, h, Prop, Host } from "@stencil/core";
+export class PnProductCardPrice {
+  render() {
+    if (!this.amount) {
+      return;
+    }
+    return (this.url) ? (h(Host, null,
+      h("h3", null,
+        (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("a", { href: this.url },
+        h("pn-button", { small: "true", icon: "arrow-right", appearance: "secondary" }, 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)));
+  }
+  static get is() { return "pn-product-card-price"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-product-card-price.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-product-card-price.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "amount": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "amount",
+      "reflect": false
+    },
+    "currency": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "currency",
+      "reflect": false
+    },
+    "note": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "note",
+      "reflect": false
+    },
+    "url": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "url",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,86 @@
+pn-product-card {
+  margin-bottom: 1em;
+  border: 0.1rem solid #D3CECB;
+  outline: none;
+  background: white;
+  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;
+}
+pn-product-card [slot=content] h3 {
+  display: flex;
+  width: 100%;
+  margin-bottom: 0.5em;
+}
+pn-product-card [slot=content] h3 > [slot=Biligast] {
+  font-size: 0.6em;
+  background: #005E41;
+  color: white;
+  border-radius: 0.37em;
+  width: 4em;
+  line-height: 2em;
+  text-align: center;
+  margin-left: 0.6em;
+  font-weight: normal;
+}
+pn-product-card [slot=content] h3 > [slot=Snabbast] {
+  font-size: 0.6em;
+  background: #005D92;
+  color: white;
+  border-radius: 0.37em;
+  width: 5em;
+  line-height: 2em;
+  text-align: center;
+  vertical-align: bottom;
+  margin-left: 0.6em;
+  font-weight: normal;
+}
+pn-product-card [slot=additionalUSP] {
+  font-size: 0.6em;
+  background: #D3CECB;
+  color: #2D2013;
+  border-radius: 0.25em;
+  width: fit-content;
+  padding: 0.3em;
+  margin-top: 0.5em;
+}
+pn-product-card > pn-illustration {
+  min-width: 8rem;
+  width: 8rem;
+  height: 8rem;
+  margin-right: 3rem;
+  align-self: center;
+}
+pn-product-card .cardcontent {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-grow: 1;
+}
+pn-product-card .cardprice {
+  display: flex;
+  font-size: 1em;
+  flex-direction: row;
+  justify-content: center;
+  flex-grow: 1;
+}
+pn-product-card .details {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+pn-product-card .info {
+  display: flex;
+  justify-content: space-between;
+  flex-grow: 1;
+  max-width: 66.6666666667%;
+  flex-flow: wrap;
+}
+pn-product-card .info > * {
+  min-width: 6em;
+  margin: 0.2em 1em 0.2em 0;
+}

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

@@ -0,0 +1,26 @@
+import { Component, h, Host } from "@stencil/core";
+export class PnProductCard {
+  render() {
+    return (h(Host, null,
+      h("slot", { name: "illustration" }),
+      h("div", { class: "cardcontent" },
+        h("div", { class: "details" },
+          h("slot", { name: "content" }),
+          h("div", { class: "info" },
+            h("slot", null)),
+          h("slot", { name: "note" }),
+          h("slot", { name: "additionalUSP" })),
+        h("div", { class: "cardprice" },
+          h("div", null,
+            h("slot", { name: "price" }),
+            h("slot", { name: "sendDirectPrice" }),
+            h("slot", { name: "stampPrice" }))))));
+  }
+  static get is() { return "pn-product-card"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-product-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-product-card.css"]
+  }; }
+}

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

@@ -0,0 +1,50 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Widgets/Product Card",
+  parameters: {
+    notes: readme
+  }
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <div style="max-width: 30em; margin:1em auto 0;">
+      <pn-product-card>
+        <div slot="content">
+          <h3>${args.heading}</h3>
+          <p>${args.description}</p>
+        </div>
+        <pn-product-card-info label="${args.info1label}" text="${args.info1value}"></pn-product-card-info>
+        <pn-product-card-info label="${args.info2label}" text="${args.info2value}"></pn-product-card-info>
+        <pn-product-card-price slot="price" label="${args.pricelabel}" amount="${args.priceamount}" currency="${args.pricecurrency}"></pn-product-card-price>
+      </pn-product-card>
+    </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  heading: "Skicka hem",
+  description: "Lorem ipsum dolor sit amet",
+  info1label: "Maxvikt",
+  info1value: "250g",
+  info2label: "Max längd + bredd + höjd",
+  info2value: "90cm",
+  pricelabel: "Skicka direkt",
+  priceamount: "52",
+  pricecurrency: "kr"
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  heading: "",
+  description: "",
+  info1label: "Maxvikt",
+  info1value: "250g",
+  info2label: "Max längd + bredd + höjd",
+  info2value: "90cm",
+  pricelabel: "Skicka direkt",
+  priceamount: "52",
+  pricecurrency: "kr"
+};

package/custom-elements/index.d.ts

@@ -122,6 +122,24 @@ export const PnPexPricefinder: {
   new (): PnPexPricefinder;
 };
 
+interface PnProductCard extends Components.PnProductCard, HTMLElement {}
+export const PnProductCard: {
+  prototype: PnProductCard;
+  new (): PnProductCard;
+};
+
+interface PnProductCardInfo extends Components.PnProductCardInfo, HTMLElement {}
+export const PnProductCardInfo: {
+  prototype: PnProductCardInfo;
+  new (): PnProductCardInfo;
+};
+
+interface PnProductCardPrice extends Components.PnProductCardPrice, HTMLElement {}
+export const PnProductCardPrice: {
+  prototype: PnProductCardPrice;
+  new (): PnProductCardPrice;
+};
+
 interface PnProductPricelist extends Components.PnProductPricelist, HTMLElement {}
 export const PnProductPricelist: {
   prototype: PnProductPricelist;