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

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

@@ -0,0 +1,153 @@
+import { Component, Prop, h, Host, Element, Listen } from "@stencil/core";
+export class Pncheckbox {
+  constructor() {
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+  }
+  handlechange() {
+    this.indeterminate = false;
+  }
+  componentDidLoad() {
+    this.checkAndSetIndeterminateState();
+  }
+  componentDidUpdate() {
+    this.checkAndSetIndeterminateState();
+  }
+  checkAndSetIndeterminateState() {
+    let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`);
+    if (checkbox) {
+      checkbox.indeterminate = this.indeterminate;
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }),
+      h("label", { htmlFor: this.checkboxid, class: "pn-checkbox" },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" },
+          h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }),
+          h("polyline", { class: "indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))));
+  }
+  static get is() { return "pn-checkbox"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This will be emitted on change and input, like a native checkbox"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the checkbox group"
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "checkboxid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The string you put here will be what you'd make the ID of a native radio button, you can't name props \"id\" because it's reserved\nso we went with the more descriptive name \"checkboxid\", if you want to create labels for your checkbox, you will bind it to this ID"
+      },
+      "attribute": "checkboxid",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "handlechange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,26 @@
+import { boolean, text } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "input/Choice chip",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  },
+};
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const checkedBool = boolean("checked", false);
+  const indeterminateBool = boolean("indeterminate", false);
+  const idString = text("checkboxid", "test-id");
+  const value = text("value", "test value");
+  const nameString = text("name", "test-name");
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-choice-chip choiceid=${idString} value=${value} name=${nameString} checked=${checkedBool} indeterminate=${indeterminateBool}>
+      ${value}
+    </pn-choice-chip>
+  `;
+};

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

@@ -0,0 +1,53 @@
+pn-choice-chip {
+  user-select: none;
+  border: none;
+  display: inline-block;
+  background: #fff;
+  position: relative;
+}
+pn-choice-chip input {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+pn-choice-chip label {
+  display: block;
+  padding: 0.4rem 0.8rem;
+  border: 0.1rem solid #005D92;
+  color: #005D92;
+  border-radius: 0.8rem;
+  text-align: center;
+  cursor: pointer;
+  transition: box-shadow 0.1s, background 0.2s;
+}
+
+pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip, pn-choice-chip input[type=checkbox]:indeterminate + label.pn-choice-chip {
+  background: #005D92;
+  color: #fff;
+}
+pn-choice-chip input[type=checkbox]:hover + label.pn-choice-chip {
+  background: #E0F8FF;
+}
+pn-choice-chip input[type=checkbox]:focus + label.pn-choice-chip, pn-choice-chip input[type=checkbox]:active + label.pn-choice-chip {
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+}
+pn-choice-chip input[type=checkbox]:active + label.pn-choice-chip {
+  background: #8EDDF9;
+}
+pn-choice-chip input[type=checkbox]:disabled + label.pn-choice-chip {
+  background-color: #D3CECB;
+}
+pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip:hover {
+  background: #0D234B;
+  color: #fff;
+}
+pn-choice-chip input[type=checkbox]:checked + label.pn-choice-chip:active {
+  background: #00A0D6;
+  border: 0.1rem solid #00A0D6;
+  color: #fff;
+}

package/umd/modules/@postnord/web-components/collection/components/input/pn-choice-chip/pn-choice-chip.js

@@ -0,0 +1,151 @@
+import { Component, Prop, h, Host, Element, Listen } from "@stencil/core";
+export class Pnchoicechip {
+  constructor() {
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+  }
+  handlechange() {
+    this.indeterminate = false;
+  }
+  componentDidLoad() {
+    this.checkAndSetIndeterminateState();
+  }
+  componentDidUpdate() {
+    this.checkAndSetIndeterminateState();
+  }
+  checkAndSetIndeterminateState() {
+    let checkbox = this.hostElement.querySelector(`#${this.choiceid}`);
+    if (checkbox) {
+      checkbox.indeterminate = this.indeterminate;
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("input", { type: "checkbox", id: this.choiceid, value: this.value, name: this.name || this.choiceid, disabled: this.disabled, checked: this.checked }),
+      h("label", { htmlFor: this.choiceid, class: "pn-choice-chip" },
+        h("slot", null))));
+  }
+  static get is() { return "pn-choice-chip"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-choice-chip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-choice-chip.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This will be emitted on change and input"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The name of the checkbox group"
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "choiceid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The string you put here will be what you'd make the ID of a native checkbox, you can't name props \"id\" because it's reserved\nso we went with the more descriptive name \"choice\", if you want to create labels for your checkbox, you will bind it to this ID"
+      },
+      "attribute": "choiceid",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "handlechange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,110 @@
+import { boolean, select, text, date } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "input/Date Picker",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+const xPositionOptions = ["left", "right"];
+const yPositionOptions = ["top", "bottom"];
+const supportedLanguages = ["en", "sv", "da", "fi", "no"];
+const weekDays = {
+  Sunday: 0,
+  Monday: 1,
+  Tuesday: 2,
+  Wednesday: 3,
+  Thursday: 4,
+  Friday: 5,
+  Saturday: 6
+};
+const selectStoryGroups = {
+  BASIC: "Basic Options",
+  ADVANCED: "Advanced Options",
+  I18n: "Internalization"
+};
+
+const customDateKnob = (name, defaultValue, groupId) => {
+  const stringTimestamp = date(name, defaultValue, groupId);
+  if (!!stringTimestamp) {
+    const dateFromTimestamp = new Date(stringTimestamp);
+    const day = dateFromTimestamp.getDate();
+    const month = dateFromTimestamp.getMonth();
+    const year = dateFromTimestamp.getFullYear();
+    return `${year}-${month + 1}-${day}`;
+  }
+
+  return;
+};
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const disabled = boolean("disabled", false, selectStoryGroups.BASIC);
+  const disableInput = boolean("disable input", false, selectStoryGroups.BASIC);
+  const invalid = boolean("invalid", false, selectStoryGroups.BASIC);
+  const label = text("label text", "Select a date", selectStoryGroups.BASIC);
+  const disableWeekends = boolean(
+    "disable weekends",
+    false,
+    selectStoryGroups.ADVANCED
+  );
+  const disableDays = customDateKnob(
+    "disable specific days",
+    "",
+    selectStoryGroups.ADVANCED
+  );
+  const min = customDateKnob(
+    "minimum date",
+    new Date("January 3, 2018"),
+    selectStoryGroups.ADVANCED
+  );
+  const max = customDateKnob(
+    "maximum date",
+    new Date("March 13, 2030"),
+    selectStoryGroups.ADVANCED
+  );
+  const xPosition = select(
+    "horizontal position",
+    xPositionOptions,
+    "left",
+    selectStoryGroups.ADVANCED
+  );
+  const yPosition = select(
+    "vertical position",
+    yPositionOptions,
+    "bottom",
+    selectStoryGroups.ADVANCED
+  );
+  const startOfWeek = select(
+    "start of the week (0=Sunday, 1=Monday, etc.)",
+    weekDays,
+    1,
+    selectStoryGroups.ADVANCED
+  );
+  const language = select(
+    "language",
+    supportedLanguages,
+    "en",
+    selectStoryGroups.I18n
+  );
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-date-picker position="${yPosition} ${xPosition}"
+      id="cal"
+      label="${label}"
+      start-of-week="${startOfWeek}"
+      min="${min}"
+      max="${max}"
+      language="${language}"
+      disabled=${disabled}
+      disable-input=${disableInput}
+      disable-weekends=${disableWeekends}
+      disable-days=${disableDays}
+      invalid=${invalid}>
+    </pn-datepicker>
+  `;
+};

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

@@ -0,0 +1,126 @@
+pn-date-picker {
+  display: inline-block;
+}
+pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container input,
+pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container input:focus,
+pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container input:hover {
+  outline: none;
+  border: 0.1rem solid #005D92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+}
+pn-date-picker.open-datepicker .datepicker-calendar-container {
+  display: block;
+}
+pn-date-picker.open-datepicker .datepicker-container .datepicker-input-container label, pn-date-picker.has-input .datepicker-container .datepicker-input-container label {
+  top: 0.1rem;
+  transform: translateY(0);
+  font-size: 1.2rem;
+}
+pn-date-picker.invalid .datepicker-container .datepicker-input-container input,
+pn-date-picker.invalid .datepicker-container .datepicker-input-container input:focus,
+pn-date-picker.invalid .datepicker-container .datepicker-input-container input:hover {
+  border: 0.1rem solid #A70707;
+}
+pn-date-picker.invalid .datepicker-container .datepicker-input-container input:focus {
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;
+}
+pn-date-picker .datepicker-container {
+  position: relative;
+}
+pn-date-picker .datepicker-container .datepicker-input-container {
+  border: none;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+pn-date-picker .datepicker-container .datepicker-input-container input,
+pn-date-picker .datepicker-container .datepicker-input-container div,
+pn-date-picker .datepicker-container .datepicker-input-container label,
+pn-date-picker .datepicker-container .datepicker-input-container span {
+  font-family: inherit;
+}
+pn-date-picker .datepicker-container .datepicker-input-container input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 0.1rem solid #5E554A;
+  background-color: #fff;
+  padding: 0.75em;
+  color: #000000;
+  font-size: 1.6rem;
+  font-weight: 300;
+  line-height: 2rem;
+  border-radius: 0.8rem;
+  transition: box-shadow 0.15s, border 0.15s;
+}
+pn-date-picker .datepicker-container .datepicker-input-container input::placeholder {
+  color: #969087;
+}
+pn-date-picker .datepicker-container .datepicker-input-container input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  /* Firefox takes matters into its own hands with box shadows and invalid inputs */
+  box-shadow: none;
+  outline: none;
+}
+pn-date-picker .datepicker-container .datepicker-input-container input:hover {
+  border-color: #00A0D6;
+}
+pn-date-picker .datepicker-container .datepicker-input-container input:disabled {
+  background-color: #F3F2F2;
+  border-color: #D3CECB;
+  color: #969087;
+}
+pn-date-picker .datepicker-container .datepicker-input-container > pn-icon,
+pn-date-picker .datepicker-container .datepicker-input-container > pn-spinner {
+  position: absolute;
+  right: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+}
+pn-date-picker .datepicker-container .datepicker-input-container > pn-icon {
+  cursor: pointer;
+}
+pn-date-picker .datepicker-container .datepicker-input-container label {
+  transition: 0.2s ease-in-out;
+  font-size: 1em;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  order: 1;
+  pointer-events: none;
+  -webkit-font-smoothing: antialiased;
+  z-index: 1;
+  position: absolute;
+  color: #969087;
+  font-weight: normal;
+}
+pn-date-picker .datepicker-calendar-container {
+  display: none;
+  position: absolute;
+  border-radius: 0.8rem;
+  top: 120%;
+  left: 0;
+  width: 29.6rem;
+  padding: 1.6rem 1.6rem 0.735rem 1.6rem;
+  border: 0.1rem solid #D3CECB;
+  box-shadow: 0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);
+  background-color: white;
+  z-index: 9999;
+}
+pn-date-picker.position-top .datepicker-calendar-container {
+  top: auto;
+  bottom: calc(100% + 1.2rem);
+}
+pn-date-picker.position-left .datepicker-calendar-container {
+  right: auto;
+  left: 0;
+}
+pn-date-picker.position-right .datepicker-calendar-container {
+  right: 0;
+  left: auto;
+}