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

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

@@ -0,0 +1,153 @@
+// {
+/* <template>
+  <div
+    @mouseover="hovered = true"
+    @mouseleave="resetPalette"
+    :style="{ 'background-color': activeColor.hex }"
+    class="color"
+  >
+    <div class="color-info">
+      <transition name="fade">
+        <h1 v-show="hovered">{{ activeColor.name }}</h1>
+      </transition>
+
+      <transition-group name="slide" tag="div" class="choice-container">
+        <button
+          class="choice"
+          v-show="hovered"
+          key="hex"
+          :style="{ '--i': 0 }"
+          @click="copyColor(activeColor.hex)"
+        >
+          # COPY HEX
+        </button>
+        <button
+          class="choice"
+          v-show="hovered"
+          key="var"
+          :style="{ '--i': 1 }"
+          @click="copyColor(activeColor.var)"
+        >
+          $ COPY VAR
+        </button>
+      </transition-group>
+    </div>
+
+    <ul class="palette">
+      <li
+        v-for="(color, i) in palette"
+        @mouseover="selectedColor = color"
+        @click="copyColor(color.var)"
+        :key="i"
+        :style="{ 'background-color': color.hex }"
+      ></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String,
+    defaultColor: Object,
+    palette: Array
+  },
+  data: () => ({
+    hovered: false,
+    valToCopy: "hex",
+    value: "",
+    selectedColor: null
+  }),
+  computed: {
+    activeColor() {
+      return this.selectedColor ? this.selectedColor : this.defaultColor;
+    }
+  },
+  methods: {
+    resetPalette() {
+      this.hovered = false;
+      this.selectedColor = null;
+    },
+    copyColor(val) {
+      console.log(val);
+      navigator.clipboard.writeText(val).then(
+        function() {
+          console.log("Async: Copying to clipboard was successful!");
+        },
+        function(err) {
+          console.error("Async: Could not copy text: ", err);
+        }
+      );
+    }
+  }
+};
+</script> */
+// }
+import { Component, Prop } from "@stencil/core";
+export class PnColor {
+  render() {
+    return `<h1>Color</h1>`;
+  }
+  static get is() { return "pn-color"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-color.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-color.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "defaultColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "default-color",
+      "reflect": false
+    },
+    "palette": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<object>",
+        "resolved": "object[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,26 @@
+.colors {
+  padding: 3em 2em;
+  max-width: 100rem;
+  margin: auto;
+}
+
+.palette-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-content: center;
+  flex-wrap: wrap;
+}
+.palette-container .color-palette {
+  flex: 1;
+  margin: 1em;
+}
+.palette-container .color-palette .color-swatch {
+  width: 100px;
+  height: 100px;
+  box-shadow: 1px 2px 4px #F3F2F2;
+}
+.palette-container .color-palette .color-name {
+  align-content: center;
+  margin-top: 8px;
+}

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

@@ -0,0 +1,19 @@
+import { Component, h } from "@stencil/core";
+import colors from "../../../assets/colors";
+export class PnColors {
+  render() {
+    return (h("div", { class: "colors" },
+      h("h1", null, "Colors"),
+      h("div", { class: "palette-container" }, Object.entries(colors).map(([name, rgb]) => (h("div", { class: "color-palette" },
+        h("div", { class: "color-swatch", style: { backgroundColor: rgb } }),
+        h("h4", { class: "color-name" }, name),
+        h("p", { class: "color-rg" }, rgb)))))));
+  }
+  static get is() { return "pn-colors"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-colors.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-colors.css"]
+  }; }
+}

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

