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

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/pn-tab.js

@@ -0,0 +1,99 @@
+import { Component, Prop, Event, Element, h } from "@stencil/core";
+export class PnTab {
+  setActiveTabHandler() {
+    this.setactivetab.emit({ val: this.value, el: this.hostElement });
+  }
+  componentDidUpdate() {
+    if (this.activeTab === this.value) {
+      this.setActiveTabHandler();
+    }
+  }
+  getClassNames() {
+    let className = "pn-tab";
+    if (this.activeTab === this.value)
+      className += " active";
+    return className;
+  }
+  render() {
+    return (h("button", { class: this.getClassNames(), onClick: () => this.setActiveTabHandler() },
+      h("slot", null),
+      this.label));
+  }
+  static get is() { return "pn-tab"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-tab.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-tab.css"]
+  }; }
+  static get properties() { return {
+    "activeTab": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "active-tab",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "setactivetab",
+      "name": "setactivetab",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+}

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/pn-tablist.css

@@ -0,0 +1,104 @@
+.pn-tablist {
+  width: 100%;
+  position: relative;
+  border-bottom: 0.1em solid #D4CECB;
+  display: block;
+}
+.pn-tablist > .tablist {
+  overflow-y: hidden;
+  overflow-x: auto;
+  display: flex;
+  position: relative;
+  scroll-snap-type: x mandatory;
+}
+.pn-tablist > .tablist::-webkit-scrollbar {
+  display: none;
+}
+.pn-tablist.stacked button.pn-tab {
+  flex-direction: column;
+}
+.pn-tablist.stacked button.pn-tab svg {
+  margin: 0 0 0.2em;
+}
+.pn-tablist .scroll-arrows {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1;
+  height: 100%;
+}
+.pn-tablist .scroll-arrows.left > .arrow-left {
+  opacity: 1;
+  transform: translate(0);
+}
+.pn-tablist .scroll-arrows.right > .arrow-right {
+  opacity: 1;
+  transform: translate(0);
+}
+.pn-tablist .scroll-arrows svg {
+  width: 1.5em;
+}
+.pn-tablist .scroll-arrows svg path {
+  fill: #005D92;
+}
+.pn-tablist .scroll-arrows > * {
+  transition: transform 0.2s, opacity 0.2s, background 0.1s, box-shadow 0.1s;
+  pointer-events: all;
+  width: 2.5em;
+  height: 2.5em;
+  background: white;
+  border: none;
+  opacity: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  cursor: pointer;
+}
+.pn-tablist .scroll-arrows > *.arrow-left {
+  transform: translateX(-100%);
+  border-radius: 0 50% 50% 0;
+  padding: 0 0.3em 0 0;
+  box-shadow: 0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);
+}
+.pn-tablist .scroll-arrows > *.arrow-right {
+  transform: translateX(100%);
+  border-radius: 50% 0 0 50%;
+  padding: 0 0 0 0.3em;
+  box-shadow: -0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);
+}
+.pn-tablist .scroll-arrows > *:active {
+  background: #F3F2F2;
+}
+.pn-tablist .line {
+  height: 0.1em;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
+.pn-tablist .line .active-line,
+.pn-tablist .line .hovered-line {
+  position: absolute;
+  transform-origin: left center;
+  width: 100%;
+  transition: transform 0.3s cubic-bezier(0.29, 0.15, 0.24, 0.97), opacity 0.2s ease-in-out;
+}
+.pn-tablist .line .active-line {
+  background-color: #005D92;
+  height: 0.5em;
+  bottom: -0.3em;
+  z-index: 1;
+  opacity: 0;
+}
+.pn-tablist .line .hovered-line {
+  background-color: #00A0D6;
+  height: 0.1em;
+  opacity: 0;
+}

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/pn-tablist.js

@@ -0,0 +1,250 @@
+import { Component, Prop, Listen, Element, Event, State, h, Host, Watch, forceUpdate } from "@stencil/core";
+export class PnTablist {
+  constructor() {
+    /** The value of the tab that is currently active */
+    this.value = null;
+    /** Icons are stacked vertically instead of the default rows */
+    this.stackedicons = false;
+    this.showScrollArrows = false;
+    this.isTabHovered = false;
+    this.enterHandler = this.handleEnter.bind(this);
+    this.leaveHandler = this.handleLeave.bind(this);
+    // We need this to be stateful because we need it to update on scroll
+    this.scrollArrowClasses = 'scroll-arrows ';
+  }
+  valueWatcher() {
+    this.setValue();
+  }
+  setActiveTabHandler({ detail }) {
+    this.tabElement = detail.el;
+    requestAnimationFrame(() => this.activateTab());
+    if (this.value === detail.val)
+      return;
+    this.value = detail.val;
+    this.tabchange.emit(this.value);
+  }
+  handleResize() {
+    this.rerender();
+  }
+  componentDidLoad() {
+    this.rerender();
+    this.setValue();
+    this.registerEvents();
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      forceUpdate(this.hostElement);
+      this.rerender();
+      this.registerEvents();
+    });
+    mo.observe(this.hostElement, { childList: true });
+  }
+  setValue() {
+    const children = Array.from(this.hostElement.querySelectorAll("pn-tab"));
+    children.forEach(child => {
+      child.activeTab = this.value;
+    });
+  }
+  rerender() {
+    requestAnimationFrame(() => {
+      this.scrollIndicators();
+      this.calcActiveItemHighlight();
+    });
+  }
+  activateTab() {
+    const tabListCoords = this.hostElement.getBoundingClientRect();
+    const activeTabCoords = this.tabElement.querySelector('button').getBoundingClientRect();
+    const scrollOffset = this.hostElement.querySelector(".tablist").scrollLeft;
+    const activeLine = this.hostElement.querySelector(".line .active-line");
+    const coords = {
+      scale: activeTabCoords.width / tabListCoords.width,
+      offset: (activeTabCoords.left + scrollOffset) - tabListCoords.left
+    };
+    activeLine.style.setProperty("transform", `translateX(${coords.offset}px) scaleX(${coords.scale})`);
+    activeLine.style.setProperty("opacity", "1");
+  }
+  calcActiveItemHighlight() {
+    this.isTabHovered = false;
+    this.tabListEl = this.hostElement.querySelector(".tablist");
+    this.hoveredLine = this.tabListEl.querySelector(".hovered-line");
+  }
+  handleEnter(e) {
+    this.isTabHovered = true;
+    const hoveredTabCoords = e.target.getBoundingClientRect();
+    const tabListCoords = this.tabListEl.getBoundingClientRect();
+    const scrollOffset = this.tabListEl.scrollLeft;
+    const coords = {
+      scale: hoveredTabCoords.width / tabListCoords.width,
+      offset: (hoveredTabCoords.left + scrollOffset) - tabListCoords.left
+    };
+    this.hoveredLine.style.setProperty("transform", `translateX(${coords.offset}px) scaleX(${coords.scale})`);
+    this.hoveredLine.style.setProperty("opacity", "1");
+  }
+  handleLeave() {
+    this.isTabHovered = false;
+    setTimeout(() => {
+      if (!this.isTabHovered)
+        this.hoveredLine.style.setProperty("opacity", "0");
+    }, 500);
+  }
+  registerEvents() {
+    const preExistingTabs = this.availableTabs ? this.availableTabs : null;
+    this.availableTabs = this.hostElement.querySelectorAll("button.pn-tab");
+    if (preExistingTabs) {
+      this.availableTabs.forEach(tab => {
+        tab.removeEventListener("mouseenter", this.enterHandler);
+        tab.removeEventListener("focus", this.enterHandler);
+        tab.removeEventListener("mouseleave", this.leaveHandler);
+        tab.removeEventListener("blur", this.leaveHandler);
+      });
+    }
+    this.availableTabs.forEach(tab => {
+      tab.addEventListener("mouseenter", this.enterHandler);
+      tab.addEventListener("focus", this.enterHandler);
+      tab.addEventListener("mouseleave", this.leaveHandler);
+      tab.addEventListener("blur", this.leaveHandler);
+    });
+  }
+  /*---------------------------------------/HOVER LOGIC-------------------------------------------*/
+  /*-------------------------------------- SCROLL RELATED ---------------------------------------------**/
+  scrollHandler() {
+    if (this.showScrollArrows) {
+      this.hostElement.querySelector(".tablist").addEventListener("scroll", () => this.scrollIndicators());
+    }
+    else {
+      this.hostElement.querySelector(".tablist").removeEventListener("scroll", () => this.scrollIndicators());
+    }
+  }
+  scrollIndicators() {
+    const tabListWidth = this.hostElement.querySelector(".tablist").scrollWidth;
+    const containerWidth = this.hostElement.clientWidth + 15;
+    const scrollOffset = this.hostElement.querySelector(".tablist").scrollLeft;
+    this.showScrollArrows = (tabListWidth > containerWidth);
+    this.scrollArrowClasses = "scroll-arrows ";
+    if (this.showScrollArrows) {
+      if (scrollOffset > 0)
+        this.scrollArrowClasses += "left ";
+      if (containerWidth + scrollOffset < tabListWidth)
+        this.scrollArrowClasses += "right ";
+    }
+  }
+  scroll(val) {
+    const tabList = this.hostElement.querySelector(".tablist");
+    let amount = tabList.scrollLeft + val;
+    // Options aren't supported in Safari, I think this might needed as a fallback but might be wrong.
+    // tabList.scroll(amount, 0);
+    tabList.scroll({
+      left: amount,
+      behavior: "smooth"
+    });
+  }
+  /*-------------------------------------- /SCROLL RELATED ---------------------------------------------**/
+  getClassNames() {
+    let classNames = "pn-tablist";
+    if (this.stackedicons)
+      classNames += " stacked";
+    return classNames;
+  }
+  render() {
+    return (h(Host, { role: "tablist", "aria-label": "tablist", class: this.getClassNames() },
+      h("div", { class: "tablist" },
+        h("slot", null),
+        h("div", { class: "line" },
+          h("div", { class: "active-line" }),
+          h("div", { class: "hovered-line" }))),
+      this.showScrollArrows && (h("div", { class: this.scrollArrowClasses },
+        h("button", { class: "arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" },
+          h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.414 12l7.293-7.293-1.414-1.414L6.586 12l8.707 8.707 1.414-1.414L9.414 12z" }))),
+        h("button", { class: "arrow-right", onClick: () => this.scroll(120), tabindex: "-1" },
+          h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.707 3.293L17.414 12l-8.707 8.707-1.414-1.414L14.586 12 7.293 4.707l1.414-1.414z" })))))));
+  }
+  static get is() { return "pn-tablist"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-tablist.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-tablist.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The value of the tab that is currently active"
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "stackedicons": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icons are stacked vertically instead of the default rows"
+      },
+      "attribute": "stackedicons",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "tabElement": {},
+    "showScrollArrows": {},
+    "scrollArrowClasses": {}
+  }; }
+  static get events() { return [{
+      "method": "tabchange",
+      "name": "tabchange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "This will emit when a tab 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 watchers() { return [{
+      "propName": "value",
+      "methodName": "valueWatcher"
+    }, {
+      "propName": "showScrollArrows",
+      "methodName": "scrollHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "setactivetab",
+      "method": "setActiveTabHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tablist/tablist.stories.js

@@ -0,0 +1,37 @@
+import readme from "./readme.md";
+import { boolean } from "@storybook/addon-knobs";
+
+export default {
+  title: "navigation/Tablist",
+  component: "tablist",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const standard = () => {
+  // Storybook Knobs, please ignore ----------------------------//
+  const stackedIcons = boolean("stacked icons", true);
+  // -----------------------------------------------------------//
+
+  return `
+    <pn-tablist value="item2" stackedicons=${stackedIcons}>
+      <pn-tab label="item long" value="item1">
+        <pn-icon symbol="bolt"></pn-icon>
+      </pn-tab>
+      <pn-tab value="item2">
+        <pn-icon symbol="bell"></pn-icon>
+        item slotted
+      </pn-tab>
+      <pn-tab label="item long name" value="item3">
+        <pn-icon symbol="credit-card"></pn-icon>
+      </pn-tab>
+      <pn-tab label="item longer" value="item4">
+        <pn-icon symbol="dashboard"></pn-icon>
+      </pn-tab>
+      <pn-tab label="item" value="item5">
+        <pn-icon symbol="truck"></pn-icon>
+      </pn-tab>
+    </pn-tablist>
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/navigation/pn-tile/pn-tile.css

@@ -0,0 +1,153 @@
+pn-tile {
+  position: relative;
+  font-size: 1em;
+  /*---------------------------HIDDEN LINK ELEMENT-------------------------------*/
+  /*---------------------------/HIDDEN LINK ELEMENT-------------------------------*/
+  /*---------------------------TILE/CARD STYLES-------------------------------*/
+  /*---------------------------/TILE/CARD STYLES-------------------------------*/
+  /*----------------------MISC (circle, ripple effect)-------------------------*/
+  /*--------------------------------/MISC-----------------------------------*/
+}
+pn-tile a.pn-tile-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  opacity: 0;
+}
+pn-tile .pn-tile {
+  border: 0.1rem solid #D3CECB;
+  outline: none;
+  background: white;
+  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1.5em;
+  padding: min(7%, 1.5em);
+  word-break: break-word;
+  text-decoration: none;
+  border-radius: 0.8rem;
+  transition: box-shadow 0.1s cubic-bezier(0.6, 0, 0.2, 1) 0.1s, background 0.2s linear, border 0.1s linear;
+  position: relative;
+  overflow: hidden;
+  text-align: left;
+  user-select: text;
+  height: 100%;
+}
+pn-tile .pn-tile.vertical, pn-tile .pn-tile.simple {
+  text-align: center;
+}
+pn-tile .pn-tile.vertical h3, pn-tile .pn-tile.simple h3 {
+  font-size: 1.5em;
+  font-size: clamp(1em, calc(var(--w) * 1.4), 1.5em);
+}
+pn-tile .pn-tile.vertical .tile-slot, pn-tile .pn-tile.simple .tile-slot {
+  font-size: 1em;
+  font-size: clamp(1.2rem, var(--w), 1em);
+}
+pn-tile .pn-tile.vertical > *, pn-tile .pn-tile.simple > * {
+  margin: 0.5em 0;
+}
+pn-tile .pn-tile.simple {
+  flex-direction: column;
+  align-items: center;
+}
+pn-tile .pn-tile.simple .tile-slot {
+  display: none;
+}
+pn-tile .pn-tile.simple h3 > pn-icon {
+  margin-left: 0.1em;
+  vertical-align: bottom;
+}
+pn-tile .pn-tile.simple > * {
+  margin: 0.5em;
+}
+pn-tile .pn-tile.simple > .text-cont {
+  margin: 0.5em;
+}
+pn-tile .pn-tile.simple > svg,
+pn-tile .pn-tile.simple > .tile-illustration-slot {
+  max-width: clamp(3em, 70%, 10em);
+}
+pn-tile .pn-tile.simple > svg,
+pn-tile .pn-tile.simple > .tile-illustration-slot,
+pn-tile .pn-tile.simple > .text-cont {
+  flex: auto;
+}
+pn-tile .pn-tile > * {
+  margin: 0.5em;
+  z-index: 2;
+}
+pn-tile .pn-tile > svg,
+pn-tile .pn-tile > .tile-illustration-slot {
+  width: 100%;
+  max-width: 8em;
+  flex: 0.5 3 calc(calc(32rem - 100%) * 999);
+  z-index: 2;
+}
+pn-tile .pn-tile > .tile-illustration-slot {
+  max-width: 13em;
+}
+pn-tile .pn-tile > .tile-illustration-slot > * {
+  width: 100%;
+  display: block;
+}
+pn-tile .pn-tile > .text-cont {
+  flex: 1 1 calc(calc(32rem - 100%) * 999);
+}
+pn-tile .pn-tile h3 {
+  color: #005D92;
+  font-size: 1.5em;
+}
+pn-tile .pn-tile .tile-slot {
+  color: #5E554A;
+  margin-top: 0.25em;
+}
+pn-tile a:focus + .pn-tile {
+  box-shadow: 0 0 0 0.3rem white, 0 0 0 0.6rem #005D92;
+}
+pn-tile a:focus + .pn-tile,
+pn-tile .pn-tile:hover {
+  background: #EFFBFF;
+}
+pn-tile .pn-tile:hover, pn-tile a:focus + .pn-tile {
+  border: 0.1rem solid #8EDDF9;
+}
+pn-tile .pn-tile:hover.vertical .tile-circle, pn-tile .pn-tile:hover.simple .tile-circle, pn-tile a:focus + .pn-tile.vertical .tile-circle, pn-tile a:focus + .pn-tile.simple .tile-circle {
+  transform: translate(-50%, -90%);
+  transform: translate(-50%, calc(var(--w) * 2 - 90%));
+  opacity: 1;
+}
+pn-tile .pn-tile .tile-circle {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 40em;
+  height: 40em;
+  margin: 0;
+  background-color: #005D92;
+  border-radius: 50%;
+  z-index: 1;
+  transform: translate(-50%, -100%);
+  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s cubic-bezier(0.7, 0, 0.3, 1);
+  opacity: 0;
+}
+pn-tile .pn-ripple {
+  animation: ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);
+  position: absolute;
+  border-radius: 50%;
+  background: #005D92;
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0.05;
+}
+@keyframes ripple {
+  to {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}