@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.21.0

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { PreviewShell } from '@pega/cosmos-react-tools';
-import { footerMenuMock, footerTabsMockContent, footerTabsMock } from './PreviewShell.mocks';
+import { footerMenuMock, footerTabsMock, channelsMock, TabContent } from './PreviewShell.mocks';
 export default {
     title: 'Tools/PreviewShell',
     component: PreviewShell,
@@ -11,34 +11,40 @@ 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: args.showHeader
-            ? {
-                appName: args.appName,
-                status: {
-                    variant: args.statusVariant,
-                    children: args.statusText
-                },
-                operator: {
-                    avatar: { name: args.operatorName || '' },
-                    actions: [
-                        { primary: 'Profile', id: 'profile' },
-                        { primary: 'Settings', id: 'settings' },
-                        { primary: 'My applications', id: 'apps' },
-                        { primary: 'Help center', id: 'help' },
-                        { primary: 'Log out', id: 'logout' }
-                    ],
-                    name: args.operatorName
-                }
-            }
-            : undefined, footer: {
-            tabs: footerTabsMock,
-            tabContent,
+    const [channels, setChannels] = useState(channelsMock);
+    const onChannelClick = (id) => {
+        setChannels(cur => cur.map(ch => ({ ...ch, selected: id === ch.id })));
+        newWindow?.close();
+        setNewWindow(null);
+    };
+    return (_jsx(PreviewShell, { header: {
+            appName: args.appName,
+            status: {
+                variant: args.statusVariant,
+                children: args.statusText
+            },
+            operator: {
+                avatar: { name: args.operatorName || '' },
+                actions: [
+                    { primary: 'Profile', id: 'profile' },
+                    { primary: 'Settings', id: 'settings' },
+                    { primary: 'My applications', id: 'apps' },
+                    { primary: 'Help center', id: 'help' },
+                    { primary: 'Log out', id: 'logout' }
+                ],
+                name: args.operatorName
+            },
+            channels,
+            onChannelClick
+        }, footer: {
+            tabs: footerTabsMock.map(tab => ({
+                ...tab,
+                content: _jsx(TabContent, { text: `This is the content for ${tab.name}` })
+            })),
             currentTabId,
             onTabClick: (id) => {
-                setTabContent(`Tab ${+id + 1} content`);
                 setCurrentTabId(id);
             },
             expanded: args.expandFooter,
@@ -61,7 +67,7 @@ export const PreviewShellSkeleton = (args) => {
                     });
                 }),
             menu: { items: footerMenuMock }
-        } }));
+        }, children: _jsx(TabContent, { text: 'This is main content' }) }));
 };
 PreviewShellSkeleton.args = {
     appName: 'Title',
@@ -85,9 +91,18 @@ PreviewShellSkeleton.argTypes = {
     showHeader: { control: { type: 'boolean' } }
 };
 export const PreviewShellDemo = (args) => {
-    const [tabContent, setTabContent] = useState(footerTabsMockContent[1]);
     const [currentTabId, setCurrentTabId] = useState(footerTabsMock[1].id);
     const [newWindow, setNewWindow] = useState(null);
+    const [channels, setChannels] = useState(channelsMock);
+    const onChannelClick = (id) => {
+        setChannels(cur => cur.map(ch => ({ ...ch, selected: id === ch.id })));
+        newWindow?.close();
+        setNewWindow(null);
+    };
+    const selectedChannel = useMemo(() => {
+        const selectedItem = channels.find(ch => ch.selected);
+        return selectedItem || channels[0];
+    }, [channels]);
     useEffect(() => {
         if (newWindow?.self) {
             newWindow.onload = () => {
@@ -100,7 +115,7 @@ export const PreviewShellDemo = (args) => {
             };
         }
     }, [newWindow]);
-    return (_jsx(PreviewShell, { frameurl: `${window.location.href.split('?')[0]}?id=core-pagetemplates--tabbed-page-demo&args=&viewMode=story`, header: args.showHeader
+    return (_jsx(PreviewShell, { header: args.showHeader
             ? {
                 appName: args.appName,
                 onClick: action('Clicked application name'),
@@ -118,27 +133,29 @@ export const PreviewShellDemo = (args) => {
                         { primary: 'Log out', id: 'logout' }
                     ],
                     name: args.operatorName
-                }
+                },
+                channels,
+                onChannelClick
             }
-            : undefined, footer: {
-            tabs: footerTabsMock,
-            currentTabId,
-            tabContent,
-            onTabClick: (id) => {
-                setTabContent(footerTabsMockContent[Number(id)]);
-                setCurrentTabId(id);
-            },
-            expanded: args.expandFooter,
-            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 }
-        } }));
+            : undefined, footer: args.showFooter && selectedChannel?.id === 'browser'
+            ? {
+                tabs: footerTabsMock,
+                currentTabId,
+                onTabClick: (id) => {
+                    setCurrentTabId(id);
+                },
+                expanded: args.expandFooter,
+                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 }
+            }
+            : undefined, children: selectedChannel?.content }));
 };
 PreviewShellDemo.args = {
     appName: 'U+ Desk',
@@ -146,7 +163,8 @@ PreviewShellDemo.args = {
     statusText: 'development',
     operatorName: 'Cindy Turner',
     expandFooter: false,
-    showHeader: false
+    showHeader: true,
+    showFooter: true
 };
 PreviewShellDemo.argTypes = {
     appName: { control: { type: 'text' } },
@@ -157,6 +175,7 @@ PreviewShellDemo.argTypes = {
     statusText: { control: { type: 'text' } },
     operatorName: { control: { type: 'text' } },
     expandFooter: { control: { type: 'boolean' } },
-    showHeader: { control: { type: 'boolean' } }
+    showHeader: { control: { type: 'boolean' } },
+    showFooter: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=PreviewShell.stories.js.map

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 } from 'react';\n\nimport { PreviewShell, PreviewShellProps } from '@pega/cosmos-react-tools';\nimport { StatusProps } from '@pega/cosmos-react-core';\nimport { HeaderProps } from '@pega/cosmos-react-tools/lib/components/PreviewShell/PreviewShell.types';\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: HeaderProps['appName'];\n  statusVariant: StatusProps['variant'];\n  statusText: string;\n  operatorName: HeaderProps['operator']['avatar']['name'];\n  expandFooter: PreviewShellProps['footer']['expanded'];\n  showHeader: boolean;\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        args.showHeader\n          ? {\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          : undefined\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  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 [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        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            }\n          : undefined\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  showHeader: 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  showHeader: { 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/tools/PreviewShell/PreviewShell.styles.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-export declare const StyledContainer: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").FlexProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=PreviewShell.styles.d.ts.map

package/lib/tools/PreviewShell/PreviewShell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,eAAe,mOAG3B,CAAC"}
+{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yGAG3B,CAAC"}

package/lib/tools/PreviewShell/PreviewShell.styles.js

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
-import { Flex } from '@pega/cosmos-react-core';
-export const StyledContainer = styled(Flex) `
+export const StyledContainer = styled.div `
   height: 100%;
   width: 100vw;
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAG1C,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Flex } from '@pega/cosmos-react-core';\n\nexport const StyledContainer = styled(Flex)`\n  height: 100%;\n  width: 100vw;\n`;\n"]}
+{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/tools/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGxC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledContainer = styled.div`\n  height: 100%;\n  width: 100vw;\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.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,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 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 Cosmos Design System',\n  description: 'We have launched a brand new experience to accelerate your workflow!',\n  whatsNewLink: 'https://www.pega.com',\n  whatsNewText: \"See what's new\",\n  image:\n    'https://www.pega.com/sites/default/files/styles/2560/public/media/images/2019-01/pega-logo_0.png'\n};\n\nAppAnnouncementDemo.argTypes = {\n  heading: { control: { type: 'text' } },\n  description: { control: { type: 'text' } },\n  whatsNewLink: { control: { type: 'text' } },\n  whatsNewText: { control: { type: 'text' } },\n  image: { control: { type: 'text' } }\n};\n"]}

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

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react';
+import type { AssignmentsProps } 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;
+interface AssignmentsStoryProps {
+    collapsed?: boolean;
+    count?: AssignmentsProps['count'];
+    openableTasks?: boolean;
+}
+export declare const AssignmentsDemo: StoryFn<AssignmentsStoryProps>;
+//# sourceMappingURL=Assignments.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Assignments/Assignments.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,gBAAgB,EAAiB,MAAM,yBAAyB,CAAC;;AAK/E,wBAGU;AAEV,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,qBAAqB,CAqE1D,CAAC"}

package/lib/work/Assignments/Assignments.stories.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MetaList, Text, Link, DateTimeDisplay, Avatar } from '@pega/cosmos-react-core';
+import { Assignments, tasksHelpers as helpers } from '@pega/cosmos-react-work';
+import { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';
+import viewGroups from '../Tasks/Tasks.mocks';
+export default {
+    title: 'Work/Assignments',
+    component: Assignments
+};
+export const AssignmentsDemo = (args) => {
+    const [hasOpenTask, setHasOpenTask] = useState(false);
+    const [open, setOpen] = useState(true);
+    const activeView = helpers.getSelectedView(viewGroups);
+    const activeViewTaskCount = args.count ?? activeView?.count ?? 0;
+    const taskArray = Array.from({
+        length: args.count ?? activeViewTaskCount
+    }, (_, i) => {
+        const dueIn = 86400000 * i;
+        return {
+            id: `${i}`,
+            name: `Task ${i + 1}`,
+            processName: i % 2 ? 'Demo process' : undefined,
+            avatar: !hasOpenTask && _jsx(Avatar, { name: 'James Gregory' }),
+            meta: !hasOpenTask && (_jsx(MetaList, { items: [
+                    _jsxs(Text, { variant: 'secondary', children: ["Due ", _jsx(DateTimeDisplay, { variant: 'relative', value: Date.now() + dueIn })] }),
+                    _jsx(Link, { href: '#demo', children: "Parent case link" })
+                ] })),
+            additionalActions: [
+                {
+                    id: '1',
+                    text: 'Action 1'
+                },
+                {
+                    id: '2',
+                    text: 'Action 2'
+                }
+            ],
+            onOpen: args.openableTasks !== false
+                ? () => {
+                    setHasOpenTask(true);
+                }
+                : undefined,
+            content: hasOpenTask ? (_jsx(AIButtonFormDemo, { onCancel: () => setHasOpenTask(false), onSubmit: () => setHasOpenTask(false) })) : null
+        };
+    });
+    return (_jsx(Assignments, { count: activeViewTaskCount, items: taskArray, collapsed: args.collapsed !== false ? open : undefined, onToggleCollapsed: args.collapsed !== false
+            ? () => {
+                setOpen(cur => !cur);
+            }
+            : undefined }));
+};
+AssignmentsDemo.args = {
+    openableTasks: true,
+    count: undefined,
+    collapsed: true
+};
+AssignmentsDemo.argTypes = {
+    count: { control: { type: 'number' } },
+    openableTasks: { control: { type: 'boolean' } },
+    collapsed: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Assignments.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.stories.js","sourceRoot":"","sources":["../../../src/work/Assignments/Assignments.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { MetaList, Text, Link, DateTimeDisplay, Avatar } from '@pega/cosmos-react-core';\nimport { Assignments, tasksHelpers as helpers } from '@pega/cosmos-react-work';\nimport type { AssignmentsProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nimport { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';\nimport viewGroups from '../Tasks/Tasks.mocks';\n\nexport default {\n  title: 'Work/Assignments',\n  component: Assignments\n} as Meta;\n\ninterface AssignmentsStoryProps {\n  collapsed?: boolean;\n  count?: AssignmentsProps['count'];\n  openableTasks?: boolean;\n}\n\nexport const AssignmentsDemo: StoryFn<AssignmentsStoryProps> = (args: AssignmentsStoryProps) => {\n  const [hasOpenTask, setHasOpenTask] = useState(false);\n  const [open, setOpen] = useState(true);\n\n  const activeView = helpers.getSelectedView(viewGroups);\n  const activeViewTaskCount = args.count ?? activeView?.count ?? 0;\n\n  const taskArray: TaskItemProps[] = Array.from(\n    {\n      length: args.count ?? activeViewTaskCount\n    },\n    (_, i) => {\n      const dueIn = 86400000 * i;\n\n      return {\n        id: `${i}`,\n        name: `Task ${i + 1}`,\n        processName: i % 2 ? 'Demo process' : undefined,\n        avatar: !hasOpenTask && <Avatar name='James Gregory' />,\n        meta: !hasOpenTask && (\n          <MetaList\n            items={[\n              <Text variant='secondary'>\n                Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n              </Text>,\n              <Link href='#demo'>Parent case link</Link>\n            ]}\n          />\n        ),\n        additionalActions: [\n          {\n            id: '1',\n            text: 'Action 1'\n          },\n          {\n            id: '2',\n            text: 'Action 2'\n          }\n        ],\n        onOpen:\n          args.openableTasks !== false\n            ? () => {\n                setHasOpenTask(true);\n              }\n            : undefined,\n        content: hasOpenTask ? (\n          <AIButtonFormDemo\n            onCancel={() => setHasOpenTask(false)}\n            onSubmit={() => setHasOpenTask(false)}\n          />\n        ) : null\n      };\n    }\n  );\n\n  return (\n    <Assignments\n      count={activeViewTaskCount}\n      items={taskArray}\n      collapsed={args.collapsed !== false ? open : undefined}\n      onToggleCollapsed={\n        args.collapsed !== false\n          ? () => {\n              setOpen(cur => !cur);\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nAssignmentsDemo.args = {\n  openableTasks: true,\n  count: undefined,\n  collapsed: true\n};\n\nAssignmentsDemo.argTypes = {\n  count: { control: { type: 'number' } },\n  openableTasks: { control: { type: 'boolean' } },\n  collapsed: { control: { type: 'boolean' } }\n};\n"]}

package/lib/work/CaseView/Attachments.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Attachments.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/Attachments.mocks.tsx"],"names":[],"mappings":";AA4fA,eAAO,MAAM,eAAe,mBAyH3B,CAAC"}
+{"version":3,"file":"Attachments.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/Attachments.mocks.tsx"],"names":[],"mappings":";AAkgBA,eAAO,MAAM,eAAe,mBAkI3B,CAAC"}