@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

package/jsx/core/MultiStep/MultiStep.stories.jsx

@@ -1,56 +0,0 @@
-import { useState } from 'react';
-import { Button, Flex, MultiStep, Text } from '@pega/cosmos-react-core';
-export default {
-    title: 'Core/MultiStep',
-    component: MultiStep
-};
-export const MultiStepDemo = () => {
-    const [currentId, setCurrentId] = useState('Step-1');
-    const [cancelled, setCancelled] = useState(false);
-    const [finished, setFinished] = useState(false);
-    const numSteps = 6;
-    const restart = () => {
-        setCancelled(false);
-        setFinished(false);
-        setCurrentId('Step-1');
-    };
-    const getActions = (stepNum) => {
-        return (<>
-        <Button onClick={() => setCancelled(true)}>Cancel</Button>
-        <div>
-          {stepNum > 1 && (<Button onClick={() => setCurrentId(`Step-${stepNum - 1}`)}>Previous</Button>)}
-          {stepNum !== numSteps && (<Button variant='primary' onClick={() => setCurrentId(`Step-${stepNum + 1}`)}>
-              Next
-            </Button>)}
-          {stepNum === numSteps && (<Button type='submit' variant='primary' onClick={() => setFinished(true)}>
-              Finish
-            </Button>)}
-        </div>
-      </>);
-    };
-    const stepData = Array.from({ length: numSteps }).map((_, index) => {
-        const depth = ((index / 1) % 2);
-        const id = `Step-${index + 1}`;
-        const step = {
-            name: `Label for ${id}`,
-            id,
-            depth,
-            onClick: () => setCurrentId(id),
-            actions: getActions(index + 1)
-        };
-        step.content = <Text>Content for {id}</Text>;
-        return step;
-    });
-    return (<>
-      {cancelled && (<Flex container={{ gap: 2 }}>
-          <Text variant='h1'>MultiStep cancelled</Text>
-          <Button onClick={restart}>Restart</Button>
-        </Flex>)}
-      {finished && (<Flex container={{ gap: 2 }}>
-          <Text variant='h1'>MultiStep finished</Text>
-          <Button onClick={restart}>Restart</Button>
-        </Flex>)}
-      {!cancelled && !finished && <MultiStep steps={stepData} currentId={currentId}/>}
-    </>);
-};
-//# sourceMappingURL=MultiStep.stories.jsx.map

package/jsx/core/MultiStep/MultiStep.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiStep.stories.jsx","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ReactNode, useState } from 'react';\n\nimport { Button, Flex, MultiStep, Step, Text } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/MultiStep',\n  component: MultiStep\n} as Meta;\n\nexport const MultiStepDemo: Story = () => {\n  const [currentId, setCurrentId] = useState('Step-1');\n  const [cancelled, setCancelled] = useState(false);\n  const [finished, setFinished] = useState(false);\n  const numSteps = 6;\n\n  const restart = () => {\n    setCancelled(false);\n    setFinished(false);\n    setCurrentId('Step-1');\n  };\n\n  const getActions = (stepNum: number): ReactNode => {\n    return (\n      <>\n        <Button onClick={() => setCancelled(true)}>Cancel</Button>\n        <div>\n          {stepNum > 1 && (\n            <Button onClick={() => setCurrentId(`Step-${stepNum - 1}`)}>Previous</Button>\n          )}\n          {stepNum !== numSteps && (\n            <Button variant='primary' onClick={() => setCurrentId(`Step-${stepNum + 1}`)}>\n              Next\n            </Button>\n          )}\n          {stepNum === numSteps && (\n            <Button type='submit' variant='primary' onClick={() => setFinished(true)}>\n              Finish\n            </Button>\n          )}\n        </div>\n      </>\n    );\n  };\n\n  const stepData = Array.from({ length: numSteps }).map((_, index) => {\n    const depth = ((index / 1) % 2) as 0 | 1;\n    const id = `Step-${index + 1}`;\n    const step: Step = {\n      name: `Label for ${id}`,\n      id,\n      depth,\n      onClick: () => setCurrentId(id),\n      actions: getActions(index + 1)\n    };\n\n    step.content = <Text>Content for {id}</Text>;\n\n    return step;\n  });\n\n  return (\n    <>\n      {cancelled && (\n        <Flex container={{ gap: 2 }}>\n          <Text variant='h1'>MultiStep cancelled</Text>\n          <Button onClick={restart}>Restart</Button>\n        </Flex>\n      )}\n      {finished && (\n        <Flex container={{ gap: 2 }}>\n          <Text variant='h1'>MultiStep finished</Text>\n          <Button onClick={restart}>Restart</Button>\n        </Flex>\n      )}\n      {!cancelled && !finished && <MultiStep steps={stepData} currentId={currentId} />}\n    </>\n  );\n};\n"]}

