@pega/cosmos-react-demos 5.0.0-dev.1.0 → 5.0.0-dev.10.1

package/jsx/social/Feed/FeedReply.mocks.jsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
-import { Avatar, useUID } from '@pega/cosmos-react-core';
-import { FeedReply } from '@pega/cosmos-react-social';
+import { Avatar, useElement, useUID } from '@pega/cosmos-react-core';
+import { AutopilotGlimpse, FeedReply } from '@pega/cosmos-react-social';
 import { Glimpse } from '@pega/cosmos-react-work';
 import { feedUserGlimpseDetails } from './Feed.mocks';
 export const FeedReplyDemo = ({ fullname, username, content, attachments, postTimestamp = new Date(2022, 0, 1), userStatus }) => {
@@ -11,8 +11,8 @@ export const FeedReplyDemo = ({ fullname, username, content, attachments, postTi
     const [replyContent, setReplyContent] = useState(content);
     const [edited, setEdited] = useState(false);
     const [editTimestamp, setEditTimestamp] = useState(new Date());
-    const [glimpseData, setGlimpseData] = useState();
-    const [glimpseTarget, setGlimpseTarget] = useState();
+    const [glimpseContent, setGlimpseContent] = useState();
+    const [glimpseTarget, setGlimpseTarget] = useElement(null);
     const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);
     const getInitialLikes = () => {
         if (likes.length)
@@ -38,6 +38,24 @@ export const FeedReplyDemo = ({ fullname, username, content, attachments, postTi
             }, 1000);
         }
     }, [likesLoading]);
