@postnord/pn-marketweb-components 2.0.119 → 2.0.121

package/collection/components/charts/pn-charts-card/pn-charts-card.js

@@ -0,0 +1,156 @@
+import { Component, Element, h, Host, Prop, State, } from '@stencil/core';
+export class PnChartsCard {
+  constructor() {
+    this.openInNewWindow = false;
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", { name: "clickable-block-wrapper" }),
+      h("div", { class: "pn-charts-card__wrapper" },
+        h("div", { class: "pn-charts-card__heading__wrapper" },
+          h("div", { class: "pn-charts-card__heading" }, this.header),
+          h("div", { class: "pn-charts-card__heading__highlight" }, this.highlight)),
+        h("slot", { name: "chart" }),
+        h("span", { class: "pn-charts-card__preamble" }, this.preamble),
+        h("div", { class: "pn-charts-card__text__wrapper" },
+          h("div", { class: "pn-charts-card__source" },
+            h("label", null, this.label),
+            h("h3", null, this.source),
+            h("a", { class: "link--animated", href: this.sourceUrl, rel: this.openInNewWindow ? 'noopener nofollower noreferrer' : null, target: this.openInNewWindow ? '_blank' : null },
+              "Read the report ",
+              h("pn-icon", { symbol: "arrow-right" }, " ")))))));
+  }
+  static get is() { return "pn-charts-card"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-charts-card.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-charts-card.css"]
+  }; }
+  static get properties() { return {
+    "header": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "header",
+      "reflect": false
+    },
+    "highlight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "highlight",
+      "reflect": false
+    },
+    "preamble": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "preamble",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "source": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "source",
+      "reflect": false
+    },
+    "sourceUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "source-url",
+      "reflect": false
+    },
+    "openInNewWindow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open-in-new-window",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "someState": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/charts/pn-charts-card/pn-charts-card.stories.js

