@pega/cosmos-react-demos 5.0.0-dev.1.0 → 5.0.0-dev.10.0

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAMtD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;;AAEnE,wBAMU;AAEV,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAOnD,CAAC"}
+{"version":3,"file":"CaseView.stories.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;;AAE1D,wBAMU;AAEV,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,iBAAiB,CAOnD,CAAC"}

package/lib/work/CaseView/CaseView.stories.js

@@ -12,17 +12,6 @@ export default {
 export const CaseViewDemo = (args) => {
     return (_jsx(AppShellDemo, { appHeader: true, main: _jsx(CaseViewMock, { ...args, defaultExpanded: !!args.defaultExpanded }) }));
 };
-CaseViewDemo.parameters = {
-    eyes: {
-        runBefore: () => {
-            document
-                .querySelector(
-            // Find the case actions menu.
-            '[aria-label="Actions"]')
-                ?.click();
-        }
-    }
-};
 CaseViewDemo.args = {
     caseId: 'C-123456',
     heading: 'Constellation',

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

@@ -1 +1 @@
-{"version":3,"file":"CaseView.stories.js","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { CaseView } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\n\nimport { CaseViewMock, CaseViewMockProps } from './CaseView.mocks';\n\nexport default {\n  title: 'Work/CaseView',\n  component: CaseView,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const CaseViewDemo: StoryFn<CaseViewMockProps> = (args: CaseViewMockProps) => {\n  return (\n    <AppShellDemo\n      appHeader\n      main={<CaseViewMock {...args} defaultExpanded={!!args.defaultExpanded} />}\n    />\n  );\n};\n\nCaseViewDemo.parameters = {\n  eyes: {\n    runBefore: () => {\n      document\n        .querySelector<HTMLButtonElement>(\n          // Find the case actions menu.\n          '[aria-label=\"Actions\"]'\n        )\n        ?.click();\n    }\n  }\n};\n\nCaseViewDemo.args = {\n  caseId: 'C-123456',\n  heading: 'Constellation',\n  subheading: 'C-123456',\n  parentCases: false,\n  promotedActions: 1,\n  summaryFields: 'All',\n  stages: true,\n  tasks: true,\n  taskCount: 4,\n  predictions: true,\n  attachments: true,\n  stakeholders: true,\n  followers: true,\n  tags: true,\n  persistentUtility: false,\n  banner: false,\n  headingLength: 'short',\n  defaultExpanded: true\n};\n\nCaseViewDemo.argTypes = {\n  caseId: { control: { type: 'text' } },\n  heading: { control: { type: 'text' } },\n  subheading: { control: { type: 'text' } },\n  summaryFields: {\n    control: 'radio',\n    options: ['All', 'Primary only', 'Secondary only']\n  },\n  stages: { control: { type: 'boolean' } },\n  tasks: { control: { type: 'boolean' } },\n  taskCount: { control: { type: 'number' } },\n  parentCases: { control: { type: 'boolean' } },\n  predictions: { control: { type: 'boolean' } },\n  attachments: { control: { type: 'boolean' } },\n  stakeholders: { control: { type: 'boolean' } },\n  followers: { control: { type: 'boolean' } },\n  tags: { control: { type: 'boolean' } },\n  persistentUtility: { control: { type: 'boolean' } },\n  banner: { control: { type: 'boolean' } },\n  promotedActions: { control: { type: 'select' }, options: [0, 1, 2, 3, 4, 5] },\n  headingLength: { control: { type: 'select' }, options: ['short', 'medium', 'long'] },\n  defaultExpanded: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"CaseView.stories.js","sourceRoot":"","sources":["../../../src/work/CaseView/CaseView.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { CaseView } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo } from '../../core/AppShell/AppShell.stories';\n\nimport { CaseViewMock } from './CaseView.mocks';\nimport type { CaseViewMockProps } from './CaseView.mocks';\n\nexport default {\n  title: 'Work/CaseView',\n  component: CaseView,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const CaseViewDemo: StoryFn<CaseViewMockProps> = (args: CaseViewMockProps) => {\n  return (\n    <AppShellDemo\n      appHeader\n      main={<CaseViewMock {...args} defaultExpanded={!!args.defaultExpanded} />}\n    />\n  );\n};\n\nCaseViewDemo.args = {\n  caseId: 'C-123456',\n  heading: 'Constellation',\n  subheading: 'C-123456',\n  parentCases: false,\n  promotedActions: 1,\n  summaryFields: 'All',\n  stages: true,\n  tasks: true,\n  taskCount: 4,\n  predictions: true,\n  attachments: true,\n  stakeholders: true,\n  followers: true,\n  tags: true,\n  persistentUtility: false,\n  banner: false,\n  headingLength: 'short',\n  defaultExpanded: true\n};\n\nCaseViewDemo.argTypes = {\n  caseId: { control: { type: 'text' } },\n  heading: { control: { type: 'text' } },\n  subheading: { control: { type: 'text' } },\n  summaryFields: {\n    control: 'radio',\n    options: ['All', 'Primary only', 'Secondary only']\n  },\n  stages: { control: { type: 'boolean' } },\n  tasks: { control: { type: 'boolean' } },\n  taskCount: { control: { type: 'number' } },\n  parentCases: { control: { type: 'boolean' } },\n  predictions: { control: { type: 'boolean' } },\n  attachments: { control: { type: 'boolean' } },\n  stakeholders: { control: { type: 'boolean' } },\n  followers: { control: { type: 'boolean' } },\n  tags: { control: { type: 'boolean' } },\n  persistentUtility: { control: { type: 'boolean' } },\n  banner: { control: { type: 'boolean' } },\n  promotedActions: { control: { type: 'select' }, options: [0, 1, 2, 3, 4, 5] },\n  headingLength: { control: { type: 'select' }, options: ['short', 'medium', 'long'] },\n  defaultExpanded: { control: { type: 'boolean' } }\n};\n"]}

package/lib/work/CaseView/Pulse.mocks.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FeedProps } from '@pega/cosmos-react-social';
+import type { FeedProps } from '@pega/cosmos-react-social';
 export declare const PulseMock: ({ markdownMap, onMentionPreview }: {
     markdownMap?: FeedProps['markdownMap'];
     onMentionPreview?: FeedProps['onMentionPreview'];

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

@@ -1 +1 @@
-{"version":3,"file":"Pulse.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAMtD,eAAO,MAAM,SAAS;kBAIN,SAAS,CAAC,aAAa,CAAC;uBACnB,SAAS,CAAC,kBAAkB,CAAC;iBAoDjD,CAAC"}
+{"version":3,"file":"Pulse.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAM3D,eAAO,MAAM,SAAS;kBAIN,SAAS,CAAC,aAAa,CAAC;uBACnB,SAAS,CAAC,kBAAkB,CAAC;iBAoDjD,CAAC"}

package/lib/work/CaseView/Pulse.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pulse.mocks.js","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,WAAW,EACX,gBAAgB,EAIjB,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAClC,OAAO;YACL,EAAE,EAAE,CAAC;YACL,IAAI,EAAE,IAAI,IAAI,CACZ,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,QAAQ,GAAG,QAAQ,CACzE,CAAC,cAAc,EAAE;YAClB,WAAW,EAAE,gCAAgC,CAAC,GAAG,CAAC,EAAE;YACpD,WAAW,EAAE,wBAAwB;SACtC,CAAC;IACJ,CAAC,CAAC,EACJ,EAAE,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IACH,IAAI,EAAE;oBACJ,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;oBAC9B,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;iBACnC,EACD,YAAY,EAAE,UAAU,EACxB,UAAU,EAAE,aAAa,GACzB,EAEF,MAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aACxB,UAAU,KAAK,OAAO,IAAI,CACzB,KAAC,QAAQ,IAAC,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CAC3E,EACA,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,KAAK,IACJ,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE;oCACP,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;oCACnC,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;oCACjD,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE;iCACnD,GACD,GACU,GACT,CACR,IACQ,IACN,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useMemo, useState } from 'react';\n\nimport { Tabs, TabPanel, Flex, Table, Card, CardContent } from '@pega/cosmos-react-core';\nimport { FeedProps } from '@pega/cosmos-react-social';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\n\nconst msInHour = 60 * 60 * 1000;\n\nexport const PulseMock = ({\n  markdownMap,\n  onMentionPreview\n}: {\n  markdownMap?: FeedProps['markdownMap'];\n  onMentionPreview?: FeedProps['onMentionPreview'];\n}) => {\n  const [currentTab, setCurrentTab] = useState('pulse');\n\n  const historyData = useMemo(\n    () =>\n      Array.from({ length: 37 }, (_, i) => {\n        return {\n          id: i,\n          date: new Date(\n            Date.now() - i * 24 * msInHour + Math.random() * 2 * msInHour - msInHour\n          ).toLocaleString(),\n          description: `Description for history item ${i + 1}`,\n          performedBy: 'Constellation Operator'\n        };\n      }),\n    []\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Tabs\n        tabs={[\n          { id: 'pulse', name: 'Pulse' },\n          { id: 'history', name: 'History' }\n        ]}\n        currentTabId={currentTab}\n        onTabClick={setCurrentTab}\n      />\n\n      <TabPanel tabId={currentTab}>\n        {currentTab === 'pulse' && (\n          <FeedDemo markdownMap={markdownMap} onMentionPreview={onMentionPreview} />\n        )}\n        {currentTab === 'history' && (\n          <Card>\n            <CardContent>\n              <Table\n                title='History'\n                data={historyData}\n                columns={[\n                  { renderer: 'date', label: 'Date' },\n                  { renderer: 'description', label: 'Description' },\n                  { renderer: 'performedBy', label: 'Performed By' }\n                ]}\n              />\n            </CardContent>\n          </Card>\n        )}\n      </TabPanel>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"Pulse.mocks.js","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGzF,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,WAAW,EACX,gBAAgB,EAIjB,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAClC,OAAO;YACL,EAAE,EAAE,CAAC;YACL,IAAI,EAAE,IAAI,IAAI,CACZ,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,QAAQ,GAAG,QAAQ,CACzE,CAAC,cAAc,EAAE;YAClB,WAAW,EAAE,gCAAgC,CAAC,GAAG,CAAC,EAAE;YACpD,WAAW,EAAE,wBAAwB;SACtC,CAAC;IACJ,CAAC,CAAC,EACJ,EAAE,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IACH,IAAI,EAAE;oBACJ,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;oBAC9B,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;iBACnC,EACD,YAAY,EAAE,UAAU,EACxB,UAAU,EAAE,aAAa,GACzB,EAEF,MAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aACxB,UAAU,KAAK,OAAO,IAAI,CACzB,KAAC,QAAQ,IAAC,WAAW,EAAE,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CAC3E,EACA,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,KAAK,IACJ,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE;oCACP,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;oCACnC,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;oCACjD,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE;iCACnD,GACD,GACU,GACT,CACR,IACQ,IACN,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useMemo, useState } from 'react';\n\nimport { Tabs, TabPanel, Flex, Table, Card, CardContent } from '@pega/cosmos-react-core';\nimport type { FeedProps } from '@pega/cosmos-react-social';\n\nimport { FeedDemo } from '../../social/Feed/Feed.stories';\n\nconst msInHour = 60 * 60 * 1000;\n\nexport const PulseMock = ({\n  markdownMap,\n  onMentionPreview\n}: {\n  markdownMap?: FeedProps['markdownMap'];\n  onMentionPreview?: FeedProps['onMentionPreview'];\n}) => {\n  const [currentTab, setCurrentTab] = useState('pulse');\n\n  const historyData = useMemo(\n    () =>\n      Array.from({ length: 37 }, (_, i) => {\n        return {\n          id: i,\n          date: new Date(\n            Date.now() - i * 24 * msInHour + Math.random() * 2 * msInHour - msInHour\n          ).toLocaleString(),\n          description: `Description for history item ${i + 1}`,\n          performedBy: 'Constellation Operator'\n        };\n      }),\n    []\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Tabs\n        tabs={[\n          { id: 'pulse', name: 'Pulse' },\n          { id: 'history', name: 'History' }\n        ]}\n        currentTabId={currentTab}\n        onTabClick={setCurrentTab}\n      />\n\n      <TabPanel tabId={currentTab}>\n        {currentTab === 'pulse' && (\n          <FeedDemo markdownMap={markdownMap} onMentionPreview={onMentionPreview} />\n        )}\n        {currentTab === 'history' && (\n          <Card>\n            <CardContent>\n              <Table\n                title='History'\n                data={historyData}\n                columns={[\n                  { renderer: 'date', label: 'Date' },\n                  { renderer: 'description', label: 'Description' },\n                  { renderer: 'performedBy', label: 'Performed By' }\n                ]}\n              />\n            </CardContent>\n          </Card>\n        )}\n      </TabPanel>\n    </Flex>\n  );\n};\n"]}

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

@@ -3,6 +3,8 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
 export default _default;
 interface DetailsDemoProps {
     description?: string;
+    collapsible?: boolean;
+    showAdditionalInfo?: boolean;
 }
 export declare const DetailsDemo: StoryFn<DetailsDemoProps>;
 //# sourceMappingURL=Details.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAKtD,wBAaU;AAEV,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAuFjD,CAAC"}
+{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAKtD,wBAiBU;AAEV,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAiHjD,CAAC"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
+import { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
 import { Details, DetailsContext } from '@pega/cosmos-react-work';
 export default {
     title: 'Work/Details',
@@ -9,14 +9,18 @@ export default {
         layout: 'centered'
     },
     args: {
-        description: 'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.'
+        description: 'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',
+        collapsible: false,
+        showAdditionalInfo: false
     },
     argTypes: {
-        description: { control: { type: 'text' } }
+        description: { control: { type: 'text' } },
+        collapsible: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 export const DetailsDemo = (args) => {
-    const { description } = args;
+    const { description, collapsible, showAdditionalInfo } = args;
     const isNotMobile = useBreakpoint('sm');
     const ctx = useMemo(() => ({
         mobileView: !isNotMobile,
@@ -27,6 +31,10 @@ export const DetailsDemo = (args) => {
                 _jsx(FieldValueItem, { variant: 'stacked', name: 'Location', value: 'Berlin' }),
                 _jsx(FieldValueItem, { variant: 'stacked', name: 'Make', value: 'Ford' }),
                 _jsx(FieldValueItem, { variant: 'stacked', name: 'Model', value: 'F150' })
-            ], description: description, children: [_jsxs(Details, { name: 'Nested as flex', nested: true, asFlex: true, children: [_jsx(Details, { nested: true, children: _jsxs(Details, { nested: true, children: [_jsx(FieldValueItem, { name: 'Make', value: 'Ford' }), _jsx(FieldValueItem, { name: 'Model', value: 'F150' })] }) }), _jsxs(Details, { nested: true, children: [_jsx(FieldValueItem, { name: 'Mileage', value: '78,500' }), _jsx(FieldValueItem, { name: 'Trim', value: 'Lariat' })] })] }), _jsx(FieldValueItem, { name: 'Description', variant: 'stacked', value: _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat." }) }), _jsxs(Details, { name: 'Nested list', nested: true, children: [_jsx(FieldValueItem, { name: 'First name', value: 'Howard' }), _jsx(FieldValueItem, { name: 'Last name', value: 'Kennedy' }), _jsxs(Details, { name: 'Deeper list', nested: true, children: [_jsx(FieldValueItem, { name: 'Color', value: 'red' }), _jsx(FieldValueItem, { name: 'Year', value: '2017' })] }), _jsxs(Details, { name: 'Value comparison', nested: true, valueComparison: true, children: [_jsx(FieldValueItem, { name: 'Open lorem ipsum dolor set amet ipsum ket sit amet', value: '$405,000,000.00' }), _jsx(FieldValueItem, { name: 'Close', value: '$401.00' }), _jsx(FieldValueItem, { name: '52 week high', value: '$445.00' }), _jsx(FieldValueItem, { name: '52 week low', value: '$335.00' })] }), _jsxs(Details, { name: 'Collapsible', nested: true, valueComparison: true, collapsible: true, children: [_jsx(FieldValueItem, { name: 'Open', value: '$205.00' }), _jsx(FieldValueItem, { name: 'Close', value: '$209.00' }), _jsx(FieldValueItem, { name: '52 week high', value: '$312.00' }), _jsx(FieldValueItem, { name: '52 week low', value: '$115.00' })] })] }), _jsx(FieldValueItem, { name: 'Age', value: '56' }), _jsx(FieldValueItem, { name: 'Location', value: 'Berlin' })] }) }));
+            ], description: description, collapsible: collapsible, additionalInfo: showAdditionalInfo
+                ? {
+                    content: (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [_jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida." }), _jsx("p", { children: "Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla aliquet porttitor lacus." }), _jsx(Link, { href: '/', target: '_blank', children: "Neque vitae" })] }))
+                }
+                : undefined, children: [_jsxs(Details, { name: 'Nested as flex', nested: true, asFlex: true, children: [_jsx(Details, { nested: true, children: _jsxs(Details, { nested: true, children: [_jsx(FieldValueItem, { name: 'Make', value: 'Ford' }), _jsx(FieldValueItem, { name: 'Model', value: 'F150' })] }) }), _jsxs(Details, { nested: true, children: [_jsx(FieldValueItem, { name: 'Mileage', value: '78,500' }), _jsx(FieldValueItem, { name: 'Trim', value: 'Lariat' })] })] }), _jsx(FieldValueItem, { name: 'Description', variant: 'stacked', value: _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat." }) }), _jsx(FieldValueItem, { name: 'Keys', value: '3' }), _jsxs(Details, { name: 'Nested list', nested: true, children: [_jsx(FieldValueItem, { name: 'First name', value: 'Howard' }), _jsx(FieldValueItem, { name: 'Last name', value: 'Kennedy' }), _jsxs(Details, { name: 'Deeper list', nested: true, children: [_jsx(FieldValueItem, { name: 'Color', value: 'red' }), _jsx(FieldValueItem, { name: 'Year', value: '2017' })] }), _jsxs(Details, { name: 'Value comparison', nested: true, valueComparison: true, children: [_jsx(FieldValueItem, { name: 'Open lorem ipsum dolor set amet ipsum ket sit amet', value: '$405,000,000.00' }), _jsx(FieldValueItem, { name: 'Close', value: '$401.00' }), _jsx(FieldValueItem, { name: '52 week high', value: '$445.00' }), _jsx(FieldValueItem, { name: '52 week low', value: '$335.00' })] }), _jsxs(Details, { name: 'Collapsible', nested: true, valueComparison: true, collapsible: true, children: [_jsx(FieldValueItem, { name: 'Open', value: '$205.00' }), _jsx(FieldValueItem, { name: 'Close', value: '$209.00' }), _jsx(FieldValueItem, { name: '52 week high', value: '$312.00' }), _jsx(FieldValueItem, { name: '52 week low', value: '$115.00' })] })] }), _jsx(FieldValueItem, { name: 'Age', value: '56' }), _jsx(FieldValueItem, { name: 'Location', value: 'Berlin' })] }) }));
 };
 //# sourceMappingURL=Details.stories.js.map

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 { useMemo } from 'react';\nimport type { Meta, StoryFn } 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  args: {\n    description:\n      'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.'\n  },\n  argTypes: {\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\n\ninterface DetailsDemoProps {\n  description?: string;\n}\n\nexport const DetailsDemo: StoryFn<DetailsDemoProps> = (args: DetailsDemoProps) => {\n  const { description } = args;\n  const isNotMobile = useBreakpoint('sm');\n\n  const ctx = useMemo(\n    () => ({\n      mobileView: !isNotMobile,\n      longestLabelLength: 10\n    }),\n    [isNotMobile]\n  );\n\n  return (\n    <DetailsContext.Provider value={ctx}>\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        description={description}\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 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\n          <Details name='Value comparison' nested valueComparison>\n            <FieldValueItem\n              name='Open lorem ipsum dolor set amet ipsum ket sit amet'\n              value='$405,000,000.00'\n            />\n            <FieldValueItem name='Close' value='$401.00' />\n            <FieldValueItem name='52 week high' value='$445.00' />\n            <FieldValueItem name='52 week low' value='$335.00' />\n          </Details>\n\n          <Details name='Collapsible' nested valueComparison collapsible>\n            <FieldValueItem name='Open' value='$205.00' />\n            <FieldValueItem name='Close' value='$209.00' />\n            <FieldValueItem name='52 week high' value='$312.00' />\n            <FieldValueItem name='52 week low' value='$115.00' />\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"]}
+{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Link, 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  args: {\n    description:\n      'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',\n    collapsible: false,\n    showAdditionalInfo: false\n  },\n  argTypes: {\n    description: { control: { type: 'text' } },\n    collapsible: { control: { type: 'boolean' } },\n    showAdditionalInfo: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface DetailsDemoProps {\n  description?: string;\n  collapsible?: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const DetailsDemo: StoryFn<DetailsDemoProps> = (args: DetailsDemoProps) => {\n  const { description, collapsible, showAdditionalInfo } = args;\n  const isNotMobile = useBreakpoint('sm');\n\n  const ctx = useMemo(\n    () => ({\n      mobileView: !isNotMobile,\n      longestLabelLength: 10\n    }),\n    [isNotMobile]\n  );\n\n  return (\n    <DetailsContext.Provider value={ctx}>\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        description={description}\n        collapsible={collapsible}\n        additionalInfo={\n          showAdditionalInfo\n            ? {\n                content: (\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                    <p>\n                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n                      semper feugiat nibh sed pulvinar proin gravida.\n                    </p>\n                    <p>\n                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n                      nulla aliquet porttitor lacus.\n                    </p>\n                    <Link href='/' target='_blank'>\n                      Neque vitae\n                    </Link>\n                  </Flex>\n                )\n              }\n            : undefined\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 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        <FieldValueItem name='Keys' value='3' />\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\n          <Details name='Value comparison' nested valueComparison>\n            <FieldValueItem\n              name='Open lorem ipsum dolor set amet ipsum ket sit amet'\n              value='$405,000,000.00'\n            />\n            <FieldValueItem name='Close' value='$401.00' />\n            <FieldValueItem name='52 week high' value='$445.00' />\n            <FieldValueItem name='52 week low' value='$335.00' />\n          </Details>\n\n          <Details name='Collapsible' nested valueComparison collapsible>\n            <FieldValueItem name='Open' value='$205.00' />\n            <FieldValueItem name='Close' value='$209.00' />\n            <FieldValueItem name='52 week high' value='$312.00' />\n            <FieldValueItem name='52 week low' value='$115.00' />\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/IntelligentGuidance/IntelligentGuidance.stories.d.ts

@@ -2,5 +2,4 @@ import type { StoryFn } from '@storybook/react';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const IntelligentGuidanceDemo: StoryFn;
-export declare const CaseViewWithIntelligentGuidance: StoryFn;
 //# sourceMappingURL=IntelligentGuidance.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/work/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAyBtD,wBAMU;AAEV,eAAO,MAAM,uBAAuB,EAAE,OAoHrC,CAAC;AAIF,eAAO,MAAM,+BAA+B,EAAE,OAkT7C,CAAC"}
+{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/work/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAStD,wBAMU;AAEV,eAAO,MAAM,uBAAuB,EAAE,OAoHrC,CAAC"}

package/lib/work/IntelligentGuidance/IntelligentGuidance.stories.js

@@ -1,12 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { Button, createUID, Form, Grid, registerIcon, Input, MenuButton, Text } from '@pega/cosmos-react-core';
-import { TaskManager, TaskView } from '@pega/cosmos-react-cs';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { registerIcon } from '@pega/cosmos-react-core';
 import { IntelligentGuidance } from '@pega/cosmos-react-work';
 import * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';
-import { CaseViewDemo } from '../CaseView/CaseView.stories';
-import { TimelineDemo } from '../Timeline/Timeline.stories';
-import { TaskPickerMockData } from '../../cs/TaskManager/TaskManager.mocks';
 registerIcon(userSolidIcon);
 export default {
     title: 'Work/IntelligentGuidance',
@@ -117,232 +113,4 @@ export const IntelligentGuidanceDemo = () => {
             setIsCollapsed(prevState => !prevState);
         } }));
 };
-export const CaseViewWithIntelligentGuidance = () => {
-    const WRAP_UP_TASK_ID = createUID();
-    const CHANGE_ADDRESS_TASK_ID = createUID();
-    const UPDATE_PROFILE_TASK_ID = createUID();
-    const [serviceTasks, setServiceTasks] = useState([
-        {
-            id: CHANGE_ADDRESS_TASK_ID,
-            icon: 'check',
-            name: 'Change address',
-            isResolved: true,
-            status: {
-                text: 'Resolve Completed',
-                variant: 'success'
-            }
-        },
-        {
-            id: createUID(),
-            icon: 'clipboard',
-            name: 'Lost or stolen card',
-            isResolved: false,
-            status: {
-                text: 'In Progress',
-                variant: 'pending'
-            }
-        },
-        {
-            id: UPDATE_PROFILE_TASK_ID,
-            icon: 'bulb',
-            name: 'Update contact profile',
-            isResolved: false,
-            meta: 'Suggested task'
-        }
-    ]);
-    const formActionsElemRef = useRef(null);
-    const taskManagerRef = useRef(null);
-    const [activeTaskId, setActiveTaskId] = useState(undefined);
-    const [disableWrapUp, setDisableWrapUp] = useState(false);
-    const addTaskButtonRef = useRef(null);
-    useEffect(() => {
-        if (formActionsElemRef.current) {
-            formActionsElemRef.current.focus();
-            formActionsElemRef.current.scrollIntoView(false);
-        }
-        else if (addTaskButtonRef.current) {
-            addTaskButtonRef.current.scrollIntoView(false);
-        }
-    }, [activeTaskId]);
-    const performTaskAction = (taskId, taskAction) => {
-        if (taskId === WRAP_UP_TASK_ID) {
-            if (taskAction === 'cancel' || taskAction === 'submit') {
-                setActiveTaskId(undefined);
-            }
-            else if (taskAction === 'launch') {
-                setActiveTaskId(WRAP_UP_TASK_ID);
-            }
-        }
-        else if (taskAction === 'launch') {
-            setActiveTaskId(taskId);
-            setServiceTasks(prevTasks => {
-                return prevTasks.map(task => {
-                    if (task.id === taskId) {
-                        return {
-                            ...task,
-                            icon: 'clipboard',
-                            meta: undefined,
-                            status: {
-                                variant: 'pending',
-                                text: 'In Progress'
-                            }
-                        };
-                    }
-                    return task;
-                });
-            });
-        }
-        else if (taskAction === 'cancel') {
-            setActiveTaskId(undefined);
-        }
-        else if (taskAction === 'submit') {
-            setActiveTaskId(undefined);
-            setServiceTasks(prevTasks => {
-                return prevTasks.map(task => {
-                    if (task.id === taskId) {
-                        return {
-                            ...task,
-                            icon: 'check',
-                            isResolved: true,
-                            status: {
-                                variant: 'success',
-                                text: 'Resolve Completed'
-                            }
-                        };
-                    }
-                    return task;
-                });
-            });
-        }
-        else if (taskAction === 'dismiss') {
-            setServiceTasks(prevTasks => {
-                return prevTasks.filter(task => task.id !== taskId);
-            });
-        }
-    };
-    const [items, setItems] = useState([
-        {
-            id: '1',
-            label: 'Update contact profile',
-            icon: 'bulb',
-            type: 'Task',
-            onClick: () => {
-                performTaskAction(UPDATE_PROFILE_TASK_ID, 'launch');
-                setItems(prevItems => prevItems.filter(item => item.id !== '1'));
-            },
-            onDismiss: () => {
-                setItems(prevItems => prevItems.filter(item => item.id !== '1'));
-            }
-        },
-        {
-            id: '2',
-            label: 'Change address',
-            icon: 'clipboard',
-            type: 'Task',
-            onClick: () => {
-                performTaskAction(CHANGE_ADDRESS_TASK_ID, 'launch');
-                setItems(prevItems => prevItems.filter(item => item.id !== '2'));
-            },
-            onDismiss: () => {
-                setItems(prevItems => prevItems.filter(item => item.id !== '2'));
-            }
-        }
-    ]);
-    const [isCollapsed, setIsCollapsed] = useState(false);
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setItems(prev => [
-                ...prev,
-                {
-                    id: '3',
-                    label: 'Demo item',
-                    icon: 'clipboard',
-                    type: 'Demo',
-                    onClick: () => {
-                        setItems(prevItems => prevItems.filter(item => item.id !== '3'));
-                    },
-                    onDismiss: () => {
-                        setItems(prevItems => prevItems.filter(item => item.id !== '3'));
-                    }
-                }
-            ]);
-            setIsCollapsed(false);
-        }, 5000);
-        return () => clearTimeout(timer);
-    }, []);
-    const renderTasks = (selections) => {
-        const newTasks = selections.map((selection, i) => {
-            const taskId = createUID();
-            if (i === 0) {
-                return {
-                    id: taskId,
-                    icon: 'clipboard',
-                    name: selection.primary,
-                    isResolved: false,
-                    status: {
-                        variant: 'pending',
-                        text: 'In Progress'
-                    }
-                };
-            }
-            return {
-                id: taskId,
-                icon: 'clipboard',
-                name: selection.primary,
-                isResolved: false,
-                meta: 'Queued task'
-            };
-        });
-        setServiceTasks(prevTasks => {
-            return [...newTasks, ...prevTasks];
-        });
-        if (newTasks.length > 0) {
-            performTaskAction(newTasks[0].id, 'launch');
-        }
-    };
-    const taskWidget = (_jsx(TaskManager, { ref: taskManagerRef, tasks: serviceTasks.map(task => {
-            if (task.id === activeTaskId) {
-                return {
-                    ...task,
-                    active: true
-                };
-            }
-            return task;
-        }), emptyText: 'No tasks added', banner: {
-            icon: 'headset',
-            content: 'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct ?'
-        }, onTaskLaunch: id => {
-            performTaskAction(id, 'launch');
-        }, onTaskDismiss: id => {
-            performTaskAction(id, 'dismiss');
-        }, addTask: {
-            items: TaskPickerMockData.tasks,
-            onAdd: renderTasks
-        }, wrapUp: {
-            disable: disableWrapUp,
-            onClick: () => {
-                performTaskAction(WRAP_UP_TASK_ID, 'launch');
-                setDisableWrapUp(true);
-            },
-            active: activeTaskId === WRAP_UP_TASK_ID
-        }, main: _jsx(TaskView, { header: _jsx(Text, { variant: 'h2', children: activeTaskId === WRAP_UP_TASK_ID
-                    ? 'Wrap up'
-                    : serviceTasks.find(task => task.id === activeTaskId)?.name }), actions: _jsx(MenuButton, { ref: formActionsElemRef, menu: {
-                    items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map((name) => ({
-                        primary: name,
-                        id: name,
-                        onClick: () => { }
-                    }))
-                }, text: 'Actions' }), children: _jsx(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', onClick: () => {
-                                performTaskAction(activeTaskId, 'cancel');
-                            }, children: "Cancel" }), _jsxs("div", { children: [_jsx(Button, { name: 'Save', children: "Save" }), _jsx(Button, { name: 'Submit', variant: 'primary', onClick: () => {
-                                        performTaskAction(activeTaskId, 'submit');
-                                    }, children: "Submit" })] })] }), children: _jsx(Grid, { container: { rowGap: 2 }, children: activeTaskId === WRAP_UP_TASK_ID ? (_jsx(TimelineDemo, {})) : (Array.from({ length: 15 }, (undef, i) => {
-                        const idx = i + 1;
-                        return _jsx(Input, { label: `Field ${idx}` }, idx);
-                    })) }) }) }) }));
-    return (_jsx(CaseViewDemo, { caseId: 'C-123', heading: 'Intelligent Guidance demo case', tasks: taskWidget, intelligentGuidance: _jsx(IntelligentGuidance, { items: items, heading: 'Intelligent guidance', isCollapsed: isCollapsed, onExpandCollapse: () => {
-                setIsCollapsed(prevState => !prevState);
-            } }) }));
-};
 //# sourceMappingURL=IntelligentGuidance.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IntelligentGuidance.stories.js","sourceRoot":"","sources":["../../../src/work/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport {\n  Button,\n  createUID,\n  Form,\n  Grid,\n  registerIcon,\n  Input,\n  MenuButton,\n  Text\n} from '@pega/cosmos-react-core';\nimport type { MenuItemProps, StatusProps } from '@pega/cosmos-react-core';\nimport { TaskManager, TaskView } from '@pega/cosmos-react-cs';\nimport type { TaskProps } from '@pega/cosmos-react-cs';\nimport { IntelligentGuidance } from '@pega/cosmos-react-work';\nimport type { IntelligentGuidanceProps } from '@pega/cosmos-react-work';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\n\nimport { CaseViewDemo } from '../CaseView/CaseView.stories';\nimport { TimelineDemo } from '../Timeline/Timeline.stories';\nimport { TaskPickerMockData } from '../../cs/TaskManager/TaskManager.mocks';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Work/IntelligentGuidance',\n  component: IntelligentGuidance,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const IntelligentGuidanceDemo: StoryFn = () => {\n  const [previousItems, setPreviousItems] = useState<IntelligentGuidanceProps['items']>([]);\n  const [currentItems, setCurrentItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '1');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      },\n      onClick: () => {}\n    },\n    {\n      id: '2',\n      label: 'Update contact profile',\n      icon: 'polaris',\n      type: 'Knowledge Article',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '2' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '2');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      },\n      new: true\n    },\n    {\n      id: '3',\n      label: 'Task suggestion',\n      icon: 'polaris',\n      type: 'Reason detected',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '3' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '3');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '3'));\n      },\n      new: true\n    },\n    {\n      id: '4',\n      label: 'Demo item',\n      icon: 'polaris',\n      type: 'Demo',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '4' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '4');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '4'));\n      },\n      new: true\n    }\n  ]);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n\n  return (\n    <IntelligentGuidance\n      items={currentItems}\n      previousItems={previousItems}\n      heading='Suggested actions'\n      isCollapsed={isCollapsed}\n      onExpandCollapse={() => {\n        setIsCollapsed(prevState => !prevState);\n      }}\n    />\n  );\n};\n\ntype TaskActions = 'cancel' | 'launch' | 'dismiss' | 'submit';\n\nexport const CaseViewWithIntelligentGuidance: StoryFn = () => {\n  const WRAP_UP_TASK_ID = createUID();\n  const CHANGE_ADDRESS_TASK_ID = createUID();\n  const UPDATE_PROFILE_TASK_ID = createUID();\n\n  const [serviceTasks, setServiceTasks] = useState<TaskProps[]>([\n    {\n      id: CHANGE_ADDRESS_TASK_ID,\n      icon: 'check',\n      name: 'Change address',\n      isResolved: true,\n      status: {\n        text: 'Resolve Completed',\n        variant: 'success' as StatusProps['variant']\n      }\n    },\n    {\n      id: createUID(),\n      icon: 'clipboard',\n      name: 'Lost or stolen card',\n      isResolved: false,\n      status: {\n        text: 'In Progress',\n        variant: 'pending' as StatusProps['variant']\n      }\n    },\n    {\n      id: UPDATE_PROFILE_TASK_ID,\n      icon: 'bulb',\n      name: 'Update contact profile',\n      isResolved: false,\n      meta: 'Suggested task'\n    }\n  ]);\n\n  const formActionsElemRef = useRef<HTMLButtonElement>(null);\n  const taskManagerRef = useRef<HTMLDivElement>(null);\n  const [activeTaskId, setActiveTaskId] = useState<string | undefined>(undefined);\n  const [disableWrapUp, setDisableWrapUp] = useState<boolean>(false);\n  const addTaskButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (formActionsElemRef.current) {\n      formActionsElemRef.current.focus();\n      formActionsElemRef.current.scrollIntoView(false);\n    } else if (addTaskButtonRef.current) {\n      addTaskButtonRef.current.scrollIntoView(false);\n    }\n  }, [activeTaskId]);\n\n  const performTaskAction = (taskId: string | undefined, taskAction: TaskActions) => {\n    if (taskId === WRAP_UP_TASK_ID) {\n      if (taskAction === 'cancel' || taskAction === 'submit') {\n        setActiveTaskId(undefined);\n      } else if (taskAction === 'launch') {\n        setActiveTaskId(WRAP_UP_TASK_ID);\n      }\n    } else if (taskAction === 'launch') {\n      setActiveTaskId(taskId);\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId) {\n            return {\n              ...task,\n              icon: 'clipboard',\n              meta: undefined,\n              status: {\n                variant: 'pending' as StatusProps['variant'],\n                text: 'In Progress'\n              }\n            };\n          }\n          return task;\n        });\n      });\n    } else if (taskAction === 'cancel') {\n      setActiveTaskId(undefined);\n    } else if (taskAction === 'submit') {\n      setActiveTaskId(undefined);\n      setServiceTasks(prevTasks => {\n        return prevTasks.map(task => {\n          if (task.id === taskId) {\n            return {\n              ...task,\n              icon: 'check',\n              isResolved: true,\n              status: {\n                variant: 'success' as StatusProps['variant'],\n                text: 'Resolve Completed'\n              }\n            };\n          }\n          return task;\n        });\n      });\n    } else if (taskAction === 'dismiss') {\n      setServiceTasks(prevTasks => {\n        return prevTasks.filter(task => task.id !== taskId);\n      });\n    }\n  };\n\n  const [items, setItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Update contact profile',\n      icon: 'bulb',\n      type: 'Task',\n      onClick: () => {\n        performTaskAction(UPDATE_PROFILE_TASK_ID, 'launch');\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      }\n    },\n    {\n      id: '2',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onClick: () => {\n        performTaskAction(CHANGE_ADDRESS_TASK_ID, 'launch');\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      },\n      onDismiss: () => {\n        setItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      }\n    }\n  ]);\n\n  const [isCollapsed, setIsCollapsed] = useState(false);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setItems(prev => [\n        ...prev,\n        {\n          id: '3',\n          label: 'Demo item',\n          icon: 'clipboard',\n          type: 'Demo',\n          onClick: () => {\n            setItems(prevItems => prevItems.filter(item => item.id !== '3'));\n          },\n          onDismiss: () => {\n            setItems(prevItems => prevItems.filter(item => item.id !== '3'));\n          }\n        }\n      ]);\n      setIsCollapsed(false);\n    }, 5000);\n    return () => clearTimeout(timer);\n  }, []);\n\n  const renderTasks = (selections: MenuItemProps[]) => {\n    const newTasks = selections.map((selection, i) => {\n      const taskId = createUID();\n      if (i === 0) {\n        return {\n          id: taskId,\n          icon: 'clipboard',\n          name: selection.primary,\n          isResolved: false,\n          status: {\n            variant: 'pending' as StatusProps['variant'],\n            text: 'In Progress'\n          }\n        };\n      }\n      return {\n        id: taskId,\n        icon: 'clipboard',\n        name: selection.primary,\n        isResolved: false,\n        meta: 'Queued task'\n      };\n    });\n    setServiceTasks(prevTasks => {\n      return [...newTasks, ...prevTasks];\n    });\n    if (newTasks.length > 0) {\n      performTaskAction(newTasks[0].id, 'launch');\n    }\n  };\n\n  const taskWidget = (\n    <TaskManager\n      ref={taskManagerRef}\n      tasks={serviceTasks.map(task => {\n        if (task.id === activeTaskId) {\n          return {\n            ...task,\n            active: true\n          };\n        }\n        return task;\n      })}\n      emptyText='No tasks added'\n      banner={{\n        icon: 'headset',\n        content:\n          'Hi Ms. Ventura, I see that you are interested in changing your monthly due date, is that correct ?'\n      }}\n      onTaskLaunch={id => {\n        performTaskAction(id, 'launch');\n      }}\n      onTaskDismiss={id => {\n        performTaskAction(id, 'dismiss');\n      }}\n      addTask={{\n        items: TaskPickerMockData.tasks,\n        onAdd: renderTasks\n      }}\n      wrapUp={{\n        disable: disableWrapUp,\n        onClick: () => {\n          performTaskAction(WRAP_UP_TASK_ID, 'launch');\n          setDisableWrapUp(true);\n        },\n        active: activeTaskId === WRAP_UP_TASK_ID\n      }}\n      main={\n        <TaskView\n          header={\n            <Text variant='h2'>\n              {activeTaskId === WRAP_UP_TASK_ID\n                ? 'Wrap up'\n                : serviceTasks.find(task => task.id === activeTaskId)?.name}\n            </Text>\n          }\n          actions={\n            <MenuButton\n              ref={formActionsElemRef}\n              menu={{\n                items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map(\n                  (name: string) => ({\n                    primary: name,\n                    id: name,\n                    onClick: () => {}\n                  })\n                )\n              }}\n              text='Actions'\n            />\n          }\n        >\n          <Form\n            actions={\n              <>\n                <Button\n                  name='Cancel'\n                  onClick={() => {\n                    performTaskAction(activeTaskId, 'cancel');\n                  }}\n                >\n                  Cancel\n                </Button>\n                <div>\n                  <Button name='Save'>Save</Button>\n                  <Button\n                    name='Submit'\n                    variant='primary'\n                    onClick={() => {\n                      performTaskAction(activeTaskId, 'submit');\n                    }}\n                  >\n                    Submit\n                  </Button>\n                </div>\n              </>\n            }\n          >\n            <Grid container={{ rowGap: 2 }}>\n              {activeTaskId === WRAP_UP_TASK_ID ? (\n                <TimelineDemo />\n              ) : (\n                Array.from({ length: 15 }, (undef, i) => {\n                  const idx = i + 1;\n                  return <Input label={`Field ${idx}`} key={idx} />;\n                })\n              )}\n            </Grid>\n          </Form>\n        </TaskView>\n      }\n    />\n  );\n\n  return (\n    <CaseViewDemo\n      caseId='C-123'\n      heading='Intelligent Guidance demo case'\n      tasks={taskWidget}\n      intelligentGuidance={\n        <IntelligentGuidance\n          items={items}\n          heading='Intelligent guidance'\n          isCollapsed={isCollapsed}\n          onExpandCollapse={() => {\n            setIsCollapsed(prevState => !prevState);\n          }}\n        />\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"IntelligentGuidance.stories.js","sourceRoot":"","sources":["../../../src/work/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AAEnG,YAAY,CAAC,aAAa,CAAC,CAAC;AAE5B,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,uBAAuB,GAAY,GAAG,EAAE;IACnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC1F,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAoC;QAClF;YACE,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,MAAM;YACZ,SAAS,EAAE,GAAG,EAAE;gBACd,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;gBAC/D,IAAI,WAAW,EAAE;oBACf,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC;wBAC5B,GAAG,SAAS;wBACZ;4BACE,GAAG,WAAW;4BACd,GAAG,EAAE,KAAK;4BACV,SAAS,EAAE,SAAS;yBACrB;qBACF,CAAC,CAAC;iBACJ;gBACD,eAAe,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;YAC1E,CAAC;YACD,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;SAClB;QACD;YACE,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,wBAAwB;YAC/B,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,GAAG,EAAE;gBACZ,eAAe,CAAC,SAAS,CAAC,EAAE,CAC1B,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAC1E,CAAC;YACJ,CAAC;YACD,SAAS,EAAE,GAAG,EAAE;gBACd,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;gBAC/D,IAAI,WAAW,EAAE;oBACf,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC;wBAC5B,GAAG,SAAS;wBACZ;4BACE,GAAG,WAAW;4BACd,GAAG,EAAE,KAAK;4BACV,SAAS,EAAE,SAAS;yBACrB;qBACF,CAAC,CAAC;iBACJ;gBACD,eAAe,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;YAC1E,CAAC;YACD,GAAG,EAAE,IAAI;SACV;QACD;YACE,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,iBAAiB;YACxB,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,GAAG,EAAE;gBACZ,eAAe,CAAC,SAAS,CAAC,EAAE,CAC1B,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAC1E,CAAC;YACJ,CAAC;YACD,SAAS,EAAE,GAAG,EAAE;gBACd,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;gBAC/D,IAAI,WAAW,EAAE;oBACf,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC;wBAC5B,GAAG,SAAS;wBACZ;4BACE,GAAG,WAAW;4BACd,GAAG,EAAE,KAAK;4BACV,SAAS,EAAE,SAAS;yBACrB;qBACF,CAAC,CAAC;iBACJ;gBACD,eAAe,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;YAC1E,CAAC;YACD,GAAG,EAAE,IAAI;SACV;QACD;YACE,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,WAAW;YAClB,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,GAAG,EAAE;gBACZ,eAAe,CAAC,SAAS,CAAC,EAAE,CAC1B,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAC1E,CAAC;YACJ,CAAC;YACD,SAAS,EAAE,GAAG,EAAE;gBACd,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;gBAC/D,IAAI,WAAW,EAAE;oBACf,gBAAgB,CAAC,SAAS,CAAC,EAAE,CAAC;wBAC5B,GAAG,SAAS;wBACZ;4BACE,GAAG,WAAW;4BACd,GAAG,EAAE,KAAK;4BACV,SAAS,EAAE,SAAS;yBACrB;qBACF,CAAC,CAAC;iBACJ;gBACD,eAAe,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;YAC1E,CAAC;YACD,GAAG,EAAE,IAAI;SACV;KACF,CAAC,CAAC;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAErD,OAAO,CACL,KAAC,mBAAmB,IAClB,KAAK,EAAE,YAAY,EACnB,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAC,mBAAmB,EAC3B,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,GAAG,EAAE;YACrB,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;QAC1C,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { registerIcon } from '@pega/cosmos-react-core';\nimport { IntelligentGuidance } from '@pega/cosmos-react-work';\nimport type { IntelligentGuidanceProps } from '@pega/cosmos-react-work';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Work/IntelligentGuidance',\n  component: IntelligentGuidance,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const IntelligentGuidanceDemo: StoryFn = () => {\n  const [previousItems, setPreviousItems] = useState<IntelligentGuidanceProps['items']>([]);\n  const [currentItems, setCurrentItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '1');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      },\n      onClick: () => {}\n    },\n    {\n      id: '2',\n      label: 'Update contact profile',\n      icon: 'polaris',\n      type: 'Knowledge Article',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '2' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '2');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      },\n      new: true\n    },\n    {\n      id: '3',\n      label: 'Task suggestion',\n      icon: 'polaris',\n      type: 'Reason detected',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '3' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '3');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '3'));\n      },\n      new: true\n    },\n    {\n      id: '4',\n      label: 'Demo item',\n      icon: 'polaris',\n      type: 'Demo',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '4' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '4');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '4'));\n      },\n      new: true\n    }\n  ]);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n\n  return (\n    <IntelligentGuidance\n      items={currentItems}\n      previousItems={previousItems}\n      heading='Suggested actions'\n      isCollapsed={isCollapsed}\n      onExpandCollapse={() => {\n        setIsCollapsed(prevState => !prevState);\n      }}\n    />\n  );\n};\n"]}

package/lib/{cs → work}/InteractionNotification/InteractionNotification.stories.d.ts

@@ -4,6 +4,7 @@ export default _default;
 interface InteractionNotificationDemoProps {
     icon: string;
     secondaryText: string;
+    acceptAvailable: boolean;
     declineAvailable: boolean;
     timerAvailable: boolean;
     answerTimeout: number;

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionNotification.stories.d.ts","sourceRoot":"","sources":["../../../src/work/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAMtD,wBAGU;AAEV,UAAU,gCAAgC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,2BAA2B,EAAE,OAAO,CAAC,gCAAgC,CA+CjF,CAAC"}

package/lib/{cs → work}/InteractionNotification/InteractionNotification.stories.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { useRef } from 'react';
-import { InteractionNotification } from '@pega/cosmos-react-cs';
 import { icons, useI18n, useToaster } from '@pega/cosmos-react-core';
+import { InteractionNotification } from '@pega/cosmos-react-work';
 export default {
-    title: 'Customer Service/InteractionNotification',
+    title: 'Work/InteractionNotification',
     component: InteractionNotification
 };
 export const InteractionNotificationDemo = (args) => {
     const incomingNotificationTimeout = useRef(Date.now());
     const { push } = useToaster();
     const t = useI18n();
-    return (_jsx(InteractionNotification, { icon: args.icon, title: 'Incoming call', primaryText: 'John Brown', secondaryText: args.secondaryText, status: {
+    return (_jsx(InteractionNotification, { icon: args.icon, title: args.acceptAvailable ? 'Incoming call' : 'Abandoned call', primaryText: 'John Brown', secondaryText: args.secondaryText, status: {
             variant: 'success',
             text: 'VERIFIED PLATINUM CUSTOMER'
         }, fields: [
@@ -36,11 +36,12 @@ export const InteractionNotificationDemo = (args) => {
                 answerTimeout: args.answerTimeout,
                 onTimerEnd: () => push({ content: t('interaction_time_expired') })
             }
-            : undefined, onAccept: action('accept'), onDecline: args.declineAvailable ? action('decline') : undefined }));
+            : undefined, onAccept: args.acceptAvailable ? action('accept') : undefined, onDismiss: action('dismiss') }));
 };
 InteractionNotificationDemo.args = {
     icon: 'phone-in-solid',
     secondaryText: '(123) 456-7890',
+    acceptAvailable: true,
     declineAvailable: true,
     timerAvailable: true,
     answerTimeout: 30
@@ -48,6 +49,7 @@ InteractionNotificationDemo.args = {
 InteractionNotificationDemo.argTypes = {
     icon: { options: icons, control: { type: 'select', icons: true } },
     secondaryText: { options: { type: 'text' } },
+    acceptAvailable: { options: { type: 'boolean' } },
     declineAvailable: { options: { type: 'boolean' } },
     timerAvailable: { options: { type: 'boolean' } },
     answerTimeout: { options: { type: 'number' } }

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractionNotification.stories.js","sourceRoot":"","sources":["../../../src/work/InteractionNotification/InteractionNotification.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,8BAA8B;IACrC,SAAS,EAAE,uBAAuB;CAC3B,CAAC;AAWV,MAAM,CAAC,MAAM,2BAA2B,GAA8C,CACpF,IAAsC,EACtC,EAAE;IACF,MAAM,2BAA2B,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACvD,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAC9B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,EAChE,WAAW,EAAC,YAAY,EACxB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,4BAA4B;SACnC,EACD,MAAM,EAAE;YACN;gBACE,EAAE,EAAE,QAAQ;gBACZ,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,kBAAkB;aAC1B;YACD;gBACE,EAAE,EAAE,WAAW;gBACf,IAAI,EAAE,YAAY;gBAClB,KAAK,EAAE,GAAG;aACX;YACD;gBACE,EAAE,EAAE,iBAAiB;gBACrB,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;aACvC;SACF,EACD,2BAA2B,EACzB,IAAI,CAAC,cAAc;YACjB,CAAC,CAAC;gBACE,SAAS,EAAE,2BAA2B,CAAC,OAAO;gBAC9C,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,EAC7D,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,GAC5B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,2BAA2B,CAAC,IAAI,GAAG;IACjC,IAAI,EAAE,gBAAgB;IACtB,aAAa,EAAE,gBAAgB;IAC/B,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE,EAAE;CAClB,CAAC;AAEF,2BAA2B,CAAC,QAAQ,GAAG;IACrC,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAClE,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC/C,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport { useRef } from 'react';\n\nimport { icons, useI18n, useToaster } from '@pega/cosmos-react-core';\nimport { InteractionNotification } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/InteractionNotification',\n  component: InteractionNotification\n} as Meta;\n\ninterface InteractionNotificationDemoProps {\n  icon: string;\n  secondaryText: string;\n  acceptAvailable: boolean;\n  declineAvailable: boolean;\n  timerAvailable: boolean;\n  answerTimeout: number;\n}\n\nexport const InteractionNotificationDemo: StoryFn<InteractionNotificationDemoProps> = (\n  args: InteractionNotificationDemoProps\n) => {\n  const incomingNotificationTimeout = useRef(Date.now());\n  const { push } = useToaster();\n  const t = useI18n();\n\n  return (\n    <InteractionNotification\n      icon={args.icon}\n      title={args.acceptAvailable ? 'Incoming call' : 'Abandoned call'}\n      primaryText='John Brown'\n      secondaryText={args.secondaryText}\n      status={{\n        variant: 'success',\n        text: 'VERIFIED PLATINUM CUSTOMER'\n      }}\n      fields={[\n        {\n          id: 'reason',\n          name: 'Reason for calling',\n          value: 'Billing question'\n        },\n        {\n          id: 'openCases',\n          name: 'Open cases',\n          value: '1'\n        },\n        {\n          id: 'lastInteraction',\n          name: 'Last interaction',\n          value: new Date().toLocaleDateString()\n        }\n      ]}\n      incomingNotificationTimeout={\n        args.timerAvailable\n          ? {\n              startTime: incomingNotificationTimeout.current,\n              answerTimeout: args.answerTimeout,\n              onTimerEnd: () => push({ content: t('interaction_time_expired') })\n            }\n          : undefined\n      }\n      onAccept={args.acceptAvailable ? action('accept') : undefined}\n      onDismiss={action('dismiss')}\n    />\n  );\n};\n\nInteractionNotificationDemo.args = {\n  icon: 'phone-in-solid',\n  secondaryText: '(123) 456-7890',\n  acceptAvailable: true,\n  declineAvailable: true,\n  timerAvailable: true,\n  answerTimeout: 30\n};\n\nInteractionNotificationDemo.argTypes = {\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  secondaryText: { options: { type: 'text' } },\n  acceptAvailable: { options: { type: 'boolean' } },\n  declineAvailable: { options: { type: 'boolean' } },\n  timerAvailable: { options: { type: 'boolean' } },\n  answerTimeout: { options: { type: 'number' } }\n};\n"]}