@postnord/pn-marketweb-components 2.0.92 → 2.0.93

package/collection/components/navigation/pn-site-footer/pn-site-footer-col.js

@@ -1,5 +1,8 @@
-import { Component, h, Host } from "@stencil/core";
+import { Component, h, Host, Prop, } from '@stencil/core';
 export class PnSiteFooterCol {
+  constructor() {
+    this.theme = null;
+  }
   render() {
     return (h(Host, null,
       h("slot", null)));
@@ -11,4 +14,24 @@ export class PnSiteFooterCol {
   static get styleUrls() { return {
     "$": ["pn-site-footer-col.css"]
   }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "theme",
+      "reflect": true,
+      "defaultValue": "null"
+    }
+  }; }
 }

package/collection/components/navigation/pn-site-footer/pn-site-footer.css

@@ -1,23 +1,23 @@
-pn-site-footer {
+pn-site-footer:not([theme=dotcom]) {
   display: block;
   line-height: 1.5;
 }
-pn-site-footer a {
+pn-site-footer:not([theme=dotcom]) a {
   color: #005D92;
 }
-pn-site-footer a:hover {
+pn-site-footer:not([theme=dotcom]) a:hover {
   color: #0D234B;
   text-decoration: underline;
 }
-pn-site-footer h3 {
+pn-site-footer:not([theme=dotcom]) h3 {
   font-size: 2.4rem;
   margin-bottom: 0.5rem;
   line-height: 1.2;
 }
-pn-site-footer p {
+pn-site-footer:not([theme=dotcom]) p {
   font-size: 1.6rem;
 }
-pn-site-footer pn-site-footer-col ul.social-media {
+pn-site-footer:not([theme=dotcom]) pn-site-footer-col ul.social-media {
   display: flex;
   flex-flow: row;
   gap: 1.6rem;
@@ -25,21 +25,19 @@ pn-site-footer pn-site-footer-col ul.social-media {
   margin-bottom: 1.6rem;
   flex-wrap: wrap;
 }
-pn-site-footer pn-site-footer-col ul.social-media li {
+pn-site-footer:not([theme=dotcom]) pn-site-footer-col ul.social-media li {
   margin-bottom: 0;
 }
-pn-site-footer > svg {
+pn-site-footer:not([theme=dotcom]) > svg {
   display: block;
 }
-pn-site-footer > div {
+pn-site-footer:not([theme=dotcom]) > div {
   background: #F3F2F2;
 }
-
-.pn-sitefooter-top {
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-top {
   display: flex;
 }
-
-.pn-sitefooter-cols {
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-cols {
   align-self: center;
   justify-content: center;
   display: block;
@@ -48,12 +46,11 @@ pn-site-footer > div {
   max-width: 90em;
 }
 @media screen and (min-width: 33.125em) {
-  .pn-sitefooter-cols {
+  pn-site-footer:not([theme=dotcom]) .pn-sitefooter-cols {
     display: flex;
   }
 }
-
-.pn-sitefooter-bottom [slot=bottom] {
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] {
   max-width: 90em;
   margin: 0 auto;
   padding: 1.6rem 0;
@@ -64,27 +61,118 @@ pn-site-footer > div {
   border-top: 1px solid #D3CECB;
   border-bottom: 1px solid #D3CECB;
 }
-.pn-sitefooter-bottom [slot=bottom] span, .pn-sitefooter-bottom [slot=bottom] a {
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] span,
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] a {
   line-height: 2;
   margin: 0 1.6rem;
   text-decoration: none;
 }
-.pn-sitefooter-bottom [slot=bottom] li {
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-bottom [slot=bottom] li {
   line-height: 2em;
   margin: 0 1.6rem;
 }
-
-.pn-sitefooter-logo {
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 3rem;
 }
-.pn-sitefooter-logo svg {
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo svg {
   display: block;
   width: 13.3rem;
   height: 2.6rem;
 }
-.pn-sitefooter-logo:has(div) a slot-fb {
+pn-site-footer:not([theme=dotcom]) .pn-sitefooter-logo:has(div) a slot-fb {
   display: none;
+}
+
+pn-site-footer[theme=dotcom] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: #0D234B;
+  margin: 0 auto;
+}
+pn-site-footer[theme=dotcom] > svg {
+  background-color: #FFFFFF;
+}
+pn-site-footer[theme=dotcom] > svg path {
+  fill: #0D234B;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-top {
+  width: 100%;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-top .pn-sitefooter-cols {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 1200px;
+  padding-top: 4.8rem;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  margin: 0 auto;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom {
+  width: 100%;
+  padding: 0.8rem 0;
+  background-color: #0D234B;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding-left: 3rem;
+  padding-right: 3rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] > .social-media {
+  display: flex;
+  justify-content: center;
+  padding: 1.6rem 0;
+  border-top: 1px solid #005d924d;
+  border-bottom: 1px solid #005d924d;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] > .social-media > ul {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] > .copyright {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 2.4rem;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] > .copyright * {
+  color: #FFFFFF;
+  font-weight: 400;
+  font-size: 1.4rem;
+  line-height: 1.96rem;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] > .copyright > ul {
+  margin: 0;
+  padding: 0;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] > .copyright > ul > li {
+  display: inline;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-bottom > [slot=bottom] > .copyright > ul > li:last-child {
+  margin-left: 2.4rem;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-logo {
+  padding: 3rem;
+  margin: 0 auto;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-logo [name=logo] > svg {
+  display: block;
+  width: 13.3rem;
+  height: 2.6rem;
+}
+pn-site-footer[theme=dotcom] .pn-sitefooter-logo [name=logo] > svg > path {
+  fill: #00A0D6;
 }

package/collection/components/navigation/pn-site-footer/pn-site-footer.js

@@ -1,12 +1,12 @@
-import { Component, Prop, h, Host } from "@stencil/core";
+import { Component, h, Host, Prop, } from '@stencil/core';
 export class PnSiteFooter {
   constructor() {
     /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */
-    this.url = "#";
-    this.linktitle = "PostNord";
-  }
-  componentWillLoad() {
+    this.url = '#';
+    this.linktitle = 'PostNord';
+    this.theme = null;
   }
+  componentWillLoad() { }
   render() {
     return (h(Host, null,
       h("svg", { fill: "none", viewBox: "0 0 1680 126", role: "presentation" },
@@ -46,7 +46,7 @@ export class PnSiteFooter {
       },
       "attribute": "url",
       "reflect": false,
-      "defaultValue": "\"#\""
+      "defaultValue": "'#'"
     },
     "linktitle": {
       "type": "string",
@@ -64,7 +64,25 @@ export class PnSiteFooter {
       },
       "attribute": "linktitle",
       "reflect": false,
-      "defaultValue": "\"PostNord\""
+      "defaultValue": "'PostNord'"
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "theme",
+      "reflect": true,
+      "defaultValue": "null"
     }
   }; }
 }

package/collection/components/navigation/pn-site-footer/site-footer.stories.js

@@ -1,17 +1,17 @@
-import readme from "./readme.md";
+import readme from './readme.md';
 
 export default {
-  title: "navigation/Site footer",
+  title: 'navigation/Site footer',
   parameters: {
-    notes: readme
-  }
+    notes: readme,
+  },
 };
 
 // export const regular = () => {
 //   // Storybook Knobs ------------------------------------------//
 //   const logoUrl = text("Logo URL", 'https://www.postnord.se');
-  // --------------------------------------------------------- //
-  const Template = ({ ...args }) => {
+// --------------------------------------------------------- //
+const Template = ({ ...args }) => {
   return `
   <pn-site-footer url="${args.logoUrl}">
     <pn-site-footer-col>
@@ -83,11 +83,9 @@ export default {
 
 export const Primary = Template.bind({});
 Primary.args = {
-  logoUrl : "https://www.postnord.se"
+  logoUrl: 'https://www.postnord.se',
 };
 
-
-
 const TemplateNorwegian = ({ ...args }) => {
   return `
   <pn-site-footer url="${args.logoUrl}">
@@ -161,5 +159,5 @@ const TemplateNorwegian = ({ ...args }) => {
 };
 export const Norwegian = TemplateNorwegian.bind({});
 Primary.args = {
-  logoUrl : "https://www.postnord.no"
+  logoUrl: 'https://www.postnord.no',
 };