@postnord/pn-marketweb-components 1.0.37 → 1.0.41

package/cjs/pn-product-tile_3.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0404c97e.js');
+const index = require('./index-cd08e313.js');
 
 const pnProductTileCss = "pn-product-tile{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:white;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-tile [slot=content] h3{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:0.5em}pn-product-tile>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-tile .tilecontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-tile .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-tile .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;max-width:66.6666666667%;-ms-flex-flow:wrap;flex-flow:wrap}pn-product-tile .info>*{min-width:6em;margin:0.2em 1em 0.2em 0}";
 

package/cjs/pn-profile-selector.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0404c97e.js');
+const index = require('./index-cd08e313.js');
 const MarketWebContextService = require('./MarketWebContextService-bdc46f40.js');
 const MarketWebLoginManager = require('./MarketWebLoginManager-859590e2.js');
 

package/cjs/pn-sidenav-level.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0404c97e.js');
-const pnSidenavStore = require('./pn-sidenav-store-ac7b8608.js');
-require('./index-ea886985.js');
+const index = require('./index-cd08e313.js');
+const pnSidenavStore = require('./pn-sidenav-store-044d6595.js');
+require('./index-31d574c5.js');
 
 const pnSidenavLevelCss = "pn-sidenav-level{display:block;-ms-flex-preferred-size:100%;flex-basis:100%}pn-sidenav-level[data-level=\"2\"]{padding-left:2.5em;overflow:hidden;-webkit-transition:max-height ease 0.2s;transition:max-height ease 0.2s;max-height:40em}pn-sidenav-level[data-level=\"2\"][aria-hidden=true]{max-height:0}";
 

package/cjs/pn-sidenav-link.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0404c97e.js');
-const pnSidenavStore = require('./pn-sidenav-store-ac7b8608.js');
-require('./index-ea886985.js');
+const index = require('./index-cd08e313.js');
+const pnSidenavStore = require('./pn-sidenav-store-044d6595.js');
+require('./index-31d574c5.js');
 
 const pnSidenavLinkCss = "pn-sidenav-link{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.pn-sidenav-link{font-weight:normal;position:relative;border:0 none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:transparent;color:#005D92;font-size:1em;padding:1.1rem 1.5rem 1.1rem;overflow:hidden;text-decoration:none;cursor:pointer;-ms-flex-positive:1;flex-grow:1}.pn-sidenav-link::before{content:\"\";display:block;width:0.4rem;border-top-right-radius:0.3rem;border-bottom-right-radius:0.3rem;height:100%;position:absolute;left:0;top:0;bottom:0;-webkit-transform:translateX(-0.4rem);transform:translateX(-0.4rem);background:#005D92;-webkit-transition:-webkit-transform linear 0.35s;transition:-webkit-transform linear 0.35s;transition:transform linear 0.35s;transition:transform linear 0.35s, -webkit-transform linear 0.35s}.pn-sidenav-link:hover,.pn-sidenav-link:focus,[current=true]>.pn-sidenav-link{background-color:#E0F8FF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link:hover::before,.pn-sidenav-link:focus::before,[current=true]>.pn-sidenav-link::before{-webkit-transform:none;transform:none}.pn-sidenav-link:active{background-color:#F3F2F2;color:#00A0D6;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link>pn-icon{padding-right:1em}.pn-sidenav-link-expand{margin-left:auto;border:0;font-size:1em;background:transparent;outline:0;padding:0 1em 0 0.5em;cursor:pointer}.pn-sidenav-link-expand:hover,.pn-sidenav-link-expand:focus,[current=true]>.pn-sidenav-link-expand{background-color:#E0F8FF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link-expand:hover::before,.pn-sidenav-link-expand:focus::before,[current=true]>.pn-sidenav-link-expand::before{-webkit-transform:none;transform:none}button>.pn-sidenav-link-expand{padding-right:0}.pn-sidenav-link-expand pn-icon{width:14px}";
 

