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

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

@@ -0,0 +1,48 @@
+import { boolean, text, select, number } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "input/Input",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email'];
+
+  const type = select('type', types, 'text');
+  const disabled = boolean("disabled", false);
+  const error = text("error ", '');
+  const helpertext = text("helper text", '* helper text to explain what the expected input is');
+  const placeholder = text("placeholder", 'Placeholder');
+  const label = text("label", 'Label');
+  const inputid = text("id", 'input-id');
+  const name = text("name", 'input-name');
+  const autocomplete = text('autocomplete', "off");
+  const valid = boolean('valid state', false);
+  const value = text("value", '');
+  const maxlength = number("maxlength", '');
+  const required = boolean("required", false);
+
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-input inputid="${inputid}"
+      value="${value}"
+      name="${name}"
+      disabled=${disabled}
+      error="${error}"
+      helpertext="${helpertext}"
+      type="${type}"
+      valid=${valid}
+      placeholder="${placeholder}"
+      label="${label}"
+      autocomplete="${autocomplete}"
+      maxlength="${maxlength}"
+      required="${required}"
+    />
+  `;
+};

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

@@ -0,0 +1,156 @@
+pn-input {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+pn-input input {
+  padding: 0.75em;
+  font-size: 1em;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+  outline: none;
+  border-radius: 0.8rem;
+  border: 0.1rem solid #5E554A;
+  transition: box-shadow 0.15s, border 0.15s;
+  color: #000000;
+  width: 100%;
+}
+pn-input input::placeholder {
+  color: #969087;
+  font-weight: normal;
+}
+pn-input input:focus {
+  border: 0.1rem solid #005D92;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+}
+pn-input input:hover {
+  border: 0.1rem solid #00A0D6;
+}
+pn-input input:disabled {
+  background: #F3F2F2;
+  border: none;
+}
+
+pn-input > .input-container {
+  position: relative;
+}
+pn-input > .input-container > button {
+  position: absolute;
+  right: 1.2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #005D92;
+  padding: 0.6rem;
+  border-radius: 0.8rem;
+  outline: none;
+  transition: border 0.1s, background 0.2s, color 0.1s;
+  border: 0.1rem solid transparent;
+}
+pn-input > .input-container > button:focus {
+  border: 0.1rem solid #005D92;
+}
+pn-input > .input-container > button:hover {
+  background: #E0F8FF;
+}
+pn-input > .input-container > button:active {
+  background: #005D92;
+  color: white;
+}
+pn-input > .input-container > svg {
+  position: absolute;
+  right: 0.75em;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 1.5em;
+  width: 1.5em;
+  pointer-events: none;
+}
+pn-input > .input-container > svg polyline {
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);
+}
+pn-input > .input-container > svg.checkmark polyline {
+  stroke: #005E41;
+  stroke-dashoffset: 23;
+  stroke-dasharray: 23;
+}
+
+pn-input .label-container {
+  margin-bottom: 0.4rem;
+  color: #5E554A;
+  font-size: 0.875em;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+pn-input .label-container label {
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.label-container label.char-count {
+  flex-shrink: 0;
+  padding-left: 0.5em;
+}
+
+pn-input small {
+  font-size: 0.75em;
+  font-size: max(.6em, 1.2rem);
+  transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  margin-top: 0.5em;
+  color: #5E554A;
+}
+
+pn-input.error {
+  color: #A70707;
+}
+pn-input.error label {
+  color: #A70707;
+}
+pn-input.error small {
+  color: #A70707;
+}
+pn-input.error small > pn-icon {
+  margin-right: 0.25em;
+}
+pn-input.error input {
+  border: 0.1rem solid #A70707;
+}
+pn-input.error input:focus {
+  border: 0.1rem solid #A70707;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;
+}
+pn-input.error input:hover {
+  border: 0.1rem solid #F06365;
+}
+
+pn-input.valid {
+  color: #005E41;
+}
+pn-input.valid .input-container > svg.checkmark polyline {
+  stroke-dashoffset: 0;
+}
+pn-input.valid label {
+  color: #005E41;
+}
+pn-input.valid input {
+  border: 0.1rem solid #005E41;
+}
+pn-input.valid input:focus {
+  border: 0.1rem solid #005E41;
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41;
+}
+pn-input.valid input:hover {
+  border: 0.1rem solid #5EC584;
+}
+
+pn-input.password input {
+  padding-right: 4em;
+}
+
+pn-input.icon input {
+  padding-right: 2.3em;
+}

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

@@ -0,0 +1,336 @@
+import { Component, Prop, h, Host, State } from "@stencil/core";
+export class Pninput {
+  constructor() {
+    this.disabled = false;
+    /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */
+    this.error = '';
+    /** Error state without message (If you want to control the error messaging on your own) */
+    this.invalid = false;
+    /** Text message placed underneath the input field */
+    this.helpertext = '';
+    /** Text label placed above the input field */
+    this.label = '';
+    this.placeholder = '';
+    this.inputid = `${Math.random()}`;
+    this.name = '';
+    this.required = null;
+    this.type = 'text';
+    this.autocomplete = '';
+    this.valid = null;
+    this.value = '';
+    /** The maximum number of characters the user should be able to add, also adds a visible counter */
+    this.maxlength = '';
+    this.showText = false;
+  }
+  getTextMessage() {
+    if (this.error)
+      return this.error;
+    if (this.helpertext)
+      return this.helpertext;
+    return null;
+  }
+  toggleTextVisibility() {
+    this.showText = !this.showText;
+  }
+  getInputType() {
+    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email'];
+    return (types.includes(this.type) && !this.showText) ? this.type : 'text';
+  }
+  setVal(e) {
+    var _a;
+    const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
+    this.value = target.value;
+  }
+  getClassNames() {
+    let classNames = 'pn-input ';
+    if (this.error.length > 0 || this.invalid)
+      classNames += 'error ';
+    if (this.valid)
+      classNames += 'valid ';
+    if (this.type === 'password')
+      classNames += 'password ';
+    if (this.error || this.invalid || this.valid)
+      classNames += 'icon ';
+    return classNames;
+  }
+  render() {
+    return (h(Host, { class: this.getClassNames() },
+      (this.label || this.maxlength) &&
+        h("div", { class: "label-container" },
+          this.label && h("label", { htmlFor: this.inputid }, this.label),
+          parseInt(this.maxlength) > 0 && h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)),
+      h("div", { class: "input-container" },
+        h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength }),
+        h("svg", { class: "checkmark", 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" })),
+        this.type === 'password' && !this.disabled && h("button", { onClick: () => this.toggleTextVisibility() }, "Show")),
+      this.getTextMessage() &&
+        h("small", null,
+          this.error && h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }),
+          this.getTextMessage())));
+  }
+  static get is() { return "pn-input"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-input.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-input.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "error": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically)"
+      },
+      "attribute": "error",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "invalid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Error state without message (If you want to control the error messaging on your own)"
+      },
+      "attribute": "invalid",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "helpertext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text message placed underneath the input field"
+      },
+      "attribute": "helpertext",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Text label placed above the input field"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "inputid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "inputid",
+      "reflect": false,
+      "defaultValue": "`${Math.random()}`"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "type": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'text'"
+    },
+    "autocomplete": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "autocomplete",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "valid": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "valid",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "maxlength": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The maximum number of characters the user should be able to add, also adds a visible counter"
+      },
+      "attribute": "maxlength",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "showText": {}
+  }; }
+}

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

@@ -0,0 +1,39 @@
+import readme from "./readme.md";
+
+export default {
+  title: "input/Nav Dropdown",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const navDropdown = () => {
+
+  return `
+    <div style="display: flex; align-items: center; flex-wrap: wrap;">
+      <pn-nav-dropdown>
+        <h2>Title!</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
+        <pn-button style="margin-top: 1em;">Sign up</pn-button>
+        <pn-button>Log out</pn-button>
+      </pn-nav-dropdown>
+
+      
+      <button style="background: none; border: none; font-size: 1em; padding: none; margin: 0 0.5em;">Regular item 1</button>
+      <button style="background: none; border: none; font-size: 1em; padding: none; margin: 0 0.5em;">Regular item 2</button>
+      <button style="background: none; border: none; font-size: 1em; padding: none; margin: 0 0.5em;">Regular item 3</button>
+      <button style="background: none; border: none; font-size: 1em; padding: none; margin: 0 0.5em;">Regular item 4</button>
+      <button style="background: none; border: none; font-size: 1em; padding: none; margin: 0 0.5em;">Regular item 5</button>
+
+      <pn-nav-dropdown>
+        <h2>Title!</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
+        <pn-button style="margin-top: 1em;">Sign up</pn-button>
+        <pn-button>Log out</pn-button>
+      </pn-nav-dropdown>
+
+      <pn-nav-dropdown label="Dropdown with icon" icon="globe">
+      <pn-nav-dropdown>
+    </div>
+  `;
+};

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

@@ -0,0 +1,90 @@
+pn-nav-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+pn-nav-dropdown > button {
+  background: none;
+  outline: none;
+  border-radius: 0.8rem;
+  border: none;
+  cursor: pointer;
+  padding: 0.25em;
+  font-size: 1em;
+  transition: box-shadow 0.15s, background 0.15s;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  color: #005D92;
+  font-weight: normal;
+}
+pn-nav-dropdown > button:focus {
+  box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;
+}
+pn-nav-dropdown > button:hover, pn-nav-dropdown > button:focus {
+  background: #EFFBFF;
+}
+
+.pn-nav-dropdown-label > pn-icon {
+  margin-left: 0.4em;
+}
+
+.nav-dropdown-content-container {
+  position: absolute;
+  top: 130%;
+  left: 0;
+  border-radius: 1em;
+  box-shadow: 0 0.2rem 1.6rem rgba(0, 0, 0, 0.2);
+  transform-origin: top left;
+  transition: transform 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0.15s;
+  transform: scale(0);
+  overflow-y: auto;
+  max-width: 95vw;
+  max-width: min(95vw, 40em);
+  max-height: 80vh;
+  z-index: 10;
+  background: #FFFFFF;
+}
+
+pn-nav-dropdown.nav-dropdown-right .nav-dropdown-content-container {
+  left: unset;
+  right: 0;
+  transform-origin: top right;
+}
+
+.nav-dropdown-content {
+  padding: 1em;
+  opacity: 0;
+  transition: opacity 0.1s cubic-bezier(0.6, 0, 0.4, 1);
+  transition-delay: 0s;
+  position: relative;
+  width: max-content;
+  max-width: 100%;
+}
+
+pn-nav-dropdown[data-open=true] .nav-dropdown-content-container {
+  transition-delay: 0s;
+}
+pn-nav-dropdown[data-open=true] .nav-dropdown-content {
+  transition-delay: 0.3s;
+  transition-duration: 0.18s;
+  opacity: 1;
+}
+
+pn-nav-dropdown .pn-ripple {
+  animation: ripple 0.4s cubic-bezier(0.6, 0, 0.4, 1);
+  position: absolute;
+  border-radius: 50%;
+  background: #005D92;
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0.1;
+  pointer-events: none;
+  z-index: 3;
+}
+@keyframes ripple {
+  to {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}