@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/collection/components/widgets/pn-qr-code-generator/pn-qr-code-generator.js

@@ -0,0 +1,198 @@
+import { h } from "@stencil/core";
+import QRCode from "qrcode";
+export class QrCodeGenerator {
+    constructor() {
+        this.url = undefined;
+        this.countdownSeconds = -1;
+        this.outdatedMessage = undefined;
+        this.expiresInMessage = undefined;
+        this.updateCodeEverySecond = true;
+        this.ariaLabel = undefined;
+        this.remainingSeconds = undefined;
+        this.isOutdated = false;
+        this.isFullscreen = false;
+    }
+    canvasRef;
+    timer;
+    urlWithSegment;
+    gray900 = '#2d2013';
+    blackHex = '#000';
+    whiteHex = '#fff';
+    componentWillLoad() {
+        this.urlWithSegment = this.url + '#';
+        this.remainingSeconds = this.countdownSeconds;
+    }
+    componentDidLoad() {
+        this.generateQRCode();
+        if (this.countdownSeconds !== -1) {
+            this.startCountdown();
+        }
+    }
+    generateQRCode(urlSegment = '') {
+        if (this.url && this.canvasRef) {
+            this.urlWithSegment += urlSegment;
+            QRCode.toCanvas(this.canvasRef, this.urlWithSegment, {
+                width: 200,
+                color: {
+                    dark: this.isOutdated ? this.gray900 : this.blackHex,
+                    light: this.isOutdated ? this.gray900 : this.whiteHex,
+                },
+            }, error => {
+                if (error)
+                    console.error(error);
+            });
+        }
+    }
+    startCountdown() {
+        this.timer = setInterval(() => {
+            if (this.remainingSeconds > 0) {
+                this.remainingSeconds--;
+                this.generateQRCode('p');
+            }
+            else {
+                clearInterval(this.timer);
+                this.isOutdated = true;
+                this.generateQRCode();
+            }
+        }, 1000);
+    }
+    disconnectedCallback() {
+        clearInterval(this.timer);
+    }
+    render() {
+        return (h("div", { key: 'e0bc37a181c7787812bbd052877cf1c0ecffe4c9' }, h("button", { key: '6486b7b7e94493ba8cf32d6cef7e9224c119a8ea', class: "qr-button__wrapper", "aria-label": this.ariaLabel }, h("canvas", { key: 'e66b827b3a7b92b3cf250e73b0dade3675fad9b7', class: this.isOutdated ? 'outdated' : '', ref: el => (this.canvasRef = el) })), this.countdownSeconds !== -1 && h("div", { key: '122ba7328a26fb6116ffc5b6c9b3a4cdcc24b8a2', class: "timer" }, this.isOutdated && h("span", { key: 'da1c41fe27834b3fdfcc08f456ab0f53e13a9a12', class: "outdated-message" }, this.outdatedMessage), !this.isOutdated && this.expiresInMessage && h("span", { key: 'c6515a6aa7491e02267f82f55abac7388ed68d15' }, this.expiresInMessage, " ", this.remainingSeconds))));
+    }
+    static get is() { return "pn-qr-code-generator"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-qr-code-generator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-qr-code-generator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "countdownSeconds": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "countdown-seconds",
+                "reflect": false,
+                "defaultValue": "-1"
+            },
+            "outdatedMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "outdated-message",
+                "reflect": false
+            },
+            "expiresInMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expires-in-message",
+                "reflect": false
+            },
+            "updateCodeEverySecond": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "update-code-every-second",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "aria-label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "remainingSeconds": {},
+            "isOutdated": {},
+            "isFullscreen": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "url",
+                "methodName": "generateQRCode"
+            }];
+    }
+}
+//# sourceMappingURL=pn-qr-code-generator.js.map

