@pega/cosmos-react-demos 5.0.0-dev.4.9 → 5.0.0-dev.5.0

package/jsx/work/Tasks/TaskList.stories.jsx

@@ -0,0 +1,19 @@
+import { MetaList, Avatar, useUID } from '@pega/cosmos-react-core';
+import { TaskList } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/TaskList',
+    component: TaskList
+};
+export const TaskListDemo = () => {
+    const items = [
+        {
+            id: useUID(),
+            processName: 'Parent process',
+            name: 'Send references',
+            meta: <MetaList items={[' Due in 1d', 'Priority 95']}/>,
+            avatar: <Avatar name='James Gregory'/>
+        }
+    ];
+    return <TaskList items={items}/>;
+};
+//# sourceMappingURL=TaskList.stories.jsx.map

package/jsx/work/Tasks/TaskList.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskList.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGnD,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAY,GAAG,EAAE;IACxC,MAAM,KAAK,GAAoB;QAC7B;YACE,EAAE,EAAE,MAAM,EAAE;YACZ,WAAW,EAAE,gBAAgB;YAC7B,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,EAAG;YACxD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAG;SACxC;KACF,CAAC;IAEF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { MetaList, Avatar, useUID } from '@pega/cosmos-react-core';\nimport { TaskList } from '@pega/cosmos-react-work';\nimport type { TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/TaskList',\n  component: TaskList\n} as Meta;\n\nexport const TaskListDemo: StoryFn = () => {\n  const items: TaskItemProps[] = [\n    {\n      id: useUID(),\n      processName: 'Parent process',\n      name: 'Send references',\n      meta: <MetaList items={[' Due in 1d', 'Priority 95']} />,\n      avatar: <Avatar name='James Gregory' />\n    }\n  ];\n\n  return <TaskList items={items} />;\n};\n"]}

package/jsx/work/Tasks/Tasks.mocks.d.ts

@@ -0,0 +1,22 @@
+declare const viewGroups: ({
+    text: string;
+    items: {
+        id: string;
+        text: string;
+        selected: boolean;
+        count: number;
+    }[];
+} | {
+    text: string;
+    items: {
+        id: string;
+        text: string;
+        selected: boolean;
+        visual: {
+            name: string;
+        };
+        count: number;
+    }[];
+})[];
+export default viewGroups;
+//# sourceMappingURL=Tasks.mocks.d.ts.map

package/jsx/work/Tasks/Tasks.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.mocks.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;IAgDf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/jsx/work/Tasks/Tasks.mocks.js

@@ -0,0 +1,51 @@
+const viewGroups = [
+    {
+        text: 'Worklist',
+        items: [
+            {
+                id: '1',
+                text: 'Assigned to me',
+                selected: true,
+                count: 3
+            }
+        ]
+    },
+    {
+        text: 'Work groups',
+        items: [
+            {
+                id: '2',
+                text: 'Underwriting',
+                selected: false,
+                count: 8
+            },
+            {
+                id: '3',
+                text: 'Escalations',
+                selected: false,
+                count: 1
+            }
+        ]
+    },
+    {
+        text: 'Team members',
+        items: [
+            {
+                id: '4',
+                text: 'James Kirk',
+                selected: false,
+                visual: { name: 'James Kirk' },
+                count: 5
+            },
+            {
+                id: '5',
+                text: 'Leonard McCoy',
+                selected: false,
+                visual: { name: 'Leonard McCoy' },
+                count: 4
+            }
+        ]
+    }
+];
+export default viewGroups;
+//# sourceMappingURL=Tasks.mocks.js.map

package/jsx/work/Tasks/Tasks.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.mocks.js","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG;IACjB;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,CAAC;aACT;SACF;KACF;IACD;QACE,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,cAAc;gBACpB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,CAAC;aACT;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,KAAK;gBACf,KAAK,EAAE,CAAC;aACT;SACF;KACF;IACD;QACE,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,YAAY;gBAClB,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE;gBAC9B,KAAK,EAAE,CAAC;aACT;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,eAAe;gBACrB,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE;gBACjC,KAAK,EAAE,CAAC;aACT;SACF;KACF;CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["const viewGroups = [\n  {\n    text: 'Worklist',\n    items: [\n      {\n        id: '1',\n        text: 'Assigned to me',\n        selected: true,\n        count: 3\n      }\n    ]\n  },\n  {\n    text: 'Work groups',\n    items: [\n      {\n        id: '2',\n        text: 'Underwriting',\n        selected: false,\n        count: 8\n      },\n      {\n        id: '3',\n        text: 'Escalations',\n        selected: false,\n        count: 1\n      }\n    ]\n  },\n  {\n    text: 'Team members',\n    items: [\n      {\n        id: '4',\n        text: 'James Kirk',\n        selected: false,\n        visual: { name: 'James Kirk' },\n        count: 5\n      },\n      {\n        id: '5',\n        text: 'Leonard McCoy',\n        selected: false,\n        visual: { name: 'Leonard McCoy' },\n        count: 4\n      }\n    ]\n  }\n];\n\nexport default viewGroups;\n"]}

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

