@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/jsx/social/Feed/FeedReply.stories.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useCallback } from 'react';
 import { Avatar, CardContent, Popover, useUID } from '@pega/cosmos-react-core';
 import { Feed, FeedReply, HashtagButtonConfig, MentionButtonConfig } from '@pega/cosmos-react-social';
 import { Glimpse } from '@pega/cosmos-react-work';
@@ -7,17 +7,17 @@ export default {
     title: 'Social/Feed/FeedReply',
     component: FeedReply
 };
-export const FeedReplyDemo = ({ fullname = 'Katie Smith', username = 'katie_smith', content, attachments, timeElapsed: time, userStatus, renderFeed = true }) => {
+export const FeedReplyDemo = ({ fullname = 'Demo User', username = 'demo_user', content, attachments, postTimestamp = new Date(2022, 0, 1), userStatus, renderFeed = true }) => {
     const defaultContent = attachments
         ? ''
-        : 'This reply mentions @deans:Seth DeAngelo:user: and also contains a tag! #cosmos:';
+        : 'This reply mentions @[deans]:[Seth DeAngelo]:[user]: and also contains a tag! #cosmos:';
     const key = useUID();
     const [likes, setLikes] = useState([]);
     const [liked, setLiked] = useState(false);
     const [likeCount, setLikeCount] = useState(renderFeed ? generatedLikes.length : 0);
     const [replyContent, setReplyContent] = useState(content || defaultContent);
     const [edited, setEdited] = useState(false);
-    const [timeElapsed, setTimeElapsed] = useState(time || '3 days ago');
+    const [editTimestamp, setEditTimestamp] = useState(new Date());
     const [popoverOpen, setPopoverOpen] = useState(false);
     const [popoverTarget, setPopoverTarget] = useState();
     const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);
@@ -26,20 +26,25 @@ export const FeedReplyDemo = ({ fullname = 'Katie Smith', username = 'katie_smit
             return;
         setLikes(renderFeed ? generatedLikes : []);
     };
-    const generateNewLike = () => {
-        setTimeout(() => {
-            setLikes(oldLikes => [
-                ...oldLikes,
-                {
-                    primary: 'Generated Like',
-                    secondary: ['This like was added after the onLoadMore callback triggered'],
-                    visual: <Avatar size='l' name='Generated Like'/>,
-                    id: 'generatedLike'
-                }
-            ]);
-            setAdditionalLikeAdded(true);
-        }, 1000);
-    };
+    const [likesLoading, setLikesLoading] = useState(false);
+    const generateNewLike = useCallback(() => {
+        if (!likesLoading) {
+            setLikesLoading(true);
+            setTimeout(() => {
+                setLikesLoading(false);
+                setLikes(oldLikes => [
+                    ...oldLikes,
+                    {
+                        primary: 'Generated Like',
+                        secondary: ['This like was added after the onLoadMore callback triggered'],
+                        visual: <Avatar size='l' name='Generated Like'/>,
+                        id: 'generatedLike'
+                    }
+                ]);
+                setAdditionalLikeAdded(true);
+            }, 1000);
+        }
+    }, [likesLoading]);
     const onMentionClick = ({ id, type }) => {
         if (type === 'user') {
             const user = userMentions.find(mention => mention.id === id);
@@ -49,7 +54,7 @@ export const FeedReplyDemo = ({ fullname = 'Katie Smith', username = 'katie_smit
     };
     const reply = (<>
       <FeedReply id={key} key={key} info={{
-            timeElapsed,
+            postTimestamp,
             content: replyContent,
             attachments,
             username,
@@ -65,8 +70,8 @@ export const FeedReplyDemo = ({ fullname = 'Katie Smith', username = 'katie_smit
         }} maxContentHeight={40} menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => { } }]} onEditSubmit={({ value }) => {
             setReplyContent(value);
             setEdited(true);
-            setTimeElapsed('Just now');
-        }} edited={edited} onCommentClick={() => { }} onLikeClick={({ user }) => {
+            setEditTimestamp(new Date());
+        }} edited={edited} editTimestamp={editTimestamp} onCommentClick={() => { }} onLikeClick={({ user }) => {
             const userLikedIndex = likes.findIndex(x => x.id === user.id);
             if (userLikedIndex !== -1) {
                 setLikes(oldLikes => {
@@ -81,7 +86,7 @@ export const FeedReplyDemo = ({ fullname = 'Katie Smith', username = 'katie_smit
                 setLikeCount(curr => curr + 1);
             }
             setLiked(curr => !curr);
-        }} onLikeCountInteraction={getInitialLikes} onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined} onUserClick={(_, clickEvent) => {
+        }} onLikeCountInteraction={getInitialLikes} onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined} likesLoading={likesLoading} onUserClick={(_, clickEvent) => {
             if (clickEvent) {
                 setPopoverTarget(clickEvent.target);
                 setPopoverOpen(curr => !curr);

package/jsx/social/Feed/FeedReply.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FeedReply.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReply.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Avatar, CardContent, Popover, SummaryListItem, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReply,\n  FeedReplyProps,\n  HashtagButtonConfig,\n  MentionButtonConfig\n} from '@pega/cosmos-react-social';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nimport { generatedLikes, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReply',\n  component: FeedReply\n} as Meta;\n\nexport const FeedReplyDemo = ({\n  fullname = 'Katie Smith',\n  username = 'katie_smith',\n  content,\n  attachments,\n  timeElapsed: time,\n  userStatus,\n  renderFeed = true\n}: {\n  fullname?: FeedReplyProps['info']['fullname'];\n  username?: FeedReplyProps['info']['username'];\n  content?: FeedReplyProps['info']['content'];\n  attachments?: FeedReplyProps['info']['attachments'];\n  timeElapsed?: FeedReplyProps['info']['timeElapsed'];\n  userStatus?: FeedReplyProps['info']['userStatus'];\n  renderFeed?: boolean;\n}) => {\n  const defaultContent = attachments\n    ? ''\n    : 'This reply mentions @deans:Seth DeAngelo:user: and also contains a tag! #cosmos:';\n\n  const key = useUID();\n  const [likes, setLikes] = useState<SummaryListItem[]>([]);\n  const [liked, setLiked] = useState(false);\n  const [likeCount, setLikeCount] = useState(renderFeed ? generatedLikes.length : 0);\n  const [replyContent, setReplyContent] = useState(content || defaultContent);\n  const [edited, setEdited] = useState(false);\n  const [timeElapsed, setTimeElapsed] = useState(time || '3 days ago');\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [popoverTarget, setPopoverTarget] = useState<Element>();\n  const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);\n\n  const getInitialLikes = () => {\n    if (likes.length) return;\n\n    setLikes(renderFeed ? generatedLikes : []);\n  };\n\n  const generateNewLike = () => {\n    setTimeout(() => {\n      setLikes(oldLikes => [\n        ...oldLikes,\n        {\n          primary: 'Generated Like',\n          secondary: ['This like was added after the onLoadMore callback triggered'],\n          visual: <Avatar size='l' name='Generated Like' />,\n          id: 'generatedLike'\n        }\n      ]);\n      setAdditionalLikeAdded(true);\n    }, 1000);\n  };\n\n  const onMentionClick = ({ id, type }: { id: string; type: string }) => {\n    if (type === 'user') {\n      const user = userMentions.find(mention => mention.id === id);\n      if (user) return <Glimpse {...user} />;\n    }\n  };\n\n  const reply = (\n    <>\n      <FeedReply\n        id={key}\n        key={key}\n        info={{\n          timeElapsed,\n          content: replyContent,\n          attachments,\n          username,\n          fullname,\n          fullnameLabel: `${fullname}'s Profile`,\n          liked,\n          userStatus\n        }}\n        interactionInfo={{\n          likes,\n          likeCount: likeCount >= 10 ? likeCount + 1 : likeCount,\n          likeLabel: 'Like',\n          commentLabel: 'Comment'\n        }}\n        maxContentHeight={40}\n        menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => {} }]}\n        onEditSubmit={({ value }) => {\n          setReplyContent(value);\n          setEdited(true);\n          setTimeElapsed('Just now');\n        }}\n        edited={edited}\n        onCommentClick={() => {}}\n        onLikeClick={({ user }) => {\n          const userLikedIndex = likes.findIndex(x => x.id === user.id);\n          if (userLikedIndex !== -1) {\n            setLikes(oldLikes => {\n              const oldLikesArr = [...oldLikes];\n              oldLikesArr.splice(userLikedIndex, 1);\n              return oldLikesArr;\n            });\n            setLikeCount(curr => curr - 1);\n          } else {\n            setLikes(oldLikes => [user, ...oldLikes]);\n            setLikeCount(curr => curr + 1);\n          }\n          setLiked(curr => !curr);\n        }}\n        onLikeCountInteraction={getInitialLikes}\n        onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined}\n        onUserClick={(_, clickEvent) => {\n          if (clickEvent) {\n            setPopoverTarget(clickEvent.target as Element);\n            setPopoverOpen(curr => !curr);\n          }\n        }}\n      />\n      {popoverTarget && (\n        <Popover show={popoverOpen} target={popoverTarget} placement='bottom' portal>\n          <CardContent>{fullname}</CardContent>\n        </Popover>\n      )}\n    </>\n  );\n\n  return renderFeed ? (\n    <Feed\n      onMentionClick={onMentionClick}\n      interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[reply]}\n    />\n  ) : (\n    reply\n  );\n};\n\nexport const FeedReplyWithPresence = () => {\n  return <FeedReplyDemo userStatus='active' />;\n};\n"]}
+{"version":3,"file":"FeedReply.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReply.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useCallback } from 'react';\n\nimport { Avatar, CardContent, Popover, SummaryListItem, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReply,\n  FeedReplyProps,\n  HashtagButtonConfig,\n  MentionButtonConfig\n} from '@pega/cosmos-react-social';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nimport { generatedLikes, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReply',\n  component: FeedReply\n} as Meta;\n\ninterface FeedReplyDemoProps {\n  fullname?: FeedReplyProps['info']['fullname'];\n  username?: FeedReplyProps['info']['username'];\n  content?: FeedReplyProps['info']['content'];\n  attachments?: FeedReplyProps['info']['attachments'];\n  postTimestamp?: FeedReplyProps['info']['postTimestamp'];\n  userStatus?: FeedReplyProps['info']['userStatus'];\n  renderFeed?: boolean;\n}\n\nexport const FeedReplyDemo: Story<FeedReplyDemoProps> = ({\n  fullname = 'Demo User',\n  username = 'demo_user',\n  content,\n  attachments,\n  postTimestamp = new Date(2022, 0, 1),\n  userStatus,\n  renderFeed = true\n}: FeedReplyDemoProps) => {\n  const defaultContent = attachments\n    ? ''\n    : 'This reply mentions @[deans]:[Seth DeAngelo]:[user]: and also contains a tag! #cosmos:';\n\n  const key = useUID();\n  const [likes, setLikes] = useState<SummaryListItem[]>([]);\n  const [liked, setLiked] = useState(false);\n  const [likeCount, setLikeCount] = useState(renderFeed ? generatedLikes.length : 0);\n  const [replyContent, setReplyContent] = useState(content || defaultContent);\n  const [edited, setEdited] = useState(false);\n  const [editTimestamp, setEditTimestamp] = useState(new Date());\n  const [popoverOpen, setPopoverOpen] = useState(false);\n  const [popoverTarget, setPopoverTarget] = useState<Element>();\n  const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);\n\n  const getInitialLikes = () => {\n    if (likes.length) return;\n\n    setLikes(renderFeed ? generatedLikes : []);\n  };\n\n  const [likesLoading, setLikesLoading] = useState(false);\n\n  const generateNewLike = useCallback(() => {\n    if (!likesLoading) {\n      setLikesLoading(true);\n      setTimeout(() => {\n        setLikesLoading(false);\n        setLikes(oldLikes => [\n          ...oldLikes,\n          {\n            primary: 'Generated Like',\n            secondary: ['This like was added after the onLoadMore callback triggered'],\n            visual: <Avatar size='l' name='Generated Like' />,\n            id: 'generatedLike'\n          }\n        ]);\n        setAdditionalLikeAdded(true);\n      }, 1000);\n    }\n  }, [likesLoading]);\n\n  const onMentionClick = ({ id, type }: { id: string; type: string }) => {\n    if (type === 'user') {\n      const user = userMentions.find(mention => mention.id === id);\n      if (user) return <Glimpse {...user} />;\n    }\n  };\n\n  const reply = (\n    <>\n      <FeedReply\n        id={key}\n        key={key}\n        info={{\n          postTimestamp,\n          content: replyContent,\n          attachments,\n          username,\n          fullname,\n          fullnameLabel: `${fullname}'s Profile`,\n          liked,\n          userStatus\n        }}\n        interactionInfo={{\n          likes,\n          likeCount: likeCount >= 10 ? likeCount + 1 : likeCount,\n          likeLabel: 'Like',\n          commentLabel: 'Comment'\n        }}\n        maxContentHeight={40}\n        menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => {} }]}\n        onEditSubmit={({ value }) => {\n          setReplyContent(value);\n          setEdited(true);\n          setEditTimestamp(new Date());\n        }}\n        edited={edited}\n        editTimestamp={editTimestamp}\n        onCommentClick={() => {}}\n        onLikeClick={({ user }) => {\n          const userLikedIndex = likes.findIndex(x => x.id === user.id);\n          if (userLikedIndex !== -1) {\n            setLikes(oldLikes => {\n              const oldLikesArr = [...oldLikes];\n              oldLikesArr.splice(userLikedIndex, 1);\n              return oldLikesArr;\n            });\n            setLikeCount(curr => curr - 1);\n          } else {\n            setLikes(oldLikes => [user, ...oldLikes]);\n            setLikeCount(curr => curr + 1);\n          }\n          setLiked(curr => !curr);\n        }}\n        onLikeCountInteraction={getInitialLikes}\n        onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined}\n        likesLoading={likesLoading}\n        onUserClick={(_, clickEvent) => {\n          if (clickEvent) {\n            setPopoverTarget(clickEvent.target as Element);\n            setPopoverOpen(curr => !curr);\n          }\n        }}\n      />\n      {popoverTarget && (\n        <Popover show={popoverOpen} target={popoverTarget} placement='bottom' portal>\n          <CardContent>{fullname}</CardContent>\n        </Popover>\n      )}\n    </>\n  );\n\n  return renderFeed ? (\n    <Feed\n      onMentionClick={onMentionClick}\n      interactionRenderers={[MentionButtonConfig, HashtagButtonConfig]}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[reply]}\n    />\n  ) : (\n    reply\n  );\n};\n\nexport const FeedReplyWithPresence: Story = () => {\n  return <FeedReplyDemo userStatus='active' />;\n};\n"]}

package/jsx/social/Feed/FeedReplyInput.stories.d.ts

@@ -1,15 +1,10 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
-import { FeedReplyInputProps, AttachedFiles } from '@pega/cosmos-react-social';
+import { Meta, Story } from '@storybook/react';
+import { FeedReplyInputProps } from '@pega/cosmos-react-social';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const FeedReplyInputDemo: ({ onSubmit, renderFeed }: {
-    onSubmit?: ((event: {
-        replyId: string;
-        value: string;
-        attachments: AttachedFiles[];
-        clear: () => void;
-    }) => void) | undefined;
-    renderFeed?: boolean | undefined;
-}) => JSX.Element;
+interface FeedReplyInputDemoProps {
+    onSubmit?: FeedReplyInputProps['onSubmit'];
+    renderFeed?: boolean;
+}
+export declare const FeedReplyInputDemo: Story<FeedReplyInputDemoProps>;
 //# sourceMappingURL=FeedReplyInput.stories.d.ts.map

package/jsx/social/Feed/FeedReplyInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedReplyInput.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIxC,OAAO,EAGL,mBAAmB,EACnB,aAAa,EACd,MAAM,2BAA2B,CAAC;;AAKnC,wBAGU;AAEV,eAAO,MAAM,kBAAkB;;;;;;;;iBA2F9B,CAAC"}
+{"version":3,"file":"FeedReplyInput.stories.d.ts","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAGL,mBAAmB,EAEpB,MAAM,2BAA2B,CAAC;;AAKnC,wBAGU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAyF7D,CAAC"}

package/jsx/social/Feed/FeedReplyInput.stories.jsx

@@ -19,12 +19,13 @@ export const FeedReplyInputDemo = ({ onSubmit, renderFeed = true }) => {
                 const searchWords = search.toLowerCase().split(' ');
                 return !!searchWords.every((word) => names.find((name) => name.startsWith(word)));
             })
-                .map(({ id, primary, secondary, visual }) => {
+                .map(({ id, primary, secondary, visual, href }) => {
                 return {
                     id,
                     primary,
                     secondary,
-                    visual
+                    visual,
+                    href
                 };
             });
             setSearchResults(mentions);

package/jsx/social/Feed/FeedReplyInput.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FeedReplyInput.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReplyInput,\n  FeedReplyInputProps,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReplyInput',\n  component: FeedReplyInput\n} as Meta;\n\nexport const FeedReplyInputDemo = ({\n  onSubmit,\n  renderFeed = true\n}: {\n  onSubmit?: FeedReplyInputProps['onSubmit'];\n  renderFeed?: boolean;\n}) => {\n  const key = useUID();\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n  const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const onFilesAdded = (files: AttachedFiles[]) => {\n    files.forEach(file => {\n      if (file.type.split('/')[0] === 'image') file.thumbnail = URL.createObjectURL(file);\n\n      file.onDelete = () => {\n        setAttachments(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setAttachments(files);\n  };\n\n  const replyInput = (\n    <FeedReplyInput\n      id={key}\n      commentLabel='Send Comment'\n      attachments={attachments}\n      placeholder='Add a comment'\n      onFilesAdded={onFilesAdded}\n      onSubmit={replyEvent => {\n        onSubmit?.(replyEvent);\n        setAttachments([]);\n        replyEvent.clear();\n      }}\n    />\n  );\n\n  return renderFeed ? (\n    <Feed\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[replyInput]}\n    />\n  ) : (\n    replyInput\n  );\n};\n"]}
+{"version":3,"file":"FeedReplyInput.stories.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReplyInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MenuItemProps, useUID } from '@pega/cosmos-react-core';\nimport {\n  Feed,\n  FeedReplyInput,\n  FeedReplyInputProps,\n  AttachedFiles\n} from '@pega/cosmos-react-social';\nimport { GlimpseProps } from '@pega/cosmos-react-work';\n\nimport { caseMentions, userMentions } from './Feed.mocks';\n\nexport default {\n  title: 'Social/Feed/FeedReplyInput',\n  component: FeedReplyInput\n} as Meta;\n\ninterface FeedReplyInputDemoProps {\n  onSubmit?: FeedReplyInputProps['onSubmit'];\n  renderFeed?: boolean;\n}\n\nexport const FeedReplyInputDemo: Story<FeedReplyInputDemoProps> = ({\n  onSubmit,\n  renderFeed = true\n}: FeedReplyInputDemoProps) => {\n  const key = useUID();\n  const [searchResults, setSearchResults] = useState<MenuItemProps[]>([]);\n  const [attachments, setAttachments] = useState<AttachedFiles[]>([]);\n\n  const onSearch = ({\n    type,\n    search,\n    mentionType\n  }: {\n    type: 'mention' | 'tag';\n    search: string;\n    mentionType: string;\n  }) => {\n    if (type === 'mention') {\n      const availableMentions = mentionType === 'case' ? caseMentions : userMentions;\n\n      const mentions: MenuItemProps[] = availableMentions\n        .filter((user: GlimpseProps) => {\n          const names = user.primary.toLowerCase().split(' ');\n          const searchWords = search.toLowerCase().split(' ');\n          return !!searchWords.every((word: string) =>\n            names.find((name: string) => name.startsWith(word))\n          );\n        })\n        .map(({ id, primary, secondary, visual, href }) => {\n          return {\n            id,\n            primary,\n            secondary,\n            visual,\n            href\n          };\n        });\n      setSearchResults(mentions);\n    } else {\n      setSearchResults(\n        ['cosmos', 'hashtag', 'pega']\n          .filter(tag => {\n            return tag.toLowerCase().includes(search.toLowerCase());\n          })\n          .map(tag => ({ id: tag, primary: tag }))\n      );\n    }\n  };\n\n  const onFilesAdded = (files: AttachedFiles[]) => {\n    files.forEach(file => {\n      if (file.type.split('/')[0] === 'image') file.thumbnail = URL.createObjectURL(file);\n\n      file.onDelete = () => {\n        setAttachments(current => {\n          return current.filter(x => x.name !== file.name);\n        });\n      };\n    });\n\n    setAttachments(files);\n  };\n\n  const replyInput = (\n    <FeedReplyInput\n      id={key}\n      commentLabel='Send Comment'\n      attachments={attachments}\n      placeholder='Add a comment'\n      onFilesAdded={onFilesAdded}\n      onSubmit={replyEvent => {\n        onSubmit?.(replyEvent);\n        setAttachments([]);\n        replyEvent.clear();\n      }}\n    />\n  );\n\n  return renderFeed ? (\n    <Feed\n      searchTypes={['user', 'case']}\n      onDecoratorSearch={onSearch}\n      searchResults={searchResults}\n      userInfo={{ username: 'demo_user', fullname: 'Demo User' }}\n      posts={[replyInput]}\n    />\n  ) : (\n    replyInput\n  );\n};\n"]}

package/jsx/work/AppAnnouncement/AppAnnouncement.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.stories.d.ts","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAEhF,wBAGU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAmB3D,CAAC"}
+{"version":3,"file":"AppAnnouncement.stories.d.ts","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAEhF,wBAGU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAoB3D,CAAC"}

package/jsx/work/AppAnnouncement/AppAnnouncement.stories.jsx

@@ -12,18 +12,20 @@ export const AppAnnouncementDemo = (args) => {
         'Streamlined components for all business needs',
         'Other improvements'
     ];
-    return (<AppAnnouncement heading={args.heading} description={args.description} details={details} whatsNewLink={args.whatsNewLink} image={args.image} onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}/>);
+    return (<AppAnnouncement heading={args.heading} description={args.description} details={details} whatsNewLink={args.whatsNewLink} whatsNewText={args.whatsNewText} image={args.image} onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}/>);
 };
 AppAnnouncementDemo.args = {
     heading: 'Pega Cosmos Design System',
     description: 'We have launched a brand new experience to accelerate your workflow!',
     whatsNewLink: 'https://www.pega.com',
+    whatsNewText: "See what's new",
     image: 'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'
 };
 AppAnnouncementDemo.argTypes = {
     heading: { control: { type: 'text' } },
     description: { control: { type: 'text' } },
     whatsNewLink: { control: { type: 'text' } },
+    whatsNewText: { control: { type: 'text' } },
     image: { control: { type: 'text' } }
 };
 //# sourceMappingURL=AppAnnouncement.stories.jsx.map

package/jsx/work/AppAnnouncement/AppAnnouncement.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.stories.jsx","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAEhF,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CACnB,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG;QACd,8BAA8B;QAC9B,+CAA+C;QAC/C,oBAAoB;KACrB,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CACd,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAChC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,CAAC,EAChE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,OAAO,EAAE,2BAA2B;IACpC,WAAW,EAAE,sEAAsE;IACnF,YAAY,EAAE,sBAAsB;IACpC,KAAK,EACH,kGAAkG;CACrG,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext } from 'react';\n\nimport { ToasterContext } from '@pega/cosmos-react-core';\nimport { AppAnnouncement, AppAnnouncementProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/AppAnnouncement',\n  component: AppAnnouncement\n} as Meta;\n\nexport const AppAnnouncementDemo: Story<AppAnnouncementProps> = (args: AppAnnouncementProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const details = [\n    'New React based UI rendering',\n    'Streamlined components for all business needs',\n    'Other improvements'\n  ];\n\n  return (\n    <AppAnnouncement\n      heading={args.heading}\n      description={args.description}\n      details={details}\n      whatsNewLink={args.whatsNewLink}\n      image={args.image}\n      onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}\n    />\n  );\n};\n\nAppAnnouncementDemo.args = {\n  heading: 'Pega Cosmos Design System',\n  description: 'We have launched a brand new experience to accelerate your workflow!',\n  whatsNewLink: 'https://www.pega.com',\n  image:\n    'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'\n};\n\nAppAnnouncementDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  whatsNewLink: { control: { type: 'text' } },\n  image: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"AppAnnouncement.stories.jsx","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAEhF,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CACnB,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG;QACd,8BAA8B;QAC9B,+CAA+C;QAC/C,oBAAoB;KACrB,CAAC;IAEF,OAAO,CACL,CAAC,eAAe,CACd,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAChC,YAAY,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAChC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,CAAC,EAChE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,OAAO,EAAE,2BAA2B;IACpC,WAAW,EAAE,sEAAsE;IACnF,YAAY,EAAE,sBAAsB;IACpC,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EACH,kGAAkG;CACrG,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext } from 'react';\n\nimport { ToasterContext } from '@pega/cosmos-react-core';\nimport { AppAnnouncement, AppAnnouncementProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/AppAnnouncement',\n  component: AppAnnouncement\n} as Meta;\n\nexport const AppAnnouncementDemo: Story<AppAnnouncementProps> = (args: AppAnnouncementProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const details = [\n    'New React based UI rendering',\n    'Streamlined components for all business needs',\n    'Other improvements'\n  ];\n\n  return (\n    <AppAnnouncement\n      heading={args.heading}\n      description={args.description}\n      details={details}\n      whatsNewLink={args.whatsNewLink}\n      whatsNewText={args.whatsNewText}\n      image={args.image}\n      onDismiss={() => push({ content: 'Dismissed AppAnnouncement' })}\n    />\n  );\n};\n\nAppAnnouncementDemo.args = {\n  heading: 'Pega Cosmos Design System',\n  description: 'We have launched a brand new experience to accelerate your workflow!',\n  whatsNewLink: 'https://www.pega.com',\n  whatsNewText: \"See what's new\",\n  image:\n    'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'\n};\n\nAppAnnouncementDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  whatsNewLink: { control: { type: 'text' } },\n  whatsNewText: { control: { type: 'text' } },\n  image: { control: { type: 'text' } }\n};\n"]}

package/jsx/work/CaseView/CaseView.stories.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 import { MenuItemProps } from '@pega/cosmos-react-core';
 import { CaseViewProps, CaseHeaderProps, CaseSummaryFieldsProps } from '@pega/cosmos-react-work';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -21,14 +21,7 @@ export interface CaseViewStoryProps {
     showFollowedIcon?: boolean;
     defaultCollapsedUtilities?: boolean;
 }
-export declare const CaseViewDemo: ({ banners, persistentUtility, caseId, parentCases, heading, icon, tasksWidget, primaryFields, secondaryFields, actions, tabs, stages, showUtilities, defaultCollapsedUtilities, showFollowedIcon }: CaseViewStoryProps) => JSX.Element;
-export declare const CaseViewWithAppShell: {
-    (props: CaseViewStoryProps): JSX.Element;
-    parameters: {
-        eyes: {
-            runBefore: () => void;
-        };
-    };
-};
-export declare const CaseViewWithChat: (props: CaseViewStoryProps) => JSX.Element;
+export declare const CaseViewDemo: Story<CaseViewStoryProps>;
+export declare const CaseViewWithAppShell: Story;
+export declare const CaseViewWithChat: Story;
 //# sourceMappingURL=CaseView.stories.d.ts.map

package/jsx/work/CaseView/CaseView.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,YAAY,EAAW,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAML,aAAa,EAEd,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAEL,aAAa,EAEb,eAAe,EAEf,sBAAsB,EACvB,MAAM,yBAAyB,CAAC;;AAiBjC,wBAOU;AAEV,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,sBAAsB,CAAC,eAAe,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAUD,eAAO,MAAM,YAAY,uMAgBtB,kBAAkB,gBAuUpB,CAAC;AAYF,eAAO,MAAM,oBAAoB;YAAW,kBAAkB;;;;;;CAE7D,CAAC;AAuBF,eAAO,MAAM,gBAAgB,UAAW,kBAAkB,gBAYzD,CAAC"}
+{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,YAAY,EAAW,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,aAAa,EAEd,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAEL,aAAa,EAEb,eAAe,EAEf,sBAAsB,EACvB,MAAM,yBAAyB,CAAC;;AAiBjC,wBAOU;AAEV,MAAM,WAAW,kBAAkB;IACjC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,iBAAiB,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,sBAAsB,CAAC,eAAe,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,sBAAsB,CAAC,iBAAiB,CAAC,CAAC;IAC5D,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC;AAUD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CA2WlD,CAAC;AAYF,eAAO,MAAM,oBAAoB,EAAE,KAElC,CAAC;AAuBF,eAAO,MAAM,gBAAgB,EAAE,KAY9B,CAAC"}

package/jsx/work/CaseView/CaseView.stories.jsx

@@ -43,6 +43,12 @@ export const CaseViewDemo = ({ banners, persistentUtility, caseId = 'C-456', par
                 return PreviewLinkComponent;
         }
     };
+    const pulseOnMentionPreview = ({ id, type, text }) => {
+        if (type === 'case') {
+            setPreview({ id, name: text });
+            setPreviewCurrentTabId(`summary-${id}`);
+        }
+    };
     const demoTabItems = tabs || getTabs();
     const [demoCurrentTabId, setDemoCurrentTabId] = useState(isMediumOrAbove ? demoTabItems[0].id : `summary-${caseId}`);
     const demoTabs = {
@@ -50,7 +56,7 @@ export const CaseViewDemo = ({ banners, persistentUtility, caseId = 'C-456', par
         currentTabId: demoCurrentTabId,
         onClick: (id) => setDemoCurrentTabId(id)
     };
-    const demoStages = stages ? <StagesDemo currentStage={3} numberOfStages={5}/> : undefined;
+    const demoStages = stages ? <StagesDemo currentStage={3}/> : undefined;
     const demoTabContent = useMemo(() => {
         return [
             {
@@ -59,7 +65,7 @@ export const CaseViewDemo = ({ banners, persistentUtility, caseId = 'C-456', par
             },
             {
                 id: 'Pulse',
-                content: <PulseMock markdownMap={pulseMarkdownMap}/>
+                content: (<PulseMock markdownMap={pulseMarkdownMap} onMentionPreview={pulseOnMentionPreview}/>)
             },
             {
                 id: 'Accounts',
@@ -231,7 +237,9 @@ export const CaseViewDemo = ({ banners, persistentUtility, caseId = 'C-456', par
                     id: `${i + 1}`,
                     onClick: action(`Clicked Option Number ${i + 1}`)
                 };
-            })} onEdit={action('Case View Edit was clicked')} summary={<CaseSummaryFields primaryFields={demoPrimaryFields} secondaryFields={demoSecondaryFields}/>} tabs={demoTabs} banners={banners} persistentUtility={persistentUtility} stages={demoStages} tasks={tasksWidget} tabContent={demoTabContent} defaultCollapsedUtilities={defaultCollapsedUtilities} utilities={showUtilities ? (<>
+            })} promotedActions={[
+            { text: 'Action 13', id: '13', onClick: action('Clicked Option Number 13') }
+        ]} onEdit={action('Case View Edit was clicked')} summary={<CaseSummaryFields primaryFields={demoPrimaryFields} secondaryFields={demoSecondaryFields}/>} tabs={demoTabs} banners={banners} persistentUtility={persistentUtility} stages={demoStages} tasks={tasksWidget} tabContent={demoTabContent} defaultCollapsedUtilities={defaultCollapsedUtilities} utilities={showUtilities ? (<>
               <AttachmentsMock />
               <StakeHoldersDemo />
               <MockSummaryList icon='user-star' name='Followers'/>

package/jsx/work/CaseView/CaseView.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.stories.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, ReactElement, useMemo } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta } from '@storybook/react';\n\nimport {\n  Icon,\n  registerIcon,\n  Status,\n  Link,\n  Grid,\n  MenuItemProps,\n  useBreakpoint\n} from '@pega/cosmos-react-core';\nimport { TokenMap } from '@pega/cosmos-react-rte';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\nimport {\n  CaseView,\n  CaseViewProps,\n  CasePreview,\n  CaseHeaderProps,\n  CaseSummaryFields,\n  CaseSummaryFieldsProps\n} from '@pega/cosmos-react-work';\n\nimport { TasksDemo } from '../Tasks/Tasks.stories';\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { StandardChat } from '../../social/Chat/Chat.stories';\nimport { TagsDemo } from '../Tags/Tags.stories';\nimport { StagesDemo } from '../Stages/Stages.stories';\nimport { StakeHoldersDemo } from '../Stakeholders/Stakeholders.stories';\n\nimport { Details } from './Details.mocks';\nimport { PulseMock } from './Pulse.mocks';\nimport { AttachmentsMock } from './Attachments.mocks';\nimport { getTabs, MockOperatorFieldValue, MockSummaryList } from './CaseView.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Work/CaseView',\n  component: CaseView,\n  includeStories: ['CaseViewDemo', 'CaseViewWithAppShell', 'CaseViewWithChat'],\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface CaseViewStoryProps {\n  banners?: CaseViewProps['banners'];\n  persistentUtility?: CaseViewProps['persistentUtility'];\n  caseId?: string;\n  heading?: string;\n  icon?: ReactElement;\n  parentCases?: MenuItemProps[];\n  primaryFields?: CaseSummaryFieldsProps['primaryFields'];\n  secondaryFields?: CaseSummaryFieldsProps['secondaryFields'];\n  actions?: CaseHeaderProps['actions'];\n  tabs?: any;\n  tasksWidget?: ReactElement;\n  stages?: boolean;\n  showUtilities?: boolean;\n  showFollowedIcon?: boolean;\n  defaultCollapsedUtilities?: boolean;\n}\n\n/*\n _____                 _   _ _\n/  __ \\               | | | (_)\n| /  \\/ __ _ ___  ___ | | | |_  _____      __\n| |    / _` / __|/ _ \\| | | | |/ _ \\ \\ /\\ / /\n| \\__/\\ (_| \\__ \\  __/\\ \\_/ / |  __/\\ V  V /\n \\____/\\__,_|___/\\___| \\___/|_|\\___| \\_/\\_/\n */\nexport const CaseViewDemo = ({\n  banners,\n  persistentUtility,\n  caseId = 'C-456',\n  parentCases,\n  heading = 'Cosmos demo case',\n  icon = <Icon name='user-solid' />,\n  tasksWidget = <TasksDemo />,\n  primaryFields,\n  secondaryFields,\n  actions,\n  tabs,\n  stages = true,\n  showUtilities = true,\n  defaultCollapsedUtilities = false,\n  showFollowedIcon = true\n}: CaseViewStoryProps) => {\n  const previewTabItems = getTabs();\n  const [preview, setPreview] = useState<null | { id: string; name: string }>(null);\n  const [previewCurrentTabId, setPreviewCurrentTabId] = useState(previewTabItems[0].id);\n  const [followed, setFollowed] = useState(false);\n\n  const isMediumOrAbove = useBreakpoint('md');\n\n  const PreviewLinkComponent = ({ token: linkToken }: { token: TokenMap['link'] }) => {\n    return (\n      <Link\n        href={linkToken.href}\n        previewable\n        onPreview={() => {\n          setPreview({ id: linkToken.href, name: 'Previewable Case' });\n          setPreviewCurrentTabId(`summary-${linkToken.href}`);\n        }}\n      >\n        {linkToken.text}\n      </Link>\n    );\n  };\n\n  const pulseMarkdownMap = {\n    link: (linkToken: TokenMap['link']) => {\n      if (linkToken.href?.startsWith('C-')) return PreviewLinkComponent;\n    }\n  };\n\n  const demoTabItems = tabs || getTabs();\n\n  const [demoCurrentTabId, setDemoCurrentTabId] = useState(\n    isMediumOrAbove ? demoTabItems[0].id : `summary-${caseId}`\n  );\n\n  const demoTabs = {\n    items: demoTabItems,\n    currentTabId: demoCurrentTabId,\n    onClick: (id: string) => setDemoCurrentTabId(id)\n  };\n\n  const demoStages = stages ? <StagesDemo currentStage={3} numberOfStages={5} /> : undefined;\n\n  const demoTabContent = useMemo(() => {\n    return [\n      {\n        id: 'Details',\n        content: <Details />\n      },\n      {\n        id: 'Pulse',\n        content: <PulseMock markdownMap={pulseMarkdownMap} />\n      },\n      {\n        id: 'Accounts',\n        content: <TableDemo />\n      },\n      {\n        id: 'not found',\n        content: <h2>Not Found</h2>\n      }\n    ];\n  }, []);\n\n  const previewTabs = {\n    items: previewTabItems,\n    currentTabId: previewCurrentTabId,\n    onClick: (id: string) => setPreviewCurrentTabId(id)\n  };\n\n  const previewTabContent = useMemo(() => {\n    return [\n      {\n        id: 'Details',\n        content: <Details />\n      },\n      {\n        id: 'Pulse',\n        content: <PulseMock markdownMap={pulseMarkdownMap} />\n      },\n      {\n        id: 'Accounts',\n        content: <TableDemo />\n      },\n      {\n        id: 'not found',\n        content: <h2>Not Found</h2>\n      }\n    ];\n  }, []);\n\n  const demoPrimaryFields =\n    primaryFields ||\n    [\n      {\n        name: 'Member ID',\n        value: 'M205435569FD'\n      },\n      {\n        name: 'Priority',\n        value: '95'\n      }\n    ].map((f, i) => ({ ...f, id: `p-${i}` }));\n\n  const createDate = new Date(2016, 1, 8);\n  const msInYear = 1000 * 60 * 60 * 24 * 365;\n  const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);\n\n  const demoSecondaryFields =\n    secondaryFields ||\n    [\n      {\n        name: 'Status',\n        value: <Status variant='info'>New</Status>\n      },\n      {\n        name: 'Assigned to',\n        value: 'Dean Thomas'\n      },\n      {\n        name: 'Create date',\n        value: createDate.toDateString()\n      },\n      {\n        name: 'Update date',\n        value: `${diffInYears} years ago`\n      },\n      {\n        name: 'Created by',\n        value: <MockOperatorFieldValue />\n      },\n      {\n        name: 'Previewable Case',\n        value: (\n          <Link\n            href='/cases/C-789'\n            previewable\n            onPreview={() => {\n              setPreview({ id: 'C-789', name: 'Previewable Case' });\n              setPreviewCurrentTabId('summary-C-789');\n            }}\n          >\n            Previewable Case - C-789\n          </Link>\n        )\n      }\n    ].map((f, i) => ({ ...f, id: `s-${i}` }));\n\n  const demoParentCases = useMemo(() => {\n    if (parentCases) {\n      return parentCases.map(parentCase => {\n        return {\n          ...parentCase,\n          onPreview: () => {\n            setPreview({ id: parentCase.id, name: parentCase.primary });\n            setPreviewCurrentTabId(`summary-${parentCase.id}`);\n          }\n        };\n      });\n    }\n\n    const ids = new Set([caseId]);\n\n    return Array.from({ length: 5 }, (_, i) => {\n      let id: string;\n      // Ensure parent ids are unique.\n      do {\n        id = `C-${Math.floor(Math.random() * 200 + 100)}`;\n      } while (ids.has(id));\n      ids.add(id);\n\n      const name = `Parent ${5 - i}`;\n\n      return {\n        id,\n        primary: `${name} - ${id}`,\n        href: `/cases/${id}`,\n        previewable: true,\n        onPreview: () => {\n          setPreview({ id, name });\n          setPreviewCurrentTabId(`summary-${id}`);\n        }\n      };\n    });\n  }, [caseId, parentCases]);\n\n  return (\n    <>\n      <CasePreview\n        open={!!preview}\n        caseId={preview?.id ?? ''}\n        parentCases={[...demoParentCases]\n          .splice(\n            0,\n            demoParentCases.findIndex(c => c.id === preview?.id)\n          )\n          .map(c => {\n            return { ...c, id: `preview-${c.id}` };\n          })}\n        heading={preview?.name ?? ''}\n        caseLink={{ href: `/cases/${preview?.id}`, target: '_blank' }}\n        icon={icon}\n        followed={showFollowedIcon ? !followed : undefined}\n        onEdit={action('Case Preview Edit was clicked')}\n        actions={\n          actions ||\n          Array.from({ length: 12 }, (_, i) => {\n            return {\n              text: `Action ${i + 1}`,\n              id: `${i + 1}`,\n              onClick: action(`Clicked Option Number ${i + 1}`)\n            };\n          })\n        }\n        summary={\n          <CaseSummaryFields\n            primaryFields={[\n              {\n                name: 'Member ID',\n                value: 'M204859F438G'\n              },\n              {\n                name: 'Priority',\n                value: '95'\n              }\n            ].map((f, i) => ({ ...f, id: `p-${i}` }))}\n            secondaryFields={[\n              {\n                name: 'Status',\n                value: <Status variant='info'>New</Status>\n              },\n              {\n                name: 'Assigned to',\n                value: 'Dean Thomas'\n              },\n              {\n                name: 'Create date',\n                value: createDate.toDateString()\n              },\n              {\n                name: 'Update date',\n                value: `${diffInYears} years ago`\n              }\n            ].map((f, i) => ({ ...f, id: `s-${i}` }))}\n          />\n        }\n        stages={demoStages}\n        tasks={tasksWidget}\n        tabs={previewTabs}\n        tabContent={previewTabContent}\n        utilities={\n          showUtilities ? (\n            <Grid container={{ rowGap: 2 }}>\n              <AttachmentsMock />\n              <StakeHoldersDemo />\n              <MockSummaryList icon='user-star' name='Followers' />\n              <TagsDemo />\n            </Grid>\n          ) : (\n            <Grid container={{ rowGap: 2 }}>\n              <AttachmentsMock />\n            </Grid>\n          )\n        }\n        onBeforeClose={() => {\n          // TODO: Maybe should handle syncing state to avoid additional render with duplicate prop value\n          if (preview) {\n            setPreview(null);\n          }\n        }}\n      />\n      <CaseView\n        caseId={caseId}\n        parentCases={demoParentCases}\n        heading={heading}\n        icon={icon}\n        followed={showFollowedIcon ? followed : undefined}\n        onFollowedChange={showFollowedIcon ? setFollowed : undefined}\n        actions={\n          actions ||\n          Array.from({ length: 12 }, (_, i) => {\n            return {\n              text: `Action ${i + 1}`,\n              id: `${i + 1}`,\n              onClick: action(`Clicked Option Number ${i + 1}`)\n            };\n          })\n        }\n        onEdit={action('Case View Edit was clicked')}\n        summary={\n          <CaseSummaryFields\n            primaryFields={demoPrimaryFields}\n            secondaryFields={demoSecondaryFields}\n          />\n        }\n        tabs={demoTabs}\n        banners={banners}\n        persistentUtility={persistentUtility}\n        stages={demoStages}\n        tasks={tasksWidget}\n        tabContent={demoTabContent}\n        defaultCollapsedUtilities={defaultCollapsedUtilities}\n        utilities={\n          showUtilities ? (\n            <>\n              <AttachmentsMock />\n              <StakeHoldersDemo />\n              <MockSummaryList icon='user-star' name='Followers' />\n              <TagsDemo />\n            </>\n          ) : (\n            <AttachmentsMock />\n          )\n        }\n        utilitiesSummaryItems={\n          showUtilities\n            ? [\n                { iconName: 'paper-clip', count: 4 },\n                { iconName: 'user-search-solid', count: 10 },\n                { iconName: 'user-star-solid', count: 5 },\n                { iconName: 'tag', count: 10 }\n              ]\n            : [{ iconName: 'paper-clip', count: 4 }]\n        }\n      />\n    </>\n  );\n};\n\n/*\n _____                 _   _ _                       ___              _____ _          _ _\n/  __ \\               | | | (_)                     / _ \\            /  ___| |        | | |\n| /  \\/ __ _ ___  ___ | | | |_  _____      ________/ /_\\ \\_ __  _ __ \\ `--.| |__   ___| | |\n| |    / _` / __|/ _ \\| | | | |/ _ \\ \\ /\\ / /______|  _  | '_ \\| '_ \\ `--. \\ '_ \\ / _ \\ | |\n| \\__/\\ (_| \\__ \\  __/\\ \\_/ / |  __/\\ V  V /       | | | | |_) | |_) /\\__/ / | | |  __/ | |\n \\____/\\__,_|___/\\___| \\___/|_|\\___| \\_/\\_/        \\_| |_/ .__/| .__/\\____/|_| |_|\\___|_|_|\n                                                         | |   | |\n                                                         |_|   |_|\n */\nexport const CaseViewWithAppShell = (props: CaseViewStoryProps) => {\n  return <AppShellDemo appHeader main={<CaseViewDemo {...props} />} />;\n};\n\n/*\n _____                 _   _ _                      _____ _           _\n/  __ \\               | | | (_)                    /  __ \\ |         | |\n| /  \\/ __ _ ___  ___ | | | |_  _____      ________| /  \\/ |__   __ _| |_\n| |    / _` / __|/ _ \\| | | | |/ _ \\ \\ /\\ / /______| |   | '_ \\ / _` | __|\n| \\__/\\ (_| \\__ \\  __/\\ \\_/ / |  __/\\ V  V /       | \\__/\\ | | | (_| | |_\n \\____/\\__,_|___/\\___| \\___/|_|\\___| \\_/\\_/         \\____/_| |_|\\__,_|\\__|\n */\nCaseViewWithAppShell.parameters = {\n  eyes: {\n    runBefore: () => {\n      document\n        .querySelector<HTMLButtonElement>(\n          // Find the case actions menu.\n          '[aria-label=\"Actions\"]'\n        )\n        ?.click();\n    }\n  }\n};\n\nexport const CaseViewWithChat = (props: CaseViewStoryProps) => {\n  return (\n    <AppShellDemo\n      appHeader\n      main={\n        <CaseViewDemo\n          persistentUtility={{ content: <StandardChat chatWidth='100%' />, title: 'Chat' }}\n          {...props}\n        />\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"CaseView.stories.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, ReactElement, useMemo } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Icon,\n  registerIcon,\n  Status,\n  Link,\n  Grid,\n  MenuItemProps,\n  useBreakpoint\n} from '@pega/cosmos-react-core';\nimport { TokenMap } from '@pega/cosmos-react-rte';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\nimport {\n  CaseView,\n  CaseViewProps,\n  CasePreview,\n  CaseHeaderProps,\n  CaseSummaryFields,\n  CaseSummaryFieldsProps\n} from '@pega/cosmos-react-work';\n\nimport { TasksDemo } from '../Tasks/Tasks.stories';\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { TableDemo } from '../../core/Table/Table.stories';\nimport { StandardChat } from '../../social/Chat/Chat.stories';\nimport { TagsDemo } from '../Tags/Tags.stories';\nimport { StagesDemo } from '../Stages/Stages.stories';\nimport { StakeHoldersDemo } from '../Stakeholders/Stakeholders.stories';\n\nimport { Details } from './Details.mocks';\nimport { PulseMock } from './Pulse.mocks';\nimport { AttachmentsMock } from './Attachments.mocks';\nimport { getTabs, MockOperatorFieldValue, MockSummaryList } from './CaseView.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Work/CaseView',\n  component: CaseView,\n  includeStories: ['CaseViewDemo', 'CaseViewWithAppShell', 'CaseViewWithChat'],\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface CaseViewStoryProps {\n  banners?: CaseViewProps['banners'];\n  persistentUtility?: CaseViewProps['persistentUtility'];\n  caseId?: string;\n  heading?: string;\n  icon?: ReactElement;\n  parentCases?: MenuItemProps[];\n  primaryFields?: CaseSummaryFieldsProps['primaryFields'];\n  secondaryFields?: CaseSummaryFieldsProps['secondaryFields'];\n  actions?: CaseHeaderProps['actions'];\n  tabs?: any;\n  tasksWidget?: ReactElement;\n  stages?: boolean;\n  showUtilities?: boolean;\n  showFollowedIcon?: boolean;\n  defaultCollapsedUtilities?: boolean;\n}\n\n/*\n _____                 _   _ _\n/  __ \\               | | | (_)\n| /  \\/ __ _ ___  ___ | | | |_  _____      __\n| |    / _` / __|/ _ \\| | | | |/ _ \\ \\ /\\ / /\n| \\__/\\ (_| \\__ \\  __/\\ \\_/ / |  __/\\ V  V /\n \\____/\\__,_|___/\\___| \\___/|_|\\___| \\_/\\_/\n */\nexport const CaseViewDemo: Story<CaseViewStoryProps> = ({\n  banners,\n  persistentUtility,\n  caseId = 'C-456',\n  parentCases,\n  heading = 'Cosmos demo case',\n  icon = <Icon name='user-solid' />,\n  tasksWidget = <TasksDemo />,\n  primaryFields,\n  secondaryFields,\n  actions,\n  tabs,\n  stages = true,\n  showUtilities = true,\n  defaultCollapsedUtilities = false,\n  showFollowedIcon = true\n}: CaseViewStoryProps) => {\n  const previewTabItems = getTabs();\n  const [preview, setPreview] = useState<null | { id: string; name: string }>(null);\n  const [previewCurrentTabId, setPreviewCurrentTabId] = useState(previewTabItems[0].id);\n  const [followed, setFollowed] = useState(false);\n\n  const isMediumOrAbove = useBreakpoint('md');\n\n  const PreviewLinkComponent = ({ token: linkToken }: { token: TokenMap['link'] }) => {\n    return (\n      <Link\n        href={linkToken.href}\n        previewable\n        onPreview={() => {\n          setPreview({ id: linkToken.href, name: 'Previewable Case' });\n          setPreviewCurrentTabId(`summary-${linkToken.href}`);\n        }}\n      >\n        {linkToken.text}\n      </Link>\n    );\n  };\n\n  const pulseMarkdownMap = {\n    link: (linkToken: TokenMap['link']) => {\n      if (linkToken.href?.startsWith('C-')) return PreviewLinkComponent;\n    }\n  };\n\n  const pulseOnMentionPreview = ({\n    id,\n    type,\n    text\n  }: {\n    id: string;\n    type: string;\n    text: string;\n  }) => {\n    if (type === 'case') {\n      setPreview({ id, name: text });\n      setPreviewCurrentTabId(`summary-${id}`);\n    }\n  };\n\n  const demoTabItems = tabs || getTabs();\n\n  const [demoCurrentTabId, setDemoCurrentTabId] = useState(\n    isMediumOrAbove ? demoTabItems[0].id : `summary-${caseId}`\n  );\n\n  const demoTabs = {\n    items: demoTabItems,\n    currentTabId: demoCurrentTabId,\n    onClick: (id: string) => setDemoCurrentTabId(id)\n  };\n\n  const demoStages = stages ? <StagesDemo currentStage={3} /> : undefined;\n\n  const demoTabContent = useMemo(() => {\n    return [\n      {\n        id: 'Details',\n        content: <Details />\n      },\n      {\n        id: 'Pulse',\n        content: (\n          <PulseMock markdownMap={pulseMarkdownMap} onMentionPreview={pulseOnMentionPreview} />\n        )\n      },\n      {\n        id: 'Accounts',\n        content: <TableDemo />\n      },\n      {\n        id: 'not found',\n        content: <h2>Not Found</h2>\n      }\n    ];\n  }, []);\n\n  const previewTabs = {\n    items: previewTabItems,\n    currentTabId: previewCurrentTabId,\n    onClick: (id: string) => setPreviewCurrentTabId(id)\n  };\n\n  const previewTabContent = useMemo(() => {\n    return [\n      {\n        id: 'Details',\n        content: <Details />\n      },\n      {\n        id: 'Pulse',\n        content: <PulseMock markdownMap={pulseMarkdownMap} />\n      },\n      {\n        id: 'Accounts',\n        content: <TableDemo />\n      },\n      {\n        id: 'not found',\n        content: <h2>Not Found</h2>\n      }\n    ];\n  }, []);\n\n  const demoPrimaryFields =\n    primaryFields ||\n    [\n      {\n        name: 'Member ID',\n        value: 'M205435569FD'\n      },\n      {\n        name: 'Priority',\n        value: '95'\n      }\n    ].map((f, i) => ({ ...f, id: `p-${i}` }));\n\n  const createDate = new Date(2016, 1, 8);\n  const msInYear = 1000 * 60 * 60 * 24 * 365;\n  const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);\n\n  const demoSecondaryFields =\n    secondaryFields ||\n    [\n      {\n        name: 'Status',\n        value: <Status variant='info'>New</Status>\n      },\n      {\n        name: 'Assigned to',\n        value: 'Dean Thomas'\n      },\n      {\n        name: 'Create date',\n        value: createDate.toDateString()\n      },\n      {\n        name: 'Update date',\n        value: `${diffInYears} years ago`\n      },\n      {\n        name: 'Created by',\n        value: <MockOperatorFieldValue />\n      },\n      {\n        name: 'Previewable Case',\n        value: (\n          <Link\n            href='/cases/C-789'\n            previewable\n            onPreview={() => {\n              setPreview({ id: 'C-789', name: 'Previewable Case' });\n              setPreviewCurrentTabId('summary-C-789');\n            }}\n          >\n            Previewable Case - C-789\n          </Link>\n        )\n      }\n    ].map((f, i) => ({ ...f, id: `s-${i}` }));\n\n  const demoParentCases = useMemo(() => {\n    if (parentCases) {\n      return parentCases.map(parentCase => {\n        return {\n          ...parentCase,\n          onPreview: () => {\n            setPreview({ id: parentCase.id, name: parentCase.primary });\n            setPreviewCurrentTabId(`summary-${parentCase.id}`);\n          }\n        };\n      });\n    }\n\n    const ids = new Set([caseId]);\n\n    return Array.from({ length: 5 }, (_, i) => {\n      let id: string;\n      // Ensure parent ids are unique.\n      do {\n        id = `C-${Math.floor(Math.random() * 200 + 100)}`;\n      } while (ids.has(id));\n      ids.add(id);\n\n      const name = `Parent ${5 - i}`;\n\n      return {\n        id,\n        primary: `${name} - ${id}`,\n        href: `/cases/${id}`,\n        previewable: true,\n        onPreview: () => {\n          setPreview({ id, name });\n          setPreviewCurrentTabId(`summary-${id}`);\n        }\n      };\n    });\n  }, [caseId, parentCases]);\n\n  return (\n    <>\n      <CasePreview\n        open={!!preview}\n        caseId={preview?.id ?? ''}\n        parentCases={[...demoParentCases]\n          .splice(\n            0,\n            demoParentCases.findIndex(c => c.id === preview?.id)\n          )\n          .map(c => {\n            return { ...c, id: `preview-${c.id}` };\n          })}\n        heading={preview?.name ?? ''}\n        caseLink={{ href: `/cases/${preview?.id}`, target: '_blank' }}\n        icon={icon}\n        followed={showFollowedIcon ? !followed : undefined}\n        onEdit={action('Case Preview Edit was clicked')}\n        actions={\n          actions ||\n          Array.from({ length: 12 }, (_, i) => {\n            return {\n              text: `Action ${i + 1}`,\n              id: `${i + 1}`,\n              onClick: action(`Clicked Option Number ${i + 1}`)\n            };\n          })\n        }\n        summary={\n          <CaseSummaryFields\n            primaryFields={[\n              {\n                name: 'Member ID',\n                value: 'M204859F438G'\n              },\n              {\n                name: 'Priority',\n                value: '95'\n              }\n            ].map((f, i) => ({ ...f, id: `p-${i}` }))}\n            secondaryFields={[\n              {\n                name: 'Status',\n                value: <Status variant='info'>New</Status>\n              },\n              {\n                name: 'Assigned to',\n                value: 'Dean Thomas'\n              },\n              {\n                name: 'Create date',\n                value: createDate.toDateString()\n              },\n              {\n                name: 'Update date',\n                value: `${diffInYears} years ago`\n              }\n            ].map((f, i) => ({ ...f, id: `s-${i}` }))}\n          />\n        }\n        stages={demoStages}\n        tasks={tasksWidget}\n        tabs={previewTabs}\n        tabContent={previewTabContent}\n        utilities={\n          showUtilities ? (\n            <Grid container={{ rowGap: 2 }}>\n              <AttachmentsMock />\n              <StakeHoldersDemo />\n              <MockSummaryList icon='user-star' name='Followers' />\n              <TagsDemo />\n            </Grid>\n          ) : (\n            <Grid container={{ rowGap: 2 }}>\n              <AttachmentsMock />\n            </Grid>\n          )\n        }\n        onBeforeClose={() => {\n          // TODO: Maybe should handle syncing state to avoid additional render with duplicate prop value\n          if (preview) {\n            setPreview(null);\n          }\n        }}\n      />\n      <CaseView\n        caseId={caseId}\n        parentCases={demoParentCases}\n        heading={heading}\n        icon={icon}\n        followed={showFollowedIcon ? followed : undefined}\n        onFollowedChange={showFollowedIcon ? setFollowed : undefined}\n        actions={\n          actions ||\n          Array.from({ length: 12 }, (_, i) => {\n            return {\n              text: `Action ${i + 1}`,\n              id: `${i + 1}`,\n              onClick: action(`Clicked Option Number ${i + 1}`)\n            };\n          })\n        }\n        promotedActions={[\n          { text: 'Action 13', id: '13', onClick: action('Clicked Option Number 13') }\n        ]}\n        onEdit={action('Case View Edit was clicked')}\n        summary={\n          <CaseSummaryFields\n            primaryFields={demoPrimaryFields}\n            secondaryFields={demoSecondaryFields}\n          />\n        }\n        tabs={demoTabs}\n        banners={banners}\n        persistentUtility={persistentUtility}\n        stages={demoStages}\n        tasks={tasksWidget}\n        tabContent={demoTabContent}\n        defaultCollapsedUtilities={defaultCollapsedUtilities}\n        utilities={\n          showUtilities ? (\n            <>\n              <AttachmentsMock />\n              <StakeHoldersDemo />\n              <MockSummaryList icon='user-star' name='Followers' />\n              <TagsDemo />\n            </>\n          ) : (\n            <AttachmentsMock />\n          )\n        }\n        utilitiesSummaryItems={\n          showUtilities\n            ? [\n                { iconName: 'paper-clip', count: 4 },\n                { iconName: 'user-search-solid', count: 10 },\n                { iconName: 'user-star-solid', count: 5 },\n                { iconName: 'tag', count: 10 }\n              ]\n            : [{ iconName: 'paper-clip', count: 4 }]\n        }\n      />\n    </>\n  );\n};\n\n/*\n _____                 _   _ _                       ___              _____ _          _ _\n/  __ \\               | | | (_)                     / _ \\            /  ___| |        | | |\n| /  \\/ __ _ ___  ___ | | | |_  _____      ________/ /_\\ \\_ __  _ __ \\ `--.| |__   ___| | |\n| |    / _` / __|/ _ \\| | | | |/ _ \\ \\ /\\ / /______|  _  | '_ \\| '_ \\ `--. \\ '_ \\ / _ \\ | |\n| \\__/\\ (_| \\__ \\  __/\\ \\_/ / |  __/\\ V  V /       | | | | |_) | |_) /\\__/ / | | |  __/ | |\n \\____/\\__,_|___/\\___| \\___/|_|\\___| \\_/\\_/        \\_| |_/ .__/| .__/\\____/|_| |_|\\___|_|_|\n                                                         | |   | |\n                                                         |_|   |_|\n */\nexport const CaseViewWithAppShell: Story = (props: CaseViewStoryProps) => {\n  return <AppShellDemo appHeader main={<CaseViewDemo {...props} />} />;\n};\n\n/*\n _____                 _   _ _                      _____ _           _\n/  __ \\               | | | (_)                    /  __ \\ |         | |\n| /  \\/ __ _ ___  ___ | | | |_  _____      ________| /  \\/ |__   __ _| |_\n| |    / _` / __|/ _ \\| | | | |/ _ \\ \\ /\\ / /______| |   | '_ \\ / _` | __|\n| \\__/\\ (_| \\__ \\  __/\\ \\_/ / |  __/\\ V  V /       | \\__/\\ | | | (_| | |_\n \\____/\\__,_|___/\\___| \\___/|_|\\___| \\_/\\_/         \\____/_| |_|\\__,_|\\__|\n */\nCaseViewWithAppShell.parameters = {\n  eyes: {\n    runBefore: () => {\n      document\n        .querySelector<HTMLButtonElement>(\n          // Find the case actions menu.\n          '[aria-label=\"Actions\"]'\n        )\n        ?.click();\n    }\n  }\n};\n\nexport const CaseViewWithChat: Story = (props: CaseViewStoryProps) => {\n  return (\n    <AppShellDemo\n      appHeader\n      main={\n        <CaseViewDemo\n          persistentUtility={{ content: <StandardChat chatWidth='100%' />, title: 'Chat' }}\n          {...props}\n        />\n      }\n    />\n  );\n};\n"]}

package/jsx/work/CaseView/MobileCaseView.stories.d.ts

@@ -1,11 +1,5 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-work").MobileCaseViewProps>;
-    parameters: {
-        layout: string;
-    };
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const MobileCaseViewDemo: () => JSX.Element;
+export declare const MobileCaseViewDemo: Story;
 //# sourceMappingURL=MobileCaseView.stories.d.ts.map

package/jsx/work/CaseView/MobileCaseView.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileCaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/MobileCaseView.stories.tsx"],"names":[],"mappings":";;;;;;;;AAIA,wBAME;AAEF,eAAO,MAAM,kBAAkB,mBAyB9B,CAAC"}
+{"version":3,"file":"MobileCaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/MobileCaseView.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAI/C,wBAMU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAyBhC,CAAC"}

package/jsx/work/CaseView/MobileCaseView.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"MobileCaseView.stories.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/MobileCaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QAClD,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,IAAI,EAAE,aAAa,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE3D,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAC5C,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,cAAc,CACb,KAAK,CAAC,wBAAwB,CAC9B,IAAI,CAAC,CAAC;YACJ,IAAI;YACJ,UAAU;YACV,YAAY;SACb,CAAC,CACF,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC,EAClE,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState, useCallback } from 'react';\n\nimport { MobileCaseView } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/CaseView/Mobile',\n  component: MobileCaseView,\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nexport const MobileCaseViewDemo = () => {\n  const tabs = Array.from({ length: 2 }, (undef, i) => {\n    const key = `${i + 1}`;\n    return { name: `Hello tab ${key}`, id: key };\n  });\n\n  const [currentTabId, setCurrentTabId] = useState(tabs[0].id);\n  const [tabContent, setTabContent] = useState(tabs[0].name);\n\n  const onTabClick = useCallback((id: string) => {\n    setCurrentTabId(id);\n    setTabContent(tabs.find(tab => tab.id === id)?.name ?? '');\n  }, []);\n\n  return (\n    <MobileCaseView\n      title='Mobile Case View Story'\n      tabs={{\n        tabs,\n        onTabClick,\n        currentTabId\n      }}\n      tabContent={<div style={{ padding: '2.5rem' }}>{tabContent}</div>}\n    />\n  );\n};\n"]}
+{"version":3,"file":"MobileCaseView.stories.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/MobileCaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAAU,GAAG,EAAE;IAC5C,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QAClD,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,IAAI,EAAE,aAAa,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE3D,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAC5C,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,CAAC,cAAc,CACb,KAAK,CAAC,wBAAwB,CAC9B,IAAI,CAAC,CAAC;YACJ,IAAI;YACJ,UAAU;YACV,YAAY;SACb,CAAC,CACF,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC,EAClE,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState, useCallback } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { MobileCaseView } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/CaseView/Mobile',\n  component: MobileCaseView,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const MobileCaseViewDemo: Story = () => {\n  const tabs = Array.from({ length: 2 }, (undef, i) => {\n    const key = `${i + 1}`;\n    return { name: `Hello tab ${key}`, id: key };\n  });\n\n  const [currentTabId, setCurrentTabId] = useState(tabs[0].id);\n  const [tabContent, setTabContent] = useState(tabs[0].name);\n\n  const onTabClick = useCallback((id: string) => {\n    setCurrentTabId(id);\n    setTabContent(tabs.find(tab => tab.id === id)?.name ?? '');\n  }, []);\n\n  return (\n    <MobileCaseView\n      title='Mobile Case View Story'\n      tabs={{\n        tabs,\n        onTabClick,\n        currentTabId\n      }}\n      tabContent={<div style={{ padding: '2.5rem' }}>{tabContent}</div>}\n    />\n  );\n};\n"]}

package/jsx/work/CaseView/Pulse.mocks.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { MDMap } from '@pega/cosmos-react-rte';
-export declare const PulseMock: ({ markdownMap }: {
-    markdownMap?: MDMap | undefined;
+import { FeedProps } from '@pega/cosmos-react-social/lib/components/Feed/Feed';
+export declare const PulseMock: ({ markdownMap, onMentionPreview }: {
+    markdownMap?: FeedProps['markdownMap'];
+    onMentionPreview?: FeedProps['onMentionPreview'];
 }) => JSX.Element;
 //# sourceMappingURL=Pulse.mocks.d.ts.map

package/jsx/work/CaseView/Pulse.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pulse.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAM/C,eAAO,MAAM,SAAS;;iBAiDrB,CAAC"}
+{"version":3,"file":"Pulse.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,oDAAoD,CAAC;AAM/E,eAAO,MAAM,SAAS;kBAIN,SAAS,CAAC,aAAa,CAAC;uBACnB,SAAS,CAAC,kBAAkB,CAAC;iBAoDjD,CAAC"}

package/jsx/work/CaseView/Pulse.mocks.jsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { Tabs, TabPanel, Flex, Table, Card, CardContent } from '@pega/cosmos-react-core';
 import { FeedDemo } from '../../social/Feed/Feed.stories';
 const msInHour = 60 * 60 * 1000;
-export const PulseMock = ({ markdownMap }) => {
+export const PulseMock = ({ markdownMap, onMentionPreview }) => {
     const [currentTab, setCurrentTab] = useState('pulse');
     const historyData = useMemo(() => Array.from({ length: 37 }, (_, i) => {
         return {
@@ -19,7 +19,7 @@ export const PulseMock = ({ markdownMap }) => {
         ]} currentTabId={currentTab} onTabClick={setCurrentTab}/>
 
       <TabPanel tabId={currentTab}>
-        {currentTab === 'pulse' && <FeedDemo markdownMap={markdownMap}/>}
+        {currentTab === 'pulse' && (<FeedDemo markdownMap={markdownMap} onMentionPreview={onMentionPreview}/>)}
         {currentTab === 'history' && (<Card>
             <CardContent>
               <Table title='History' data={historyData} columns={[

package/jsx/work/CaseView/Pulse.mocks.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Pulse.mocks.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,WAAW,EAA2B,EAAE,EAAE;IACpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAClC,OAAO;YACL,EAAE,EAAE,CAAC;YACL,IAAI,EAAE,IAAI,IAAI,CACZ,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,QAAQ,GAAG,QAAQ,CACzE,CAAC,cAAc,EAAE;YAClB,WAAW,EAAE,gCAAgC,CAAC,GAAG,CAAC,EAAE;YACpD,WAAW,EAAE,iBAAiB;SAC/B,CAAC;IACJ,CAAC,CAAC,EACJ,EAAE,CACH,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,IAAI,CAAC,CAAC;YACJ,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;YAC9B,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;SACnC,CAAC,CACF,YAAY,CAAC,CAAC,UAAU,CAAC,CACzB,UAAU,CAAC,CAAC,aAAa,CAAC,EAG5B;;MAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAC1B;QAAA,CAAC,UAAU,KAAK,OAAO,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,EAAG,CACjE;QAAA,CAAC,UAAU,KAAK,SAAS,IAAI,CAC3B,CAAC,IAAI,CACH;YAAA,CAAC,WAAW,CACV;cAAA,CAAC,KAAK,CACJ,KAAK,CAAC,SAAS,CACf,IAAI,CAAC,CAAC,WAAW,CAAC,CAClB,OAAO,CAAC,CAAC;gBACP,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;gBACnC,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;gBACjD,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE;aACnD,CAAC,EAEN;YAAA,EAAE,WAAW,CACf;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,QAAQ,CACZ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useMemo, useState } from 'react';\n\nimport { Tabs, TabPanel, Flex, Table, Card, CardContent } from '@pega/cosmos-react-core';\nimport { MDMap } from '@pega/cosmos-react-rte';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\n\nconst msInHour = 60 * 60 * 1000;\n\nexport const PulseMock = ({ markdownMap }: { markdownMap?: MDMap }) => {\n  const [currentTab, setCurrentTab] = useState('pulse');\n\n  const historyData = useMemo(\n    () =>\n      Array.from({ length: 37 }, (_, i) => {\n        return {\n          id: i,\n          date: new Date(\n            Date.now() - i * 24 * msInHour + Math.random() * 2 * msInHour - msInHour\n          ).toLocaleString(),\n          description: `Description for history item ${i + 1}`,\n          performedBy: 'Cosmos Operator'\n        };\n      }),\n    []\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Tabs\n        tabs={[\n          { id: 'pulse', name: 'Pulse' },\n          { id: 'history', name: 'History' }\n        ]}\n        currentTabId={currentTab}\n        onTabClick={setCurrentTab}\n      />\n\n      <TabPanel tabId={currentTab}>\n        {currentTab === 'pulse' && <FeedDemo markdownMap={markdownMap} />}\n        {currentTab === 'history' && (\n          <Card>\n            <CardContent>\n              <Table\n                title='History'\n                data={historyData}\n                columns={[\n                  { renderer: 'date', label: 'Date' },\n                  { renderer: 'description', label: 'Description' },\n                  { renderer: 'performedBy', label: 'Performed By' }\n                ]}\n              />\n            </CardContent>\n          </Card>\n        )}\n      </TabPanel>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"Pulse.mocks.jsx","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,WAAW,EACX,gBAAgB,EAIjB,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAClC,OAAO;YACL,EAAE,EAAE,CAAC;YACL,IAAI,EAAE,IAAI,IAAI,CACZ,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,QAAQ,GAAG,QAAQ,CACzE,CAAC,cAAc,EAAE;YAClB,WAAW,EAAE,gCAAgC,CAAC,GAAG,CAAC,EAAE;YACpD,WAAW,EAAE,iBAAiB;SAC/B,CAAC;IACJ,CAAC,CAAC,EACJ,EAAE,CACH,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,IAAI,CAAC,CAAC;YACJ,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;YAC9B,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;SACnC,CAAC,CACF,YAAY,CAAC,CAAC,UAAU,CAAC,CACzB,UAAU,CAAC,CAAC,aAAa,CAAC,EAG5B;;MAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAC1B;QAAA,CAAC,UAAU,KAAK,OAAO,IAAI,CACzB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAC3E,CACD;QAAA,CAAC,UAAU,KAAK,SAAS,IAAI,CAC3B,CAAC,IAAI,CACH;YAAA,CAAC,WAAW,CACV;cAAA,CAAC,KAAK,CACJ,KAAK,CAAC,SAAS,CACf,IAAI,CAAC,CAAC,WAAW,CAAC,CAClB,OAAO,CAAC,CAAC;gBACP,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;gBACnC,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;gBACjD,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE;aACnD,CAAC,EAEN;YAAA,EAAE,WAAW,CACf;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,QAAQ,CACZ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useMemo, useState } from 'react';\n\nimport { Tabs, TabPanel, Flex, Table, Card, CardContent } from '@pega/cosmos-react-core';\nimport { FeedProps } from '@pega/cosmos-react-social/lib/components/Feed/Feed';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\n\nconst msInHour = 60 * 60 * 1000;\n\nexport const PulseMock = ({\n  markdownMap,\n  onMentionPreview\n}: {\n  markdownMap?: FeedProps['markdownMap'];\n  onMentionPreview?: FeedProps['onMentionPreview'];\n}) => {\n  const [currentTab, setCurrentTab] = useState('pulse');\n\n  const historyData = useMemo(\n    () =>\n      Array.from({ length: 37 }, (_, i) => {\n        return {\n          id: i,\n          date: new Date(\n            Date.now() - i * 24 * msInHour + Math.random() * 2 * msInHour - msInHour\n          ).toLocaleString(),\n          description: `Description for history item ${i + 1}`,\n          performedBy: 'Cosmos Operator'\n        };\n      }),\n    []\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Tabs\n        tabs={[\n          { id: 'pulse', name: 'Pulse' },\n          { id: 'history', name: 'History' }\n        ]}\n        currentTabId={currentTab}\n        onTabClick={setCurrentTab}\n      />\n\n      <TabPanel tabId={currentTab}>\n        {currentTab === 'pulse' && (\n          <FeedDemo markdownMap={markdownMap} onMentionPreview={onMentionPreview} />\n        )}\n        {currentTab === 'history' && (\n          <Card>\n            <CardContent>\n              <Table\n                title='History'\n                data={historyData}\n                columns={[\n                  { renderer: 'date', label: 'Date' },\n                  { renderer: 'description', label: 'Description' },\n                  { renderer: 'performedBy', label: 'Performed By' }\n                ]}\n              />\n            </CardContent>\n          </Card>\n        )}\n      </TabPanel>\n    </Flex>\n  );\n};\n"]}