package/cjs/{pn-sidenav-store-ac7b8608.js → pn-sidenav-store-044d6595.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-ea886985.js');
+const index = require('./index-31d574c5.js');
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = index.createStore({

package/cjs/pn-sidenav.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0404c97e.js');
-const pnSidenavStore = require('./pn-sidenav-store-ac7b8608.js');
-require('./index-ea886985.js');
+const index = require('./index-cd08e313.js');
+const pnSidenavStore = require('./pn-sidenav-store-044d6595.js');
+require('./index-31d574c5.js');
 
 const translations = {
   'sv': {

package/cjs/pn-site-footer_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0404c97e.js');
+const index = require('./index-cd08e313.js');
 
 const pnSiteFooterCss = "pn-site-footer{display:block;line-height:1.5}pn-site-footer a{color:#005D92}pn-site-footer a:hover{color:#0D234B;text-decoration:underline}pn-site-footer h3{font-size:2.4rem;margin-bottom:0.5rem;line-height:1.2}pn-site-footer p{font-size:1.6rem}pn-site-footer ul.social-media{display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row}pn-site-footer ul.social-media li{margin-right:1.6rem}pn-site-footer>svg{display:block}pn-site-footer>div{background:#F3F2F2}.pn-sitefooter-top{display:-ms-flexbox;display:flex}.pn-sitefooter-cols{-ms-flex-item-align:center;align-self:center;-ms-flex-pack:center;justify-content:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;margin:0 auto;max-width:90em}.pn-sitefooter-bottom [slot=bottom]{max-width:90em;margin:0 auto;padding:1.6rem 0;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;border-top:1px solid #D3CECB;border-bottom:1px solid #D3CECB}.pn-sitefooter-bottom [slot=bottom] span,.pn-sitefooter-bottom [slot=bottom] a{line-height:2;margin:0 1.6rem;text-decoration:none}.pn-sitefooter-bottom [slot=bottom] li{line-height:2em;margin:0 1.6rem}.pn-sitefooter-logo{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;padding:3rem}.pn-sitefooter-logo svg{display:block;width:13.3rem;height:2.6rem}";
 

package/collection/collection-manifest.json

@@ -1,5 +1,7 @@
 {
   "entries": [
+    "./components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.js",
+    "./components/input/pn-bonus-progressbar/pn-bonus-progressbar.js",
     "./components/input/pn-choice-button/pn-choice-button.js",
     "./components/input/pn-filter-checkbox/pn-filter-checkbox.js",
     "./components/input/pn-filter-search/pn-filter-search.js",
@@ -23,6 +25,7 @@
     "./components/navigation/pn-site-selector/pn-site-selector.js",
     "./components/widgets/pn-find-service-and-price/pn-find-service-and-price-result.js",
     "./components/widgets/pn-find-service-and-price/pn-find-service-and-price.js",
+    "./components/widgets/pn-pex-pricefinder/pn-pex-pricefinder.js",
     "./components/widgets/pn-product-pricelist/pn-product-pricelist-result.js",
     "./components/widgets/pn-product-pricelist/pn-product-pricelist.js",
     "./components/widgets/pn-product-tile/pn-product-tile-info.js",

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

@@ -0,0 +1,48 @@
+pn-bonus-progressbar-level {
+  position: absolute;
+  width: 0.1rem;
+  left: 50%;
+}
+pn-bonus-progressbar-level::after {
+  content: "";
+  width: 0.1rem;
+  position: absolute;
+  left: 0;
+  border-left: 1px dashed #9B1C2E;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 3rem;
+}
+pn-bonus-progressbar-level:not([current]):nth-child(even)::after {
+  height: 7rem;
+  margin-top: 0.6rem;
+}
+
+.progressbar-level-percentage {
+  font-size: 0.75em;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -3.2rem;
+}
+[current] > .progressbar-level-percentage {
+  display: none;
+}
+pn-bonus-progressbar-level:not([current]):nth-child(even) .progressbar-level-percentage {
+  top: -4.8rem;
+}
+
+.progressbar-level-value {
+  font-size: 0.75em;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 2.3rem;
+}
+[current] > .progressbar-level-value {
+  top: -3.2rem;
+}
+pn-bonus-progressbar-level:not([current]):nth-child(even) .progressbar-level-value {
+  top: 4.2rem;
+}

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 = {
+
+};