@pega/cosmos-react-demos 3.0.0-dev.18.2 → 3.0.0-dev.19.0

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

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  LocationDisplay,\n  MapsContext,\n  PhoneDisplay,\n  EmailDisplay\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  return (\n    <MapsContext.Provider value={{ name: 'google' }}>\n      <Details\n        highlightedFields={[\n          {\n            id: '1',\n            name: 'Statement balance',\n            value: <CurrencyDisplay value={1289.0} currencyISOCode='USD' />\n          },\n          {\n            id: '2',\n            name: 'Total balance',\n            value: <CurrencyDisplay value={35667.0} currencyISOCode='USD' />\n          },\n          {\n            id: '3',\n            name: 'Available credit',\n            value: <CurrencyDisplay value={5813.0} currencyISOCode='USD' />\n          },\n          {\n            id: '4',\n            name: 'Payment due date',\n            value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n          },\n          {\n            id: '5',\n            name: 'Available benefits',\n            value: (\n              <URLDisplay\n                value='https://www.google.com/'\n                displayText='View benefits'\n                variant='link'\n              />\n            )\n          },\n          {\n            id: '6',\n            name: 'Platinum member',\n            value: <BooleanDisplay value />\n          }\n        ]}\n        regions={[\n          <FieldGroup name='Personal'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Home address',\n                  value: (\n                    <LocationDisplay\n                      value='12 Higgins Bottom Way, Carnell, NH, 02133'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Primary phone', value: <PhoneDisplay value='+15553749637' /> },\n                {\n                  name: 'Primary email',\n                  value: <EmailDisplay value='joe.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>,\n          <FieldGroup name='Work'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Work address',\n                  value: (\n                    <LocationDisplay\n                      value='1 Monolith Business Parkway, Milltown, NH, 02333'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Work phone', value: <PhoneDisplay value='+15553742200' /> },\n                {\n                  name: 'Work email',\n                  value: <EmailDisplay value='jane.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>\n        ]}\n      />\n    </MapsContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAExC,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,WAAW,EAAE,YAC1D,MAAC,OAAO,IACN,IAAI,EAAC,YAAY,EACjB,eAAe,EAAE;gBACf,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,GAAG;gBAC1D,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,GAAG;gBACnE,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG;gBAC7D,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG;aAC/D,aAGD,MAAC,OAAO,IAAC,IAAI,EAAC,gBAAgB,EAAC,MAAM,QAAC,MAAM,mBAE1C,KAAC,OAAO,IAAC,MAAM,kBACb,MAAC,OAAO,IAAC,IAAI,EAAC,kBAAkB,EAAC,MAAM,mBACrC,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,EAC3C,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,IACpC,GACF,EAEV,MAAC,OAAO,IAAC,MAAM,mBACb,KAAC,cAAc,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAG,EAChD,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,GAAG,IACrC,IACF,EAEV,KAAC,cAAc,IACb,IAAI,EAAC,aAAa,EAClB,OAAO,EAAC,SAAS,EACjB,KAAK,EACH,ufAOI,GAEN,EAEF,MAAC,OAAO,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,mBAChC,KAAC,cAAc,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,GAAG,EACnD,KAAC,cAAc,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,GAAG,EAEnD,MAAC,OAAO,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,mBAChC,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,GAAG,EAC3C,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,IACnC,IACF,EAEV,KAAC,cAAc,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,GAAG,EACxC,KAAC,cAAc,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,GAAG,IACzC,GACc,CAC3B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  const isNotMobile = useBreakpoint('sm');\n\n  return (\n    <DetailsContext.Provider value={{ mobileView: !isNotMobile }}>\n      <Details\n        name='Outer list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n      >\n        {/* Siblings can be rendered in a responsive row with the `asFlex` attribute */}\n        <Details name='Nested as flex' nested asFlex>\n          {/* Arbitrary recursive nesting is supported with nested attribute */}\n          <Details nested>\n            <Details name='Purchase details' nested>\n              <FieldValueItem name='Make' value='Ford' />\n              <FieldValueItem name='Model' value='F150' />\n            </Details>\n          </Details>\n\n          <Details nested>\n            <FieldValueItem name='Mileage' value='78,500' />\n            <FieldValueItem name='Trim' value='Lariat' />\n          </Details>\n        </Details>\n\n        <FieldValueItem\n          name='Description'\n          variant='stacked'\n          value={\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla\n              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus\n              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor\n              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.\n              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget\n              risus. Fusce cursus sollicitudin nibh molestie volutpat.\n            </p>\n          }\n        />\n\n        <Details name='Nested list' nested>\n          <FieldValueItem name='First name' value='Howard' />\n          <FieldValueItem name='Last name' value='Kennedy' />\n\n          <Details name='Deeper list' nested>\n            <FieldValueItem name='Color' value='red' />\n            <FieldValueItem name='Year' value='2017' />\n          </Details>\n        </Details>\n\n        <FieldValueItem name='Age' value='56' />\n        <FieldValueItem name='Location' value='Berlin' />\n      </Details>\n    </DetailsContext.Provider>\n  );\n};\n"]}

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

@@ -4,7 +4,10 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface TasksStoryProps {
     headerText?: TasksProps['headerText'];
-    taskCount?: number;
+    showHeaderVisual?: boolean;
+    showHeaderSecondary?: boolean;
+    count?: TasksProps['count'];
+    openableTasks?: boolean;
 }
 export declare const TasksDemo: Story<TasksStoryProps>;
 //# sourceMappingURL=Tasks.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0B/C,OAAO,EAAS,UAAU,EAAiB,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CAmI5C,CAAC"}
+{"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0B/C,OAAO,EAAS,UAAU,EAAiB,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CA2I5C,CAAC"}

package/lib/work/Tasks/Tasks.stories.js

@@ -17,7 +17,7 @@ export const TasksDemo = (args) => {
             return {
                 id: `${i + 1}`,
                 primary: `Workgroup ${i + 1}`,
-                count: args.taskCount || Math.floor(Math.random() * 10),
+                count: typeof args.count === 'number' ? args.count : Math.floor(Math.random() * 10),
                 selected: i === 0,
                 visual: _jsx(Avatar, { size: 'l', name: `Team ${i + 1}` })
             };
@@ -40,7 +40,7 @@ export const TasksDemo = (args) => {
                     });
                 }
             } }));
