@pega/cosmos-react-demos 4.0.0-dev.9.1 → 4.0.0

package/lib/work/Confirmation/Confirmation.stories.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Button, Flex } from '@pega/cosmos-react-core';
-import { Confirmation } from '@pega/cosmos-react-work';
-import { FieldValueListDemo } from '../../core/FieldValueList/FieldValueList.stories';
+import { Button, FieldValueItem, Flex } from '@pega/cosmos-react-core';
+import { Confirmation, Details } from '@pega/cosmos-react-work';
+import { mockData } from '../../core/FieldValueList/FieldValueList.mocks';
 import { TasksDemo } from '../Tasks/Tasks.stories';
 import { StyledFlex } from './Confirmation.styles';
 export default {
@@ -11,19 +11,24 @@ export default {
 };
 export const ConfirmationDemo = (args) => {
     const [showConfirmation, setShowConfirmation] = useState(true);
-    return (_jsxs(Flex, { as: StyledFlex, container: { justify: 'center', alignItems: 'center' }, children: [showConfirmation && (_jsx(Confirmation, { title: args.title, details: args.showDetails ? _jsx(FieldValueListDemo, { name: 'Project', value: 'Pega Cosmos' }) : undefined, whatsNext: args.showWhatsNext
+    const details = (_jsx(Details, { name: args.detailsName, children: mockData.map(({ name, value }) => {
+            return _jsx(FieldValueItem, { name: name, value: value });
+        }) }));
+    return (_jsxs(Flex, { as: StyledFlex, container: { justify: 'center', alignItems: 'center' }, children: [showConfirmation && (_jsx(Confirmation, { title: args.title, details: args.showDetails ? details : undefined, whatsNext: args.showWhatsNext
                     ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']
-                    : undefined, tasks: args.showTasks ? (_jsx(TasksDemo, { showHeaderVisual: false, showHeaderSecondary: false, count: 3, openableTasks: false })) : undefined, onClose: () => setShowConfirmation(false) })), !showConfirmation && (_jsx(Button, { onClick: () => setShowConfirmation(true), children: "Show confirmation" }))] }));
+                    : undefined, tasks: args.showTasks ? (_jsx(TasksDemo, { showVisual: false, showViewSelector: false, count: 3, openableTasks: false })) : undefined, onClose: () => setShowConfirmation(false) })), !showConfirmation && (_jsx(Button, { onClick: () => setShowConfirmation(true), children: "Show confirmation" }))] }));
 };
 ConfirmationDemo.args = {
     title: 'US-1337 confirmation',
     showDetails: true,
+    detailsName: 'Case summary',
     showWhatsNext: true,
     showTasks: true
 };
 ConfirmationDemo.argTypes = {
     title: { control: { type: 'text' } },
     showDetails: { control: { type: 'boolean' } },
+    detailsName: { control: { type: 'text' } },
     showWhatsNext: { control: { type: 'boolean' } },
     showTasks: { control: { type: 'boolean' } }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AASV,MAAM,CAAC,MAAM,gBAAgB,GAAkC,CAAC,IAA4B,EAAE,EAAE;IAC9F,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,aACzE,gBAAgB,IAAI,CACnB,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,aAAa,GAAG,CAAC,CAAC,CAAC,SAAS,EAE1F,SAAS,EACP,IAAI,CAAC,aAAa;oBAChB,CAAC,CAAC,CAAC,iBAAiB,EAAE,iCAAiC,EAAE,yBAAyB,CAAC;oBACnF,CAAC,CAAC,SAAS,EAEf,KAAK,EACH,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACf,KAAC,SAAS,IACR,gBAAgB,EAAE,KAAK,EACvB,mBAAmB,EAAE,KAAK,EAC1B,KAAK,EAAE,CAAC,EACR,aAAa,EAAE,KAAK,GACpB,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,GACzC,CACH,EACA,CAAC,gBAAgB,IAAI,CACpB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,kCAA4B,CAC7E,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,sBAAsB;IAC7B,WAAW,EAAE,IAAI;IACjB,aAAa,EAAE,IAAI;IACnB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { Confirmation, ConfirmationProps } from '@pega/cosmos-react-work';\n\nimport { FieldValueListDemo } from '../../core/FieldValueList/FieldValueList.stories';\nimport { TasksDemo } from '../Tasks/Tasks.stories';\n\nimport { StyledFlex } from './Confirmation.styles';\n\nexport default {\n  title: 'Work/Confirmation',\n  component: Confirmation\n} as Meta;\n\ninterface ConfirmationStoryProps {\n  title: ConfirmationProps['title'];\n  showDetails?: boolean;\n  showWhatsNext?: boolean;\n  showTasks?: boolean;\n}\n\nexport const ConfirmationDemo: Story<ConfirmationStoryProps> = (args: ConfirmationStoryProps) => {\n  const [showConfirmation, setShowConfirmation] = useState(true);\n\n  return (\n    <Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>\n      {showConfirmation && (\n        <Confirmation\n          title={args.title}\n          details={\n            args.showDetails ? <FieldValueListDemo name='Project' value='Pega Cosmos' /> : undefined\n          }\n          whatsNext={\n            args.showWhatsNext\n              ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']\n              : undefined\n          }\n          tasks={\n            args.showTasks ? (\n              <TasksDemo\n                showHeaderVisual={false}\n                showHeaderSecondary={false}\n                count={3}\n                openableTasks={false}\n              />\n            ) : undefined\n          }\n          onClose={() => setShowConfirmation(false)}\n        />\n      )}\n      {!showConfirmation && (\n        <Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>\n      )}\n    </Flex>\n  );\n};\n\nConfirmationDemo.args = {\n  title: 'US-1337 confirmation',\n  showDetails: true,\n  showWhatsNext: true,\n  showTasks: true\n};\n\nConfirmationDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  showDetails: { control: { type: 'boolean' } },\n  showWhatsNext: { control: { type: 'boolean' } },\n  showTasks: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gDAAgD,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAUV,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,IAA4B,EAAE,EAAE;IAChG,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,MAAM,OAAO,GAAG,CACd,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,YAC5B,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;YAChC,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QACtD,CAAC,CAAC,GACM,CACX,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,aACzE,gBAAgB,IAAI,CACnB,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EACP,IAAI,CAAC,aAAa;oBAChB,CAAC,CAAC,CAAC,iBAAiB,EAAE,iCAAiC,EAAE,yBAAyB,CAAC;oBACnF,CAAC,CAAC,SAAS,EAEf,KAAK,EACH,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACf,KAAC,SAAS,IACR,UAAU,EAAE,KAAK,EACjB,gBAAgB,EAAE,KAAK,EACvB,KAAK,EAAE,CAAC,EACR,aAAa,EAAE,KAAK,GACpB,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,GACzC,CACH,EACA,CAAC,gBAAgB,IAAI,CACpB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,kCAA4B,CAC7E,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,sBAAsB;IAC7B,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,cAAc;IAC3B,aAAa,EAAE,IAAI;IACnB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, FieldValueItem, Flex } from '@pega/cosmos-react-core';\nimport { Confirmation, Details } from '@pega/cosmos-react-work';\nimport type { ConfirmationProps } from '@pega/cosmos-react-work';\n\nimport { mockData } from '../../core/FieldValueList/FieldValueList.mocks';\nimport { TasksDemo } from '../Tasks/Tasks.stories';\n\nimport { StyledFlex } from './Confirmation.styles';\n\nexport default {\n  title: 'Work/Confirmation',\n  component: Confirmation\n} as Meta;\n\ninterface ConfirmationStoryProps {\n  title: ConfirmationProps['title'];\n  showDetails?: boolean;\n  detailsName?: string;\n  showWhatsNext?: boolean;\n  showTasks?: boolean;\n}\n\nexport const ConfirmationDemo: StoryFn<ConfirmationStoryProps> = (args: ConfirmationStoryProps) => {\n  const [showConfirmation, setShowConfirmation] = useState(true);\n\n  const details = (\n    <Details name={args.detailsName}>\n      {mockData.map(({ name, value }) => {\n        return <FieldValueItem name={name} value={value} />;\n      })}\n    </Details>\n  );\n\n  return (\n    <Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>\n      {showConfirmation && (\n        <Confirmation\n          title={args.title}\n          details={args.showDetails ? details : undefined}\n          whatsNext={\n            args.showWhatsNext\n              ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']\n              : undefined\n          }\n          tasks={\n            args.showTasks ? (\n              <TasksDemo\n                showVisual={false}\n                showViewSelector={false}\n                count={3}\n                openableTasks={false}\n              />\n            ) : undefined\n          }\n          onClose={() => setShowConfirmation(false)}\n        />\n      )}\n      {!showConfirmation && (\n        <Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>\n      )}\n    </Flex>\n  );\n};\n\nConfirmationDemo.args = {\n  title: 'US-1337 confirmation',\n  showDetails: true,\n  detailsName: 'Case summary',\n  showWhatsNext: true,\n  showTasks: true\n};\n\nConfirmationDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  showDetails: { control: { type: 'boolean' } },\n  detailsName: { control: { type: 'text' } },\n  showWhatsNext: { control: { type: 'boolean' } },\n  showTasks: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -1,5 +1,8 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+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 DetailsDemo: Story;
+interface DetailsDemoProps {
+    description?: string;
+}
+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":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAMU;AAEV,eAAO,MAAM,WAAW,EAAE,KA6EzB,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,wBAaU;AAEV,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAuFjD,CAAC"}

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
 import { Details, DetailsContext } from '@pega/cosmos-react-work';
 export default {
@@ -6,15 +7,26 @@ export default {
     component: Details,
     parameters: {
         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.'
+    },
+    argTypes: {
+        description: { control: { type: 'text' } }
     }
 };
-export const DetailsDemo = () => {
+export const DetailsDemo = (args) => {
+    const { description } = args;
     const isNotMobile = useBreakpoint('sm');
-    return (_jsx(DetailsContext.Provider, { value: { mobileView: !isNotMobile, longestLabelLength: 10 }, children: _jsxs(Details, { name: 'Outer list', highlightedData: [
+    const ctx = useMemo(() => ({
+        mobileView: !isNotMobile,
+        longestLabelLength: 10
+    }), [isNotMobile]);
+    return (_jsx(DetailsContext.Provider, { value: ctx, children: _jsxs(Details, { name: 'Outer list', highlightedData: [
                 _jsx(FieldValueItem, { variant: 'stacked', name: 'Age', value: '56' }),
                 _jsx(FieldValueItem, { variant: 'stacked', name: 'Location', value: 'Berlin' }),
                 _jsx(FieldValueItem, { variant: 'stacked', name: 'Make', value: 'Ford' }),
                 _jsx(FieldValueItem, { variant: 'stacked', name: 'Model', value: 'F150' })
-            ], 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, 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' })] }) }));
 };
 //# 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 { Meta, Story } from '@storybook/react';\n\nimport { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  const isNotMobile = useBreakpoint('sm');\n\n  return (\n    <DetailsContext.Provider value={{ mobileView: !isNotMobile, longestLabelLength: 10 }}>\n      <Details\n        name='Outer list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n      >\n        {/* Siblings can be rendered in a responsive row with the `asFlex` attribute */}\n        <Details name='Nested as flex' nested asFlex>\n          {/* Arbitrary recursive nesting is supported with nested attribute */}\n          <Details nested>\n            <Details 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 { 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"]}

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

@@ -1,10 +1,5 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+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;
-interface GlimpseStoryProps {
-    showSecondary?: boolean;
-    showVisual?: boolean;
-    showFields?: boolean;
-}
-export declare const GlimpseDemo: Story<GlimpseStoryProps>;
+export declare const GlimpseDemo: StoryFn;
 //# sourceMappingURL=Glimpse.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAIU;AAEV,UAAU,iBAAiB;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,iBAAiB,CA6BhD,CAAC"}
+{"version":3,"file":"Glimpse.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAIU;AAEV,eAAO,MAAM,WAAW,EAAE,OA+CzB,CAAC"}

package/lib/work/Glimpse/Glimpse.stories.js

@@ -1,16 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Avatar, EmailDisplay, PhoneDisplay } from '@pega/cosmos-react-core';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { Avatar, Button, EmailDisplay, PhoneDisplay, useElement } from '@pega/cosmos-react-core';
 import { Glimpse } from '@pega/cosmos-react-work';
 export default {
     title: 'Work/Glimpse',
     component: Glimpse,
     parameters: { layout: 'centered' }
 };
-export const GlimpseDemo = (args) => {
+export const GlimpseDemo = () => {
+    const [target, setTarget] = useElement(null);
     const fields = [
         {
             name: 'Project',
-            value: 'Cosmos Demo'
+            value: 'Constellation Demo'
         },
         {
             name: 'Phone number',
@@ -25,16 +27,12 @@ export const GlimpseDemo = (args) => {
             value: 'Helen Bush'
         }
     ];
-    return (_jsx(Glimpse, { id: 'turnc', primary: 'Cindy Turner', secondary: args.showSecondary ? ['Lead Engineer'] : undefined, visual: args.showVisual ? _jsx(Avatar, { size: 'l', name: 'Cindy Turner' }) : undefined, fields: args.showFields ? fields : undefined }));
-};
-GlimpseDemo.args = {
-    showSecondary: true,
-    showVisual: true,
-    showFields: true
-};
-GlimpseDemo.argTypes = {
-    showSecondary: { control: { type: 'boolean' } },
-    showVisual: { control: { type: 'boolean' } },
-    showFields: { control: { type: 'boolean' } }
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'link', onClick: (e) => {
+                    setTarget(e.currentTarget);
+                }, children: "Open Glimpse" }), target && (_jsx(Glimpse, { id: 'turnc', target: target, heading: {
+                    primary: 'Cindy Turner',
+                    secondary: 'Lead Engineer',
+                    visual: _jsx(Avatar, { name: 'Cindy Turner' })
+                }, fields: fields, onViewProfile: action('View profile'), onDismiss: () => setTarget(null) }))] }));
 };
 //# sourceMappingURL=Glimpse.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Glimpse.stories.js","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAuB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;CAC3B,CAAC;AAQV,MAAM,CAAC,MAAM,WAAW,GAA6B,CAAC,IAAuB,EAAE,EAAE;IAC/E,MAAM,MAAM,GAAkC;QAC5C;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,aAAa;SACrB;QACD;YACE,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,KAAC,YAAY,IAAC,KAAK,EAAC,gBAAgB,GAAG;SAC/C;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAC,YAAY,IAAC,KAAK,EAAC,mBAAmB,GAAG;SAClD;QACD;YACE,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,YAAY;SACpB;KACF,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAC,OAAO,EACV,OAAO,EAAC,cAAc,EACtB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAC7D,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAAC,CAAC,CAAC,SAAS,EAC7E,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAC5C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;CACjB,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["// cSpell:words turnc\nimport { Meta, Story } from '@storybook/react';\n\nimport { Avatar, EmailDisplay, FieldValueListProps, PhoneDisplay } from '@pega/cosmos-react-core';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Glimpse',\n  component: Glimpse,\n  parameters: { layout: 'centered' }\n} as Meta;\n\ninterface GlimpseStoryProps {\n  showSecondary?: boolean;\n  showVisual?: boolean;\n  showFields?: boolean;\n}\n\nexport const GlimpseDemo: Story<GlimpseStoryProps> = (args: GlimpseStoryProps) => {\n  const fields: FieldValueListProps['fields'] = [\n    {\n      name: 'Project',\n      value: 'Cosmos Demo'\n    },\n    {\n      name: 'Phone number',\n      value: <PhoneDisplay value='(111) 111-1111' />\n    },\n    {\n      name: 'Email',\n      value: <EmailDisplay value='turnc@example.com' />\n    },\n    {\n      name: 'Reports to',\n      value: 'Helen Bush'\n    }\n  ];\n\n  return (\n    <Glimpse\n      id='turnc'\n      primary='Cindy Turner'\n      secondary={args.showSecondary ? ['Lead Engineer'] : undefined}\n      visual={args.showVisual ? <Avatar size='l' name='Cindy Turner' /> : undefined}\n      fields={args.showFields ? fields : undefined}\n    />\n  );\n};\n\nGlimpseDemo.args = {\n  showSecondary: true,\n  showVisual: true,\n  showFields: true\n};\n\nGlimpseDemo.argTypes = {\n  showSecondary: { control: { type: 'boolean' } },\n  showVisual: { control: { type: 'boolean' } },\n  showFields: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Glimpse.stories.js","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;CAC3B,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAY,GAAG,EAAE;IACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAChE,MAAM,MAAM,GAAkC;QAC5C;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,oBAAoB;SAC5B;QACD;YACE,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,KAAC,YAAY,IAAC,KAAK,EAAC,gBAAgB,GAAG;SAC/C;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAC,YAAY,IAAC,KAAK,EAAC,mBAAmB,GAAG;SAClD;QACD;YACE,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,YAAY;SACpB;KACF,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,MAAM,IACL,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;oBAC5C,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;gBAC7B,CAAC,6BAGM,EACR,MAAM,IAAI,CACT,KAAC,OAAO,IACN,EAAE,EAAC,OAAO,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;oBACP,OAAO,EAAE,cAAc;oBACvB,SAAS,EAAE,eAAe;oBAC1B,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,cAAc,GAAG;iBACvC,EACD,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,CAAC,cAAc,CAAC,EACrC,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAChC,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// cspell:words turnc\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Avatar, Button, EmailDisplay, PhoneDisplay, useElement } from '@pega/cosmos-react-core';\nimport type { FieldValueListProps } from '@pega/cosmos-react-core';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Glimpse',\n  component: Glimpse,\n  parameters: { layout: 'centered' }\n} as Meta;\n\nexport const GlimpseDemo: StoryFn = () => {\n  const [target, setTarget] = useElement<HTMLButtonElement>(null);\n  const fields: FieldValueListProps['fields'] = [\n    {\n      name: 'Project',\n      value: 'Constellation Demo'\n    },\n    {\n      name: 'Phone number',\n      value: <PhoneDisplay value='(111) 111-1111' />\n    },\n    {\n      name: 'Email',\n      value: <EmailDisplay value='turnc@example.com' />\n    },\n    {\n      name: 'Reports to',\n      value: 'Helen Bush'\n    }\n  ];\n\n  return (\n    <>\n      <Button\n        variant='link'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          setTarget(e.currentTarget);\n        }}\n      >\n        Open Glimpse\n      </Button>\n      {target && (\n        <Glimpse\n          id='turnc'\n          target={target}\n          heading={{\n            primary: 'Cindy Turner',\n            secondary: 'Lead Engineer',\n            visual: <Avatar name='Cindy Turner' />\n          }}\n          fields={fields}\n          onViewProfile={action('View profile')}\n          onDismiss={() => setTarget(null)}\n        />\n      )}\n    </>\n  );\n};\n"]}

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

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+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: Story;
-export declare const CaseViewWithIntelligentGuidance: Story;
+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,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAwB/C,wBAMU;AAEV,eAAO,MAAM,uBAAuB,EAAE,KAuCrC,CAAC;AAIF,eAAO,MAAM,+BAA+B,EAAE,KAiT7C,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;;AAyBtD,wBAMU;AAEV,eAAO,MAAM,uBAAuB,EAAE,OAoHrC,CAAC;AAIF,eAAO,MAAM,+BAA+B,EAAE,OAkT7C,CAAC"}

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

@@ -16,34 +16,104 @@ export default {
     }
 };
 export const IntelligentGuidanceDemo = () => {
-    const [items, setItems] = useState([
+    const [previousItems, setPreviousItems] = useState([]);
+    const [currentItems, setCurrentItems] = useState([
         {
             id: '1',
             label: 'Change address',
             icon: 'clipboard',
             type: 'Task',
-            onClick: () => {
-                setItems(prevItems => prevItems.filter(item => item.id !== '1'));
-            },
             onDismiss: () => {
-                setItems(prevItems => prevItems.filter(item => item.id !== '1'));
-            }
+                const currentItem = currentItems.find(item => item.id === '1');
+                if (currentItem) {
+                    setPreviousItems(prevItems => [
+                        ...prevItems,
+                        {
+                            ...currentItem,
+                            new: false,
+                            onDismiss: undefined
+                        }
+                    ]);
+                }
+                setCurrentItems(prevItems => prevItems.filter(item => item.id !== '1'));
+            },
+            onClick: () => { }
         },
         {
             id: '2',
             label: 'Update contact profile',
-            icon: 'headline',
+            icon: 'polaris',
             type: 'Knowledge Article',
             onClick: () => {
-                setItems(prevItems => prevItems.filter(item => item.id !== '2'));
+                setCurrentItems(prevItems => prevItems.map(item => (item.id === '2' ? { ...item, new: false } : item)));
             },
             onDismiss: () => {
-                setItems(prevItems => prevItems.filter(item => item.id !== '2'));
-            }
+                const currentItem = currentItems.find(item => item.id === '2');
+                if (currentItem) {
+                    setPreviousItems(prevItems => [
+                        ...prevItems,
+                        {
+                            ...currentItem,
+                            new: false,
+                            onDismiss: undefined
+                        }
+                    ]);
+                }
+                setCurrentItems(prevItems => prevItems.filter(item => item.id !== '2'));
+            },
+            new: true
+        },
+        {
+            id: '3',
+            label: 'Task suggestion',
+            icon: 'polaris',
+            type: 'Reason detected',
+            onClick: () => {
+                setCurrentItems(prevItems => prevItems.map(item => (item.id === '3' ? { ...item, new: false } : item)));
+            },
+            onDismiss: () => {
+                const currentItem = currentItems.find(item => item.id === '3');
+                if (currentItem) {
+                    setPreviousItems(prevItems => [
+                        ...prevItems,
+                        {
+                            ...currentItem,
+                            new: false,
+                            onDismiss: undefined
+                        }
+                    ]);
+                }
+                setCurrentItems(prevItems => prevItems.filter(item => item.id !== '3'));
+            },
+            new: true
+        },
+        {
+            id: '4',
+            label: 'Demo item',
+            icon: 'polaris',
+            type: 'Demo',
+            onClick: () => {
+                setCurrentItems(prevItems => prevItems.map(item => (item.id === '4' ? { ...item, new: false } : item)));
+            },
+            onDismiss: () => {
+                const currentItem = currentItems.find(item => item.id === '4');
+                if (currentItem) {
+                    setPreviousItems(prevItems => [
+                        ...prevItems,
+                        {
+                            ...currentItem,
+                            new: false,
+                            onDismiss: undefined
+                        }
+                    ]);
+                }
+                setCurrentItems(prevItems => prevItems.filter(item => item.id !== '4'));
+            },
+            new: true
         }
     ]);
     const [isCollapsed, setIsCollapsed] = useState(true);
-    return (_jsx(IntelligentGuidance, { items: items, heading: 'Intelligent guidance', isCollapsed: isCollapsed, onExpandCollapse: () => {
+    return (_jsx(IntelligentGuidance, { items: currentItems, previousItems: previousItems, heading: 'Suggested actions', isCollapsed: isCollapsed, onExpandCollapse: () => {
             setIsCollapsed(prevState => !prevState);
         } }));
 };
@@ -271,7 +341,7 @@ export const CaseViewWithIntelligentGuidance = () => {
                         const idx = i + 1;
                         return _jsx(Input, { label: `Field ${idx}` }, idx);
                     })) }) }) }) }));
