@pega/cosmos-react-demos 5.0.0-dev.4.8 → 5.0.0-dev.5.0

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

@@ -0,0 +1,83 @@
+import { useState, useCallback } from 'react';
+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 }) => {
+    const key = useUID();
+    const [likes, setLikes] = useState([]);
+    const [liked, setLiked] = useState(false);
+    const [likeCount, setLikeCount] = useState(0);
+    const [replyContent, setReplyContent] = useState(content);
+    const [edited, setEdited] = useState(false);
+    const [editTimestamp, setEditTimestamp] = useState(new Date());
+    const [glimpseContent, setGlimpseContent] = useState();
+    const [glimpseTarget, setGlimpseTarget] = useElement(null);
+    const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);
+    const getInitialLikes = () => {
+        if (likes.length)
+            return;
+        setLikes([]);
+    };
+    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 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);
+            setEdited(true);
+            setEditTimestamp(new Date());
+        }} edited={edited} editTimestamp={editTimestamp} onCommentClick={() => { }} onLikeClick={({ user }) => {
+            const userLikedIndex = likes.findIndex(x => x.id === user.id);
+            if (userLikedIndex !== -1) {
+                setLikes(oldLikes => {
+                    const oldLikesArr = [...oldLikes];
+                    oldLikesArr.splice(userLikedIndex, 1);
+                    return oldLikesArr;
+                });
+                setLikeCount(curr => curr - 1);
+            }
+            else {
+                setLikes(oldLikes => [user, ...oldLikes]);
+                setLikeCount(curr => curr + 1);
+            }
+            setLiked(curr => !curr);
+        }} 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

@@ -0,0 +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, 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/AppAnnouncement/AppAnnouncement.stories.d.ts

@@ -0,0 +1,6 @@
+import type { StoryFn } from '@storybook/react';
+import type { AppAnnouncementProps } from '@pega/cosmos-react-work';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const AppAnnouncementDemo: StoryFn<AppAnnouncementProps>;
+//# sourceMappingURL=AppAnnouncement.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppAnnouncement.stories.d.ts","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAEpE,wBAGU;AAEV,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,oBAAoB,CAoB7D,CAAC"}

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

@@ -0,0 +1,30 @@
+import { useToaster } from '@pega/cosmos-react-core';
+import { AppAnnouncement } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/AppAnnouncement',
+    component: AppAnnouncement
+};
+export const AppAnnouncementDemo = (args) => {
+    const { push } = useToaster();
+    const details = [
+        'New React based UI rendering',
+        'Streamlined components for all business needs',
+        'Other improvements'
+    ];
+    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 Constellation 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

@@ -0,0 +1 @@
+{"version":3,"file":"AppAnnouncement.stories.jsx","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CACnB,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAkC,CAAC,IAA0B,EAAE,EAAE;IAC/F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,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,kCAAkC;IAC3C,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 type { Meta, StoryFn } from '@storybook/react';\n\nimport { useToaster } from '@pega/cosmos-react-core';\nimport { AppAnnouncement } from '@pega/cosmos-react-work';\nimport type { AppAnnouncementProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/AppAnnouncement',\n  component: AppAnnouncement\n} as Meta;\n\nexport const AppAnnouncementDemo: StoryFn<AppAnnouncementProps> = (args: AppAnnouncementProps) => {\n  const { push } = useToaster();\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 Constellation 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/Article/Article.mocks.d.ts

@@ -0,0 +1,22 @@
+export declare const ArticleMockData: {
+    fullArticleContent: {
+        articleId: string;
+        header: string;
+        abstract: string;
+        content: string;
+        meta: {
+            category: {
+                id: string;
+                name: string;
+                onClick: () => void;
+            };
+            publishedDate: string;
+        };
+        feedback: {
+            likes: number;
+            disLikes: number;
+            reaction: undefined;
+        };
+    };
+};
+//# sourceMappingURL=Article.mocks.d.ts.map

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

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

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

@@ -0,0 +1,22 @@
+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: {
+                id: 'Category-1',
+                name: 'Banking and Retail',
+                onClick: () => { }
+            },
+            publishedDate: '2023-04-06'
+        },
+        feedback: {
+            likes: 312,
+            disLikes: 42,
+            reaction: undefined
+        }
+    }
+};
+//# sourceMappingURL=Article.mocks.js.map

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

@@ -0,0 +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,SAAS,EAAE,GAAG;QACd,MAAM,EAAE,qCAAqC;QAC7C,QAAQ,EACN,kGAAkG;QACpG,OAAO,EACL,k9EAAk9E;QACp9E,IAAI,EAAE;YACJ,QAAQ,EAAE;gBACR,EAAE,EAAE,YAAY;gBAChB,IAAI,EAAE,oBAAoB;gBAC1B,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;aAClB;YACD,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: {\n        id: 'Category-1',\n        name: 'Banking and Retail',\n        onClick: () => {}\n      },\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

