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

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

@@ -0,0 +1,40 @@
+import { boolean, text, select } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "input/Search Field",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const regular = () => {
+  const buttonTypes = ['', 'icon', 'none', 'icon-inline'];
+
+  // Storybook Knobs ------------------------------------------//
+  const label = text("button label", "search");
+  const name = text("name", "search");
+  const inputid = text("inputid", "search-test");
+  const autocomplete = text("autocomplete", "");
+  const placeholder = text("placeholder", "placeholder");
+  const button = select("button type", buttonTypes, '');
+  const disabled = boolean("disabled", false);
+  const loading = boolean("loading", false);
+  const light = boolean("light", false);
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-search-field
+      label="${label}"
+      name="${name}"
+      inputid="${inputid}"
+      autocomplete="${autocomplete}"
+      placeholder="${placeholder}"
+      button="${button}"
+      disabled=${disabled}
+      loading=${loading}
+      light="${light}"
+      />
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/controller/pn-segmented-control.css

@@ -0,0 +1,111 @@
+pn-segmented-control {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  border-radius: 3em;
+  transition: box-shadow 0.15s;
+  transform: translateZ(0);
+}
+
+.pn-segmented-control {
+  display: flex;
+  align-items: center;
+  border-radius: 3em;
+  min-height: 3em;
+  padding: 0.25em;
+  background: #F3F2F2;
+  position: relative;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+}
+.pn-segmented-control::-webkit-scrollbar {
+  display: none;
+}
+
+.pn-segmented-control > .pn-sc-bg {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  will-change: transform;
+  left: 0;
+  border-radius: inherit;
+  transition: width 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), transform 0.25s cubic-bezier(0.29, 0.15, 0.24, 0.97), background 0.15s, opacity 0.15s, box-shadow 0.15s;
+}
+.pn-segmented-control > .pn-sc-bg.pn-sc-active {
+  box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
+  border: 0.1rem solid #005D92;
+  background: #FFFFFF;
+  z-index: 1;
+}
+.pn-segmented-control > .pn-sc-bg.pn-sc-hover {
+  background: #E0F8FF;
+  opacity: 0;
+  border: 0.5rem solid transparent;
+  z-index: 0;
+}
+
+@media (hover: hover) {
+  .pn-segmented-control:hover .pn-sc-hover {
+    opacity: 1;
+  }
+}
+pn-segmented-control:focus-within,
+pn-segmented-control:active {
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+}
+
+/*---------------------------------------ARROWS-------------------------------------------*/
+pn-segmented-control .pn-sc-arrows {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 3;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  pointer-events: none;
+}
+pn-segmented-control .pn-sc-arrows svg {
+  width: 1.5em;
+}
+pn-segmented-control .pn-sc-arrows svg path {
+  fill: #005D92;
+}
+pn-segmented-control .pn-sc-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;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  cursor: pointer;
+  opacity: 0;
+  will-change: transform;
+  -webkit-tap-highlight-color: transparent;
+}
+pn-segmented-control .pn-sc-arrows > *.pn-sc-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-segmented-control .pn-sc-arrows > *.pn-sc-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-segmented-control .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left, pn-segmented-control .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/*---------------------------------------/ARROWS-------------------------------------------*/

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/controller/pn-segmented-control.js