package/collection/components/widgets/pn-qr-code-generator/pn-qr-code-generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-qr-code-generator.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-qr-code-generator/pn-qr-code-generator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Watch, h } from '@stencil/core';\nimport QRCode from 'qrcode';\n\n@Component({\n  tag: 'pn-qr-code-generator',\n  styleUrl: 'pn-qr-code-generator.scss'\n})\nexport class QrCodeGenerator {\n  @Prop() url: string;\n  @Prop() countdownSeconds: number = -1;\n  @Prop() outdatedMessage: string;\n  @Prop() expiresInMessage: string;\n  @Prop() updateCodeEverySecond: boolean = true;\n  @Prop() ariaLabel: string;\n\n  @State() remainingSeconds: number;\n  @State() isOutdated: boolean = false;\n  @State() isFullscreen: boolean = false;\n\n  private canvasRef: HTMLCanvasElement;\n  private timer: any;\n  private urlWithSegment: string;\n\n  private readonly gray900: string = '#2d2013';\n  private readonly blackHex: string = '#000';\n  private readonly whiteHex: string = '#fff';\n\n  componentWillLoad() {\n    this.urlWithSegment = this.url + '#';\n    this.remainingSeconds = this.countdownSeconds;\n  }\n\n  componentDidLoad() {\n    this.generateQRCode();\n    if (this.countdownSeconds !== -1) {\n      this.startCountdown();\n    }\n  }\n\n  @Watch('url')\n  generateQRCode(urlSegment: string = '') {\n    if (this.url && this.canvasRef) {\n      this.urlWithSegment += urlSegment;\n      QRCode.toCanvas(this.canvasRef, this.urlWithSegment, {\n        width: 200,\n        color: {\n          dark: this.isOutdated ? this.gray900 : this.blackHex,\n          light: this.isOutdated ? this.gray900 : this.whiteHex,\n        },\n      }, error => {\n        if (error) console.error(error);\n      });\n    }\n  }\n\n  startCountdown() {\n    this.timer = setInterval(() => {\n      if (this.remainingSeconds > 0) {\n        this.remainingSeconds--;\n        this.generateQRCode('p');\n      } else {\n        clearInterval(this.timer);\n        this.isOutdated = true;\n        this.generateQRCode();\n      }\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    clearInterval(this.timer);\n  }\n\n  render() {\n    return (\n      <div>\n        <button class=\"qr-button__wrapper\" aria-label={this.ariaLabel}>\n          <canvas\n            class={this.isOutdated ? 'outdated' : ''}\n            ref={el => (this.canvasRef = el)}>\n          </canvas>\n        </button>\n          {this.countdownSeconds !== -1 && <div class=\"timer\">\n            {this.isOutdated && <span class=\"outdated-message\">{this.outdatedMessage}</span>}\n            {!this.isOutdated && this.expiresInMessage && <span>{this.expiresInMessage} {this.remainingSeconds}</span>}\n          </div>}\n      </div>\n    );\n  }\n}"]}

package/collection/components/widgets/pn-qr-code-generator/pn-qr-code-generator.stories.js

@@ -0,0 +1,29 @@
+import { createDocumentation, createComponent } from "../../../globals/documentation/story";
+import docs from "./pn-qr-code-generator-docs.json";
+const { argTypes, textContent } = createDocumentation(docs);
+const meta = {
+    title: 'Components/Widgets/Qr code generator',
+    parameters: {
+        actions: {},
+        docs: {
+            description: {
+                story: textContent
+            }
+        }
+    },
+    args: {
+        url: 'https://se-integration.postnord.com',
+        countdownSeconds: 30,
+        outdatedMessage: 'The QR has expired',
+        expiresInMessage: 'Expires in',
+        updateCodeEverySecond: true,
+        ariaLabel: 'QR Code Generator'
+    },
+    argTypes,
+};
+export default meta;
+export const QrCodeGenerator = {
+    name: 'pn-qr-code-generator',
+    render: (args) => createComponent('pn-qr-code-generator', args),
+};
+//# sourceMappingURL=pn-qr-code-generator.stories.js.map

package/collection/components/widgets/pn-qr-code-generator/pn-qr-code-generator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-qr-code-generator.stories.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-qr-code-generator/pn-qr-code-generator.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,kCAAkC,CAAC;AAEpD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAAuC;IAC/C,KAAK,EAAE,sCAAsC;IAC7C,UAAU,EAAE;QACV,OAAO,EAAE,EACR;QACD,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACF,GAAG,EAAE,qCAAqC;QAC1C,gBAAgB,EAAE,EAAE;QACpB,eAAe,EAAE,oBAAoB;QACrC,gBAAgB,EAAE,YAAY;QAC9B,qBAAqB,EAAE,IAAI;QAC3B,SAAS,EAAE,mBAAmB;KACjC;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,sBAAsB,EAAE,IAAI,CAAC;CAChE,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-qr-code-generator-docs.json';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnQrCodeGeneratorElement> = {\n  title: 'Components/Widgets/Qr code generator',\n  parameters: {\n    actions: {\n    },\n    docs: {\n      description: {\n        story: textContent\n      }\n    }\n  },\n  args: {\n      url: 'https://se-integration.postnord.com',\n      countdownSeconds: 30,\n      outdatedMessage: 'The QR has expired',\n      expiresInMessage: 'Expires in',\n      updateCodeEverySecond: true,\n      ariaLabel: 'QR Code Generator'\n  },\n  argTypes,\n};\n\ntype Story = StoryObj<HTMLPnQrCodeGeneratorElement>;\n\nexport default meta;\n\nexport const QrCodeGenerator: Story = {\n  name: 'pn-qr-code-generator',\n  render: (args) => createComponent('pn-qr-code-generator', args),\n};\n"]}

package/collection/components/widgets/pn-search/pn-search.css

@@ -0,0 +1,140 @@
+pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
+  min-height: initial;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+.pn-search {
+  background-color: transparent;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.pn-search .graphics-container {
+  padding-bottom: 1rem;
+}
+.pn-search .graphics {
+  border-radius: 50%;
+  height: clamp(12rem, 14vw, 16rem);
+  width: clamp(12rem, 14vw, 16rem);
+  aspect-ratio: 1/1;
+  object-fit: cover;
+}
+.pn-search .illustration {
+  --pn-width: 12rem;
+  --pn-height: 12rem;
+}
+.pn-search .search-container {
+  margin: clamp(1rem, 3vh, 1.5rem) 0;
+}
+.pn-search .search-container ::placeholder {
+  color: #5e554a;
+}
+.pn-search .main {
+  text-align: center;
+  width: 100%;
+}
+.pn-search .heading {
+  color: #000000;
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  line-height: 1;
+  margin: 0;
+}
+.pn-search .search-container {
+  display: flex;
+  width: 100%;
+}
+.pn-search .search-container .search-component input,
+.pn-search .search-container .search-component button {
+  font-size: 1.6rem;
+}
+.pn-search .cta {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  margin-top: 2rem;
+  gap: 1.2rem;
+  width: 100%;
+}
+.pn-search .btn-mw[data-secondary] {
+  color: #005d92;
+  font-weight: 500;
+  text-decoration: underline;
+}
+
+@media (min-width: 768px) {
+  .pn-search {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .pn-search .graphics-container {
+    padding-right: clamp(2rem, 3vw, 4rem);
+    padding-bottom: 0;
+  }
+  .pn-search .illustration {
+    --pn-width: 15rem;
+    --pn-height: 15rem;
+  }
+  .pn-search .main {
+    text-align: left;
+  }
+  .pn-search pn-marketweb-search {
+    width: 40rem;
+  }
+  .pn-search .cta {
+    gap: 1.6rem;
+  }
+  .pn-search .btn-mw[data-primary] {
+    width: auto;
+    margin-bottom: 0;
+  }
+  .pn-search .btn-mw[data-secondary] {
+    margin-top: 0;
+  }
+}
+@media (min-width: 1200px) {
+  .pn-search {
+    padding: 2.4rem;
+  }
+  .pn-search .search-container {
+    max-width: 400px;
+  }
+  .pn-search .illustration {
+    --pn-width: 16rem;
+    --pn-height: 16rem;
+  }
+}
+@media (min-width: 1600px) {
+  .pn-search {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 3.2rem;
+  }
+  .pn-search .search-container {
+    max-width: 500px;
+  }
+}