npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.2.0 → 3.0.0-dev.4.1 - Mend

@pega/cosmos-react-demos 3.0.0-dev.2.0 → 3.0.0-dev.4.1

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 (325) hide show

package/jsx/rte/Editor/Editor.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.stories.jsx","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.jsx","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><img alt=\"placeholder\" src=\"http://via.placeholder.com/640x360\"/></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/jsx/social/Email/Email.mocks.d.ts CHANGED Viewed

@@ -1,11 +1,12 @@
-import { EmailComposerProps, ViewAnalysisProps } from '@pega/cosmos-react-social';
+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': {
@@ -83,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/jsx/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.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAa,~~iBAAiB~~,EAAE,MAAM,2BAA2B,CAAC;~~AAE7F~~,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,~~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/jsx/social/Email/Email.mocks.js CHANGED Viewed

@@ -51,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: [
@@ -345,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/jsx/social/Email/Email.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Email.mocks.js","sourceRoot":"","sources":["../../../src/social/Email/Email.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import { EmailComposerProps, EmailUser, ViewAnalysisProps } 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 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/jsx/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/jsx/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":";~~AAyBA~~,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,mBA2C7B,CAAC;AAaF,eAAO,MAAM,iBAAiB,~~mBA6E7B~~,CAAC;AAYF,eAAO,MAAM,SAAS;;;;;;;~~CAkNrB~~,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,mBAkHzB,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/jsx/social/Email/Email.stories.jsx CHANGED Viewed

@@ -2,10 +2,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 { 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',
@@ -17,6 +17,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,
@@ -31,7 +37,7 @@ const baseComposerProps = {
     onCancel: () => {
         action('cancelled email composing');
     },
-    templates: mockEmailBodyTemplates
+    templates
 };
 var LaunchAction;
 (function (LaunchAction) {
@@ -82,34 +88,37 @@ const emailActions = (<MenuButton text='Email actions' variant='simple' icon='mo
             }
         ]
     }}/>);
-const emailDemoActions = (create, subject) => {
+const emailDemoActions = (create, subject, onTemplateChange) => {
     const id = createUID();
     return (<MenuButton text='Email actions' variant='simple' icon='more' iconOnly 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)
@@ -172,21 +181,44 @@ 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'
     };
+    const itemsToRender = topicListMock.map(items => {
+        return {
+            ...items,
+            primary: <StyledLabel>{items.primary}</StyledLabel>,
+            secondary: (<Flex container={{ direction: 'row', justify: 'between' }}>
+          <Text variant='primary'>{items.secondary.indicator}</Text>
+          <StyledLabel>{items.secondary.value}</StyledLabel>
+        </Flex>)
+        };
+    });
     return (<StyledViewAnalysis>
-      <ViewAnalysis header={headerProps} content={content}/>
+      <Grid container={{ rowGap: 2 }}>
+        <EntityList header={headerProps} content={EntityListMockData}/>
+        <Card>
+          <CardHeader container={{ alignItems: 'center', gap: 1 }}>
+            <Icon name='document-doc'/>
+            <Text variant='h3'>Email header</Text>
+          </CardHeader>
+          <CardContent>
+            <FieldValueList fields={viewAnalysisEmailHeaderMock} variant='stacked'/>
+          </CardContent>
+        </Card>
+        <SummaryList name='Topics' icon='headline' items={itemsToRender} noItemsText='No items'/>
+      </Grid>
     </StyledViewAnalysis>);
 };
 export const emailEntities = () => {
     const nestedEntities = ['Place: Nagercoil, Hyderabad', 'Location: Nagercoil'];
     return (<Card>
       <StyledEmailCardContent>
-        <Email id={createUID()} timeStamp='2021-01-05T09:12' from={mockEmails['Laura Stevens']} 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='<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, Nagercoil branch, with code 3967. I have a saving bank account here. My account number is 6785420965476.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>' entityHighlightMapping={boolean('Entity Highlighting', true)
+        <Email id={createUID()} timeStamp='2021-01-05T09:12' from={mockEmails['Laura Stevens']} 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='<div>Hi,<br/><p>I am one of the customer of Indian Overseas Bank, <b><i>Nagercoil</i></b> branch, with code <b><a href="www.google.com"><i>3967</i></a></b>. I have a saving bank account here. My account number is <i>6785420965476</i>.</p><br/><p>I have been given a debit cum ATM card from this bank and the same has been lost when I was traveling from Nagercoil to Trichy by Bus on Jan 04, 2021. I remember that my ATM card number was 1920 6746 8653 1256.</p><br/>I hereby request you to block my debit card immediately to prevent misuse of the same by some others. Also I request you to give me an new debit card as early as possible.<br/><br/>Regards,<br/>Laura Stevens</div>' entityHighlightMapping={boolean('Entity Highlighting', true)
             ? [
                 {
                     value: '3967',
@@ -245,6 +277,28 @@ export const emailEntities = () => {
                     description: 'Date'
                 }
             ]
+            : undefined} contextMenu={boolean('Copy to context menu fields', true)
+            ? {
+                heading: 'Copy to',
+                items: [
+                    {
+                        id: createUID(),
+                        primary: 'Field 1',
+                        selected: false
+                    },
+                    {
+                        id: createUID(),
+                        primary: 'Field 2',
+                        selected: true
+                    },
+                    {
+                        id: createUID(),
+                        primary: 'Field 3',
+                        selected: true
+                    }
+                ],
+                onItemClick: action('On Copy')
+            }
             : undefined} subject='I lost my debit card' onReply={action('On reply')} onReplyAll={action('On reply all')} onForward={action('On forward')} onSuggestionClick={action('On Suggested reply clicked')} sentiment={{
             variant: 'neutral'
         }} actions={emailActions} suggestions={mockSuggestedReplies}/>
@@ -287,13 +341,17 @@ 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 (<Card style={{ width: '30rem' }}>
       <CardContent>
         <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 => {
@@ -330,6 +388,10 @@ export const EmailComposerDemo = () => {
     </Card>);
 };
 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,12 +437,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}` || ''
@@ -389,6 +452,7 @@ export const EmailDemo = ({ hideSuggestions }) => {
             onForward: id => {
                 launchEmailComposer(id, LaunchAction.FORWARD, {
                     ...baseComposerProps,
+                    onTemplateChange,
                     externalValidator: handleExternalEntry,
                     responseType: 'forward',
                     subject: `Fw-${emailData.subject}` || ''
@@ -400,9 +464,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,