+    const onUserClick = ({ username: glimpseUsername }, clickEvent) => {
+        if (clickEvent) {
+            setGlimpseTarget(clickEvent.target);
+            if (glimpseUsername === 'autopilot') {
+                setGlimpseContent(<AutopilotGlimpse target={clickEvent.target} onDismiss={() => {
+                        setGlimpseTarget(null);
+                    }} placement='right'/>);
+            }
+            else {
+                const userDetails = feedUserGlimpseDetails.find(x => x.username === glimpseUsername);
+                if (userDetails) {
+                    setGlimpseContent(<Glimpse {...userDetails} target={clickEvent.target} onDismiss={() => {
+                            setGlimpseTarget(null);
+                        }} placement='right'/>);
+                }
+            }
+        }
+    };
     return (<>
       <FeedReply id={key} key={key} postTimestamp={postTimestamp} content={replyContent} attachments={attachments} username={username} fullname={fullname} liked={liked} userStatus={userStatus} likes={likes} likeCount={likeCount >= 10 ? likeCount + 1 : likeCount} maxContentHeight={40} menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => { } }]} onEditSubmit={({ value }) => {
             setReplyContent(value);
@@ -58,19 +76,8 @@ export const FeedReplyDemo = ({ fullname, username, content, attachments, postTi
                 setLikeCount(curr => curr + 1);
             }
             setLiked(curr => !curr);
-        }} onLikeCountInteraction={getInitialLikes} onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined} likesLoading={likesLoading} onUserClick={({ username: glimpseUsername }, clickEvent) => {
-            if (clickEvent) {
-                setGlimpseTarget(clickEvent.target);
-                setGlimpseData(curr => {
-                    if (curr)
-                        return undefined;
-                    return feedUserGlimpseDetails.find(x => x.username === glimpseUsername);
-                });
-            }
-        }}/>
-      {glimpseTarget && glimpseData && (<Glimpse {...glimpseData} target={glimpseTarget} onDismiss={() => {
-                setGlimpseData(undefined);
-            }} placement='right'/>)}
+        }} onLikeCountInteraction={getInitialLikes} onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined} likesLoading={likesLoading} onUserClick={onUserClick}/>
+      {glimpseTarget && glimpseContent}
     </>);
 };
 //# sourceMappingURL=FeedReply.mocks.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedReply.mocks.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReply.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, useCallback } from 'react';\n\nimport { Avatar, useUID } from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport { FeedReply } from '@pega/cosmos-react-social';\nimport type { FeedReplyProps } from '@pega/cosmos-react-social';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nimport { feedUserGlimpseDetails } from './Feed.mocks';\nimport type { FeedUserGlimpse } from './Feed.mocks';\n\ninterface FeedReplyDemoProps {\n  fullname: FeedReplyProps['fullname'];\n  username: FeedReplyProps['username'];\n  content: FeedReplyProps['content'];\n  attachments?: FeedReplyProps['attachments'];\n  postTimestamp?: FeedReplyProps['postTimestamp'];\n  userStatus?: FeedReplyProps['userStatus'];\n}\n\nexport const FeedReplyDemo = ({\n  fullname,\n  username,\n  content,\n  attachments,\n  postTimestamp = new Date(2022, 0, 1),\n  userStatus\n}: FeedReplyDemoProps) => {\n  const key = useUID();\n  const [likes, setLikes] = useState<MenuItemProps[]>([]);\n  const [liked, setLiked] = useState(false);\n  const [likeCount, setLikeCount] = useState(0);\n  const [replyContent, setReplyContent] = useState(content);\n  const [edited, setEdited] = useState(false);\n  const [editTimestamp, setEditTimestamp] = useState(new Date());\n  const [glimpseData, setGlimpseData] = useState<FeedUserGlimpse | undefined>();\n  const [glimpseTarget, setGlimpseTarget] = useState<HTMLElement>();\n  const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);\n\n  const getInitialLikes = () => {\n    if (likes.length) return;\n\n    setLikes([]);\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  return (\n    <>\n      <FeedReply\n        id={key}\n        key={key}\n        postTimestamp={postTimestamp}\n        content={replyContent}\n        attachments={attachments}\n        username={username}\n        fullname={fullname}\n        liked={liked}\n        userStatus={userStatus}\n        likes={likes}\n        likeCount={likeCount >= 10 ? likeCount + 1 : likeCount}\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={({ username: glimpseUsername }, clickEvent) => {\n          if (clickEvent) {\n            setGlimpseTarget(clickEvent.target as HTMLElement);\n            setGlimpseData(curr => {\n              if (curr) return undefined;\n              return feedUserGlimpseDetails.find(x => x.username === glimpseUsername);\n            });\n          }\n        }}\n      />\n      {glimpseTarget && glimpseData && (\n        <Glimpse\n          {...glimpseData}\n          target={glimpseTarget}\n          onDismiss={() => {\n            setGlimpseData(undefined);\n          }}\n          placement='right'\n        />\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"FeedReply.mocks.jsx","sourceRoot":"","sources":["../../../src/social/Feed/FeedReply.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAWtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,aAAa,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EACpC,UAAU,EACS,EAAE,EAAE;IACvB,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IACxD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IAC/D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAyB,CAAC;IAC9E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,UAAU,CAAc,IAAI,CAAC,CAAC;IACxE,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtE,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,KAAK,CAAC,MAAM;YAAE,OAAO;QAEzB,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,YAAY,EAAE;YACjB,eAAe,CAAC,IAAI,CAAC,CAAC;YACtB,UAAU,CAAC,GAAG,EAAE;gBACd,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;oBACnB,GAAG,QAAQ;oBACX;wBACE,OAAO,EAAE,gBAAgB;wBACzB,SAAS,EAAE,CAAC,6DAA6D,CAAC;wBAC1E,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAG;wBACjD,EAAE,EAAE,eAAe;qBACpB;iBACF,CAAC,CAAC;gBACH,sBAAsB,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,WAAW,GAAkC,CACjD,EAAE,QAAQ,EAAE,eAAe,EAAE,EAC7B,UAAU,EACV,EAAE;QACF,IAAI,UAAU,EAAE;YACd,gBAAgB,CAAC,UAAU,CAAC,MAAqB,CAAC,CAAC;YACnD,IAAI,eAAe,KAAK,WAAW,EAAE;gBACnC,iBAAiB,CACf,CAAC,gBAAgB,CACf,MAAM,CAAC,CAAC,UAAU,CAAC,MAAqB,CAAC,CACzC,SAAS,CAAC,CAAC,GAAG,EAAE;wBACd,gBAAgB,CAAC,IAAI,CAAC,CAAC;oBACzB,CAAC,CAAC,CACF,SAAS,CAAC,OAAO,EACjB,CACH,CAAC;aACH;iBAAM;gBACL,MAAM,WAAW,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,eAAe,CAAC,CAAC;gBACrF,IAAI,WAAW,EAAE;oBACf,iBAAiB,CACf,CAAC,OAAO,CACN,IAAI,WAAW,CAAC,CAChB,MAAM,CAAC,CAAC,UAAU,CAAC,MAAqB,CAAC,CACzC,SAAS,CAAC,CAAC,GAAG,EAAE;4BACd,gBAAgB,CAAC,IAAI,CAAC,CAAC;wBACzB,CAAC,CAAC,CACF,SAAS,CAAC,OAAO,EACjB,CACH,CAAC;iBACH;aACF;SACF;IACH,CAAC,CAAC;IAEF,OAAO,CACL,EACE;MAAA,CAAC,SAAS,CACR,EAAE,CAAC,CAAC,GAAG,CAAC,CACR,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,OAAO,CAAC,CAAC,YAAY,CAAC,CACtB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,SAAS,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CACvD,gBAAgB,CAAC,CAAC,EAAE,CAAC,CACrB,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,CAAC,CAAC,CAC3E,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;YAC1B,eAAe,CAAC,KAAK,CAAC,CAAC;YACvB,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,gBAAgB,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;QAC/B,CAAC,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,cAAc,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CACzB,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;YACxB,MAAM,cAAc,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;YAC9D,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE;gBACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE;oBAClB,MAAM,WAAW,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;oBAClC,WAAW,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;oBACtC,OAAO,WAAW,CAAC;gBACrB,CAAC,CAAC,CAAC;gBACH,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aAChC;iBAAM;gBACL,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC;gBAC1C,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aAChC;YACD,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,CAAC,CACF,sBAAsB,CAAC,CAAC,eAAe,CAAC,CACxC,eAAe,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CACpE,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,WAAW,CAAC,CAAC,WAAW,CAAC,EAE3B;MAAA,CAAC,aAAa,IAAI,cAAc,CAClC;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState, useCallback } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { Avatar, useElement, useUID } from '@pega/cosmos-react-core';\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport { AutopilotGlimpse, FeedReply } from '@pega/cosmos-react-social';\nimport type { FeedReplyProps } from '@pega/cosmos-react-social';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nimport { feedUserGlimpseDetails } from './Feed.mocks';\n\ninterface FeedReplyDemoProps {\n  fullname: FeedReplyProps['fullname'];\n  username: FeedReplyProps['username'];\n  content: FeedReplyProps['content'];\n  attachments?: FeedReplyProps['attachments'];\n  postTimestamp?: FeedReplyProps['postTimestamp'];\n  userStatus?: FeedReplyProps['userStatus'];\n}\n\nexport const FeedReplyDemo = ({\n  fullname,\n  username,\n  content,\n  attachments,\n  postTimestamp = new Date(2022, 0, 1),\n  userStatus\n}: FeedReplyDemoProps) => {\n  const key = useUID();\n  const [likes, setLikes] = useState<MenuItemProps[]>([]);\n  const [liked, setLiked] = useState(false);\n  const [likeCount, setLikeCount] = useState(0);\n  const [replyContent, setReplyContent] = useState(content);\n  const [edited, setEdited] = useState(false);\n  const [editTimestamp, setEditTimestamp] = useState(new Date());\n  const [glimpseContent, setGlimpseContent] = useState<ReactNode | undefined>();\n  const [glimpseTarget, setGlimpseTarget] = useElement<HTMLElement>(null);\n  const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);\n\n  const getInitialLikes = () => {\n    if (likes.length) return;\n\n    setLikes([]);\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 onUserClick: FeedReplyProps['onUserClick'] = (\n    { username: glimpseUsername },\n    clickEvent\n  ) => {\n    if (clickEvent) {\n      setGlimpseTarget(clickEvent.target as HTMLElement);\n      if (glimpseUsername === 'autopilot') {\n        setGlimpseContent(\n          <AutopilotGlimpse\n            target={clickEvent.target as HTMLElement}\n            onDismiss={() => {\n              setGlimpseTarget(null);\n            }}\n            placement='right'\n          />\n        );\n      } else {\n        const userDetails = feedUserGlimpseDetails.find(x => x.username === glimpseUsername);\n        if (userDetails) {\n          setGlimpseContent(\n            <Glimpse\n              {...userDetails}\n              target={clickEvent.target as HTMLElement}\n              onDismiss={() => {\n                setGlimpseTarget(null);\n              }}\n              placement='right'\n            />\n          );\n        }\n      }\n    }\n  };\n\n  return (\n    <>\n      <FeedReply\n        id={key}\n        key={key}\n        postTimestamp={postTimestamp}\n        content={replyContent}\n        attachments={attachments}\n        username={username}\n        fullname={fullname}\n        liked={liked}\n        userStatus={userStatus}\n        likes={likes}\n        likeCount={likeCount >= 10 ? likeCount + 1 : likeCount}\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={onUserClick}\n      />\n      {glimpseTarget && glimpseContent}\n    </>\n  );\n};\n"]}

package/jsx/work/Article/Article.mocks.d.ts

@@ -1,13 +1,17 @@
 export declare const ArticleMockData: {
     fullArticleContent: {
+        articleId: string;
         header: string;
         abstract: string;
         content: string;
         meta: {
             category: string;
             publishedDate: string;
+        };
+        feedback: {
             likes: number;
             disLikes: number;
+            reaction: undefined;
         };
     };
 };

package/jsx/work/Article/Article.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Article.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Article/Article.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;;;;;;CAc3B,CAAC"}
+{"version":3,"file":"Article.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Article/Article.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;CAkB3B,CAAC"}

package/jsx/work/Article/Article.mocks.js

@@ -1,13 +1,17 @@
 export const ArticleMockData = {
     fullArticleContent: {
+        articleId: '1',
         header: 'How to change monthly billing cycle',
         abstract: 'How to change monthly billing cycle. This will give you clear guidelines to change billing cycle',
         content: "<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them.  U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month.  This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><div><b>Before you change your billing cycle, be aware that:</b> </div><ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>",
         meta: {
             category: 'Banking and Retail',
-            publishedDate: '2023-04-06',
-            likes: 124,
-            disLikes: 47
+            publishedDate: '2023-04-06'
+        },
+        feedback: {
+            likes: 312,
+            disLikes: 42,
+            reaction: undefined
         }
     }
 };