-    return (_jsx(CaseViewDemo, { heading: 'Intelligent Guidance demo case', tasks: taskWidget, intelligentGuidance: _jsx(IntelligentGuidance, { items: items, heading: 'Intelligent guidance', isCollapsed: isCollapsed, onExpandCollapse: () => {
+    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);
             } }) }));
 };

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 { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  createUID,\n  Form,\n  Grid,\n  registerIcon,\n  Input,\n  MenuButton,\n  MenuItemProps,\n  StatusProps,\n  Text\n} from '@pega/cosmos-react-core';\nimport { TaskManager, TaskView, TaskProps } from '@pega/cosmos-react-cs';\nimport { IntelligentGuidance, 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: Story = () => {\n  const [items, setItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onClick: () => {\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: 'Update contact profile',\n      icon: 'headline',\n      type: 'Knowledge Article',\n      onClick: () => {\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  const [isCollapsed, setIsCollapsed] = useState(true);\n\n  return (\n    <IntelligentGuidance\n      items={items}\n      heading='Intelligent guidance'\n      isCollapsed={isCollapsed}\n      onExpandCollapse={() => {\n        setIsCollapsed(prevState => !prevState);\n      }}\n    />\n  );\n};\n\ntype TaskActions = 'cancel' | 'launch' | 'dismiss' | 'submit';\n\nexport const CaseViewWithIntelligentGuidance: Story = () => {\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      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":"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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"]}

package/lib/work/Predictions/Predictions.mocks.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const FraudRiskRenderer: () => JSX.Element;
+//# sourceMappingURL=Predictions.mocks.d.ts.map

package/lib/work/Predictions/Predictions.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Predictions/Predictions.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,iBAAiB,mBAiB7B,CAAC"}

package/lib/work/Predictions/Predictions.mocks.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Text } from '@pega/cosmos-react-core';
+export const FraudRiskRenderer = () => {
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 0.5 }, children: [_jsx(Text, { variant: 'secondary', children: "Fraud risk" }), _jsx(Text, { variant: 'h3', children: "76%" })] }), _jsx(Text, { variant: 'secondary', children: "65% average" }), _jsx(Text, { as: 'p', children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." })] }));
+};
+//# sourceMappingURL=Predictions.mocks.js.map

package/lib/work/Predictions/Predictions.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.mocks.js","sourceRoot":"","sources":["../../../src/work/Predictions/Predictions.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IACpC,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,aAChD,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,2BAAkB,EAC3C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,oBAAW,IACxB,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,4BAAmB,EAC5C,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,8cAML,IACF,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Flex, Text } from '@pega/cosmos-react-core';\n\nexport const FraudRiskRenderer = () => {\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Flex container={{ direction: 'column', gap: 0.5 }}>\n        <Text variant='secondary'>Fraud risk</Text>\n        <Text variant='h3'>76%</Text>\n      </Flex>\n      <Text variant='secondary'>65% average</Text>\n      <Text as='p'>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n      </Text>\n    </Flex>\n  );\n};\n"]}

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

@@ -0,0 +1,5 @@
+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 PredictionsDemo: StoryFn;
+//# sourceMappingURL=Predictions.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Predictions/Predictions.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAStD,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,OAmD7B,CAAC"}