@postnord/pn-marketweb-components 2.0.108 → 2.0.110

package/collection/components/cards/pn-quote-card/pn-quote-card.css

@@ -0,0 +1,291 @@
+pn-quote-card .pn-quote-card__container {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  min-height: 262px;
+  padding: 0 2.4rem;
+}
+pn-quote-card .pn-quote-card__quote__container {
+  padding: 0 3.2rem;
+}
+pn-quote-card .pn-quote-card__quote {
+  position: relative;
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 140%;
+  margin: 0;
+}
+pn-quote-card .pn-quote-card__quote svg {
+  position: absolute;
+  left: -3.2rem;
+  top: 0.2rem;
+}
+pn-quote-card .pn-quote-card__reference__container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 1.6rem;
+  align-items: center;
+}
+pn-quote-card .pn-quote-card__reference__name {
+  font-weight: 400;
+  font-size: 2.4rem;
+  line-height: 2.9rem;
+}
+pn-quote-card .pn-quote-card__reference__occupation {
+  font-weight: 400;
+  font-size: 1.4rem;
+  line-height: 1.7rem;
+}
+pn-quote-card [slot=illustration] {
+  padding: 0;
+}
+pn-quote-card [slot=illustration-big] {
+  padding: 0.8rem 0;
+}
+pn-quote-card [slot=illustration],
+pn-quote-card [slot=illustration-big] {
+  aspect-ratio: 1/1;
+}
+pn-quote-card [slot=illustration] picture,
+pn-quote-card [slot=illustration-big] picture {
+  aspect-ratio: 1/1;
+}
+pn-quote-card [slot=illustration] picture img,
+pn-quote-card [slot=illustration-big] picture img {
+  clip-path: circle(50%);
+}
+
+pn-quote-card[data-line-orientation=horizontal] [slot=horizontal-line] {
+  display: flex;
+}
+pn-quote-card[data-line-orientation=horizontal] [slot=vertical-line] {
+  display: none;
+}
+
+pn-quote-card[data-line-orientation=vertical] [slot=horizontal-line] {
+  display: none;
+}
+pn-quote-card[data-line-orientation=vertical] [slot=vertical-line] {
+  display: flex;
+}
+
+pn-quote-card[data-line-color=white] .pn-quote-card__section {
+  background-color: #00A0D6;
+  color: #FFFFFF;
+}
+pn-quote-card[data-line-color=white] .pn-line-shape__line,
+pn-quote-card[data-line-color=white] .pn-line-shape__dot {
+  border-color: #FFFFFF;
+}
+pn-quote-card[data-line-color=white] .pn-quote-card__quote svg > path {
+  fill: #FFFFFF;
+}
+
+pn-quote-card[data-line-color=blue] .pn-quote-card__section {
+  background-color: #FFFFFF;
+}
+pn-quote-card[data-line-color=blue] .pn-line-shape__line,
+pn-quote-card[data-line-color=blue] .pn-line-shape__dot {
+  border-color: #00A0D6;
+}
+pn-quote-card[data-line-color=blue] .pn-quote-card__quote svg > path {
+  fill: #00A0D6;
+}
+
+pn-quote-card[data-card-style=quotepage] .pn-quote-card__large-photo {
+  display: none;
+}
+
+pn-quote-card[data-card-style=startpage] .pn-quote-card__section {
+  width: 100%;
+  margin: 0 auto;
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+@media screen and (min-width: 992px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__section {
+    padding-bottom: 0;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__section {
+    padding-top: 10rem;
+  }
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__container {
+  min-height: 10rem;
+  padding-bottom: 0;
+}
+@media screen and (min-width: 768px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__container {
+    max-width: 90%;
+    width: 100%;
+    /*  background-color: green; */
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__container {
+    max-width: 768px;
+    width: 100%;
+    /* background-color: rebeccapurple; */
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__container {
+    max-width: 1140px;
+    width: 100%;
+    padding: 0 5.6rem;
+    /*  background-color: hotpink; */
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__container {
+    max-width: 1440px;
+    width: 100%;
+    padding: 0 12rem;
+    /* background-color: red; */
+  }
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__quote__container {
+  padding-bottom: 0;
+}
+@media screen and (min-width: 768px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote__container {
+    padding-left: 2.4rem;
+    padding-right: 2.4rem;
+  }
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__quote {
+  font-size: 2rem;
+  padding-left: 2.4rem;
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg {
+  left: -0.8rem;
+  top: 0.2rem;
+}
+@media screen and (min-width: 768px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote {
+    padding-left: 4rem;
+  }
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg {
+    left: 0;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote {
+    font-size: 2.4rem;
+  }
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg {
+    left: 0;
+    top: 0.4rem;
+    scale: 1.3;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote {
+    padding-left: 0;
+    font-size: 3.2rem;
+  }
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg {
+    left: -4.8rem;
+    top: 1rem;
+    scale: 1.4;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote {
+    font-size: 4rem;
+  }
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__quote svg {
+    left: -6.4rem;
+    top: 1.6rem;
+    scale: 1.8;
+  }
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__container {
+  flex-direction: row-reverse;
+}
+pn-quote-card[data-card-style=startpage] [slot=illustration] picture > img {
+  max-width: 6rem;
+  max-height: 6rem;
+}
+@media screen and (min-width: 768px) {
+  pn-quote-card[data-card-style=startpage] [slot=illustration] picture > img {
+    max-width: 10rem;
+    max-height: 10rem;
+  }
+}
+@media screen and (min-width: 1140px) {
+  pn-quote-card[data-card-style=startpage] [slot=illustration] {
+    display: none;
+  }
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__reference {
+  text-align: right;
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name {
+  display: block;
+  font-size: 1.4rem;
+}
+@media screen and (min-width: 768px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name {
+    font-size: 1.6rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name {
+    font-size: 2rem;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__name {
+    font-size: 3.2rem;
+    margin-bottom: 1rem;
+  }
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation {
+  display: block;
+  font-size: 1.2rem;
+}
+@media screen and (min-width: 992px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation {
+    font-size: 1.4rem;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__reference__occupation {
+    font-size: 2rem;
+  }
+}
+pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo {
+  display: none;
+}
+@media screen and (min-width: 1140px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo {
+    display: block;
+  }
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo > [slot=illustration-big] {
+    width: 18rem;
+    height: 18rem;
+  }
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo > [slot=illustration-big] picture > img {
+    width: 18rem;
+    height: 18rem;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo {
+    display: block;
+    width: 24rem;
+    height: 24rem;
+  }
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo > [slot=illustration-big] {
+    width: 24rem;
+    height: 24rem;
+  }
+  pn-quote-card[data-card-style=startpage] .pn-quote-card__large-photo > [slot=illustration-big] > picture > img {
+    width: 24rem;
+    height: 24rem;
+  }
+}

package/collection/components/cards/pn-quote-card/pn-quote-card.js

@@ -0,0 +1,92 @@
+import { Component, Element, h, Host, Prop, } from '@stencil/core';
+export class PnQuoteCard {
+  constructor() {
+    //props
+    this.quote = null;
+    this.name = null;
+    this.occupation = null;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-quote-card__section" },
+        h("div", { class: "pn-quote-card__container" },
+          h("slot", { name: "vertical-line" }, " "),
+          h("div", { class: "pn-quote-card__quote__container" },
+            h("blockquote", { class: "pn-quote-card__quote" },
+              h("svg", { width: "25", height: "18", viewBox: "0 0 25 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+                h("path", { d: "M10.483 0V7.391C10.483 13.095 6.752 16.961 1.5 18L0.505 15.849C2.937 14.932 4.5 12.211 4.5 10H0.5V0H10.483ZM24.5 0V7.391C24.5 13.095 20.752 16.962 15.5 18L14.504 15.849C16.937 14.932 18.5 12.211 18.5 10H14.517V0H24.5Z", fill: "white" })),
+              this.quote),
+            h("slot", { name: "horizontal-line" }),
+            h("div", { class: "pn-quote-card__reference__container" },
+              h("slot", { name: "illustration" }),
+              h("div", { class: "pn-quote-card__reference" },
+                h("span", { class: "pn-quote-card__reference__name" }, this.name),
+                h("span", { class: "pn-quote-card__reference__occupation" }, this.occupation)))),
+          h("div", { class: "pn-quote-card__large-photo" },
+            h("slot", { name: "illustration-big" }))))));
+  }
+  static get is() { return "pn-quote-card"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-quote-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-quote-card.css"]
+  }; }
+  static get properties() { return {
+    "quote": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "quote",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "occupation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "occupation",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/cards/pn-quote-card/pn-quote-card.stories.js

@@ -0,0 +1,83 @@
+import readme from './readme.md';
+
+export default {
+  title: 'Cards/Quote Card',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+const TemplateQuoteCardQuotePage = ({ ...args }) => {
+  return `<pn-breakpoints></pn-breakpoints>
+  
+    <div id="bs-col" style="width:33%; margin:0 auto">
+      <pn-quote-card quote="${args.quote}" name="${args.name}" occupation="${args.occupation}" data-line-color="blue" data-line-orientation="vertical">
+      <pn-line-shape data-orientation="vertical" slot="vertical-line"></pn-line-shape>      
+      <div slot="illustration">         
+          <picture>
+            <img height="105" src="${args.photoUrl}" /> 
+          </picture>
+      </div>
+        </pn-quote-card>
+    
+    </div>
+
+    <div id="bs-col" style="width:33%; margin:0 auto">
+      <pn-quote-card quote="${args.quote}" name="${args.name}" occupation="${args.occupation}" data-line-color="white" data-line-orientation="vertical" data-card-style="quotepage">
+      <pn-line-shape data-orientation="vertical" slot="vertical-line"></pn-line-shape>      
+      <div slot="illustration">         
+          <picture>
+            <img height="105" src="${args.photoUrl}" /> 
+          </picture>
+      </div>
+        </pn-quote-card>
+
+    </div>    
+`;
+};
+
+export const QuotePage = TemplateQuoteCardQuotePage.bind({});
+
+QuotePage.args = {
+  quote: 'Suddenly, we can be one step ahead and help customers track their package. They feel safer and this saves us a lot of time internally. Not least on customer service.',
+  photoUrl:
+    'https://com-integration.postnord.com/globalassets/images/hero-article-photos/smiling-customer-service-worker-with-headset.jpg?width=240&height=240&mode=crop&quality=80',
+  name: 'Jenny Jennysson',
+  occupation: 'Owner at Headsets for All',
+};
+
+const TemplateQuoteCardStartPage = ({ ...args }) => {
+  return `
+  <pn-breakpoints></pn-breakpoints>
+    <div id="view-port-width" style="margin:0 auto; background-color:gray" >
+      <div id="bs-container-bleed" >  
+      
+        <pn-quote-card quote="${args.quote}" name="${args.name}" occupation="${args.occupation}" data-line-color="white" data-line-orientation="horizontal" data-card-style="startpage">        
+        <pn-line-shape data-orientation="horizontal" slot="horizontal-line"></pn-line-shape>
+        <div slot="illustration">         
+            <picture>
+              <img height="105" src="${args.photoUrl}" /> 
+            </picture>
+        </div>
+        <div slot="illustration-big">         
+            <picture>
+              <img height="105" src="${args.photoUrl}" /> 
+            </picture>
+        </div>
+          </pn-quote-card>
+      
+      </div>
+    </div>
+    `;
+};
+
+export const StartPage = TemplateQuoteCardStartPage.bind({});
+
+StartPage.args = {
+  quote: 'Suddenly, we can be one step ahead and help customers track their package. They feel safer and this saves us a lot of time internally. Not least on customer service.',
+  photoUrl:
+    'https://com-integration.postnord.com/globalassets/images/hero-article-photos/smiling-customer-service-worker-with-headset.jpg?width=240&height=240&mode=crop&quality=80',
+  name: 'Jenny Jennysson',
+  occupation: 'Owner at Headsets for All',
+};

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/animationHelper.js

@@ -5,7 +5,7 @@ export const animateValue = (obj, start = 0, end = 100, duration = 1000) => {
       startTimestamp = timestamp;
     const progress = Math.min((timestamp - startTimestamp) / duration, 1);
     //obj.innerHTML = Math.floor(progress * (end - start) + start); //integer
-    obj.innerHTML = (Math.round((progress * (end - start) + start) * 10) / 10).toString(); // decimal
+    obj.innerHTML = duration ? (Math.round((progress * (end - start) + start) * 10) / 10).toString() : end.toString(); // decimal
     if (progress < 1) {
       window.requestAnimationFrame(step);
     }

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

@@ -97,11 +97,11 @@ export class PnStatsInfoData {
       "defaultValue": "null"
     },
     "compId": {
-      "type": "number",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "number",
-        "resolved": "number",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,

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

@@ -11,6 +11,9 @@ export class PnStatsInfo {
     if (newValue)
       this.myParsedArray = JSON.parse(newValue);
   }
+  generateUniqueID() {
+    return Date.now();
+  }
   render() {
     return (h(Host, null,
       h("div", { class: "pn-stats-info__container" },
@@ -19,7 +22,7 @@ export class PnStatsInfo {
           h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading),
           h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
             this.myParsedArray.map((stats, index) => {
-              return h("pn-stats-info-data", { "comp-id": index, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration });
+              return (h("pn-stats-info-data", { "comp-id": `${this.generateUniqueID()}-${index}`, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration }));
             }))))));
   }
   static get is() { return "pn-stats-info"; }

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.stories.js

@@ -14,6 +14,14 @@ const PrimaryTemplate = ({ ...args }) => {
   <h1 style="text-align:center;">Scroll Down...</h1>
   </div>
   <div style="background-color:#0D234B;">
+    <div style="width:100%; max-width:1140px; margin:0 auto">    
+        <pn-stats-info heading="${args.heading}" background-url="${args.backgroundUrl}">               
+        </pn-stats-info>
+    </div>
+    </div>
+    <br/>
+
+    <div style="background-color:#0D234B;">
     <div style="width:100%; max-width:1140px; margin:0 auto">    
         <pn-stats-info heading="${args.heading}" background-url="${args.backgroundUrl}">               
         </pn-stats-info>

package/collection/globals/MarketWebLoginManager.js

@@ -120,8 +120,14 @@ class MarketWebLoginManager {
     return `${this.getBaseUrl()}${this.endpoints.authorizationEndpoint}?redirectionUrl=${redirectPage}`;
   }
   getLogoutUrl(redirectPage = "") {
-    const addSlash = (this.siteUrl.lastIndexOf('/') !== (this.siteUrl.length - 1));
-    redirectPage = this.siteUrl + (addSlash ? '/' : '') + 'logout';
+    let rootUrl = this.siteUrl;
+    try {
+      const url = new URL(this.siteUrl + '');
+      rootUrl = url.origin;
+    }
+    catch (e) { }
+    const addSlash = (rootUrl.lastIndexOf('/') !== (rootUrl.length - 1));
+    redirectPage = rootUrl + (addSlash ? '/' : '') + 'logout';
     return `${redirectPage}?logoutUrl=${this.getBaseUrl()}${this.endpoints.logoutEndpoint}?redirectionUrl=${redirectPage}%26authorization=${this.store.get(this.keys.token)}`;
   }
   getUserInfo() {

package/custom-elements/index.d.ts

@@ -80,6 +80,12 @@ export const PnLanguageSelectorOption: {
   new (): PnLanguageSelectorOption;
 };
 
+interface PnLineShape extends Components.PnLineShape, HTMLElement {}
+export const PnLineShape: {
+  prototype: PnLineShape;
+  new (): PnLineShape;
+};
+
 interface PnMainnav extends Components.PnMainnav, HTMLElement {}
 export const PnMainnav: {
   prototype: PnMainnav;
@@ -290,6 +296,12 @@ export const PnQuickCta: {
   new (): PnQuickCta;
 };
 
+interface PnQuoteCard extends Components.PnQuoteCard, HTMLElement {}
+export const PnQuoteCard: {
+  prototype: PnQuoteCard;
+  new (): PnQuoteCard;
+};
+
 interface PnSidenav extends Components.PnSidenav, HTMLElement {}
 export const PnSidenav: {
   prototype: PnSidenav;