@postnord/pn-marketweb-components 2.8.4 → 2.8.5

package/collection/components/animation/pn-play-on-scroll/pn-play-on-scroll.css

@@ -7,15 +7,4 @@ pn-play-on-scroll pn-scroll [slot=scroll-affected] video {
 }
 pn-play-on-scroll pn-scroll [slot=scroll-affected] video:hover {
   cursor: pointer;
-}
-pn-play-on-scroll pn-scroll [slot=scroll-affected] pn-video-overlay {
-  position: absolute;
-  bottom: 8px;
-  left: 8px;
-}
-@media screen and (min-width: 768px) {
-  pn-play-on-scroll pn-scroll [slot=scroll-affected] pn-video-overlay {
-    bottom: 16px;
-    left: 16px;
-  }
 }

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

@@ -3,6 +3,11 @@ import { h, Host } from '@stencil/core';
 /*
     play content when scoll observer sees content as inview
 */
+const defaultObserverOptions = {
+  root: null,
+  threshold: 0,
+  rootMargin: '0px 0px 0px 0px',
+};
 const onIntersecting = (video, isManualPaused, togglePaused) => {
   //what to do when intersecting, eg video.play()
   if (!isManualPaused) {
@@ -15,11 +20,6 @@ const onNotIntersecting = (video, togglePaused) => {
   video && video.pause();
   togglePaused(true);
 };
-const observerOptions = {
-  root: null,
-  threshold: 1,
-  rootMargin: '0px 0px 0px 0px',
-};
 export class PnPlayOnScroll {
   constructor() {
     this.testAdditionalParamIntoCallback = true;
@@ -39,6 +39,8 @@ export class PnPlayOnScroll {
       this.isPaused = paused;
     };
     this.videoSrc = '';
+    this.observerOptions = defaultObserverOptions;
+    this.showOverlay = false;
     this.videoId = '';
     this.isManuallyPaused = false;
     this.isPaused = false;
@@ -54,7 +56,7 @@ export class PnPlayOnScroll {
     this.video.addEventListener('click', this.handlePlayPauseClicked);
   }
   render() {
-    return (h(Host, null, h("pn-scroll", { intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: observerOptions }, h("div", { slot: "scroll-affected" }, h("video", { muted: true, autoPlay: true, id: `${this.videoId}` }, h("source", { src: this.videoSrc, type: "video/mp4" })), h("pn-video-overlay", { isPaused: this.isManuallyPaused || this.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
+    return (h(Host, null, h("pn-scroll", { intersectFunc: () => onIntersecting(this.video, this.isManuallyPaused, this.togglePaused), notIntersectFunc: () => onNotIntersecting(this.video, this.togglePaused), shouldLoop: true, behaviourClasses: 'some-behaviour-class', observerOptions: this.observerOptions }, h("div", { slot: "scroll-affected" }, h("video", { muted: true, autoPlay: true, id: `${this.videoId}` }, h("source", { src: this.videoSrc, type: "video/mp4" })), h("pn-video-overlay", { showOverlay: this.showOverlay, isPaused: this.isManuallyPaused || this.isPaused, onPlayPauseClicked: this.handlePlayPauseClicked })))));
   }
   static get is() { return "pn-play-on-scroll"; }
   static get originalStyleUrls() {
@@ -86,6 +88,44 @@ export class PnPlayOnScroll {
         "attribute": "video-src",
         "reflect": false,
         "defaultValue": "''"
+      },
+      "observerOptions": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IntersectionObserverInit",
+          "resolved": "IntersectionObserverInit",
+          "references": {
+            "IntersectionObserverInit": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "defaultObserverOptions"
+      },
+      "showOverlay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-overlay",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/collection/components/animation/pn-play-on-scroll/pn-video-overlay/pn-video-overlay.css

@@ -1,4 +1,13 @@
+pn-video-overlay.pn-video-overlay--show-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);
+}
 pn-video-overlay button {
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -9,6 +18,12 @@ pn-video-overlay button {
   cursor: pointer;
   background-color: transparent;
 }
+@media screen and (min-width: 768px) {
+  pn-video-overlay button {
+    bottom: 16px;
+    left: 16px;
+  }
+}
 pn-video-overlay button:hover svg rect {
   fill: #003d5f;
 }

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

@@ -13,6 +13,7 @@ export class PnVideoOverlay {
     };
     this.language = 'en';
     this.isPaused = false;
+    this.showOverlay = false;
     this.i18n = undefined;
   }
   componentWillLoad() {
@@ -30,7 +31,7 @@ export class PnVideoOverlay {
     this.setTranslations();
   }
   render() {
-    return (h(Host, null, h("button", { "aria-label": `${this.i18n.ariaLabel}`, onClick: this.handlePlayPauseClicked }, this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon())));
+    return (h(Host, { class: `pn-video-overlay ${this.showOverlay ? 'pn-video-overlay--show-overlay' : ''}` }, h("button", { type: "button", id: "overlayed-button-pause-video", "aria-label": `${this.i18n.ariaLabel}`, onClick: this.handlePlayPauseClicked }, this.isPaused ? this.renderPlayIcon() : this.renderPauseIcon())));
   }
   static get is() { return "pn-video-overlay"; }
   static get originalStyleUrls() {
@@ -80,6 +81,24 @@ export class PnVideoOverlay {
         "attribute": "is-paused",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "showOverlay": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-overlay",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -108,6 +108,10 @@ pn-teaser-card[data-card-color=blue] > .pn-teaser-card__container {
   background-color: #EFFBFF;
 }
 
+pn-teaser-card[data-card-color=blue50] > .pn-teaser-card__container {
+  background-color: #E0F8FF;
+}
+
 pn-teaser-card[data-card-color=blue400] > .pn-teaser-card__container {
   background-color: #00A0D6;
 }

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

@@ -0,0 +1,258 @@
+import readme from "./readme.md";
+
+export default {
+  title: "media/Media Block",
+  parameters: {
+    notes: readme
+  },
+  argTypes: {
+    blockHeight: {
+      options: ['100svh', '65svh', 'dynamic'],
+      control: { type: 'select' },
+    },
+      imageSrc: { type: 'string' },
+      imageSrcSmallScreenFormat: { type: 'string' },
+      imageAltText: { type: 'string' },
+      videoSrc: { type: 'string' },
+      parallaxScroll: { type: 'boolean' },
+      showOverlayLayer: { type: 'boolean' },
+      customOverlayBackground: { type: 'string' },
+      animateOverlayBackground: { type: 'boolean' },
+      fixedBackground: { type: 'boolean' },
+      scrollSnapBlock: { type: 'boolean' },
+      blockHeading: { type: 'string' },
+      blockHeadingLevel: {
+        options: [2, 3, 4, 5],
+        control: { type: 'select' },
+      },
+      blockPreamble: { control: 'text', type: 'string' },
+      blockLinkText: { type: 'string' },
+      blockLinkUrl: { type: 'string' },
+    }
+};
+
+const Template = ({ ...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>
+    <pn-media-block block-height="${args.blockHeight}"
+      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}"
+      block-heading="${args.blockHeading}"
+      block-heading-level="${args.blockHeadingLevel}"
+      block-preamble="${args.blockPreamble}">
+    </pn-media-block>
+    <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>
+  `;
+};
+
+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,
+  blockHeadingLevel: 2,
+  blockHeading: "Maximize your e-commerce potential",
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+};
+
+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,
+  blockHeading: "Maximize your e-commerce potential",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+};
+
+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,
+  blockHeading: "Maximize your e-commerce potential",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey.",
+};
+
+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,
+  blockHeading: "Maximize your e-commerce potential and go Beyond your limits  and go Beyond your limits  and go Beyond your limits",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.",
+};
+
+export const MultipleSrc = Template.bind({});
+MultipleSrc.args = {
+  blockHeight : '100svh',
+  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,
+  blockHeading: "Maximize your e-commerce potential",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+};
+
+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,
+  blockHeading: "Maximize your e-commerce potential",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+};
+
+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,
+  blockHeading: "Maximize your e-commerce potential",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+};
+
+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,
+  fixedBackground : true,
+  blockHeading: "Maximize your e-commerce potential",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+};
+
+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,
+  scrollSnapBlock : true,
+  fixedBackground : true,
+  blockHeading: "Maximize your e-commerce potential",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+};
+
+const TemplateWithLink = ({ ...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>
+    <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}"
+      block-heading="${args.blockHeading}"
+      block-heading-level="${args.blockHeadingLevel}"
+      block-preamble="${args.blockPreamble}"
+      block-link-text="${args.blockLinkText}"
+      block-link-url="${args.blockLinkUrl}">
+      <div slot="cta-button">
+        <pn-button
+          appearance="light"
+          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>'
+          type="button"
+          class="cta-block__button " href=${args.blockLinkUrl}>${args.blockLinkText}</pn-button>
+      </div>
+    </pn-media-block>
+    <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>
+  `;
+};
+
+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",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+  blockLinkText: "Request a quote",
+  blockLinkUrl: "#google",
+};
+
+
+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>
+    <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}"
+      block-heading="${args.blockHeading}"
+      block-heading-level="${args.blockHeadingLevel}"
+      block-preamble="${args.blockPreamble}">
+    </pn-media-block>
+    <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>
+  `;
+};
+
+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",
+  blockHeadingLevel: 2,
+  blockPreamble: "Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.",
+};