@postnord/pn-marketweb-components 2.0.89 → 2.0.91

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

@@ -0,0 +1,123 @@
+pn-teaser-card {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+pn-teaser-card .pn-teaser-card__container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  border-radius: 2.4rem;
+}
+pn-teaser-card .pn-teaser-card__container__image__container {
+  width: 100%;
+  position: relative;
+}
+pn-teaser-card .pn-teaser-card__container__image__container > [slot=illustration] {
+  width: 100%;
+  height: auto;
+  border-top-left-radius: 2.4rem;
+  border-top-right-radius: 2.4rem;
+  clip-path: ellipse(100% 90% at 50% 0%);
+  aspect-ratio: 16/9;
+}
+pn-teaser-card .pn-teaser-card__container__content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1 1 100%;
+  gap: 32px;
+  padding: 2.4rem 2.4rem;
+  padding-top: 0;
+}
+pn-teaser-card .pn-teaser-card__container__content__text__container > h1 {
+  font-weight: 700;
+  font-size: 2.4rem;
+  line-height: 2.64rem;
+}
+pn-teaser-card .pn-teaser-card__container__content__text__container > p {
+  padding-top: 1.6rem;
+  font-weight: 400;
+  font-size: 1.6rem;
+  line-height: 2.24rem;
+}
+pn-teaser-card .pn-teaser-card__container__content__cta > pn-button {
+  align-self: flex-end;
+  width: 100%;
+}
+
+pn-teaser-card[data-card-color=coral] > .pn-teaser-card__container {
+  background-color: #FDEFEE;
+}
+
+pn-teaser-card[data-card-color=green] > .pn-teaser-card__container {
+  background-color: #DCF6E7;
+}
+
+@media screen and (min-width: 1200px) {
+  .halfwidth pn-teaser-card .pn-teaser-card__container__content {
+    padding: 0 5.6rem 5.6rem;
+  }
+  .halfwidth pn-teaser-card .pn-teaser-card__container__content__text__container > h1 {
+    font-weight: 700;
+    font-size: 3.2rem;
+    line-height: 3.52rem;
+  }
+  .halfwidth pn-teaser-card .pn-teaser-card__container__content__text__container > p {
+    font-weight: 400;
+    font-size: 2rem;
+    line-height: 2.8rem;
+  }
+  .halfwidth pn-teaser-card .pn-teaser-card__container__content__cta > pn-button {
+    width: fit-content;
+  }
+}
+@media screen and (min-width: 768px) {
+  .fullwidth pn-teaser-card {
+    min-height: 350px;
+  }
+  .fullwidth pn-teaser-card .pn-teaser-card__container {
+    flex-direction: row;
+  }
+  .fullwidth pn-teaser-card .pn-teaser-card__container__content {
+    align-self: center;
+    gap: 2.4rem;
+    padding-top: 2.4rem;
+  }
+  .fullwidth pn-teaser-card .pn-teaser-card__container__image__container > [slot=illustration] {
+    height: 100%;
+    border-top-left-radius: 2.4rem;
+    border-bottom-left-radius: 2.4rem;
+    clip-path: ellipse(100% 100% at 0% 50%);
+    object-fit: cover;
+  }
+  .fullwidth pn-teaser-card .pn-teaser-card__container__content__cta > pn-button {
+    width: fit-content;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .fullwidth pn-teaser-card {
+    min-height: 450px;
+  }
+  .fullwidth pn-teaser-card .pn-teaser-card__container__content {
+    padding: 3.6rem;
+  }
+  .fullwidth pn-teaser-card .pn-teaser-card__container__content__text__container > h1 {
+    font-weight: 700;
+    font-size: 4.8rem;
+    line-height: 5.28rem;
+  }
+  .fullwidth pn-teaser-card .pn-teaser-card__container__content__text__container > p {
+    font-size: 2rem;
+    line-height: 2.8rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  .fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container {
+    flex-direction: row-reverse;
+  }
+  .fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container > [slot=illustration] {
+    border-bottom-right-radius: 2.4rem;
+    clip-path: ellipse(100% 100% at 100% 50%);
+  }
+}

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

@@ -0,0 +1,105 @@
+import { Component, Element, h, Host, Prop, } from '@stencil/core';
+export class PnTeaserCard {
+  constructor() {
+    //props
+    this.text = 'some short text describing whatever';
+    this.heading = 'some heading';
+    this.dataCardColor = 'coral';
+    this.dataCardAlignment = 'left';
+  }
+  //render
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-teaser-card__container" },
+        h("div", { class: "pn-teaser-card__container__image__container" },
+          h("slot", { name: "illustration" })),
+        h("div", { class: "pn-teaser-card__container__content" },
+          h("div", { class: "pn-teaser-card__container__content__text__container" },
+            h("h1", null, this.heading),
+            h("p", null, this.text)),
+          h("div", { class: "pn-teaser-card__container__content__cta" },
+            h("slot", { name: "cta" }))))));
+  }
+  static get is() { return "pn-teaser-card"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-teaser-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-teaser-card.css"]
+  }; }
+  static get properties() { return {
+    "text": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "text",
+      "reflect": false,
+      "defaultValue": "'some short text describing whatever'"
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "'some heading'"
+    },
+    "dataCardColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-card-color",
+      "reflect": true,
+      "defaultValue": "'coral'"
+    },
+    "dataCardAlignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "data-card-alignment",
+      "reflect": true,
+      "defaultValue": "'left'"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/cards/pn-teaser-card/pn-teaser-card.stories.js

