npm - @pega/cosmos-react-demos - Versions diffs - 2.1.5 → 3.0.0-dev.3.0 - Mend

@pega/cosmos-react-demos 2.1.5 → 3.0.0-dev.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (426) hide show

package/lib/rte/Editor/Editor.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.stories.js","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p></body>'\n />\n );\n};\n\nexport const EmptyEditorDemo = () => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onImageAdded={onImageAdded}\n onFocus={action('Editor has focus')}\n onBlur={action('Editor has blurred')}\n placeholder='Type some stuff in here'\n />\n );\n};\n\nexport const ReadonlyFormField = () => {\n return (\n <Editor\n label={label}\n readOnly\n defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code><head></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code><title></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code><header></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code><aside></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code><audio></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code><details></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code><embed></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code><progress></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code><ol></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></code></a> and many others.</p>\n <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code><</code>\" and \"<code>></code>\".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way.</p>\n\n <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n `}\n />\n );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n return (\n <p\n style={{ color: 'blue', textTransform: 'uppercase' }}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: children }}\n />\n );\n};\n\nclass PegaCustomElement extends HTMLElement {\n removeElements() {\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n }\n\n connectedCallback() {\n const inner = this.innerHTML;\n this.removeElements();\n const mountPoint = document.createElement('span');\n this.appendChild(mountPoint);\n ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n }\n}\n\nexport const CustomComponentDemo = () => {\n const editorRef = useRef<EditorState>(null);\n const [editor, setEditor] = useState({} as TinymceEditor);\n\n const onCustomAction = () => {\n editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><pega-custom>Hello from custom element.</pega-custom><p>hi</p></body>'\n customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n customActions={[\n {\n icon: 'pega',\n text: 'Insert a custom element',\n onMouseDown: () => {\n onCustomAction();\n }\n }\n ]}\n onInit={initializedEditor => {\n setEditor(initializedEditor);\n }}\n />\n );\n};\n\nexport const RichTextEditorWithLogs = () => {\n const editorRef = useRef<EditorState>(null);\n const [content, setContent] = useState<string \| undefined>();\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n const showContent = (type: 'html' \| 'plain_text' \| 'rich_text') => {\n if (type === 'html') setContent(editorRef.current?.getHtml());\n else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Editor\n ref={editorRef}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n onImageAdded={onImageAdded}\n label='Rich text editor with logs'\n info='Click on the buttons below to show the different formatted outputs of the RTE'\n />\n\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => showContent('html')}>Show HTML</Button>\n <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n </Flex>\n\n <Text>{content}</Text>\n </Flex>\n );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n const [html, setHtml] = useState('<p>Hello world!</p>');\n const rteRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <Editor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label={label}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"Editor.stories.js","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p></body>'\n />\n );\n};\n\nexport const EmptyEditorDemo = () => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onImageAdded={onImageAdded}\n onFocus={action('Editor has focus')}\n onBlur={action('Editor has blurred')}\n placeholder='Type some stuff in here'\n />\n );\n};\n\nexport const ReadonlyFormField = () => {\n return (\n <Editor\n label={label}\n readOnly\n defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code><head></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code><title></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code><header></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code><aside></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code><audio></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code><details></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code><embed></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code><progress></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code><ol></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></code></a> and many others.</p>\n <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code><</code>\" and \"<code>></code>\".  The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way.</p>\n\n <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n `}\n />\n );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n return (\n <p\n style={{ color: 'blue', textTransform: 'uppercase' }}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: children }}\n />\n );\n};\n\nclass PegaCustomElement extends HTMLElement {\n removeElements() {\n while (this.firstChild) {\n this.removeChild(this.firstChild);\n }\n }\n\n connectedCallback() {\n const inner = this.innerHTML;\n this.removeElements();\n const mountPoint = document.createElement('span');\n this.appendChild(mountPoint);\n ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n }\n}\n\nexport const CustomComponentDemo = () => {\n const editorRef = useRef<EditorState>(null);\n const [editor, setEditor] = useState({} as TinymceEditor);\n\n const onCustomAction = () => {\n editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n };\n\n return (\n <Editor\n ref={editorRef}\n label={label}\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n customActions={[\n {\n icon: 'pega',\n text: 'Insert a custom element',\n onMouseDown: () => {\n onCustomAction();\n }\n }\n ]}\n onInit={initializedEditor => {\n setEditor(initializedEditor);\n }}\n />\n );\n};\n\nexport const RichTextEditorWithLogs = () => {\n const editorRef = useRef<EditorState>(null);\n const [content, setContent] = useState<string \| undefined>();\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n const showContent = (type: 'html' \| 'plain_text' \| 'rich_text') => {\n if (type === 'html') setContent(editorRef.current?.getHtml());\n else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Editor\n ref={editorRef}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n onImageAdded={onImageAdded}\n label='Rich text editor with logs'\n info='Click on the buttons below to show the different formatted outputs of the RTE'\n />\n\n <Flex container={{ gap: 1 }}>\n <Button onClick={() => showContent('html')}>Show HTML</Button>\n <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n </Flex>\n\n <Text>{content}</Text>\n </Flex>\n );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n const [html, setHtml] = useState('<p>Hello world!</p>');\n const rteRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n rteRef.current?.appendImage({ src, alt: image.name }, id);\n };\n\n return (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Card>\n <CardContent>\n <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n </CardContent>\n <CardFooter>\n <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n Overwrite RTE with new HTML\n </Button>\n </CardFooter>\n </Card>\n <Editor\n defaultValue={html}\n onImageAdded={onImageAdded}\n ref={rteRef}\n label={label}\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}

