@postnord/pn-marketweb-components 1.0.39 → 1.0.40

package/collection/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.js

@@ -0,0 +1,120 @@
+import { Component, Prop, h, Host, State, Element } from "@stencil/core";
+export class PnBonusProgressbarLevel {
+  constructor() {
+    this.current = false;
+    this.value = 0;
+    this.bonuspercentage = "";
+    this.visualpercentage = 0;
+    this.percentage = 0;
+    this.max = 0;
+    this.min = 0;
+    this.currency = "";
+  }
+  componentWillLoad() {
+    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute("max"), 10);
+    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute("min"), 10);
+    this.currency = this.hostElement.parentElement.parentElement.getAttribute("currency");
+    this.percentage = (this.value / this.max) * 100;
+    if (this.visualpercentage > 0) {
+      // Visual percentage has been overriden
+      return;
+    }
+    this.visualpercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+  }
+  formatValue() {
+    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;
+  }
+  render() {
+    return (h(Host, { style: { 'left': `${this.visualpercentage}%` } },
+      h("div", { class: "progressbar-level-percentage" }, this.bonuspercentage),
+      h("div", { class: "progressbar-level-value" }, this.formatValue())));
+  }
+  static get is() { return "pn-bonus-progressbar-level"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-bonus-progressbar-level.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-bonus-progressbar-level.css"]
+  }; }
+  static get properties() { return {
+    "current": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "current",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "bonuspercentage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "bonuspercentage",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "visualpercentage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "visualpercentage",
+      "reflect": true,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "percentage": {},
+    "max": {},
+    "min": {},
+    "currency": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/input/pn-bonus-progressbar/pn-bonus-progressbar.css

@@ -0,0 +1,77 @@
+pn-bonus-progressbar {
+  width: 100%;
+}
+
+.bonusprogressbar-top {
+  display: flex;
+  align-items: center;
+}
+
+.bonusprogressbar-top-icon {
+  border-radius: 100%;
+  height: 5rem;
+  width: 5rem;
+  padding: 1rem;
+  display: inline-flex;
+  margin-right: 1em;
+  margin-left: 0.5em;
+  background-color: #E0F8FF;
+}
+[theme=red] .bonusprogressbar-top-icon {
+  background-color: #FBC2C1;
+}
+.bonusprogressbar-top-icon pn-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.bonusprogressbar-top-percentage {
+  margin-left: auto;
+  padding: 0.5em;
+}
+
+.bonusprogressbar-wrapper {
+  position: relative;
+  display: flex;
+  min-height: 5em;
+  align-items: center;
+}
+
+.bonusprogressbar-currentlevel {
+  position: absolute;
+}
+
+.bonusprogressbar-progress[value] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 1.7rem;
+  border: 0.1rem solid #00A0D6;
+  border-radius: 1.7rem;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+[theme=red] .bonusprogressbar-progress[value] {
+  border-color: #F06365;
+}
+.bonusprogressbar-progress[value]::-webkit-progress-bar {
+  border: 0;
+  border-radius: 1.7rem;
+  margin: 0;
+  padding: 0;
+  background: #E0F8FF;
+}
+[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar {
+  background: #FDEFEE;
+}
+.bonusprogressbar-progress[value]::-webkit-progress-value {
+  margin: 0;
+  padding: 0;
+  border-radius: 1.7rem;
+  background: #00A0D6;
+}
+[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value {
+  background: #F06365;
+}

package/collection/components/input/pn-bonus-progressbar/pn-bonus-progressbar.js

@@ -0,0 +1,254 @@
+import { Component, Prop, h, Host, State, Element, Watch } from "@stencil/core";
+export class PnBonusProgressbar {
+  constructor() {
+    this.icon = null;
+    this.heading = "";
+    this.theme = "blue";
+    this.bonuspercentage = "0%";
+    this.currency = "kr";
+    this.value = 0;
+    this.min = 0;
+    this.max = 0;
+    this.valuepercentage = 0;
+    this.progresspercentage = 0;
+    this.levelValues = [];
+    this.currentLevelAdjustedValue = 0;
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+    this.setValuePercentage();
+  }
+  setInitialValues() {
+    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));
+    this.currentLevelAdjustedValue = this.value;
+    this.levelValues = levelElements.map((elm) => {
+      return parseInt(elm.getAttribute("value"), 10);
+    });
+    if (!this.max) {
+      if (this.levelValues && this.levelValues.length > 0) {
+        const newMax = this.levelValues.slice(-1)[0];
+        this.max = Math.floor(newMax * 1.05);
+      }
+    }
+    if (!this.min) {
+      const suggestedMin = Math.floor(this.value * 0.9);
+      if (suggestedMin > 0) {
+        this.min = suggestedMin;
+      }
+    }
+    if (this.value > this.max) {
+      this.currentLevelAdjustedValue = 100;
+    }
+  }
+  setValuePercentage() {
+    this.valuepercentage = (this.value / (this.max)) * 100;
+    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+    if (this.progresspercentage < 0) {
+      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {
+        this.min = Math.floor(this.levelValues[0] * .95);
+      }
+      else {
+        this.min = Math.floor(this.value * .95);
+      }
+    }
+    if (this.progresspercentage > 100) {
+      this.progresspercentage = 100;
+      const newMax = this.levelValues.slice(-1)[0];
+      this.max = Math.floor(newMax * 1.05);
+    }
+  }
+  iconColor() {
+    switch (this.theme) {
+      case 'red':
+        return 'coral700';
+      case 'blue':
+      default:
+        return 'blue700';
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "bonusprogressbar-top" },
+        this.icon ? (h("div", { class: "bonusprogressbar-top-icon" },
+          h("pn-icon", { symbol: "stamp", small: "false", color: this.iconColor() }))) : {},
+        h("h4", { class: "bonusprogressbar-top-heading" }, this.heading),
+        h("strong", { class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)),
+      h("div", { class: "bonusprogressbar-wrapper" },
+        h("progress", { class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }),
+        h("pn-bonus-progressbar-level", { current: true, value: this.value, visualpercentage: this.currentLevelAdjustedValue, bonuspercentage: this.bonuspercentage }),
+        h("slot", null))));
+  }
+  static get is() { return "pn-bonus-progressbar"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-bonus-progressbar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-bonus-progressbar.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "theme",
+      "reflect": true,
+      "defaultValue": "\"blue\""
+    },
+    "bonuspercentage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "bonuspercentage",
+      "reflect": false,
+      "defaultValue": "\"0%\""
+    },
+    "currency": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "currency",
+      "reflect": true,
+      "defaultValue": "\"kr\""
+    },
+    "value": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "min": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "max": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "max",
+      "reflect": true,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "valuepercentage": {},
+    "progresspercentage": {},
+    "levelValues": {},
+    "currentLevelAdjustedValue": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "currentLevelAdjustedValue",
+      "methodName": "setValuePercentage"
+    }, {
+      "propName": "value",
+      "methodName": "setValuePercentage"
+    }, {
+      "propName": "min",
+      "methodName": "setValuePercentage"
+    }, {
+      "propName": "max",
+      "methodName": "setValuePercentage"
+    }]; }
+}