@@ -0,0 +1,21 @@
+import { select, boolean } from "@storybook/addon-knobs";
+import readme from "./readme.md";
+import colors from "../../../assets/colors.ts";
+
+export default {
+  title: "Design Tokens/Icons",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const iconGrid = () => {
+  // Storybook Knobs, please ignore ----------------------------//
+  const colorString = select("color", Object.keys(colors), "black");
+  const smallBool = boolean("small", false);
+  //------------------------------------------------------------//
+
+  return `
+    <pn-icon-grid color=${colorString} small=${smallBool} />
+  `;
+};

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

@@ -0,0 +1,13 @@
+pn-icon {
+  display: inline-block;
+  vertical-align: top;
+}
+pn-icon svg {
+  display: block;
+  height: 1.5em;
+  width: 1.5em;
+}
+pn-icon.small svg {
+  height: 1em;
+  width: 1em;
+}

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

@@ -0,0 +1,83 @@
+import { Component, Prop, h, Host } from "@stencil/core";
+import allIcons from "../../../assets/icons";
+import colors from "../../../assets/colors";
+export class PnIcon {
+  constructor() {
+    /** The name of the icon you want to use */
+    this.symbol = null;
+    /** Medium is default but you can pass "small" for a 16x16 icon */
+    this.small = false;
+    /** Check for the available colors in the knobs panel in the story */
+    this.color = "black";
+  }
+  getIcon() {
+    // The replace is just setting the fill attribute on the SVG to the color passed to the component
+    return (allIcons[this.symbol] || "").replace(/#000/g, colors[this.color]);
+  }
+  render() {
+    return (h(Host, { class: `pn-icon ${this.small ? "small" : ""}`, innerHTML: this.getIcon() }));
+  }
+  static get is() { return "pn-icon"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-icon.css"]
+  }; }
+  static get properties() { return {
+    "symbol": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the icon you want to use"
+      },
+      "attribute": "symbol",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "small": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Medium is default but you can pass \"small\" for a 16x16 icon"
+      },
+      "attribute": "small",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Check for the available colors in the knobs panel in the story"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "\"black\""
+    }
+  }; }
+}

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-icon-grid/pn-icon-grid.css

@@ -0,0 +1,76 @@
+#sb-addon-centered-wrapper {
+  background-color: #f2f2f2;
+}
+
+.sb-show-main {
+  background-color: #f2f2f2;
+}
+
+.icon-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 5rem auto;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 17rem);
+  grid-gap: 5rem;
+  max-width: 120rem;
+}
+.icon-grid .icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2.5rem;
+  background-color: #f2f2f2;
+  box-shadow: 0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);
+  height: 14rem;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+}
+.icon-grid .icon:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  transition: all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);
+}
+.icon-grid .icon.active {
+  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
+}
+.icon-grid .icon.active:after {
+  box-shadow: inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);
+}
+.icon-grid .icon span {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  color: #5E554A;
+  font-size: 0.9em;
+}
+.icon-grid .icon p {
+  position: absolute;
+  padding: 0 0.5rem 1rem;
+  text-align: center;
+  bottom: 0.5rem;
+  font-size: 0.9em;
+  color: #5E554A;
+  transition: transform 0.3s ease-in-out, opacity 0.2s ease;
+}
+.icon-grid .icon p.copy {
+  transform: translateY(3.5rem);
+  opacity: 0;
+}
+.icon-grid .icon:hover p.symbol-name {
+  transform: translateY(3.5rem);
+  opacity: 0;
+}
+.icon-grid .icon:hover p.copy {
+  transform: translateY(0);
+  opacity: 1;
+}

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-icon-grid/pn-icon-grid.js

