@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.css

@@ -0,0 +1,146 @@
+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-chat-message {
+  display: flex;
+  text-align: left;
+}
+pn-chat-message.user, pn-chat-message.buttonresponse {
+  justify-content: flex-end;
+}
+pn-chat-message.system-message {
+  text-align: center;
+  justify-content: center;
+}
+pn-chat-message .message-container {
+  border-radius: 0.8rem;
+  display: flex;
+  gap: 1rem;
+  max-width: 75%;
+  overflow-x: hidden;
+}
+pn-chat-message .message-container .category {
+  width: 2.6rem;
+}
+pn-chat-message .message-container.bot .message, pn-chat-message .message-container.agent .message {
+  background-color: #f3f2f2;
+}
+pn-chat-message .message-container.link {
+  flex-basis: 100%;
+}
+pn-chat-message .message-container.link .message {
+  background-color: #effbff;
+  box-shadow: 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);
+  transition: box-shadow ease-in-out 0.5s;
+  padding: 0;
+}
+pn-chat-message .message-container.link .message:hover {
+  box-shadow: 0px 0.6px 1.8px 0px rgba(0, 0, 0, 0.2), 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.23);
+}
+pn-chat-message .message-container.link .message a {
+  color: #000000;
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 1.6rem;
+  text-decoration: none;
+}
+pn-chat-message .message-container.link .business.message {
+  background-color: #fdefee;
+}
+pn-chat-message .message-container.button {
+  flex-basis: 100%;
+  text-align: center;
+  max-width: unset;
+}
+pn-chat-message .message-container.button .message {
+  padding: 0;
+}
+pn-chat-message .message-container.card {
+  border: solid 1px #d3cecb;
+  border-radius: 1.6rem;
+  flex-basis: 100%;
+  max-width: 100%;
+}
+pn-chat-message .message-container.card .message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+  padding: 1.6rem;
+}
+pn-chat-message .message-container.card .card-heading {
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  font-weight: 700;
+}
+pn-chat-message .message-container.card .cta {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+pn-chat-message .message-container.card .read-more {
+  align-self: flex-start;
+  margin-top: auto;
+}
+pn-chat-message .message-container.user .message, pn-chat-message .message-container.buttonresponse .message {
+  background-color: #e0f8ff;
+  color: #2d2013;
+  border-radius: 0.8rem 0.8rem 0 0.8rem;
+}
+pn-chat-message .message-container .message {
+  border-radius: 0 0.8rem 0.8rem 0.8rem;
+  display: inline-block;
+  flex: 1 1 auto;
+  font-size: 1.4rem;
+  line-height: 2rem;
+  padding: 1rem 1.6rem;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
+  word-break: break-word;
+}
+@media (max-width: 767px) {
+  pn-chat-message .message-container .message {
+    font-size: 1.6rem;
+  }
+}
+pn-chat-message .message-container.agent .category .pn-icon {
+  background-color: #00a0d6;
+  color: #ffffff;
+  text-align: center;
+  border-radius: 50%;
+  display: inline-block;
+  width: 2.5rem;
+  height: 2.5rem;
+  font-weight: 500;
+  font-size: 1.2rem;
+  line-height: 2.6rem;
+}
+pn-chat-message[data-card] {
+  height: 100%;
+}

package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.js

@@ -0,0 +1,118 @@
+import { Host, h } from "@stencil/core";
+import { faq } from "pn-design-assets/pn-assets/icons.js";
+export class PnChatMessage {
+    constructor() {
+        this.category = undefined;
+        this.customerSegment = undefined;
+        this.agentName = undefined;
+    }
+    robotIcon = '<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 20"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id="clippath"> <rect class="st0" width="20" height="20"/> </clipPath> </defs> <g class="st5"> <g> <path class="st2" d="M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z"/> <path class="st3" d="M10.5,4h-.5v2.8h.5v-2.8Z"/> <path class="st3" d="M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path class="st3" d="M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z"/> <path class="st4" d="M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z"/> <path d="M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z"/> <path class="st4" d="M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z"/> <path class="st4" d="M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z"/> <path class="st3" d="M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z"/> <path class="st6" d="M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z"/> <path class="st1" d="M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path class="st1" d="M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path d="M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z"/> </g> </g> </svg>';
+    getIcon() {
+        let icon = null;
+        switch (this.category) {
+            case 'Bot':
+                return this.robotIcon;
+            case 'Agent':
+                return this.agentName;
+            case 'Link':
+                return faq;
+        }
+        return icon;
+    }
+    getMessageClass() {
+        switch (this.category) {
+            case 'ButtonResponse':
+                return 'buttonresponse';
+            case 'User':
+                return 'user';
+            case 'System':
+                return 'system-message';
+            default:
+                return undefined;
+        }
+    }
+    render() {
+        const segmentClass = this.customerSegment?.toLowerCase() || '';
+        const categoryClass = this.category?.toLowerCase() || '';
+        return (h(Host, { key: 'b6d8b3fbaa4aa9fff3b73f5551ecc1f3d55d4e6c', class: this.getMessageClass() }, h("div", { key: '196dfe9d041e5aa3c0f22c74cf15bdf7c99db8b1', class: `message-container ${categoryClass}` }, this.getIcon() && (h("span", { key: '333d599b29fbed5b5483cbf23860cdf91cb9c645', class: "category" }, h("pn-icon", { key: '922332436e444a7bd95aaf985ad7e15202c7b5a1', icon: this.getIcon(), color: this.category === 'User' ? 'blue700' : 'blue700', "aria-hidden": "true", role: "presentation" }))), h("span", { key: 'd5c36c5445ec13b4713a133db6c9c7e75c5cd717', class: `message ${segmentClass}` }, h("slot", { key: 'b49928b152d6d7e07f80abc3e86beb53b7f27441' })))));
+    }
+    static get is() { return "pn-chat-message"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-chat-message.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-chat-message.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "MessageCategory",
+                    "resolved": "\"Agent\" | \"Bot\" | \"Button\" | \"ButtonResponse\" | \"Card\" | \"Link\" | \"System\" | \"User\"",
+                    "references": {
+                        "MessageCategory": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/widgets/pn-chat/types.ts::MessageCategory"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "category",
+                "reflect": false
+            },
+            "customerSegment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CustomerSegment",
+                    "resolved": "string",
+                    "references": {
+                        "CustomerSegment": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/widgets/pn-chat/types.ts::CustomerSegment"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "customer-segment",
+                "reflect": false
+            },
+            "agentName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "agent-name",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=pn-chat-message.js.map

package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-chat-message.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,GAAG,EAAQ,MAAM,qCAAqC,CAAC;AAQhE,MAAM,OAAO,aAAa;;;;;;IAIhB,SAAS,GAAW,uwDAAuwD,CAAC;IAEpyD,OAAO;QACL,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,KAAK;gBACR,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,OAAO;gBACV,OAAO,IAAI,CAAC,SAAS,CAAC;YACxB,KAAK,MAAM;gBACT,OAAO,GAAG,CAAC;QACf,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,eAAe;QACb,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;YACtB,KAAK,gBAAgB;gBACnB,OAAO,gBAAgB,CAAC;YAC1B,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,gBAAgB,CAAC;YAC1B;gBACE,OAAO,SAAS,CAAC;QACrB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QAC/D,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;QACzD,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAG,IAAI,CAAC,eAAe,EAAE;YAClC,4DAAK,KAAK,EAAE,qBAAqB,aAAa,EAAE;gBAC7C,IAAI,CAAC,OAAO,EAAE,IAAI,CACjB,6DAAM,KAAK,EAAC,UAAU;oBACpB,gEAAS,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,iBAAc,MAAM,EAAC,IAAI,EAAC,cAAc,GAAW,CACpI,CACR;gBACD,6DAAM,KAAK,EAAE,WAAW,YAAY,EAAE;oBACpC,8DAAa,CACR,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { faq, user } from 'pn-design-assets/pn-assets/icons.js';\n\nimport { AgentMessage, CustomerSegment, MessageCategory } from '../types';\n\n@Component({\n  tag: 'pn-chat-message',\n  styleUrl: 'pn-chat-message.scss',\n})\nexport class PnChatMessage {\n  @Prop() category!: MessageCategory;\n  @Prop() customerSegment!: CustomerSegment;\n  @Prop() agentName: string;\n  private robotIcon: string = '<?xml version=\"1.0\" encoding=\"UTF-8\"?> <svg id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" viewBox=\"0 0 20 20\"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id=\"clippath\"> <rect class=\"st0\" width=\"20\" height=\"20\"/> </clipPath> </defs> <g class=\"st5\"> <g> <path class=\"st2\" d=\"M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z\"/> <path class=\"st3\" d=\"M10.5,4h-.5v2.8h.5v-2.8Z\"/> <path class=\"st3\" d=\"M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st3\" d=\"M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z\"/> <path class=\"st4\" d=\"M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z\"/> <path d=\"M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z\"/> <path class=\"st4\" d=\"M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z\"/> <path class=\"st4\" d=\"M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z\"/> <path class=\"st3\" d=\"M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z\"/> <path class=\"st6\" d=\"M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z\"/> <path class=\"st1\" d=\"M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path class=\"st1\" d=\"M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z\"/> <path d=\"M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z\"/> </g> </g> </svg>';\n\n  getIcon() {\n    let icon = null;\n    \n    switch (this.category) {\n      case 'Bot':\n        return this.robotIcon;\n      case 'Agent':\n        return this.agentName;\n      case 'Link':\n        return faq;\n    }\n\n    return icon;\n  }\n\n  getMessageClass(): string {\n    switch (this.category) {\n      case 'ButtonResponse':\n        return 'buttonresponse';\n      case 'User':\n        return 'user';\n      case 'System':\n        return 'system-message';\n      default: \n        return undefined;\n    }\n  }\n\n  render() {\n    const segmentClass = this.customerSegment?.toLowerCase() || '';\n    const categoryClass = this.category?.toLowerCase() || '';\n    return (\n      <Host class={ this.getMessageClass() }>\n        <div class={`message-container ${categoryClass}`}>\n          {this.getIcon() && (\n            <span class=\"category\">\n              <pn-icon icon={this.getIcon()} color={this.category === 'User' ? 'blue700' : 'blue700'} aria-hidden=\"true\" role=\"presentation\"></pn-icon>\n            </span>\n          )}\n          <span class={`message ${segmentClass}`}>\n            <slot></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.stories.js

@@ -0,0 +1,219 @@
+import { createDocumentation, createComponent } from "../../../../globals/documentation/story";
+import docs from "./pn-chat-message-docs.json";
+const { argTypes, textContent } = createDocumentation(docs);
+/** Write a short introduction */
+const meta = {
+    title: 'Components/Widgets/Chat message',
+    parameters: {
+        actions: {},
+        docs: {
+            description: {
+                story: textContent,
+            },
+        },
+    },
+    args: {},
+    argTypes,
+};
+export default meta;
+function createStory(messageCustomerSegment) {
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.style.flexDirection = 'column';
+    container.style.gap = '1rem';
+    const createBotMessage = (message) => {
+        const component = createComponent('pn-chat-message', {
+            'customerSegment': messageCustomerSegment,
+            'category': message.category,
+            'role': 'log',
+            'aria-live': 'polite',
+        });
+        const content = document.createElement('div');
+        content.textContent = message.content;
+        component.appendChild(content);
+        return component;
+    };
+    const createUserMessage = (message) => {
+        const component = createComponent('pn-chat-message', {
+            'customerSegment': messageCustomerSegment,
+            'category': message.category,
+            'class': message.class,
+            'role': 'log',
+            'aria-live': 'polite',
+        });
+        const content = document.createElement('div');
+        content.textContent = message.content;
+        component.appendChild(content);
+        return component;
+    };
+    const createAgentMessage = (message) => {
+        const component = createComponent('pn-chat-message', {
+            'customerSegment': messageCustomerSegment,
+            'category': message.category,
+            'role': 'log',
+            'aria-live': 'polite',
+            'agent-name': message.agentName,
+        });
+        const content = document.createElement('div');
+        content.textContent = message.content;
+        component.appendChild(content);
+        return component;
+    };
+    const createButtonMessage = (message) => {
+        const component = createComponent('pn-chat-message', {
+            customerSegment: messageCustomerSegment,
+            category: message.category,
+        });
+        const button = createComponent('pn-button', {
+            class: message.class,
+            role: 'button',
+        });
+        button.textContent = message.content;
+        button.addEventListener('keydown', e => {
+            console.log(e, 'button pressed');
+        });
+        component.appendChild(button);
+        return component;
+    };
+    const createLinkMessage = (message) => {
+        const component = createComponent('pn-chat-message', {
+            customerSegment: messageCustomerSegment,
+            category: message.category,
+        });
+        const link = document.createElement('a');
+        link.href = message.href;
+        link.setAttribute('role', 'link');
+        link.setAttribute('aria-label', message.content);
+        link.setAttribute('rel', 'noopener noreferrer');
+        const span = document.createElement('span');
+        span.className = 'content';
+        span.textContent = message.content;
+        link.appendChild(span);
+        const icon = createComponent('pn-icon', {
+            'color': 'blue700',
+            'aria-hidden': 'true',
+            'role': 'presentation',
+        });
+        link.appendChild(icon);
+        component.appendChild(link);
+        return component;
+    };
+    const createCardMessage = (message) => {
+        const component = createComponent('pn-chat-message', {
+            'customerSegment': messageCustomerSegment,
+            'category': message.category,
+            'data-card': '',
+            'role': 'article',
+        });
+        const heading = document.createElement('h2');
+        heading.className = 'card-heading';
+        heading.textContent = message.heading;
+        component.appendChild(heading);
+        const paragraph = document.createElement('p');
+        paragraph.textContent = message.content;
+        component.appendChild(paragraph);
+        if (message.buttons) {
+            const ctaContainer = document.createElement('div');
+            ctaContainer.classList.add('cta');
+            message.buttons.forEach(button => {
+                const btnElement = createComponent('pn-button', {
+                    'href': button.href,
+                    'class': button.class,
+                    'appearance': button.appearance,
+                    'variant': button.variant,
+                    'small': button.small,
+                    'role': 'button',
+                    'aria-label': button.content,
+                });
+                btnElement.textContent = button.content;
+                btnElement.addEventListener('keydown', e => {
+                    console.log(e, 'button pressed');
+                });
+                ctaContainer.appendChild(btnElement);
+            });
+            component.appendChild(ctaContainer);
+        }
+        return component;
+    };
+    const messages = [
+        createBotMessage({
+            messageId: "1234567890",
+            customerSegment: messageCustomerSegment,
+            category: 'Bot',
+            content: 'This is a bot (base) message',
+        }),
+        createUserMessage({
+            messageId: "1234567890",
+            customerSegment: messageCustomerSegment,
+            category: 'User',
+            content: 'This is a user message',
+            class: 'user',
+        }),
+        createButtonMessage({
+            messageId: "1234567890",
+            customerSegment: messageCustomerSegment,
+            category: 'Button',
+            content: 'Click me',
+            class: 'primary-button',
+            props: '',
+        }),
+        createLinkMessage({
+            messageId: "1234567890",
+            customerSegment: messageCustomerSegment,
+            category: 'Link',
+            content: 'Visit our website',
+            href: 'https://example.com'
+        }),
+        createAgentMessage({
+            messageId: "1234567890",
+            customerSegment: messageCustomerSegment,
+            category: 'Agent',
+            content: 'This is a agent message',
+            agentName: 'PN'
+        }),
+        createCardMessage({
+            messageId: "1234567890",
+            customerSegment: messageCustomerSegment,
+            category: 'Card',
+            heading: 'Card Title',
+            content: 'This is a card message with some content.',
+            buttons: [
+                {
+                    content: 'Primary Action',
+                    href: '#',
+                    class: 'read-more',
+                    appearance: '',
+                    variant: '',
+                    small: true,
+                },
+                {
+                    content: 'Secondary Action',
+                    href: 'https://example.com',
+                    class: 'read-more',
+                    appearance: 'light',
+                    variant: 'outlined',
+                    small: true,
+                },
+            ],
+        }),
+    ];
+    messages.forEach(message => {
+        container.appendChild(message);
+    });
+    return container;
+}
+export const ChatMessageExample = {
+    name: 'All message types (Private)',
+    render: () => {
+        const customerSegment = 'Private';
+        return createStory(customerSegment);
+    },
+};
+export const ChatMessageExample2 = {
+    name: 'All message types (Business)',
+    render: () => {
+        const customerSegment = 'Business';
+        return createStory(customerSegment);
+    },
+};
+//# sourceMappingURL=pn-chat-message.stories.js.map

package/collection/components/widgets/pn-chat/pn-chat-message/pn-chat-message.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-chat-message.stories.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-chat/pn-chat-message/pn-chat-message.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-chat-message-docs.json';\nimport { AgentMessage, BotMessage, ButtonMessage, CardMessage, CustomerSegment, LinkMessage, UserMessage } from '../types';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\n/** Write a short introduction */\nconst meta: Meta<HTMLPnChatMessageElement> = {\n  title: 'Components/Widgets/Chat message',\n  parameters: {\n    actions: {},\n    docs: {\n      description: {\n        story: textContent,\n      },\n    },\n  },\n  args: {},\n  argTypes,\n};\n\ntype Story = StoryObj<HTMLPnChatMessageElement>;\n\nexport default meta;\n\nfunction createStory(messageCustomerSegment: string) {\n  const container = document.createElement('div');\n  container.style.display = 'flex';\n  container.style.flexDirection = 'column';\n  container.style.gap = '1rem';\n\n  const createBotMessage = (message: BotMessage) => {\n    const component = createComponent('pn-chat-message', {\n      'customerSegment': messageCustomerSegment,\n      'category': message.category,\n      'role': 'log',\n      'aria-live': 'polite',\n    });\n    const content = document.createElement('div');\n    content.textContent = message.content;\n    component.appendChild(content);\n    return component;\n  };\n\n  const createUserMessage = (message: UserMessage) => {\n    const component = createComponent('pn-chat-message', {\n      'customerSegment': messageCustomerSegment,\n      'category': message.category,\n      'class': message.class,\n      'role': 'log',\n      'aria-live': 'polite',\n    });\n    const content = document.createElement('div');\n    content.textContent = message.content;\n    component.appendChild(content);\n    return component;\n  };\n\n  const createAgentMessage = (message: AgentMessage) => {\n    const component = createComponent('pn-chat-message', {\n      'customerSegment': messageCustomerSegment,\n      'category': message.category,\n      'role': 'log',\n      'aria-live': 'polite',\n      'agent-name': message.agentName,\n    });\n    const content = document.createElement('div');\n    content.textContent = message.content;\n    component.appendChild(content);\n    return component;\n  }\n\n  const createButtonMessage = (message: ButtonMessage) => {\n    const component = createComponent('pn-chat-message', {\n      customerSegment: messageCustomerSegment,\n      category: message.category,\n    });\n\n    const button = createComponent('pn-button', {\n      class: message.class,\n      role: 'button',\n    });\n    button.textContent = message.content;\n    button.addEventListener('keydown', e => {\n      console.log(e, 'button pressed');\n    });\n\n    component.appendChild(button);\n    return component;\n  };\n\n  const createLinkMessage = (message: LinkMessage) => {\n    const component = createComponent('pn-chat-message', {\n      customerSegment: messageCustomerSegment,\n      category: message.category,\n    });\n\n    const link = document.createElement('a');\n    link.href = message.href;\n    link.setAttribute('role', 'link');\n    link.setAttribute('aria-label', message.content);\n    link.setAttribute('rel', 'noopener noreferrer');\n\n    const span = document.createElement('span');\n    span.className = 'content';\n    span.textContent = message.content;\n    link.appendChild(span);\n\n    const icon = createComponent('pn-icon', {\n      'color': 'blue700',\n      'aria-hidden': 'true',\n      'role': 'presentation',\n    });\n    link.appendChild(icon);\n\n    component.appendChild(link);\n    return component;\n  };\n\n  const createCardMessage = (message: CardMessage) => {\n    const component = createComponent('pn-chat-message', {\n      'customerSegment': messageCustomerSegment,\n      'category': message.category,\n      'data-card': '',\n      'role': 'article',\n    });\n\n    const heading = document.createElement('h2');\n    heading.className = 'card-heading';\n    heading.textContent = message.heading;\n    component.appendChild(heading);\n\n    const paragraph = document.createElement('p');\n    paragraph.textContent = message.content;\n    component.appendChild(paragraph);\n\n    if (message.buttons) {\n      const ctaContainer = document.createElement('div');\n      ctaContainer.classList.add('cta');\n\n      message.buttons.forEach(button => {\n        const btnElement = createComponent('pn-button', {\n          'href': button.href,\n          'class': button.class,\n          'appearance': button.appearance,\n          'variant': button.variant,\n          'small': button.small,\n          'role': 'button',\n          'aria-label': button.content,\n        });\n        btnElement.textContent = button.content;\n        btnElement.addEventListener('keydown', e => {\n          console.log(e, 'button pressed');\n        });\n        ctaContainer.appendChild(btnElement);\n      });\n      component.appendChild(ctaContainer);\n    }\n\n    return component;\n  };\n\n  const messages = [\n    createBotMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Bot',\n      content: 'This is a bot (base) message',\n    }),\n\n    createUserMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'User',\n      content: 'This is a user message',\n      class: 'user',\n    }),\n\n    createButtonMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Button',\n      content: 'Click me',\n      class: 'primary-button',\n      props: '',\n    }),\n\n    createLinkMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Link',\n      content: 'Visit our website',\n      href: 'https://example.com'\n    }),\n\n    createAgentMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Agent',\n      content: 'This is a agent message',\n      agentName: 'PN'\n    }),\n\n    createCardMessage({\n      messageId: \"1234567890\",\n      customerSegment: messageCustomerSegment,\n      category: 'Card',\n      heading: 'Card Title',\n      content: 'This is a card message with some content.',\n      buttons: [\n        {\n          content: 'Primary Action',\n          href: '#',\n          class: 'read-more',\n          appearance: '',\n          variant: '',\n          small: true,\n        },\n        {\n          content: 'Secondary Action',\n          href: 'https://example.com',\n          class: 'read-more',\n          appearance: 'light',\n          variant: 'outlined',\n          small: true,\n        },\n      ],\n    }),\n  ];\n\n  messages.forEach(message => {\n    container.appendChild(message);\n  });\n\n  return container;\n}\n\nexport const ChatMessageExample: Story = {\n  name: 'All message types (Private)',\n  render: () => {\n    const customerSegment: CustomerSegment = 'Private';\n\n    return createStory(customerSegment);\n  },\n};\n\nexport const ChatMessageExample2: Story = {\n  name: 'All message types (Business)',\n  render: () => {\n    const customerSegment: CustomerSegment = 'Business';\n\n    return createStory(customerSegment);\n  },\n};\n"]}