@@ -0,0 +1,187 @@
+import { Component, Element, Prop, h, Host, Listen, State, Watch, forceUpdate } from "@stencil/core";
+export class PnSegmentedControl {
+  constructor() {
+    /** This is the name of the radio buttons inside the controller */
+    this.name = 'example-id';
+    this.showScrollArrows = false;
+    this.showLeftArrow = false;
+    this.showRightArrow = false;
+    this.segments = [];
+    this.scrollRegistered = false;
+  }
+  changeHandler({ target }) {
+    this.value = target.value;
+    this.currentSelection = target.closest('pn-segment');
+  }
+  handleResize() {
+    this.rerender();
+  }
+  selectionHandler() {
+    this.rerender();
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      forceUpdate(this.hostElement);
+      this.setActiveSegment();
+      this.rerender();
+    });
+    mo.observe(this.hostElement, { childList: true });
+    this.segmentContainer = this.hostElement.querySelector('.pn-segmented-control');
+    this.activeBg = this.hostElement.querySelector('.pn-sc-active');
+    this.hoverBg = this.hostElement.querySelector('.pn-sc-hover');
+    this.hostElement.addEventListener('mouseover', ({ target }) => this.calcHighlight(target, this.hoverBg));
+    this.setActiveSegment();
+  }
+  setActiveSegment() {
+    this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));
+    this.segments.forEach(segmentEl => {
+      if (this.value === segmentEl.value) {
+        this.currentSelection = segmentEl;
+        segmentEl.setAttribute('selected', 'true');
+      }
+      ;
+      segmentEl.setAttribute('name', this.name);
+    });
+  }
+  rerender() {
+    requestAnimationFrame(() => {
+      this.calcHighlight(this.currentSelection, this.activeBg);
+      this.scrollArrowRender();
+    });
+  }
+  /*---------------------------------------HIGHLIGHT LOGIC-------------------------------------------*/
+  calcHighlight(el, bgEl) {
+    if (!(el === null || el === void 0 ? void 0 : el.closest('pn-segment')))
+      return;
+    const elRect = el.closest('pn-segment').getBoundingClientRect();
+    const { left: hostLeft } = this.segmentContainer.getBoundingClientRect();
+    const { left: segmentLeft, height: segmentHeight, width: segmentWidth } = elRect;
+    const offset = (segmentLeft - hostLeft) + this.segmentContainer.scrollLeft;
+    bgEl.style.setProperty('transform', `translate(${offset}px, -50%`);
+    bgEl.style.setProperty('width', `${segmentWidth}px`);
+    bgEl.style.setProperty('height', `${segmentHeight}px`);
+  }
+  /*---------------------------------------/HIGHLIGHT LOGIC-------------------------------------------*/
+  /*---------------------------------------SCROLL ARROW LOGIC-------------------------------------------*/
+  scrollArrowRender() {
+    if (this.segmentContainer.scrollWidth > this.segmentContainer.clientWidth) {
+      this.showScrollArrows = true;
+      if (!this.scrollRegistered) {
+        this.segmentContainer.addEventListener('scroll', this.scrollArrowRender.bind(this));
+        this.scrollRegistered = true;
+      }
+      const amountScrolled = Math.round(this.segmentContainer.scrollWidth - this.segmentContainer.scrollLeft);
+      const distanceToEnd = amountScrolled - this.segmentContainer.clientWidth;
+      const distanceToStart = this.segmentContainer.scrollLeft;
+      this.showLeftArrow = distanceToStart > 0;
+      this.showRightArrow = distanceToEnd > 0;
+      return;
+    }
+    else {
+      this.showLeftArrow = false;
+      this.showRightArrow = false;
+      this.showScrollArrows = false;
+    }
+  }
+  scroll(val) {
+    let amount = this.segmentContainer.scrollLeft + val;
+    this.segmentContainer.scroll({
+      left: amount,
+      behavior: "smooth"
+    });
+  }
+  scrollArrowClasses() {
+    let classNames = 'pn-sc-arrows ';
+    if (this.showLeftArrow)
+      classNames += 'pn-sc-left-visible ';
+    if (this.showRightArrow)
+      classNames += 'pn-sc-right-visible ';
+    return classNames;
+  }
+  /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-segmented-control" },
+        h("slot", null),
+        h("div", { class: "pn-sc-bg pn-sc-active" }),
+        h("div", { class: "pn-sc-bg pn-sc-hover" })),
+      this.showScrollArrows &&
+        h("div", { class: this.scrollArrowClasses() },
+          h("button", { class: "pn-sc-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: "pn-sc-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-segmented-control"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-segmented-control.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-segmented-control.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This is the name of the radio buttons inside the controller"
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "'example-id'"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Currently active segment value"
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "currentSelection": {},
+    "showScrollArrows": {},
+    "showLeftArrow": {},
+    "showRightArrow": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "currentSelection",
+      "methodName": "selectionHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "changeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/segment/pn-segment.css

@@ -0,0 +1,44 @@
+pn-segment {
+  position: relative;
+  color: #005D92;
+  margin-right: 0.5em;
+  z-index: 2;
+  white-space: nowrap;
+  scroll-snap-align: center;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+  transform: translateZ(0);
+}
+pn-segment:last-of-type {
+  margin-right: 0;
+}
+
+pn-segment input {
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+pn-segment label {
+  height: 100%;
+  width: 100%;
+  padding: 0.5em;
+  border-radius: 3em;
+  border: 0.1rem solid transparent;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: background 0.15s, border 0.15s, box-shadow 0.15s 0.2s, color 0.15s;
+}
+pn-segment label > pn-icon {
+  margin-right: 0.5em;
+}
+pn-segment label pn-icon svg path {
+  transition: fill 0.15s;
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/segment/pn-segment.js

@@ -0,0 +1,105 @@
+import { Component, Element, Prop, h, Host } from "@stencil/core";
+export class PnSegment {
+  render() {
+    return (h(Host, { tabindex: "-1" },
+      h("input", { class: "pn-segment", id: this.segmentid, name: this.name, checked: this.selected, type: "radio", value: this.value }),
+      h("label", { htmlFor: this.segmentid, class: "pn-segment-label" },
+        this.icon && h("pn-icon", { symbol: this.icon, color: "blue700" }),
+        h("slot", null))));
+  }
+  static get is() { return "pn-segment"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-segment.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-segment.css"]
+  }; }
+  static get properties() { return {
+    "segmentid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "segmentid",
+      "reflect": false
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": false
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "icon",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,65 @@
+import readme from "./controller/readme.md";
+import { text } from "@storybook/addon-knobs";
+
+export default {
+  title: "input/Segmented Control",
+  parameters: {
+    notes: readme,
+    // layout: 'centered'
+  }
+};
+
+export const segmentedControl = () => {
+  // Storybook Knobs, please ignore ----------------------------//
+  const value = text("value", "home");
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-segmented-control value="${value}">
+      <pn-segment segmentid="one" value="home" icon="home">
+        Home delivery
+      </pn-segment>
+      
+      <pn-segment segmentid="two" value="service-point" icon="box-pin">
+        Service point delivery
+      </pn-segment>
+      
+      <pn-segment segmentid="three" value="serice-point" icon="box-pin">
+        Grandma's house delivery
+      </pn-segment>
+
+      <pn-segment segmentid="four" value="servic-point" icon="box">
+        Package box delivery
+      </pn-segment>
+    </pn-segmented-control>
+      
+    `;
+};
+
+export const noIcons = () => {
+  // Storybook Knobs, please ignore ----------------------------//
+  const value = text("value", "two");
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-segmented-control value="${value}">
+      <pn-segment segmentid="one" value="one">
+        Home delivery
+      </pn-segment>
+      
+      <pn-segment segmentid="two" value="two">
+        Service point delivery
+      </pn-segment>
+      
+      <pn-segment segmentid="three" value="three">
+        Grandma's house delivery
+      </pn-segment>
+
+      <pn-segment segmentid="four" value="four">
+        Package box delivery
+      </pn-segment>
+    </pn-segmented-control>
+    `;
+};
+
+