@@ -0,0 +1,18 @@
+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;
+export interface ArticleDemoProps {
+    showHeader: boolean;
+    backButtonText: string;
+    showPrimaryActions: boolean;
+    showSecondaryActions: boolean;
+    showFooter: boolean;
+    enableFeedback: boolean;
+    showTags: boolean;
+    showRelatedLinks: boolean;
+    showMoreLikeThis: boolean;
+    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

@@ -0,0 +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;;AAkBtD,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

@@ -0,0 +1,244 @@
+import { useEffect, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+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 { Article, ArticleFooter, ArticleRating } from '@pega/cosmos-react-work';
+import { ArticleMockData } from './Article.mocks';
+registerIcon(openIcon, starIcon, caretLeftIcon);
+export default {
+    title: 'Work/Article',
+    component: Article,
+    subcomponents: { ArticleFooter },
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const ArticleStory = (args) => {
+    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();
+    };
+    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 articleId={ArticleMockData.fullArticleContent.articleId} header={showHeader
+            ? {
+                title: 'Knowledge articles',
+                icon: 'book-open'
+            }
+            : undefined} backNavigation={{
+            title: backButtonText,
+            onClick: onBackToArticlesClick
+        }} primaryActions={showPrimaryActions
+            ? [
+                {
+                    icon: 'star',
+                    label: 'Follow',
+                    id: createUID(),
+                    onClick: id => {
+                        action('Follow')(id);
+                    }
+                },
+                {
+                    icon: 'open',
+                    label: 'Open',
+                    id: createUID(),
+                    onClick: id => {
+                        action('Open')(id);
+                    }
+                }
+            ]
+            : undefined} secondaryActions={showSecondaryActions
+            ? [
+                {
+                    text: 'Send in email',
+                    id: 'action1',
+                    onClick: action('Action')
+                },
+                {
+                    text: 'Send in chat',
+                    id: 'action2',
+                    onClick: action('Action')
+                }
+            ]
+            : undefined} content={<HTML content={ArticleMockData.fullArticleContent.content}/>} title={ArticleMockData.fullArticleContent.header} meta={{
+            category: ArticleMockData.fullArticleContent.meta.category,
+            publishedDate: ArticleMockData.fullArticleContent.meta.publishedDate
+        }} feedback={{
+            likes: (likeCount * 100) / (likeCount + dislikeCount),
+            dislikes: (dislikeCount * 100) / (likeCount + dislikeCount),
+            reaction,
+            onReaction
+        }} footer={showFooter
+            ? {
+                feedback: enableFeedback
+                    ? {
+                        onReaction,
+                        showThanksMessage: !!reaction,
+                        reaction
+                    }
+                    : undefined,
+                tags: showTags
+                    ? {
+                        list: [
+                            {
+                                id: 'Retail banking',
+                                tagName: '#Retail_banking'
+                            },
+                            {
+                                id: 'Billing',
+                                tagName: '#Billing'
+                            },
+                            {
+                                id: '223444',
+                                tagName: '#CSR_Skills'
+                            },
+                            {
+                                id: '223446',
+                                tagName: '#Premium_Customers'
+                            },
+                            {
+                                id: '223447',
+                                tagName: '#Rare_Customers'
+                            },
+                            {
+                                id: '223448',
+                                tagName: '#Finance_Customers'
+                            }
+                        ],
+                        onTagClick: action('Tag clicked')
+                    }
+                    : undefined,
+                relatedLinks: showRelatedLinks
+                    ? [
+                        { title: 'Retail banking for beginners', href: 'https://pega.com' },
+                        { title: 'How to handle premium customers', href: 'https://pega.com' }
+                    ]
+                    : undefined,
+                relatedArticles: showMoreLikeThis
+                    ? [
+                        {
+                            title: 'What are the implications of change in billing cycle',
+                            onClick: action('Related article'),
+                            id: createUID()
+                        },
+                        {
+                            title: 'What is the best billing cycle for premium customers',
+                            onClick: action('Related article'),
+                            id: createUID()
+                        },
+                        {
+                            title: 'How to enable automatic bill payment',
+                            onClick: action('Related article'),
+                            id: createUID()
+                        }
+                    ]
+                    : undefined,
+                attachments: showAttachments
+                    ? [
+                        { name: 'Billing cycle FAQ.doc', onDownload: action('On Download') },
+                        { name: 'Training video.mp4', onDownload: action('On Download') },
+                        { name: 'Terms and conditions.pdf', onDownload: action('On Download') }
+                    ]
+                    : undefined
+            }
+            : undefined} loading={loading}/>
+    </div>);
+};
+ArticleStory.args = {
+    showHeader: true,
+    backButtonText: 'Back to all articles',
+    showPrimaryActions: true,
+    showSecondaryActions: true,
+    showFooter: true,
+    enableFeedback: true,
+    showTags: true,
+    showRelatedLinks: true,
+    showMoreLikeThis: true,
+    showAttachments: true
+};
+ArticleStory.argTypes = {
+    showHeader: { control: { type: 'boolean' } },
+    backButtonText: { control: { type: 'text' } },
+    showPrimaryActions: { control: { type: 'boolean' } },
+    showSecondaryActions: { control: { type: 'boolean' } },
+    showFooter: { control: { type: 'boolean' } },
+    enableFeedback: { control: { type: 'boolean' } },
+    showTags: { control: { type: 'boolean' } },
+    showRelatedLinks: { control: { type: 'boolean' } },
+    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

@@ -0,0 +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, 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 {\n  Article,\n  ArticleFooter,\n  ArticleProps,\n  ArticleRating,\n  ArticleRatingProps\n} 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"]}