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

package/jsx/work/CaseView/CaseView.mocks.jsx

@@ -1,20 +1,79 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
+import dompurify from 'dompurify';
 import styled, { css } from 'styled-components';
-import { Avatar, Button, Link, createStringMatcher, Modal, Popover, SummaryList, useModalManager, useElement, useOuterEvent, ViewAll, Status, createUID, Flex, useBreakpoint, Icon, Grid } from '@pega/cosmos-react-core';
-import { Glimpse, CaseView, CasePreview, CaseSummaryFields } from '@pega/cosmos-react-work';
-import { TableDemo } from '../../core/Table/Table.stories';
+import { Button, Link, createStringMatcher, Modal, SummaryList, useModalManager, useElement, ViewAll, Status, Flex, Icon, Grid, registerIcon, Banner, createUID, useBreakpoint, Avatar, Tabs, TabPanel, Card, CardHeader, Text } from '@pega/cosmos-react-core';
+import { Glimpse, CaseView, CasePreview } from '@pega/cosmos-react-work';
+import { RichTextViewer } from '@pega/cosmos-react-rte';
+import * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';
+import { PredictionsDemo } from '../Predictions/Predictions.stories';
 import { useMockListData } from '../../core/SummaryList/SummaryList.mocks';
 import { StakeHoldersDemo } from '../Stakeholders/Stakeholders.stories';
 import { TagsDemo } from '../Tags/Tags.stories';
 import { StagesDemo } from '../Stages/Stages.stories';
-import { TasksDemo } from '../Tasks/Tasks.stories';
+import { AssignmentsDemo } from '../Assignments/Assignments.stories';
 import { PulseMock } from './Pulse.mocks';
 import { Details } from './Details.mocks';
 import { AttachmentsMock } from './Attachments.mocks';
-const createDate = new Date(2016, 1, 8);
+registerIcon(userSolidIcon);
+const StyledRSWrapper = styled.div(({ theme }) => css `
+    display: grid;
+    place-items: center;
+    border: 0.1875rem dashed ${theme.base.palette['border-line']};
+    min-height: 6rem;
+    height: var(--content-height-in-view);
+    border-radius: calc(${theme.components.card['border-radius']});
+  `);
+const RSTable = () => {
+    return (<article style={{ display: 'block' }}>
+      <StyledRSWrapper className='rs-wrapper'>
+        <Text variant='secondary'>Table goes here</Text>
+      </StyledRSWrapper>
+    </article>);
+};
+const TableSizingTabs = ({ tabCount = 3 }) => {
+    const [currentTabId, setCurrentTabId] = useState('1');
+    const tabs = [
+        { name: 'Tab 1', id: '1' },
+        { name: 'Tab 2', id: '2' },
+        { name: 'Tab 3', id: '3' }
+    ].slice(0, tabCount);
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <Tabs tabs={tabs} type='horizontal' onTabClick={id => {
+            setCurrentTabId(id);
+        }} currentTabId={currentTabId}/>
+      {tabs.map(tab => (<TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id}>
+          <Flex container={{ direction: 'column', gap: 1 }}>
+            {(() => {
+                switch (tab.id) {
+                    case '1':
+                        return <RSTable />;
+                    case '2':
+                        return (<>
+                      <RSTable />
+                      <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+                        non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                      </p>
+                    </>);
+                    case '3':
+                        return <TableSizingTabs tabCount={2}/>;
+                    default:
+                        return null;
+                }
+            })()}
+          </Flex>
+        </TabPanel>))}
+    </Flex>);
+};
+export const caseId = 'C-123456';
+export const createDate = new Date(2016, 1, 8);
 const msInYear = 1000 * 60 * 60 * 24 * 365;
 const diffInYears = Math.floor((Date.now() - createDate.getTime()) / msInYear);