@@ -0,0 +1,15 @@
+import type { StoryFn } from '@storybook/react';
+import type { TasksProps } from '@pega/cosmos-react-work';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface TasksStoryProps {
+    name?: TasksProps['name'];
+    showVisual?: boolean;
+    showViewSelector?: boolean;
+    enableExpand?: boolean;
+    count?: TasksProps['count'];
+    openableTasks?: boolean;
+    search?: boolean;
+}
+export declare const TasksDemo: StoryFn<TasksStoryProps>;
+//# sourceMappingURL=Tasks.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,KAAK,EAAE,UAAU,EAAiB,MAAM,yBAAyB,CAAC;;AAMzE,wBAGU;AAEV,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,eAAe,CAkF9C,CAAC"}

package/jsx/work/Tasks/Tasks.stories.jsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { MetaList, Text, Status, Link, DateTimeDisplay } from '@pega/cosmos-react-core';
+import { Tasks, tasksHelpers as helpers } from '@pega/cosmos-react-work';
+import { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';
+import viewGroups from './Tasks.mocks';
+export default {
+    title: 'Work/Tasks',
+    component: Tasks
+};
+export const TasksDemo = (args) => {
+    const [isLimited, setIsLimited] = useState(true);
+    const [hasOpenTask, setHasOpenTask] = useState(false);
+    const [views, setViews] = useState(viewGroups);
+    const activeView = helpers.getSelectedView(views);
+    const activeViewTaskCount = args.count ?? activeView?.count ?? 0;
+    const taskArray = Array.from({
+        length: isLimited
+            ? Math.min(3, args.count ?? activeViewTaskCount)
+            : args.count ?? activeViewTaskCount
+    }, (_, i) => {
+        const dueIn = 86400000 * i;
+        let status = 'info';
+        if (i === 0) {
+            status = 'urgent';
+        }
+        else if (i === 1) {
+            status = 'warn';
+        }
+        return {
+            id: `${i}`,
+            name: `Task ${i + 1}`,
+            processName: i % 2 ? 'Demo process' : undefined,
+            meta: (<MetaList items={[
+                    <Status variant={status}>{status}</Status>,
+                    <Text variant='secondary'>
+                Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn}/>
+              </Text>,
+                    <Link href='#demo'>Parent case link</Link>
+                ]}/>),
+            onOpen: args.openableTasks !== false
+                ? () => {
+                    setHasOpenTask(true);
+                }
+                : undefined,
+            content: hasOpenTask ? (<AIButtonFormDemo onCancel={() => setHasOpenTask(false)} onSubmit={() => setHasOpenTask(false)}/>) : null
+        };
+    });
+    return (<Tasks name={args.name ?? 'Tasks'} count={activeViewTaskCount} items={taskArray} avatar={args.showVisual && activeView ? { name: activeView.text } : undefined} viewSelector={args.showViewSelector
+            ? {
+                views,
+                onViewSelect: id => {
+                    setViews(cur => helpers.selectView(cur, id));
+                }
+            }
+            : undefined} onExpandToggle={args.enableExpand && activeViewTaskCount > 3
+            ? () => {
+                setIsLimited(cur => !cur);
+            }
+            : undefined} search={args.search ? {} : undefined}/>);
+};
+TasksDemo.args = {
+    name: 'Assignments',
+    showVisual: true,
+    showViewSelector: true,
+    enableExpand: true,
+    openableTasks: true,
+    count: 3,
+    search: false
+};
+TasksDemo.argTypes = {
+    name: { control: { type: 'text' } },
+    showVisual: { control: { type: 'boolean' } },
+    showViewSelector: { control: { type: 'boolean' } },
+    enableExpand: { control: { type: 'boolean' } },
+    count: { control: { type: 'number' } },
+    openableTasks: { control: { type: 'boolean' } },
+    search: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Tasks.stories.jsx.map

package/jsx/work/Tasks/Tasks.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { MetaList, Text, Status, Link, DateTimeDisplay } from '@pega/cosmos-react-core';\nimport type { StatusProps } from '@pega/cosmos-react-core';\nimport { Tasks, tasksHelpers as helpers } from '@pega/cosmos-react-work';\nimport type { TasksProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nimport { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';\n\nimport viewGroups from './Tasks.mocks';\n\nexport default {\n  title: 'Work/Tasks',\n  component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n  name?: TasksProps['name'];\n  showVisual?: boolean;\n  showViewSelector?: boolean;\n  enableExpand?: boolean;\n  count?: TasksProps['count'];\n  openableTasks?: boolean;\n  search?: boolean;\n}\n\nexport const TasksDemo: StoryFn<TasksStoryProps> = (args: TasksStoryProps) => {\n  const [isLimited, setIsLimited] = useState(true);\n  const [hasOpenTask, setHasOpenTask] = useState(false);\n\n  const [views, setViews] = useState(viewGroups);\n\n  const activeView = helpers.getSelectedView(views);\n  const activeViewTaskCount = args.count ?? activeView?.count ?? 0;\n\n  const taskArray: TaskItemProps[] = Array.from(\n    {\n      length: isLimited\n        ? Math.min(3, args.count ?? activeViewTaskCount)\n        : args.count ?? activeViewTaskCount\n    },\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          <AIButtonFormDemo\n            onCancel={() => setHasOpenTask(false)}\n            onSubmit={() => setHasOpenTask(false)}\n          />\n        ) : null\n      };\n    }\n  );\n\n  return (\n    <Tasks\n      name={args.name ?? 'Tasks'}\n      count={activeViewTaskCount}\n      items={taskArray}\n      avatar={args.showVisual && activeView ? { name: activeView.text } : undefined}\n      viewSelector={\n        args.showViewSelector\n          ? {\n              views,\n              onViewSelect: id => {\n                setViews(cur => helpers.selectView(cur, id) as typeof viewGroups);\n              }\n            }\n          : undefined\n      }\n      onExpandToggle={\n        args.enableExpand && activeViewTaskCount > 3\n          ? () => {\n              setIsLimited(cur => !cur);\n            }\n          : undefined\n      }\n      search={args.search ? {} : undefined}\n    />\n  );\n};\n\nTasksDemo.args = {\n  name: 'Assignments',\n  showVisual: true,\n  showViewSelector: true,\n  enableExpand: true,\n  openableTasks: true,\n  count: 3,\n  search: false\n};\n\nTasksDemo.argTypes = {\n  name: { control: { type: 'text' } },\n  showVisual: { control: { type: 'boolean' } },\n  showViewSelector: { control: { type: 'boolean' } },\n  enableExpand: { control: { type: 'boolean' } },\n  count: { control: { type: 'number' } },\n  openableTasks: { control: { type: 'boolean' } },\n  search: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/work/Timeline/Timeline.mocks.d.ts

@@ -0,0 +1,3 @@
+import { TimelineProps } from '@pega/cosmos-react-work';
+export declare const activity: TimelineProps['activity'];
+//# sourceMappingURL=Timeline.mocks.d.ts.map

package/jsx/work/Timeline/Timeline.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.mocks.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,aAAa,CAAC,UAAU,CAuJ9C,CAAC"}

package/jsx/work/Timeline/Timeline.mocks.jsx

@@ -0,0 +1,144 @@
+import { Link, CurrencyDisplay, Text } from '@pega/cosmos-react-core';
+export const activity = [
+    {
+        id: '1',
+        date: Date.UTC(2025, 2, 20, 19, 28, 22),
+        title: 'Email blast: "Buy today"',
+        icon: 'bell-off-solid'
+    },
+    {
+        id: '2',
+        date: Date.UTC(2025, 2, 20, 18, 6, 22),
+        title: 'Confirm eligibility',
+        icon: 'circle-stacked-mixed'
+    },
+    {
+        id: '3',
+        date: Date.UTC(2023, 2, 10, 9, 26, 22),
+        title: 'Review customer bill',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '4',
+        date: Date.UTC(2022, 7, 10, 18, 6, 22),
+        title: 'Confirm eligibility',
+        icon: 'circle-stacked-mixed'
+    },
+    {
+        id: '5',
+        date: Date.UTC(2022, 6, 18, 0, 1, 22),
+        title: (<Link href='https://www.pega.com' target='_blank'>
+        Visit Pega
+      </Link>)
+    },
+    {
+        id: '6',
+        date: Date.UTC(2021, 6, 10, 13, 20, 22),
+        title: 'Update plat',
+        icon: 'bulb-solid',
+        status: { variant: 'success', children: 'Good' }
+    },
+    {
+        id: '7',
+        date: Date.UTC(2021, 1, 20, 13, 20, 22),
+        title: 'Sent over request',
+        icon: 'bulb-solid',
+        status: { variant: 'success', children: 'Good' },
+        content: [
+            { id: '31', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },
+            {
+                id: '32',
+                name: "What's next",
+                value: (<Text>
+            We will fulfill your request within 3 business days. You will receive your statement
+            copy via mail at 23 Main St. Boston, MA.
+          </Text>)
+            },
+            {
+                id: '33',
+                name: 'Current due amount',
+                value: <CurrencyDisplay value={1343.45} currencyISOCode='USD'/>
+            }
+        ]
+    },
+    {
+        id: '8',
+        date: Date.UTC(2021, 1, 20, 13, 19, 22),
+        title: 'Fulfill customer request for last month’s billing statement',
+        icon: 'layers',
+        status: { variant: 'pending', children: 'Wait' },
+        content: [
+            { id: '41', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },
+            {
+                id: '42',
+                name: "What's next",
+                value: (<Text>
+            We will fulfill your request within 3 business days. You will receive your statement
+            copy via mail at 23 Main St. Boston, MA.
+          </Text>)
+            },
+            {
+                id: '43',
+                name: 'Current due amount',
+                value: <CurrencyDisplay value={121} currencyISOCode='USD'/>
+            }
+        ]
+    },
+    {
+        id: '9',
+        date: Date.UTC(2021, 1, 20, 0, 1, 22),
+        title: (<Link href='https://community.pega.com/support' target='_blank'>
+        Visit Pega support for assistance
+      </Link>)
+    },
+    {
+        id: '10',
+        date: Date.UTC(2021, 1, 19, 13, 20, 22),
+        title: 'Sent over request',
+        icon: 'bulb-solid',
+        status: { variant: 'success', children: 'Good' },
+        content: [
+            { id: '61', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },
+            {
+                id: '62',
+                name: "What's next",
+                value: (<Text>
+            We will fulfill your request within 3 business days. You will receive your statement
+            copy via mail at 23 Main St. Boston, MA.
+          </Text>)
+            },
+            {
+                id: '64',
+                name: 'Current due amount long label',
+                value: <CurrencyDisplay value={248.87} currencyISOCode='USD'/>
+            }
+        ]
+    },
+    {
+        id: '11',
+        date: Date.UTC(2021, 1, 17, 36, 20, 22),
+        title: 'Initial claim received',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '12',
+        date: Date.UTC(2020, 12, 15, 13, 19, 22),
+        title: 'Balance inquiry',
+        icon: 'phone-solid',
+        status: { variant: 'pending', children: 'Wait' }
+    },
+    {
+        id: '13',
+        date: Date.UTC(2020, 2, 20, 19, 28, 22),
+        title: 'Email blast: "Best Offer"',
+        icon: 'bell-off-solid'
+    },
+    {
+        id: '14',
+        date: Date.UTC(2020, 1, 12, 10, 25, 48),
+        title: 'Receive customer bill',
+        icon: 'layers',
+        status: { variant: 'success', children: 'Good' }
+    }
+];
+//# sourceMappingURL=Timeline.mocks.jsx.map

package/jsx/work/Timeline/Timeline.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.mocks.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Link, CurrencyDisplay, Text } from '@pega/cosmos-react-core';\nimport { TimelineProps } from '@pega/cosmos-react-work';\n\nexport const activity: TimelineProps['activity'] = [\n  {\n    id: '1',\n    date: Date.UTC(2025, 2, 20, 19, 28, 22),\n    title: 'Email blast: \"Buy today\"',\n    icon: 'bell-off-solid'\n  },\n  {\n    id: '2',\n    date: Date.UTC(2025, 2, 20, 18, 6, 22),\n    title: 'Confirm eligibility',\n    icon: 'circle-stacked-mixed'\n  },\n  {\n    id: '3',\n    date: Date.UTC(2023, 2, 10, 9, 26, 22),\n    title: 'Review customer bill',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '4',\n    date: Date.UTC(2022, 7, 10, 18, 6, 22),\n    title: 'Confirm eligibility',\n    icon: 'circle-stacked-mixed'\n  },\n  {\n    id: '5',\n    date: Date.UTC(2022, 6, 18, 0, 1, 22),\n    title: (\n      <Link href='https://www.pega.com' target='_blank'>\n        Visit Pega\n      </Link>\n    )\n  },\n  {\n    id: '6',\n    date: Date.UTC(2021, 6, 10, 13, 20, 22),\n    title: 'Update plat',\n    icon: 'bulb-solid',\n    status: { variant: 'success', children: 'Good' }\n  },\n  {\n    id: '7',\n    date: Date.UTC(2021, 1, 20, 13, 20, 22),\n    title: 'Sent over request',\n    icon: 'bulb-solid',\n    status: { variant: 'success', children: 'Good' },\n    content: [\n      { id: '31', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '32',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '33',\n        name: 'Current due amount',\n        value: <CurrencyDisplay value={1343.45} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '8',\n    date: Date.UTC(2021, 1, 20, 13, 19, 22),\n    title: 'Fulfill customer request for last month’s billing statement',\n    icon: 'layers',\n    status: { variant: 'pending', children: 'Wait' },\n    content: [\n      { id: '41', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '42',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '43',\n        name: 'Current due amount',\n        value: <CurrencyDisplay value={121} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '9',\n    date: Date.UTC(2021, 1, 20, 0, 1, 22),\n    title: (\n      <Link href='https://community.pega.com/support' target='_blank'>\n        Visit Pega support for assistance\n      </Link>\n    )\n  },\n  {\n    id: '10',\n    date: Date.UTC(2021, 1, 19, 13, 20, 22),\n    title: 'Sent over request',\n    icon: 'bulb-solid',\n    status: { variant: 'success', children: 'Good' },\n    content: [\n      { id: '61', name: 'Date range', value: <Text>Jan 1, 2021 - May 3, 2021</Text> },\n      {\n        id: '62',\n        name: \"What's next\",\n        value: (\n          <Text>\n            We will fulfill your request within 3 business days. You will receive your statement\n            copy via mail at 23 Main St. Boston, MA.\n          </Text>\n        )\n      },\n      {\n        id: '64',\n        name: 'Current due amount long label',\n        value: <CurrencyDisplay value={248.87} currencyISOCode='USD' />\n      }\n    ]\n  },\n  {\n    id: '11',\n    date: Date.UTC(2021, 1, 17, 36, 20, 22),\n    title: 'Initial claim received',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '12',\n    date: Date.UTC(2020, 12, 15, 13, 19, 22),\n    title: 'Balance inquiry',\n    icon: 'phone-solid',\n    status: { variant: 'pending', children: 'Wait' }\n  },\n  {\n    id: '13',\n    date: Date.UTC(2020, 2, 20, 19, 28, 22),\n    title: 'Email blast: \"Best Offer\"',\n    icon: 'bell-off-solid'\n  },\n  {\n    id: '14',\n    date: Date.UTC(2020, 1, 12, 10, 25, 48),\n    title: 'Receive customer bill',\n    icon: 'layers',\n    status: { variant: 'success', children: 'Good' }\n  }\n];\n"]}

package/jsx/work/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,11 @@
+import type { StoryFn } from '@storybook/react';
+import type { OmitStrict } from '@pega/cosmos-react-core';
+import type { TimelineProps } from '@pega/cosmos-react-work';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface TimelineDemoStoryProps extends TimelineProps {
+    lazyLoading?: boolean;
+}
+export declare const TimelineDemo: StoryFn<OmitStrict<TimelineDemoStoryProps, 'activity' | 'currentTime'>>;
+export declare const TimelineToolbarDemo: StoryFn;
+//# sourceMappingURL=Timeline.stories.d.ts.map

package/jsx/work/Timeline/Timeline.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,UAAU,EAAoB,MAAM,yBAAyB,CAAC;AAE5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAQ7D,wBAGU;AAEV,UAAU,sBAAuB,SAAQ,aAAa;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAChC,UAAU,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CAgD/D,CAAC;AAiBF,eAAO,MAAM,mBAAmB,EAAE,OA0CjC,CAAC"}

package/jsx/work/Timeline/Timeline.stories.jsx

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
+import { Timeline, TimelineToolbar } from '@pega/cosmos-react-work';
+import { activity } from './Timeline.mocks';
+export default {
+    title: 'Work/Timeline',
+    component: Timeline
+};
+export const TimelineDemo = (args) => {
+    const INITIAL_CHUNK_SIZE = 7;
+    const APPEND_CHUNK_SIZE = 3;
+    const [loading, setLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [items, setItems] = useState([]);
+    useEffect(() => {
+        const newItems = args.lazyLoading ? () => activity.slice(0, INITIAL_CHUNK_SIZE) : activity;
+        setHasMore(newItems.length < activity.length);
+        setItems(newItems);
+    }, [args.lazyLoading]);
+    const loadMore = useCallback(() => {
+        if (!loading) {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+                setItems(prevItems => {
+                    const previousItemsLength = prevItems.length;
+                    const newItems = activity.slice(previousItemsLength, previousItemsLength + APPEND_CHUNK_SIZE);
+                    if (newItems.length === 0) {
+                        setHasMore(false);
+                    }
+                    return [...prevItems, ...newItems];
+                });
+            }, 2000);
+        }
+    }, [loading]);
+    return (<Timeline activity={items} currentTime={new Date()} sortOrder={args.sortOrder} groupBy={args.groupBy} loading={loading} loadMore={hasMore ? loadMore : undefined}/>);
+};
+TimelineDemo.args = {
+    sortOrder: 'descending',
+    groupBy: 'date',
+    lazyLoading: false
+};
+TimelineDemo.argTypes = {
+    sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },
+    groupBy: {
+        options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],
+        control: { type: 'select' }
+    },
+    lazyLoading: { control: { type: 'boolean' } }
+};
+export const TimelineToolbarDemo = () => {
+    const [sortOrder, setSortOrder] = useState();
+    const [groupBy, setGroupBy] = useState();
+    const [items, setItems] = useState(activity);
+    const [searchValue, onSearchChange] = useState('');
+    const onSearchSubmit = useCallback((value) => {
+        setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));
+    }, []);
+    return (<Card>
+      <CardHeader>
+        <TimelineToolbar name='Timeline Demo' search={{ onSearchSubmit, onSearchChange, value: searchValue }} count={{ total: items.length }} sort={{
+            selected: sortOrder,
+            onItemClick: (id) => {
+                setSortOrder(id);
+            }
+        }} group={{
+            selected: groupBy,
+            onItemClick: (id) => {
+                setGroupBy(id);
+            }
+        }} item={{ grow: 1 }}/>
+      </CardHeader>
+      <CardContent>
+        <Timeline activity={items} currentTime={new Date()} sortOrder={sortOrder} groupBy={groupBy}/>
+      </CardContent>
+    </Card>);
+};
+//# sourceMappingURL=Timeline.stories.jsx.map

package/jsx/work/Timeline/Timeline.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.stories.jsx","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';\nimport type { OmitStrict, SearchInputProps } from '@pega/cosmos-react-core';\nimport { Timeline, TimelineToolbar } from '@pega/cosmos-react-work';\nimport type { TimelineProps } from '@pega/cosmos-react-work';\nimport type {\n  TimelineGroupBy,\n  TimelineSortOrder\n} from '@pega/cosmos-react-work/lib/components/Timeline/Timeline.types';\n\nimport { activity } from './Timeline.mocks';\n\nexport default {\n  title: 'Work/Timeline',\n  component: Timeline\n} as Meta;\n\ninterface TimelineDemoStoryProps extends TimelineProps {\n  lazyLoading?: boolean;\n}\n\nexport const TimelineDemo: StoryFn<\n  OmitStrict<TimelineDemoStoryProps, 'activity' | 'currentTime'>\n> = (args: OmitStrict<TimelineDemoStoryProps, 'activity' | 'currentTime'>) => {\n  const INITIAL_CHUNK_SIZE = 7;\n  const APPEND_CHUNK_SIZE = 3;\n\n  const [loading, setLoading] = useState(false);\n  const [hasMore, setHasMore] = useState(true);\n  const [items, setItems] = useState<TimelineProps['activity']>([]);\n\n  useEffect(() => {\n    const newItems = args.lazyLoading ? () => activity.slice(0, INITIAL_CHUNK_SIZE) : activity;\n    setHasMore(newItems.length < activity.length);\n    setItems(newItems);\n  }, [args.lazyLoading]);\n\n  const loadMore = useCallback(() => {\n    if (!loading) {\n      setLoading(true);\n      setTimeout(() => {\n        setLoading(false);\n\n        setItems(prevItems => {\n          const previousItemsLength = prevItems.length;\n          const newItems = activity.slice(\n            previousItemsLength,\n            previousItemsLength + APPEND_CHUNK_SIZE\n          );\n\n          if (newItems.length === 0) {\n            setHasMore(false);\n          }\n\n          return [...prevItems, ...newItems];\n        });\n      }, 2000);\n    }\n  }, [loading]);\n\n  return (\n    <Timeline\n      activity={items}\n      currentTime={new Date()}\n      sortOrder={args.sortOrder}\n      groupBy={args.groupBy}\n      loading={loading}\n      loadMore={hasMore ? loadMore : undefined}\n    />\n  );\n};\n\nTimelineDemo.args = {\n  sortOrder: 'descending',\n  groupBy: 'date',\n  lazyLoading: false\n};\n\nTimelineDemo.argTypes = {\n  sortOrder: { options: ['ascending', 'descending'], control: { type: 'select' } },\n  groupBy: {\n    options: ['date', 'monthyear', 'quarteryear', 'year', 'none'],\n    control: { type: 'select' }\n  },\n  lazyLoading: { control: { type: 'boolean' } }\n};\n\nexport const TimelineToolbarDemo: StoryFn = () => {\n  const [sortOrder, setSortOrder] = useState<TimelineSortOrder>();\n  const [groupBy, setGroupBy] = useState<TimelineGroupBy>();\n  const [items, setItems] = useState<TimelineProps['activity']>(activity);\n  const [searchValue, onSearchChange] = useState<SearchInputProps['value']>('');\n\n  const onSearchSubmit = useCallback((value: string) => {\n    setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));\n  }, []);\n\n  return (\n    <Card>\n      <CardHeader>\n        <TimelineToolbar\n          name='Timeline Demo'\n          search={{ onSearchSubmit, onSearchChange, value: searchValue }}\n          count={{ total: items.length }}\n          sort={{\n            selected: sortOrder,\n            onItemClick: (id: TimelineProps['sortOrder']) => {\n              setSortOrder(id);\n            }\n          }}\n          group={{\n            selected: groupBy,\n            onItemClick: (id: TimelineProps['groupBy']) => {\n              setGroupBy(id);\n            }\n          }}\n          item={{ grow: 1 }}\n        />\n      </CardHeader>\n      <CardContent>\n        <Timeline\n          activity={items}\n          currentTime={new Date()}\n          sortOrder={sortOrder}\n          groupBy={groupBy}\n        />\n      </CardContent>\n    </Card>\n  );\n};\n"]}

package/jsx/wss/AppShell/AppShell.mocks.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+export declare const DefaultMainContent: ({ content }: {
+    content: string;
+}) => import("react").JSX.Element;
+export declare const notificationItems: ({
+    id: string;
+    primary: string;
+    secondary: string[];
+    visual: import("react").JSX.Element;
+    unread: boolean;
+} | {
+    id: string;
+    primary: string;
+    visual: import("react").JSX.Element;
+    unread: boolean;
+    secondary?: undefined;
+} | {
+    id: string;
+    primary: string;
+    secondary: string[];
+    unread: boolean;
+    visual?: undefined;
+})[];
+//# sourceMappingURL=AppShell.mocks.d.ts.map

package/jsx/wss/AppShell/AppShell.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.mocks.d.ts","sourceRoot":"","sources":["../../../src/wss/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":";AAIA,eAAO,MAAM,kBAAkB;aAA4B,MAAM;iCAQhE,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;IAyD7B,CAAC"}

package/jsx/wss/AppShell/AppShell.mocks.jsx

@@ -0,0 +1,64 @@
+import { Avatar, Card, CardContent, Flex, Text } from '@pega/cosmos-react-core';
+import { StyledMainContent } from './AppShell.styles';
+export const DefaultMainContent = ({ content }) => (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>
+    <Card>
+      <CardContent>
+        <Text variant='h2'>{content} content</Text>
+      </CardContent>
+    </Card>
+  </Flex>);
+export const notificationItems = [
+    {
+        id: '123',
+        primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],
+        visual: <Avatar name='Dean Thomas'/>,
+        unread: true
+    },
+    {
+        id: '456',
+        primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
+        visual: <Avatar name='Seth DeAngelo'/>,
+        unread: true
+    },
+    {
+        id: '789',
+        primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],
+        visual: <Avatar name='Janet Moore'/>,
+        unread: true
+    },
+    {
+        id: '000',
+        primary: 'You have been awarded Employee of the Month! Congratulations!',
+        secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],
+        unread: true
+    },
+    {
+        id: '111',
+        primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
+        secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],
+        visual: <Avatar name='Dean Thomas'/>,
+        unread: true
+    },
+    {
+        id: '222',
+        primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
+        visual: <Avatar name='Seth DeAngelo'/>,
+        unread: true
+    },
+    {
+        id: '333',
+        primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
+        secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],
+        visual: <Avatar name='Janet Moore'/>,
+        unread: true
+    },
+    {
+        id: '444',
+        primary: 'You have been awarded Employee of the Month! Congratulations!',
+        secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],
+        unread: true
+    }
+];
+//# sourceMappingURL=AppShell.mocks.jsx.map