package/collection/components/input/pn-bonus-progressbar/pn-bonus-progressbar.stories.js

@@ -0,0 +1,79 @@
+import readme from "./readme.md";
+
+export default {
+  title: "input/Bonus progressbar",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  },
+};
+
+const Template = ({ ...args }) => {
+  return `
+  <div style="width:380px;margin-bottom:3em;">
+  <pn-bonus-progressbar 
+      value="125000" 
+ 
+      icon="stamp"
+      theme="blue"
+      bonuspercentage="7%"
+      heading="Din rabatt på frimärken">
+      <pn-bonus-progressbar-level value="250000" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
+      <pn-bonus-progressbar-level value="265000" bonuspercentage="8%"></pn-bonus-progressbar-level>
+      <pn-bonus-progressbar-level value="300000" bonuspercentage="9%"></pn-bonus-progressbar-level>
+  </pn-bonus-progressbar>
+</div>
+<div style="width:380px;margin-bottom:3em;">
+<pn-bonus-progressbar 
+      value="50000" 
+      icon="stamp"
+      theme="blue"
+      bonuspercentage="7%"
+      heading="Din rabatt på frimärken">
+      <pn-bonus-progressbar-level value="250000" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
+      <pn-bonus-progressbar-level value="265000" bonuspercentage="8%"></pn-bonus-progressbar-level>
+      <pn-bonus-progressbar-level value="300000" bonuspercentage="9%"></pn-bonus-progressbar-level>
+  </pn-bonus-progressbar>
+</div>
+
+<div style="width:380px;margin-bottom:3em;">
+      <pn-bonus-progressbar 
+          value="200000"  
+          icon="stamp"
+          theme="blue"
+          bonuspercentage="7%"
+          heading="Din rabatt på frimärken">
+          <pn-bonus-progressbar-level value="250000" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
+          <pn-bonus-progressbar-level value="265000" bonuspercentage="8%"></pn-bonus-progressbar-level>
+          <pn-bonus-progressbar-level value="300000" bonuspercentage="9%"></pn-bonus-progressbar-level>
+      </pn-bonus-progressbar>
+    </div>
+<div style="width:380px;margin-bottom:3em;">
+    <pn-bonus-progressbar 
+        value="500000" 
+        icon="stamp"
+        bonuspercentage="9%"
+        heading="Din rabatt på frimärken">
+        <pn-bonus-progressbar-level value="250000" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
+        <pn-bonus-progressbar-level value="400000" bonuspercentage="8%"></pn-bonus-progressbar-level>
+    </pn-bonus-progressbar>
+  </div>
+  <div style="width:380px;margin-bottom:3em;">
+  <pn-bonus-progressbar 
+      value="50000" 
+      icon="box"
+      theme="red"
+      bonuspercentage="7%"
+      heading="Din rabatt på varor">
+      <pn-bonus-progressbar-level value="250000" bonuspercentage="7.5%"></pn-bonus-progressbar-level>
+      <pn-bonus-progressbar-level value="265000" bonuspercentage="8%"></pn-bonus-progressbar-level>
+      <pn-bonus-progressbar-level value="300000" bonuspercentage="9%"></pn-bonus-progressbar-level>
+  </pn-bonus-progressbar>
+</div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+
+};

package/custom-elements/index.d.ts

@@ -2,6 +2,18 @@
 
 import type { Components, JSX } from "../types/components";
 
+interface PnBonusProgressbar extends Components.PnBonusProgressbar, HTMLElement {}
+export const PnBonusProgressbar: {
+  prototype: PnBonusProgressbar;
+  new (): PnBonusProgressbar;
+};
+
+interface PnBonusProgressbarLevel extends Components.PnBonusProgressbarLevel, HTMLElement {}
+export const PnBonusProgressbarLevel: {
+  prototype: PnBonusProgressbarLevel;
+  new (): PnBonusProgressbarLevel;
+};
+
 interface PnChoiceButton extends Components.PnChoiceButton, HTMLElement {}
 export const PnChoiceButton: {
   prototype: PnChoiceButton;