-export const tabLabels = ['Details', 'Pulse', 'Accounts'];
+export const tabLabels = ['Details', 'Pulse', 'Single table', 'Sub tab table', 'Multiple tables'];
 export const baseCaseTabs = tabLabels.map((name) => {
     return {
         name,
@@ -56,10 +115,10 @@ export const MockSummaryList = ({ icon, name, actions, limit }) => {
     const [items] = useMockListData(() => {
         setLoading(false);
     }, { count: limit });
-    return (<SummaryList loading={loading} items={items} icon={icon} name={name} count={loading ? undefined : count} actions={actions !== null
+    return (<SummaryList loading={loading} items={items} icon={icon} name={name} headingTag='h3' count={loading ? undefined : count} actions={actions !== null
             ? [
                 {
-                    text: `Add new ${name}`,
+                    text: 'Add',
                     id: `${name}:addNew`,
                     icon: 'plus',
                     onClick() {
@@ -80,31 +139,18 @@ export const MockSummaryList = ({ icon, name, actions, limit }) => {
         }}/>);
 };
 export const MockOperatorFieldValue = () => {
-    const [showGlimpse, setShowGlimpse] = useState(false);
-    const [operatorBtn, setOperatorBtn] = useElement(null);
-    const [popoverEl, setPopoverEl] = useElement(null);
-    useOuterEvent('click', [popoverEl], () => {
-        setShowGlimpse(false);
-    });
-    const onKeydown = (e) => {
-        if (showGlimpse && e.key === 'Escape') {
-            setShowGlimpse(false);
-        }
-    };
-    useEffect(() => {
-        document.addEventListener('keydown', onKeydown);
-        return () => {
-            document.removeEventListener('keydown', onKeydown);
-        };
-    }, [showGlimpse]);
+    const [target, setTarget] = useElement(null);
     return (<>
-      <Button variant='link' onClick={() => {
-            setShowGlimpse(true);
-        }} ref={setOperatorBtn}>
+      <Button variant='link' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
         cosmos@pega.com
       </Button>
-      {showGlimpse && (<Popover target={operatorBtn} ref={setPopoverEl} strategy='fixed' placement='bottom-start' arrow>
-          <Glimpse id='cosmos' primary='Cosmos Operator' secondary={['Director of the stars']} visual={<Avatar size='l' name='Cosmos Operator'/>} fields={[
+      {target && (<Glimpse id='cosmos' target={target} onDismiss={() => setTarget(null)} heading={{
+                primary: 'Cosmos Operator',
+                secondary: 'Director of the stars',
+                visual: <Avatar name='Cosmos Operator'/>
+            }} fields={[
                 {
                     id: '1',
                     name: 'Department',
@@ -130,8 +176,7 @@ export const MockOperatorFieldValue = () => {
                     name: 'Telephone',
                     value: <Link href='tel:555-123-4567'>555-123-4567</Link>
                 }
-            ]}/>
-        </Popover>)}
+            ]} onViewProfile={() => { }}/>)}
     </>);
 };
 export const PreviewLinkComponent = ({ token: linkToken, setPreviewCaseId, setPreviewCurrentTabId }) => {
@@ -170,8 +215,24 @@ export const getTabContent = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
                 }}/>)
         },
         {
-            id: 'Accounts',
-            content: <TableDemo />
+            id: 'Single table',
+            content: <RSTable />
+        },
+        {
+            id: 'Sub tab table',
+            content: <TableSizingTabs />
+        },
+        {
+            id: 'Multiple tables',
+            content: (<Card>
+          <CardHeader>
+            <Text variant='h2'>Multiple tables</Text>
+          </CardHeader>
+          <Flex container={{ direction: 'column', gap: 2 }}>
+            <RSTable />
+            <RSTable />
+          </Flex>
+        </Card>)
         },
         {
             id: 'not found',
@@ -189,8 +250,24 @@ export const previewTabContent = [
         content: <PulseMock />
     },
     {
-        id: 'Accounts',
-        content: <TableDemo />
+        id: 'Single table',
+        content: <RSTable />
+    },
+    {
+        id: 'Sub tab table',
+        content: <TableSizingTabs />
+    },
+    {
+        id: 'Multiple tables',
+        content: (<Card>
+        <CardHeader>
+          <Text variant='h2'>Multiple tables</Text>
+        </CardHeader>
+        <Flex container={{ direction: 'column', gap: 2 }}>
+          <RSTable />
+          <RSTable />
+        </Flex>
+      </Card>)
     },
     {
         id: 'not found',
@@ -199,9 +276,17 @@ export const previewTabContent = [
 ];
 export const getPrimaryFields = () => {
     return [
+        {
+            name: 'Create date',
+            value: createDate.toDateString()
+        },
         {
             name: 'Member ID',
-            value: 'M205435569FD'
+            value: 'M205435569FD1234567890'
+        },
+        {
+            name: 'Assigned to',
+            value: 'Dean Thomas'
         },
         {
             name: 'Priority',
@@ -214,17 +299,19 @@ const baseSecondaryFields = [
         name: 'Status',
         value: <Status variant='info'>New</Status>
     },
-    {
-        name: 'Assigned to',
-        value: 'Dean Thomas'
-    },
-    {
-        name: 'Create date',
-        value: createDate.toDateString()
-    },
     {
         name: 'Update date',
         value: `${diffInYears} years ago`
+    },
+    {
+        name: 'Description',
+        value: (<RichTextViewer content='<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque est.</p> </br> <p>Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.</p>' type='html'/>),
+        simpleValue: dompurify.sanitize('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque est.</p> </br> <p>Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.</p>', {
+            ALLOWED_TAGS: [],
+            ALLOWED_ATTR: [],
+            KEEP_CONTENT: true
+        }),
+        variant: 'stacked'
     }
 ];
 export const getSecondaryFields = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
@@ -235,7 +322,7 @@ export const getSecondaryFields = ({ setPreviewCaseId, setPreviewCurrentTabId })
             value: <MockOperatorFieldValue />
         },
         {
-            name: 'Previewable Case',
+            name: 'Previewable case',
             value: (<Link href='/cases/C-456' previewable onPreview={() => {
                     setPreviewCaseId('C-456');
                     setPreviewCurrentTabId('summary-C-456');
@@ -256,17 +343,25 @@ export const casePreviewPrimaryFields = [
     }
 ];
 export const casePreviewSecondaryFields = baseSecondaryFields;
-export const getParentCases = ({ caseId, setPreviewCaseId, setPreviewCurrentTabId }) => {
-    const ids = new Set([caseId]);
-    return Array.from({ length: 5 }, (_, i) => {
-        let id;
-        do {
-            id = `C-${Math.floor(Math.random() * 200 + 100)}`;
-        } while (ids.has(id));
-        ids.add(id);
+export const getParentCases = ({ setPreviewCaseId, setPreviewCurrentTabId }) => {
+    let ids = [];
+    const randomId = (seed = 1) => {
+        const x = Math.sin(seed);
+        let rand = x - Math.floor(x);
+        if (rand < 0.1) {
+            rand += 0.1;
+        }
+        return Math.floor(rand * 1000000);
+    };
+    for (let i = 0; i < 5; i += 1) {
+        ids.push(randomId(i + 1));
+    }
+    ids = ids.sort((a, b) => a - b);
+    return ids.map(num => {
+        const id = `C-${num}`;
         return {
             id,
-            primary: `Parent ${5 - i} - ${id}`,
+            primary: id,
             href: `/cases/${id}`,
             previewable: true,
             onPreview: () => {
@@ -276,21 +371,28 @@ export const getParentCases = ({ caseId, setPreviewCaseId, setPreviewCurrentTabI
         };
     });
 };
-export const Utilities = () => {
+export const Utilities = ({ predictions, attachments, stakeholders, followers, tags }) => {
     return (<>
-      <AttachmentsMock />
-      <StakeHoldersDemo />
-      <MockSummaryList icon='user-star' name='Followers'/>
-      <TagsDemo />
+      {predictions && <PredictionsDemo />}
+      {attachments && <AttachmentsMock />}
+      {stakeholders && <StakeHoldersDemo />}
+      {followers && <MockSummaryList icon='user-star' name='Followers'/>}
+      {tags && <TagsDemo />}
     </>);
 };
-export const getUtilitiesSummaryItems = () => {
-    return [
-        { iconName: 'paper-clip', count: 4 },
-        { iconName: 'user-search-solid', count: 10 },
-        { iconName: 'user-star-solid', count: 5 },
-        { iconName: 'tag', count: 10 }
-    ];
+export const getUtilitiesSummaryItems = ({ predictions, attachments, stakeholders, followers, tags }) => {
+    const items = [];
+    if (predictions)
+        items.push({ iconName: 'polaris', count: 4, name: 'Predictions' });
+    if (attachments)
+        items.push({ iconName: 'paper-clip', count: 4, name: 'Attachments' });
+    if (stakeholders)
+        items.push({ iconName: 'user-search-solid', count: 10, name: 'Stakeholders' });
+    if (followers)
+        items.push({ iconName: 'user-star-solid', count: 5, name: 'Followers' });
+    if (tags)
+        items.push({ iconName: 'tag', count: 10, name: 'Tags' });
+    return items;
 };
 export const getCaseActions = () => {
     return Array.from({ length: 12 }, (_, i) => {
@@ -301,8 +403,41 @@ export const getCaseActions = () => {
         };
     });
 };
-export const getPromotedActions = () => {
-    return [{ id: createUID(), text: 'Promoted action', onClick: () => { } }];
+const getHeading = (size) => {
+    return {
+        short: 'Cosmos demo case',
+        medium: 'Complicated cosmos demo case of some distinction',
+        long: 'The scenario in this case is almost too obscure to put into words and so the title is quite long'
+    }[size];
+};
+export const getPromotedActions = (count) => {
+    return [
+        {
+            id: createUID(),
+            text: 'Reassign',
+            onClick: () => { }
+        },
+        {
+            id: createUID(),
+            text: 'Add dependency',
+            onClick: () => { }
+        },
+        {
+            id: createUID(),
+            text: 'Clone',
+            onClick: () => { }
+        },
+        {
+            id: createUID(),
+            text: 'Move',
+            onClick: () => { }
+        },
+        {
+            id: createUID(),
+            text: 'Withdraw',
+            onClick: () => { }
+        }
+    ].slice(0, count);
 };
 const StyledPersistentUtilityContent = styled.div(({ theme }) => {
     return css `
@@ -315,13 +450,12 @@ export const PersistentUtilityContent = () => {
       Persistent utility content
     </Flex>);
 };
-export const CaseViewMock = ({ parentCases, tasks, stages, persistentUtility, heading }) => {
-    const caseId = 'C-123';
+export const CaseViewMock = ({ caseId: caseIdProp, heading, subheading, parentCases = false, promotedActions = 1, summaryFields = 'All', tabs, stages = true, tasks = true, taskCount = 4, utilitiesExpanded: utilitiesExpandedProp = true, predictions = true, attachments = true, stakeholders = true, followers = true, tags = true, persistentUtility = false, intelligentGuidance = false, banner = false, headingLength, defaultExpanded }) => {
     const [previewCaseId, setPreviewCaseId] = useState(null);
     const [previewCurrentTabId, setPreviewCurrentTabId] = useState(baseCaseTabs[0].id);
     const isMediumOrAbove = useBreakpoint('md');
-    const [demoCurrentTabId, setDemoCurrentTabId] = useState(isMediumOrAbove ? baseCaseTabs[0].id : `summary-${caseId}`);
-    const demoTabs = {
+    const [demoCurrentTabId, setDemoCurrentTabId] = useState(isMediumOrAbove ? tabs?.currentTabId ?? baseCaseTabs[0].id : `summary-${caseIdProp}`);
+    const demoTabs = tabs ?? {
         items: baseCaseTabs,
         currentTabId: demoCurrentTabId,
         onClick: setDemoCurrentTabId
@@ -332,15 +466,18 @@ export const CaseViewMock = ({ parentCases, tasks, stages, persistentUtility, he
         onClick: setPreviewCurrentTabId
     };
     const parentCasesContent = getParentCases({
-        caseId,
+        caseId: caseIdProp,
         setPreviewCaseId,
         setPreviewCurrentTabId
     });
     const demoStages = <StagesDemo currentStage={3}/>;
     const [followed, setFollowed] = useState(false);
-    const [summaryExpanded, setSummaryExpanded] = useState(true);
-    const [utilitiesExpanded, setUtilitiesExpanded] = useState(true);
-    const tabContent = getTabContent({ setPreviewCaseId, setPreviewCurrentTabId });
+    const [summaryExpanded, setSummaryExpanded] = useState(!!defaultExpanded);
+    const [utilitiesExpanded, setUtilitiesExpanded] = useState(utilitiesExpandedProp);
+    const tabContent = getTabContent({
+        setPreviewCaseId,
+        setPreviewCurrentTabId
+    });
     return (<>
       {previewCaseId && (<CasePreview open onAfterClose={() => {
                 setPreviewCaseId(null);
@@ -348,21 +485,57 @@ export const CaseViewMock = ({ parentCases, tasks, stages, persistentUtility, he
                 ? [...parentCasesContent]
                     .filter(c => c.id !== previewCaseId)
                     .map(c => ({ ...c, id: `preview-${c.id}` }))
-                : undefined} heading='Previewable demo case' subheading={previewCaseId} caseLink={{ href: `/cases/${previewCaseId}`, target: '_blank' }} icon={<Icon name='user-solid'/>} followed={!followed} onEdit={() => { }} actions={getCaseActions()} summary={<CaseSummaryFields primaryFields={casePreviewPrimaryFields} secondaryFields={casePreviewSecondaryFields}/>} stages={demoStages} tasks={<TasksDemo count={4}/>} tabs={previewTabs} tabContent={tabContent} utilities={<Grid container={{ rowGap: 2 }}>
-              <Utilities />
+                : undefined} heading='Previewable demo case' subheading={previewCaseId} caseLink={{ href: `/cases/${previewCaseId}`, target: '_blank' }} icon={<Icon name='user-solid'/>} followed={!followed} onEdit={() => { }} actions={getCaseActions()} promotedActions={getPromotedActions(2)} summaryFields={{
+                primary: casePreviewPrimaryFields,
+                secondary: casePreviewSecondaryFields
+            }} stages={demoStages} tasks={<AssignmentsDemo count={4}/>} tabs={previewTabs} tabContent={tabContent} utilities={<Grid container={{ rowGap: 2 }}>
+              <Utilities predictions={predictions} attachments={attachments} stakeholders={stakeholders} followers={followers} tags={tags}/>
             </Grid>}/>)}
 
-      <CaseView caseId={caseId} parentCases={parentCases
+      <CaseView caseId={caseIdProp} parentCases={parentCases
             ? getParentCases({
-                caseId,
+                caseId: caseIdProp,
                 setPreviewCaseId,
                 setPreviewCurrentTabId
             })
-            : undefined} heading={heading} subheading={caseId} icon={<Icon name='user-solid'/>} followed={followed} onFollowedChange={setFollowed} actions={getCaseActions()} promotedActions={getPromotedActions()} onEdit={() => { }} summary={<CaseSummaryFields primaryFields={getPrimaryFields()} secondaryFields={getSecondaryFields({ setPreviewCaseId, setPreviewCurrentTabId })}/>} summaryExpanded={summaryExpanded} onToggleSummary={() => {
+            : undefined} heading={headingLength ? getHeading(headingLength) : heading} subheading={subheading} icon={<Icon name='user-solid'/>} followed={followed} onFollowedChange={setFollowed} actions={getCaseActions()} promotedActions={promotedActions ? getPromotedActions(promotedActions) : undefined} onEdit={() => { }} summaryFields={(() => {
+            const obj = {
+                primary: getPrimaryFields(),
+                secondary: getSecondaryFields({ setPreviewCaseId, setPreviewCurrentTabId })
+            };
+            if (summaryFields === 'Primary only') {
+                obj.secondary = undefined;
+            }
+            if (summaryFields === 'Secondary only') {
+                obj.primary = undefined;
+            }
+            return obj;
+        })()} summaryExpanded={summaryExpanded} onToggleSummary={() => {
             setSummaryExpanded(cur => !cur);
-        }} tabs={demoTabs} persistentUtility={persistentUtility} stages={stages && demoStages} tasks={tasks && <TasksDemo count={4}/>} tabContent={tabContent} utilities={<Utilities />} utilitiesSummaryItems={getUtilitiesSummaryItems()} utilitiesExpanded={utilitiesExpanded} onToggleUtilities={() => {
+        }} tabs={demoTabs} persistentUtility={(() => {
+            if (typeof persistentUtility === 'boolean') {
+                return persistentUtility
+                    ? { title: 'Persistent utility', content: <PersistentUtilityContent /> }
+                    : undefined;
+            }
+            return persistentUtility;
+        })()} stages={stages ? demoStages : undefined} tasks={tasks ? <AssignmentsDemo count={taskCount}/> : undefined} tabContent={tabContent} utilities={<Utilities predictions={predictions} attachments={attachments} stakeholders={stakeholders} followers={followers} tags={tags}/>} utilitiesSummaryItems={getUtilitiesSummaryItems({
+            predictions,
+            attachments,
+            stakeholders,
+            followers,
+            tags
+        })} utilitiesExpanded={utilitiesExpanded} onToggleUtilities={() => {
             setUtilitiesExpanded(cur => !cur);
-        }}/>
+        }} intelligentGuidance={intelligentGuidance} banners={banner ? (<Banner variant='urgent' messages={[
+                {
+                    label: 'An error occurred',
+                    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                    action: {
+                        text: 'Take acton'
+                    }
+                }
+            ]}/>) : undefined}/>
     </>);
 };
 //# sourceMappingURL=CaseView.mocks.jsx.map