package/jsx/wss/AppShell/AppShell.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.mocks.jsx","sourceRoot":"","sources":["../../../src/wss/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Avatar, Card, CardContent, Flex, Text } from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const DefaultMainContent = ({ content }: { content: string }) => (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>{content} content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const notificationItems = [\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', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='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: <Avatar name='Seth DeAngelo' />,\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', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  },\n  {\n    id: '111',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '222',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '333',\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', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '444',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n"]}

package/jsx/wss/AppShell/AppShell.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryFn } from '@storybook/react';
+import type { ReactNode } from 'react';
+import type { AppShellProps } from '@pega/cosmos-react-wss';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface AppShellDemoProps {
+    appName?: AppShellProps['appInfo']['appName'];
+    imageSrc?: AppShellProps['appInfo']['imageSrc'];
+    numberOfNavLinks?: number;
+    navAlignment?: AppShellProps['navAlignment'];
+    navPosition?: AppShellProps['navPosition'];
+    operatorName?: AppShellProps['operator']['avatar']['name'];
+    operatorTitle?: AppShellProps['operator']['title'];
+    notificationsEmpty?: boolean;
+    notificationsLoading?: boolean;
+    mainContent?: ReactNode;
+}
+export declare const AppShellDemo: StoryFn<AppShellDemoProps>;
+//# sourceMappingURL=AppShell.stories.d.ts.map