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

package/umd/modules/@postnord/web-components/collection/components/content/pn-accordion-row/pn-accordion-row.css

@@ -0,0 +1,101 @@
+pn-accordion-row {
+  position: relative;
+  color: black;
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);
+}
+pn-accordion-row + pn-accordion-row {
+  border-top: 0.1rem solid #D3CECB;
+  margin-top: 0.4rem;
+}
+pn-accordion-row[data-flipping] {
+  transform: translateY(calc(-1px * var(--dy)));
+  transition: none;
+}
+
+pn-accordion-row .accordion-title {
+  display: flex;
+  align-items: center;
+  z-index: 0;
+  width: 100%;
+  font-weight: 400;
+  padding: 1em;
+  transition: background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);
+  border-radius: 0.8rem;
+  overflow: hidden;
+  position: relative;
+  background: #FFFFFF;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  font-size: 1em;
+  /*---------------------------------------Ripple-------------------------------------------*/
+  /*---------------------------------------/Ripple-------------------------------------------*/
+}
+pn-accordion-row .accordion-title:hover {
+  background: #E0F8FF;
+}
+pn-accordion-row .accordion-title:focus {
+  box-shadow: 0 0 0 0.2rem white, 0 0 0 0.4rem #005D92;
+}
+pn-accordion-row .accordion-title > svg {
+  margin-left: auto;
+  transition: transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;
+}
+pn-accordion-row .accordion-title > svg path {
+  fill: #005D92;
+}
+pn-accordion-row .accordion-title .pn-ripple {
+  animation: ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;
+  position: absolute;
+  border-radius: 50%;
+  background: #005D92;
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0.05;
+  pointer-events: none;
+}
+@keyframes ripple {
+  to {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 0;
+  }
+}
+
+/*---------------------------------------Content-------------------------------------------*/
+pn-accordion-row .accordion-content {
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+pn-accordion-row .accordion-content .content {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  top: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s;
+  padding: 1em;
+}
+
+/*---------------------------------------/Content-------------------------------------------*/
+/* ---------------OPEN STATE------------------- */
+pn-accordion-row[data-state=open] .accordion-content .content {
+  position: relative;
+  pointer-events: unset;
+  opacity: 1;
+  transition-delay: 0.2s;
+}
+pn-accordion-row[data-state=open] .accordion-title svg {
+  transform: rotate(-180deg);
+  transition-delay: 0s;
+}
+
+/* -----------------END OPEN STATE----------------- */

package/umd/modules/@postnord/web-components/collection/components/content/pn-accordion-row/pn-accordion-row.js

@@ -0,0 +1,89 @@
+import { Component, h, Host, Element, Event, Prop } from "@stencil/core";
+export class PnaccordionItem {
+  constructor() {
+    /** The label/title of the accordion row, you can also pass a slot with the name "label" if you want to put custom content in there */
+    this.label = null;
+    this.rippleContainer = null;
+  }
+  componentWillLoad() {
+    const slottedLabel = this.hostElement.querySelector('[slot="label"]');
+    this.label = slottedLabel ? null : this.label;
+  }
+  componentDidLoad() {
+    this.rippleContainer = this.hostElement.querySelector('.accordion-title');
+  }
+  toggleHandler() {
+    this.togglerow.emit(this.hostElement);
+  }
+  clickHandler(e) {
+    this.togglerow.emit(this.hostElement);
+    const elRect = this.rippleContainer.getBoundingClientRect();
+    const elLeft = elRect.left;
+    const elTop = elRect.top;
+    const rippleEl = document.createElement('div');
+    const elSize = elRect.width > elRect.height ? elRect.width : elRect.height;
+    rippleEl.classList.add('pn-ripple');
+    this.rippleContainer.appendChild(rippleEl);
+    rippleEl.style.height = `${elSize * 2}px`;
+    rippleEl.style.width = `${elSize * 2}px`;
+    rippleEl.style.left = e.clientX > 0 ? `${e.clientX - elLeft}px` : `50%`;
+    rippleEl.style.top = e.clientY > 0 ? `${e.clientY - elTop}px` : `50%`;
+    setTimeout(() => rippleEl.remove(), 400);
+  }
+  /*---------------------------------------/UTILS-------------------------------------------*/
+  render() {
+    return (h(Host, { "data-state": "collapsed" },
+      h("div", { class: "accordion-content" },
+        h("button", { type: "button", class: "accordion-title", onClick: (e) => this.clickHandler(e) },
+          this.label ? this.label : '',
+          h("slot", { name: "label" }),
+          h("svg", { width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+            h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L0.292892 1.70711C-0.0976315 1.31658 -0.0976315 0.683417 0.292892 0.292893C0.683418 -0.0976315 1.31658 -0.0976315 1.70711 0.292893L9 7.58579L16.2929 0.292893C16.6834 -0.0976315 17.3166 -0.0976315 17.7071 0.292893C18.0976 0.683417 18.0976 1.31658 17.7071 1.70711L9.70711 9.70711Z", fill: "#232228" }))),
+        h("div", { class: "content" },
+          h("slot", null)))));
+  }
+  static get is() { return "pn-accordion-row"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-accordion-row.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-accordion-row.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The label/title of the accordion row, you can also pass a slot with the name \"label\" if you want to put custom content in there"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+  static get events() { return [{
+      "method": "togglerow",
+      "name": "togglerow",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Ignore this event, it is only to be handled by the accordion parent component"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,139 @@
+pn-table {
+  display: block;
+  margin-bottom: 16px;
+}
+pn-table.bordered .pn-table-container table thead tr:last-child th,
+pn-table.bordered .pn-table-container table thead tr:last-child td {
+  border-bottom-width: 2px;
+}
+pn-table.bordered .pn-table-container table thead tr:first-child th,
+pn-table.bordered .pn-table-container table thead tr:first-child td {
+  border-top: 1px solid #F3F2F2;
+}
+pn-table.bordered .pn-table-container table thead tr th,
+pn-table.bordered .pn-table-container table thead tr td {
+  border-right: 1px solid #F3F2F2;
+  border-bottom: 1px solid #F3F2F2;
+}
+pn-table.bordered .pn-table-container table thead tr th:first-child,
+pn-table.bordered .pn-table-container table thead tr td:first-child {
+  border-left: 1px solid #F3F2F2;
+}
+pn-table.bordered .pn-table-container table tbody tr.hover-before th,
+pn-table.bordered .pn-table-container table tbody tr.hover-before td {
+  border-bottom-color: #E0F8FF;
+}
+pn-table.bordered .pn-table-container table tbody tr.hover th,
+pn-table.bordered .pn-table-container table tbody tr.hover td {
+  border-bottom-color: #E0F8FF;
+}
+pn-table.bordered .pn-table-container table tbody tr.hover th:first-child,
+pn-table.bordered .pn-table-container table tbody tr.hover td:first-child {
+  border-left-color: #E0F8FF;
+}
+pn-table.bordered .pn-table-container table tbody tr.hover th:last-child,
+pn-table.bordered .pn-table-container table tbody tr.hover td:last-child {
+  border-right-color: #E0F8FF;
+}
+pn-table.bordered .pn-table-container table tbody tr th,
+pn-table.bordered .pn-table-container table tbody tr td {
+  border-bottom: 1px solid #F3F2F2;
+}
+pn-table.bordered .pn-table-container table tbody tr th:first-child,
+pn-table.bordered .pn-table-container table tbody tr td:first-child {
+  border-left: 1px solid #F3F2F2;
+}
+pn-table.bordered .pn-table-container table tbody tr th:last-child,
+pn-table.bordered .pn-table-container table tbody tr td:last-child {
+  border-right: 1px solid #F3F2F2;
+}
+pn-table.bordered.no-prev.hover .pn-table-container table thead tr th,
+pn-table.bordered.no-prev.hover .pn-table-container table thead tr td {
+  border-bottom-color: #E0F8FF;
+}
+pn-table.bordered.clicked.no-prev .pn-table-container table thead tr th,
+pn-table.bordered.clicked.no-prev .pn-table-container table thead tr td {
+  border-bottom-color: #00A0D6;
+}
+pn-table.bordered.clicked .pn-table-container table tbody tr.hover-before th,
+pn-table.bordered.clicked .pn-table-container table tbody tr.hover-before td {
+  border-bottom-color: #00A0D6;
+}
+pn-table.bordered.clicked .pn-table-container table tbody tr.hover th,
+pn-table.bordered.clicked .pn-table-container table tbody tr.hover td {
+  border-bottom-color: #00A0D6;
+}
+pn-table.bordered.clicked .pn-table-container table tbody tr.hover th:first-child,
+pn-table.bordered.clicked .pn-table-container table tbody tr.hover td:first-child {
+  border-left-color: #00A0D6;
+}
+pn-table.bordered.clicked .pn-table-container table tbody tr.hover th:last-child,
+pn-table.bordered.clicked .pn-table-container table tbody tr.hover td:last-child {
+  border-right-color: #00A0D6;
+}
+pn-table.bordered.striped .pn-table-container table tbody tr th,
+pn-table.bordered.striped .pn-table-container table tbody tr td {
+  border-bottom-width: 0;
+}
+pn-table.bordered.striped .pn-table-container table tbody tr:last-child th,
+pn-table.bordered.striped .pn-table-container table tbody tr:last-child td {
+  border-bottom-width: 1px;
+}
+pn-table.striped .pn-table-container table tbody tr:nth-child(odd) th,
+pn-table.striped .pn-table-container table tbody tr:nth-child(odd) td {
+  background-color: #E0F8FF;
+}
+pn-table.striped.disabled .pn-table-container table tbody tr:nth-child(odd) th,
+pn-table.striped.disabled .pn-table-container table tbody tr:nth-child(odd) td {
+  background-color: #F3F2F2;
+}
+pn-table .pn-table-container table {
+  width: 100%;
+}
+pn-table .pn-table-container table,
+pn-table .pn-table-container table th,
+pn-table .pn-table-container table td {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  outline: 0;
+  border-collapse: collapse;
+  max-width: 100%;
+}
+pn-table .pn-table-container table th,
+pn-table .pn-table-container table td {
+  text-align: left;
+  font-size: 14px;
+  line-height: 20px;
+  vertical-align: middle;
+  padding: 14px 16px;
+}
+pn-table .pn-table-container table th pn-icon,
+pn-table .pn-table-container table td pn-icon {
+  vertical-align: middle;
+}
+pn-table .pn-table-container table thead tr th,
+pn-table .pn-table-container table thead tr td {
+  color: #00A0D6;
+  font-weight: 500;
+}
+pn-table .pn-table-container table thead tr th .column-wrapper,
+pn-table .pn-table-container table thead tr td .column-wrapper {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+pn-table .pn-table-container table thead tr th .column-wrapper pn-icon,
+pn-table .pn-table-container table thead tr td .column-wrapper pn-icon {
+  cursor: pointer;
+}
+pn-table .pn-table-container table tbody tr th,
+pn-table .pn-table-container table tbody tr td {
+  color: #5E554A;
+  font-weight: 300;
+}
+pn-table .pn-table-container table tbody tr th {
+  font-weight: 500;
+  color: #2D2013;
+}

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

@@ -0,0 +1,120 @@
+import { Component, Element, Prop, h } from "@stencil/core";
+export class PnTable {
+  componentWillLoad() {
+    const context = this;
+    if (this.bordered && !this.striped) {
+      const tr = Array.from(this.hostElement.querySelectorAll("tbody tr"));
+      tr.forEach(function (row, index) {
+        row.addEventListener("mousedown", function () {
+          context.hostElement.classList.add("clicked");
+        });
+        row.addEventListener("mouseup", function () {
+          context.hostElement.classList.remove("clicked");
+        });
+        row.addEventListener("mouseover", function () {
+          if (index) {
+            tr[index - 1].classList.add("hover-before");
+          }
+          else {
+            context.hostElement.classList.add("no-prev");
+          }
+          context.hostElement.classList.add("hover");
+          row.classList.add("hover");
+        });
+        row.addEventListener("mouseout", function () {
+          if (index) {
+            tr[index - 1].classList.remove("hover-before");
+          }
+          else {
+            context.hostElement.classList.remove("no-prev");
+          }
+          context.hostElement.classList.remove("hover");
+          row.classList.remove("hover");
+        });
+      });
+    }
+    if (this.disabled) {
+      this.hostElement.classList.add("disabled");
+    }
+    else {
+      this.hostElement.classList.remove("disabled");
+    }
+    if (this.bordered) {
+      this.hostElement.classList.add("bordered");
+    }
+    else {
+      this.hostElement.classList.remove("bordered");
+    }
+    if (this.striped) {
+      this.hostElement.classList.add("striped");
+    }
+    else {
+      this.hostElement.classList.remove("striped");
+    }
+  }
+  render() {
+    return (h("div", { class: "pn-table-container" },
+      h("slot", null)));
+  }
+  static get is() { return "pn-table"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-table.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-table.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable table if set to true"
+      },
+      "attribute": "disabled",
+      "reflect": false
+    },
+    "bordered": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Add border to table if set to true"
+      },
+      "attribute": "bordered",
+      "reflect": false
+    },
+    "striped": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Make table striped if set to true"
+      },
+      "attribute": "striped",
+      "reflect": false
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,66 @@
+import { boolean } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+
+export default {
+  title: "Content/Table",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+export const regular = () => {
+  // Storybook Knobs ------------------------------------------//
+  const disabledBool = boolean("disabled: ", false);
+  const borderedBool = boolean("bordered: ", false);
+  const stripedBool = boolean("striped: ", false);
+  // --------------------------------------------------------- //
+
+  return `
+    <pn-table disabled=${disabledBool} bordered=${borderedBool} striped=${stripedBool}>
+      <table>
+        <thead>
+          <tr>
+            <th>
+              <div class="column-wrapper">
+                ID <pn-icon symbol="unfold" color="blue700" small="true" onClick="alert('sort me');"
+                  solid></pn-icon>
+              </div>
+            </th>
+            <th>
+              <div class="column-wrapper">
+                Name
+                <pn-icon symbol="unfold" color="blue700" small="true" onClick="alert('sort me');"
+                  solid />
+              </div>
+            </th>
+            <th>Address</th>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <td>Noe Halvorson</td>
+            <td>94626 Kaden Mount, Jerdebury, Cambridgeshire</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>Tracey Rau</td>
+            <td>95668 Bernhard Branch, Walkerbury, Avon</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>Darion Gorczany</td>
+            <td>8879 Mariam Key, Vandervortside, Bedfordshire</td>
+          </tr>
+          <tr>
+            <td>4</td>
+            <td>Rebekah Kunde</td>
+            <td>4948 Cletus Burgs, East Bradley, Borders</td>
+          </tr>
+        </tbody>
+      </table>
+    </pn-table>
+  `;
+};

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-colors/colors.stories.js

@@ -0,0 +1,12 @@
+import readme from "./readme.md";
+
+export default {
+  title: "design tokens/Colors",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const colorSwatch = () => `
+  <pn-colors />
+`;

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-colors/pn-color.css

@@ -0,0 +1,83 @@
+.color {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  border-radius: 2em;
+  box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.11), 0 0.2rem 0.2rem rgba(0, 0, 0, 0.11), 0 0.4rem 0.4rem rgba(0, 0, 0, 0.11), 0 0.8rem 0.8rem rgba(0, 0, 0, 0.11);
+  min-height: 12em;
+  overflow: hidden;
+  transition: background-color 0.2s ease;
+}
+.color button {
+  background: transparent;
+  border: 0.2rem solid white;
+  border-radius: 1em;
+  outline: none;
+  cursor: pointer;
+  background: white;
+  padding: 0.5em;
+  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.11);
+}
+
+.color-info {
+  padding: 2em 0;
+  text-align: center;
+  position: relative;
+  width: 100%;
+  margin: auto;
+  flex-grow: 1;
+}
+.color-info h1 {
+  color: white;
+  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+}
+
+.choice-container {
+  position: absolute;
+  bottom: 1em;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.choice-container button:first-child {
+  margin-right: 1em;
+}
+
+.palette {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  box-shadow: 0 1.5rem 1rem 1rem #333;
+  flex-grow: 0;
+  z-index: 1;
+}
+.palette li {
+  height: 3em;
+  width: 100%;
+  cursor: pointer;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: transform 0.4s cubic-bezier(0.64, 0.01, 0.67, 0.92), opacity 0.3s;
+}
+.fade-enter, .fade-leave-to {
+  transform: translateY(-10%);
+  opacity: 0;
+}
+
+.slide-enter-active {
+  transition: opacity 0.3s linear, transform 0.5s cubic-bezier(0.2, 0.5, 0.1, 1);
+  transition-delay: calc(0.2s + 0.2s * var(--i));
+}
+.slide-leave-active {
+  transition: opacity 0.4s linear, transform 0.5s cubic-bezier(0.5, 0, 0.7, 0.4);
+  transition-delay: calc(0.1s * var(--i));
+}
+.slide-leave-to, .slide-enter {
+  transform: translateY(1rem);
+  opacity: 0;
+}