@postnord/pn-marketweb-components 2.0.3-beta3 → 2.0.4

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-bar/progress-bar.stories.js

@@ -0,0 +1,54 @@
+import { boolean, select, number, text } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "Feedback/Progress Bar",
+  component: "progress-bar",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+const progressOptions = {
+  range: true,
+  min: 0,
+  max: 100,
+  step: 1
+};
+
+const colorOptions = {
+  default: null,
+  success: "success",
+  error: "error"
+};
+
+const sizeOptions = {
+  default: null,
+  small: "small",
+  medium: "medium"
+};
+
+export const primary = () => {
+  // Storybook Knobs, please ignore ----------------------------//
+  const progressNum = number("progress", 30, progressOptions);
+  const labelString = text("label", "Label");
+  const showSpinner = boolean("show spinner", false);
+  const showPercentageBool = boolean("show percentage", false);
+  const colorString = select("color", colorOptions, null);
+  const sizeString = select("size", sizeOptions, null);
+  const widthString = text("width", "300px");
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-progress-bar
+      progress=${progressNum}
+      label="${labelString}"
+      show-spinner=${showSpinner}
+      show-percentage=${showPercentageBool}
+      color=${colorString}
+      size=${sizeString}
+      width=${widthString}
+    />
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.css

@@ -0,0 +1,105 @@
+pn-progress-indicator-step {
+  display: flex;
+  flex: 1 0 4em;
+}
+pn-progress-indicator-step:first-child {
+  flex: 0 0 auto;
+}
+pn-progress-indicator-step:first-child .progress-line {
+  display: none;
+}
+pn-progress-indicator-step:first-child .info-container {
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+.pn-progress-indicator-step {
+  position: relative;
+  display: flex;
+  flex: 1 0 4em;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
+}
+.pn-progress-indicator-step .circle {
+  width: 1.5em;
+  height: 1.5em;
+  padding: 0.3rem;
+  border-radius: 50%;
+  background-color: #F3F2F2;
+  transition: background-color 0.3s ease-in-out;
+}
+.pn-progress-indicator-step .info-container {
+  position: absolute;
+  bottom: -2.5em;
+  right: 0;
+  transform: translateX(50%) translateX(-1.2rem);
+  white-space: nowrap;
+  color: #F3F2F2;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  transition: color 0.3s ease-in-out;
+  font-size: 1em;
+  font-weight: normal;
+}
+.pn-progress-indicator-step .info-container svg {
+  height: 1.7em;
+  width: 1.7em;
+  margin-bottom: 0.1em;
+}
+.pn-progress-indicator-step .info-container svg path,
+.pn-progress-indicator-step .info-container svg polygon {
+  fill: #F3F2F2;
+  transition: fill 0.3s ease-in-out;
+}
+.pn-progress-indicator-step .progress-line {
+  flex: 1 1 auto;
+  margin: auto 4px;
+  height: 0.8rem;
+  background-color: #F3F2F2;
+  position: relative;
+  overflow: hidden;
+  pointer-events: none;
+  border-radius: 10rem;
+}
+.pn-progress-indicator-step .progress-line:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0.8rem;
+  width: 100%;
+  background-color: #005D92;
+  transition: transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.3s;
+  transform: translateX(-100%);
+}
+.pn-progress-indicator-step.active .info-container {
+  color: black;
+}
+.pn-progress-indicator-step.active .info-container svg path {
+  fill: #000;
+}
+.pn-progress-indicator-step.active .info-container svg polygon {
+  fill: #000;
+}
+.pn-progress-indicator-step.activated {
+  cursor: pointer;
+}
+.pn-progress-indicator-step.done .progress-line:after, .pn-progress-indicator-step.active .progress-line:after {
+  transform: translateX(0);
+}
+.pn-progress-indicator-step.done .circle, .pn-progress-indicator-step.active .circle {
+  background-color: #005D92;
+}
+.pn-progress-indicator-step.done .checkmark-path {
+  stroke-linecap: round;
+  stroke-dasharray: 27;
+  stroke-dashoffset: -23;
+  animation: dash 0.3s cubic-bezier(0.55, 0, 0.1, 1) both;
+}
+
+@keyframes dash {
+  to {
+    stroke-dashoffset: 0;
+  }
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator-step/pn-progress-indicator-step.js

@@ -0,0 +1,162 @@
+import { Component, Prop, Event, h, Host, State } from "@stencil/core";
+export class PnProgressIndicatorStep {
+  setActiveStepHandler() {
+    if (this.done || this.activated) {
+      this.setactivestep.emit(this.index);
+    }
+  }
+  componentWillLoad() {
+    this.checkStatus();
+  }
+  componentDidUpdate() {
+    this.checkStatus();
+  }
+  checkStatus() {
+    if (!this.done) {
+      this.done = this.checked || this.activeStep > this.index;
+    }
+    if (this.active === "yes") {
+      this.activated = true;
+    }
+    else if (this.active === "no") {
+      this.activated = false;
+      this.done = false;
+    }
+    else if (!this.activated) {
+      this.activated = this.activeStep >= this.index;
+    }
+  }
+  getClassNames() {
+    let className = "pn-progress-indicator-step";
+    if (this.done || this.checked)
+      className += " done";
+    if (this.activated)
+      className += " activated";
+    if (this.activeStep === this.index)
+      className += " active";
+    return className;
+  }
+  render() {
+    return (h(Host, { class: this.getClassNames(), onClick: () => this.setActiveStepHandler() },
+      h("div", { class: "progress-line" }),
+      h("div", { class: "info-container" },
+        h("slot", null),
+        this.name),
+      h("div", { class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" },
+        h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: "#FFF", "stroke-miterlimit": "10", "stroke-width": "3" }))) : (""))));
+  }
+  static get is() { return "pn-progress-indicator-step"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-progress-indicator-step.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-progress-indicator-step.css"]
+  }; }
+  static get properties() { return {
+    "activeStep": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active-step",
+      "reflect": false
+    },
+    "index": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "index",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false
+    },
+    "active": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"yes\" | \"no\"",
+        "resolved": "\"no\" | \"yes\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "activated": {},
+    "done": {}
+  }; }
+  static get events() { return [{
+      "method": "setactivestep",
+      "name": "setactivestep",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator-step/progress-indicator-step.stories.js

@@ -0,0 +1,15 @@
+import { select } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "feedback/Progress Indicator/Progress Indicator Step",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const progressIndicatorStep = () => {
+  return `
+    <h1>This story is just to give you access to the docs to show props.</h1>
+  `;
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator.css

@@ -0,0 +1,4 @@
+.pn-progress-indicator {
+  display: flex;
+  padding: 2.8em 1em 0;
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/pn-progress-indicator.js

@@ -0,0 +1,79 @@
+import { Component, Prop, Element, Listen, Event, h } from "@stencil/core";
+export class PnProgressIndicator {
+  constructor() {
+    /** Takes the index of the active step */
+    this.activeStep = 0;
+  }
+  setActiveStepHandler({ detail }) {
+    this.activeStep = detail;
+    this.progresschange.emit(this.activeStep);
+  }
+  componentWillLoad() {
+    this.passPropsToChildren();
+  }
+  componentDidUpdate() {
+    this.passPropsToChildren();
+  }
+  passPropsToChildren() {
+    let children = Array.from(this.hostElement.querySelectorAll("pn-progress-indicator-step"));
+    children.forEach((child, i) => {
+      child.activeStep = this.activeStep;
+      child.index = i;
+    });
+  }
+  render() {
+    return (h("div", { class: "pn-progress-indicator" },
+      h("slot", null)));
+  }
+  static get is() { return "pn-progress-indicator"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-progress-indicator.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-progress-indicator.css"]
+  }; }
+  static get properties() { return {
+    "activeStep": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Takes the index of the active step"
+      },
+      "attribute": "active-step",
+      "reflect": false,
+      "defaultValue": "0"
+    }
+  }; }
+  static get events() { return [{
+      "method": "progresschange",
+      "name": "progresschange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "This will emit when progress is changed and is the value you want to bind to your VM state"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "setactivestep",
+      "method": "setActiveStepHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-progress-indicator/progress-indicator.stories.js

@@ -0,0 +1,22 @@
+import { select } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "feedback/Progress Indicator",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const progressIndicator = () => {
+  const activeStep = select("active step", [0, 1,2,3,4,5], 2);
+  return `
+    <pn-progress-indicator active-step="${activeStep}">
+      <pn-progress-indicator-step name="step 1"></pn-progress-indicator-step>
+      <pn-progress-indicator-step name="step 2"></pn-progress-indicator-step>
+      <pn-progress-indicator-step name="step 3"></pn-progress-indicator-step>
+      <pn-progress-indicator-step name="step 4"></pn-progress-indicator-step>
+      <pn-progress-indicator-step name="step 5"></pn-progress-indicator-step>
+    </pn-progress-indicator>
+  `;
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-spinner/pn-spinner.css

@@ -0,0 +1,53 @@
+pn-spinner {
+  height: 1.5em;
+  width: 1.5em;
+  height: var(--size);
+  width: var(--size);
+  display: block;
+}
+pn-spinner svg {
+  animation: rotate 1s infinite;
+  display: block;
+}
+pn-spinner svg .circle {
+  stroke: #005D92;
+  transform-origin: center center;
+  transform: rotate(-310deg);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 64;
+  animation: loading 2s infinite;
+}
+pn-spinner svg .dot {
+  fill: #005D92;
+}
+pn-spinner.light .circle {
+  stroke: #fff;
+}
+pn-spinner.light .dot {
+  fill: #fff;
+}
+pn-spinner svg,
+pn-spinner svg .circle {
+  animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
+}
+
+@keyframes loading {
+  0% {
+    stroke-dashoffset: 55;
+  }
+  50% {
+    stroke-dashoffset: 12;
+  }
+  100% {
+    stroke-dashoffset: 55;
+  }
+}
+@keyframes rotate {
+  from {
+    transform: rotate(-180deg) scaleX(-1);
+  }
+  to {
+    transform: rotate(180deg) scaleX(-1);
+  }
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-spinner/pn-spinner.js

@@ -0,0 +1,61 @@
+import { Component, Element, Prop, h, Host } from "@stencil/core";
+export class PnSpinner {
+  constructor() {
+    /** Light version of the spinner */
+    this.light = false;
+    /** Size in em */
+    this.size = '1.5';
+  }
+  render() {
+    return (h(Host, { class: (this.light) ? 'light' : '', style: { '--size': this.size + 'em' } },
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" },
+        h("circle", { class: "circle", cx: "12", cy: "12", r: "10", "stroke-width": "3" }),
+        h("circle", { class: "dot", cx: "21.3", cy: "16", r: "1.48" }))));
+  }
+  static get is() { return "pn-spinner"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-spinner.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-spinner.css"]
+  }; }
+  static get properties() { return {
+    "light": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Light version of the spinner"
+      },
+      "attribute": "light",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Size in em"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'1.5'"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-spinner/spinner.stories.js

@@ -0,0 +1,19 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "feedback/Spinner",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const regular = () => {
+  const color = boolean("light version", false);
+  const size = text("size", "1.5");
+
+  return `
+    <pn-spinner light="${color}" size="${size}" />
+  `;
+}

package/umd/modules/@postnord/web-components/collection/components/feedback/pn-toast/pn-toast.css

@@ -0,0 +1,96 @@
+pn-toast.pn-toast {
+  /* -----------------DEFAULT AND COMMONS----------------- */
+  color: #000;
+  padding: 1em;
+  border: 0.1rem solid #005D92;
+  border-radius: 0.8rem;
+  outline: none;
+  font-size: 1em;
+  font-weight: 400;
+  background: #E0F8FF;
+  display: inline-flex;
+  align-items: flex-start;
+  opacity: 1;
+  visibility: visible;
+  transition: visibility 0s linear 0s, opacity 0.35s, box-shadow 0.2s;
+  z-index: 10;
+  /* ------HIDDEN STATE------------- */
+  /* -------/HIDDEN STATE------------ */
+  /* -----------------END DEFAULTS----------------- */
+  /* -----------------WARNING----------------- */
+  /* -----------------END WARNING----------------- */
+  /* -----------------SUCCESS----------------- */
+  /* -----------------END SUCCESS----------------- */
+  /* -----------------TEMPORARY TOAST----------------- */
+  /* -----------------END TEMPORARY TOAST----------------- */
+}
+pn-toast.pn-toast[data-hidden] {
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0s linear 0.35s, opacity 0.35s, box-shadow 0.2s;
+}
+pn-toast.pn-toast pn-icon svg path {
+  fill: #005D92;
+  transition: fill 0.3s;
+}
+pn-toast.pn-toast > .content {
+  margin-right: 0.5em;
+  align-self: center;
+}
+pn-toast.pn-toast > pn-icon {
+  margin-right: 0.5em;
+}
+pn-toast.pn-toast button {
+  cursor: pointer;
+  border-radius: 50%;
+  border: none;
+  background: none;
+  padding: 0.1em;
+  font-size: 1.2em;
+  margin-left: auto;
+  outline: none;
+  transition: background 0.2s, box-shadow 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+pn-toast.pn-toast button:hover {
+  background: #8EDDF9;
+}
+pn-toast.pn-toast button:focus {
+  background: #8EDDF9;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+}
+pn-toast.pn-toast.pn-toast-warning {
+  border: 0.1rem solid #A70707;
+  background: #FDEFEE;
+}
+pn-toast.pn-toast.pn-toast-warning button:hover {
+  background: #FBC2C1;
+}
+pn-toast.pn-toast.pn-toast-warning button:focus {
+  background: #FBC2C1;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;
+}
+pn-toast.pn-toast.pn-toast-warning pn-icon svg path {
+  fill: #A70707;
+  transition: fill 0.3s;
+}
+pn-toast.pn-toast.pn-toast-success {
+  border: 0.1rem solid #005E41;
+  background: #DCF6E7;
+}
+pn-toast.pn-toast.pn-toast-success button:focus {
+  background: #ABE3BB;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41;
+}
+pn-toast.pn-toast.pn-toast-success button:hover {
+  background: #ABE3BB;
+}
+pn-toast.pn-toast.pn-toast-success pn-icon svg path {
+  fill: #005E41;
+  transition: fill 0.3s;
+}
+pn-toast.pn-toast.pn-toast-temporary {
+  box-shadow: 0px 1.2px 3.6px rgba(0, 0, 0, 0.1), 0px 6.4px 14.4px rgba(0, 0, 0, 0.13);
+}