npm - @pega/cosmos-react-demos - Versions diffs - 5.0.0-dev.8.4 → 5.0.0-dev.9.1 - Mend

@pega/cosmos-react-demos 5.0.0-dev.8.4 → 5.0.0-dev.9.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 (69) 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 type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Link,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { Editor } from '@pega/cosmos-react-rte';\nimport type { EditorState } from '@pega/cosmos-react-rte';\n\nimport { createPegaCustomElement, label } from './Editor.mocks';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\ntype EditorStoryProps = {\n showAdditionalInfo?: boolean;\n};\n\nexport const EditorDemo: StoryFn<EditorStoryProps> = (args: EditorStoryProps) => {\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 onChange={action('Editor changed')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"Example alt text\" src=\"http://via.placeholder.com/640x360\"/></body>'\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla\n aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }\n />\n );\n};\n\nEditorDemo.args = {\n showAdditionalInfo: false\n};\n\nEditorDemo.argTypes = {\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const EmptyEditorDemo: StoryFn = () => {\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: StoryFn = () => {\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\nexport const CustomComponentDemo: StoryFn = () => {\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={[{ createCustomElement: createPegaCustomElement, 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: StoryFn = () => {\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: StoryFn = () => {\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":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACT,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAGhD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,IAAsB,EAAE,EAAE;IAC9E,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,SAAS,CAAC,OAAO,EAAE,WAAW,CAC5B;YACE,GAAG;YACH,GAAG,EAAE,KAAK,CAAC,IAAI;YACf,YAAY,EAAE,WAAW;SAC1B,EACD,EAAE,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CACvE,OAAO,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAClC,MAAM,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CACjC,QAAQ,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CACnC,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,YAAY,CAAC,wIAAwI,CACrJ,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,CACP,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CACpE;kBAAA,CAAC,CAAC,CACA;;;;kBAGF,EAAE,CAAC,CACH;kBAAA,CAAC,CAAC,CACA;;;;kBAGF,EAAE,CAAC,CACH;kBAAA,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAC5B;;kBACF,EAAE,IAAI,CACR;gBAAA,EAAE,IAAI,CAAC,CACR;aACF;YACH,CAAC,CAAC,SAAS,CACd,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,kBAAkB,EAAE,KAAK;IACzB,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,kBAAkB;IACxB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;IACzD,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,CAAC;QAC9D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAY,GAAG,EAAE;IAC3C,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAE5C,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,KAAK,CAAC,kBAAkB,CACxB,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CACvE,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CACpC,MAAM,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CACrC,WAAW,CAAC,yBAAyB,EACrC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAY,GAAG,EAAE;IAC7C,OAAO,CACL,CAAC,MAAM,CACL,KAAK,CAAC,kBAAkB,CACxB,QAAQ,CACR,YAAY,CAAC,CAAC;;;;;;OAMb,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAY,GAAG,EAAE;IAC/C,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAmB,CAAC,CAAC;IAE1D,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,CAAC,aAAa,CAAC,kDAAkD,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,KAAK,CAAC,kBAAkB,CACxB,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CACvE,YAAY,CAAC,iIAAiI,CAC9I,gBAAgB,CAAC,CAAC,CAAC,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC,CAAC,CAC1F,aAAa,CAAC,CAAC;YACb;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,yBAAyB;gBAC/B,WAAW,EAAE,GAAG,EAAE;oBAChB,cAAc,EAAE,CAAC;gBACnB,CAAC;aACF;SACF,CAAC,CACF,MAAM,CAAC,CAAC,iBAAiB,CAAC,EAAE;YAC1B,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC/B,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAY,GAAG,EAAE;IAClD,MAAM,SAAS,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE7D,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,SAAS,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,IAAyC,EAAE,EAAE;QAChE,IAAI,IAAI,KAAK,MAAM;YAAE,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;aACzD,IAAI,IAAI,KAAK,YAAY;YAAE,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;aACzE,IAAI,IAAI,KAAK,WAAW;YAAE,UAAU,CAAC,SAAS,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC;IAC9E,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,MAAM,CACL,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAC5F,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,KAAK,CAAC,4BAA4B,CAClC,IAAI,CAAC,+EAA+E,EAGtF;;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,MAAM,CAC7D;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,EAAE,MAAM,CACzE;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,EAAE,MAAM,CACzE;MAAA,EAAE,IAAI,CAEN;;MAAA,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,CACvB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,6BAA6B,GAAY,GAAG,EAAE;IACzD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IACxD,MAAM,MAAM,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IAEzC,MAAM,YAAY,GAAG,CAAC,KAAW,EAAE,EAAU,EAAE,EAAE;QAC/C,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;QACvC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5D,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,IAAI,CACH;QAAA,CAAC,WAAW,CACV;UAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAChE;QAAA,EAAE,WAAW,CACb;QAAA,CAAC,UAAU,CACT;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,CACnE;;UACF,EAAE,MAAM,CACV;QAAA,EAAE,UAAU,CACd;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,MAAM,CACL,YAAY,CAAC,CAAC,IAAI,CAAC,CACnB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,GAAG,CAAC,CAAC,MAAM,CAAC,CACZ,KAAK,CAAC,kBAAkB,CACxB,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,EAEhG;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Link,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { Editor } from '@pega/cosmos-react-rte';\nimport type { EditorProps, EditorState } from '@pega/cosmos-react-rte';\n\nimport { createPegaCustomElement } from './Editor.mocks';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\ninterface EditorStoryProps extends EditorProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const EditorDemo: StoryFn<EditorStoryProps> = (args: EditorStoryProps) => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage(\n {\n src,\n alt: image.name,\n attachmentId: 'sample-id'\n },\n id\n );\n };\n\n return (\n <Editor\n ref={editorRef}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onChange={action('Editor changed')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"Example alt text\" src=\"http://via.placeholder.com/640x360\"/></body>'\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla\n aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }\n />\n );\n};\n\nEditorDemo.args = {\n showAdditionalInfo: false,\n label: 'Form field label',\n labelHidden: false,\n info: 'Enter some value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nEditorDemo.argTypes = {\n showAdditionalInfo: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: {\n options: [undefined, 'success', 'warning', 'error', 'pending'],\n control: { type: 'select' }\n },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const EmptyEditorDemo: StoryFn = () => {\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='Form field 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: StoryFn = () => {\n return (\n <Editor\n label='Form field 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\nexport const CustomComponentDemo: StoryFn = () => {\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='Form field 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={[{ createCustomElement: createPegaCustomElement, 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: StoryFn = () => {\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: StoryFn = () => {\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='Form field label'\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}

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

@@ -60,6 +60,7 @@ interface EmailSummaryListStoryProps {
     loading?: EmailSummaryListProps['loading'];
     currentItemId?: EmailSummaryListProps['currentItemId'];
     searchQuery?: EmailSummaryListProps['searchQuery'];
+    count?: EmailSummaryListProps['count'];
 }
 export declare const EmailSummaryListDemo: StoryFn<EmailSummaryListStoryProps>;
 interface EmailCaseViewStoryProps extends EmailCaseViewProps {

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":"AAEA,OAAO,KAAK,EAAa,UAAU,EAAqB,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAqCtD,OAAO,KAAK,EACV,UAAU,EACV,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EAErB,kBAAkB,EACnB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAKV,eAAe,EAEhB,MAAM,4DAA4D,CAAC;;AA0CpE,wBAGU;AASV,UAAU,cAAe,SAAQ,UAAU;IACzC,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,KAAK,EAAE,OAAO,CAAC,cAAc,~~CAmHzC~~,CAAC;AA2BF,UAAU,iBAAiB;IACzB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,iBAAiB,CAuM/C,CAAC;AAqBF,UAAU,kBAAkB;IAC1B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,kBAAkB,CAqIrD,CAAC;AAuBF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,sBAAsB,CAiDxD,CAAC;AASF,UAAU,mBAAoB,SAAQ,eAAe;IACnD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,mBAAmB,~~CAgmBvD~~,CAAC;AAuBF,UAAU,mBAAmB;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,mBAAmB,CAoDvD,CAAC;AAiBF,UAAU,yBAAyB;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,yBAAyB,CA8BnE,CAAC;AAmBF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;IACvC,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,qBAAqB,CAAC,aAAa,CAAC,CAAC;~~CACpD~~;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,0BAA0B,~~CAoEpE~~,CAAC;AAWF,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,uBAAuB,CAyE9D,CAAC;AAyBF,UAAU,yBAAyB;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,yBAAyB,CAsInE,CAAC"}
1	+ {"version":3,"file":"Email.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Email/Email.stories.tsx"],"names":[],"mappings":"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"}

package/jsx/social/Email/Email.stories.jsx CHANGED Viewed

@@ -78,8 +78,7 @@ export const Email = (args) => {
         ].map(attachment => {
             return {
                 ...attachment,
-                onDownload: action('On attachment download'),
-                onPreview: action('On attachment preview')
+                onDownload: action('On attachment download')
             };
         })}/>
       </StyledEmailCardContent>
@@ -692,8 +691,7 @@ export const EmailShellDemo = (args) => {
             ].map(attachment => {
                 return {
                     ...attachment,
-                    onDownload: action('On attachment download'),
-                    onPreview: action('On attachment preview')
+                    onDownload: action('On attachment download')
                 };
             })
         },
@@ -1032,7 +1030,11 @@ EmailSummaryItemDemo.argTypes = {
 export const EmailSummaryListDemo = (args) => {
     const INITIAL_CHUNK_SIZE = 9;
     const APPEND_CHUNK_SIZE = 1;
-    const [allEmailItems, setAllEmailItems] = useState(emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
+    const [allEmailItems, setAllEmailItems] = useState(args.items || emailSummaryItems.slice(0, INITIAL_CHUNK_SIZE));
+    useEffect(() => {
+        if (args.items)
+            setAllEmailItems(args.items);
+    }, [args.items]);
     const [categories, setCategories] = useState(emailWorklistItemsMock);
     const [currentItemId, setCurrentItemId] = useState(emailSummaryItems[0].id);
     const handleItemClick = (id) => {
@@ -1065,7 +1067,12 @@ export const EmailSummaryListDemo = (args) => {
             }, 1500);
         }
     }, [loading]);
-    return (<EmailSummaryList unreadEmailCount={99} categories={categories} searchQuery={args.searchQuery} items={args.items || allEmailItems} onItemClick={args.onItemClick || handleItemClick} onCategoryClick={onCategoryClick} onLoadMore={args.onLoadMore || (hasMore ? loadMore : undefined)} loading={args.loading || loading} emptyMessage='No emails.' currentItemId={args.currentItemId || currentItemId}/>);
+    return (<EmailSummaryList count={args.count
+            ? args.count
+            : {
+                total: emailSummaryItems.length,
+                unread: allEmailItems.reduce((result, email) => email.unreadEmailCount ? result + email.unreadEmailCount : result, 0)
+            }} categories={categories} searchQuery={args.searchQuery} items={args.items || allEmailItems} onItemClick={args.onItemClick || handleItemClick} onCategoryClick={onCategoryClick} onLoadMore={args.onLoadMore || (hasMore ? loadMore : undefined)} loading={args.loading || loading} emptyMessage='No emails.' currentItemId={args.currentItemId || currentItemId}/>);
 };
 EmailSummaryListDemo.args = {
     searchQuery: ''