@@ -0,0 +1,75 @@
+import readme from './readme.md';
+
+export default {
+  title: 'Charts/Charts Card',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+
+const TemplateChartsCardOne = ({ ...args }) => {
+  return `
+  <pn-breakpoints></pn-breakpoints>
+  <div style="width:100%; display:flex; flex-direction:row; gap:16px;">
+     <div class="onethirdwidth" style="width:33%; padding:16px 0;">                 
+        <pn-charts-card 
+          header="${args.header}" 
+          highlight="${args.highlight}" 
+          preamble="${args.preamble}" 
+          label="${args.label}"
+          source="${args.source}"
+          source-url="${args.sourceUrl}"
+          open-in-new-window="${args.openInNewWindow}"
+          data-chart-color="blue"
+        >
+            <pn-chart data-chart-type="doughnut" slot="chart" labels='["XSmall", "Small", "Medium"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [50, 100, 500] }]'></pn-chart>
+           
+        </pn-charts-card>
+      </div>
+   
+    <div class="onethirdwidth" style="width:33%; padding:16px 0;">      
+    <pn-charts-card 
+          header="${args.header}" 
+          highlight="${args.highlight}" 
+          preamble="${args.preamble}" 
+          label="${args.label}"
+          source="${args.source}"
+          source-url="${args.sourceUrl}"
+          open-in-new-window="${args.openInNewWindow}"
+           data-chart-color="green"
+        >
+            <pn-chart data-chart-type="bar" slot="chart" labels='["Large", "XLarge", "XXLarge"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [250, 100, 50] }]'></pn-chart>
+
+      </pn-charts-card>
+      </div>
+
+    <div class="onethirdwidth" style="width:33%; padding:16px 0;">      
+    <pn-charts-card 
+          header="${args.header}" 
+          highlight="${args.highlight}" 
+          preamble="${args.preamble}" 
+          label="${args.label}"
+          source="${args.source}"
+          source-url="${args.sourceUrl}"
+          open-in-new-window="${args.openInNewWindow}"
+        >
+          <pn-chart data-chart-type="line" slot="chart" labels='["Jan", "Feb", "Mars"]' data-sets='[{ "label": "# of packages in billions", "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [300, 600, 50] }, { "label": "c02 emission", "borderColor":"green", "fill":true, "backgroundColor": ["#E0F8FF", "#8EDDF9", "#00A0D6"], "data": [20, 50, 90] }]'></pn-chart>
+      </pn-charts-card>
+      </div>  
+ </div>
+
+    `;
+};
+
+export const ChartsCard = TemplateChartsCardOne.bind({});
+
+ChartsCard.args = {
+  header: 'The e-commerce grows in all areas',
+  highlight: '10%',
+  preamble: 'In Q3 we have seen a big growth in e-com.',
+  label: 'Stats taken from',
+  source: 'E-commerce in Europe 2021',
+  sourceUrl: '/',
+  openInNewWindow: false,
+};

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

@@ -399,6 +399,8 @@ header[data-header-theme=tpl] > pn-marketweb-siteheader pn-button a:hover {
 header[data-header-theme=tpl] > pn-marketweb-siteheader [slot=header-bottom-button] a {
   color: #0D234B;
   font-weight: 500;
+  font-size: 1.6rem;
+  padding: 0.8rem 2.4rem;
 }
 header[data-header-theme=tpl] > pn-marketweb-siteheader [slot=header-bottom-button] a .pn-button-bg {
   background-color: #FBC2C1;
@@ -505,6 +507,7 @@ header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-
   display: inline-block;
   margin-top: auto;
   margin-bottom: auto;
+  width: fit-content;
 }
 @media screen and (max-width: 48em) {
   header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-menu-top-search {
@@ -513,7 +516,7 @@ header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-
 }
 header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-menu-top-search pn-search-field {
   justify-content: flex-end;
-  gap: 1.5rem;
+  min-width: inherit;
 }
 header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-menu-top-search form {
   margin-right: 0;
@@ -531,6 +534,12 @@ header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-
   z-index: 3;
   border-radius: 0;
 }
+header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-menu-top-search form:not(:focus-within) .input-container input::placeholder {
+  color: transparent;
+}
+header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-menu-top-search .input-container:focus-within {
+  margin-left: 2rem;
+}
 header[data-header-theme=tpl] > pn-marketweb-siteheader > header div.siteheader-menu-top-search .input-container:focus-within input {
   background-color: #FFFFFF;
   color: #0D234B;

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

@@ -26,6 +26,8 @@ export class PnMarketwebSiteheader {
     this.endpoint = null;
     /** Hides the site selector if set to true*/
     this.hideSiteSelector = false;
+    /** Hides the "home" menu item in the navigation if set to true*/
+    this.hideHomeMenuItem = false;
     /** Hides the language selector if set to true*/
     this.hideLanguageSelector = false;
     /** Hides the search form if set to true*/
@@ -176,7 +178,7 @@ export class PnMarketwebSiteheader {
       updatedMenuItems = data.mainMenu.menuItems;
     }
     // Create the "Home" link
-    if (!updatedMenuItems[0] || ((_a = updatedMenuItems[0]) === null || _a === void 0 ? void 0 : _a.name) !== this.i18n.menuHomeButton) {
+    if ((!updatedMenuItems[0] || ((_a = updatedMenuItems[0]) === null || _a === void 0 ? void 0 : _a.name) !== this.i18n.menuHomeButton) && !this.hideHomeMenuItem) {
       updatedMenuItems.unshift({
         href: this.siteDefinition.url,
         name: this.i18n.menuHomeButton,
@@ -543,6 +545,24 @@ export class PnMarketwebSiteheader {
       "reflect": true,
       "defaultValue": "false"
     },
+    "hideHomeMenuItem": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hides the \"home\" menu item in the navigation if set to true"
+      },
+      "attribute": "hide-home-menu-item",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "hideLanguageSelector": {
       "type": "boolean",
       "mutable": true,

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js

@@ -479,7 +479,8 @@ const TPLSiteHeaderTemplate = ({ ...args }) => {
     user-loggedin="${args.loggedin}"
     hide-language-selector="${args.hideLanguageSelector}"
     hide-login="${args.hideLogin}"
-    search-placeholder="${args.placeholder}">
+    search-placeholder="${args.placeholder}"
+    hide-home-menu-item="${args.hideHomeMenuItem}">
       <pn-button slot="header-bottom-button" href="http:www.google.se" small="true">${args.buttonText}</pn-button>
       <pn-button slot="siteheader-menu-top-button" href="http:www.google.se" small="true">${args.buttonText}</pn-button>
     </pn-marketweb-siteheader>
@@ -493,7 +494,8 @@ TPLSiteHeader.args = {
   endpoint: 'https://tpl-integration.postnord.com',
   name: 'TPL User',
   hideLogin: true,
-  hideLanguageSelector: true,
+  hideHomeMenuItem: true,
+  hideLanguageSelector: false,
   loggedin: false,
   buttonText: "Kontrolltornet",
   placeholder: "placeholder"

package/custom-elements/index.d.ts

@@ -20,6 +20,18 @@ export const PnBreakpoints: {
   new (): PnBreakpoints;
 };
 
+interface PnChart extends Components.PnChart, HTMLElement {}
+export const PnChart: {
+  prototype: PnChart;
+  new (): PnChart;
+};
+
+interface PnChartsCard extends Components.PnChartsCard, HTMLElement {}
+export const PnChartsCard: {
+  prototype: PnChartsCard;
+  new (): PnChartsCard;
+};
+
 interface PnChoiceButton extends Components.PnChoiceButton, HTMLElement {}
 export const PnChoiceButton: {
   prototype: PnChoiceButton;