package/lib/social/Email/Email.mocks.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { EmailComposerProps, ViewAnalysisProps } from '@pega/cosmos-react-social';
-export declare const emailBodyContent: JSX.Element;
+import { FieldValueListProps } from '@pega/cosmos-react-core';
+import { EmailComposerProps, EntityListProps } from '@pega/cosmos-react-social';
+export declare const emailBodyContent = "<div>Hi, <br /> <br /><div>Can you please change my address in the SSN.</div> <br /> <br />Regards, <br />Sara Davis </div>";
 export declare const emailAttachments: EmailComposerProps['attachments'];
 export declare const participants: EmailComposerProps['participants'];
 export declare const toParticipants: string[];
 export declare const ccParticipants: string[];
 export declare const bccParticipants: string[];
-export declare const ViewAnalysisMockData: ViewAnalysisProps['content'];
+export declare const EntityListMockData: EntityListProps['content'];
 export declare const EmailMockData: {
     emails: {
         'Sara Davis': {
@@ -84,4 +84,20 @@ export declare const EmailMockData: {
         content: string;
     }[];
 };
+export declare const viewAnalysisEmailHeaderMock: FieldValueListProps['fields'];
+export declare const topicListMock: ({
+    id: string;
+    primary: string;
+    secondary: {
+        indicator: string;
+        value: string;
+    };
+} | {
+    id: string;
+    primary: string;
+    secondary: {
+        indicator: string;
+        value?: undefined;
+    };
+})[];
 //# sourceMappingURL=Email.mocks.d.ts.map

package/lib/social/Email/Email.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Email.mocks.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.mocks.~~tsx~~"],"names":[],"mappings":";~~AACA~~,OAAO,EAAE,kBAAkB,EAAa,~~iBAAiB~~,EAAE,MAAM,2BAA2B,CAAC;~~AAE7F~~,eAAO,MAAM,gBAAgB,~~aAK5B~~,CAAC;~~AAEF~~,eAAO,MAAM,gBAAgB,EAAE,kBAAkB,CAAC,aAAa,CAS9D,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAgC3D,CAAC;AAEF,eAAO,MAAM,cAAc,UAEiC,CAAC;AAC7D,eAAO,MAAM,cAAc,UAEiC,CAAC;AAC7D,eAAO,MAAM,eAAe,UAEgC,CAAC;AAE7D,eAAO,MAAM,~~oBAAoB~~,EAAE,~~iBAAiB~~,CAAC,SAAS,~~CAsL7D~~,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GzB,CAAC"}
1	+ {"version":3,"file":"Email.mocks.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAa,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE3F,eAAO,MAAM,gBAAgB,gIACkG,CAAC;AAEhI,eAAO,MAAM,gBAAgB,EAAE,kBAAkB,CAAC,aAAa,CAS9D,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,kBAAkB,CAAC,cAAc,CAgC3D,CAAC;AAEF,eAAO,MAAM,cAAc,UAEiC,CAAC;AAC7D,eAAO,MAAM,cAAc,UAEiC,CAAC;AAC7D,eAAO,MAAM,eAAe,UAEgC,CAAC;AAE7D,eAAO,MAAM,kBAAkB,EAAE,eAAe,CAAC,SAAS,CAsLzD,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GzB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,CAAC,QAAQ,CAarE,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;IAgCzB,CAAC"}

package/lib/social/Email/Email.mocks.js CHANGED Viewed

@@ -1,6 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RichTextViewer } from '@pega/cosmos-react-rte';
-export const emailBodyContent = (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Can you please change my address in the SSN.</div> <br /> <br />Regards, <br />Sara Davis </div>', type: 'html' }, void 0));
+export const emailBodyContent = '<div>Hi, <br /> <br /><div>Can you please change my address in the SSN.</div> <br /> <br />Regards, <br />Sara Davis </div>';
 export const emailAttachments = [
     {
         name: 'Policy.doc',
@@ -53,7 +51,7 @@ export const ccParticipants = participants
 export const bccParticipants = participants
     .slice(4, 9)
     .map((participant) => participant.emailAddress);
-export const ViewAnalysisMockData = [
+export const EntityListMockData = [
     {
         name: 'Ticket number',
         value: [
@@ -347,4 +345,51 @@ export const EmailMockData = {
         }
     ]
 };
+export const viewAnalysisEmailHeaderMock = [
+    {
+        name: 'Sender email',
+        value: 'robert.stanton@hotmail.com'
+    },
+    {
+        name: 'Sender name',
+        value: 'Robert stanton'
+    },
+    {
+        name: 'Subject',
+        value: 'I have a quick question on travel'
+    }
+];
+export const topicListMock = [
+    {
+        id: '1',
+        primary: 'Missing ticket',
+        secondary: {
+            indicator: 'Confidence',
+            value: '50%'
+        }
+    },
+    {
+        id: '2',
+        primary: 'Missing baggage',
+        secondary: {
+            indicator: 'Confidence',
+            value: '80%'
+        }
+    },
+    {
+        id: '3',
+        primary: 'Ticket booking',
+        secondary: {
+            indicator: 'Confidence',
+            value: '30%'
+        }
+    },
+    {
+        id: '4',
+        primary: 'Language',
+        secondary: {
+            indicator: 'Confidence'
+        }
+    }
+];
 //# sourceMappingURL=Email.mocks.js.map

package/lib/social/Email/Email.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Email.mocks.js","sourceRoot":"","sources":["../../../src/social/Email/Email.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RichTextViewer } from '@pega/cosmos-react-rte';\nimport { EmailComposerProps, EmailUser, ViewAnalysisProps } from '@pega/cosmos-react-social';\n\nexport const emailBodyContent = (\n <RichTextViewer\n content='<div>Hi, <br /> <br /><div>Can you please change my address in the SSN.</div> <br /> <br />Regards, <br />Sara Davis </div>'\n type='html'\n />\n);\n\nexport const emailAttachments: EmailComposerProps['attachments'] = [\n {\n name: 'Policy.doc',\n progress: 100\n },\n {\n name: 'E-Ticket',\n thumbnail: 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg'\n }\n];\n\nexport const participants: EmailComposerProps['participants'] = [\n { emailAddress: 'Vernon.Lee@example.com', fullName: 'Vernon Lee', shortName: 'Vernon' },\n { emailAddress: 'Eula.Morales@example.com', fullName: 'Eula Morales', shortName: 'Eula' },\n { emailAddress: 'Paul.Smith@example.com', fullName: 'Paul Smith', shortName: 'Paul' },\n { emailAddress: 'Frank.Walker@example.com', fullName: 'Frank Walker', shortName: 'Frank' },\n { emailAddress: 'Edward.Green@example.com', fullName: 'Edward Green', shortName: 'Edward' },\n { emailAddress: 'John.Smith@example.com', fullName: 'John Smith', shortName: 'John' },\n { emailAddress: 'Olivia.Cockburn@example.com', fullName: 'Olivia Cockburn', shortName: 'Olivia' },\n { emailAddress: 'Peter.Hernandez@example.com', fullName: 'Peter Hernandez', shortName: 'Peter' },\n { emailAddress: 'Helena.Johnson@example.com', fullName: 'Helena Johnson', shortName: 'Helena' },\n {\n emailAddress: 'Katheryn.Hudson@example.com',\n fullName: 'Katheryn Hudson',\n shortName: 'Katheryn'\n },\n { emailAddress: 'Mia.Hershel@example.com', fullName: 'Mia Hershel', shortName: 'Mia' },\n { emailAddress: 'Ann.Mitchell@example.com', fullName: 'Ann Mitchell', shortName: 'Ann' },\n { emailAddress: 'Rafael.Bottom@example.com', fullName: 'Rafael Bottom', shortName: 'Rafael' },\n {\n emailAddress: 'Christopher.Gatsby@example.com',\n fullName: 'Christopher Gatsby',\n shortName: 'Christopher'\n },\n { emailAddress: 'Julianne.Moore@example.com', fullName: 'Julianne Moore', shortName: 'Julianne' },\n { emailAddress: 'Emily.Stone@example.com', fullName: 'Emily Stone', shortName: 'Emily' },\n { emailAddress: 'Richard.Wiles@example.com', fullName: 'Richard Wiles', shortName: 'Richard' },\n { emailAddress: 'Ella.Connor@example.com', fullName: 'Ella Connor', shortName: 'Ella' },\n { emailAddress: 'Robyn.Fenton@example.com', fullName: 'Robyn Fenton', shortName: 'Robyn' },\n { emailAddress: 'Lucille.Hale@example.com', fullName: 'Lucille Hale', shortName: 'Lucille' },\n { emailAddress: 'Angelina.Pitt@example.com', fullName: 'Angelina Pitt', shortName: 'Angelina' },\n { emailAddress: 'Tanya.Robinson@example.com', fullName: 'Tanya Robinson', shortName: 'Tanya' },\n { emailAddress: 'Laura.Horowitz@example.com', fullName: 'Laura Horowitz', shortName: 'Laura' }\n];\n\nexport const toParticipants = participants\n .slice(1, 3)\n .map((participant: EmailUser) => participant.emailAddress);\nexport const ccParticipants = participants\n .slice(9, 11)\n .map((participant: EmailUser) => participant.emailAddress);\nexport const bccParticipants = participants\n .slice(4, 9)\n .map((participant: EmailUser) => participant.emailAddress);\n\nexport const ViewAnalysisMockData: ViewAnalysisProps['content'] = [\n {\n name: 'Ticket number',\n value: [\n {\n id: '1',\n entity: {\n value: '7546383',\n type: 'system',\n name: 'Ticket number',\n variant: 3\n }\n },\n {\n id: '2',\n entity: {\n value: '7546383',\n type: 'system',\n name: 'Ticket number',\n variant: 3,\n icon: 'paper-clip'\n }\n }\n ]\n },\n {\n name: 'Name',\n value: [\n {\n id: '1',\n entity: {\n value: 'Robert stanton',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n },\n {\n id: '2',\n entity: {\n value: 'Sara Davis',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n },\n {\n id: '3',\n entity: {\n value: 'Cindy',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n },\n {\n id: '4',\n entity: {\n value: 'Dean',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n },\n {\n id: '5',\n entity: {\n value: 'Joe Stevens',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n }\n ]\n },\n {\n name: 'Email',\n value: [\n {\n id: '1',\n entity: {\n value: 'robert.stanton@example.com',\n type: 'system',\n name: 'Email',\n variant: 2\n }\n },\n {\n id: '2',\n entity: {\n value: 'robert.stanton@example.com',\n type: 'system',\n name: 'Email',\n variant: 2,\n icon: 'paper-clip'\n }\n },\n {\n id: '3',\n entity: {\n value: 'cindy.turner@example.com',\n type: 'system',\n name: 'Email',\n variant: 2\n }\n },\n {\n id: '4',\n entity: {\n value: 'dean.thomas@example.com',\n type: 'system',\n name: 'Email',\n variant: 2\n }\n },\n {\n id: '5',\n entity: {\n value: 'joe.stevens@example.com',\n type: 'system',\n name: 'Email',\n variant: 2\n }\n }\n ]\n },\n {\n name: 'Date',\n value: [\n {\n id: '1',\n entity: {\n value: 'Dec 5,2021 9.05 AM',\n type: 'system',\n name: 'Date',\n variant: 4\n }\n }\n ]\n },\n {\n name: 'Flight Number',\n value: [\n {\n id: '1',\n entity: {\n value: 'FL-JK-403',\n type: 'system',\n name: 'Flight Number',\n variant: 5\n }\n }\n ]\n },\n {\n name: 'Address',\n value: [\n {\n id: '1',\n entity: {\n value: 'Nagercoil,Hyderabad',\n type: 'system',\n name: 'Address',\n variant: 15\n }\n }\n ]\n },\n {\n name: 'Location',\n value: [\n {\n id: '1',\n entity: {\n value: 'Hyderabad',\n type: 'system',\n name: 'Location',\n variant: 8\n }\n }\n ]\n }\n];\n\nexport const EmailMockData = {\n emails: {\n 'Sara Davis': {\n fullName: 'Sara Davis',\n shortName: 'Sara',\n emailAddress: 'saraConnor@example.com'\n },\n 'John Brown': {\n fullName: 'John Brown',\n shortName: 'John',\n emailAddress: 'john@example.com'\n },\n 'Hugh Phillips': {\n fullName: 'Hugh Phillips',\n shortName: 'Hugh',\n emailAddress: 'Hugh@example.com'\n },\n 'Laura Stevens': {\n fullName: 'Laura Stevens',\n shortName: 'Laura',\n emailAddress: 'laurastevens@example.com',\n avatarProps: {\n icon: 'headset'\n }\n },\n 'Joe Stevens': {\n fullName: 'Joe Stevens',\n shortName: 'Joe',\n emailAddress: 'Joe@example.com'\n },\n 'Adam Gillchrist': {\n fullName: 'Adam Gillchrist',\n shortName: 'Adam',\n emailAddress: 'adam@example.com'\n },\n 'John Paul': {\n fullName: 'John, Paul',\n shortName: 'Paul',\n emailAddress: 'John.Paul@example.com'\n },\n 'Oran Jacob': {\n fullName: 'Oran, Jacob',\n shortName: 'Jacob',\n emailAddress: 'jacob@example.com'\n },\n 'Tyson Mike': {\n fullName: 'Tyson, Mike',\n shortName: 'Mike',\n emailAddress: 'mike@example.com'\n },\n 'John Cent': {\n fullName: 'John, Cent',\n shortName: 'John',\n emailAddress: 'John.cena@example.com'\n },\n 'Mystery Rey': {\n fullName: 'Mystery, Rey',\n shortName: 'Rey',\n emailAddress: 'rey619@example.com'\n },\n 'Anton, Randy': {\n fullName: 'Anton, Randy',\n shortName: 'Randy',\n emailAddress: 'Randy.ortan@example.com'\n }\n },\n suggestedReplies: [\n {\n id: 'thank-you',\n title: 'Thank you',\n content: 'Thank you'\n },\n {\n id: 'clarification',\n title: 'Clarification',\n content: 'Can you please provide more clarification'\n },\n {\n id: 'apologies',\n title: 'Apologies',\n content: 'Apologies for the inconvenience'\n },\n {\n id: 'we_will_help',\n title: 'We will help',\n content: 'We will help'\n }\n ],\n emailBodyTemplates: [\n {\n id: 'thank-you',\n title: 'Thank you',\n content: 'Thank you'\n },\n {\n id: 'clarification',\n title: 'Clarification',\n content: 'Can you please provide more clarification'\n },\n {\n id: 'apologies',\n title: 'Apologies',\n content: 'Apologies for the inconvenience'\n },\n {\n id: 'we_will_help',\n title: 'We will help',\n content: 'We will help'\n }\n ]\n};\n"]}
1	+ {"version":3,"file":"Email.mocks.js","sourceRoot":"","sources":["../../../src/social/Email/Email.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import { FieldValueListProps } from '@pega/cosmos-react-core';\nimport { EmailComposerProps, EmailUser, EntityListProps } from '@pega/cosmos-react-social';\n\nexport const emailBodyContent =\n '<div>Hi, <br /> <br /><div>Can you please change my address in the SSN.</div> <br /> <br />Regards, <br />Sara Davis </div>';\n\nexport const emailAttachments: EmailComposerProps['attachments'] = [\n {\n name: 'Policy.doc',\n progress: 100\n },\n {\n name: 'E-Ticket',\n thumbnail: 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg'\n }\n];\n\nexport const participants: EmailComposerProps['participants'] = [\n { emailAddress: 'Vernon.Lee@example.com', fullName: 'Vernon Lee', shortName: 'Vernon' },\n { emailAddress: 'Eula.Morales@example.com', fullName: 'Eula Morales', shortName: 'Eula' },\n { emailAddress: 'Paul.Smith@example.com', fullName: 'Paul Smith', shortName: 'Paul' },\n { emailAddress: 'Frank.Walker@example.com', fullName: 'Frank Walker', shortName: 'Frank' },\n { emailAddress: 'Edward.Green@example.com', fullName: 'Edward Green', shortName: 'Edward' },\n { emailAddress: 'John.Smith@example.com', fullName: 'John Smith', shortName: 'John' },\n { emailAddress: 'Olivia.Cockburn@example.com', fullName: 'Olivia Cockburn', shortName: 'Olivia' },\n { emailAddress: 'Peter.Hernandez@example.com', fullName: 'Peter Hernandez', shortName: 'Peter' },\n { emailAddress: 'Helena.Johnson@example.com', fullName: 'Helena Johnson', shortName: 'Helena' },\n {\n emailAddress: 'Katheryn.Hudson@example.com',\n fullName: 'Katheryn Hudson',\n shortName: 'Katheryn'\n },\n { emailAddress: 'Mia.Hershel@example.com', fullName: 'Mia Hershel', shortName: 'Mia' },\n { emailAddress: 'Ann.Mitchell@example.com', fullName: 'Ann Mitchell', shortName: 'Ann' },\n { emailAddress: 'Rafael.Bottom@example.com', fullName: 'Rafael Bottom', shortName: 'Rafael' },\n {\n emailAddress: 'Christopher.Gatsby@example.com',\n fullName: 'Christopher Gatsby',\n shortName: 'Christopher'\n },\n { emailAddress: 'Julianne.Moore@example.com', fullName: 'Julianne Moore', shortName: 'Julianne' },\n { emailAddress: 'Emily.Stone@example.com', fullName: 'Emily Stone', shortName: 'Emily' },\n { emailAddress: 'Richard.Wiles@example.com', fullName: 'Richard Wiles', shortName: 'Richard' },\n { emailAddress: 'Ella.Connor@example.com', fullName: 'Ella Connor', shortName: 'Ella' },\n { emailAddress: 'Robyn.Fenton@example.com', fullName: 'Robyn Fenton', shortName: 'Robyn' },\n { emailAddress: 'Lucille.Hale@example.com', fullName: 'Lucille Hale', shortName: 'Lucille' },\n { emailAddress: 'Angelina.Pitt@example.com', fullName: 'Angelina Pitt', shortName: 'Angelina' },\n { emailAddress: 'Tanya.Robinson@example.com', fullName: 'Tanya Robinson', shortName: 'Tanya' },\n { emailAddress: 'Laura.Horowitz@example.com', fullName: 'Laura Horowitz', shortName: 'Laura' }\n];\n\nexport const toParticipants = participants\n .slice(1, 3)\n .map((participant: EmailUser) => participant.emailAddress);\nexport const ccParticipants = participants\n .slice(9, 11)\n .map((participant: EmailUser) => participant.emailAddress);\nexport const bccParticipants = participants\n .slice(4, 9)\n .map((participant: EmailUser) => participant.emailAddress);\n\nexport const EntityListMockData: EntityListProps['content'] = [\n {\n name: 'Ticket number',\n value: [\n {\n id: '1',\n entity: {\n value: '7546383',\n type: 'system',\n name: 'Ticket number',\n variant: 3\n }\n },\n {\n id: '2',\n entity: {\n value: '7546383',\n type: 'system',\n name: 'Ticket number',\n variant: 3,\n icon: 'paper-clip'\n }\n }\n ]\n },\n {\n name: 'Name',\n value: [\n {\n id: '1',\n entity: {\n value: 'Robert stanton',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n },\n {\n id: '2',\n entity: {\n value: 'Sara Davis',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n },\n {\n id: '3',\n entity: {\n value: 'Cindy',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n },\n {\n id: '4',\n entity: {\n value: 'Dean',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n },\n {\n id: '5',\n entity: {\n value: 'Joe Stevens',\n type: 'system',\n name: 'Name',\n variant: 1\n }\n }\n ]\n },\n {\n name: 'Email',\n value: [\n {\n id: '1',\n entity: {\n value: 'robert.stanton@example.com',\n type: 'system',\n name: 'Email',\n variant: 2\n }\n },\n {\n id: '2',\n entity: {\n value: 'robert.stanton@example.com',\n type: 'system',\n name: 'Email',\n variant: 2,\n icon: 'paper-clip'\n }\n },\n {\n id: '3',\n entity: {\n value: 'cindy.turner@example.com',\n type: 'system',\n name: 'Email',\n variant: 2\n }\n },\n {\n id: '4',\n entity: {\n value: 'dean.thomas@example.com',\n type: 'system',\n name: 'Email',\n variant: 2\n }\n },\n {\n id: '5',\n entity: {\n value: 'joe.stevens@example.com',\n type: 'system',\n name: 'Email',\n variant: 2\n }\n }\n ]\n },\n {\n name: 'Date',\n value: [\n {\n id: '1',\n entity: {\n value: 'Dec 5,2021 9.05 AM',\n type: 'system',\n name: 'Date',\n variant: 4\n }\n }\n ]\n },\n {\n name: 'Flight Number',\n value: [\n {\n id: '1',\n entity: {\n value: 'FL-JK-403',\n type: 'system',\n name: 'Flight Number',\n variant: 5\n }\n }\n ]\n },\n {\n name: 'Address',\n value: [\n {\n id: '1',\n entity: {\n value: 'Nagercoil,Hyderabad',\n type: 'system',\n name: 'Address',\n variant: 15\n }\n }\n ]\n },\n {\n name: 'Location',\n value: [\n {\n id: '1',\n entity: {\n value: 'Hyderabad',\n type: 'system',\n name: 'Location',\n variant: 8\n }\n }\n ]\n }\n];\n\nexport const EmailMockData = {\n emails: {\n 'Sara Davis': {\n fullName: 'Sara Davis',\n shortName: 'Sara',\n emailAddress: 'saraConnor@example.com'\n },\n 'John Brown': {\n fullName: 'John Brown',\n shortName: 'John',\n emailAddress: 'john@example.com'\n },\n 'Hugh Phillips': {\n fullName: 'Hugh Phillips',\n shortName: 'Hugh',\n emailAddress: 'Hugh@example.com'\n },\n 'Laura Stevens': {\n fullName: 'Laura Stevens',\n shortName: 'Laura',\n emailAddress: 'laurastevens@example.com',\n avatarProps: {\n icon: 'headset'\n }\n },\n 'Joe Stevens': {\n fullName: 'Joe Stevens',\n shortName: 'Joe',\n emailAddress: 'Joe@example.com'\n },\n 'Adam Gillchrist': {\n fullName: 'Adam Gillchrist',\n shortName: 'Adam',\n emailAddress: 'adam@example.com'\n },\n 'John Paul': {\n fullName: 'John, Paul',\n shortName: 'Paul',\n emailAddress: 'John.Paul@example.com'\n },\n 'Oran Jacob': {\n fullName: 'Oran, Jacob',\n shortName: 'Jacob',\n emailAddress: 'jacob@example.com'\n },\n 'Tyson Mike': {\n fullName: 'Tyson, Mike',\n shortName: 'Mike',\n emailAddress: 'mike@example.com'\n },\n 'John Cent': {\n fullName: 'John, Cent',\n shortName: 'John',\n emailAddress: 'John.cena@example.com'\n },\n 'Mystery Rey': {\n fullName: 'Mystery, Rey',\n shortName: 'Rey',\n emailAddress: 'rey619@example.com'\n },\n 'Anton, Randy': {\n fullName: 'Anton, Randy',\n shortName: 'Randy',\n emailAddress: 'Randy.ortan@example.com'\n }\n },\n suggestedReplies: [\n {\n id: 'thank-you',\n title: 'Thank you',\n content: 'Thank you'\n },\n {\n id: 'clarification',\n title: 'Clarification',\n content: 'Can you please provide more clarification'\n },\n {\n id: 'apologies',\n title: 'Apologies',\n content: 'Apologies for the inconvenience'\n },\n {\n id: 'we_will_help',\n title: 'We will help',\n content: 'We will help'\n }\n ],\n emailBodyTemplates: [\n {\n id: 'thank-you',\n title: 'Thank you',\n content: 'Thank you'\n },\n {\n id: 'clarification',\n title: 'Clarification',\n content: 'Can you please provide more clarification'\n },\n {\n id: 'apologies',\n title: 'Apologies',\n content: 'Apologies for the inconvenience'\n },\n {\n id: 'we_will_help',\n title: 'We will help',\n content: 'We will help'\n }\n ]\n};\n\nexport const viewAnalysisEmailHeaderMock: FieldValueListProps['fields'] = [\n {\n name: 'Sender email',\n value: 'robert.stanton@hotmail.com'\n },\n {\n name: 'Sender name',\n value: 'Robert stanton'\n },\n {\n name: 'Subject',\n value: 'I have a quick question on travel'\n }\n];\n\nexport const topicListMock = [\n {\n id: '1',\n primary: 'Missing ticket',\n secondary: {\n indicator: 'Confidence',\n value: '50%'\n }\n },\n {\n id: '2',\n primary: 'Missing baggage',\n secondary: {\n indicator: 'Confidence',\n value: '80%'\n }\n },\n {\n id: '3',\n primary: 'Ticket booking',\n secondary: {\n indicator: 'Confidence',\n value: '30%'\n }\n },\n {\n id: '4',\n primary: 'Language',\n secondary: {\n indicator: 'Confidence'\n }\n }\n];\n"]}

package/lib/social/Email/Email.stories.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ declare const _default: {
 };
 export default _default;
 export declare const email: () => JSX.Element;
-export declare const viewAnalysis: () => JSX.Element;
+export declare const ViewAnalysis: () => JSX.Element;
 export declare const emailEntities: () => JSX.Element;
 export declare const emailConversation: () => JSX.Element;
 export declare const EmailComposerDemo: () => JSX.Element;

package/lib/social/Email/Email.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":";~~AA0BA~~,OAAO,EASL,UAAU,EAIX,MAAM,2BAA2B,CAAC;;;;;~~AAenC~~,wBAGE;~~AA6NF~~,eAAO,MAAM,KAAK,mBA4CjB,CAAC;AAMF,eAAO,MAAM,YAAY,~~mBAYxB~~,CAAC;AAYF,eAAO,MAAM,aAAa,mBAyFzB,CAAC;AAaF,eAAO,MAAM,iBAAiB,~~mBAqD7B~~,CAAC;AAaF,eAAO,MAAM,iBAAiB,~~mBA6E7B~~,CAAC;AAYF,eAAO,MAAM,SAAS;;;;;;;~~CA2OrB~~,CAAC;AAqBF,eAAO,MAAM,oBAAoB,mBA8BhC,CAAC;AAgPF,eAAO,MAAM,oBAAoB;;;;;CAyDhC,CAAC"}
1	+ {"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":";AAgCA,OAAO,EASL,UAAU,EAIX,MAAM,2BAA2B,CAAC;;;;;AAiBnC,wBAGE;AAwOF,eAAO,MAAM,KAAK,mBA4CjB,CAAC;AAMF,eAAO,MAAM,YAAY,mBAqCxB,CAAC;AAYF,eAAO,MAAM,aAAa,mBAyFzB,CAAC;AAaF,eAAO,MAAM,iBAAiB,mBA2C7B,CAAC;AAaF,eAAO,MAAM,iBAAiB,mBAmF7B,CAAC;AAYF,eAAO,MAAM,SAAS;;;;;;;CA0NrB,CAAC;AAqBF,eAAO,MAAM,oBAAoB,mBA8BhC,CAAC;AAgPF,eAAO,MAAM,oBAAoB;;;;;CAyDhC,CAAC"}

package/lib/social/Email/Email.stories.js CHANGED Viewed

@@ -3,11 +3,10 @@ import { useState, useRef, useContext, createRef } from 'react';
 import { action } from '@storybook/addon-actions';
 import { array, boolean } from '@storybook/addon-knobs';
 import styled, { css } from 'styled-components';
-import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, hasProp, Flex, Button, ModalManagerContext, Modal, menuHelpers, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Card, CardContent, createUID, MenuButton, Icon, registerIcon, hasProp, Flex, Button, ModalManagerContext, Modal, menuHelpers, defaultThemeProp, CardHeader, Text, SummaryList, Grid, FieldValueList, StyledLabel } from '@pega/cosmos-react-core';
 import * as filterIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/filter.icon';
-import { RichTextViewer } from '@pega/cosmos-react-rte';
-import { Email, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, ViewAnalysis } from '@pega/cosmos-react-social';
-import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, ViewAnalysisMockData, EmailMockData } from './Email.mocks';
+import { Email, EmailConversation, EmailComposer, EmailShell, EmailSummaryItem, EmailSummaryList, EntityList } from '@pega/cosmos-react-social';
+import { bccParticipants, ccParticipants, emailBodyContent, participants, toParticipants, emailAttachments, EntityListMockData, EmailMockData, viewAnalysisEmailHeaderMock, topicListMock } from './Email.mocks';
 registerIcon(filterIcon);
 export default {
     title: 'Social/Email',
@@ -19,6 +18,12 @@ const handleExternalEntry = (filterValue) => {
     const matched = filterValue.match(pattern);
     return !!matched?.input;
 };
+const templates = mockEmailBodyTemplates.map(({ id, title }) => {
+    return {
+        id,
+        title
+    };
+});
 const baseComposerProps = {
     participants,
     externalValidator: handleExternalEntry,
@@ -33,7 +38,7 @@ const baseComposerProps = {
     onCancel: () => {
         action('cancelled email composing');
     },
-    templates: mockEmailBodyTemplates
+    templates
 };
 var LaunchAction;
 (function (LaunchAction) {
@@ -82,34 +87,37 @@ const emailActions = (_jsx(MenuButton, { text: 'Email actions', variant: 'simple
             }
         ]
     } }, void 0));
-const emailDemoActions = (create, subject) => {
+const emailDemoActions = (create, subject, onTemplateChange) => {
     const id = createUID();
     return (_jsx(MenuButton, { text: 'Email actions', variant: 'simple', icon: 'more', iconOnly: true, menu: {
             items: [
                 {
-                    id,
+                    id: createUID(),
                     primary: 'Reply',
                     onClick: () => launchEmailComposer(id, LaunchAction.REPLY, {
                         ...baseComposerProps,
+                        onTemplateChange,
                         responseType: 'reply',
                         subject: `Re-${subject}` || ''
                     }, create)
                 },
                 {
-                    id,
+                    id: createUID(),
                     primary: 'Reply all',
                     onClick: () => launchEmailComposer(id, LaunchAction.REPLYALL, {
                         ...baseComposerProps,
+                        onTemplateChange,
                         responseType: 'replyAll',
                         cc: [],
                         subject: `Re-${subject}` || ''
                     }, create)
                 },
                 {
-                    id,
+                    id: createUID(),
                     primary: 'Forward',
                     onClick: () => launchEmailComposer(id, LaunchAction.FORWARD, {
                         ...baseComposerProps,
+                        onTemplateChange,
                         responseType: 'forward',
                         subject: `Fw-${subject}` || ''
                     }, create)
@@ -178,13 +186,19 @@ export const email = () => {
 const StyledViewAnalysis = styled.div `
   width: 18rem;
 `;
-export const viewAnalysis = () => {
-    const content = ViewAnalysisMockData;
+export const ViewAnalysis = () => {
     const headerProps = {
         icon: 'list-number',
         text: 'Entities'
     };
-    return (_jsx(StyledViewAnalysis, { children: _jsx(ViewAnalysis, { header: headerProps, content: content }, void 0) }, void 0));
+    const itemsToRender = topicListMock.map(items => {
+        return {
+            ...items,
+            primary: _jsx(StyledLabel, { children: items.primary }, void 0),
+            secondary: (_jsxs(Flex, { container: { direction: 'row', justify: 'between' }, children: [_jsx(Text, { variant: 'primary', children: items.secondary.indicator }, void 0), _jsx(StyledLabel, { children: items.secondary.value }, void 0)] }, void 0))
+        };
+    });
+    return (_jsx(StyledViewAnalysis, { children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(EntityList, { header: headerProps, content: EntityListMockData }, void 0), _jsxs(Card, { children: [_jsxs(CardHeader, { container: { alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { name: 'document-doc' }, void 0), _jsx(Text, { variant: 'h3', children: "Email header" }, void 0)] }, void 0), _jsx(CardContent, { children: _jsx(FieldValueList, { fields: viewAnalysisEmailHeaderMock, variant: 'stacked' }, void 0) }, void 0)] }, void 0), _jsx(SummaryList, { name: 'Topics', icon: 'headline', items: itemsToRender, noItemsText: 'No items' }, void 0)] }, void 0) }, void 0));
 };
 /*
   ______                 _ _   ______       _   _ _   _
@@ -279,7 +293,7 @@ export const emailConversation = () => {
             cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
             bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
             to: [mockEmails['Sara Davis'], mockEmails['John Brown'], mockEmails['Joe Stevens']],
-            body: (_jsx(RichTextViewer, { content: '<div> Hi, <br /> <br /> <div>Sure.. Here is your E-Ticket !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>', type: 'html' }, void 0)),
+            body: '<div> Hi, <br /> <br /> <div>Sure.. Here is your E-Ticket !! </div> <br /><br /> Regards, <br /> Laura Stevens </div>',
             unRead: true,
             onReply: action('On reply'),
             onForward: action('On forward'),
@@ -294,7 +308,7 @@ export const emailConversation = () => {
             cc: [mockEmails['Adam Gillchrist'], mockEmails['John Paul']],
             bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
             to: [mockEmails['Laura Stevens'], mockEmails['John Brown'], mockEmails['Joe Stevens']],
-            body: (_jsx(RichTextViewer, { content: '<div> Hi, <br /> <br /> <div>I\u2019m still at the airport, I need help now!! </div> <br /><br /> Regards, <br /> Sara Davis </div>', type: 'html' }, void 0)),
+            body: '<div> Hi, <br /> <br /> <div>I’m still at the airport, I need help now!! </div> <br /><br /> Regards, <br /> Sara Davis </div>',
             onReply: action('On reply'),
             onForward: action('On forward'),
             onSuggestionClick: action('On Suggested reply clicked'),
@@ -316,11 +330,15 @@ export const emailConversation = () => {
 export const EmailComposerDemo = () => {
     const fileUploadInputRef = useRef(null);
     const [attachments, setAttachments] = useState(emailAttachments);
+    const onTemplateChange = id => {
+        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === id);
+        return selectedTemplate?.content;
+    };
     return (_jsx(Card, { style: { width: '30rem' }, children: _jsxs(CardContent, { children: [_jsx(EmailComposer, { onSend: action('On Send'), onCancel: action('On cancel'), externalValidator: handleExternalEntry, participants: participants, to: {
                         reply: [participants[7].emailAddress],
                         replyAll: toParticipants,
                         forward: []
-                    }, cc: ccParticipants, bcc: bccParticipants, responseType: 'reply', subject: 'Request: Pause service', templates: mockEmailBodyTemplates, bodyContent: 'Hi, Hope you are doing well', onImageAdded: action('On Image added'), attachments: attachments.map(attachment => {
+                    }, cc: ccParticipants, bcc: bccParticipants, responseType: 'reply', subject: 'Request: Pause service', templates: templates, onTemplateChange: onTemplateChange, bodyContent: 'Hi, Hope you are doing well', onImageAdded: action('On Image added'), attachments: attachments.map(attachment => {
                         return {
                             ...attachment,
                             onDelete: name => {
@@ -363,6 +381,10 @@ export const EmailComposerDemo = () => {
 */
 export const EmailDemo = ({ hideSuggestions }) => {
+    const onTemplateChange = id => {
+        const selectedTemplate = mockEmailBodyTemplates.find(template => template.id === id);
+        return selectedTemplate?.content;
+    };
     const actions = array('Actions', ['Transfer', 'End conversation']).map(name => ({
         primary: name,
         id: name,
@@ -375,7 +397,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
             timeStamp: '2021-01-05T09:12',
             from: participants[0],
             to: participants.slice(0, 2),
-            body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Your address change request is approved.</div> <br /> <br />Regards, <br />Laura Stevens </div>', type: 'html' }, void 0)),
+            body: '<div>Hi, <br /> <br /><div>Your address change request is approved.</div> <br /> <br />Regards, <br />Laura Stevens </div>',
             unRead: true,
             subject: 'Pause service',
             suggestions: hideSuggestions ? undefined : mockSuggestedReplies,
@@ -408,12 +430,13 @@ export const EmailDemo = ({ hideSuggestions }) => {
             subject: 'Pause service'
         }
     ].map(emailData => {
-        const emailActionItems = emailDemoActions(create, emailData.subject);
+        const emailActionItems = emailDemoActions(create, emailData.subject, onTemplateChange);
         return {
             ...emailData,
             onReply: id => {
                 launchEmailComposer(id, LaunchAction.REPLY, {
                     ...baseComposerProps,
+                    onTemplateChange,
                     externalValidator: handleExternalEntry,
                     responseType: 'reply',
                     subject: `Re-${emailData.subject}` || ''
@@ -422,6 +445,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
             onForward: id => {
                 launchEmailComposer(id, LaunchAction.FORWARD, {
                     ...baseComposerProps,
+                    onTemplateChange,
                     externalValidator: handleExternalEntry,
                     responseType: 'forward',
                     subject: `Fw-${emailData.subject}` || ''
@@ -433,9 +457,10 @@ export const EmailDemo = ({ hideSuggestions }) => {
                     ...baseComposerProps,
                     externalValidator: handleExternalEntry,
                     responseType: 'reply',
+                    onTemplateChange,
                     subject: suggestion?.title || '',
                     bodyContent: suggestion ? suggestion.content : '',
-                    defaultTemplate: suggestion?.title
+                    defaultTemplateId: suggestion?.id
                 }, create);
             },
             actions: emailActionItems,
@@ -459,7 +484,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
                 to: [mockEmails['Mystery Rey'], ...emailsData[0].to],
                 cc: [mockEmails['Adam Gillchrist']],
                 bcc: [mockEmails['Anton, Randy'], mockEmails['Hugh Phillips']],
-                body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>', type: 'html' }, void 0))
+                body: '<div>Hi, <br /> <br /><div>Sure, Our executive will come and check your connection in 24hrs. </div>  <br />Regards, <br />Hugh Phillips </div>'
             },
             {
                 ...emailsData[1],
@@ -467,7 +492,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
                 timeStamp: '2021-01-02T14:16',
                 from: mockEmails['Mystery Rey'],
                 to: [mockEmails['Hugh Phillips']],
-                body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>', type: 'html' }, void 0))
+                body: '<div>Hi, <br /> <br /><div>Can you fix my internet connection. </div> <br /> <br />Regards, <br />Rey Mystery </div>'
             }
         ],
         [
@@ -477,7 +502,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
                 timeStamp: '2020-12-05T18:18',
                 from: mockEmails['Laura Stevens'],
                 to: [mockEmails['Sara Davis']],
-                body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Sure, Our executive will call you shortly. </div> <br /> <br />Regards, <br />Laura Stevens </div>', type: 'html' }, void 0)),
+                body: '<div>Hi, <br /> <br /><div>Sure, Our executive will call you shortly. </div> <br /> <br />Regards, <br />Laura Stevens </div>',
                 sentiment: {
                     variant: 'positive'
                 }
@@ -488,7 +513,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
                 timeStamp: '2021-01-04T08:30',
                 from: mockEmails['Sara Davis'],
                 to: [mockEmails['Laura Stevens']],
-                body: (_jsx(RichTextViewer, { content: '<div>Hi, <br /> <br /><div>Can you show please explain your new mobile plans. </div> <br /> <br />Regards, <br />Sara Davis </div>', type: 'html' }, void 0))
+                body: '<div>Hi, <br /> <br /><div>Can you show please explain your new mobile plans. </div> <br /> <br />Regards, <br />Sara Davis </div>'
             }
         ]
     ].map((emails, i) => {