@pega/cosmos-react-demos 4.0.0-dev.9.1 → 4.0.0

package/lib/tools/PreviewShell/PreviewShell.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.stories.js","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { useEffect, useState, useMemo, MouseEvent } from 'react';\n\nimport { PreviewShell, PreviewShellProps } from '@pega/cosmos-react-tools';\nimport { StatusProps, Flex, Text } from '@pega/cosmos-react-core';\nimport { HeaderProps } from '@pega/cosmos-react-tools/lib/components/PreviewShell/PreviewShell.types';\n\nimport {\n  footerMenuMock,\n  footerTabsMock,\n  channelsMock,\n  mainContentMock\n} from './PreviewShell.mocks';\n\nexport default {\n  title: 'Tools/PreviewShell',\n  component: PreviewShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PreviewShellStoryProps extends PreviewShellProps {\n  appName: HeaderProps['appName'];\n  statusVariant: StatusProps['variant'];\n  statusText: string;\n  operatorName: HeaderProps['operator']['avatar']['name'];\n  expandFooter: boolean;\n  showHeader: boolean;\n  showFooter?: boolean;\n  onNewWindowClick: (e?: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const PreviewShellSkeleton: Story<PreviewShellStoryProps> = (\n  args: PreviewShellStoryProps\n) => {\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[0].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n  const [channels, setChannels] = useState(channelsMock);\n\n  const onChannelClick = (id: string) => {\n    setChannels(cur => cur.map(ch => ({ ...ch, selected: id === ch.id })));\n    newWindow?.close();\n    setNewWindow(null);\n  };\n\n  return (\n    <PreviewShell\n      header={{\n        appName: args.appName,\n        status: {\n          variant: args.statusVariant,\n          children: args.statusText\n        },\n        operator: {\n          avatar: { name: args.operatorName || '' },\n          actions: [\n            { primary: 'Profile', id: 'profile' },\n            { primary: 'Settings', id: 'settings' },\n            { primary: 'My applications', id: 'apps' },\n            { primary: 'Help center', id: 'help' },\n            { primary: 'Log out', id: 'logout' }\n          ],\n          name: args.operatorName\n        },\n        channels,\n        onChannelClick\n      }}\n      footer={{\n        tabs: footerTabsMock.map(tab => ({\n          ...tab,\n          content: (\n            <Flex container={{ justify: 'center', alignItems: 'center' }}>\n              <Text variant='h2'>This is the content for {tab.name}</Text>\n            </Flex>\n          )\n        })),\n        currentTabId,\n        onTabClick: (id: string) => {\n          setCurrentTabId(id);\n        },\n        expanded: args.expandFooter,\n        onContinueDebug: newWindow\n          ? () => {\n              newWindow?.focus();\n            }\n          : undefined,\n        onNewWindowClick:\n          args.onNewWindowClick ??\n          (() => {\n            const newWindowObj = window.open(\n              `${window.location.origin}/iframe.html?id=tools-devtools--dev-tools-demo&args=&viewMode=story`\n            );\n            setNewWindow(newWindowObj);\n            newWindowObj?.addEventListener('load', () => {\n              newWindowObj?.addEventListener('beforeunload', () => {\n                setNewWindow(null);\n              });\n              newWindowObj?.addEventListener('unload', () => {\n                (\n                  document.querySelector('button[aria-label=\"Open in new window\"]') as HTMLElement\n                )?.focus();\n              });\n            });\n          }),\n        menu: { items: footerMenuMock }\n      }}\n    >\n      {mainContentMock}\n    </PreviewShell>\n  );\n};\n\nPreviewShellSkeleton.args = {\n  appName: 'Title',\n  statusVariant: 'pending',\n  statusText: 'status',\n  operatorName: 'Cindy Turner',\n  expandFooter: true,\n  onNewWindowClick: undefined,\n  showHeader: true\n};\n\nPreviewShellSkeleton.argTypes = {\n  appName: { control: { type: 'text' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusText: { control: { type: 'text' } },\n  operatorName: { control: { type: 'text' } },\n  expandFooter: { control: { type: 'boolean' } },\n  onNewWindowClick: { table: { disable: true } },\n  showHeader: { control: { type: 'boolean' } }\n};\n\nexport const PreviewShellDemo: Story<PreviewShellStoryProps> = (args: PreviewShellStoryProps) => {\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n  const [channels, setChannels] = useState(channelsMock);\n\n  const onChannelClick = (id: string) => {\n    setChannels(cur => cur.map(ch => ({ ...ch, selected: id === ch.id })));\n    newWindow?.close();\n    setNewWindow(null);\n  };\n\n  const selectedChannel = useMemo(() => {\n    const selectedItem = channels.find(ch => ch.selected);\n    return selectedItem || channels[0];\n  }, [channels]);\n\n  useEffect(() => {\n    if (newWindow?.self) {\n      newWindow.onload = () => {\n        newWindow.onbeforeunload = () => {\n          setNewWindow(null);\n        };\n        newWindow.onunload = () => {\n          (\n            document.querySelector('button[aria-label=\"Open in new window\"]') as HTMLElement\n          )?.focus();\n        };\n      };\n    }\n  }, [newWindow]);\n\n  return (\n    <PreviewShell\n      header={\n        args.showHeader\n          ? {\n              appName: args.appName,\n              onClick: action('Clicked application name'),\n              status: {\n                variant: args.statusVariant,\n                children: args.statusText\n              },\n              operator: {\n                avatar: { name: args.operatorName },\n                actions: [\n                  { primary: 'Profile', id: 'profile' },\n                  { primary: 'Settings', id: 'settings' },\n                  { primary: 'My applications', id: 'apps' },\n                  { primary: 'Help center', id: 'help' },\n                  { primary: 'Log out', id: 'logout' }\n                ],\n                name: args.operatorName\n              },\n              channels,\n              onChannelClick\n            }\n          : undefined\n      }\n      footer={\n        args.showFooter && selectedChannel?.id === 'browser'\n          ? {\n              tabs: footerTabsMock,\n              currentTabId,\n              onTabClick: (id: string) => {\n                setCurrentTabId(id);\n              },\n              expanded: args.expandFooter,\n              onContinueDebug: newWindow\n                ? () => {\n                    newWindow?.focus();\n                  }\n                : undefined,\n              onNewWindowClick: () => {\n                setNewWindow(\n                  window.open(\n                    `${\n                      window.location.href.split('?')[0]\n                    }?id=tools-devtools--dev-tools-demo&args=&viewMode=story`,\n                    'Dev Tools',\n                    'popup=true,width=800,height=500'\n                  )\n                );\n              },\n              menu: { items: footerMenuMock }\n            }\n          : undefined\n      }\n    >\n      {selectedChannel?.content}\n    </PreviewShell>\n  );\n};\n\nPreviewShellDemo.args = {\n  appName: 'U+ Desk',\n  statusVariant: 'pending',\n  statusText: 'development',\n  operatorName: 'Cindy Turner',\n  expandFooter: false,\n  showHeader: true,\n  showFooter: true\n};\n\nPreviewShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusText: { control: { type: 'text' } },\n  operatorName: { control: { type: 'text' } },\n  expandFooter: { control: { type: 'boolean' } },\n  showHeader: { control: { type: 'boolean' } },\n  showFooter: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"PreviewShell.stories.js","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { useEffect, useState, useMemo } from 'react';\nimport type { MouseEvent } from 'react';\n\nimport { PreviewShell, PreviewShellProps } from '@pega/cosmos-react-tools';\nimport type { HeaderProps } from '@pega/cosmos-react-tools/lib/components/PreviewShell/PreviewShell.types';\nimport type { StatusProps } from '@pega/cosmos-react-core';\n\nimport { footerMenuMock, footerTabsMock, channelsMock, TabContent } from './PreviewShell.mocks';\n\nexport default {\n  title: 'Tools/PreviewShell',\n  component: PreviewShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface PreviewShellStoryProps extends PreviewShellProps {\n  appName: HeaderProps['appName'];\n  statusVariant: StatusProps['variant'];\n  statusText: string;\n  operatorName: HeaderProps['operator']['avatar']['name'];\n  expandFooter: boolean;\n  showHeader: boolean;\n  showFooter?: boolean;\n  onNewWindowClick: (e?: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const PreviewShellSkeleton: StoryFn<PreviewShellStoryProps> = (\n  args: PreviewShellStoryProps\n) => {\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[0].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n  const [channels, setChannels] = useState(channelsMock);\n\n  const onChannelClick = (id: string) => {\n    setChannels(cur => cur.map(ch => ({ ...ch, selected: id === ch.id })));\n    newWindow?.close();\n    setNewWindow(null);\n  };\n\n  return (\n    <PreviewShell\n      header={{\n        appName: args.appName,\n        status: {\n          variant: args.statusVariant,\n          children: args.statusText\n        },\n        operator: {\n          avatar: { name: args.operatorName || '' },\n          actions: [\n            { primary: 'Profile', id: 'profile' },\n            { primary: 'Settings', id: 'settings' },\n            { primary: 'My applications', id: 'apps' },\n            { primary: 'Help center', id: 'help' },\n            { primary: 'Log out', id: 'logout' }\n          ],\n          name: args.operatorName\n        },\n        channels,\n        onChannelClick\n      }}\n      footer={{\n        tabs: footerTabsMock.map(tab => ({\n          ...tab,\n          content: <TabContent text={`This is the content for ${tab.name}`} />\n        })),\n        currentTabId,\n        onTabClick: (id: string) => {\n          setCurrentTabId(id);\n        },\n        expanded: args.expandFooter,\n        onContinueDebug: newWindow\n          ? () => {\n              newWindow?.focus();\n            }\n          : undefined,\n        onNewWindowClick:\n          args.onNewWindowClick ??\n          (() => {\n            const newWindowObj = window.open(\n              `${window.location.origin}/iframe.html?id=tools-devtools--dev-tools-demo&args=&viewMode=story`\n            );\n            setNewWindow(newWindowObj);\n            newWindowObj?.addEventListener('load', () => {\n              newWindowObj?.addEventListener('beforeunload', () => {\n                setNewWindow(null);\n              });\n              newWindowObj?.addEventListener('unload', () => {\n                (\n                  document.querySelector('button[aria-label=\"Open in new window\"]') as HTMLElement\n                )?.focus();\n              });\n            });\n          }),\n        menu: { items: footerMenuMock }\n      }}\n    >\n      <TabContent text='This is main content' />\n    </PreviewShell>\n  );\n};\n\nPreviewShellSkeleton.args = {\n  appName: 'Title',\n  statusVariant: 'pending',\n  statusText: 'status',\n  operatorName: 'Cindy Turner',\n  expandFooter: true,\n  onNewWindowClick: undefined,\n  showHeader: true\n};\n\nPreviewShellSkeleton.argTypes = {\n  appName: { control: { type: 'text' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusText: { control: { type: 'text' } },\n  operatorName: { control: { type: 'text' } },\n  expandFooter: { control: { type: 'boolean' } },\n  onNewWindowClick: { table: { disable: true } },\n  showHeader: { control: { type: 'boolean' } }\n};\n\nexport const PreviewShellDemo: StoryFn<PreviewShellStoryProps> = (args: PreviewShellStoryProps) => {\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n  const [channels, setChannels] = useState(channelsMock);\n\n  const onChannelClick = (id: string) => {\n    setChannels(cur => cur.map(ch => ({ ...ch, selected: id === ch.id })));\n    newWindow?.close();\n    setNewWindow(null);\n  };\n\n  const selectedChannel = useMemo(() => {\n    const selectedItem = channels.find(ch => ch.selected);\n    return selectedItem || channels[0];\n  }, [channels]);\n\n  useEffect(() => {\n    if (newWindow?.self) {\n      newWindow.onload = () => {\n        newWindow.onbeforeunload = () => {\n          setNewWindow(null);\n        };\n        newWindow.onunload = () => {\n          (\n            document.querySelector('button[aria-label=\"Open in new window\"]') as HTMLElement\n          )?.focus();\n        };\n      };\n    }\n  }, [newWindow]);\n\n  return (\n    <PreviewShell\n      header={\n        args.showHeader\n          ? {\n              appName: args.appName,\n              onClick: action('Clicked application name'),\n              status: {\n                variant: args.statusVariant,\n                children: args.statusText\n              },\n              operator: {\n                avatar: { name: args.operatorName },\n                actions: [\n                  { primary: 'Profile', id: 'profile' },\n                  { primary: 'Settings', id: 'settings' },\n                  { primary: 'My applications', id: 'apps' },\n                  { primary: 'Help center', id: 'help' },\n                  { primary: 'Log out', id: 'logout' }\n                ],\n                name: args.operatorName\n              },\n              channels,\n              onChannelClick\n            }\n          : undefined\n      }\n      footer={\n        args.showFooter && selectedChannel?.id === 'browser'\n          ? {\n              tabs: footerTabsMock,\n              currentTabId,\n              onTabClick: (id: string) => {\n                setCurrentTabId(id);\n              },\n              expanded: args.expandFooter,\n              onContinueDebug: newWindow\n                ? () => {\n                    newWindow?.focus();\n                  }\n                : undefined,\n              onNewWindowClick: () => {\n                setNewWindow(\n                  window.open(\n                    `${\n                      window.location.href.split('?')[0]\n                    }?id=tools-devtools--dev-tools-demo&args=&viewMode=story`,\n                    'Dev Tools',\n                    'popup=true,width=800,height=500'\n                  )\n                );\n              },\n              menu: { items: footerMenuMock }\n            }\n          : undefined\n      }\n    >\n      {selectedChannel?.content}\n    </PreviewShell>\n  );\n};\n\nPreviewShellDemo.args = {\n  appName: 'U+ Desk',\n  statusVariant: 'pending',\n  statusText: 'development',\n  operatorName: 'Cindy Turner',\n  expandFooter: false,\n  showHeader: true,\n  showFooter: true\n};\n\nPreviewShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  statusVariant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  },\n  statusText: { control: { type: 'text' } },\n  operatorName: { control: { type: 'text' } },\n  expandFooter: { control: { type: 'boolean' } },\n  showHeader: { control: { type: 'boolean' } },\n  showFooter: { control: { type: 'boolean' } }\n};\n"]}

package/lib/work/AppAnnouncement/AppAnnouncement.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-import { AppAnnouncementProps } from '@pega/cosmos-react-work';
-declare const _default: Meta<import("@storybook/react").Args>;
+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: Story<AppAnnouncementProps>;
+export declare const AppAnnouncementDemo: StoryFn<AppAnnouncementProps>;
 //# sourceMappingURL=AppAnnouncement.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.stories.d.ts","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;;AAEhF,wBAGU;AAEV,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,oBAAoB,CAoB3D,CAAC"}
+{"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/lib/work/AppAnnouncement/AppAnnouncement.stories.js

@@ -15,7 +15,7 @@ export const AppAnnouncementDemo = (args) => {
     return (_jsx(AppAnnouncement, { heading: args.heading, description: args.description, details: details, whatsNewLink: args.whatsNewLink, whatsNewText: args.whatsNewText, image: args.image, onDismiss: () => push({ content: 'Dismissed AppAnnouncement' }) }));
 };
 AppAnnouncementDemo.args = {
-    heading: 'Pega Cosmos Design System',
+    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",

package/lib/work/AppAnnouncement/AppAnnouncement.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.stories.js","sourceRoot":"","sources":["../../../src/work/AppAnnouncement/AppAnnouncement.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAEhF,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;CACnB,CAAC;AAEV,MAAM,CAAC,MAAM,mBAAmB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC7F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,MAAM,OAAO,GAAG;QACd,8BAA8B;QAC9B,+CAA+C;QAC/C,oBAAoB;KACrB,CAAC;IAEF,OAAO,CACL,KAAC,eAAe,IACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,GAC/D,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,OAAO,EAAE,2BAA2B;IACpC,WAAW,EAAE,sEAAsE;IACnF,YAAY,EAAE,sBAAsB;IACpC,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EACH,kGAAkG;CACrG,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { useToaster } from '@pega/cosmos-react-core';\nimport { AppAnnouncement, AppAnnouncementProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/AppAnnouncement',\n  component: AppAnnouncement\n} as Meta;\n\nexport const AppAnnouncementDemo: Story<AppAnnouncementProps> = (args: AppAnnouncementProps) => {\n  const { push } = 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 Cosmos Design System',\n  description: 'We have launched a brand new experience to accelerate your workflow!',\n  whatsNewLink: 'https://www.pega.com',\n  whatsNewText: \"See what's new\",\n  image:\n    'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'\n};\n\nAppAnnouncementDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  whatsNewLink: { control: { type: 'text' } },\n  whatsNewText: { control: { type: 'text' } },\n  image: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"AppAnnouncement.stories.js","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,KAAC,eAAe,IACd,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,2BAA2B,EAAE,CAAC,GAC/D,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/lib/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;;;;;;;;;;;;CAc3B,CAAC"}

package/lib/work/Article/Article.mocks.js

@@ -0,0 +1,14 @@
+export const ArticleMockData = {
+    fullArticleContent: {
+        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
+        }
+    }
+};
+//# sourceMappingURL=Article.mocks.js.map

package/lib/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,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"]}

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

@@ -0,0 +1,17 @@
+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>;
+//# sourceMappingURL=Article.stories.d.ts.map

package/lib/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;;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"}

package/lib/work/Article/Article.stories.js

@@ -0,0 +1,200 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { registerIcon, createUID, HTML } 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 { ArticleMockData } from './Article.mocks';
+registerIcon(openIcon, starIcon, caretLeftIcon, thumbsUpSolidIcon, thumbsDownSolidIcon);
+export default {
+    title: 'Work/Article',
+    component: Article,
+    subcomponents: { ArticleFooter },
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const ArticleStory = (args) => {
+    const [feedbackStatus, setFeedbackStatus] = useState();
+    const [showFeedbackThanks, setShowFeedbackThanks] = useState(false);
+    const [loading, setLoading] = useState(true);
+    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);
+    }, []);
+    return (_jsx("div", { style: {
+            maxWidth: '25rem'
+        }, children: _jsx(Article, { 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: _jsx(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
+                }
+            }, footer: showFooter
+                ? {
+                    feedback: enableFeedback
+                        ? {
+                            showThanksMessage: showFeedbackThanks,
+                            status: feedbackStatus,
+                            onFeedbackClick
+                        }
+                        : 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 }) }));
+};
+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' } }
+};
+//# sourceMappingURL=Article.stories.js.map

package/lib/work/Article/Article.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Article.stories.js","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"]}

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

@@ -0,0 +1,140 @@
+export declare const suggestedMock: {
+    count: number;
+    articles: ({
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters?: undefined;
+    } | {
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters: {
+            id: string;
+            name: string;
+        }[];
+    })[];
+};
+export declare const followedMock: {
+    count: number;
+    articles: ({
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters: {
+            id: string;
+            name: string;
+        }[];
+    } | {
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters?: undefined;
+    })[];
+    category: ({
+        id: string;
+        primary: string;
+        secondary: string[];
+        items: {
+            id: string;
+            primary: string;
+            secondary: string[];
+        }[];
+    } | {
+        id: string;
+        primary: string;
+        secondary: string[];
+        items?: undefined;
+    })[];
+    sortBy: {
+        id: string;
+        primary: string;
+    }[];
+};
+export declare const searchMock: {
+    count: number;
+    articles: {
+        articleId: string;
+        title: string;
+        href: string;
+        abstract: string;
+        meta: {
+            category: string;
+            publishedDate: string;
+            feedback: {
+                likes: number;
+                dislikes: number;
+            };
+        };
+        isFollowed: boolean;
+        isLiked: boolean;
+        quickFilters: {
+            id: string;
+            name: string;
+        }[];
+    }[];
+    category: ({
+        id: string;
+        primary: string;
+        secondary: string[];
+        items: {
+            id: string;
+            primary: string;
+            secondary: string[];
+        }[];
+    } | {
+        id: string;
+        primary: string;
+        secondary: string[];
+        items?: undefined;
+    })[];
+    sortBy: {
+        id: string;
+        primary: string;
+    }[];
+};
+//# sourceMappingURL=ArticleList.mocks.d.ts.map

package/lib/work/ArticleList/ArticleList.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleList.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/ArticleList/ArticleList.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwJzB,CAAC;AACF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKxB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwHtB,CAAC"}