package/jsx/cs/CSCaseView/CSAppShell.stories.d.ts

@@ -1,11 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import { InteractionTimerStoryProps } from '../InteractionTimer/InteractionTimer.stories';
-declare const _default: Meta<import("@storybook/react").Args>;
-export default _default;
-interface CSAppShellProps {
-    isDraggable?: boolean;
-    hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];
-    enableSla?: InteractionTimerStoryProps['showTimer'];
-}
-export declare const CSAppShell: Story<CSAppShellProps>;
-//# sourceMappingURL=CSAppShell.stories.d.ts.map

package/jsx/cs/CSCaseView/CSAppShell.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSAppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0B/C,OAAO,EAEL,0BAA0B,EAC3B,MAAM,8CAA8C,CAAC;;AAQtD,wBAeU;AAEV,UAAU,eAAe;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2BAA2B,CAAC,EAAE,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;IAC7E,SAAS,CAAC,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;CACrD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAoS7C,CAAC"}

package/jsx/cs/CSCaseView/CSAppShell.stories.jsx

@@ -1,248 +0,0 @@
-import { useEffect, useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { createUID, Status, TwoColumnPage, Icon, registerIcon, Button, Form, Flex, Input, Select, Option } from '@pega/cosmos-react-core';
-import * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';
-import { CallControlPanelIcon } from '@pega/cosmos-react-cs';
-import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
-import { CaseViewDemo } from '../../work/CaseView/CaseView.stories';
-import { TasksDemo } from '../../work/Tasks/Tasks.stories';
-import { FeedDemo } from '../../social/Feed/Feed.stories';
-import { EmailDemo } from '../../social/Email/Email.stories';
-import { StandardChat } from '../../social/Chat/Chat.stories';
-import { TaskManagerDemo } from '../TaskManager/TaskManager.stories';
-import { InteractionTimerDemo as InteractionTimerStory } from '../InteractionTimer/InteractionTimer.stories';
-import { CallControlPanelDemo } from '../CallControlPanel/CallControlPanel.stories';
-import { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';
-import { AppShellMockData, CallLoginForm } from './CSCaseView.mocks';
-registerIcon(chatSolidIcon);
-export default {
-    title: 'Customer Service/CS App Shell',
-    parameters: {
-        layout: 'fullscreen'
-    },
-    args: {
-        isDraggable: true,
-        hasInteractionNotifications: true,
-        enableSla: true
-    },
-    argTypes: {
-        isDraggable: { control: { type: 'boolean' } },
-        hasInteractionNotifications: { control: { type: 'boolean' } },
-        enableSla: { control: { type: 'boolean' } }
-    }
-};
-export const CSAppShell = (args) => {
-    const CaseData = AppShellMockData;
-    const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis'/>;
-    const [mainContent, setMainContent] = useState(home);
-    const [caseID, setCaseID] = useState(1001);
-    const [agentStatus, setAgentStatus] = useState(userStatusOptions[0]);
-    const [callPanelVisible, setCallPanelVisible] = useState(false);
-    const [cases, setCases] = useState([]);
-    const [links, setLinks] = useState([
-        {
-            id: '01',
-            name: 'Home',
-            href: '#home',
-            icon: 'home-solid'
-        }
-    ]);
-    const tabs = [
-        { name: 'Customer  notes', id: 'Pulse' },
-        { name: 'Accounts', id: 'Accounts' }
-    ];
-    const demoActions = [
-        {
-            text: 'Change stage',
-            id: createUID(),
-            onClick: action('Clicked on change stage')
-        },
-        {
-            text: 'Wrap up',
-            id: createUID(),
-            onClick: action('Clicked on Wrap up')
-        },
-        {
-            text: 'Exit interaction',
-            id: createUID(),
-            onClick: action('Clicked on exit interaction')
-        }
-    ];
-    const RenderCaseView = (name) => {
-        if (name) {
-            const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];
-            const secondaryFields = secondaryField.map((field) => {
-                if (field.name === 'Status') {
-                    return { ...field, value: <Status variant='success'>{field.value}</Status> };
-                }
-                return field;
-            });
-            let persistentUtility;
-            if (name === 'Mail Interaction') {
-                persistentUtility = {
-                    content: <EmailDemo hideSuggestions/>,
-                    title: 'Email'
-                };
-            }
-            else if (name === 'Chat Interaction') {
-                persistentUtility = {
-                    content: <StandardChat chatWidth='100%'/>,
-                    title: 'Chat'
-                };
-            }
-            setMainContent(<CaseViewDemo caseId={caseId} heading={heading} parentCases={[]} actions={demoActions} primaryFields={primaryFields} secondaryFields={secondaryFields} tabs={tabs} stages={false} tasksWidget={<TaskManagerDemo />} persistentUtility={persistentUtility} showUtilities={false} showFollowedIcon={false} defaultCollapsedUtilities/>);
-        }
-    };
-    const setActiveItem = (key) => {
-        setCases((prevCases = []) => {
-            return prevCases.map(caseItem => {
-                return { ...caseItem, active: caseItem.id === key };
-            });
-        });
-        setLinks((prevLinks = []) => {
-            return prevLinks.map(link => {
-                return {
-                    ...link,
-                    active: link.name === key
-                };
-            });
-        });
-    };
-    const createInteraction = (createLink) => {
-        const { primary, secondary, icon, customerName } = createLink;
-        const key = createUID();
-        const createdAt = new Date().getTime();
-        const newCase = {
-            visual: (<InteractionTimerStory icon={icon} showTimer={args.enableSla} hasNotifications={args.hasInteractionNotifications} meta={args.enableSla ? '0:00' : createLink.meta}/>),
-            primary: customerName || 'Unknown customer',
-            secondary,
-            createdAt,
-            id: key,
-            active: true,
-            onClick: () => {
-                setActiveItem(key);
-                RenderCaseView(primary);
-            },
-            onDismiss: (e) => {
-                setActiveItem('Home');
-                e.stopPropagation();
-                setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));
-                setMainContent(home);
-            }
-        };
-        setCases((prevCases = []) => [...prevCases, newCase]);
-        setActiveItem(key);
-        setCaseID(caseID + 1);
-        RenderCaseView(primary);
-    };
-    const createLinks = [
-        {
-            primary: 'Phone Interaction',
-            secondary: 'Received 20s ago',
-            icon: 'phone-solid',
-            meta: 'FH',
-            customerName: 'Ginger Ventura'
-        },
-        {
-            primary: 'Chat Interaction',
-            secondary: 'Sent 2h ago',
-            icon: 'chat-solid',
-            meta: 'SC',
-            customerName: 'Sara Davis'
-        },
-        {
-            primary: 'Mail Interaction',
-            secondary: 'Received 20s ago',
-            icon: 'mail-solid',
-            meta: 'JB',
-            customerName: 'John Brown'
-        }
-    ].map(item => {
-        const { primary, icon } = item;
-        return {
-            name: primary,
-            icon,
-            href: '',
-            onClick: () => {
-                createInteraction(item);
-            }
-        };
-    });
-    useEffect(() => {
-        createInteraction({
-            primary: 'Phone Interaction',
-            secondary: 'Received 20s ago',
-            icon: 'phone-solid',
-            meta: 'GV',
-            customerName: 'Ginger Ventura'
-        });
-    }, []);
-    const actions = (<>
-      <Button name='Cancel' variant='secondary' onClick={(e) => {
-            action('Click')(`${e.currentTarget.name}:${e.type}`);
-        }}>
-        Cancel
-      </Button>
-      <Button name='Submit' type='submit' variant='primary'>
-        Log in
-      </Button>
-    </>);
-    const chatSettings = (<Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>
-      <Form actions={actions}>
-        <Input name='agentId' label='Agent Id' autoComplete='off'/>
-
-        <Input name='password' type='password' label='Password' autoComplete='off'/>
-        <Select label='Make me'>
-          <Option>Available</Option>
-          <Option>Unavailable</Option>
-        </Select>
-      </Form>
-    </Flex>);
-    const utils = [
-        {
-            name: 'Chat settings',
-            visual: <Icon name='chat-solid'/>,
-            drawerView: chatSettings,
-            drawerHeader: 'Pega Chat Log In'
-        },
-        {
-            name: 'Call panel',
-            visual: (<CallControlPanelIcon status={agentStatus.status} label={agentStatus.label} variant='icon' panelVisible={callPanelVisible}/>),
-            ...(agentStatus.status === 'offline'
-                ? {
-                    drawerView: (<Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>
-                <CallLoginForm ctiLinkOptions={{
-                            valid: 'It will be accepted',
-                            invalid: 'This will raise an error'
-                        }} onLogin={ctiLink => {
-                            if (ctiLink === 'invalid')
-                                return Promise.resolve('Login incorrect');
-                            setAgentStatus(userStatusOptions[1]);
-                            setCallPanelVisible(true);
-                            return Promise.resolve(undefined);
-                        }}/>
-              </Flex>),
-                    drawerHeader: 'Pega Call Log In'
-                }
-                : {
-                    onClick: () => setCallPanelVisible(isVisible => !isVisible)
-                })
-        }
-    ];
-    const appInfo = {
-        href: 'https://www.pega.com/',
-        imageSrc: 'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',
-        fullImageSrc: 'Full Image Source',
-        appName: 'CS AppShell'
-    };
-    return (<>
-      <AppShellDemo main={mainContent} appInfo={appInfo} cases={cases} createLinks={createLinks} caseLinks={links} utils={utils} onLinkClick={(name) => {
-            if (name === 'Home') {
-                setMainContent(home);
-            }
-            setActiveItem(name);
-        }}/>
-      {callPanelVisible && (<CallControlPanelDemo heading='Agent' status={agentStatus.id} onStatusChange={setAgentStatus} isDraggable={args.isDraggable}/>)}
-    </>);
-};
-//# sourceMappingURL=CSAppShell.stories.jsx.map

