@pega/cosmos-react-demos 3.0.0-dev.28.0 → 3.0.0-dev.30.0

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { PreviewShell } from '@pega/cosmos-react-tools';
 import { footerMenuMock, footerTabsMockContent, footerTabsMock } from './PreviewShell.mocks';
 export default {
@@ -12,6 +12,8 @@ export default {
 };
 export const PreviewShellSkeleton = (args) => {
     const [tabContent, setTabContent] = useState('Tab 1 content');
+    const [currentTabId, setCurrentTabId] = useState(footerTabsMock[0].id);
+    const [newWindow, setNewWindow] = useState(null);
     return (_jsx(PreviewShell, { frameurl: '', header: {
             appName: args.appName,
             status: {
@@ -32,11 +34,30 @@ export const PreviewShellSkeleton = (args) => {
         }, footer: {
             tabs: footerTabsMock,
             tabContent,
+            currentTabId,
             onTabClick: (id) => {
                 setTabContent(`Tab ${+id + 1} content`);
+                setCurrentTabId(id);
             },
             expanded: args.expandFooter,
-            newTabHref: 'https://www.pega.com',
+            onContinueDebug: newWindow
+                ? () => {
+                    newWindow?.focus();
+                }
+                : undefined,
+            onNewWindowClick: args.onNewWindowClick ??
+                (() => {
+                    const newWindowObj = window.open(`${window.location.origin}/iframe.html?id=tools-devtools--dev-tools-demo&args=&viewMode=story`);
+                    setNewWindow(newWindowObj);
+                    newWindowObj?.addEventListener('load', () => {
+                        newWindowObj?.addEventListener('beforeunload', () => {
+                            setNewWindow(null);
+                        });
+                        newWindowObj?.addEventListener('unload', () => {
+                            document.querySelector('button[aria-label="Open in new window"]')?.focus();
+                        });
+                    });
+                }),
             menu: { items: footerMenuMock }
         } }));
 };
@@ -45,7 +66,8 @@ PreviewShellSkeleton.args = {
     statusVariant: 'pending',
     statusText: 'status',
     operatorName: 'Cindy Turner',
-    expandFooter: true
+    expandFooter: true,
+    onNewWindowClick: undefined
 };
 PreviewShellSkeleton.argTypes = {
     appName: { control: { type: 'text' } },
@@ -55,11 +77,26 @@ PreviewShellSkeleton.argTypes = {
     },
     statusText: { control: { type: 'text' } },
     operatorName: { control: { type: 'text' } },
-    expandFooter: { control: { type: 'boolean' } }
+    expandFooter: { control: { type: 'boolean' } },
+    onNewWindowClick: { table: { disable: true } }
 };
 export const PreviewShellDemo = (args) => {
-    const [tabContent, setTabContent] = useState(footerTabsMockContent[0]);
-    return (_jsx(PreviewShell, { frameurl: `${window.location.origin}/iframe.html?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`, header: {
+    const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);
+    const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);
+    const [newWindow, setNewWindow] = useState(null);
+    useEffect(() => {
+        if (newWindow?.self) {
+            newWindow.onload = () => {
+                newWindow.onbeforeunload = () => {
+                    setNewWindow(null);
+                };
+                newWindow.onunload = () => {
+                    document.querySelector('button[aria-label="Open in new window"]')?.focus();
+                };
+            };
+        }
+    }, [newWindow]);
+    return (_jsx(PreviewShell, { frameurl: `${window.location.href.split('?')[0]}?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`, header: {
             appName: args.appName,
             onClick: action('Clicked application name'),
             status: {
@@ -79,12 +116,21 @@ export const PreviewShellDemo = (args) => {
             }
         }, footer: {
             tabs: footerTabsMock,
+            currentTabId,
             tabContent,
             onTabClick: (id) => {
                 setTabContent(footerTabsMockContent[Number(id)]);
+                setCurrentTabId(id);
             },
             expanded: args.expandFooter,
-            newTabHref: 'https://www.pega.com',
+            onContinueDebug: newWindow
+                ? () => {
+                    newWindow?.focus();
+                }
+                : undefined,
+            onNewWindowClick: () => {
+                setNewWindow(window.open(`${window.location.href.split('?')[0]}?id=tools-devtools--dev-tools-demo&args=&viewMode=story`, 'Dev Tools', 'popup=true,width=800,height=500'));
+            },
             menu: { items: footerMenuMock }
         } }));
 };

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 { useState } from 'react';\n\nimport { PreviewShell, PreviewShellProps } from '@pega/cosmos-react-tools';\nimport { StatusProps } from '@pega/cosmos-react-core';\n\nimport { footerMenuMock, footerTabsMockContent, footerTabsMock } 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: PreviewShellProps['header']['appName'];\n  statusVariant: StatusProps['variant'];\n  statusText: string;\n  operatorName: PreviewShellProps['header']['operator']['avatar']['name'];\n  expandFooter: PreviewShellProps['footer']['expanded'];\n}\n\nexport const PreviewShellSkeleton: Story<PreviewShellStoryProps> = (\n  args: PreviewShellStoryProps\n) => {\n  const [tabContent, setTabContent] = useState('Tab 1 content');\n\n  return (\n    <PreviewShell\n      frameurl=''\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      }}\n      footer={{\n        tabs: footerTabsMock,\n        tabContent,\n        onTabClick: (id: string) => {\n          setTabContent(`Tab ${+id + 1} content`);\n        },\n        expanded: args.expandFooter,\n        newTabHref: 'https://www.pega.com',\n        menu: { items: footerMenuMock }\n      }}\n    />\n  );\n};\n\nPreviewShellSkeleton.args = {\n  appName: 'Title',\n  statusVariant: 'pending',\n  statusText: 'status',\n  operatorName: 'Cindy Turner',\n  expandFooter: 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};\n\nexport const PreviewShellDemo: Story<PreviewShellStoryProps> = (args: PreviewShellStoryProps) => {\n  const [tabContent, setTabContent] = useState(footerTabsMockContent[0]);\n\n  return (\n    <PreviewShell\n      frameurl={`${window.location.origin}/iframe.html?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`}\n      header={{\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      }}\n      footer={{\n        tabs: footerTabsMock,\n        tabContent,\n        onTabClick: (id: string) => {\n          setTabContent(footerTabsMockContent[Number(id)]);\n        },\n        expanded: args.expandFooter,\n        newTabHref: 'https://www.pega.com',\n        menu: { items: footerMenuMock }\n      }}\n    />\n  );\n};\n\nPreviewShellDemo.args = {\n  appName: 'U+ Desk',\n  statusVariant: 'pending',\n  statusText: 'development',\n  operatorName: 'Cindy Turner',\n  expandFooter: false\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};\n"]}
+{"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 } from 'react';\n\nimport { PreviewShell, PreviewShellProps } from '@pega/cosmos-react-tools';\nimport { StatusProps } from '@pega/cosmos-react-core';\n\nimport { footerMenuMock, footerTabsMockContent, footerTabsMock } 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: PreviewShellProps['header']['appName'];\n  statusVariant: StatusProps['variant'];\n  statusText: string;\n  operatorName: PreviewShellProps['header']['operator']['avatar']['name'];\n  expandFooter: PreviewShellProps['footer']['expanded'];\n  onNewWindowClick: PreviewShellProps['footer']['onNewWindowClick'];\n}\n\nexport const PreviewShellSkeleton: Story<PreviewShellStoryProps> = (\n  args: PreviewShellStoryProps\n) => {\n  const [tabContent, setTabContent] = useState('Tab 1 content');\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[0].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\n\n  return (\n    <PreviewShell\n      frameurl=''\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      }}\n      footer={{\n        tabs: footerTabsMock,\n        tabContent,\n        currentTabId,\n        onTabClick: (id: string) => {\n          setTabContent(`Tab ${+id + 1} content`);\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  );\n};\n\nPreviewShellSkeleton.args = {\n  appName: 'Title',\n  statusVariant: 'pending',\n  statusText: 'status',\n  operatorName: 'Cindy Turner',\n  expandFooter: true,\n  onNewWindowClick: undefined\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};\n\nexport const PreviewShellDemo: Story<PreviewShellStoryProps> = (args: PreviewShellStoryProps) => {\n  const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);\n  const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);\n  const [newWindow, setNewWindow] = useState<Window | null>(null);\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      frameurl={`${\n        window.location.href.split('?')[0]\n      }?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`}\n      header={{\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      }}\n      footer={{\n        tabs: footerTabsMock,\n        currentTabId,\n        tabContent,\n        onTabClick: (id: string) => {\n          setTabContent(footerTabsMockContent[Number(id)]);\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    />\n  );\n};\n\nPreviewShellDemo.args = {\n  appName: 'U+ Desk',\n  statusVariant: 'pending',\n  statusText: 'development',\n  operatorName: 'Cindy Turner',\n  expandFooter: false\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};\n"]}

package/lib/wss/CaseView/CaseView.mocks.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const casePreviewPrimaryFields: {
+    name: string;
+    value: string;
+}[];
+export declare const casePreviewSecondaryFields: ({
+    name: string;
+    value: JSX.Element;
+} | {
+    name: string;
+    value: string;
+})[];
+//# sourceMappingURL=CaseView.mocks.d.ts.map

package/lib/wss/CaseView/CaseView.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.mocks.d.ts","sourceRoot":"","sources":["../../../src/wss/CaseView/CaseView.mocks.tsx"],"names":[],"mappings":";AAyBA,eAAO,MAAM,wBAAwB;;;GASpC,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;IAAsB,CAAC"}

package/lib/wss/CaseView/CaseView.mocks.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Status } from '@pega/cosmos-react-core';
+const createDate = new Date(2016, 1, 8);
+const msInYear = 1000 * 60 * 60 * 24 * 365;
+const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);
+const baseSecondaryFields = [
+    {
+        name: 'Status',
+        value: _jsx(Status, { variant: 'info', children: "New" })
+    },
+    {
+        name: 'Assigned to',
+        value: 'Dean Thomas'
+    },
+    {
+        name: 'Create date',
+        value: createDate.toDateString()
+    },
+    {
+        name: 'Update date',
+        value: `${diffInYears} years ago`
+    }
+];
+export const casePreviewPrimaryFields = [
+    {
+        name: 'Member ID',
+        value: 'M204859F438G'
+    },
+    {
+        name: 'Priority',
+        value: '95'
+    }
+];
+export const casePreviewSecondaryFields = baseSecondaryFields;
+//# sourceMappingURL=CaseView.mocks.js.map

