@postnord/pn-marketweb-components 2.9.0 → 2.9.2

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-usp-promoter/pn-usp-promoter.css

@@ -18,6 +18,8 @@ pn-usp-promoter .usp-promoter--full-width {
 pn-usp-promoter .usp-promoter__content {
   display: flex;
   flex-direction: row;
+  width: 100%;
+  max-width: 114rem;
 }
 @media screen and (min-width: 768px) {
   pn-usp-promoter .usp-promoter__content {
@@ -29,6 +31,8 @@ pn-usp-promoter .usp-promoter__content {
 pn-usp-promoter .usp-promoter__content-wrapper {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  max-width: 75rem;
 }
 @media screen and (min-width: 768px) {
   pn-usp-promoter .usp-promoter__content-wrapper {
@@ -42,26 +46,31 @@ pn-usp-promoter .usp-promoter__content-heading {
 @media screen and (min-width: 768px) {
   pn-usp-promoter .usp-promoter__content-heading {
     font-size: 4.2rem;
-    max-width: 45rem;
   }
 }
 @media screen and (min-width: 1140px) {
   pn-usp-promoter .usp-promoter__content-heading {
     font-size: 4.8rem;
-    max-width: 50rem;
   }
 }
 @media screen and (min-width: 1440px) {
   pn-usp-promoter .usp-promoter__content-heading {
     font-size: 5.6rem;
-    max-width: 58rem;
   }
 }
+pn-usp-promoter .usp-promoter__no-margin-bottom {
+  margin-bottom: 0 !important;
+}
 pn-usp-promoter .usp-promoter__content-text {
   font-size: 1.6rem;
   max-width: 47rem;
   margin-bottom: 2.6rem;
 }
+@media screen and (min-width: 768px) {
+  pn-usp-promoter .usp-promoter__content-text {
+    text-wrap: balance;
+  }
+}
 @media screen and (min-width: 1140px) {
   pn-usp-promoter .usp-promoter__content-text {
     font-size: 1.8rem;

package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.js

@@ -14,12 +14,17 @@ export class PnUspPromoter {
     if (this.hideMobileImage || slot == null) {
       return "usp-promoter--hide-image-small-screen";
     }
+    return "";
   }
   render() {
-    const isFullWidth = this.fullWidth ? "usp-promoter--full-width" : "";
-    const isRightAlign = this.rightAlign ? "usp-promoter--right-align" : "";
+    const { fullWidth, rightAlign } = this;
+    const classes = [
+      'usp-promoter',
+      fullWidth ? "usp-promoter--full-width" : "",
+      rightAlign ? "usp-promoter--right-align" : "",
+    ].join(' ');
     const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
-    return (h(Host, null, h("div", { class: `usp-promoter ${isFullWidth} ${isRightAlign} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { class: "usp-promoter__content" }, h("slot", { name: "illustration" }), h("div", { class: "usp-promoter__content-wrapper" }, h("h2", { class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", null, this.heading), (this.headingExtension) ? h("span", null, this.headingExtension) : null), h("p", { class: "usp-promoter__content-text" }, this.bodyText), h("slot", { name: "app-store" }), h("slot", { name: "usp-buttons" }))))));
+    return (h(Host, null, h("div", { class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { class: "usp-promoter__content" }, h("slot", { name: "illustration" }), h("div", { class: "usp-promoter__content-wrapper" }, h("h2", { class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", null, this.heading), (this.headingExtension) ? h("span", null, this.headingExtension) : null), h("p", { class: "usp-promoter__content-text" }, this.bodyText), h("slot", { name: "app-store" }), h("slot", { name: "usp-buttons" }))))));
   }
   static get is() { return "pn-usp-promoter"; }
   static get originalStyleUrls() {

package/collection/components/widgets/pn-usp-promoter/usp-promoter.stories.js

@@ -1,10 +1,11 @@
 import readme from "./readme.md";
+import { imageUrls, appImages} from "../../../globals/storybookGlobals";
 
 export default {
   title: "widgets/Usp Promoter",
   parameters: {
     notes: readme
-  }
+  },
 };
 
 const Template = ({ ...args }) => {
@@ -20,10 +21,10 @@ const Template = ({ ...args }) => {
       hide-mobile-image="${args.hideMobileImage}">
       <div slot="app-store">
         <a href="http://www.apple.com">
-          <img src="https://se-integration.postnord.com/globalassets/images/other/appstore-transparent.svg">
+          <img src="${appImages.postnordAppStore}">
         </a>
         <a href="http://www.google.com">
-          <img src="https://se-integration.postnord.com/globalassets/images/other/googleplay-transparent.svg">
+          <img src="${appImages.postnordGooglePlay}">
         </a>
       </div>
       <div slot="usp-buttons">
@@ -33,7 +34,7 @@ const Template = ({ ...args }) => {
         <pn-scroll>
           <div slot="scroll-affected">
             <picture>
-              <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+              <img src="${imageUrls.mobileIllustration}" /> 
             </picture>
           </div>
         </pn-scroll>
@@ -41,7 +42,7 @@ const Template = ({ ...args }) => {
       <pn-scroll>
         <div slot="scroll-affected">
           <picture>
-            <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+            <img src="${imageUrls.mobileIllustration}" /> 
           </picture>
         </div>
       </pn-scroll>
@@ -60,7 +61,6 @@ Primary.args = {
   backgroundGradient: "linear-gradient(90deg, #FFF 47.46%, #EFFBFF 70.86%)",
   fullWidth: true,
   rightAlign: true,
-  hideMobileImage: false,
 };
 
 const WithImageTemplate = ({ ...args }) => {
@@ -75,10 +75,10 @@ const WithImageTemplate = ({ ...args }) => {
     hide-mobile-image="${args.hideMobileImage}">
     <div slot="app-store">
       <a href="http://www.apple.com">
-        <img src="https://se-integration.postnord.com/globalassets/images/other/appstore-transparent.svg">
+        <img src="${appImages.postnordAppStore}">
       </a>
       <a href="http://www.google.com">
-        <img src="https://se-integration.postnord.com/globalassets/images/other/googleplay-transparent.svg">
+        <img src="${appImages.postnordGooglePlay}">
       </a>
     </div>
     <div slot="usp-buttons">
@@ -88,7 +88,7 @@ const WithImageTemplate = ({ ...args }) => {
       <pn-scroll>
         <div slot="scroll-affected">
           <picture>
-            <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+            <img src="${imageUrls.mobileIllustration}" /> 
           </picture>
         </div>
       </pn-scroll>
@@ -96,7 +96,7 @@ const WithImageTemplate = ({ ...args }) => {
     <pn-scroll>
       <div slot="scroll-affected">
         <picture>
-          <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+          <img src="${imageUrls.mobileIllustration}" /> 
         </picture>
       </div>
     </pn-scroll>
@@ -130,10 +130,10 @@ const NoImageTemplate = ({ ...args }) => {
       hide-mobile-image="${args.hideMobileImage}">
       <div slot="app-store">
         <a href="http://www.apple.com">
-          <img src="https://se-integration.postnord.com/globalassets/images/other/appstore-transparent.svg">
+          <img src="${appImages.postnordAppStore}">
         </a>
         <a href="http://www.google.com">
-          <img src="https://se-integration.postnord.com/globalassets/images/other/googleplay-transparent.svg">
+          <img src="${appImages.postnordGooglePlay}">
         </a>
       </div>
       <div slot="usp-buttons">
@@ -142,7 +142,7 @@ const NoImageTemplate = ({ ...args }) => {
       <pn-scroll>
         <div slot="scroll-affected">
           <picture>
-            <img src="https://se-preproduction.postnord.com/globalassets/illustrations/mobilephone.png" /> 
+            <img src="${imageUrls.mobileIllustration}" /> 
           </picture>
         </div>
       </pn-scroll>

package/collection/globals/storybookGlobals.js

@@ -0,0 +1,10 @@
+export const imageSvgs = {
+  success: 'https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg'
+};
+export const imageUrls = {
+  mobileIllustration: 'https://se-prep.postnord.com/siteassets/images-new/app-images/track-swe.webp',
+};
+export const appImages = {
+  postnordAppStore: 'https://se-prep.postnord.com/siteassets/startpage-blocks/AppStore-transparent.svg',
+  postnordGooglePlay: 'https://se-prep.postnord.com/siteassets/startpage-blocks/googleplay-transparent.svg',
+};

package/components/pn-cta-block.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnCtaBlockCss = "pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{margin-right:auto;margin-left:auto;max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#EFFBFF}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#FDEFEE}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#F9F8F8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#EDFBF3}pn-cta-block .cta-block--content-top .cta-block__content{-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{margin-right:auto;margin-left:auto;width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{max-width:75%}}pn-cta-block .cta-block--center{-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:1.6rem;padding:3.2rem 2.4rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{gap:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{-ms-flex-direction:row;flex-direction:row;gap:2.4rem;margin-top:1.6rem}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-button]{-ms-flex-direction:row;flex-direction:row;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:-ms-flexbox;display:flex}pn-cta-block .cta-block__action>[slot=cta-button]{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;row-gap:1.6rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-button]{gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-button]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-button]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-button]>a pn-icon svg path{fill:#005D92}pn-cta-block .cta-block__action>[slot=cta-button]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-button]>a:hover pn-icon svg path{fill:#005D92}";
+const pnCtaBlockCss = "pn-cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}pn-cta-block .cta-block{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:column;flex-direction:column;border-radius:2.4rem;padding:3.2rem 2.4rem;width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block{-ms-flex-direction:row;flex-direction:row;padding:2.4rem}}@media screen and (min-width: 1140px){pn-cta-block .cta-block{max-width:95%}}@media screen and (min-width: 1440px){pn-cta-block .cta-block{max-width:90%}}pn-cta-block .cta-block[pn-background-color=blue25]{background-color:#EFFBFF}pn-cta-block .cta-block[pn-background-color=coral50]{background-color:#FDEFEE}pn-cta-block .cta-block[pn-background-color=gray25]{background-color:#F9F8F8}pn-cta-block .cta-block[pn-background-color=green25]{background-color:#EDFBF3}pn-cta-block .cta-block[pn-background-color=transparent]{padding:0 3.2rem}pn-cta-block .cta-block--content-top .cta-block__content{-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__heading{font-size:3.6rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--large .cta-block__text{font-size:2rem}}pn-cta-block .cta-block--small{width:auto}@media screen and (min-width: 992px){pn-cta-block .cta-block--small{display:-ms-inline-flexbox;display:inline-flex;max-width:75%}pn-cta-block .cta-block--small.cta-block--center{max-width:66%}}pn-cta-block .cta-block--center{-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;gap:1.6rem;text-align:center}@media screen and (min-width: 768px){pn-cta-block .cta-block--center{gap:2.4rem;padding:3.2rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__content{max-width:74rem;padding:0}}pn-cta-block .cta-block--center .cta-block__action{margin-top:0.8rem}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__action{-ms-flex-direction:row;flex-direction:row;gap:2.4rem;margin-top:0}pn-cta-block .cta-block--center .cta-block__action.cta-block__button{margin-bottom:0}pn-cta-block .cta-block--center .cta-block__action>[slot=cta-buttons]{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;gap:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block--center .cta-block__image-wrapper{display:block}}pn-cta-block .cta-block--center .cta-block__image-wrapper>[slot=illustration]{padding-right:0}pn-cta-block .cta-block--center .cta-block__text{margin-bottom:0 !important}pn-cta-block .cta-block__image-wrapper{margin-bottom:1.6rem}pn-cta-block .cta-block__image-wrapper>[slot=illustration]>picture>img{border-radius:0.8rem;max-width:100%}@media screen and (min-width: 768px){pn-cta-block .cta-block__image-wrapper{display:none;max-width:20%}}@media screen and (min-width: 992px){pn-cta-block .cta-block__image-wrapper{display:block;margin-bottom:0}pn-cta-block .cta-block__image-wrapper>[slot=illustration]{padding-right:3.2rem}}pn-cta-block .cta-block__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 768px){pn-cta-block .cta-block__content{padding-right:2.4rem}}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__heading,pn-cta-block .cta-block__content .cta-block__text{max-width:74rem}}pn-cta-block .cta-block__content .cta-block__text{margin-bottom:2.4rem}@media screen and (min-width: 768px){pn-cta-block .cta-block__content .cta-block__text{margin-bottom:0}}pn-cta-block .cta-block__heading{margin-bottom:0.8rem}pn-cta-block .cta-block__action{display:-ms-flexbox;display:flex}pn-cta-block .cta-block__action>[slot=cta-buttons]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:1.6rem;-ms-flex:1;flex:1}@media screen and (min-width: 768px){pn-cta-block .cta-block__action>[slot=cta-buttons]{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;gap:1.6rem;margin-top:0}}pn-cta-block .cta-block__action>[slot=cta-buttons]>a{color:#005D92;font-weight:500;font-size:1.6rem;padding:0.1rem;text-decoration:none}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out}pn-cta-block .cta-block__action>[slot=cta-buttons]>a pn-icon svg path{fill:#005D92}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg{-webkit-transition:-webkit-transform 0.3s ease-in-out;transition:-webkit-transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out;transition:transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;-webkit-transform:translateX(0.3rem);transform:translateX(0.3rem)}pn-cta-block .cta-block__action>[slot=cta-buttons]>a:hover pn-icon svg path{fill:#005D92}";
 
 const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -15,7 +15,12 @@ const PnCtaBlock$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.contentTop = false;
   }
   render() {
-    return (h(Host, null, h("div", { "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })), h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)), h("div", { class: "cta-block__action" }, h("slot", { name: "cta-button" })))));
+    const hasImage = this.hostElement.querySelector('[slot="illustration"]');
+    const hasButtons = this.hostElement.querySelector('[slot="cta-buttons"]');
+    return (h(Host, null, h("div", { "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, (hasImage ?
+      h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })) : null), (this.heading && this.bodyText) ?
+      h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)) : null, (hasButtons ?
+      h("div", { class: "cta-block__action" }, h("slot", { name: "cta-buttons" })) : null))));
   }
   get hostElement() { return this; }
   static get style() { return pnCtaBlockCss; }