@@ -0,0 +1,81 @@
+import { Component, Prop, h, State } from "@stencil/core";
+import allIcons from "../../../assets/icons";
+import colors from "../../../assets/colors";
+export class PnIconGrid {
+  constructor() {
+    this.small = false;
+    this.color = colors["grey-08-night"];
+    this.activeSymbol = null;
+  }
+  async copySymbolName(symbolName) {
+    if (!navigator.clipboard) {
+      // Clipboard API not available
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(`<pn-icon symbol="${symbolName}" small="${this.small}" color="${this.color}" />`);
+      this.activeSymbol = symbolName;
+      setTimeout(() => {
+        this.activeSymbol = null;
+      }, 3000);
+    }
+    catch (err) {
+      console.error("Failed to copy!", err);
+    }
+  }
+  render() {
+    return (h("div", { class: "icon-grid" }, Object.keys(allIcons).map(symbolName => (h("div", { class: symbolName === this.activeSymbol ? "active icon" : "icon", onClick: () => this.copySymbolName(symbolName) },
+      symbolName === this.activeSymbol && (h("span", { class: "copied" }, "Copied")),
+      h("pn-icon", { symbol: symbolName, color: this.color, small: this.small }),
+      h("p", { class: "symbol-name" }, symbolName),
+      h("p", { class: "copy" }, "Click to copy"))))));
+  }
+  static get is() { return "pn-icon-grid"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-icon-grid.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-icon-grid.css"]
+  }; }
+  static get properties() { return {
+    "small": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "small",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "colors[\"grey-08-night\"]"
+    }
+  }; }
+  static get states() { return {
+    "activeSymbol": {}
+  }; }
+}

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

@@ -0,0 +1,18 @@
+import readme from "./readme.md";
+
+export default {
+  title: "Design Tokens/Illustrations",
+  parameters: {
+    notes: readme
+  }
+};
+
+export const illustrationGrid = () => {
+  // Storybook Knobs, please ignore ----------------------------//
+
+  //------------------------------------------------------------//
+
+  return `
+    <pn-illustration-grid />
+  `;
+};

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

@@ -0,0 +1,7 @@
+pn-icon {
+  display: inline-block;
+  vertical-align: top;
+}
+pn-icon svg {
+  display: block;
+}

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

@@ -0,0 +1,37 @@
+import { Component, Prop, h } from "@stencil/core";
+import allIllustrations from "../../../assets/illustrations";
+export class PnIllustration {
+  constructor() {
+    this.illustration = null;
+  }
+  render() {
+    return (h("div", { class: "pn-illustration", innerHTML: allIllustrations[this.illustration] }));
+  }
+  static get is() { return "pn-illustration"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-illustration.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-illustration.css"]
+  }; }
+  static get properties() { return {
+    "illustration": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "illustration",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+}

package/umd/modules/@postnord/web-components/collection/components/design-tokens/pn-illustration-grid/pn-illustration-grid.css

@@ -0,0 +1,79 @@
+#sb-addon-centered-wrapper {
+  background-color: #f2f2f2;
+}
+
+.sb-show-main {
+  background-color: #f2f2f2;
+}
+
+.illustration-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 5rem auto;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 19rem);
+  grid-gap: 5rem;
+  max-width: 120rem;
+}
+.illustration-grid .illustration {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2.5rem;
+  background-color: #f2f2f2;
+  box-shadow: 0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);
+  height: 16rem;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+}
+.illustration-grid .illustration svg {
+  height: 8rem;
+}
+.illustration-grid .illustration:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  transition: all 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);
+}
+.illustration-grid .illustration.active {
+  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
+}
+.illustration-grid .illustration.active:after {
+  box-shadow: inset 0px -2px 5px white, inset 0px 2px 5px rgba(0, 0, 0, 0.15);
+}
+.illustration-grid .illustration span {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  color: #5E554A;
+  font-size: 0.9em;
+}
+.illustration-grid .illustration p {
+  position: absolute;
+  padding: 0 0.5rem 1rem;
+  text-align: center;
+  bottom: 0.5rem;
+  font-size: 0.9em;
+  color: #5E554A;
+  transition: transform 0.3s ease-in-out, opacity 0.2s ease;
+}
+.illustration-grid .illustration p.copy {
+  transform: translateY(3.5rem);
+  opacity: 0;
+}
+.illustration-grid .illustration:hover p.illustration-name {
+  transform: translateY(3.5rem);
+  opacity: 0;
+}
+.illustration-grid .illustration:hover p.copy {
+  transform: translateY(0);
+  opacity: 1;
+}