package/lib/wss/CaseView/CaseView.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.mocks.js","sourceRoot":"","sources":["../../../src/wss/CaseView/CaseView.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACxC,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;AAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,OAAO,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC;AAE/E,MAAM,mBAAmB,GAAG;IAC1B;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,oBAAa;KAC3C;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,aAAa;KACrB;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE;KACjC;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,GAAG,WAAW,YAAY;KAClC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,cAAc;KACtB;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,IAAI;KACZ;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,mBAAmB,CAAC","sourcesContent":["import { Status } from '@pega/cosmos-react-core';\n\nconst createDate = new Date(2016, 1, 8);\nconst msInYear = 1000 * 60 * 60 * 24 * 365;\nconst diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);\n\nconst baseSecondaryFields = [\n  {\n    name: 'Status',\n    value: <Status variant='info'>New</Status>\n  },\n  {\n    name: 'Assigned to',\n    value: 'Dean Thomas'\n  },\n  {\n    name: 'Create date',\n    value: createDate.toDateString()\n  },\n  {\n    name: 'Update date',\n    value: `${diffInYears} years ago`\n  }\n];\n\nexport const casePreviewPrimaryFields = [\n  {\n    name: 'Member ID',\n    value: 'M204859F438G'\n  },\n  {\n    name: 'Priority',\n    value: '95'\n  }\n];\n\nexport const casePreviewSecondaryFields = baseSecondaryFields;\n"]}