@@ -0,0 +1,128 @@
+import readme from './readme.md';
+
+export default {
+  title: 'Cards/Teaser Card',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+  },
+};
+
+const TemplateOneThird = ({ cards, ...args }) => {
+  return `  
+  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
+    <div class="onethirdwidth" style="width:33%; padding:16px 0;">      
+     <pn-teaser-card heading="${cards[0].heading}" text="${cards[0].text}" data-card-color="coral">
+        <img slot="illustration" src="https://www.postnord.se/siteassets/1.-skicka/inspecting-containers-in-a-shipping-terminal-1.jpg" /> 
+        <pn-button slot="cta">${cards[0].buttonLabel}</button>
+      </pn-teaser-card>
+    </div>
+    <div class="onethirdwidth" style="width:33%; padding:16px 0;">
+      <pn-teaser-card heading="${cards[1].heading}" text="${cards[1].text}" data-card-color="green">
+        <img slot="illustration" src="https://www.postnord.se/siteassets/images-new/start-page/kvinna-hamtar-paket-ur-paketbox-3840x2140.jpg" /> 
+        <pn-button slot="cta">${cards[1].buttonLabel}</button>
+      </pn-teaser-card>
+    </div>
+    <div class="onethirdwidth" style="width:33%; padding:16px 0;">
+      <pn-teaser-card heading="${cards[2].heading}" text="${cards[2].text}" data-card-color="coral">
+        <img slot="illustration" src="https://www.postnord.se/siteassets/images-new/start-page/kvinna-hamtar-paket-ur-paketbox-3840x2140.jpg" /> 
+        <pn-button slot="cta">${cards[2].buttonLabel}</button>
+      </pn-teaser-card>
+    </div>
+  </div> 
+  `;
+};
+
+const TemplateOneHalf = ({ cards, ...args }) => {
+  return `
+  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
+    <div class="halfwidth" style="width:50%; padding:16px 0;">      
+    <pn-teaser-card heading="${cards[0].heading}" text="${cards[0].text}" data-card-color="green">
+      <img slot="illustration" src="https://www.postnord.se/siteassets/1.-skicka/inspecting-containers-in-a-shipping-terminal-1.jpg" /> 
+      <pn-button slot="cta">${cards[0].buttonLabel}</button>
+    </pn-teaser-card>
+    </div>
+    <div class="halfwidth" style="width:50%; padding:16px 0;">
+      <pn-teaser-card heading="${cards[1].heading}" text="${cards[1].text}" data-card-color="coral">
+        <img slot="illustration" src="https://www.postnord.se/siteassets/1.-skicka/colleagues-in-meeting.jpg" /> 
+        <pn-button slot="cta">${cards[1].buttonLabel}</button>
+      </pn-teaser-card>
+    </div>
+  </div>
+  `;
+};
+
+const TemplateFullWidth = ({ cards, ...args }) => {
+  return `
+  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
+    <div class="fullwidth" style="width:100%; padding:16px 0;">      
+    <pn-teaser-card heading="${cards[0].heading}" text="${cards[0].text}" data-card-color="green" data-card-alignment="left">
+      <img slot="illustration" src="https://www.postnord.se/siteassets/1.-skicka/inspecting-containers-in-a-shipping-terminal-1.jpg" /> 
+      <pn-button slot="cta">${cards[0].buttonLabel}</button>
+    </pn-teaser-card>
+    </div>    
+  </div>
+
+  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
+    <div class="fullwidth" style="width:100%; padding:16px 0;">      
+      <pn-teaser-card heading="${cards[1].heading}" text="${cards[1].text}" data-card-color="coral" data-card-alignment="right">
+        <img slot="illustration" src="https://www.postnord.se/siteassets/1.-skicka/inspecting-containers-in-a-shipping-terminal-1.jpg" /> 
+        <pn-button slot="cta">${cards[1].buttonLabel}</button>
+      </pn-teaser-card>
+    </div>    
+  </div>`;
+};
+
+export const OneThird = TemplateOneThird.bind({});
+export const Half = TemplateOneHalf.bind({});
+export const FullWidth = TemplateFullWidth.bind({});
+
+OneThird.args = {
+  cards: [
+    {
+      heading: 'E-commerce & Logistics',
+      text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique',
+      buttonLabel: 'Some button',
+    },
+    {
+      heading: 'Lorem ipsum dolor sit amet',
+      text: 'Pellentesque lectus orci, ullamcorper a quam in, malesuada efficitur nulla. Duis rhoncus suscipit tortor, at volutpat magna posuere scelerisque. Fusce vitae sem tristique Pellentesque lectus orci',
+      buttonLabel: 'Some button',
+    },
+    {
+      heading: 'Communications',
+      text: 'Pellentesque lectus orci, ullamcorper a quam in eargareg aergarea aerg aergaeg a aer gaerg ',
+      buttonLabel: 'Some button',
+    },
+  ],
+};
+
+Half.args = {
+  cards: [
+    {
+      heading: 'Communications',
+      text: 'Pellentesque lectus orci, ullamcorper a quam in eargareg aergarea aerg aergaeg a aer gaerg ',
+      buttonLabel: 'Some button',
+    },
+    {
+      heading: 'Green by PostNord -Sustainable logistics',
+      text: 'PostNord is a leading provider of parcel and logistics services to, from, and within the Nordic region. We ensure that our business and non-business customers are able to communicate with their recipients reliably, efficiently and on time – regardless of whether this involves a global logistics solution, an ad campaign or birthday greetings.',
+      buttonLabel: 'Learn more our customer value proposition',
+    },
+  ],
+};
+
+FullWidth.args = {
+  cards: [
+    {
+      heading: 'Green by PostNord -Sustainable logistics',
+      text: 'Pellentesque lectus orci, ullamcorper a quam in eargareg aergarea aerg aergaeg a aer gaerg ',
+      buttonLabel: 'More about our sustainability work',
+    },
+    {
+      heading: 'Communications',
+      text: 'PostNord is a leading provider of parcel and logistics services to, from, and within the Nordic region. We ensure that our business and non-business customers are able to communicate with their recipients reliably, efficiently and on time – regardless of whether this involves a global logistics solution, an ad campaign or birthday greetings.',
+      buttonLabel: 'Learn more our customer value proposition',
+    },
+  ],
+};

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.css