package/jsx/work/Article/Article.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Article.mocks.js","sourceRoot":"","sources":["../../../src/work/Article/Article.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,kBAAkB,EAAE;QAClB,MAAM,EAAE,qCAAqC;QAC7C,QAAQ,EACN,kGAAkG;QACpG,OAAO,EACL,k9EAAk9E;QACp9E,IAAI,EAAE;YACJ,QAAQ,EAAE,oBAAoB;YAC9B,aAAa,EAAE,YAAY;YAC3B,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE,EAAE;SACb;KACF;CACF,CAAC","sourcesContent":["export const ArticleMockData = {\n  fullArticleContent: {\n    header: 'How to change monthly billing cycle',\n    abstract:\n      'How to change monthly billing cycle. This will give you clear guidelines to change billing cycle',\n    content:\n      \"<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them.  U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month.  This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><div><b>Before you change your billing cycle, be aware that:</b> </div><ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>\",\n    meta: {\n      category: 'Banking and Retail',\n      publishedDate: '2023-04-06',\n      likes: 124,\n      disLikes: 47\n    }\n  }\n};\n"]}
+{"version":3,"file":"Article.mocks.js","sourceRoot":"","sources":["../../../src/work/Article/Article.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,kBAAkB,EAAE;QAClB,SAAS,EAAE,GAAG;QACd,MAAM,EAAE,qCAAqC;QAC7C,QAAQ,EACN,kGAAkG;QACpG,OAAO,EACL,k9EAAk9E;QACp9E,IAAI,EAAE;YACJ,QAAQ,EAAE,oBAAoB;YAC9B,aAAa,EAAE,YAAY;SAC5B;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE,EAAE;YACZ,QAAQ,EAAE,SAAS;SACpB;KACF;CACF,CAAC","sourcesContent":["export const ArticleMockData = {\n  fullArticleContent: {\n    articleId: '1',\n    header: 'How to change monthly billing cycle',\n    abstract:\n      'How to change monthly billing cycle. This will give you clear guidelines to change billing cycle',\n    content:\n      \"<p>Changing your monthly billing cycle can help you better manage your monthly bills and when you pay them.  U+Comm offers 3 main billing cycles with due dates falling on the 1st, 15th, or the 28th of each month.  This provides our customers with flexibility when choosing a billing cycle and corresponding due date that matches your personal finance planning.If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p><div>Find more details from this article <a data-article-id='5' href='#'>How to sell a product</a></div><div>Find some suggestions from this article <a data-article-id='8' href='#'>How to convince a customer</a></div><div><b>Before you change your billing cycle, be aware that:</b> </div><ul><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li><li>Your billing cycle can't be changed if your account is in a delinquent status, or if the account will fall delinquent before the requested change date.</li><li>If you have a payment arrangement set up, the payment arrangement must be made before the billing cycle is changed.</li><li>If you have AutoPay, you may see two AutoPay drafts in one month due to the billing cycle change.</li><li>When a billing cycle change is made, prorated charges will occur.</li></ul><p>If you change an existing bill cycle, there will generally be a number of days prorated to compensate from the gap from the end of the previous bill cycle to when the new bill cycle is started.  This proration will be included in your next (new) billing cycle statement, and will cause an increase in that month’s payment due.  But rest assured, you’re not being charged ‘extra’, but paying for the days that were between the old and new billing cycle dates.</p>\",\n    meta: {\n      category: 'Banking and Retail',\n      publishedDate: '2023-04-06'\n    },\n    feedback: {\n      likes: 312,\n      disLikes: 42,\n      reaction: undefined\n    }\n  }\n};\n"]}

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

@@ -14,4 +14,5 @@ export interface ArticleDemoProps {
     showAttachments: boolean;
 }
 export declare const ArticleStory: StoryFn<ArticleDemoProps>;
+export declare const ArticleRatingDemo: StoryFn;
 //# sourceMappingURL=Article.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Article.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Article/Article.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AActD,wBAOU;AAEV,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAgMlD,CAAC"}
+{"version":3,"file":"Article.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Article/Article.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAatD,wBAOU;AAEV,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAsNlD,CAAC;AA4BF,eAAO,MAAM,iBAAiB,EAAE,OA8C/B,CAAC"}

package/jsx/work/Article/Article.stories.jsx

@@ -1,14 +1,12 @@
 import { useEffect, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { registerIcon, createUID, HTML } from '@pega/cosmos-react-core';
+import { registerIcon, createUID, HTML, Flex } from '@pega/cosmos-react-core';
 import * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';
 import * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';
 import * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';
-import * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';
-import * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';
-import { Article, ArticleFooter } from '@pega/cosmos-react-work';
+import { Article, ArticleFooter, ArticleRating } from '@pega/cosmos-react-work';
 import { ArticleMockData } from './Article.mocks';
-registerIcon(openIcon, starIcon, caretLeftIcon, thumbsUpSolidIcon, thumbsDownSolidIcon);
+registerIcon(openIcon, starIcon, caretLeftIcon);
 export default {
     title: 'Work/Article',
     component: Article,
@@ -18,40 +16,50 @@ export default {
     }
 };
 export const ArticleStory = (args) => {
-    const [feedbackStatus, setFeedbackStatus] = useState();
-    const [showFeedbackThanks, setShowFeedbackThanks] = useState(false);
     const [loading, setLoading] = useState(true);
+    const [likeCount, setLikeCount] = useState(ArticleMockData.fullArticleContent.feedback.likes);
+    const [dislikeCount, setDislikeCount] = useState(ArticleMockData.fullArticleContent.feedback.disLikes);
+    const [reaction, setReaction] = useState(ArticleMockData.fullArticleContent.feedback.reaction);
     const { showHeader, backButtonText, showPrimaryActions, showSecondaryActions, showFooter, enableFeedback, showTags, showRelatedLinks, showMoreLikeThis, showAttachments } = args;
     const onBackToArticlesClick = (event) => {
         event.preventDefault();
     };
-    const onFeedbackClick = button => {
-        if (button === 'like') {
-            if (feedbackStatus === 'liked') {
-                setFeedbackStatus(undefined);
-            }
-            else {
-                setFeedbackStatus('liked');
-                setShowFeedbackThanks(true);
-            }
-        }
-        else if (feedbackStatus === 'disliked') {
-            setFeedbackStatus(undefined);
-        }
-        else {
-            setFeedbackStatus('disliked');
-            setShowFeedbackThanks(true);
-        }
-    };
     useEffect(() => {
         setTimeout(() => {
             setLoading(false);
         }, 2000);
     }, []);
+    const onReaction = (id, reactionParam) => {
+        action('onReaction')(id);
+        if (reactionParam === 'liked') {
+            setReaction('liked');
+            setLikeCount(prev => prev + 1);
+            if (reaction === 'disliked') {
+                setDislikeCount(prev => prev - 1);
+            }
+            return;
+        }
+        if (reactionParam === 'disliked') {
+            setReaction('disliked');
+            setDislikeCount(prev => prev + 1);
+            if (reaction === 'liked') {
+                setLikeCount(prev => prev - 1);
+            }
+        }
+        if (reactionParam === undefined) {
+            if (reaction === 'liked') {
+                setLikeCount(prev => prev - 1);
+            }
+            else {
+                setDislikeCount(prev => prev - 1);
+            }
+            setReaction(undefined);
+        }
+    };
     return (<div style={{
             maxWidth: '25rem'
         }}>
-      <Article header={showHeader
+      <Article articleId={ArticleMockData.fullArticleContent.articleId} header={showHeader
             ? {
                 title: 'Knowledge articles',
                 icon: 'book-open'
@@ -93,18 +101,19 @@ export const ArticleStory = (args) => {
             ]
             : undefined} content={<HTML content={ArticleMockData.fullArticleContent.content}/>} title={ArticleMockData.fullArticleContent.header} meta={{
             category: ArticleMockData.fullArticleContent.meta.category,
-            publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate,
-            feedback: {
-                likes: ArticleMockData.fullArticleContent.meta.likes,
-                dislikes: ArticleMockData.fullArticleContent.meta.disLikes
-            }
+            publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate
+        }} feedback={{
+            likes: (likeCount * 100) / (likeCount + dislikeCount),
+            dislikes: (dislikeCount * 100) / (likeCount + dislikeCount),
+            reaction,
+            onReaction
         }} footer={showFooter
             ? {
                 feedback: enableFeedback
                     ? {
-                        showThanksMessage: showFeedbackThanks,
-                        status: feedbackStatus,
-                        onFeedbackClick
+                        onReaction,
+                        showThanksMessage: !!reaction,
+                        reaction
                     }
                     : undefined,
                 tags: showTags
@@ -198,4 +207,38 @@ ArticleStory.argTypes = {
     showMoreLikeThis: { control: { type: 'boolean' } },
     showAttachments: { control: { type: 'boolean' } }
 };
+export const ArticleRatingDemo = () => {
+    const [likeCount, setLikeCount] = useState(5);
+    const [dislikeCount, setDislikeCount] = useState(2);
+    const [reaction, setReaction] = useState();
+    const onReaction = reactionParam => {
+        if (reactionParam === 'liked') {
+            setReaction('liked');
+            setLikeCount(prev => prev + 1);
+            if (reaction === 'disliked') {
+                setDislikeCount(prev => prev - 1);
+            }
+            return;
+        }
+        if (reactionParam === 'disliked') {
+            setReaction('disliked');
+            setDislikeCount(prev => prev + 1);
+            if (reaction === 'liked') {
+                setLikeCount(prev => prev - 1);
+            }
+        }
+        if (reactionParam === undefined) {
+            if (reaction === 'liked') {
+                setLikeCount(prev => prev - 1);
+            }
+            else {
+                setDislikeCount(prev => prev - 1);
+            }
+            setReaction(undefined);
+        }
+    };
+    return (<Flex container={{ pad: [1, 1] }}>
+      <ArticleRating likes={(likeCount * 100) / (likeCount + dislikeCount)} dislikes={(dislikeCount * 100) / (likeCount + dislikeCount)} onReaction={onReaction} reaction={reaction}/>
+    </Flex>);
+};
 //# sourceMappingURL=Article.stories.jsx.map

package/jsx/work/Article/Article.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Article.stories.jsx","sourceRoot":"","sources":["../../../src/work/Article/Article.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport type { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { registerIcon, createUID, HTML } from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as thumbsUpSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-up-solid.icon';\nimport * as thumbsDownSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/thumbs-down-solid.icon';\nimport { Article, ArticleFooter, ArticleFooterProps } from '@pega/cosmos-react-work';\n\nimport { ArticleMockData } from './Article.mocks';\n\nregisterIcon(openIcon, starIcon, caretLeftIcon, thumbsUpSolidIcon, thumbsDownSolidIcon);\n\nexport default {\n  title: 'Work/Article',\n  component: Article,\n  subcomponents: { ArticleFooter },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface ArticleDemoProps {\n  showHeader: boolean;\n  backButtonText: string;\n  showPrimaryActions: boolean;\n  showSecondaryActions: boolean;\n  showFooter: boolean;\n  enableFeedback: boolean;\n  showTags: boolean;\n  showRelatedLinks: boolean;\n  showMoreLikeThis: boolean;\n  showAttachments: boolean;\n}\n\nexport const ArticleStory: StoryFn<ArticleDemoProps> = (args: ArticleDemoProps) => {\n  const [feedbackStatus, setFeedbackStatus] =\n    useState<Required<ArticleFooterProps>['feedback']['status']>();\n  const [showFeedbackThanks, setShowFeedbackThanks] = useState<boolean>(false);\n  const [loading, setLoading] = useState<boolean>(true);\n\n  const {\n    showHeader,\n    backButtonText,\n    showPrimaryActions,\n    showSecondaryActions,\n    showFooter,\n    enableFeedback,\n    showTags,\n    showRelatedLinks,\n    showMoreLikeThis,\n    showAttachments\n  } = args;\n\n  const onBackToArticlesClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const onFeedbackClick: Required<ArticleFooterProps>['feedback']['onFeedbackClick'] = button => {\n    if (button === 'like') {\n      if (feedbackStatus === 'liked') {\n        setFeedbackStatus(undefined);\n      } else {\n        setFeedbackStatus('liked');\n        setShowFeedbackThanks(true);\n      }\n    } else if (feedbackStatus === 'disliked') {\n      setFeedbackStatus(undefined);\n    } else {\n      setFeedbackStatus('disliked');\n      setShowFeedbackThanks(true);\n    }\n  };\n\n  useEffect(() => {\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  }, []);\n\n  return (\n    <div\n      style={{\n        maxWidth: '25rem'\n      }}\n    >\n      <Article\n        header={\n          showHeader\n            ? {\n                title: 'Knowledge articles',\n                icon: 'book-open'\n              }\n            : undefined\n        }\n        backNavigation={{\n          title: backButtonText,\n          onClick: onBackToArticlesClick\n        }}\n        primaryActions={\n          showPrimaryActions\n            ? [\n                {\n                  icon: 'star',\n                  label: 'Follow',\n                  id: createUID(),\n                  onClick: id => {\n                    action('Follow')(id);\n                  }\n                },\n                {\n                  icon: 'open',\n                  label: 'Open',\n                  id: createUID(),\n                  onClick: id => {\n                    action('Open')(id);\n                  }\n                }\n              ]\n            : undefined\n        }\n        secondaryActions={\n          showSecondaryActions\n            ? [\n                {\n                  text: 'Send in email',\n                  id: 'action1',\n                  onClick: action('Action')\n                },\n                {\n                  text: 'Send in chat',\n                  id: 'action2',\n                  onClick: action('Action')\n                }\n              ]\n            : undefined\n        }\n        content={<HTML content={ArticleMockData.fullArticleContent.content} />}\n        title={ArticleMockData.fullArticleContent.header}\n        meta={{\n          category: ArticleMockData.fullArticleContent.meta.category,\n          publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate,\n          feedback: {\n            likes: ArticleMockData.fullArticleContent.meta.likes,\n            dislikes: ArticleMockData.fullArticleContent.meta.disLikes\n          }\n        }}\n        footer={\n          showFooter\n            ? {\n                feedback: enableFeedback\n                  ? {\n                      showThanksMessage: showFeedbackThanks,\n                      status: feedbackStatus,\n                      onFeedbackClick\n                    }\n                  : undefined,\n                tags: showTags\n                  ? {\n                      list: [\n                        {\n                          id: 'Retail banking',\n                          tagName: '#Retail_banking'\n                        },\n                        {\n                          id: 'Billing',\n                          tagName: '#Billing'\n                        },\n                        {\n                          id: '223444',\n                          tagName: '#CSR_Skills'\n                        },\n                        {\n                          id: '223446',\n                          tagName: '#Premium_Customers'\n                        },\n                        {\n                          id: '223447',\n                          tagName: '#Rare_Customers'\n                        },\n                        {\n                          id: '223448',\n                          tagName: '#Finance_Customers'\n                        }\n                      ],\n                      onTagClick: action('Tag clicked')\n                    }\n                  : undefined,\n                relatedLinks: showRelatedLinks\n                  ? [\n                      { title: 'Retail banking for beginners', href: 'https://pega.com' },\n                      { title: 'How to handle premium customers', href: 'https://pega.com' }\n                    ]\n                  : undefined,\n                relatedArticles: showMoreLikeThis\n                  ? [\n                      {\n                        title: 'What are the implications of change in billing cycle',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      },\n                      {\n                        title: 'What is the best billing cycle for premium customers',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      },\n                      {\n                        title: 'How to enable automatic bill payment',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      }\n                    ]\n                  : undefined,\n                attachments: showAttachments\n                  ? [\n                      { name: 'Billing cycle FAQ.doc', onDownload: action('On Download') },\n                      { name: 'Training video.mp4', onDownload: action('On Download') },\n                      { name: 'Terms and conditions.pdf', onDownload: action('On Download') }\n                    ]\n                  : undefined\n              }\n            : undefined\n        }\n        loading={loading}\n      />\n    </div>\n  );\n};\n\nArticleStory.args = {\n  showHeader: true,\n  backButtonText: 'Back to all articles',\n  showPrimaryActions: true,\n  showSecondaryActions: true,\n  showFooter: true,\n  enableFeedback: true,\n  showTags: true,\n  showRelatedLinks: true,\n  showMoreLikeThis: true,\n  showAttachments: true\n};\n\nArticleStory.argTypes = {\n  showHeader: { control: { type: 'boolean' } },\n  backButtonText: { control: { type: 'text' } },\n  showPrimaryActions: { control: { type: 'boolean' } },\n  showSecondaryActions: { control: { type: 'boolean' } },\n  showFooter: { control: { type: 'boolean' } },\n  enableFeedback: { control: { type: 'boolean' } },\n  showTags: { control: { type: 'boolean' } },\n  showRelatedLinks: { control: { type: 'boolean' } },\n  showMoreLikeThis: { control: { type: 'boolean' } },\n  showAttachments: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Article.stories.jsx","sourceRoot":"","sources":["../../../src/work/Article/Article.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC9E,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGhF,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,aAAa,EAAE,EAAE,aAAa,EAAE;IAChC,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAeV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAsB,EAAE,EAAE;IAChF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IAEtD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,eAAe,CAAC,kBAAkB,CAAC,QAAQ,CAAC,QAAQ,CACrD,CAAC;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,eAAe,CAAC,kBAAkB,CAAC,QAAQ,CAAC,QAAQ,CACrD,CAAC;IAEF,MAAM,EACJ,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,oBAAoB,EACpB,UAAU,EACV,cAAc,EACd,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EAChB,GAAG,IAAI,CAAC;IAET,MAAM,qBAAqB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAClD,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,GAAG,EAAE;YACd,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAqD,CAAC,EAAE,EAAE,aAAa,EAAE,EAAE;QACzF,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC;QACzB,IAAI,aAAa,KAAK,OAAO,EAAE;YAC7B,WAAW,CAAC,OAAO,CAAC,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAE/B,IAAI,QAAQ,KAAK,UAAU,EAAE;gBAC3B,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aACnC;YACD,OAAO;SACR;QAED,IAAI,aAAa,KAAK,UAAU,EAAE;YAChC,WAAW,CAAC,UAAU,CAAC,CAAC;YACxB,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAClC,IAAI,QAAQ,KAAK,OAAO,EAAE;gBACxB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aAChC;SACF;QAED,IAAI,aAAa,KAAK,SAAS,EAAE;YAC/B,IAAI,QAAQ,KAAK,OAAO,EAAE;gBACxB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aAChC;iBAAM;gBACL,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aACnC;YACD,WAAW,CAAC,SAAS,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC;YACL,QAAQ,EAAE,OAAO;SAClB,CAAC,CAEF;MAAA,CAAC,OAAO,CACN,SAAS,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,SAAS,CAAC,CACxD,MAAM,CAAC,CACL,UAAU;YACR,CAAC,CAAC;gBACE,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,WAAW;aAClB;YACH,CAAC,CAAC,SAAS,CACd,CACD,cAAc,CAAC,CAAC;YACd,KAAK,EAAE,cAAc;YACrB,OAAO,EAAE,qBAAqB;SAC/B,CAAC,CACF,cAAc,CAAC,CACb,kBAAkB;YAChB,CAAC,CAAC;gBACE;oBACE,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,QAAQ;oBACf,EAAE,EAAE,SAAS,EAAE;oBACf,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC;oBACvB,CAAC;iBACF;gBACD;oBACE,IAAI,EAAE,MAAM;oBACZ,KAAK,EAAE,MAAM;oBACb,EAAE,EAAE,SAAS,EAAE;oBACf,OAAO,EAAE,EAAE,CAAC,EAAE;wBACZ,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;oBACrB,CAAC;iBACF;aACF;YACH,CAAC,CAAC,SAAS,CACd,CACD,gBAAgB,CAAC,CACf,oBAAoB;YAClB,CAAC,CAAC;gBACE;oBACE,IAAI,EAAE,eAAe;oBACrB,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC;iBAC1B;gBACD;oBACE,IAAI,EAAE,cAAc;oBACpB,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC;iBAC1B;aACF;YACH,CAAC,CAAC,SAAS,CACd,CACD,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAG,CAAC,CACvE,KAAK,CAAC,CAAC,eAAe,CAAC,kBAAkB,CAAC,MAAM,CAAC,CACjD,IAAI,CAAC,CAAC;YACJ,QAAQ,EAAE,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ;YAC1D,aAAa,EAAE,eAAe,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa;SACrE,CAAC,CACF,QAAQ,CAAC,CAAC;YACR,KAAK,EAAE,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,YAAY,CAAC;YACrD,QAAQ,EAAE,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,YAAY,CAAC;YAC3D,QAAQ;YACR,UAAU;SACX,CAAC,CACF,MAAM,CAAC,CACL,UAAU;YACR,CAAC,CAAC;gBACE,QAAQ,EAAE,cAAc;oBACtB,CAAC,CAAC;wBACE,UAAU;wBACV,iBAAiB,EAAE,CAAC,CAAC,QAAQ;wBAC7B,QAAQ;qBACT;oBACH,CAAC,CAAC,SAAS;gBACb,IAAI,EAAE,QAAQ;oBACZ,CAAC,CAAC;wBACE,IAAI,EAAE;4BACJ;gCACE,EAAE,EAAE,gBAAgB;gCACpB,OAAO,EAAE,iBAAiB;6BAC3B;4BACD;gCACE,EAAE,EAAE,SAAS;gCACb,OAAO,EAAE,UAAU;6BACpB;4BACD;gCACE,EAAE,EAAE,QAAQ;gCACZ,OAAO,EAAE,aAAa;6BACvB;4BACD;gCACE,EAAE,EAAE,QAAQ;gCACZ,OAAO,EAAE,oBAAoB;6BAC9B;4BACD;gCACE,EAAE,EAAE,QAAQ;gCACZ,OAAO,EAAE,iBAAiB;6BAC3B;4BACD;gCACE,EAAE,EAAE,QAAQ;gCACZ,OAAO,EAAE,oBAAoB;6BAC9B;yBACF;wBACD,UAAU,EAAE,MAAM,CAAC,aAAa,CAAC;qBAClC;oBACH,CAAC,CAAC,SAAS;gBACb,YAAY,EAAE,gBAAgB;oBAC5B,CAAC,CAAC;wBACE,EAAE,KAAK,EAAE,8BAA8B,EAAE,IAAI,EAAE,kBAAkB,EAAE;wBACnE,EAAE,KAAK,EAAE,iCAAiC,EAAE,IAAI,EAAE,kBAAkB,EAAE;qBACvE;oBACH,CAAC,CAAC,SAAS;gBACb,eAAe,EAAE,gBAAgB;oBAC/B,CAAC,CAAC;wBACE;4BACE,KAAK,EAAE,sDAAsD;4BAC7D,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC;4BAClC,EAAE,EAAE,SAAS,EAAE;yBAChB;wBACD;4BACE,KAAK,EAAE,sDAAsD;4BAC7D,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC;4BAClC,EAAE,EAAE,SAAS,EAAE;yBAChB;wBACD;4BACE,KAAK,EAAE,sCAAsC;4BAC7C,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC;4BAClC,EAAE,EAAE,SAAS,EAAE;yBAChB;qBACF;oBACH,CAAC,CAAC,SAAS;gBACb,WAAW,EAAE,eAAe;oBAC1B,CAAC,CAAC;wBACE,EAAE,IAAI,EAAE,uBAAuB,EAAE,UAAU,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE;wBACpE,EAAE,IAAI,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE;wBACjE,EAAE,IAAI,EAAE,0BAA0B,EAAE,UAAU,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE;qBACxE;oBACH,CAAC,CAAC,SAAS;aACd;YACH,CAAC,CAAC,SAAS,CACd,CACD,OAAO,CAAC,CAAC,OAAO,CAAC,EAErB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,UAAU,EAAE,IAAI;IAChB,cAAc,EAAE,sBAAsB;IACtC,kBAAkB,EAAE,IAAI;IACxB,oBAAoB,EAAE,IAAI;IAC1B,UAAU,EAAE,IAAI;IAChB,cAAc,EAAE,IAAI;IACpB,QAAQ,EAAE,IAAI;IACd,gBAAgB,EAAE,IAAI;IACtB,gBAAgB,EAAE,IAAI;IACtB,eAAe,EAAE,IAAI;CACtB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC7C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,oBAAoB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACtD,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAY,GAAG,EAAE;IAC7C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAkC,CAAC;IAE3E,MAAM,UAAU,GAAqC,aAAa,CAAC,EAAE;QACnE,IAAI,aAAa,KAAK,OAAO,EAAE;YAG7B,WAAW,CAAC,OAAO,CAAC,CAAC;YACrB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAC/B,IAAI,QAAQ,KAAK,UAAU,EAAE;gBAC3B,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aACnC;YACD,OAAO;SACR;QAED,IAAI,aAAa,KAAK,UAAU,EAAE;YAEhC,WAAW,CAAC,UAAU,CAAC,CAAC;YACxB,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAClC,IAAI,QAAQ,KAAK,OAAO,EAAE;gBACxB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aAChC;SACF;QAED,IAAI,aAAa,KAAK,SAAS,EAAE;YAC/B,IAAI,QAAQ,KAAK,OAAO,EAAE;gBACxB,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aAChC;iBAAM;gBACL,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;aACnC;YACD,WAAW,CAAC,SAAS,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAC/B;MAAA,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,YAAY,CAAC,CAAC,CACtD,QAAQ,CAAC,CAAC,CAAC,YAAY,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,GAAG,YAAY,CAAC,CAAC,CAC5D,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAEvB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\nimport type { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { registerIcon, createUID, HTML, Flex } from '@pega/cosmos-react-core';\nimport * as openIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/open.icon';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport { Article, ArticleFooter, ArticleRating } from '@pega/cosmos-react-work';\nimport type { ArticleProps, ArticleRatingProps } from '@pega/cosmos-react-work';\n\nimport { ArticleMockData } from './Article.mocks';\n\nregisterIcon(openIcon, starIcon, caretLeftIcon);\n\nexport default {\n  title: 'Work/Article',\n  component: Article,\n  subcomponents: { ArticleFooter },\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface ArticleDemoProps {\n  showHeader: boolean;\n  backButtonText: string;\n  showPrimaryActions: boolean;\n  showSecondaryActions: boolean;\n  showFooter: boolean;\n  enableFeedback: boolean;\n  showTags: boolean;\n  showRelatedLinks: boolean;\n  showMoreLikeThis: boolean;\n  showAttachments: boolean;\n}\n\nexport const ArticleStory: StoryFn<ArticleDemoProps> = (args: ArticleDemoProps) => {\n  const [loading, setLoading] = useState<boolean>(true);\n\n  const [likeCount, setLikeCount] = useState(ArticleMockData.fullArticleContent.feedback.likes);\n  const [dislikeCount, setDislikeCount] = useState(\n    ArticleMockData.fullArticleContent.feedback.disLikes\n  );\n  const [reaction, setReaction] = useState<ArticleRatingProps['reaction']>(\n    ArticleMockData.fullArticleContent.feedback.reaction\n  );\n\n  const {\n    showHeader,\n    backButtonText,\n    showPrimaryActions,\n    showSecondaryActions,\n    showFooter,\n    enableFeedback,\n    showTags,\n    showRelatedLinks,\n    showMoreLikeThis,\n    showAttachments\n  } = args;\n\n  const onBackToArticlesClick = (event: MouseEvent) => {\n    event.preventDefault();\n  };\n\n  useEffect(() => {\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  }, []);\n\n  const onReaction: Required<ArticleProps>['feedback']['onReaction'] = (id, reactionParam) => {\n    action('onReaction')(id);\n    if (reactionParam === 'liked') {\n      setReaction('liked');\n      setLikeCount(prev => prev + 1);\n\n      if (reaction === 'disliked') {\n        setDislikeCount(prev => prev - 1);\n      }\n      return;\n    }\n\n    if (reactionParam === 'disliked') {\n      setReaction('disliked');\n      setDislikeCount(prev => prev + 1);\n      if (reaction === 'liked') {\n        setLikeCount(prev => prev - 1);\n      }\n    }\n\n    if (reactionParam === undefined) {\n      if (reaction === 'liked') {\n        setLikeCount(prev => prev - 1);\n      } else {\n        setDislikeCount(prev => prev - 1);\n      }\n      setReaction(undefined);\n    }\n  };\n\n  return (\n    <div\n      style={{\n        maxWidth: '25rem'\n      }}\n    >\n      <Article\n        articleId={ArticleMockData.fullArticleContent.articleId}\n        header={\n          showHeader\n            ? {\n                title: 'Knowledge articles',\n                icon: 'book-open'\n              }\n            : undefined\n        }\n        backNavigation={{\n          title: backButtonText,\n          onClick: onBackToArticlesClick\n        }}\n        primaryActions={\n          showPrimaryActions\n            ? [\n                {\n                  icon: 'star',\n                  label: 'Follow',\n                  id: createUID(),\n                  onClick: id => {\n                    action('Follow')(id);\n                  }\n                },\n                {\n                  icon: 'open',\n                  label: 'Open',\n                  id: createUID(),\n                  onClick: id => {\n                    action('Open')(id);\n                  }\n                }\n              ]\n            : undefined\n        }\n        secondaryActions={\n          showSecondaryActions\n            ? [\n                {\n                  text: 'Send in email',\n                  id: 'action1',\n                  onClick: action('Action')\n                },\n                {\n                  text: 'Send in chat',\n                  id: 'action2',\n                  onClick: action('Action')\n                }\n              ]\n            : undefined\n        }\n        content={<HTML content={ArticleMockData.fullArticleContent.content} />}\n        title={ArticleMockData.fullArticleContent.header}\n        meta={{\n          category: ArticleMockData.fullArticleContent.meta.category,\n          publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate\n        }}\n        feedback={{\n          likes: (likeCount * 100) / (likeCount + dislikeCount),\n          dislikes: (dislikeCount * 100) / (likeCount + dislikeCount),\n          reaction,\n          onReaction\n        }}\n        footer={\n          showFooter\n            ? {\n                feedback: enableFeedback\n                  ? {\n                      onReaction,\n                      showThanksMessage: !!reaction,\n                      reaction\n                    }\n                  : undefined,\n                tags: showTags\n                  ? {\n                      list: [\n                        {\n                          id: 'Retail banking',\n                          tagName: '#Retail_banking'\n                        },\n                        {\n                          id: 'Billing',\n                          tagName: '#Billing'\n                        },\n                        {\n                          id: '223444',\n                          tagName: '#CSR_Skills'\n                        },\n                        {\n                          id: '223446',\n                          tagName: '#Premium_Customers'\n                        },\n                        {\n                          id: '223447',\n                          tagName: '#Rare_Customers'\n                        },\n                        {\n                          id: '223448',\n                          tagName: '#Finance_Customers'\n                        }\n                      ],\n                      onTagClick: action('Tag clicked')\n                    }\n                  : undefined,\n                relatedLinks: showRelatedLinks\n                  ? [\n                      { title: 'Retail banking for beginners', href: 'https://pega.com' },\n                      { title: 'How to handle premium customers', href: 'https://pega.com' }\n                    ]\n                  : undefined,\n                relatedArticles: showMoreLikeThis\n                  ? [\n                      {\n                        title: 'What are the implications of change in billing cycle',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      },\n                      {\n                        title: 'What is the best billing cycle for premium customers',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      },\n                      {\n                        title: 'How to enable automatic bill payment',\n                        onClick: action('Related article'),\n                        id: createUID()\n                      }\n                    ]\n                  : undefined,\n                attachments: showAttachments\n                  ? [\n                      { name: 'Billing cycle FAQ.doc', onDownload: action('On Download') },\n                      { name: 'Training video.mp4', onDownload: action('On Download') },\n                      { name: 'Terms and conditions.pdf', onDownload: action('On Download') }\n                    ]\n                  : undefined\n              }\n            : undefined\n        }\n        loading={loading}\n      />\n    </div>\n  );\n};\n\nArticleStory.args = {\n  showHeader: true,\n  backButtonText: 'Back to all articles',\n  showPrimaryActions: true,\n  showSecondaryActions: true,\n  showFooter: true,\n  enableFeedback: true,\n  showTags: true,\n  showRelatedLinks: true,\n  showMoreLikeThis: true,\n  showAttachments: true\n};\n\nArticleStory.argTypes = {\n  showHeader: { control: { type: 'boolean' } },\n  backButtonText: { control: { type: 'text' } },\n  showPrimaryActions: { control: { type: 'boolean' } },\n  showSecondaryActions: { control: { type: 'boolean' } },\n  showFooter: { control: { type: 'boolean' } },\n  enableFeedback: { control: { type: 'boolean' } },\n  showTags: { control: { type: 'boolean' } },\n  showRelatedLinks: { control: { type: 'boolean' } },\n  showMoreLikeThis: { control: { type: 'boolean' } },\n  showAttachments: { control: { type: 'boolean' } }\n};\n\nexport const ArticleRatingDemo: StoryFn = () => {\n  const [likeCount, setLikeCount] = useState(5);\n  const [dislikeCount, setDislikeCount] = useState(2);\n  const [reaction, setReaction] = useState<ArticleRatingProps['reaction']>();\n\n  const onReaction: ArticleRatingProps['onReaction'] = reactionParam => {\n    if (reactionParam === 'liked') {\n      // no reaction\n      // already disliked and liking now\n      setReaction('liked');\n      setLikeCount(prev => prev + 1);\n      if (reaction === 'disliked') {\n        setDislikeCount(prev => prev - 1);\n      }\n      return;\n    }\n\n    if (reactionParam === 'disliked') {\n      // Dislike clicked\n      setReaction('disliked');\n      setDislikeCount(prev => prev + 1);\n      if (reaction === 'liked') {\n        setLikeCount(prev => prev - 1);\n      }\n    }\n\n    if (reactionParam === undefined) {\n      if (reaction === 'liked') {\n        setLikeCount(prev => prev - 1);\n      } else {\n        setDislikeCount(prev => prev - 1);\n      }\n      setReaction(undefined);\n    }\n  };\n\n  return (\n    <Flex container={{ pad: [1, 1] }}>\n      <ArticleRating\n        likes={(likeCount * 100) / (likeCount + dislikeCount)}\n        dislikes={(dislikeCount * 100) / (likeCount + dislikeCount)}\n        onReaction={onReaction}\n        reaction={reaction}\n      />\n    </Flex>\n  );\n};\n"]}

package/jsx/work/ArticleList/ArticleBuddy.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface ArticleBuddyDemoProps {
+    showDisclaimer: boolean;
+    showReferences: boolean;
+    showActions: boolean;
+    showError: boolean;
+}
+export declare const ArticleBuddyDemo: StoryFn<ArticleBuddyDemoProps>;
+//# sourceMappingURL=ArticleBuddy.stories.d.ts.map

package/jsx/work/ArticleList/ArticleBuddy.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleBuddy.stories.d.ts","sourceRoot":"","sources":["../../../src/work/ArticleList/ArticleBuddy.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAWtD,wBAGU;AAEV,UAAU,qBAAqB;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACpB;AAOD,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,CAgE3D,CAAC"}

package/jsx/work/ArticleList/ArticleBuddy.stories.jsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { HTML } from '@pega/cosmos-react-core';
+import { ArticleBuddy } from '@pega/cosmos-react-work';
+import { ArticleBuddyMockData } from './ArticleList.mocks';
+export default {
+    title: 'Work/ArticleList',
+    component: ArticleBuddy
+};
+export const ArticleBuddyDemo = (args) => {
+    const [searchVal, setSearchVal] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [searchResult, setSearchResult] = useState();
+    const updateBuddyArticles = (mockBuddyArticle) => {
+        const actionItems = [
+            { id: '1', text: 'Share' },
+            { id: '2', text: 'Copy' }
+        ];
+        return {
+            title: mockBuddyArticle.title,
+            content: mockBuddyArticle.content,
+            references: mockBuddyArticle.references,
+            disclaimer: mockBuddyArticle.disclaimer,
+            actions: actionItems
+        };
+    };
+    const fetchSearchResult = () => {
+        return new Promise(resolve => {
+            setTimeout(() => {
+                resolve({
+                    data: updateBuddyArticles(ArticleBuddyMockData)
+                });
+            }, 1000);
+        });
+    };
+    const getResults = async () => {
+        setLoading(true);
+        const res = await fetchSearchResult();
+        setSearchResult(res.data);
+        setLoading(false);
+    };
+    const queryParams = {
+        placeholder: 'Ask your question here...',
+        value: searchVal,
+        onChange: (e) => setSearchVal(e.target.value)
+    };
+    return (<ArticleBuddy query={queryParams} onSubmit={getResults} onClear={() => {
+            setSearchVal('');
+        }} title={searchResult?.title} actions={args.showActions ? searchResult?.actions : []} content={!args.showError && searchResult?.content ? (<HTML content={ArticleBuddyMockData.content}/>) : undefined} disclaimer={args.showDisclaimer ? ArticleBuddyMockData.disclaimer : undefined} references={args.showReferences ? searchResult?.references : undefined} loading={loading} error={args.showError}/>);
+};
+ArticleBuddyDemo.args = {
+    showDisclaimer: true,
+    showActions: true,
+    showReferences: true,
+    showError: false
+};
+ArticleBuddyDemo.argTypes = {
+    showDisclaimer: { control: { type: 'boolean' } },
+    showActions: { control: { type: 'boolean' } },
+    showReferences: { control: { type: 'boolean' } },
+    showError: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=ArticleBuddy.stories.jsx.map

package/jsx/work/ArticleList/ArticleBuddy.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleBuddy.stories.jsx","sourceRoot":"","sources":["../../../src/work/ArticleList/ArticleBuddy.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { HTML } from '@pega/cosmos-react-core';\nimport type { OmitStrict, TextAreaProps } from '@pega/cosmos-react-core';\nimport { ArticleBuddy } from '@pega/cosmos-react-work';\nimport type { ArticleBuddyProps } from '@pega/cosmos-react-work';\n\nimport { ArticleBuddyMockData } from './ArticleList.mocks';\n\nexport default {\n  title: 'Work/ArticleList',\n  component: ArticleBuddy\n} as Meta;\n\ninterface ArticleBuddyDemoProps {\n  showDisclaimer: boolean;\n  showReferences: boolean;\n  showActions: boolean;\n  showError: boolean;\n}\n\ntype MockBuddyArticles = OmitStrict<\n  ArticleBuddyProps,\n  'query' | 'loading' | 'onSubmit' | 'onClear'\n>;\n\nexport const ArticleBuddyDemo: StoryFn<ArticleBuddyDemoProps> = (args: ArticleBuddyDemoProps) => {\n  const [searchVal, setSearchVal] = useState('');\n  const [loading, setLoading] = useState(false);\n  const [searchResult, setSearchResult] = useState<MockBuddyArticles>();\n\n  const updateBuddyArticles = (mockBuddyArticle: MockBuddyArticles) => {\n    const actionItems = [\n      { id: '1', text: 'Share' },\n      { id: '2', text: 'Copy' }\n    ];\n    return {\n      title: mockBuddyArticle.title,\n      content: mockBuddyArticle.content,\n      references: mockBuddyArticle.references,\n      disclaimer: mockBuddyArticle.disclaimer,\n      actions: actionItems\n    };\n  };\n\n  const fetchSearchResult: () => Promise<{\n    data: MockBuddyArticles;\n  }> = () => {\n    return new Promise(resolve => {\n      setTimeout(() => {\n        resolve({\n          data: updateBuddyArticles(ArticleBuddyMockData)\n        });\n      }, 1000);\n    });\n  };\n\n  const getResults = async () => {\n    setLoading(true);\n    const res = await fetchSearchResult();\n    setSearchResult(res.data);\n    setLoading(false);\n  };\n\n  const queryParams: TextAreaProps = {\n    placeholder: 'Ask your question here...',\n    value: searchVal,\n    onChange: (e: ChangeEvent<HTMLTextAreaElement>) => setSearchVal(e.target.value)\n  };\n\n  return (\n    <ArticleBuddy\n      query={queryParams}\n      onSubmit={getResults}\n      onClear={() => {\n        setSearchVal('');\n      }}\n      title={searchResult?.title}\n      actions={args.showActions ? searchResult?.actions : []}\n      content={\n        !args.showError && searchResult?.content ? (\n          <HTML content={ArticleBuddyMockData.content} />\n        ) : undefined\n      }\n      disclaimer={args.showDisclaimer ? ArticleBuddyMockData.disclaimer : undefined}\n      references={args.showReferences ? searchResult?.references : undefined}\n      loading={loading}\n      error={args.showError}\n    />\n  );\n};\n\nArticleBuddyDemo.args = {\n  showDisclaimer: true,\n  showActions: true,\n  showReferences: true,\n  showError: false\n};\n\nArticleBuddyDemo.argTypes = {\n  showDisclaimer: { control: { type: 'boolean' } },\n  showActions: { control: { type: 'boolean' } },\n  showReferences: { control: { type: 'boolean' } },\n  showError: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/work/ArticleList/ArticleList.mocks.d.ts

@@ -1,3 +1,4 @@
+import type { ArticleBuddyProps } from '@pega/cosmos-react-work';
 export declare const suggestedMock: {
     count: number;
     articles: ({
@@ -8,10 +9,12 @@ export declare const suggestedMock: {
         meta: {
             category: string;
             publishedDate: string;
-            feedback: {
-                likes: number;
-                dislikes: number;
-            };
+        };
+        feedback: {
+            likes: number;
+            dislikes: number;
+            liked: boolean;
+            disliked: boolean;
         };
         isFollowed: boolean;
         isLiked: boolean;
@@ -24,10 +27,12 @@ export declare const suggestedMock: {
         meta: {
             category: string;
             publishedDate: string;
-            feedback: {
-                likes: number;
-                dislikes: number;
-            };
+        };
+        feedback: {
+            likes: number;
+            dislikes: number;
+            liked: boolean;
+            disliked: boolean;
         };
         isFollowed: boolean;
         isLiked: boolean;
@@ -47,10 +52,12 @@ export declare const followedMock: {
         meta: {
             category: string;
             publishedDate: string;
-            feedback: {
-                likes: number;
-                dislikes: number;
-            };
+        };
+        feedback: {
+            likes: number;
+            dislikes: number;
+            liked: boolean;
+            disliked: boolean;
         };
         isFollowed: boolean;
         isLiked: boolean;
@@ -66,10 +73,12 @@ export declare const followedMock: {
         meta: {
             category: string;
             publishedDate: string;
-            feedback: {
-                likes: number;
-                dislikes: number;
-            };
+        };
+        feedback: {
+            likes: number;
+            dislikes: number;
+            liked: boolean;
+            disliked: boolean;
         };
         isFollowed: boolean;
         isLiked: boolean;
@@ -105,10 +114,12 @@ export declare const searchMock: {
         meta: {
             category: string;
             publishedDate: string;
-            feedback: {
-                likes: number;
-                dislikes: number;
-            };
+        };
+        feedback: {
+            likes: number;
+            dislikes: number;
+            liked: boolean;
+            disliked: boolean;
         };
         isFollowed: boolean;
         isLiked: boolean;
@@ -137,4 +148,12 @@ export declare const searchMock: {
         primary: string;
     }[];
 };
+export declare const ArticleBuddyMockData: Pick<ArticleBuddyProps, 'title' | 'references' | 'disclaimer'> & {
+    content: string;
+};
+export declare const ArticleBuddyActions: {
+    id: string;
+    text: string;
+    onClick: () => void;
+}[];
 //# sourceMappingURL=ArticleList.mocks.d.ts.map