@postnord/pn-marketweb-components 3.5.3 → 4.0.0

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

@@ -0,0 +1,368 @@
+import { Host, h } from "@stencil/core";
+export class PNSearch {
+    constructor() {
+        this.componentAriaLabel = undefined;
+        this.heading = undefined;
+        this.pnIllustrationSvg = undefined;
+        this.imageUrl = undefined;
+        this.imageAltText = undefined;
+        this.searchPlaceholder = undefined;
+        this.searchButtonText = undefined;
+        this.searchButtonLabel = undefined;
+        this.searchUrl = undefined;
+        this.primaryButtonText = undefined;
+        this.primaryButtonUrl = undefined;
+        this.primaryButtonIconSvg = undefined;
+        this.secondaryButtonText = undefined;
+        this.secondaryButtonUrl = undefined;
+        this.searchDescriptionAria = undefined;
+        this.ctaActionsLabel = undefined;
+        this.searchType = undefined;
+    }
+    hostElement;
+    pnSearch;
+    doSearch = (e) => {
+        if (!this.searchUrl) {
+            console.warn('Search URL is not defined');
+            return;
+        }
+        const searchDetail = {
+            query: e.detail,
+            timestamp: Date.now(),
+        };
+        this.pnSearch.emit(searchDetail);
+    };
+    render() {
+        const hasButtons = this.primaryButtonUrl || this.secondaryButtonUrl;
+        return (h(Host, { key: 'fd8fdc6f6bc5d4743ff328d914a6b2b55d840503' }, h("div", { key: 'fb4be66b1a38fde9e5b0b0e3fc4abbdf0f1b2f38', class: "pn-search", role: "search", "aria-label": this.componentAriaLabel }, h("div", { key: 'b07dbfb4dcdf54e88ac790d4da6aa97a00356d04', class: "graphics-container", "aria-hidden": !this.imageAltText }, !this.pnIllustrationSvg && this.imageUrl && h("img", { key: '50ad3338cf3912ff74a50a6b72102e6d5e61f4f6', class: "graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" }), this.pnIllustrationSvg && h("pn-illustration", { key: '3956261bb79fbac47239f2091e3d50344e94d555', class: "illustration", illustration: this.pnIllustrationSvg, role: "presentation" })), h("div", { key: '17c6d2c2d1cd812f583f072b17adc3747562ae85', class: "main" }, h("h2", { key: '9214e9895160ee1d316f1ee09f4ddacb7c81f452', class: "heading", id: "search-section-heading" }, this.heading), h("div", { key: '1db65a02236162c22210981d11d3567e6cc27f58', class: "search-container", "aria-labelledby": "search-section-heading" }, h("pn-marketweb-search", { key: 'a560d93bb4747643a5c81610c2e55d0af0825559', class: "search-component", label: this.searchButtonLabel, name: "search", inputid: "search-field", autocomplete: "off", placeholder: this.searchPlaceholder, button: this.searchButtonText, disabled: false, loading: false, light: false, list: null, onSearch: this.doSearch, "data-search-url": this.searchUrl, "aria-describedby": "search-description" }), this.searchDescriptionAria && (h("div", { key: '3d59bd65947e1ecbdcfb75667135dc40e2482955', id: "search-description", class: "sr-only" }, this.searchDescriptionAria))), hasButtons && (h("div", { key: '1d9a2bd31084ae806879e6bc9e820591e3bd4b29', class: "cta", role: "group", "aria-label": this.ctaActionsLabel }, this.primaryButtonUrl && (h("pn-button", { key: '5ddda20fd6846f75e301272e52fc3c200e2c71bb', appearance: "light", variant: "outlined", small: true, icon: this.primaryButtonIconSvg, "left-icon": Boolean(this.primaryButtonIconSvg), class: "btn-mw", href: this.primaryButtonUrl, "data-primary": true }, this.primaryButtonText)), this.secondaryButtonUrl && (h("a", { key: 'a82cf19405f6144f9b5fd789ffa1242128a4c8f1', href: this.secondaryButtonUrl, class: "btn-mw", "data-secondary": true, role: "button" }, this.secondaryButtonText))))))));
+    }
+    static get is() { return "pn-search"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-search.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "component-aria-label",
+                "reflect": false
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "pnIllustrationSvg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "pn-illustration-svg",
+                "reflect": false
+            },
+            "imageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-url",
+                "reflect": false
+            },
+            "imageAltText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "image-alt-text",
+                "reflect": false
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-placeholder",
+                "reflect": false
+            },
+            "searchButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-button-text",
+                "reflect": false
+            },
+            "searchButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-button-label",
+                "reflect": false
+            },
+            "searchUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-url",
+                "reflect": false
+            },
+            "primaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-button-text",
+                "reflect": false
+            },
+            "primaryButtonUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-button-url",
+                "reflect": false
+            },
+            "primaryButtonIconSvg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "primary-button-icon-svg",
+                "reflect": false
+            },
+            "secondaryButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-button-text",
+                "reflect": false
+            },
+            "secondaryButtonUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "secondary-button-url",
+                "reflect": false
+            },
+            "searchDescriptionAria": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-description-aria",
+                "reflect": false
+            },
+            "ctaActionsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "cta-actions-label",
+                "reflect": false
+            },
+            "searchType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'shipments' | 'episearch'",
+                    "resolved": "\"episearch\" | \"shipments\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "search-type",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pnSearch",
+                "name": "pnSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "SearchEventDetail",
+                    "resolved": "SearchEventDetail",
+                    "references": {
+                        "SearchEventDetail": {
+                            "location": "global",
+                            "id": "global::SearchEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=pn-search.js.map

package/collection/components/widgets/pn-search/pn-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-search.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-search/pn-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Element, Prop, h, Event, EventEmitter } from '@stencil/core';\n\ninterface SearchEventDetail {\n  query: string;\n  timestamp: number;\n}\n\n@Component({\n  tag: 'pn-search',\n  styleUrl: 'pn-search.scss',\n})\nexport class PNSearch {\n  @Element() hostElement!: HTMLElement;\n\n  @Prop() componentAriaLabel!: string;\n  @Prop() heading!: string;\n  @Prop() pnIllustrationSvg?: string;\n  @Prop() imageUrl?: string;\n  @Prop() imageAltText?: string;\n  @Prop() searchPlaceholder?: string;\n  @Prop() searchButtonText?: string;\n  @Prop() searchButtonLabel?: string;\n  @Prop() searchUrl?: string;\n  @Prop() primaryButtonText?: string;\n  @Prop() primaryButtonUrl?: string;\n  @Prop() primaryButtonIconSvg?: string;\n  @Prop() secondaryButtonText?: string;\n  @Prop() secondaryButtonUrl?: string;\n  @Prop() searchDescriptionAria?: string;\n  @Prop() ctaActionsLabel?: string;\n  @Prop() searchType: 'shipments' | 'episearch';\n\n  @Event() pnSearch!: EventEmitter<SearchEventDetail>;\n\n  private doSearch = (e: CustomEvent): void => {\n    if (!this.searchUrl) {\n      console.warn('Search URL is not defined');\n      return;\n    }\n\n    const searchDetail: SearchEventDetail = {\n      query: e.detail,\n      timestamp: Date.now(),\n    };\n\n    this.pnSearch.emit(searchDetail);\n  };\n\n  render() {\n    const hasButtons = this.primaryButtonUrl || this.secondaryButtonUrl;\n\n    return (\n      <Host>\n        <div class=\"pn-search\" role=\"search\" aria-label={this.componentAriaLabel}>\n          <div class=\"graphics-container\" aria-hidden={!this.imageAltText}>\n            {!this.pnIllustrationSvg && this.imageUrl && <img class=\"graphics\" src={this.imageUrl} alt={this.imageAltText || ''} loading=\"lazy\" />}\n            {this.pnIllustrationSvg && <pn-illustration class=\"illustration\" illustration={this.pnIllustrationSvg} role=\"presentation\" />}\n          </div>\n\n          <div class=\"main\">\n            <h2 class=\"heading\" id=\"search-section-heading\">\n              {this.heading}\n            </h2>\n\n            <div class=\"search-container\" aria-labelledby=\"search-section-heading\">\n              <pn-marketweb-search\n                class=\"search-component\"\n                label={this.searchButtonLabel}\n                name=\"search\"\n                inputid=\"search-field\"\n                autocomplete=\"off\"\n                placeholder={this.searchPlaceholder}\n                button={this.searchButtonText}\n                disabled={false}\n                loading={false}\n                light={false}\n                list={null}\n                onSearch={this.doSearch}\n                data-search-url={this.searchUrl}\n                aria-describedby=\"search-description\"\n              />\n              {this.searchDescriptionAria && (\n                <div id=\"search-description\" class=\"sr-only\">\n                  {this.searchDescriptionAria}\n                </div>\n              )}\n            </div>\n\n            {hasButtons && (\n              <div class=\"cta\" role=\"group\" aria-label={this.ctaActionsLabel}>\n                {this.primaryButtonUrl && (\n                  <pn-button\n                    appearance=\"light\"\n                    variant=\"outlined\"\n                    small={true}\n                    icon={this.primaryButtonIconSvg}\n                    left-icon={Boolean(this.primaryButtonIconSvg)}\n                    class=\"btn-mw\"\n                    href={this.primaryButtonUrl}\n                    data-primary\n                  >\n                    {this.primaryButtonText}\n                  </pn-button>\n                )}\n                {this.secondaryButtonUrl && (\n                  <a href={this.secondaryButtonUrl} class=\"btn-mw\" data-secondary role=\"button\">\n                    {this.secondaryButtonText}\n                  </a>\n                )}\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/collection/components/widgets/pn-search/pn-search.stories.js

@@ -0,0 +1,54 @@
+import { createDocumentation, createComponent } from "../../../globals/documentation/story";
+import docs from "./pn-search-docs.json";
+const { argTypes, textContent } = createDocumentation(docs);
+const meta = {
+    title: 'Components/Widgets/Search',
+    parameters: {
+        actions: {},
+        docs: {
+            description: {
+                story: textContent,
+            },
+        },
+    },
+    args: {
+        componentAriaLabel: 'Component Search Interface',
+        heading: 'Lena Ohlsson',
+        imageUrl: '',
+        searchPlaceholder: 'Track / add shipment',
+        searchButtonLabel: 'Search',
+        searchDescriptionAria: 'Enter your search terms and press enter or click the search button',
+        ctaActionsLabel: 'Additional actions',
+    },
+    argTypes,
+};
+export default meta;
+export const Search = {
+    name: 'pn-search',
+    render: args => createComponent('pn-search', args),
+};
+export const SearchWithImageUrl = {
+    name: 'Image Url',
+    render: Search.render,
+    args: {
+        heading: 'Lena Ohlsson',
+        imageUrl: 'https://picsum.photos/id/64/140/140',
+        searchPlaceholder: 'Track / add shipment',
+        primaryButtonText: 'Start New Chat',
+        primaryButtonUrl: '#',
+        primaryButtonIconSvg: '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.388 2c5.522 0 10 4.477 10 10s-4.478 10-10 10H2l1.355-4.064-.798-3.987a8.8 8.8 0 0 1-.17-1.717V12c0-5.523 4.478-10 10-10m8 10a8 8 0 0 0-16 0v.232q0 .67.13 1.325l.902 4.507L4.775 20h7.612a8 8 0 0 0 8-8m-12.5-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m6 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m3-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3" clip-rule="evenodd"/></svg>',
+        secondaryButtonText: 'Show Chat History',
+        secondaryButtonUrl: '#',
+        searchUrl: 'https://www.postnord.se/vara-verktyg/spara-brev-paket-och-pall/?shipmentId=',
+    },
+};
+export const SearchWithIllustration = {
+    name: 'Illustration',
+    render: Search.render,
+    args: {
+        heading: 'Lena Ohlsson',
+        pnIllustrationSvg: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 120 120"><g clip-path="url(#birthday_svg__a)"><path fill="#5EC584" d="M72.627 27.856H47.812c-21.895 0-39.703 17.622-39.703 39.288v15.311h104.367V67.29c-.146-21.811-17.954-39.433-39.85-39.433"/><path fill="#ABE3BB" d="M31.754 82.6c1.898-6.933 1.752-15.166-.583-22.533-1.752-5.633-4.963-11.7-8.029-17.622l-2.19-4.334c-.437.29-.729.723-1.167 1.011.584 1.3 1.314 2.6 1.898 3.9 3.065 5.923 6.13 11.99 7.882 17.478 2.481 7.656 2.19 15.6.438 22.1zM34.234 32.767c3.649 9.533 7.736 20.366 19.851 19.066 6.569-.722 12.407-4.333 16.786-10.544 2.774-3.756 4.817-8.378 5.985-13.145-.438 0-1.022-.144-1.46-.144-1.167 4.478-3.21 8.956-5.692 12.422-2.92 4.045-8.028 9.1-15.765 9.822-10.947 1.156-14.742-8.666-18.246-18.2l-.875-2.166-1.314.433c.146 1.011.438 1.733.73 2.456M54.378 82.312c.438-10.256 17.662-24.845 32.988-37.845 3.357-2.889 6.715-5.633 9.634-8.233-.438-.289-.73-.578-1.168-.867-2.92 2.6-6.13 5.345-9.342 8.09-15.472 13-32.988 27.877-33.572 38.855v.433h1.46zM112.326 65.7c0-.722-.146-1.3-.146-2.022-6.568 6.355-15.034 13.578-23.5 19.066h2.773c7.444-5.2 14.889-11.266 20.873-17.044"/><path fill="#FDEFEE" d="M54.816 18.756h10.948v-1.878c0-1.011-.876-1.878-1.898-1.878h-7.152c-1.022 0-1.898.867-1.898 1.878z"/><path fill="#005E41" d="M85.616 23.378c-14.013-5.489-15.764 8.667-15.764 8.667s12.115 6.5 15.764-8.667M50.585 31.467c-14.013 5.49-15.765-8.666-15.765-8.666s12.115-6.5 15.765 8.666"/><path fill="#FBC2C1" d="M65.618 23.521H54.816a2.757 2.757 0 0 1-2.773-2.744c0-1.589 1.314-2.745 2.773-2.745h10.802c1.606-.144 2.92 1.156 2.92 2.745s-1.314 2.744-2.92 2.744"/><path fill="#F06365" d="M70.144 22.945c0 5.345-4.379 9.822-9.925 9.822s-9.926-4.333-9.926-9.822z"/><path fill="#ABE3BB" d="M28.985 82.6c0-5.633-4.67-10.255-10.363-10.255S8.258 76.967 8.258 82.6z"/><path fill="#ABE3BB" d="M49.712 82.6c0-5.633-4.671-10.255-10.364-10.255S28.984 76.967 28.984 82.6z"/><path fill="#ABE3BB" d="M70.584 82.6c0-5.633-4.67-10.255-10.364-10.255-5.692 0-10.51 4.622-10.51 10.255zM91.458 82.6c0-5.633-4.671-10.255-10.364-10.255S70.731 76.967 70.731 82.6zM112.333 82.6c0-5.633-4.671-10.255-10.364-10.255S91.606 76.967 91.606 82.6z"/><path fill="#FFC8A3" d="M73.938 106h-27.88L59.78 85.056z"/><path fill="#FFC8A3" d="M117 88.955H3v-1.733c0-2.456 2.044-4.478 4.525-4.478h104.95c2.481 0 4.525 2.022 4.525 4.478z"/><path fill="#4F1600" d="m57.152 88.956-2.336 3.611h10.072l-2.481-3.61z"/></g><defs><clipPath id="birthday_svg__a"><path fill="#fff" d="M3 15h114v91H3z"/></clipPath></defs></svg>',
+        searchPlaceholder: 'Track / add shipment',
+    },
+};
+//# sourceMappingURL=pn-search.stories.js.map

package/collection/components/widgets/pn-search/pn-search.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-search.stories.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-search/pn-search.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,uBAAuB,CAAC;AAEzC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAA8B;IACtC,KAAK,EAAE,2BAA2B;IAClC,UAAU,EAAE;QACV,OAAO,EAAE,EAAE;QACX,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACJ,kBAAkB,EAAE,4BAA4B;QAChD,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,EAAE;QACZ,iBAAiB,EAAE,sBAAsB;QACzC,iBAAiB,EAAE,QAAQ;QAC3B,qBAAqB,EAAE,oEAAoE;QAC3F,eAAe,EAAE,oBAAoB;KACtC;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;QACvB,QAAQ,EAAE,qCAAqC;QAC/C,iBAAiB,EAAE,sBAAsB;QACzC,iBAAiB,EAAE,gBAAgB;QACnC,gBAAgB,EAAE,GAAG;QACrB,oBAAoB,EAClB,ifAAif;QACnf,mBAAmB,EAAE,mBAAmB;QACxC,kBAAkB,EAAE,GAAG;QACvB,SAAS,EAAE,6EAA6E;KACzF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAU;IAC3C,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,IAAI,EAAE;QACJ,OAAO,EAAE,cAAc;QACvB,iBAAiB,EACf,0+EAA0+E;QAC5+E,iBAAiB,EAAE,sBAAsB;KAC1C;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-search-docs.json';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnSearchElement> = {\n  title: 'Components/Widgets/Search',\n  parameters: {\n    actions: {},\n    docs: {\n      description: {\n        story: textContent,\n      },\n    },\n  },\n  args: {\n    componentAriaLabel: 'Component Search Interface',\n    heading: 'Lena Ohlsson',\n    imageUrl: '',\n    searchPlaceholder: 'Track / add shipment',\n    searchButtonLabel: 'Search',\n    searchDescriptionAria: 'Enter your search terms and press enter or click the search button',\n    ctaActionsLabel: 'Additional actions',\n  },\n  argTypes,\n};\n\ntype Story = StoryObj<HTMLPnSearchElement>;\n\nexport default meta;\n\nexport const Search: Story = {\n  name: 'pn-search',\n  render: args => createComponent('pn-search', args),\n};\n\nexport const SearchWithImageUrl: Story = {\n  name: 'Image Url',\n  render: Search.render,\n  args: {\n    heading: 'Lena Ohlsson',\n    imageUrl: 'https://picsum.photos/id/64/140/140',\n    searchPlaceholder: 'Track / add shipment',\n    primaryButtonText: 'Start New Chat',\n    primaryButtonUrl: '#',\n    primaryButtonIconSvg:\n      '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M12.388 2c5.522 0 10 4.477 10 10s-4.478 10-10 10H2l1.355-4.064-.798-3.987a8.8 8.8 0 0 1-.17-1.717V12c0-5.523 4.478-10 10-10m8 10a8 8 0 0 0-16 0v.232q0 .67.13 1.325l.902 4.507L4.775 20h7.612a8 8 0 0 0 8-8m-12.5-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m6 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m3-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3\" clip-rule=\"evenodd\"/></svg>',\n    secondaryButtonText: 'Show Chat History',\n    secondaryButtonUrl: '#',\n    searchUrl: 'https://www.postnord.se/vara-verktyg/spara-brev-paket-och-pall/?shipmentId=',\n  },\n};\n\nexport const SearchWithIllustration: Story = {\n  name: 'Illustration',\n  render: Search.render,\n  args: {\n    heading: 'Lena Ohlsson',\n    pnIllustrationSvg:\n      '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 120 120\"><g clip-path=\"url(#birthday_svg__a)\"><path fill=\"#5EC584\" d=\"M72.627 27.856H47.812c-21.895 0-39.703 17.622-39.703 39.288v15.311h104.367V67.29c-.146-21.811-17.954-39.433-39.85-39.433\"/><path fill=\"#ABE3BB\" d=\"M31.754 82.6c1.898-6.933 1.752-15.166-.583-22.533-1.752-5.633-4.963-11.7-8.029-17.622l-2.19-4.334c-.437.29-.729.723-1.167 1.011.584 1.3 1.314 2.6 1.898 3.9 3.065 5.923 6.13 11.99 7.882 17.478 2.481 7.656 2.19 15.6.438 22.1zM34.234 32.767c3.649 9.533 7.736 20.366 19.851 19.066 6.569-.722 12.407-4.333 16.786-10.544 2.774-3.756 4.817-8.378 5.985-13.145-.438 0-1.022-.144-1.46-.144-1.167 4.478-3.21 8.956-5.692 12.422-2.92 4.045-8.028 9.1-15.765 9.822-10.947 1.156-14.742-8.666-18.246-18.2l-.875-2.166-1.314.433c.146 1.011.438 1.733.73 2.456M54.378 82.312c.438-10.256 17.662-24.845 32.988-37.845 3.357-2.889 6.715-5.633 9.634-8.233-.438-.289-.73-.578-1.168-.867-2.92 2.6-6.13 5.345-9.342 8.09-15.472 13-32.988 27.877-33.572 38.855v.433h1.46zM112.326 65.7c0-.722-.146-1.3-.146-2.022-6.568 6.355-15.034 13.578-23.5 19.066h2.773c7.444-5.2 14.889-11.266 20.873-17.044\"/><path fill=\"#FDEFEE\" d=\"M54.816 18.756h10.948v-1.878c0-1.011-.876-1.878-1.898-1.878h-7.152c-1.022 0-1.898.867-1.898 1.878z\"/><path fill=\"#005E41\" d=\"M85.616 23.378c-14.013-5.489-15.764 8.667-15.764 8.667s12.115 6.5 15.764-8.667M50.585 31.467c-14.013 5.49-15.765-8.666-15.765-8.666s12.115-6.5 15.765 8.666\"/><path fill=\"#FBC2C1\" d=\"M65.618 23.521H54.816a2.757 2.757 0 0 1-2.773-2.744c0-1.589 1.314-2.745 2.773-2.745h10.802c1.606-.144 2.92 1.156 2.92 2.745s-1.314 2.744-2.92 2.744\"/><path fill=\"#F06365\" d=\"M70.144 22.945c0 5.345-4.379 9.822-9.925 9.822s-9.926-4.333-9.926-9.822z\"/><path fill=\"#ABE3BB\" d=\"M28.985 82.6c0-5.633-4.67-10.255-10.363-10.255S8.258 76.967 8.258 82.6z\"/><path fill=\"#ABE3BB\" d=\"M49.712 82.6c0-5.633-4.671-10.255-10.364-10.255S28.984 76.967 28.984 82.6z\"/><path fill=\"#ABE3BB\" d=\"M70.584 82.6c0-5.633-4.67-10.255-10.364-10.255-5.692 0-10.51 4.622-10.51 10.255zM91.458 82.6c0-5.633-4.671-10.255-10.364-10.255S70.731 76.967 70.731 82.6zM112.333 82.6c0-5.633-4.671-10.255-10.364-10.255S91.606 76.967 91.606 82.6z\"/><path fill=\"#FFC8A3\" d=\"M73.938 106h-27.88L59.78 85.056z\"/><path fill=\"#FFC8A3\" d=\"M117 88.955H3v-1.733c0-2.456 2.044-4.478 4.525-4.478h104.95c2.481 0 4.525 2.022 4.525 4.478z\"/><path fill=\"#4F1600\" d=\"m57.152 88.956-2.336 3.611h10.072l-2.481-3.61z\"/></g><defs><clipPath id=\"birthday_svg__a\"><path fill=\"#fff\" d=\"M3 15h114v91H3z\"/></clipPath></defs></svg>',\n    searchPlaceholder: 'Track / add shipment',\n  },\n};\n"]}

package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.css

@@ -2,6 +2,31 @@ 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-usp-promoter {
   width: 80%;
 }

package/collection/components/widgets/pn-usp-promoter/pn-usp-promoter.js

@@ -25,7 +25,7 @@ export class PnUspPromoter {
             rightAlign ? "usp-promoter--right-align" : "",
         ].join(' ');
         const hasHeadingExtension = this.headingExtension ? "usp-promoter__heading-extension" : "";
-        return (h(Host, { key: '264c4f6da6ddee9569089074fc08ccf9e5c371ba' }, h("div", { key: 'c832ef39dcfece93643964f6994c91c79f7f8ea0', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { key: '41f8995ae12546fd008a8eec5b5de0a9482d3312', class: "usp-promoter__content" }, h("slot", { key: '3a967323a69ec83ed03d619ba6a2fa9115fa2a90', name: "illustration" }), h("div", { key: 'ed9bcfb59255d8369b41386b834b773b8aad3a71', class: "usp-promoter__content-wrapper" }, h("h2", { key: '58eb3a2d9650920070c25a65e699d21cfba8b118', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", { key: '08fc4b8dcc49746a699033c7ad1009ade8d46e71' }, this.heading), this.headingExtension ? h("span", null, this.headingExtension) : null), h("p", { key: '9452a7544e7255842331591f1d9178018c594524', class: "usp-promoter__content-text" }, this.bodyText), h("slot", { key: 'd1eee8f90dd6280de590e288ac7f11beb1aa5dd1', name: "app-store" }), h("slot", { key: 'cf45783c7d093218e4aeb5707da2b742225a4594', name: "usp-buttons" }))))));
+        return (h(Host, { key: '65ca041fe5a9d764d892bf5f39c877418835ba73' }, h("div", { key: '45bb6090cc1d44f490e11fc3688ac2175788798d', class: ` ${classes} ${this.centerMobileContent()}`, style: { 'background': `${this.backgroundGradient}` } }, h("div", { key: '76fe7cf83ef175d1a6e145f9a826bb4eb34cb248', class: "usp-promoter__content" }, h("slot", { key: '3a62a913271bc7e5bc89f1f2e0750cfb36262c95', name: "illustration" }), h("div", { key: '2cd14cf9668526e19509ffdd242acf4492487ac0', class: "usp-promoter__content-wrapper" }, h("h2", { key: '2a48031bbb06a0474d1581bceea450a805f37f13', class: `usp-promoter__content-heading ${hasHeadingExtension}` }, h("span", { key: '9cccb5af337bfe8ac6353a44bf4ae037d92c6dc6' }, this.heading), this.headingExtension ? h("span", null, this.headingExtension) : null), h("p", { key: '8c4c602653cbc0d0d385ded6bed0d390ee8f91ef', class: "usp-promoter__content-text" }, this.bodyText), h("slot", { key: '1ce50455c4ac1b55888d2a8f5cc1cad59bc97cdd', name: "app-store" }), h("slot", { key: '8e1e6cccec6b638df6a13bcd839862d9eba0ff80', name: "usp-buttons" }))))));
     }
     static get is() { return "pn-usp-promoter"; }
     static get originalStyleUrls() {

package/collection/components/widgets/pn-usp-simple/pn-usp-simple.css

@@ -0,0 +1,116 @@
+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;
+  }
+}
+
+:root {
+  --usp-preamble-margin: clamp(1.5rem, 3vw, 1.8rem);
+}
+
+.pn-usp-simple {
+  background: linear-gradient(90deg, #ffffff 0%, #effbff 17.44%);
+  color: #2d2013;
+  display: flex;
+  flex-direction: column-reverse;
+  max-width: 100%;
+  padding: clamp(2rem, 5vw, 5rem);
+}
+.pn-usp-simple .heading {
+  font-size: clamp(2rem, 4vw, 3rem);
+  font-weight: 700;
+  margin-bottom: 1rem;
+}
+.pn-usp-simple .preamble {
+  font-size: clamp(1rem, 4vw, 1.6rem);
+  margin-top: var(--usp-preamble-margin);
+  margin-bottom: var(--usp-preamble-margin);
+}
+.pn-usp-simple .cta {
+  display: flex;
+  font-size: clamp(1rem, 4vw, 1.6rem);
+  flex-direction: column;
+  gap: clamp(1rem, 4vw, 1.2rem);
+  padding: 0 6rem;
+}
+.pn-usp-simple .image-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+.pn-usp-simple .image-container .graphics {
+  --pn-width: 12rem !important;
+  --pn-height: 12rem !important;
+}
+.pn-usp-simple .image-container .image {
+  border-radius: 50%;
+}
+
+@media (min-width: 768px) {
+  .pn-usp-simple {
+    flex-direction: row;
+    align-items: center;
+  }
+  .pn-usp-simple .content {
+    max-width: 60%;
+  }
+  .pn-usp-simple .cta {
+    flex-direction: row;
+    gap: clamp(2rem, 3vw, 3rem);
+    padding: 0;
+  }
+  .pn-usp-simple .image-container {
+    flex: clamp(15rem, 3vw, 20rem);
+    margin-bottom: 0;
+  }
+  .pn-usp-simple .image-container .graphics {
+    --pn-width: 15rem;
+    --pn-height: 15rem;
+  }
+}
+@media (min-width: 1200px) {
+  .pn-usp-simple {
+    max-width: 1140px;
+    margin: 0 auto;
+  }
+  .pn-usp-simple .content {
+    max-width: 50%;
+  }
+  .pn-usp-simple .image-container .graphics {
+    --pn-width: 18rem;
+    --pn-height: 18rem;
+  }
+}
+@media (min-width: 1640px) {
+  .pn-usp-simple {
+    max-width: 1400px;
+  }
+  .pn-usp-simple .image-container .graphics {
+    --pn-width: 20rem;
+    --pn-height: 20rem;
+  }
+}