-    }, [activeGroup.primary]);
+    }, [activeGroup.primary, workGroups]);
     const taskArray = useMemo(() => Array.from({ length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount }, (_, i) => {
         const dueIn = 86400000 * i;
         let status = 'info';
@@ -53,29 +53,40 @@ export const TasksDemo = (args) => {
         return {
             id: `${i}`,
             name: `Task ${i + 1}`,
+            processName: i % 2 ? 'Demo process' : undefined,
             meta: (_jsx(MetaList, { items: [
                     _jsx(Status, { variant: status, children: status }),
                     _jsxs(Text, { variant: 'secondary', children: ["Due ", _jsx(DateTimeDisplay, { variant: 'relative', value: Date.now() + dueIn })] }),
                     _jsx(Link, { href: '#demo', children: "Parent case link" })
                 ] })),
-            onOpen: () => {
-                setHasOpenTask(true);
-            },
+            onOpen: args.openableTasks !== false
+                ? () => {
+                    setHasOpenTask(true);
+                }
+                : undefined,
             content: hasOpenTask ? (_jsx(DemoTaskForm, { onSubmit: () => {
                     setHasOpenTask(false);
                 }, onCancel: () => {
                     setHasOpenTask(false);
                 } })) : null
         };
-    }), [isLimited, activeGroup, hasOpenTask]);
-    return (_jsx(Tasks, { headerText: args.headerText || 'Tasks', count: activeGroupTaskCount, items: taskArray, headerVisual: activeGroup ? _jsx(Avatar, { size: 'l', name: activeGroup.primary }) : undefined, headerSecondary: groupSelection, emptyPlaceholder: _jsx(EmptyState, {}), onExpandToggle: () => {
+    }), [isLimited, activeGroupTaskCount, args.openableTasks, hasOpenTask]);
+    return (_jsx(Tasks, { headerText: args.headerText || 'Tasks', count: activeGroupTaskCount, items: taskArray, headerVisual: args.showHeaderVisual && activeGroup ? (_jsx(Avatar, { size: 'l', name: activeGroup.primary })) : undefined, headerSecondary: args.showHeaderSecondary ? groupSelection : undefined, emptyPlaceholder: _jsx(EmptyState, {}), onExpandToggle: () => {
             setIsLimited(cur => !cur);
         } }));
 };
 TasksDemo.args = {
-    headerText: 'Tasks'
+    headerText: 'Tasks',
+    showHeaderVisual: true,
+    showHeaderSecondary: true,
+    count: undefined,
+    openableTasks: true
 };
 TasksDemo.argTypes = {
-    headerText: { control: { type: 'text' } }
+    headerText: { control: { type: 'text' } },
+    showHeaderVisual: { control: { type: 'boolean' } },
+    showHeaderSecondary: { control: { type: 'boolean' } },
+    count: { control: { type: 'number' } },
+    openableTasks: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Tasks.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tasks.stories.js","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  Avatar,\n  Button,\n  MenuButton,\n  MenuProps,\n  MetaList,\n  Text,\n  Form,\n  Input,\n  TextArea,\n  RadioCheckGroup,\n  RadioButton,\n  Checkbox,\n  DateInput,\n  NumberInput,\n  FileInput,\n  menuHelpers,\n  Status,\n  Link,\n  DateTimeDisplay,\n  StatusProps,\n  EmptyState\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Tasks',\n  component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n  headerText?: TasksProps['headerText'];\n  taskCount?: number;\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n  const [isLimited, setIsLimited] = useState(true);\n  const [hasOpenTask, setHasOpenTask] = useState(false);\n\n  const DemoTaskForm = ({ onSubmit, onCancel }: { onSubmit: () => void; onCancel: () => void }) => {\n    return (\n      <Form\n        actions={\n          <>\n            <Button onClick={onCancel}>Cancel</Button>\n            <Button variant='primary' onClick={onSubmit}>\n              Submit\n            </Button>\n          </>\n        }\n      >\n        <Input label='Text field 1' required />\n        <Input label='Text field 2' />\n        <NumberInput onChange={() => {}} label='Number field' />\n        <Checkbox label='Boolean field' required />\n        <RadioCheckGroup label='Picklist options' name='picklist-1'>\n          <RadioButton label='option 1' defaultChecked />\n          <RadioButton label='option 2' />\n          <RadioButton label='option 3' />\n        </RadioCheckGroup>\n        <TextArea label='Text paragraph field' required />\n        <FileInput label='File field' />\n        <DateInput label='Datetime field' />\n      </Form>\n    );\n  };\n\n  const [workGroups, setWorkGroups] = useState<MenuProps['items']>(() => {\n    return Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i + 1}`,\n        primary: `Workgroup ${i + 1}`,\n        count: args.taskCount || Math.floor(Math.random() * 10),\n        selected: i === 0,\n        visual: <Avatar size='l' name={`Team ${i + 1}`} />\n      };\n    });\n  });\n\n  const activeGroup = useMemo(() => menuHelpers.getSelected(workGroups)[0], [workGroups]);\n  const activeGroupTaskCount = activeGroup?.count ?? 0;\n\n  const groupSelection = useMemo(() => {\n    return (\n      <MenuButton\n        variant='text'\n        text={activeGroup.primary}\n        menu={{\n          mode: 'single-select',\n          items: workGroups,\n          onItemClick: id => {\n            setWorkGroups(currentWorkGroups => {\n              return menuHelpers.mapTree(currentWorkGroups, group => {\n                if (id === group.id || group.selected) {\n                  return { ...group, selected: id === group.id };\n                }\n\n                return group;\n              });\n            });\n          }\n        }}\n      />\n    );\n  }, [activeGroup.primary]);\n\n  const taskArray: TaskItemProps[] = useMemo(\n    () =>\n      Array.from(\n        { length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount },\n        (_, i) => {\n          const dueIn = 86400000 * i;\n          let status: StatusProps['variant'] = 'info';\n\n          if (i === 0) {\n            status = 'urgent';\n          } else if (i === 1) {\n            status = 'warn';\n          }\n\n          return {\n            id: `${i}`,\n            name: `Task ${i + 1}`,\n            meta: (\n              <MetaList\n                items={[\n                  <Status variant={status}>{status}</Status>,\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            onOpen: () => {\n              setHasOpenTask(true);\n            },\n            content: hasOpenTask ? (\n              <DemoTaskForm\n                onSubmit={() => {\n                  setHasOpenTask(false);\n                }}\n                onCancel={() => {\n                  setHasOpenTask(false);\n                }}\n              />\n            ) : null\n          };\n        }\n      ),\n    [isLimited, activeGroup, hasOpenTask]\n  );\n\n  return (\n    <Tasks\n      headerText={args.headerText || 'Tasks'}\n      count={activeGroupTaskCount}\n      items={taskArray}\n      headerVisual={activeGroup ? <Avatar size='l' name={activeGroup.primary} /> : undefined}\n      headerSecondary={groupSelection}\n      emptyPlaceholder={<EmptyState />}\n      onExpandToggle={() => {\n        setIsLimited(cur => !cur);\n      }}\n    />\n  );\n};\n\nTasksDemo.args = {\n  headerText: 'Tasks'\n};\n\nTasksDemo.argTypes = {\n  headerText: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Tasks.stories.js","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  Avatar,\n  Button,\n  MenuButton,\n  MenuProps,\n  MetaList,\n  Text,\n  Form,\n  Input,\n  TextArea,\n  RadioCheckGroup,\n  RadioButton,\n  Checkbox,\n  DateInput,\n  NumberInput,\n  FileInput,\n  menuHelpers,\n  Status,\n  Link,\n  DateTimeDisplay,\n  StatusProps,\n  EmptyState\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Tasks',\n  component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n  headerText?: TasksProps['headerText'];\n  showHeaderVisual?: boolean;\n  showHeaderSecondary?: boolean;\n  count?: TasksProps['count'];\n  openableTasks?: boolean;\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n  const [isLimited, setIsLimited] = useState(true);\n  const [hasOpenTask, setHasOpenTask] = useState(false);\n\n  const DemoTaskForm = ({ onSubmit, onCancel }: { onSubmit: () => void; onCancel: () => void }) => {\n    return (\n      <Form\n        actions={\n          <>\n            <Button onClick={onCancel}>Cancel</Button>\n            <Button variant='primary' onClick={onSubmit}>\n              Submit\n            </Button>\n          </>\n        }\n      >\n        <Input label='Text field 1' required />\n        <Input label='Text field 2' />\n        <NumberInput onChange={() => {}} label='Number field' />\n        <Checkbox label='Boolean field' required />\n        <RadioCheckGroup label='Picklist options' name='picklist-1'>\n          <RadioButton label='option 1' defaultChecked />\n          <RadioButton label='option 2' />\n          <RadioButton label='option 3' />\n        </RadioCheckGroup>\n        <TextArea label='Text paragraph field' required />\n        <FileInput label='File field' />\n        <DateInput label='Datetime field' />\n      </Form>\n    );\n  };\n\n  const [workGroups, setWorkGroups] = useState<MenuProps['items']>(() => {\n    return Array.from({ length: 10 }, (_, i) => {\n      return {\n        id: `${i + 1}`,\n        primary: `Workgroup ${i + 1}`,\n        count: typeof args.count === 'number' ? args.count : Math.floor(Math.random() * 10),\n        selected: i === 0,\n        visual: <Avatar size='l' name={`Team ${i + 1}`} />\n      };\n    });\n  });\n\n  const activeGroup = useMemo(() => menuHelpers.getSelected(workGroups)[0], [workGroups]);\n  const activeGroupTaskCount = activeGroup?.count ?? 0;\n\n  const groupSelection = useMemo(() => {\n    return (\n      <MenuButton\n        variant='text'\n        text={activeGroup.primary}\n        menu={{\n          mode: 'single-select',\n          items: workGroups,\n          onItemClick: id => {\n            setWorkGroups(currentWorkGroups => {\n              return menuHelpers.mapTree(currentWorkGroups, group => {\n                if (id === group.id || group.selected) {\n                  return { ...group, selected: id === group.id };\n                }\n\n                return group;\n              });\n            });\n          }\n        }}\n      />\n    );\n  }, [activeGroup.primary, workGroups]);\n\n  const taskArray: TaskItemProps[] = useMemo(\n    () =>\n      Array.from(\n        { length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount },\n        (_, i) => {\n          const dueIn = 86400000 * i;\n          let status: StatusProps['variant'] = 'info';\n\n          if (i === 0) {\n            status = 'urgent';\n          } else if (i === 1) {\n            status = 'warn';\n          }\n\n          return {\n            id: `${i}`,\n            name: `Task ${i + 1}`,\n            processName: i % 2 ? 'Demo process' : undefined,\n            meta: (\n              <MetaList\n                items={[\n                  <Status variant={status}>{status}</Status>,\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            onOpen:\n              args.openableTasks !== false\n                ? () => {\n                    setHasOpenTask(true);\n                  }\n                : undefined,\n            content: hasOpenTask ? (\n              <DemoTaskForm\n                onSubmit={() => {\n                  setHasOpenTask(false);\n                }}\n                onCancel={() => {\n                  setHasOpenTask(false);\n                }}\n              />\n            ) : null\n          };\n        }\n      ),\n    [isLimited, activeGroupTaskCount, args.openableTasks, hasOpenTask]\n  );\n\n  return (\n    <Tasks\n      headerText={args.headerText || 'Tasks'}\n      count={activeGroupTaskCount}\n      items={taskArray}\n      headerVisual={\n        args.showHeaderVisual && activeGroup ? (\n          <Avatar size='l' name={activeGroup.primary} />\n        ) : undefined\n      }\n      headerSecondary={args.showHeaderSecondary ? groupSelection : undefined}\n      emptyPlaceholder={<EmptyState />}\n      onExpandToggle={() => {\n        setIsLimited(cur => !cur);\n      }}\n    />\n  );\n};\n\nTasksDemo.args = {\n  headerText: 'Tasks',\n  showHeaderVisual: true,\n  showHeaderSecondary: true,\n  count: undefined,\n  openableTasks: true\n};\n\nTasksDemo.argTypes = {\n  headerText: { control: { type: 'text' } },\n  showHeaderVisual: { control: { type: 'boolean' } },\n  showHeaderSecondary: { control: { type: 'boolean' } },\n  count: { control: { type: 'number' } },\n  openableTasks: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface QuickCreateDemoArgs {
+    borderRadius: number;
+    color: string;
+    count: number;
+}
+export declare const QuickCreateDemo: Story<QuickCreateDemoArgs>;
+//# sourceMappingURL=QuickCreate.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickCreate.stories.d.ts","sourceRoot":"","sources":["../../../src/wss/QuickCreate/QuickCreate.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,UAAU,mBAAmB;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,mBAAmB,CAyBtD,CAAC"}

package/lib/wss/QuickCreate/QuickCreate.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QuickCreate } from '@pega/cosmos-react-wss';
+import { Configuration } from '@pega/cosmos-react-core';
+export default {
+    title: 'Web Self Service/QuickCreate',
+    component: QuickCreate
+};
+export const QuickCreateDemo = (args) => {
+    const lorem = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt excepturi sit alias, mollitia voluptate nobis, aliquam corrupti delectus ea molestiae, illum provident necessitatibus? Atque temporibus officiis voluptas nam nihil!';
+    const actions = Array.from({ length: args.count }, (_, i) => {
+        return {
+            label: i === args.count - 1 ? `${lorem}` : `Case type ${i + 1}`,
+            onClick: () => { },
+            icon: 'plus'
+        };
+    });
+    return (_jsx(Configuration, { theme: {
+            components: {
+                button: {
+                    'border-radius': args.borderRadius,
+                    color: args.color
+                }
+            }
+        }, children: _jsx(QuickCreate, { heading: 'How can we help you?', actions: actions }) }));
+};
+QuickCreateDemo.args = {
+    borderRadius: 1,
+    color: '#076bc9',
+    count: 4
+};
+QuickCreateDemo.argTypes = {
+    borderRadius: { control: { type: 'number' } },
+    color: { control: { type: 'color' } },
+    count: { control: { type: 'number' } }
+};
+//# sourceMappingURL=QuickCreate.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuickCreate.stories.js","sourceRoot":"","sources":["../../../src/wss/QuickCreate/QuickCreate.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,WAAW;CACf,CAAC;AAQV,MAAM,CAAC,MAAM,eAAe,GAA+B,CAAC,IAAyB,EAAE,EAAE;IACvF,MAAM,KAAK,GACT,2OAA2O,CAAC;IAE9O,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAC1D,OAAO;YACL,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE;YAC/D,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;YACjB,IAAI,EAAE,MAAM;SACb,CAAC;IACJ,CAAC,CAAC,CAAC;IACH,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,eAAe,EAAE,IAAI,CAAC,YAAY;oBAClC,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,YAED,KAAC,WAAW,IAAC,OAAO,EAAC,sBAAsB,EAAC,OAAO,EAAE,OAAO,GAAI,GAClD,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,YAAY,EAAE,CAAC;IACf,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,CAAC;CACT,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC7C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACrC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { QuickCreate } from '@pega/cosmos-react-wss';\nimport { Configuration } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Web Self Service/QuickCreate',\n  component: QuickCreate\n} as Meta;\n\ninterface QuickCreateDemoArgs {\n  borderRadius: number;\n  color: string;\n  count: number;\n}\n\nexport const QuickCreateDemo: Story<QuickCreateDemoArgs> = (args: QuickCreateDemoArgs) => {\n  const lorem =\n    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nesciunt excepturi sit alias, mollitia voluptate nobis, aliquam corrupti delectus ea molestiae, illum provident necessitatibus? Atque temporibus officiis voluptas nam nihil!';\n\n  const actions = Array.from({ length: args.count }, (_, i) => {\n    return {\n      label: i === args.count - 1 ? `${lorem}` : `Case type ${i + 1}`,\n      onClick: () => {},\n      icon: 'plus'\n    };\n  });\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            'border-radius': args.borderRadius,\n            color: args.color\n          }\n        }\n      }}\n    >\n      <QuickCreate heading='How can we help you?' actions={actions} />\n    </Configuration>\n  );\n};\n\nQuickCreateDemo.args = {\n  borderRadius: 1,\n  color: '#076bc9',\n  count: 4\n};\n\nQuickCreateDemo.argTypes = {\n  borderRadius: { control: { type: 'number' } },\n  color: { control: { type: 'color' } },\n  count: { control: { type: 'number' } }\n};\n"]}

package/package.json

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

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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"CSCaseView.mocks.jsx","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSCaseView.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FunctionComponent, useState } from 'react';\n\nimport { Banner, Button, Form, Input, Option, Select } from '@pega/cosmos-react-core';\n\nexport type LoginError = string;\n\nexport interface LoginFormProps {\n  ctiLinkOptions: { [key: string]: string };\n  onLogin: (\n    ctiLinkId: keyof LoginFormProps['ctiLinkOptions'],\n    agentId: string,\n    password: string\n  ) => Promise<LoginError | undefined>;\n}\n\nexport const CallLoginForm: FunctionComponent<LoginFormProps> = ({\n  ctiLinkOptions,\n  onLogin\n}: LoginFormProps) => {\n  const [agentId, setAgentId] = useState<string>('');\n  const [password, setPassword] = useState<string>('');\n  const [extension, setExtension] = useState<string>('');\n  const [ctiLinkId, setCTILinkId] = useState<string>(Object.keys(ctiLinkOptions)[0]);\n  const [errorMessage, setErrorMessage] = useState<string>();\n\n  const canSubmit = agentId && password && ctiLinkId && extension;\n\n  const actions = (\n    <>\n      <Button name='cancel' variant='secondary'>\n        Cancel\n      </Button>\n      <Button\n        name='submit'\n        type='submit'\n        variant='primary'\n        disabled={!canSubmit}\n        onClick={(e: MouseEvent) => {\n          e.preventDefault();\n          onLogin(ctiLinkId!, agentId, password).then(setErrorMessage);\n        }}\n      >\n        Login\n      </Button>\n    </>\n  );\n\n  return (\n    <Form\n      actions={actions}\n      banners={\n        errorMessage ? <Banner id='error' variant='urgent' messages={[errorMessage]} /> : undefined\n      }\n    >\n      <Select required label='CTI link' onChange={e => setCTILinkId(e.target.value)}>\n        {Object.entries(ctiLinkOptions).map(([id, label]) => (\n          <Option value={id}>{label}</Option>\n        ))}\n      </Select>\n      <Input\n        required\n        label='Agent ID'\n        value={agentId}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setAgentId(e.target.value)}\n      />\n      <Input\n        type='password'\n        required\n        label='Password'\n        value={password}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}\n      />\n      <Input\n        required\n        label='Extension'\n        value={extension}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setExtension(e.target.value)}\n      />\n    </Form>\n  );\n};\n\nexport const AppShellMockData = {\n  notifications: [\n    {\n      id: '123',\n      primary:\n        \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345',\n      visual: 'Dean Thomas',\n      unread: true\n    },\n    {\n      id: '456',\n      primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n      visual: 'Seth DeAngelo',\n      secondary: 'BUG-12345',\n      unread: true\n    },\n    {\n      id: '789',\n      primary:\n        \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-12345',\n      visual: 'Janet Moore',\n      unread: true\n    },\n    {\n      id: '000',\n      primary: 'You have been awarded Employee of the Month! Congratulations!',\n      secondary: '',\n      visual: 'Cindy Turner',\n      unread: true\n    }\n  ],\n  recents: [\n    {\n      id: '123',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '456',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '789',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '111',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '222',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '333',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '444',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '555',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '666',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    }\n  ],\n  'Phone Interaction': {\n    caseId: 'Customer',\n    heading: 'Ginger Ventura',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Gold'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Phone'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'Low'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'July 2018'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '2213b Gormand street'\n      }\n    ]\n  },\n  'Chat Interaction': {\n    caseId: 'Customer',\n    heading: 'Sara Davis',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Silver'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Chat'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'High'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'March 2005'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '340 River'\n      }\n    ]\n  },\n  'Mail Interaction': {\n    caseId: 'Customer',\n    heading: 'John Brown',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Bronze'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Mail'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'Medium'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'March 1995'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '340 River'\n      }\n    ]\n  }\n};\n"]}

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

package/lib/cs/CSCaseView/CSCaseView.mocks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CSCaseView.mocks.js","sourceRoot":"","sources":["../../../src/cs/CSCaseView/CSCaseView.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FunctionComponent, useState } from 'react';\n\nimport { Banner, Button, Form, Input, Option, Select } from '@pega/cosmos-react-core';\n\nexport type LoginError = string;\n\nexport interface LoginFormProps {\n  ctiLinkOptions: { [key: string]: string };\n  onLogin: (\n    ctiLinkId: keyof LoginFormProps['ctiLinkOptions'],\n    agentId: string,\n    password: string\n  ) => Promise<LoginError | undefined>;\n}\n\nexport const CallLoginForm: FunctionComponent<LoginFormProps> = ({\n  ctiLinkOptions,\n  onLogin\n}: LoginFormProps) => {\n  const [agentId, setAgentId] = useState<string>('');\n  const [password, setPassword] = useState<string>('');\n  const [extension, setExtension] = useState<string>('');\n  const [ctiLinkId, setCTILinkId] = useState<string>(Object.keys(ctiLinkOptions)[0]);\n  const [errorMessage, setErrorMessage] = useState<string>();\n\n  const canSubmit = agentId && password && ctiLinkId && extension;\n\n  const actions = (\n    <>\n      <Button name='cancel' variant='secondary'>\n        Cancel\n      </Button>\n      <Button\n        name='submit'\n        type='submit'\n        variant='primary'\n        disabled={!canSubmit}\n        onClick={(e: MouseEvent) => {\n          e.preventDefault();\n          onLogin(ctiLinkId!, agentId, password).then(setErrorMessage);\n        }}\n      >\n        Login\n      </Button>\n    </>\n  );\n\n  return (\n    <Form\n      actions={actions}\n      banners={\n        errorMessage ? <Banner id='error' variant='urgent' messages={[errorMessage]} /> : undefined\n      }\n    >\n      <Select required label='CTI link' onChange={e => setCTILinkId(e.target.value)}>\n        {Object.entries(ctiLinkOptions).map(([id, label]) => (\n          <Option value={id}>{label}</Option>\n        ))}\n      </Select>\n      <Input\n        required\n        label='Agent ID'\n        value={agentId}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setAgentId(e.target.value)}\n      />\n      <Input\n        type='password'\n        required\n        label='Password'\n        value={password}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)}\n      />\n      <Input\n        required\n        label='Extension'\n        value={extension}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => setExtension(e.target.value)}\n      />\n    </Form>\n  );\n};\n\nexport const AppShellMockData = {\n  notifications: [\n    {\n      id: '123',\n      primary:\n        \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345',\n      visual: 'Dean Thomas',\n      unread: true\n    },\n    {\n      id: '456',\n      primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n      visual: 'Seth DeAngelo',\n      secondary: 'BUG-12345',\n      unread: true\n    },\n    {\n      id: '789',\n      primary:\n        \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-12345',\n      visual: 'Janet Moore',\n      unread: true\n    },\n    {\n      id: '000',\n      primary: 'You have been awarded Employee of the Month! Congratulations!',\n      secondary: '',\n      visual: 'Cindy Turner',\n      unread: true\n    }\n  ],\n  recents: [\n    {\n      id: '123',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '456',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '789',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '111',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '222',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '333',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '444',\n      primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n      secondary: 'BUG-12345'\n    },\n    {\n      id: '555',\n      primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\",\n      secondary: 'BUG-00000'\n    },\n    {\n      id: '666',\n      primary:\n        \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n      secondary: 'BUG-00000'\n    }\n  ],\n  'Phone Interaction': {\n    caseId: 'Customer',\n    heading: 'Ginger Ventura',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Gold'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Phone'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'Low'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'July 2018'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '2213b Gormand street'\n      }\n    ]\n  },\n  'Chat Interaction': {\n    caseId: 'Customer',\n    heading: 'Sara Davis',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Silver'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Chat'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'High'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'March 2005'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '340 River'\n      }\n    ]\n  },\n  'Mail Interaction': {\n    caseId: 'Customer',\n    heading: 'John Brown',\n    primaryFields: [\n      {\n        id: '0',\n        name: 'Lifetime value',\n        value: 'Bronze'\n      },\n      {\n        id: '1',\n        name: 'Interaction type',\n        value: 'Mail'\n      },\n      {\n        id: '2',\n        name: 'Churn risk',\n        value: 'Medium'\n      },\n      {\n        id: '3',\n        name: 'Status',\n        value: 'Open'\n      }\n    ],\n    secondaryFields: [\n      {\n        id: '0',\n        name: 'Status',\n        value: 'Verified'\n      },\n      {\n        id: '1',\n        name: 'Web login',\n        value: 'Today'\n      },\n      {\n        id: '2',\n        name: 'Customer since',\n        value: 'March 1995'\n      },\n      {\n        id: '3',\n        name: 'Address',\n        value: '340 River'\n      }\n    ]\n  }\n};\n"]}