@postnord/pn-marketweb-components 2.8.9 → 2.9.1

package/collection/components/animation/pn-play-on-scroll/pn-play-on-scroll.stories.js

@@ -10,93 +10,13 @@ export default {
 
 const PlayOnScrollTemplate = args => {
   return `
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-    <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <pn-play-on-scroll></pn-play-on-scroll>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
-  <br>
+  <div style="height: 140rem;"></div>
+  <pn-play-on-scroll video-src="${args.videoSrc}"></pn-play-on-scroll>
+  <div style="height: 140rem;"></div>
   `;
 };
 
 export const PlayOnScroll = PlayOnScrollTemplate.bind({});
-PlayOnScroll.args = {};
+PlayOnScroll.args = {
+  videoSrc: "https://com-inte.postnord.com/contentassets/1d0fd381dbde41f69f64df946b3e1e34/postnord-jakaa-turussa-kaikki-paketit-lahibokseihin-paastottomasti-sahkolla.mp4"
+};

package/collection/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown-row.js

@@ -162,8 +162,10 @@ export class PnMultiRowConnectedDropdownRow {
     const emmitValues = debounce(this.emittRowValues.bind(this), 500);
     this.pnInputField.addEventListener('keyup', this.handleInput.bind(this));
     this.pnInputField.addEventListener('change', this.handleInput.bind(this));
+    this.pnInputField.addEventListener('input', this.handleInput.bind(this));
     this.pnInputField.addEventListener('keyup', emmitValues);
     this.pnInputField.addEventListener('change', emmitValues);
+    this.pnInputField.addEventListener('input', emmitValues);
     if (this.allowMultipleDates) {
       this.pnShowDateRangeFiledButton.addEventListener('click', this.showDateRangeRow.bind(this));
       this.pnStartDate.addEventListener('dateselection', this.HandleRangeDatePickers.bind(this));

package/collection/components/media/pn-media-block/media-block.stories.js

@@ -14,7 +14,6 @@ export default {
       imageSrcSmallScreenFormat: { type: 'string' },
       imageAltText: { type: 'string' },
       videoSrc: { type: 'string' },
-      parallaxScroll: { type: 'boolean' },
       showOverlayLayer: { type: 'boolean' },
       customOverlayBackground: { type: 'string' },
       animateOverlayBackground: { type: 'boolean' },
@@ -40,12 +39,12 @@ const Template = ({ ...args }) => {
       image-src="${args.imageSrc}"
       image-src-small-screen-format="${args.imageSrcSmallScreenFormat}"
       image-alt-text="${args.imageAltText}"
-      parallax-scroll="${args.parallaxScroll}"
       show-overlay-layer="${args.showOverlayLayer}"
       custom-overlay-background="${args.customOverlayBackground}"
       animate-overlay-background="${args.animateOverlayBackground}"
       scroll-snap-block="${args.scrollSnapBlock}"
       fixed-background="${args.fixedBackground}"
+      margin-bottom="${args.marginBottom}"
       block-heading="${args.blockHeading}"
       block-heading-level="${args.blockHeadingLevel}"
       block-preamble="${args.blockPreamble}">
@@ -60,10 +59,10 @@ export const Default = Template.bind({});
 Default.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : false,
+  marginBottom : false,
   blockHeadingLevel: 2,
   blockHeading: "Maximize your e-commerce potential",
   blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
@@ -73,7 +72,6 @@ export const FixedBackground = Template.bind({});
 FixedBackground.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : true,
@@ -86,7 +84,6 @@ export const CompactHeightBlock = Template.bind({});
 CompactHeightBlock.args = {
   blockHeight : '65svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : true,
@@ -99,7 +96,6 @@ export const DynamicHeight = Template.bind({});
 DynamicHeight.args = {
   blockHeight : 'dynamic',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : false,
@@ -114,7 +110,6 @@ MultipleSrc.args = {
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
   imageSrcSmallScreenFormat : 'https://picsum.photos/1200/1200',
   imageAltText : 'This is an image',
-  parallaxScroll : true,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : false,
@@ -127,7 +122,6 @@ export const ParallaxBackground = Template.bind({});
 ParallaxBackground.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : true,
   showOverlayLayer : true,
   scrollSnapBlock : false,
   fixedBackground : false,
@@ -140,7 +134,6 @@ export const ScrollSnap = Template.bind({});
 ScrollSnap.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : true,
   showOverlayLayer : true,
   scrollSnapBlock : true,
   fixedBackground : false,
@@ -153,7 +146,6 @@ export const CustomOverlayBackground = Template.bind({});
 CustomOverlayBackground.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   customOverlayBackground : "linear-gradient(180deg, #0d234b, transparent)",
   scrollSnapBlock : true,
@@ -167,7 +159,6 @@ export const AnimateOverlayBackground = Template.bind({});
 AnimateOverlayBackground.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   showOverlayLayer : true,
   customOverlayBackground : "linear-gradient(90deg, rgba(131,58,180,0.8253676470588236) 0%, rgba(253,29,29,0.1783088235294118) 50%, rgba(252,176,69,0.727328431372549) 100%)",
   animateOverlayBackground : true,
@@ -186,7 +177,6 @@ const TemplateWithLink = ({ ...args }) => {
     <pn-media-block
       block-height="${args.blockHeight}"
       image-src="${args.imageSrc}"
-      parallax-scroll="${args.parallaxScroll}"
       show-overlay-layer="${args.showOverlayLayer}"
       scroll-snap-block="${args.scrollSnapBlock}"
       fixed-background="${args.fixedBackground}"
@@ -211,7 +201,6 @@ export const WithLink = TemplateWithLink.bind({});
 WithLink.args = {
   blockHeight : '100svh',
   imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  parallaxScroll : false,
   fixedBackground : true,
   showOverlayLayer : true,
   blockHeading: "Maximize your e-commerce potential",
@@ -224,12 +213,13 @@ WithLink.args = {
 
 const TemplateVideo = ({ ...args }) => {
   return `
+    <br>
+    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
     <br>
     <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
     <br>
     <pn-media-block block-height="${args.blockHeight}"
       video-src="${args.videoSrc}"
-      parallax-scroll="${args.parallaxScroll}"
       show-overlay-layer="${args.showOverlayLayer}"
       scroll-snap-block="${args.scrollSnapBlock}"
       fixed-background="${args.fixedBackground}"
@@ -240,6 +230,8 @@ const TemplateVideo = ({ ...args }) => {
     <br>
     <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
     <br>
+    <div style="background-color: #f5f5f5; border: 5px solid black; height: 400px; display: flex; align-items: center; justify-content: center; margin-top: 240px; margin-bottom: 240px;"><h2>This is another block</h2></div>
+    <br>
   `;
 };
 
@@ -247,7 +239,6 @@ export const Video = TemplateVideo.bind({});
 Video.args = {
   blockHeight : '100svh',
   videoSrc : 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-  parallaxScroll : false,
   fixedBackground : false,
   showOverlayLayer : true,
   blockHeading: "Maximize your e-commerce potential",

package/collection/components/media/pn-media-block/pn-media-block.css

@@ -169,7 +169,7 @@ pn-media-block .media-block .media-block__content-container .media-block__cta-li
   margin-top: 3rem;
 }
 pn-media-block .media-block--height-100svh {
-  height: 100vh;
+  min-height: 100vh;
 }
 @supports (height: 100svh) {
   pn-media-block .media-block--height-100svh {
@@ -201,7 +201,7 @@ pn-media-block .media-block--height-100svh .media-block__block-container .media-
   }
 }
 pn-media-block .media-block--height-65svh {
-  height: 65svh;
+  min-height: 65svh;
   overflow: auto;
 }
 pn-media-block .media-block--height-65svh .media-block__block-container {
@@ -280,4 +280,22 @@ pn-media-block .media-block--animate-overlay-background .media-block__overlay-fi
   100% {
     background-position: 100% 100%;
   }
+}
+pn-media-block .media-block--margin-bottom {
+  margin-bottom: 3.2rem;
+}
+@media screen and (min-width: 768px) {
+  pn-media-block .media-block--margin-bottom {
+    margin-bottom: 4rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-media-block .media-block--margin-bottom {
+    margin-bottom: 5.6rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-media-block .media-block--margin-bottom {
+    margin-bottom: 7.2rem;
+  }
 }

package/collection/components/media/pn-media-block/pn-media-block.js

@@ -1,22 +1,15 @@
 import { h } from "@stencil/core";
-function userPrefersReducedMotion() {
-  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
 export class PnmediaBlock {
   constructor() {
     this.handleScroll = () => {
-      if (!this.parallaxScroll)
-        return;
       const mediaBlockElement = this.block.firstElementChild;
       const scrollTrigger = this.block.querySelector('#scroll-trigger');
       const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video');
       const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;
       const mediaBlockElementHeight = mediaBlockElement.offsetHeight;
       const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;
-      const parallaxSpeedContent = 0.3;
       const parallaxSpeedMedia = 0.2;
       const mediaContainer = this.block.querySelector('.media-block__media-container');
-      const content = this.block.querySelector('.media-block__content-container');
       if (mediaContainer != null) {
         // Move the image or video at a slower speed
         mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;
@@ -25,25 +18,18 @@ export class PnmediaBlock {
           videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;
         }
       }
-      if (content) {
-        // Move the content at a faster speed
-        content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;
-        // Change the opacity based on the scroll position
-        const opacity = Math.max(0, 1 - scrollPosition / 600);
-        content.style.opacity = `${opacity}`;
-      }
     };
     this.blockHeight = null;
     this.imageSrc = null;
     this.imageSrcSmallScreenFormat = undefined;
     this.imageAltText = "";
     this.videoSrc = null;
-    this.parallaxScroll = false;
     this.showOverlayLayer = false;
     this.customOverlayBackground = null;
     this.animateOverlayBackground = false;
     this.scrollSnapBlock = false;
     this.fixedBackground = false;
+    this.marginBottom = false;
     this.blockHeading = null;
     this.blockHeadingLevel = 2;
     this.blockPreamble = null;
@@ -78,31 +64,12 @@ export class PnmediaBlock {
     this.hasButtonSlot = !!this.block.querySelector('[slot="cta-button"]');
   }
   async componentDidLoad() {
-    if (userPrefersReducedMotion()) {
-      // Handle the case where the user prefers reduced motion.
-      // For example, you might disable parallax scrolling:
-      this.parallaxScroll = false;
-    }
     const scrollTrigger = document.getElementById('scroll-trigger');
     this.calculatedBlockHeight = this.block.offsetHeight;
     const overlayElement = this.block.querySelector('#mediaBlockOverlay');
     if (this.customOverlayBackground != null || this.customOverlayBackground != "undefined") {
       overlayElement.style.background = `${this.customOverlayBackground}`;
     }
-    if (this.parallaxScroll) {
-      this.observerScroll = new IntersectionObserver(entries => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            window.addEventListener('scroll', this.handleScroll);
-          }
-          else {
-            window.removeEventListener('scroll', this.handleScroll);
-          }
-        });
-      }, { rootMargin: `0px 0px` });
-      this.observerScroll.observe(scrollTrigger);
-    }
-    ;
     if (this.scrollSnapBlock) {
       this.observerSnap = new IntersectionObserver(entries => {
         entries.forEach(entry => {
@@ -138,7 +105,7 @@ export class PnmediaBlock {
     window.removeEventListener('scroll', this.handleScroll);
   }
   render() {
-    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground } = this;
+    const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, blockHeadingLevelChecked, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;
     const HeadingTag = `h${blockHeadingLevelChecked !== null && blockHeadingLevelChecked !== void 0 ? blockHeadingLevelChecked : 2}`;
     const isVideo = hasVideo;
     const isImage = hasImage;
@@ -149,12 +116,12 @@ export class PnmediaBlock {
       animateOverlayBackground ? `media-block--animate-overlay-background` : '',
       isVideo ? 'media-block--video' : '',
       scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',
-      fixedBackground ? 'media-block--fixed-background' : ''
+      fixedBackground ? 'media-block--fixed-background' : '',
+      marginBottom ? 'media-block--margin-bottom' : ''
     ].join(' ');
     const pnPlayOnScrollObserverOptions = {
-      root: this.blockHeight === "100svh" ? document : null,
-      threshold: 1,
-      rootMargin: '220px 0px 220px 0px',
+      root: this.blockHeight === "100svh" ? this.block : null,
+      threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible
     };
     return (h("div", { class: classes }, h("div", { class: "media-block__block-container" }, h("div", { class: "media-block__media-container" }, isVideo ? (h("pn-play-on-scroll", { "show-overlay": this.showOverlayLayer, observerOptions: pnPlayOnScrollObserverOptions, "video-src": this.videoSrc })) : isImage ? (h("picture", null, h("source", { media: "(min-width: 1400px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1224px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1140px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1023px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 768px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 500px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("img", { src: this.imageSrcSmallScreenFormat !== "undefined" ? this.imageSrcSmallScreenFormat : this.imageSrc, alt: this.imageAltText !== "undefined" ? this.imageAltText : "", role: this.imageAltText !== "undefined" ? "img" : "presentation", "aria-hidden": this.imageAltText !== "undefined" ? "false" : "true" }))) : null), !isVideo && (h("div", { class: "media-block__overlay-filter", id: "mediaBlockOverlay" })), (this.blockHeading || this.blockPreamble) && (h("div", { class: "media-block__content-container" }, this.blockHeading && h(HeadingTag, { class: "media-block__block-heading" }, this.blockHeading), this.blockPreamble && h("p", { class: "media-block__preamble" }, this.blockPreamble), hasButtonSlot &&
       h("div", { class: "media-block__cta-link" }, h("slot", { name: "cta-button" }))))), h("div", { id: "scroll-trigger" })));
@@ -262,24 +229,6 @@ export class PnmediaBlock {
         "reflect": false,
         "defaultValue": "null"
       },
-      "parallaxScroll": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "parallax-scroll",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "showOverlayLayer": {
         "type": "boolean",
         "mutable": false,
@@ -370,6 +319,24 @@ export class PnmediaBlock {
         "reflect": false,
         "defaultValue": "false"
       },
+      "marginBottom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "margin-bottom",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "blockHeading": {
         "type": "string",
         "mutable": false,

package/collection/components/widgets/pn-hero-block-international/assets/logo-international.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 919 336"><defs><style>.cls-1{fill:#083a67;}.cls-1,.cls-2,.cls-3{stroke-width:0px;}.cls-2{fill:#00a0d6;}.cls-3{fill:#fff;}</style></defs><circle class="cls-1" cx="168" cy="168" r="168"/><circle class="cls-1" cx="519" cy="168" r="168"/><rect class="cls-1" x="510" width="409" height="336"/><path class="cls-3" d="M235.51,155.55c0,11.19-9.19,15.88-17.84,15.88s-17.46-4.58-17.46-15.4,9.02-15.88,17.84-15.88c8.6,0,17.46,4.63,17.46,15.4ZM223.86,155.88c0-3.68-2.42-6.18-6.02-6.18s-6.07,2.5-6.07,6.18c0,3.46,2.48,6.02,6.07,6.02s6.02-2.56,6.02-6.02ZM76.33,155.88c0,8.53-5.91,15.56-15.1,15.56-5.64,0-8.27-2.77-8.27-2.77v10.34h-10.96v-37.89h10.96v2.88s2.85-3.84,9.08-3.84c9.13,0,14.29,6.98,14.29,15.72ZM64.73,155.88c0-3.68-2.42-6.18-6.02-6.18s-6.07,2.5-6.07,6.18c0,3.46,2.47,6.02,6.07,6.02s6.02-2.56,6.02-6.02ZM249.08,156.35c0-4.47,2.74-5.86,6.4-5.86,2.25,0,3.71.53,3.71.53l.27-10.02s-.7-.32-2.58-.32c-6.12,0-7.79,3.84-7.79,3.84v-3.41h-10.96v29.42h10.96v-14.18h0ZM294,132v38.53h-10.96v-2.88s-2.85,3.84-9.08,3.84c-9.13,0-14.29-6.98-14.29-15.72s5.91-15.56,15.1-15.56c5.64,0,8.27,2.77,8.27,2.77v-8.85l10.96-2.13ZM283.36,155.77c0-3.47-2.47-6.02-6.07-6.02s-6.02,2.56-6.02,6.02c0,3.67,2.42,6.18,6.02,6.18s6.07-2.51,6.07-6.18ZM186.65,140.15c-6.39,0-8.71,3.84-8.71,3.84v-2.88h-10.96v29.42h10.96v-15.08c0-3.73,1.4-5.44,4.78-5.44s3.87,2.77,3.87,6.29v14.23h11.07v-18.07c0-8.1-3.92-12.31-11.01-12.31ZM155.91,134.5h-10.96v36.03h10.96v-20.25h5.16l5-9.17h-10.16v-6.61h0ZM131.36,151.77c-3.55-.53-5.11-.53-5.11-1.92,0-1.17,1.45-1.65,4.3-1.65,4.83,0,9.08,1.6,9.08,1.6l1.93-8.26s-4.67-1.33-10.91-1.33c-10.48,0-15.96,4-15.96,10.39,0,4.96,2.96,7.89,11.61,9,3.65.48,5,.69,5,2.03s-1.45,1.7-3.98,1.7c-5.48,0-10.64-2.29-10.64-2.29l-2.2,8.53s5.16,1.81,11.88,1.81c11.28,0,16.49-3.95,16.49-10.39,0-5.11-2.79-7.88-11.49-9.22ZM113.46,155.55c0,11.19-9.19,15.88-17.84,15.88s-17.46-4.58-17.46-15.4,9.03-15.88,17.84-15.88c8.6,0,17.46,4.63,17.46,15.4ZM101.8,155.88c0-3.68-2.42-6.18-6.02-6.18s-6.07,2.5-6.07,6.18c0,3.46,2.47,6.02,6.07,6.02s6.02-2.56,6.02-6.02Z"/><path class="cls-2" d="M167,197.67v-15.01h2.71v15.01h-2.71ZM182.27,190.65c0-2.41-1.92-4.08-4.24-4.08-1.46,0-2.6.59-3.29,1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52,1.04-2.58,2.51-2.58s2.38,1.02,2.38,2.54v6.24h2.47v-7.02ZM190.27,186.85h-2.8v-3.62h-2.47v10.99c0,2.01,1.43,3.44,3.46,3.44h1.81v-2.29h-1.32c-.9,0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1ZM202.2,193.05c0-.15.04-.71.04-.97,0-3.31-2.25-5.56-5.49-5.56s-5.56,2.56-5.56,5.74,2.49,5.74,5.73,5.74c2.12,0,3.86-.84,4.98-2.58l-2.05-1.1c-.6.88-1.52,1.48-2.93,1.48-1.68,0-3-1.04-3.33-2.74h8.6M193.66,191.12c.37-1.48,1.52-2.47,3.07-2.47,1.7,0,2.78.95,3.09,2.47h-6.16ZM209.69,186.86c-1.61,0-2.62.84-3.09,1.83v-1.83h-2.32v10.81h2.47v-5.25c0-1.68,1.1-3,2.71-3h1.08v-2.56h-.86ZM222.24,190.65c0-2.41-1.92-4.08-4.23-4.08-1.46,0-2.6.59-3.29,1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52,1.04-2.58,2.51-2.58s2.38,1.02,2.38,2.54v6.24h2.47v-7.02ZM233.3,188.38c-.75-1.13-2.14-1.81-3.7-1.81-3.15,0-5.34,2.47-5.34,5.67s2.18,5.67,5.34,5.67c1.56,0,2.95-.68,3.7-1.83v1.59h2.32v-10.81h-2.32v1.52ZM233.3,192.24c0,1.87-1.32,3.35-3.29,3.35s-3.27-1.48-3.27-3.35,1.3-3.38,3.27-3.38,3.29,1.5,3.29,3.38ZM243.61,186.85h-2.8v-3.62h-2.47v10.99c0,2.01,1.43,3.44,3.46,3.44h1.81v-2.29h-1.32c-.91,0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1ZM245.45,183.63c0,.84.68,1.52,1.54,1.52s1.57-.68,1.57-1.52-.71-1.5-1.57-1.5-1.54.69-1.54,1.5ZM248.23,197.67v-10.81h-2.47v10.81h2.47ZM250.35,192.26c0,3.18,2.49,5.74,5.78,5.74s5.76-2.56,5.76-5.74-2.49-5.74-5.76-5.74-5.78,2.54-5.78,5.74ZM259.41,192.26c0,1.88-1.39,3.38-3.29,3.38s-3.29-1.5-3.29-3.38,1.37-3.38,3.29-3.38,3.29,1.48,3.29,3.38ZM273.82,190.65c0-2.41-1.92-4.08-4.23-4.08-1.46,0-2.6.59-3.29,1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52,1.04-2.58,2.52-2.58s2.38,1.02,2.38,2.54v6.24h2.47v-7.02ZM284.88,188.38c-.75-1.13-2.14-1.81-3.7-1.81-3.15,0-5.34,2.47-5.34,5.67s2.18,5.67,5.34,5.67c1.57,0,2.95-.68,3.7-1.83v1.59h2.32v-10.81h-2.32v1.52ZM284.88,192.24c0,1.87-1.32,3.35-3.29,3.35s-3.26-1.48-3.26-3.35,1.3-3.38,3.26-3.38,3.29,1.5,3.29,3.38ZM294,195.44h-.46c-.77,0-1.15-.4-1.15-1.17v-12.27h-2.47v12.69c0,1.81,1.23,2.98,3.13,2.98h.95v-2.23Z"/></svg>

package/collection/components/widgets/pn-hero-block-international/hero-block-international.stories.js

@@ -0,0 +1,88 @@
+import readme from './readme.md';
+
+export default {
+  title: 'widgets/Hero Block International',
+  parameters: {
+    notes: readme,
+  },
+  argTypes: {
+    heading: { control: 'text' },
+    subHeading: { control: 'text' },
+    preamble: { control: 'text' },
+    animateLogo: { control: 'boolean' },
+    showSideLoader: { control: 'boolean' },
+    centeredLayout: { control: 'boolean' },
+    ctaLabel: { control: 'text' },
+    ctaUrl: { control: 'text' },
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+    <pn-hero-block-international heading="${args.heading}" sub-heading="${args.subHeading}" preamble="${args.preamble}" animate-logo="${args.animateLogo}" show-side-loader="${args.showSideLoader}" centered-layout="${args.centeredLayout}">
+      <pn-button
+        icon='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M19.707 11.293a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L16.586 13H8a1 1 0 1 1 0-2h8.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6ZM5.01 13H5a1 1 0 1 1 0-2h.01a1 1 0 1 1 0 2Z" clip-rule="evenodd"/></svg>'
+        slot="hero-international-cta" href="${args.ctaUrl}">${args.ctaLabel}</pn-button>
+    </pn-hero-block-international>
+  `;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  heading: 'Nordic Deliveries',
+  subHeading: '100% coverage of the Nordic market',
+  preamble: 'No one can beat us on our home turf.',
+  ctaLabel: 'Request a quote',
+  ctaUrl: 'https://www.google.com/',
+  animateLogo: false,
+  showSideLoader: false,
+  centeredLayout: false
+};
+
+export const WithAnimatedLogo = Template.bind({});
+WithAnimatedLogo.args = {
+  heading: 'Nordic Deliveries',
+  subHeading: '100% coverage of the Nordic market',
+  preamble: 'No one can beat us on our home turf.',
+  ctaLabel: 'Request a quote',
+  ctaUrl: 'https://www.google.com/',
+  animateLogo: true,
+  showSideLoader: false,
+  centeredLayout: false
+};
+
+export const WithSideloader = Template.bind({});
+WithSideloader.args = {
+  heading: 'Nordic Deliveries',
+  subHeading: '100% coverage of the Nordic market',
+  preamble: 'No one can beat us on our home turf.',
+  ctaLabel: 'Request a quote',
+  ctaUrl: 'https://www.google.com/',
+  animateLogo: false,
+  showSideLoader: true,
+  centeredLayout: false
+};
+
+export const WithAnimatedLogoAndSideloader = Template.bind({});
+WithAnimatedLogoAndSideloader.args = {
+  heading: 'Nordic Deliveries',
+  subHeading: '100% coverage of the Nordic market',
+  preamble: 'No one can beat us on our home turf.',
+  ctaLabel: 'Request a quote',
+  ctaUrl: 'https://www.google.com/',
+  animateLogo: true,
+  showSideLoader: true,
+  centeredLayout: false
+};
+
+export const CenteredLayout = Template.bind({});
+CenteredLayout.args = {
+  heading: 'Nordic Deliveries',
+  subHeading: '100% coverage of the Nordic market',
+  preamble: 'No one can beat us on our home turf.',
+  ctaLabel: 'Request a quote',
+  ctaUrl: 'https://www.google.com/',
+  animateLogo: false,
+  showSideLoader: false,
+  centeredLayout: true,
+};