package/jsx/cs/CSCaseView/CSAppShell.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSAppShell.stories.jsx","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSAppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState, MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  AppShellProps,\n  createUID,\n  Status,\n  TwoColumnPage,\n  Icon,\n  registerIcon,\n  Button,\n  Form,\n  Flex,\n  Input,\n  Select,\n  Option\n} from '@pega/cosmos-react-core';\nimport * as chatSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/chat-solid.icon';\nimport { CallControlPanelIcon, UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\nimport { CaseViewDemo } from '../../work/CaseView/CaseView.stories';\nimport { TasksDemo } from '../../work/Tasks/Tasks.stories';\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\nimport { EmailDemo } from '../../social/Email/Email.stories';\nimport { StandardChat } from '../../social/Chat/Chat.stories';\nimport { TaskManagerDemo } from '../TaskManager/TaskManager.stories';\nimport {\n  InteractionTimerDemo as InteractionTimerStory,\n  InteractionTimerStoryProps\n} from '../InteractionTimer/InteractionTimer.stories';\nimport { CallControlPanelDemo } from '../CallControlPanel/CallControlPanel.stories';\nimport { userStatusOptions } from '../CallControlPanel/CallControlPanel.mocks';\n\nimport { AppShellMockData, CallLoginForm } from './CSCaseView.mocks';\n\nregisterIcon(chatSolidIcon);\n\nexport default {\n  title: 'Customer Service/CS App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  },\n  args: {\n    isDraggable: true,\n    hasInteractionNotifications: true,\n    enableSla: true\n  },\n  argTypes: {\n    isDraggable: { control: { type: 'boolean' } },\n    hasInteractionNotifications: { control: { type: 'boolean' } },\n    enableSla: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface CSAppShellProps {\n  isDraggable?: boolean;\n  hasInteractionNotifications?: InteractionTimerStoryProps['hasNotifications'];\n  enableSla?: InteractionTimerStoryProps['showTimer'];\n}\n\nexport const CSAppShell: Story<CSAppShellProps> = (args: CSAppShellProps) => {\n  const CaseData = AppShellMockData as any;\n\n  const home = <TwoColumnPage a={<FeedDemo />} b={<TasksDemo />} title='Welcome, Sara Davis' />;\n\n  const [mainContent, setMainContent] = useState(home);\n  const [caseID, setCaseID] = useState(1001);\n  const [agentStatus, setAgentStatus] = useState<UserAvailabilityStatusOption>(\n    userStatusOptions[0] as UserAvailabilityStatusOption\n  );\n  const [callPanelVisible, setCallPanelVisible] = useState(false);\n  const [cases, setCases] = useState<AppShellProps['cases']>([]);\n  const [links, setLinks] = useState<AppShellProps['links']>([\n    {\n      id: '01',\n      name: 'Home',\n      href: '#home',\n      icon: 'home-solid'\n    }\n  ]);\n\n  const tabs = [\n    { name: 'Customer  notes', id: 'Pulse' },\n    { name: 'Accounts', id: 'Accounts' }\n  ];\n\n  const demoActions = [\n    {\n      text: 'Change stage',\n      id: createUID(),\n      onClick: action('Clicked on change stage')\n    },\n    {\n      text: 'Wrap up',\n      id: createUID(),\n      onClick: action('Clicked on Wrap up')\n    },\n    {\n      text: 'Exit interaction',\n      id: createUID(),\n      onClick: action('Clicked on exit interaction')\n    }\n  ];\n\n  const RenderCaseView = (name: string) => {\n    if (name) {\n      const { caseId, heading, primaryFields, secondaryFields: secondaryField } = CaseData[name];\n      const secondaryFields = secondaryField.map((field: any) => {\n        if (field.name === 'Status') {\n          return { ...field, value: <Status variant='success'>{field.value}</Status> };\n        }\n        return field;\n      });\n      let persistentUtility;\n      if (name === 'Mail Interaction') {\n        persistentUtility = {\n          content: <EmailDemo hideSuggestions />,\n          title: 'Email'\n        };\n      } else if (name === 'Chat Interaction') {\n        persistentUtility = {\n          content: <StandardChat chatWidth='100%' />,\n          title: 'Chat'\n        };\n      }\n      setMainContent(\n        <CaseViewDemo\n          caseId={caseId}\n          heading={heading}\n          parentCases={[]}\n          actions={demoActions}\n          primaryFields={primaryFields}\n          secondaryFields={secondaryFields}\n          tabs={tabs}\n          stages={false}\n          tasksWidget={<TaskManagerDemo />}\n          persistentUtility={persistentUtility}\n          showUtilities={false}\n          showFollowedIcon={false}\n          defaultCollapsedUtilities\n        />\n      );\n    }\n  };\n\n  const setActiveItem = (key: string) => {\n    setCases((prevCases = []) => {\n      return prevCases.map(caseItem => {\n        return { ...caseItem, active: caseItem.id === key };\n      });\n    });\n    setLinks((prevLinks = []) => {\n      return prevLinks.map(link => {\n        return {\n          ...link,\n          active: link.name === key\n        };\n      });\n    });\n  };\n\n  const createInteraction = (createLink: {\n    primary: string;\n    secondary?: string;\n    icon: string;\n    meta: string;\n    customerName?: string;\n  }) => {\n    const { primary, secondary, icon, customerName } = createLink;\n    const key: string = createUID();\n    const createdAt = new Date().getTime();\n    const newCase = {\n      visual: (\n        <InteractionTimerStory\n          icon={icon as string}\n          showTimer={args.enableSla}\n          hasNotifications={args.hasInteractionNotifications}\n          meta={args.enableSla ? '0:00' : createLink.meta}\n        />\n      ),\n      primary: customerName || 'Unknown customer',\n      secondary,\n      createdAt,\n      id: key,\n      active: true,\n      onClick: () => {\n        setActiveItem(key);\n        RenderCaseView(primary);\n      },\n      onDismiss: (e: any) => {\n        setActiveItem('Home');\n        e.stopPropagation();\n        setCases((prevCases = []) => prevCases.filter(caseItem => caseItem.id !== key));\n        setMainContent(home);\n      }\n    };\n    setCases((prevCases = []) => [...prevCases, newCase]);\n    setActiveItem(key);\n    setCaseID(caseID + 1);\n    RenderCaseView(primary);\n  };\n\n  const createLinks = [\n    {\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'FH',\n      customerName: 'Ginger Ventura'\n    },\n    {\n      primary: 'Chat Interaction',\n      secondary: 'Sent 2h ago',\n      icon: 'chat-solid',\n      meta: 'SC',\n      customerName: 'Sara Davis'\n    },\n    {\n      primary: 'Mail Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'mail-solid',\n      meta: 'JB',\n      customerName: 'John Brown'\n    }\n  ].map(item => {\n    const { primary, icon } = item;\n    return {\n      name: primary,\n      icon,\n      href: '',\n      onClick: () => {\n        createInteraction(item);\n      }\n    };\n  });\n\n  useEffect(() => {\n    createInteraction({\n      primary: 'Phone Interaction',\n      secondary: 'Received 20s ago',\n      icon: 'phone-solid',\n      meta: 'GV',\n      customerName: 'Ginger Ventura'\n    });\n  }, []);\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          action('Click')(`${e.currentTarget.name}:${e.type}`);\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Log in\n      </Button>\n    </>\n  );\n  const chatSettings = (\n    <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n      <Form actions={actions}>\n        <Input name='agentId' label='Agent Id' autoComplete='off' />\n\n        <Input name='password' type='password' label='Password' autoComplete='off' />\n        <Select label='Make me'>\n          <Option>Available</Option>\n          <Option>Unavailable</Option>\n        </Select>\n      </Form>\n    </Flex>\n  );\n\n  const utils = [\n    {\n      name: 'Chat settings',\n      visual: <Icon name='chat-solid' />,\n      drawerView: chatSettings,\n      drawerHeader: 'Pega Chat Log In'\n    },\n    {\n      name: 'Call panel',\n      visual: (\n        <CallControlPanelIcon\n          status={agentStatus.status}\n          label={agentStatus.label}\n          variant='icon'\n          panelVisible={callPanelVisible}\n        />\n      ),\n      ...(agentStatus.status === 'offline'\n        ? {\n            drawerView: (\n              <Flex container={{ direction: 'column', gap: 2, pad: 2 }} item={{ grow: 1 }}>\n                <CallLoginForm\n                  ctiLinkOptions={{\n                    valid: 'It will be accepted',\n                    invalid: 'This will raise an error'\n                  }}\n                  onLogin={ctiLink => {\n                    if (ctiLink === 'invalid') return Promise.resolve('Login incorrect');\n                    setAgentStatus(userStatusOptions[1] as UserAvailabilityStatusOption);\n                    setCallPanelVisible(true);\n                    return Promise.resolve(undefined);\n                  }}\n                />\n              </Flex>\n            ),\n            drawerHeader: 'Pega Call Log In'\n          }\n        : {\n            onClick: () => setCallPanelVisible(isVisible => !isVisible)\n          })\n    }\n  ];\n\n  const appInfo = {\n    href: 'https://www.pega.com/',\n    imageSrc:\n      'https://www.clipartmax.com/png/middle/345-3454195_account-executive-civilian-pega-logo-png.png',\n    fullImageSrc: 'Full Image Source',\n    appName: 'CS AppShell'\n  };\n\n  return (\n    <>\n      <AppShellDemo\n        main={mainContent}\n        appInfo={appInfo}\n        cases={cases}\n        createLinks={createLinks}\n        caseLinks={links}\n        utils={utils}\n        onLinkClick={(name: string) => {\n          if (name === 'Home') {\n            setMainContent(home);\n          }\n          setActiveItem(name);\n        }}\n      />\n      {callPanelVisible && (\n        <CallControlPanelDemo\n          heading='Agent'\n          status={agentStatus.id}\n          onStatusChange={setAgentStatus}\n          isDraggable={args.isDraggable}\n        />\n      )}\n    </>\n  );\n};\n"]}

package/jsx/cs/CSCaseView/CSCaseView.mocks.d.ts

@@ -1,66 +0,0 @@
-import { FunctionComponent } from 'react';
-export declare type LoginError = string;
-export interface LoginFormProps {
-    ctiLinkOptions: {
-        [key: string]: string;
-    };
-    onLogin: (ctiLinkId: keyof LoginFormProps['ctiLinkOptions'], agentId: string, password: string) => Promise<LoginError | undefined>;
-}
-export declare const CallLoginForm: FunctionComponent<LoginFormProps>;
-export declare const AppShellMockData: {
-    notifications: {
-        id: string;
-        primary: string;
-        secondary: string;
-        visual: string;
-        unread: boolean;
-    }[];
-    recents: {
-        id: string;
-        primary: string;
-        secondary: string;
-    }[];
-    'Phone Interaction': {
-        caseId: string;
-        heading: string;
-        primaryFields: {
-            id: string;
-            name: string;
-            value: string;
-        }[];
-        secondaryFields: {
-            id: string;
-            name: string;
-            value: string;
-        }[];
-    };
-    'Chat Interaction': {
-        caseId: string;
-        heading: string;
-        primaryFields: {
-            id: string;
-            name: string;
-            value: string;
-        }[];
-        secondaryFields: {
-            id: string;
-            name: string;
-            value: string;
-        }[];
-    };
-    'Mail Interaction': {
-        caseId: string;
-        heading: string;
-        primaryFields: {
-            id: string;
-            name: string;
-            value: string;
-        }[];
-        secondaryFields: {
-            id: string;
-            name: string;
-            value: string;
-        }[];
-    };
-};
-//# sourceMappingURL=CSCaseView.mocks.d.ts.map

package/jsx/cs/CSCaseView/CSCaseView.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSCaseView.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSCaseView.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAIjE,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,cAAc;IAC7B,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1C,OAAO,EAAE,CACP,SAAS,EAAE,MAAM,cAAc,CAAC,gBAAgB,CAAC,EACjD,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,cAAc,CAiE3D,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmO5B,CAAC"}