@postnord/pn-marketweb-components 2.0.102 → 2.0.104

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

@@ -0,0 +1,151 @@
+import { Component, Element, h, Host, Listen, Prop, State, } from '@stencil/core';
+export class PnSpotlight {
+  constructor() {
+    this.formActionUrl = null;
+    this.heading = 'Track your parcel';
+    this.buttonLabel = null;
+    this.locale = 'en';
+    this.placeholder = 'Enter shipment ID';
+    this.inputName = 'shipmentID';
+    this.currentWidth = window.innerWidth;
+  }
+  handleViewportSizeChange(event) {
+    this.currentWidth = event.target.innerWidth;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-parcel-tracker__container" },
+        h("form", { method: "GET", action: this.formActionUrl },
+          h("h3", { class: "pn-parcel-tracker__container__heading" }, this.heading),
+          h("pn-marketweb-input", { name: this.inputName, placeholder: this.placeholder }),
+          h("pn-button", { type: "submit", icon: "search", "icon-only": this.currentWidth < 412 }, this.currentWidth >= 412 && this.buttonLabel)))));
+  }
+  static get is() { return "pn-parcel-tracker"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-parcel-tracker.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-parcel-tracker.css"]
+  }; }
+  static get properties() { return {
+    "formActionUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "form-action-url",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "'Track your parcel'"
+    },
+    "buttonLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "button-label",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "locale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "locale",
+      "reflect": false,
+      "defaultValue": "'en'"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "'Enter shipment ID'"
+    },
+    "inputName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "input-name",
+      "reflect": false,
+      "defaultValue": "'shipmentID'"
+    }
+  }; }
+  static get states() { return {
+    "currentWidth": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "handleViewportSizeChange",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -0,0 +1,41 @@
+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%;
+}
+pn-quick-cta .quick-cta__content .quick-cta__content__heading {
+  padding: 0;
+  margin: 0;
+  font-size: 2.4rem;
+  font-weight: 500;
+}
+@media screen and (max-width: 768px) {
+  pn-quick-cta .quick-cta__content .quick-cta__content__heading {
+    display: none;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-quick-cta .quick-cta__content .quick-cta__content__heading {
+    font-size: 2.8rem;
+    font-weight: 700;
+  }
+}
+pn-quick-cta .quick-cta__content .quick-cta__content__preamble {
+  font-weight: 400;
+  font-size: 1.6rem;
+  line-height: 140%;
+  padding: 0;
+  margin: 0;
+}
+pn-quick-cta .quick-cta__content [slot=quick-cta-cta] a {
+  white-space: nowrap;
+}
+pn-quick-cta .quick-cta__content [slot=quick-cta-cta] a:hover {
+  text-decoration: none;
+}

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

@@ -0,0 +1,60 @@
+import { Component, Element, h, Host, Prop, } from '@stencil/core';
+export class PnQuickCta {
+  constructor() {
+    this.heading = null;
+    this.preamble = null;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "quick-cta__content" },
+        h("h2", { class: "quick-cta__content__heading" }, this.heading),
+        h("p", { class: "quick-cta__content__preamble" }, this.preamble),
+        h("slot", { name: "quick-cta-cta" }))));
+  }
+  static get is() { return "pn-quick-cta"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-quick-cta.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-quick-cta.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "preamble": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "preamble",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,59 @@
+import readme from './readme.md';
+
+export default {
+  title: 'CTA/Quick CTA',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+const TemplatePrimary = ({ ...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">${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({});
+
+Primary.args = {
+  heading: 'Interested in sustainable shipping?',
+  preamble: 'Talk with our experts',
+  ctaUrl: 'http://www.google.se',
+  ctaLabel: 'Read more',
+};

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

@@ -0,0 +1,103 @@
+pn-spotlight .pn-spotlight__container {
+  overflow: hidden;
+}
+@media screen and (max-width: 991px) {
+  pn-spotlight .pn-spotlight__container {
+    margin-left: calc(-50vw + 50%);
+    margin-right: calc(-50vw + 50%);
+  }
+}
+pn-spotlight [slot=mobile-heading] {
+  text-align: center;
+  padding-bottom: 1.6rem;
+  font-weight: 500;
+}
+@media screen and (min-width: 769px) {
+  pn-spotlight [slot=mobile-heading] {
+    display: none;
+  }
+}
+pn-spotlight .pn-spotlight__container__wrapper {
+  position: relative;
+  max-width: 100%;
+}
+@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%;
+  }
+}
+pn-spotlight .pn-spotlight__container__wrapper__content {
+  position: relative;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  left: -57.5px;
+  width: calc(100% + 57.5px);
+}
+@media screen and (min-width: 768px) {
+  pn-spotlight .pn-spotlight__container__wrapper__content {
+    left: -50px;
+    width: calc(100% + 50px);
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-spotlight .pn-spotlight__container__wrapper__content {
+    left: 0;
+    width: 100%;
+  }
+}
+pn-spotlight .pn-spotlight__container__wrapper__content__ball {
+  border-radius: 50%;
+  min-height: 75px;
+  aspect-ratio: 1/1;
+  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] {
+  display: flex;
+  border-top-left-radius: 10rem;
+  border-bottom-left-radius: 10rem;
+  align-items: center;
+  justify-content: right;
+  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;
+  }
+}
+
+pn-spotlight[data-cta-color=green] [slot=content] {
+  background-color: #DCF6E7;
+}
+pn-spotlight[data-cta-color=green] .pn-spotlight__container__wrapper__content__ball {
+  background-color: #DCF6E7;
+}
+
+pn-spotlight[data-cta-color=coral] [slot=content] {
+  background-color: #FDEFEE;
+}
+pn-spotlight[data-cta-color=coral] .pn-spotlight__container__wrapper__content__ball {
+  background-color: #FDEFEE;
+}
+
+pn-spotlight[data-cta-color=blue] [slot=content] {
+  background-color: #EFFBFF;
+}
+pn-spotlight[data-cta-color=blue] .pn-spotlight__container__wrapper__content__ball {
+  background-color: #EFFBFF;
+}

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

@@ -0,0 +1,62 @@
+import { Component, Element, h, Host, Prop, } from '@stencil/core';
+export class PnSpotlight {
+  constructor() {
+    this.heading = null;
+    this.preamble = null;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-spotlight__container" },
+        h("slot", { name: "mobile-heading" }),
+        h("div", { class: "pn-spotlight__container__wrapper" },
+          h("div", { class: "pn-spotlight__container__wrapper__content" },
+            h("div", { class: "pn-spotlight__container__wrapper__content__ball" }),
+            h("slot", { name: "content" }))))));
+  }
+  static get is() { return "pn-spotlight"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-spotlight.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-spotlight.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "preamble": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "preamble",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,54 @@
+import readme from './readme.md';
+
+export default {
+  title: 'CTA/Spotlight',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+const TemplatePrimary = ({ ...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">${args.heading}</h2>
+        <div slot="content">
+         
+        </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">
+        
+        </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">
+        
+        </div>                
+    </pn-spotlight>
+  </div>  
+  `;
+};
+
+export const Primary = TemplatePrimary.bind({});
+
+Primary.args = {
+  heading: 'A Spotlight Moble Header',
+  preamble: 'With quick-cta component as content',
+  ctaUrl: 'http://www.google.se',
+  ctaLabel: 'Read more',
+};

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.css

@@ -1,6 +1,4 @@
 .bleed-container:has(pn-stats-info) {
-  border-bottom-left-radius: 2.4rem;
-  border-bottom-right-radius: 2.4rem;
   padding: 0;
   margin-bottom: 3rem;
   overflow: hidden;

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/utilities/pn-breakpoints/pn-breakpoints.css

@@ -0,0 +1,72 @@
+pn-breakpoints {
+  width: 100%;
+}
+pn-breakpoints .breakpoints--dotcom {
+  width: 100%;
+  background-color: aliceblue;
+  text-align: center;
+  margin-bottom: 2.4rem;
+  background-color: aliceblue;
+}
+pn-breakpoints .breakpoints--dotcom .reference::before {
+  content: "less than 321";
+}
+@media screen and (min-width: 321px) {
+  pn-breakpoints .breakpoints--dotcom {
+    background-color: yellow;
+  }
+  pn-breakpoints .breakpoints--dotcom .reference::before {
+    content: "321 (xs)";
+  }
+}
+@media screen and (min-width: 576px) {
+  pn-breakpoints .breakpoints--dotcom {
+    background-color: aqua;
+  }
+  pn-breakpoints .breakpoints--dotcom .reference::before {
+    content: "576 (sm)";
+  }
+}
+@media screen and (min-width: 768px) {
+  pn-breakpoints .breakpoints--dotcom {
+    background-color: red;
+    color: #fff;
+  }
+  pn-breakpoints .breakpoints--dotcom .reference::before {
+    content: "768 (md)";
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-breakpoints .breakpoints--dotcom {
+    background-color: green;
+    color: #fff;
+  }
+  pn-breakpoints .breakpoints--dotcom .reference::before {
+    content: "992 (lg)";
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-breakpoints .breakpoints--dotcom {
+    background-color: blue;
+    color: #fff;
+  }
+  pn-breakpoints .breakpoints--dotcom .reference::before {
+    content: "1200 (xl)";
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-breakpoints .breakpoints--dotcom {
+    background-color: pink;
+  }
+  pn-breakpoints .breakpoints--dotcom .reference::before {
+    content: "1640 (xxl)";
+  }
+}
+@media screen and (min-width: 1920px) {
+  pn-breakpoints .breakpoints--dotcom {
+    background-color: orange;
+  }
+  pn-breakpoints .breakpoints--dotcom .reference::before {
+    content: "1920 (fhd)";
+  }
+}