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

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

@@ -0,0 +1,195 @@
+import { Component, Host, Prop, h, Element, Event, Watch, State } from "@stencil/core";
+export class Pntoast {
+  constructor() {
+    /**  set left icon */
+    this.icon = null;
+    /** Show close button? */
+    this.closable = true;
+    /** Temporarily visible toast, the time of which is determined by the length of your message. Close button will be shown automatically if the time shown exceeds 6s. */
+    this.temporary = false;
+    /** If you want to control visibility with your own data you can bind to this attribute */
+    this.hidden = false;
+  }
+  componentDidLoad() {
+    if (this.temporary) {
+      const content = this.hostElement.querySelector('.content');
+      const readingTime = content.textContent.split(' ').length / 4 * 1000; //Average read speed is 4wps.
+      this.hidden = true;
+      this.timer = readingTime > 3000 ? readingTime : 3000; //For short messages, default to 3s.
+      if (this.manualDuration)
+        this.timer = this.manualDuration; //Allow consumers to manually adjust duration if needed.
+      this.closable = this.timer > 6000; //If duration is longer than 6s, allow the user to close manually.
+    }
+  }
+  visibilityHandler() {
+    if (!this.temporary)
+      return;
+    if (this.timeout && this.hidden) {
+      clearTimeout(this.timeout);
+      return;
+    }
+    this.timeout = setTimeout(() => {
+      this.closeToast();
+    }, this.timer);
+  }
+  closeToast() {
+    this.hidden = true;
+    this.close.emit();
+  }
+  getClassNames() {
+    let classNames = "pn-toast ";
+    if (this.appearance)
+      classNames += `pn-toast-${this.appearance} `;
+    if (this.temporary)
+      classNames += `pn-toast-temporary `;
+    return classNames;
+  }
+  render() {
+    return (h(Host, { "data-hidden": this.hidden, class: this.getClassNames() },
+      this.icon && h("pn-icon", { symbol: this.icon }),
+      h("div", { class: "content" },
+        h("slot", null)),
+      this.closable &&
+        h("button", { onClick: () => this.closeToast(), type: "button", title: "close", "aria-label": "close" },
+          h("pn-icon", { symbol: "close", small: true }))));
+  }
+  static get is() { return "pn-toast"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-toast.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-toast.css"]
+  }; }
+  static get properties() { return {
+    "appearance": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "success or warning, defaults to blue"
+      },
+      "attribute": "appearance",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "set left icon"
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "closable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Show close button?"
+      },
+      "attribute": "closable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "temporary": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Temporarily visible toast, the time of which is determined by the length of your message. Close button will be shown automatically if the time shown exceeds 6s."
+      },
+      "attribute": "temporary",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "manualDuration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If you want to set the duration of the visibility manually, time in milliseconds"
+      },
+      "attribute": "manual-duration",
+      "reflect": false
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If you want to control visibility with your own data you can bind to this attribute"
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "timeout": {}
+  }; }
+  static get events() { return [{
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when close button is pressed and when the temporary toast closes itself"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "hidden",
+      "methodName": "visibilityHandler"
+    }]; }
+}

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