package/lib/wss/CaseView/CaseView.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface CaseViewDemoProps {
+    showStagesRegion?: boolean;
+    showUtilitiesRegion?: boolean;
+    showSummaryRegion?: boolean;
+    showTasksRegion?: boolean;
+    showPulseRegion?: boolean;
+}
+export declare const CaseViewDemo: Story<CaseViewDemoProps>;
+//# sourceMappingURL=CaseView.stories.d.ts.map

package/lib/wss/CaseView/CaseView.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/wss/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAMU;AAEV,UAAU,iBAAiB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CA4EjD,CAAC"}

package/lib/wss/CaseView/CaseView.stories.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { AppShell, CaseView } from '@pega/cosmos-react-wss';
+import { CaseSummaryFields, Stages } from '@pega/cosmos-react-work';
+import { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';
+import { FeedPostDemo } from '../../social/Feed/FeedPost.stories';
+import { casePreviewPrimaryFields, casePreviewSecondaryFields } from '../../work/CaseView/CaseView.mocks';
+import { TasksDemo } from '../../work/Tasks/Tasks.stories';
+import { defaultAppDemoProps } from '../AppShell/AppShell.mocks';
+export default {
+    title: 'Web Self Service/CaseView',
+    component: CaseView,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const CaseViewDemo = (args) => {
+    const [, setMainContent] = useState('Home');
+    return (_jsx(AppShell, { caseId: '1234', main: _jsx(CaseView, { heading: 'I have an issue that is impacting my work and I need help', actions: [{ id: '1', text: 'Some text' }], tasks: { label: 'Tasks', content: _jsx(TasksDemo, {}) }, stages: args.showStagesRegion
+                ? {
+                    label: 'Stages',
+                    content: (_jsx(Stages, { stages: [
+                            { name: 'Create', id: '1', completed: true },
+                            { name: 'Troubleshoot', id: '2', completed: false },
+                            { name: 'Resolve', id: '3', completed: false }
+                        ], current: '' }))
+                }
+                : undefined, summary: args.showSummaryRegion
+                ? {
+                    label: 'Summary',
+                    content: (_jsx(CaseSummaryFields, { primaryFields: casePreviewPrimaryFields, secondaryFields: casePreviewSecondaryFields }))
+                }
+                : undefined, feed: args.showPulseRegion ? { label: 'Feed', content: _jsx(FeedPostDemo, {}) } : undefined, utility: args.showUtilitiesRegion
+                ? { label: 'Utility', content: _jsx(AttachmentsMock, {}) }
+                : undefined }), appInfo: {
+            appName: 'App name',
+            imageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg'
+        }, navLinks: Array.from({
+            length: defaultAppDemoProps.numberOfNavLinks
+        }).map((_, index) => {
+            const navName = `Navigation ${index + 1}`;
+            return {
+                id: `nav-${index + 1}`,
+                text: navName,
+                href: '#',
+                onClick: () => setMainContent(navName)
+            };
+        }), operator: {
+            avatar: { name: 'hello' },
+            title: 'title',
+            actions: [
+                { id: 'profile', primary: 'My profile', href: '#' },
+                { id: 'settings', primary: 'Settings', href: '#' },
+                { id: 'logOut', primary: 'Log out', href: '#' }
+            ]
+        } }));
+};
+CaseViewDemo.args = {
+    showStagesRegion: true,
+    showUtilitiesRegion: true,
+    showSummaryRegion: true,
+    showPulseRegion: true
+};
+CaseViewDemo.argTypes = {
+    showStagesRegion: { control: { type: 'boolean' } },
+    showUtilitiesRegion: { control: { type: 'boolean' } },
+    showSummaryRegion: { control: { type: 'boolean' } },
+    showPulseRegion: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=CaseView.stories.js.map

package/lib/wss/CaseView/CaseView.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.stories.js","sourceRoot":"","sources":["../../../src/wss/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { AppShell, CaseView } from '@pega/cosmos-react-wss';\nimport { CaseSummaryFields, Stages } from '@pega/cosmos-react-work';\n\nimport { AttachmentsMock } from '../../work/CaseView/Attachments.mocks';\nimport { FeedPostDemo } from '../../social/Feed/FeedPost.stories';\nimport {\n  casePreviewPrimaryFields,\n  casePreviewSecondaryFields\n} from '../../work/CaseView/CaseView.mocks';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { defaultAppDemoProps } from '../AppShell/AppShell.mocks';\n\nexport default {\n  title: 'Web Self Service/CaseView',\n  component: CaseView,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface CaseViewDemoProps {\n  showStagesRegion?: boolean;\n  showUtilitiesRegion?: boolean;\n  showSummaryRegion?: boolean;\n  showTasksRegion?: boolean;\n  showPulseRegion?: boolean;\n}\n\nexport const CaseViewDemo: Story<CaseViewDemoProps> = (args: CaseViewDemoProps) => {\n  const [, setMainContent] = useState('Home');\n\n  return (\n    <AppShell\n      caseId='1234'\n      main={\n        <CaseView\n          heading='I have an issue that is impacting my work and I need help'\n          actions={[{ id: '1', text: 'Some text' }]}\n          tasks={{ label: 'Tasks', content: <TasksDemo /> }}\n          stages={\n            args.showStagesRegion\n              ? {\n                  label: 'Stages',\n                  content: (\n                    <Stages\n                      stages={[\n                        { name: 'Create', id: '1', completed: true },\n                        { name: 'Troubleshoot', id: '2', completed: false },\n                        { name: 'Resolve', id: '3', completed: false }\n                      ]}\n                      current=''\n                    />\n                  )\n                }\n              : undefined\n          }\n          summary={\n            args.showSummaryRegion\n              ? {\n                  label: 'Summary',\n                  content: (\n                    <CaseSummaryFields\n                      primaryFields={casePreviewPrimaryFields}\n                      secondaryFields={casePreviewSecondaryFields}\n                    />\n                  )\n                }\n              : undefined\n          }\n          feed={args.showPulseRegion ? { label: 'Feed', content: <FeedPostDemo /> } : undefined}\n          utility={\n            args.showUtilitiesRegion\n              ? { label: 'Utility', content: <AttachmentsMock /> }\n              : undefined\n          }\n        />\n      }\n      appInfo={{\n        appName: 'App name',\n        imageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg'\n      }}\n      navLinks={Array.from({\n        length: defaultAppDemoProps.numberOfNavLinks\n      }).map((_, index) => {\n        const navName = `Navigation ${index + 1}`;\n\n        return {\n          id: `nav-${index + 1}`,\n          text: navName,\n          href: '#',\n          onClick: () => setMainContent(navName)\n        };\n      })}\n      operator={{\n        avatar: { name: 'hello' },\n        title: 'title',\n        actions: [\n          { id: 'profile', primary: 'My profile', href: '#' },\n          { id: 'settings', primary: 'Settings', href: '#' },\n          { id: 'logOut', primary: 'Log out', href: '#' }\n        ]\n      }}\n    />\n  );\n};\n\nCaseViewDemo.args = {\n  showStagesRegion: true,\n  showUtilitiesRegion: true,\n  showSummaryRegion: true,\n  showPulseRegion: true\n};\n\nCaseViewDemo.argTypes = {\n  showStagesRegion: { control: { type: 'boolean' } },\n  showUtilitiesRegion: { control: { type: 'boolean' } },\n  showSummaryRegion: { control: { type: 'boolean' } },\n  showPulseRegion: { control: { type: 'boolean' } }\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-demos",
-  "version": "3.0.0-dev.28.0",
+  "version": "3.0.0-dev.30.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,14 +20,14 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-build": "3.0.0-dev.28.0",
-    "@pega/cosmos-react-condition-builder": "3.0.0-dev.28.0",
-    "@pega/cosmos-react-core": "3.0.0-dev.28.0",
-    "@pega/cosmos-react-cs": "3.0.0-dev.28.0",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.28.0",
-    "@pega/cosmos-react-rte": "3.0.0-dev.28.0",
-    "@pega/cosmos-react-social": "3.0.0-dev.28.0",
-    "@pega/cosmos-react-work": "3.0.0-dev.28.0",
+    "@pega/cosmos-react-build": "3.0.0-dev.30.0",
+    "@pega/cosmos-react-condition-builder": "3.0.0-dev.30.0",
+    "@pega/cosmos-react-core": "3.0.0-dev.30.0",
+    "@pega/cosmos-react-cs": "3.0.0-dev.30.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.30.0",
+    "@pega/cosmos-react-rte": "3.0.0-dev.30.0",
+    "@pega/cosmos-react-social": "3.0.0-dev.30.0",
+    "@pega/cosmos-react-work": "3.0.0-dev.30.0",
     "@types/emoji-mart": "^3.0.4",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",