@@ -210,4 +210,135 @@ pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-con
 }
 .siteheader-menu-footer > * {
   margin: 1.6rem;
+}
+
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header {
+  background-color: #0D234B;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-row:not(:last-child) {
+  border-bottom: 0.1rem solid #0D234B;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topleft pn-site-selector .pn-nav-dropdown-label {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topleft pn-site-selector .pn-nav-dropdown-label pn-icon svg > path {
+  fill: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topleft button.pn-nav-dropdown-label:hover {
+  background-color: #005D92;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topleft button.pn-nav-dropdown-label:active {
+  background-color: #00A0D6;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topleft button.pn-nav-dropdown-label:focus {
+  background-color: #00A0D6;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-logocontainer {
+  background-color: #0D234B;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-logocontainer svg.siteheader-logo > path {
+  fill: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright * {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright .siteheader-logindialog svg > path {
+  fill: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright pn-language-selector pn-icon svg > path {
+  fill: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright button:hover {
+  background-color: #005D92;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright button:active {
+  background-color: #00A0D6;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright button:focus {
+  background-color: #00A0D6;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright [slot=toprightend] {
+  align-self: center;
+  margin-left: 1rem;
+}
+@media screen and (max-width: 48em) {
+  header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright [slot=toprightend] {
+    display: none;
+  }
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu .mainnav-toggle button {
+  background-color: transparent;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu .first-level_icon svg > path {
+  fill: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input {
+  background-color: #0D234B;
+  color: #FFFFFF;
+  border: 0.1rem solid #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input:hover {
+  border-color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input::placeholder {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav {
+  background-color: #0D234B;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav a {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link a,
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link button {
+  background-color: #0D234B;
+  color: #FFFFFF;
+  border-bottom: 0.1rem solid rgba(0, 93, 146, 0.5);
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) {
+  background-color: #0D234B;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list a:hover {
+  background-color: #00A0D6;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search {
+  background-color: #0D234B;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container {
+  border-top: 1px solid #FFFFFF;
+  border-bottom: 1px solid #FFFFFF;
+  border-right: 1px solid white;
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container button.clear {
+  border: 2px solid #FFFFFF;
+  border-radius: 50%;
+  padding: 0.5rem;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header [data-level="1"] pn-mainnav-link pn-icon.first-level_arrow svg > path {
+  fill: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu-footer button {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu-footer button:hover {
+  background-color: #005D92;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu-footer button:active {
+  background-color: #00A0D6;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu-footer button:focus {
+  background-color: #00A0D6;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu-footer button svg > path {
+  fill: #FFFFFF;
+}
+@media screen and (min-width: 48em) {
+  header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] {
+    display: none;
+  }
 }