@@ -0,0 +1,28 @@
+import { select, text, boolean, number} from "@storybook/addon-knobs";
+import icons from "../../../assets/icons.ts";
+import readme from "./readme.md";
+
+export default {
+  title: "feedback/Toast",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const appearance = select("appearance", ['', 'success', 'warning'], '');
+  const icon = select("icon", Object.keys(icons), 'alert-exclamation-circle');
+  const hidden = boolean("hidden", false);
+  const closable = boolean("closable", true);
+  const temporary = boolean("temporary", false);
+  const content = text("Toast message", 'There is one Dwarf yet in Moria who still draws breath. Hobbitses will uses false flagon trees strengths heart.');
+  const manualDuration = number("manual duration", '');
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-toast appearance="${appearance}" icon="${icon}" hidden=${hidden} closable=${closable} temporary=${temporary} manual-duration=${manualDuration}>
+      ${content}
+    </pn-toast>
+  `;
+};

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

@@ -0,0 +1,94 @@
+pn-tooltip {
+  display: inline-block;
+  font-size: 1em;
+}
+
+button.pn-tooltip {
+  background: none;
+  outline: none;
+  border: none;
+  position: relative;
+  padding: 0;
+  border-radius: 50%;
+  transition: box-shadow 0.15s cubic-bezier(0.5, 0.5, 0.2, 1), background 0.15s cubic-bezier(0.5, 0.5, 0.2, 1);
+  cursor: pointer;
+  font-size: inherit;
+}
+button.pn-tooltip:focus {
+  box-shadow: 0 0 0 0.1rem #FFFFFF, 0 0 0 0.3rem #005D92;
+  background: #E0F8FF;
+}
+button.pn-tooltip:hover {
+  background: #E0F8FF;
+}
+button.pn-tooltip.tooltip-white:focus, button.pn-tooltip.tooltip-white:hover {
+  background: #0D234B;
+}
+
+button.pn-tooltip > .pn-tooltip-content {
+  position: absolute;
+  bottom: calc(100% + 0.75em);
+  left: 50%;
+  background: #FFFFFF;
+  padding: 1em;
+  border-radius: 0.8rem;
+  box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);
+  z-index: 1;
+  max-width: min(95vw, 40em);
+  transition: transform 0.15s cubic-bezier(0.5, 0.5, 0.2, 1);
+  transition-delay: 0s;
+  transform: scale(0) translateX(-50%);
+  transform-origin: bottom left;
+  width: max-content;
+  color: #000;
+}
+
+button.pn-tooltip > pn-icon {
+  position: relative;
+  pointer-events: none;
+}
+button.pn-tooltip > pn-icon:before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 0.75em solid transparent;
+  border-right: 0.75em solid transparent;
+  border-top: 0.75em solid #FFFFFF;
+  filter: drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));
+  transform: scale(0) translateX(-50%);
+  bottom: 102%;
+  left: 50%;
+  position: absolute;
+  z-index: 2;
+  transition: transform 0.15s linear;
+  transition-delay: 0.14s;
+  transform-origin: bottom left;
+  pointer-events: none;
+}
+
+/*---------------------------------------DOWNWARDS-------------------------------------------*/
+button.pn-tooltip.pn-tooltip-downwards .pn-tooltip-content {
+  bottom: unset;
+  top: calc(100% + 0.75em);
+  transform-origin: top left;
+}
+button.pn-tooltip.pn-tooltip-downwards pn-icon:before {
+  top: 102%;
+  transform-origin: top left;
+  filter: drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));
+  border-top: none;
+  border-bottom: 0.75em solid #FFFFFF;
+}
+
+/*---------------------------------------/DOWNWARDS-------------------------------------------*/
+/*---------------------------------------OPEN-------------------------------------------*/
+button.pn-tooltip[data-open] .pn-tooltip-content {
+  transition-delay: 0.1s;
+}
+button.pn-tooltip[data-open] pn-icon:before {
+  transform: scale(1) translateX(-50%);
+  transition-delay: 0s;
+  pointer-events: auto;
+}
+
+/*---------------------------------------/OPEN-------------------------------------------*/

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

@@ -0,0 +1,156 @@
+import { Element, Component, Prop, h, State, Watch } from "@stencil/core";
+export class PnTooltip {
+  constructor() {
+    this.warning = false;
+    this.color = 'blue700';
+    this.downwards = false;
+    this.open = false;
+    this.deltaX = '0';
+  }
+  componentWillLoad() {
+    const appearances = ['warning', 'white'];
+    this.color = appearances.includes(this.color) ? this.color : 'blue700';
+  }
+  componentDidLoad() {
+    this.initialize();
+    this.eventHandler();
+  }
+  initialize() {
+    this.pnTooltipContent = this.hostElement.querySelector('.pn-tooltip-content');
+  }
+  openHandler() {
+    if (this.open) {
+      this.checkPosition();
+      return;
+    }
+    this.setTransform();
+  }
+  eventHandler() {
+    const openEvents = ['mouseover', 'focus'];
+    const closeEvents = ['mouseleave', 'blur'];
+    const eventListeners = ['click', ...openEvents, ...closeEvents];
+    eventListeners.forEach((e) => {
+      this.hostElement.querySelector('.pn-tooltip').addEventListener(e, (event) => {
+        // Should toggle?
+        if (event.type === 'click') {
+          this.toggle();
+          return;
+        }
+        // Should open?
+        if (openEvents.includes(event.type)) {
+          if (event.type === 'mouseover' && this.timeout)
+            clearTimeout(this.timeout);
+          this.open = true;
+          return;
+        }
+        // Should close?
+        if (closeEvents.includes(event.type)) {
+          if (event.type === 'mouseleave') {
+            this.timeout = setTimeout(() => this.open = false, 800);
+          }
+          else {
+            this.open = false;
+          }
+        }
+      });
+    });
+  }
+  setTransform() {
+    this.pnTooltipContent.style.transform = `scale(${Number(this.open)}) translateX(-50%) translateX(${this.deltaX}px)`;
+  }
+  checkPosition() {
+    this.pnTooltipContent.style.transition = 'none';
+    this.pnTooltipContent.style.transform = 'scale(1) translateX(-50%)';
+    this.downwards = false;
+    requestAnimationFrame(() => {
+      const { x, y, right } = this.pnTooltipContent.getBoundingClientRect();
+      const extraMargin = 8;
+      this.deltaX = '0';
+      this.downwards = y < 0;
+      this.pnTooltipContent.style.transform = '';
+      if (x < 0)
+        this.deltaX = `${x * -1 + extraMargin}`;
+      if (right > window.innerWidth)
+        this.deltaX = `${window.innerWidth - right - extraMargin}`;
+      requestAnimationFrame(() => {
+        this.pnTooltipContent.style.transition = '';
+        this.setTransform();
+      });
+    });
+  }
+  getSymbol() {
+    return this.warning ? 'alert-info-circle' : 'alert-question-circle';
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  getClassNames() {
+    let classNames = 'pn-tooltip ';
+    if (this.color === 'white')
+      classNames += 'tooltip-white ';
+    if (this.downwards)
+      classNames += 'pn-tooltip-downwards ';
+    return classNames;
+  }
+  render() {
+    return (h("button", { class: this.getClassNames(), "data-open": this.open },
+      h("pn-icon", { symbol: this.getSymbol(), color: this.color }),
+      h("div", { class: "pn-tooltip-content" },
+        h("slot", null))));
+  }
+  static get is() { return "pn-tooltip"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-tooltip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-tooltip.css"]
+  }; }
+  static get properties() { return {
+    "warning": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "warning",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "color": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'blue700'"
+    }
+  }; }
+  static get states() { return {
+    "downwards": {},
+    "open": {},
+    "deltaX": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openHandler"
+    }]; }
+}

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

@@ -0,0 +1,23 @@
+import { select, boolean } from '@storybook/addon-knobs';
+import readme from "./readme.md";
+import colors from "../../../assets/colors.ts";
+
+export default {
+  title: "feedback/Tooltip",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const standard = () => {
+  const warning = boolean('warning', false);
+  const color = select('select a color', ['blue', 'warning', 'white'], 'blue');
+
+  return `
+    <pn-tooltip color="${color}" warning=${warning}>
+      <h3>Title</h3>
+      <p>Text, text, text</p>
+    </pn-tooltip>
+  `;
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-calendar/calendar.stories.js

@@ -0,0 +1,55 @@
+import { boolean, date, select } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "input/Calendar",
+  parameters: {
+    notes: readme
+  }
+};
+
+const langOptions = ["sv", "da", "en", "fi", "no"];
+const startOfWeekOptions = [0, 1, 2, 3, 4, 5, 6];
+
+const customDateKnob = (name, defaultValue) => {
+  const stringTimestamp = date(name, defaultValue);
+  const dateFromTimestamp = new Date(stringTimestamp);
+  const day = dateFromTimestamp.getDate();
+  const month = dateFromTimestamp.getMonth();
+  const year = dateFromTimestamp.getFullYear();
+  return `${year}-${month+1}-${day}`;
+}
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const valueSelectedDate = customDateKnob("value", new Date('Jan 18 2020'));
+  const minSelectedDate = customDateKnob("min", new Date('Jan 4 2020'));
+  const maxSelectedDate = customDateKnob("max", new Date('Jan 26 2020'));
+  const disableDate = customDateKnob("disable specific date", new Date('Jan 24 2020'));
+  const languageString = select("language", langOptions, "sv");
+  const selectedStartOfWeek = select("start of week", startOfWeekOptions, 0);
+  const disabledWeekendsBool = boolean("disable weekends", false);
+  const minActiveDate = customDateKnob("min active date", new Date('Jan 8 2020'));
+  const maxActiveDate = customDateKnob("max active date", new Date('Jan 10 2020'));
+  const monthView = boolean("month view", false);
+  const disableMonthsView = boolean("disable months view", false);
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-calendar
+      value=${valueSelectedDate}
+      min=${minSelectedDate}
+      max=${maxSelectedDate}
+      language=${languageString}
+      disable-days="${disableDate},2020-01-23"
+      disable-weekends=${disabledWeekendsBool}
+      start-of-week=${selectedStartOfWeek}
+      min-active-date=${minActiveDate}
+      max-active-date=${maxActiveDate}
+      month-view="${monthView}"
+      disable-months-view="${disableMonthsView}"
+    >
+
+    </pn-calendar>
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/input/pn-calendar/pn-calendar.css

@@ -0,0 +1,110 @@
+pn-calendar .pn-calendar-wrapper {
+  position: relative;
+}
+pn-calendar .pn-calendar-container {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  background-color: white;
+  z-index: 9999;
+}
+pn-calendar .pn-calendar-container .pn-calendar-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.6rem;
+}
+pn-calendar .pn-calendar-container .pn-calendar-nav > div {
+  cursor: pointer;
+}
+pn-calendar .pn-calendar-container .pn-calendar-nav .nav-previous,
+pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next {
+  width: 3rem;
+  display: flex;
+}
+pn-calendar .pn-calendar-container .pn-calendar-nav .nav-previous {
+  text-align: left;
+  justify-content: flex-start;
+}
+pn-calendar .pn-calendar-container .pn-calendar-nav .nav-next {
+  text-align: right;
+  justify-content: flex-end;
+}
+pn-calendar .pn-calendar-container .pn-calendar-nav .pn-calendar-month {
+  padding: 1em;
+  border: 0.1rem solid #5E554A;
+  border-radius: 0.8rem;
+  font-size: 1.2rem;
+  color: #5E554A;
+  font-weight: 500;
+  text-align: center;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1.2rem;
+  color: #969087;
+  line-height: 2.4rem;
+  text-align: center;
+  font-weight: 300;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row > div {
+  width: 2.4rem;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-row .pn-calendar-month {
+  width: 6rem;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-day-names {
+  padding: 0.4rem 0;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months {
+  color: #5E554A;
+  padding: 0.8rem 0;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days:last-child,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months:last-child {
+  padding-bottom: 0;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month {
+  border-bottom: 0.4rem inset transparent;
+  cursor: pointer;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day {
+  cursor: default;
+  color: #D3CECB;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.disable-day:hover,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.disable-day:hover,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.disable-day:hover,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.disable-day:hover {
+  border-bottom-color: transparent;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.today,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.today,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.today,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.today {
+  outline: 0.1rem solid #D3CECB;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:hover,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:hover,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:hover,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:hover {
+  border-bottom-color: #00A0D6;
+}
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day:active, pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-day.selected,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month:active,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-days .pn-calendar-month.selected,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day:active,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-day.selected,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month:active,
+pn-calendar .pn-calendar-container .pn-calendar .pn-calendar-months .pn-calendar-month.selected {
+  border-bottom-color: #005D92;
+}