@postnord/pn-marketweb-components 2.8.2 → 2.8.5

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.",
+};

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

@@ -0,0 +1,283 @@
+pn-media-block .media-block .media-block__block-container {
+  display: grid;
+  overflow: hidden;
+}
+pn-media-block .media-block .media-block__media-container, pn-media-block .media-block .media-block__content-container, pn-media-block .media-block .media-block__overlay-filter {
+  grid-area: 1/1;
+  width: 100%;
+  position: relative;
+}
+pn-media-block .media-block .media-block__media-container {
+  height: 100vh;
+  overflow: hidden;
+  position: relative;
+}
+pn-media-block .media-block .media-block__media-container img, pn-media-block .media-block .media-block__media-container video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  object-fit: cover;
+  pointer-events: none;
+  max-width: 100%;
+  max-height: none;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+}
+pn-media-block .media-block .media-block__media-container pn-play-on-scroll {
+  width: 100%;
+  height: 100%;
+}
+pn-media-block .media-block .media-block__media-container .scroll-wrapper {
+  width: 100%;
+  height: 100%;
+}
+pn-media-block .media-block .media-block__media-container [slot=scroll-affected] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+pn-media-block .media-block .media-block__media-container .scroll-wrapper, pn-media-block .media-block .media-block__media-container .scroll-affected {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+pn-media-block .media-block .media-block__media-container video {
+  width: 100%;
+  height: 100%;
+}
+pn-media-block .media-block .media-block__overlay-filter {
+  z-index: 2;
+}
+pn-media-block .media-block .media-block__content-container {
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 1s;
+  flex-direction: column;
+  margin: 0 auto;
+  padding: 3.4rem 0;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (min-width: 576px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 1140px;
+  }
+}
+@media (min-width: 1640px) {
+  pn-media-block .media-block .media-block__content-container {
+    max-width: 1440px;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-media-block .media-block .media-block__content-container {
+    padding: 6.4rem 0;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-media-block .media-block .media-block__content-container {
+    padding: 7.2rem 0;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-media-block .media-block .media-block__content-container {
+    padding: 8rem 0;
+  }
+}
+pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+  max-width: 100rem;
+  text-wrap: balance;
+  color: white;
+  font-size: 3.2rem;
+  text-align: center;
+  font-weight: 700;
+  line-height: 1.1;
+  margin-bottom: 3rem;
+}
+@media screen and (min-width: 576px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 4rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 4.8rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 5.6rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 8rem;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-media-block .media-block .media-block__content-container .media-block__block-heading {
+    font-size: 8.8rem;
+  }
+}
+pn-media-block .media-block .media-block__content-container .media-block__preamble {
+  max-width: 80rem;
+  max-width: 80ch;
+  text-wrap: balance;
+  display: flex;
+  color: white;
+  font-size: 1.8rem;
+  text-align: center;
+  font-weight: 300;
+}
+@media screen and (min-width: 576px) {
+  pn-media-block .media-block .media-block__content-container .media-block__preamble {
+    font-size: 2rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-media-block .media-block .media-block__content-container .media-block__preamble {
+    font-size: 2.4rem;
+  }
+}
+@media screen and (min-width: 1640px) {
+  pn-media-block .media-block .media-block__content-container .media-block__preamble {
+    font-weight: 500;
+  }
+}
+pn-media-block .media-block .media-block__content-container .media-block__cta-link {
+  margin-top: 3rem;
+}
+pn-media-block .media-block--height-100svh {
+  height: 100vh;
+}
+@supports (height: 100svh) {
+  pn-media-block .media-block--height-100svh {
+    height: 100svh;
+  }
+}
+pn-media-block .media-block--height-100svh .media-block__block-container {
+  height: 100vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-100svh .media-block__block-container {
+    max-height: 100svh;
+  }
+}
+pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter {
+  height: 100vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-100svh .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-100svh .media-block__block-container .media-block__overlay-filter {
+    max-height: 100svh;
+  }
+}
+pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture {
+  height: 100vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-100svh .media-block__block-container .media-block__media-container picture {
+    max-height: 100svh;
+  }
+}
+pn-media-block .media-block--height-65svh {
+  height: 65svh;
+  overflow: auto;
+}
+pn-media-block .media-block--height-65svh .media-block__block-container {
+  height: 65vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-65svh .media-block__block-container {
+    max-height: 65svh;
+  }
+}
+pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter {
+  height: 65vh;
+}
+@supports (max-height: 100svh) {
+  pn-media-block .media-block--height-65svh .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-65svh .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-65svh .media-block__block-container .media-block__overlay-filter {
+    max-height: 65svh;
+  }
+}
+pn-media-block .media-block--height-65svh .media-block__media-container img {
+  max-height: none !important;
+  height: auto !important;
+}
+pn-media-block .media-block--height-dynamic {
+  height: auto;
+  overflow: auto;
+}
+pn-media-block .media-block--height-dynamic .media-block__block-container {
+  height: auto;
+  max-height: none;
+}
+pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__media-container, pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__content-container, pn-media-block .media-block--height-dynamic .media-block__block-container .media-block__overlay-filter {
+  height: auto;
+  max-height: none;
+}
+pn-media-block .media-block--with-overlay .media-block__block-container .media-block__overlay-filter {
+  z-index: 2;
+  background: radial-gradient(circle, rgba(13, 35, 75, 0.68) 7%, rgba(13, 35, 75, 0) 80%);
+}
+pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container, pn-media-block .media-block--fixed-background .media-block__block-container .media-block__overlay-filter {
+  position: relative;
+  overflow: hidden;
+  top: 0;
+  width: 100%;
+  display: flex !important;
+  clip-path: inset(0);
+}
+pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  display: flex !important;
+  clip-path: inset(0);
+  height: 100%;
+}
+pn-media-block .media-block--fixed-background .media-block__block-container .media-block__media-container picture img {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 1;
+}
+pn-media-block .media-block--video .media-block__content-container {
+  max-width: 80%;
+}
+pn-media-block .media-block--animate-overlay-background .media-block__overlay-filter {
+  background-size: 200% 200% !important;
+  animation: overlayBackgroundAnimation 20s ease infinite;
+}
+@keyframes overlayBackgroundAnimation {
+  0% {
+    background-position: 100% 100%;
+  }
+  50% {
+    background-position: 50% 60%;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}