@postnord/pn-marketweb-components 2.4.28 → 2.4.29

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

@@ -0,0 +1,252 @@
+import readme from "./readme.md";
+
+export default {
+  title: "CTA/Cta block",
+  parameters: {
+    notes: readme,
+  },
+  argTypes: {
+    pnBackgroundColor: {
+      options: ['blue25', 'coral50', 'gray25', 'green25'],
+      control: { type: 'select' },
+    },
+  }
+};
+
+
+const Template = ({ ...args }) => {
+  return `
+  <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+        <div slot="illustration">  
+          <picture>
+            <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+          </picture>
+        </div>
+        <div slot="cta-button">
+          <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+          <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+        </div>
+      </pn-cta-block>
+  </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  contentTop: false,
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['blue25'],
+  isLarge: false,
+  isCentered: false,
+  isSmall: false,
+};
+
+const LinkOnlyTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const LinkOnly = LinkOnlyTemplate.bind({});
+LinkOnly.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: '',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['gray25'],
+  isLarge: true,
+  isCentered: false,
+  isSmall: false,
+};
+
+
+const TwoButtonLayoutTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <pn-button appearance="light" class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const TwoButtonLayout = TwoButtonLayoutTemplate.bind({});
+TwoButtonLayout.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['coral50'],
+  isLarge: true,
+  isCentered: false,
+  isSmall: false,
+};
+
+const NoImageTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const NoImage = NoImageTemplate.bind({});
+NoImage.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: '',
+  pnBackgroundColor: ['gray25'],
+  isLarge: true,
+  isCentered: false,
+  isSmall: false,
+};
+
+const LargeTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const Large = LargeTemplate.bind({});
+Large.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['blue25'],
+  isLarge: true,
+  isCentered: false,
+  isSmall: false,
+};
+
+const LargeCenteredTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const LargeCentered = LargeCenteredTemplate.bind({});
+LargeCentered.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['blue25'],
+  isLarge: true,
+  isCentered: true,
+  isSmall: false,
+};

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

@@ -0,0 +1,187 @@
+pn-cta-block .cta-block {
+  display: flex;
+  justify-content: space-between;
+  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 {
+    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 {
+  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 {
+  align-items: center;
+  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 {
+    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] {
+    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: flex;
+  flex: 1;
+  flex-direction: column;
+  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 {
+    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 {
+    max-width: 74rem;
+  }
+}
+pn-cta-block .cta-block__heading {
+  margin-bottom: 0.8rem;
+}
+pn-cta-block .cta-block__action {
+  display: flex;
+}
+pn-cta-block .cta-block__action > [slot=cta-button] {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  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 {
+  transition: 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 {
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(0.3rem);
+}
+pn-cta-block .cta-block__action > [slot=cta-button] > a:hover pn-icon svg path {
+  fill: #005D92;
+}

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

@@ -0,0 +1,169 @@
+import { Host, h } from "@stencil/core";
+export class PnCtaBlock {
+  constructor() {
+    this.heading = null;
+    this.bodyText = null;
+    this.pnBackgroundColor = null;
+    this.isLarge = false;
+    this.isCentered = false;
+    this.isSmall = false;
+    this.contentTop = false;
+    this.hasIllustrationSlot = true;
+    this.hasButtonSlot = true;
+  }
+  componentWillLoad() {
+    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
+    this.hasButtonSlot = !!this.hostElement.querySelector('[slot="cta-button"]');
+  }
+  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" })))));
+  }
+  static get is() { return "pn-cta-block"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-cta-block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-cta-block.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "bodyText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "body-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "pnBackgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pn-background-color",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "isLarge": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-large",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isCentered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-centered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isSmall": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "contentTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "content-top",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasIllustrationSlot": {},
+      "hasButtonSlot": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/components/index.d.ts

@@ -8,6 +8,7 @@ export { PnBreakpoints as PnBreakpoints } from '../types/components/utilities/pn
 export { PnChart as PnChart } from '../types/components/charts/pn-chart/pn-chart';
 export { PnChartsCard as PnChartsCard } from '../types/components/charts/pn-charts-card/pn-charts-card';
 export { PnChoiceButton as PnChoiceButton } from '../types/components/input/pn-choice-button/pn-choice-button';
+export { PnCtaBlock as PnCtaBlock } from '../types/components/cta/pn-cta-block/pn-cta-block';
 export { PnCustomernumberSelector as PnCustomernumberSelector } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector';
 export { PnProfileSelectorOption as PnCustomernumberSelectorOption } from '../types/components/profile/pn-customernumber-selector/pn-customernumber-selector-option';
 export { PnDateAndTime as PnDateAndTime } from '../types/components/input/pn-date-and-time/pn-date-and-time';

package/components/index.js

@@ -8,6 +8,7 @@ export { PnBreakpoints, defineCustomElement as defineCustomElementPnBreakpoints
 export { PnChart, defineCustomElement as defineCustomElementPnChart } from './pn-chart.js';
 export { PnChartsCard, defineCustomElement as defineCustomElementPnChartsCard } from './pn-charts-card.js';
 export { PnChoiceButton, defineCustomElement as defineCustomElementPnChoiceButton } from './pn-choice-button.js';
+export { PnCtaBlock, defineCustomElement as defineCustomElementPnCtaBlock } from './pn-cta-block.js';
 export { PnCustomernumberSelector, defineCustomElement as defineCustomElementPnCustomernumberSelector } from './pn-customernumber-selector.js';
 export { PnCustomernumberSelectorOption, defineCustomElement as defineCustomElementPnCustomernumberSelectorOption } from './pn-customernumber-selector-option.js';
 export { PnDateAndTime, defineCustomElement as defineCustomElementPnDateAndTime } from './pn-date-and-time.js';

package/components/pn-cta-block.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnCtaBlock extends Components.PnCtaBlock, HTMLElement {}
+export const PnCtaBlock: {
+  prototype: PnCtaBlock;
+  new (): PnCtaBlock;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;