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

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableLayout.stories.js","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,kBAAkB,EAElB,sBAAsB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,+BAA+B,GAAU,GAAG,EAAE;IACzD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,GAAG,sBAAsB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE5F,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EACF,KAAC,cAAc,IACb,UAAU,EAAE,YAAY,EACxB,CAAC,EACC,KAAC,kBAAkB,IACjB,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE;oBACvB,IAAI,EAAE;wBAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EACnE,KAAK,EAAE,YAAgD,GACvD,EAEJ,CAAC,EACC,KAAC,kBAAkB,IACjB,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE;oBACvB,IAAI,EAAE;wBAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EACjE,KAAK,EAAE,YAAgD,GACvD,EAEJ,KAAK,EAAC,yCAAyC,GAC/C,GAEJ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useRef } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { NarrowWidePage } from '@pega/cosmos-react-core';\nimport {\n  ConfigurableLayout,\n  ConfigurableLayoutProps,\n  useTrackWrappedRegions\n} from '@pega/cosmos-react-work';\n\nimport { AppShellDemo as AppShell } from '../../core/AppShell/AppShell.stories';\n\nimport { regionAItems, regionBItems } from './ConfigurableLayout.mocks';\n\nexport default {\n  title: 'Work/ConfigurableLayout',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const ConfigurableLayoutInPageRegions: Story = () => {\n  const regionElArray = useRef(new Array(2).fill(null));\n  const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);\n\n  return (\n    <AppShell\n      main={\n        <NarrowWidePage\n          regionsRef={containerRef}\n          a={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[0] = el;\n              }}\n              arrangement={{ size: 'narrow', hasWrapped: regionWrappedStates[0] }}\n              items={regionAItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          b={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[1] = el;\n              }}\n              arrangement={{ size: 'main', hasWrapped: regionWrappedStates[1] }}\n              items={regionBItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          title='Configurable Layout in Narrow Wide Page'\n        />\n      }\n    />\n  );\n};\n"]}
+{"version":3,"file":"ConfigurableLayout.stories.js","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EACL,kBAAkB,EAElB,sBAAsB,EACvB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,kBAAkB;IAC7B,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,+BAA+B,GAAU,GAAG,EAAE;IACzD,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,GAAG,sBAAsB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE5F,OAAO,CACL,KAAC,QAAQ,IACP,IAAI,EACF,KAAC,cAAc,IACb,UAAU,EAAE,YAAY,EACxB,CAAC,EACC,KAAC,kBAAkB,IACjB,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE;oBACvB,IAAI,EAAE;wBAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EACnE,KAAK,EAAE,YAAgD,GACvD,EAEJ,CAAC,EACC,KAAC,kBAAkB,IACjB,GAAG,EAAE,CAAC,EAAe,EAAE,EAAE;oBACvB,IAAI,EAAE;wBAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EACjE,KAAK,EAAE,YAAgD,GACvD,EAEJ,KAAK,EAAC,yCAAyC,GAC/C,GAEJ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useRef } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { NarrowWidePage } from '@pega/cosmos-react-core';\nimport {\n  ConfigurableLayout,\n  ConfigurableLayoutProps,\n  useTrackWrappedRegions\n} from '@pega/cosmos-react-work';\n\nimport { AppShellDemo as AppShell } from '../../core/AppShell/AppShell.stories';\n\nimport { regionAItems, regionBItems } from './ConfigurableLayout.mocks';\n\nexport default {\n  title: 'Work/ConfigurableLayout',\n  component: ConfigurableLayout,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const ConfigurableLayoutInPageRegions: Story = () => {\n  const regionElArray = useRef(new Array(2).fill(null));\n  const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);\n\n  return (\n    <AppShell\n      main={\n        <NarrowWidePage\n          regionsRef={containerRef}\n          a={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[0] = el;\n              }}\n              arrangement={{ size: 'narrow', hasWrapped: regionWrappedStates[0] }}\n              items={regionAItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          b={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[1] = el;\n              }}\n              arrangement={{ size: 'main', hasWrapped: regionWrappedStates[1] }}\n              items={regionBItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          title='Configurable Layout in Narrow Wide Page'\n        />\n      }\n    />\n  );\n};\n"]}

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

@@ -4,6 +4,9 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface ConfirmationStoryProps {
     title: ConfirmationProps['title'];
+    showDetails?: boolean;
+    showWhatsNext?: boolean;
+    showTasks?: boolean;
 }
 export declare const ConfirmationDemo: Story<ConfirmationStoryProps>;
 //# sourceMappingURL=Confirmation.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAO1E,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAuB1D,CAAC"}
+{"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAO1E,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAkC1D,CAAC"}

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

@@ -3,7 +3,7 @@ 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 { TaskListDemo } from '../Tasks/TaskList.stories';
+import { TasksDemo } from '../Tasks/Tasks.stories';
 import { StyledFlex } from './Confirmation.styles';
 export default {
     title: 'Work/Confirmation',
@@ -11,16 +11,20 @@ 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: _jsx(FieldValueListDemo, { name: 'Project', value: 'Pega Cosmos' }), whatsNext: [
-                    'Send references',
-                    'Collect information on the case',
-                    'Prepare a demonstration'
-                ], tasks: _jsx(TaskListDemo, {}), onClose: () => setShowConfirmation(false) })), !showConfirmation && (_jsx(Button, { onClick: () => setShowConfirmation(true), children: "Show confirmation" }))] }));
+    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
+                    ? ['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" }))] }));
 };
 ConfirmationDemo.args = {
-    title: 'US-1337 confirmation'
+    title: 'US-1337 confirmation',
+    showDetails: true,
+    showWhatsNext: true,
+    showTasks: true
 };
 ConfirmationDemo.argTypes = {
-    title: { control: { type: 'text' } }
+    title: { control: { type: 'text' } },
+    showDetails: { control: { type: 'boolean' } },
+    showWhatsNext: { control: { type: 'boolean' } },
+    showTasks: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Confirmation.stories.js.map

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,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAMV,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,EAAE,KAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,aAAa,GAAG,EAClE,SAAS,EAAE;oBACT,iBAAiB;oBACjB,iCAAiC;oBACjC,yBAAyB;iBAC1B,EACD,KAAK,EAAE,KAAC,YAAY,KAAG,EACvB,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;CAC9B,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,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 { TaskListDemo } from '../Tasks/TaskList.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}\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={<FieldValueListDemo name='Project' value='Pega Cosmos' />}\n          whatsNext={[\n            'Send references',\n            'Collect information on the case',\n            'Prepare a demonstration'\n          ]}\n          tasks={<TaskListDemo />}\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};\n\nConfirmationDemo.argTypes = {\n  title: { control: { type: 'text' } }\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,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"]}

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;;AAgB/C,wBAGU;AAEV,eAAO,MAAM,WAAW,EAAE,KAuFzB,CAAC"}
+{"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"}

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

@@ -1,65 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CurrencyDisplay, DateTimeDisplay, URLDisplay, BooleanDisplay, FieldGroup, FieldValueList, LocationDisplay, MapsContext, PhoneDisplay, EmailDisplay } from '@pega/cosmos-react-core';
-import { Details } from '@pega/cosmos-react-work';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
+import { Details, DetailsContext } from '@pega/cosmos-react-work';
 export default {
     title: 'Work/Details',
-    component: Details
+    component: Details,
+    parameters: {
+        layout: 'centered'
+    }
 };
 export const DetailsDemo = () => {
-    return (_jsx(MapsContext.Provider, { value: { name: 'google' }, children: _jsx(Details, { highlightedFields: [
-                {
-                    id: '1',
-                    name: 'Statement balance',
-                    value: _jsx(CurrencyDisplay, { value: 1289.0, currencyISOCode: 'USD' })
-                },
-                {
-                    id: '2',
-                    name: 'Total balance',
-                    value: _jsx(CurrencyDisplay, { value: 35667.0, currencyISOCode: 'USD' })
-                },
-                {
-                    id: '3',
-                    name: 'Available credit',
-                    value: _jsx(CurrencyDisplay, { value: 5813.0, currencyISOCode: 'USD' })
-                },
-                {
-                    id: '4',
-                    name: 'Payment due date',
-                    value: _jsx(DateTimeDisplay, { value: Date.now(), variant: 'datetime', format: 'long' })
-                },
-                {
-                    id: '5',
-                    name: 'Available benefits',
-                    value: (_jsx(URLDisplay, { value: 'https://www.google.com/', displayText: 'View benefits', variant: 'link' }))
-                },
-                {
-                    id: '6',
-                    name: 'Platinum member',
-                    value: _jsx(BooleanDisplay, { value: true })
-                }
-            ], regions: [
-                _jsx(FieldGroup, { name: 'Personal', children: _jsx(FieldValueList, { fields: [
-                            {
-                                name: 'Home address',
-                                value: (_jsx(LocationDisplay, { value: '12 Higgins Bottom Way, Carnell, NH, 02133', variant: 'text' }))
-                            },
-                            { name: 'Primary phone', value: _jsx(PhoneDisplay, { value: '+15553749637' }) },
-                            {
-                                name: 'Primary email',
-                                value: _jsx(EmailDisplay, { value: 'joe.smith@example.com' })
-                            }
-                        ] }) }),
-                _jsx(FieldGroup, { name: 'Work', children: _jsx(FieldValueList, { fields: [
-                            {
-                                name: 'Work address',
-                                value: (_jsx(LocationDisplay, { value: '1 Monolith Business Parkway, Milltown, NH, 02333', variant: 'text' }))
-                            },
-                            { name: 'Work phone', value: _jsx(PhoneDisplay, { value: '+15553742200' }) },
-                            {
-                                name: 'Work email',
-                                value: _jsx(EmailDisplay, { value: 'jane.smith@example.com' })
-                            }
-                        ] }) })
-            ] }) }));
+    const isNotMobile = useBreakpoint('sm');
+    return (_jsx(DetailsContext.Provider, { value: { mobileView: !isNotMobile, longestLabelLength: 10 }, 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' })] }) }));
 };
 //# 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 {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  LocationDisplay,\n  MapsContext,\n  PhoneDisplay,\n  EmailDisplay\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  return (\n    <MapsContext.Provider value={{ name: 'google' }}>\n      <Details\n        highlightedFields={[\n          {\n            id: '1',\n            name: 'Statement balance',\n            value: <CurrencyDisplay value={1289.0} currencyISOCode='USD' />\n          },\n          {\n            id: '2',\n            name: 'Total balance',\n            value: <CurrencyDisplay value={35667.0} currencyISOCode='USD' />\n          },\n          {\n            id: '3',\n            name: 'Available credit',\n            value: <CurrencyDisplay value={5813.0} currencyISOCode='USD' />\n          },\n          {\n            id: '4',\n            name: 'Payment due date',\n            value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n          },\n          {\n            id: '5',\n            name: 'Available benefits',\n            value: (\n              <URLDisplay\n                value='https://www.google.com/'\n                displayText='View benefits'\n                variant='link'\n              />\n            )\n          },\n          {\n            id: '6',\n            name: 'Platinum member',\n            value: <BooleanDisplay value />\n          }\n        ]}\n        regions={[\n          <FieldGroup name='Personal'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Home address',\n                  value: (\n                    <LocationDisplay\n                      value='12 Higgins Bottom Way, Carnell, NH, 02133'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Primary phone', value: <PhoneDisplay value='+15553749637' /> },\n                {\n                  name: 'Primary email',\n                  value: <EmailDisplay value='joe.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>,\n          <FieldGroup name='Work'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Work address',\n                  value: (\n                    <LocationDisplay\n                      value='1 Monolith Business Parkway, Milltown, NH, 02333'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Work phone', value: <PhoneDisplay value='+15553742200' /> },\n                {\n                  name: 'Work email',\n                  value: <EmailDisplay value='jane.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>\n        ]}\n      />\n    </MapsContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAExC,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,EAAE,EAAE,YAClF,MAAC,OAAO,IACN,IAAI,EAAC,YAAY,EACjB,eAAe,EAAE;gBACf,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,GAAG;gBAC1D,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,GAAG;gBACnE,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG;gBAC7D,KAAC,cAAc,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG;aAC/D,aAGD,MAAC,OAAO,IAAC,IAAI,EAAC,gBAAgB,EAAC,MAAM,QAAC,MAAM,mBAE1C,KAAC,OAAO,IAAC,MAAM,kBACb,MAAC,OAAO,IAAC,MAAM,mBACb,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,EAC3C,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM,GAAG,IACpC,GACF,EAEV,MAAC,OAAO,IAAC,MAAM,mBACb,KAAC,cAAc,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,GAAG,EAChD,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,GAAG,IACrC,IACF,EAEV,KAAC,cAAc,IACb,IAAI,EAAC,aAAa,EAClB,OAAO,EAAC,SAAS,EACjB,KAAK,EACH,ufAOI,GAEN,EAEF,MAAC,OAAO,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,mBAChC,KAAC,cAAc,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,QAAQ,GAAG,EACnD,KAAC,cAAc,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,GAAG,EAEnD,MAAC,OAAO,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,mBAChC,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,KAAK,GAAG,EAC3C,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAG,IACnC,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,kBAAkB,EAAC,MAAM,QAAC,eAAe,mBACrD,KAAC,cAAc,IACb,IAAI,EAAC,oDAAoD,EACzD,KAAK,EAAC,iBAAiB,GACvB,EACF,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,EAC/C,KAAC,cAAc,IAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,SAAS,GAAG,EACtD,KAAC,cAAc,IAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,SAAS,GAAG,IAC7C,EAEV,MAAC,OAAO,IAAC,IAAI,EAAC,aAAa,EAAC,MAAM,QAAC,eAAe,QAAC,WAAW,mBAC5D,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,GAAG,EAC9C,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,EAC/C,KAAC,cAAc,IAAC,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,SAAS,GAAG,EACtD,KAAC,cAAc,IAAC,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,SAAS,GAAG,IAC7C,IACF,EAEV,KAAC,cAAc,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,GAAG,EACxC,KAAC,cAAc,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,GAAG,IACzC,GACc,CAC3B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  const isNotMobile = useBreakpoint('sm');\n\n  return (\n    <DetailsContext.Provider value={{ mobileView: !isNotMobile, 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"]}

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

@@ -2,6 +2,12 @@ import { Dispatch, SetStateAction } from 'react';
 import { OmitStrict } from '@pega/cosmos-react-core';
 import { SearchResultProps, SearchResultsProps } from '@pega/cosmos-react-work';
 declare type ResultMeta = OmitStrict<SearchResultProps, 'link'>;
+export declare const searchResults: {
+    id: string;
+    title: string;
+    description: string;
+    meta: (string | Date)[];
+}[];
 export declare const getInitialResults: (setPreview: Dispatch<SetStateAction<ResultMeta | undefined>>, setPreviewTabId: Dispatch<SetStateAction<string | undefined>>) => SearchResultProps[];
 export declare const initialFilters: SearchResultsProps['filters'];
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAU,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAKhF,aAAK,UAAU,GAAG,UAAU,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;AAiBxD,eAAO,MAAM,iBAAiB,eAChB,SAAS,eAAe,UAAU,GAAG,SAAS,CAAC,CAAC,mBAC3C,SAAS,eAAe,MAAM,GAAG,SAAS,CAAC,CAAC,KAC5D,iBAAiB,EA4CnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,kBAAkB,CAAC,SAAS,CAqCxD,CAAC"}
+{"version":3,"file":"SearchResults.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAU,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAKhF,aAAK,UAAU,GAAG,UAAU,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;AAiBxD,eAAO,MAAM,aAAa;;;;;GAqCzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,eAChB,SAAS,eAAe,UAAU,GAAG,SAAS,CAAC,CAAC,mBAC3C,SAAS,eAAe,MAAM,GAAG,SAAS,CAAC,CAAC,KAC5D,iBAAiB,EAOnB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,kBAAkB,CAAC,SAAS,CAqCxD,CAAC"}

package/lib/work/SearchResults/SearchResults.mocks.js

@@ -11,45 +11,46 @@ const getResultLink = (result, setPreview, setPreviewTabId) => {
         }
     };
 };
+export const searchResults = [
+    {
+        id: 'PROJ-300',
+        title: 'The Art of Building Beautiful Demos',
+        description,
+        meta: ['Completed', 'Low priority', new Date('01/01/21')]
+    },
+    {
+        id: 'PROJ-123',
+        title: 'Be Single Minded',
+        description,
+        meta: ['Blocked', 'Medium priority', new Date('12/31/20')]
+    },
+    {
+        id: 'PROJ-456',
+        title: 'Differentiate Yourself and Attract More Attention Sales and Profits',
+        description,
+        meta: ['Pending', 'High priority', new Date('12/01/20')]
+    },
+    {
+        id: 'PROJ-789',
+        title: 'Importance of the Custom Test',
+        description,
+        meta: ['Completed', 'Medium priority', new Date('01/01/21 08:00:00')]
+    },
+    {
+        id: 'PROJ-100',
+        title: 'Improve Your Business Cards and Enhance Your Sales',
+        description,
+        meta: ['Ready', 'High priority', new Date('12/31/20')]
+    },
+    {
+        id: 'PROJ-200',
+        title: 'How to Write Better Advertising',
+        description,
+        meta: ['Ready', 'Low priority', new Date('12/25/20')]
+    }
+];
 export const getInitialResults = (setPreview, setPreviewTabId) => {
-    return [
-        {
-            id: 'PROJ-300',
-            title: 'The Art of Building Beautiful Demos',
-            description,
-            meta: ['Completed', 'Low priority', new Date('01/01/21')]
-        },
-        {
-            id: 'PROJ-123',
-            title: 'Be Single Minded',
-            description,
-            meta: ['Blocked', 'Medium priority', new Date('12/31/20')]
-        },
-        {
-            id: 'PROJ-456',
-            title: 'Differentiate Yourself and Attract More Attention Sales and Profits',
-            description,
-            meta: ['Pending', 'High priority', new Date('12/01/20')]
-        },
-        {
-            id: 'PROJ-789',
-            title: 'Importance of the Custom Test',
-            description,
-            meta: ['Completed', 'Medium priority', new Date('01/01/21 08:00:00')]
-        },
-        {
-            id: 'PROJ-100',
-            title: 'Improve Your Business Cards and Enhance Your Sales',
-            description,
-            meta: ['Ready', 'High priority', new Date('12/31/20')]
-        },
-        {
-            id: 'PROJ-200',
-            title: 'How to Write Better Advertising',
-            description,
-            meta: ['Ready', 'Low priority', new Date('12/25/20')]
-        }
-    ].map(result => {
+    return searchResults.map(result => {
         return {
             ...result,
             link: getResultLink(result, setPreview, setPreviewTabId)

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.mocks.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Dispatch, SetStateAction } from 'react';\n\nimport { OmitStrict, Status } from '@pega/cosmos-react-core';\nimport { SearchResultProps, SearchResultsProps } from '@pega/cosmos-react-work';\n\nconst description =\n  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, arcu eu sodales accumsan, ante purus fermentum dolor, ac convallis urna nisl eget lectus. Vivamus ut neque et turpis posuere pharetra imperdiet id augue. Nullam porta venenatis pharetra. Donec hendrerit, dolor eleifend vulputate tristique, dui dolor consequat ante, a vestibulum mi neque in purus.';\n\ntype ResultMeta = OmitStrict<SearchResultProps, 'link'>;\n\nconst getResultLink = (\n  result: ResultMeta,\n  setPreview: Dispatch<SetStateAction<ResultMeta | undefined>>,\n  setPreviewTabId: Dispatch<SetStateAction<string | undefined>>\n) => {\n  return {\n    href: `projects/${result.id}`,\n    previewable: true,\n    onPreview: () => {\n      setPreview(result);\n      setPreviewTabId(`summary-${result.id}`);\n    }\n  };\n};\n\nexport const getInitialResults = (\n  setPreview: Dispatch<SetStateAction<ResultMeta | undefined>>,\n  setPreviewTabId: Dispatch<SetStateAction<string | undefined>>\n): SearchResultProps[] => {\n  return [\n    {\n      id: 'PROJ-300',\n      title: 'The Art of Building Beautiful Demos',\n      description,\n      meta: ['Completed', 'Low priority', new Date('01/01/21')]\n    },\n    {\n      id: 'PROJ-123',\n      title: 'Be Single Minded',\n      description,\n      meta: ['Blocked', 'Medium priority', new Date('12/31/20')]\n    },\n    {\n      id: 'PROJ-456',\n      title: 'Differentiate Yourself and Attract More Attention Sales and Profits',\n      description,\n      meta: ['Pending', 'High priority', new Date('12/01/20')]\n    },\n    {\n      id: 'PROJ-789',\n      title: 'Importance of the Custom Test',\n      description,\n      meta: ['Completed', 'Medium priority', new Date('01/01/21 08:00:00')]\n    },\n    {\n      id: 'PROJ-100',\n      title: 'Improve Your Business Cards and Enhance Your Sales',\n      description,\n      meta: ['Ready', 'High priority', new Date('12/31/20')]\n    },\n    {\n      id: 'PROJ-200',\n      title: 'How to Write Better Advertising',\n      description,\n      meta: ['Ready', 'Low priority', new Date('12/25/20')]\n    }\n  ].map(result => {\n    return {\n      ...result,\n      link: getResultLink(result, setPreview, setPreviewTabId)\n    };\n  });\n};\n\nexport const initialFilters: SearchResultsProps['filters'] = [\n  {\n    type: 'select',\n    name: 'Status',\n    items: [\n      {\n        id: 'blocked',\n        label: <Status variant='urgent'>Blocked</Status>,\n        checked: false,\n        name: 'Blocked'\n      },\n      {\n        id: 'pending',\n        label: <Status variant='pending'>Pending</Status>,\n        checked: false,\n        name: 'Pending'\n      },\n      { id: 'ready', label: <Status variant='info'>Ready</Status>, checked: false, name: 'Ready' },\n      {\n        id: 'completed',\n        label: <Status variant='success'>Completed</Status>,\n        checked: false,\n        name: 'Completed'\n      }\n    ]\n  },\n  {\n    type: 'select',\n    selectType: 'single-select',\n    name: 'Last updated',\n    items: [\n      { id: 'today', label: 'Today', checked: false, name: 'Today' },\n      { id: 'yesterday', label: 'Yesterday', checked: false, name: 'Yesterday' },\n      { id: '7-days', label: 'Last 7 days', checked: false, name: 'Last 7 days' },\n      { id: '30-days', label: 'Last 30 days', checked: false, name: 'Last 30 days' }\n    ]\n  }\n];\n"]}
+{"version":3,"file":"SearchResults.mocks.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Dispatch, SetStateAction } from 'react';\n\nimport { OmitStrict, Status } from '@pega/cosmos-react-core';\nimport { SearchResultProps, SearchResultsProps } from '@pega/cosmos-react-work';\n\nconst description =\n  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, arcu eu sodales accumsan, ante purus fermentum dolor, ac convallis urna nisl eget lectus. Vivamus ut neque et turpis posuere pharetra imperdiet id augue. Nullam porta venenatis pharetra. Donec hendrerit, dolor eleifend vulputate tristique, dui dolor consequat ante, a vestibulum mi neque in purus.';\n\ntype ResultMeta = OmitStrict<SearchResultProps, 'link'>;\n\nconst getResultLink = (\n  result: ResultMeta,\n  setPreview: Dispatch<SetStateAction<ResultMeta | undefined>>,\n  setPreviewTabId: Dispatch<SetStateAction<string | undefined>>\n) => {\n  return {\n    href: `projects/${result.id}`,\n    previewable: true,\n    onPreview: () => {\n      setPreview(result);\n      setPreviewTabId(`summary-${result.id}`);\n    }\n  };\n};\n\nexport const searchResults = [\n  {\n    id: 'PROJ-300',\n    title: 'The Art of Building Beautiful Demos',\n    description,\n    meta: ['Completed', 'Low priority', new Date('01/01/21')]\n  },\n  {\n    id: 'PROJ-123',\n    title: 'Be Single Minded',\n    description,\n    meta: ['Blocked', 'Medium priority', new Date('12/31/20')]\n  },\n  {\n    id: 'PROJ-456',\n    title: 'Differentiate Yourself and Attract More Attention Sales and Profits',\n    description,\n    meta: ['Pending', 'High priority', new Date('12/01/20')]\n  },\n  {\n    id: 'PROJ-789',\n    title: 'Importance of the Custom Test',\n    description,\n    meta: ['Completed', 'Medium priority', new Date('01/01/21 08:00:00')]\n  },\n  {\n    id: 'PROJ-100',\n    title: 'Improve Your Business Cards and Enhance Your Sales',\n    description,\n    meta: ['Ready', 'High priority', new Date('12/31/20')]\n  },\n  {\n    id: 'PROJ-200',\n    title: 'How to Write Better Advertising',\n    description,\n    meta: ['Ready', 'Low priority', new Date('12/25/20')]\n  }\n];\n\nexport const getInitialResults = (\n  setPreview: Dispatch<SetStateAction<ResultMeta | undefined>>,\n  setPreviewTabId: Dispatch<SetStateAction<string | undefined>>\n): SearchResultProps[] => {\n  return searchResults.map(result => {\n    return {\n      ...result,\n      link: getResultLink(result, setPreview, setPreviewTabId)\n    };\n  });\n};\n\nexport const initialFilters: SearchResultsProps['filters'] = [\n  {\n    type: 'select',\n    name: 'Status',\n    items: [\n      {\n        id: 'blocked',\n        label: <Status variant='urgent'>Blocked</Status>,\n        checked: false,\n        name: 'Blocked'\n      },\n      {\n        id: 'pending',\n        label: <Status variant='pending'>Pending</Status>,\n        checked: false,\n        name: 'Pending'\n      },\n      { id: 'ready', label: <Status variant='info'>Ready</Status>, checked: false, name: 'Ready' },\n      {\n        id: 'completed',\n        label: <Status variant='success'>Completed</Status>,\n        checked: false,\n        name: 'Completed'\n      }\n    ]\n  },\n  {\n    type: 'select',\n    selectType: 'single-select',\n    name: 'Last updated',\n    items: [\n      { id: 'today', label: 'Today', checked: false, name: 'Today' },\n      { id: 'yesterday', label: 'Yesterday', checked: false, name: 'Yesterday' },\n      { id: '7-days', label: 'Last 7 days', checked: false, name: 'Last 7 days' },\n      { id: '30-days', label: 'Last 30 days', checked: false, name: 'Last 30 days' }\n    ]\n  }\n];\n"]}

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

@@ -3,6 +3,7 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface SearchResultsStoryProps {
     withAppShell?: boolean;
+    loading?: boolean;
 }
 export declare const SearchResultsDemo: Story<SearchResultsStoryProps>;
 //# sourceMappingURL=SearchResults.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.stories.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAiB/C,wBAMU;AAIV,UAAU,uBAAuB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CA8O5D,CAAC"}
+{"version":3,"file":"SearchResults.stories.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAiB/C,wBAMU;AAIV,UAAU,uBAAuB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CA+Q5D,CAAC"}

package/lib/work/SearchResults/SearchResults.stories.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useMemo } from 'react';
-import { Status, OneColumnPage, Text, Flex } from '@pega/cosmos-react-core';
+import { useEffect, useState, useMemo, useRef } from 'react';
+import { Status, Text, Flex } from '@pega/cosmos-react-core';
 import { CasePreview, SearchResults } from '@pega/cosmos-react-work';
 import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
 import { getInitialResults, initialFilters } from './SearchResults.mocks';
-import { ColoredText, StyledSearchResults } from './SearchResults.styles';
+import { ColoredText } from './SearchResults.styles';
 export default {
     title: 'Work/SearchResults',
     component: SearchResults,
@@ -20,8 +20,10 @@ export const SearchResultsDemo = (args) => {
     const [filters, setFilters] = useState(initialFilters);
     const [search, setSearch] = useState('');
     const [limit, setLimit] = useState(2);
-    useEffect(() => {
-        const activeFilters = filters.flatMap(group => {
+    const [searchLoading, setSearchLoading] = useState(false);
+    const searchTimeoutRef = useRef();
+    const getActiveFilters = () => {
+        return filters.flatMap(group => {
             if (group.type === 'select') {
                 return group.items.flatMap(item => {
                     if (item.checked) {
@@ -36,48 +38,71 @@ export const SearchResultsDemo = (args) => {
             }
             return [];
         });
-        if (activeFilters.length > 0 || search !== '') {
-            setResults(() => {
-                const filteredResults = initialResults.filter(result => {
-                    const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;
-                    const lastUpdatedFilterActive = activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;
-                    let matchesStatusFilter = !statusFilterActive;
-                    let matchesLastUpdatedFilter = !lastUpdatedFilterActive;
-                    activeFilters.forEach(filter => {
-                        result.meta?.forEach(tag => {
-                            if (tag) {
-                                if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {
-                                    matchesStatusFilter = true;
-                                }
-                                if (!matchesLastUpdatedFilter &&
-                                    filter.groupName === 'Last updated' &&
-                                    typeof tag === 'string' &&
-                                    ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) ||
-                                        (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) ||
-                                        (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) ||
-                                        (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))) {
-                                    matchesLastUpdatedFilter = true;
-                                }
-                            }
-                        });
-                    });
-                    return matchesStatusFilter && matchesLastUpdatedFilter;
-                });
-                return filteredResults.filter(result => {
-                    if (result &&
-                        (result.description?.toLowerCase().includes(search.toLowerCase()) ||
-                            result.title.toLowerCase().includes(search.toLowerCase()) ||
-                            result.id.toLowerCase().includes(search.toLowerCase()))) {
-                        return true;
+    };
+    const getResults = (searchStr, activeFilters) => {
+        const filteredResults = initialResults.filter(result => {
+            const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;
+            const lastUpdatedFilterActive = activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;
+            let matchesStatusFilter = !statusFilterActive;
+            let matchesLastUpdatedFilter = !lastUpdatedFilterActive;
+            activeFilters.forEach(filter => {
+                result.meta?.forEach(tag => {
+                    if (tag) {
+                        if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {
+                            matchesStatusFilter = true;
+                        }
+                        if (!matchesLastUpdatedFilter &&
+                            filter.groupName === 'Last updated' &&
+                            typeof tag === 'string' &&
+                            ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) ||
+                                (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) ||
+                                (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) ||
+                                (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))) {
+                            matchesLastUpdatedFilter = true;
+                        }
                     }
-                    return false;
                 });
             });
+            return matchesStatusFilter && matchesLastUpdatedFilter;
+        });
+        return filteredResults.filter(result => {
+            if (result &&
+                (result.description?.toLowerCase().includes(searchStr.toLowerCase()) ||
+                    result.title.toLowerCase().includes(searchStr.toLowerCase()) ||
+                    result.id.toLowerCase().includes(searchStr.toLowerCase()))) {
+                return true;
+            }
+            return false;
+        });
+    };
+    useEffect(() => {
+        const activeFilters = getActiveFilters();
+        if (activeFilters.length > 0 || search !== '') {
+            if (searchTimeoutRef.current)
+                clearTimeout(searchTimeoutRef.current);
+            setSearchLoading(true);
+            searchTimeoutRef.current = setTimeout(() => {
+                setResults(getResults(search, activeFilters));
+                setSearchLoading(false);
+            }, 1500);
         }
         else {
             setResults([]);
         }
-    }, [search, filters]);
+        return () => {
+            if (searchTimeoutRef.current)
+                clearTimeout(searchTimeoutRef.current);
+        };
+    }, [filters]);
+    const handleSearchSubmit = (value) => {
+        if (searchTimeoutRef?.current)
+            clearTimeout(searchTimeoutRef?.current);
+        setSearchLoading(true);
+        searchTimeoutRef.current = setTimeout(() => {
+            setResults(getResults(value, getActiveFilters()));
+            setSearchLoading(false);
+        }, 1500);
+    };
     const handleFilterChange = (changeEvent) => {
         setFilters(curr => {
             return curr.map(filter => {
@@ -172,16 +197,21 @@ export const SearchResultsDemo = (args) => {
             return result;
         });
     };
-    const searchResults = (_jsxs(_Fragment, { children: [_jsx(OneColumnPage, { as: StyledSearchResults, title: 'Search results', a: _jsx(SearchResults, { results: limit < results.length
-                        ? renderForDisplay(results.slice(0, limit))
-                        : renderForDisplay(results), searchInputProps: { value: search, onSearchChange: setSearch }, count: results.length, filters: filters, onFilterChange: handleFilterChange, onClearAllFilters: clearAllFilters, onClearFilter: handleClearFilter, onShowMore: limit < results.length ? handleShowMore : undefined }) }), _jsx(CasePreview, { open: !!preview, caseId: preview?.id || '', heading: preview?.title || '', tabs: {
+    const searchResults = (_jsxs(_Fragment, { children: [_jsx(SearchResults, { results: limit < results.length
+                    ? renderForDisplay(results.slice(0, limit))
+                    : renderForDisplay(results), searchInputProps: {
+                    value: search,
+                    onSearchChange: setSearch,
+                    onSearchSubmit: handleSearchSubmit,
+                    searchInputAriaLabel: 'Search'
+                }, count: results.length, filters: filters, onFilterChange: handleFilterChange, onClearAllFilters: clearAllFilters, onClearFilter: handleClearFilter, onShowMore: limit < results.length ? handleShowMore : undefined, loading: searchLoading }), _jsx(CasePreview, { open: !!preview, caseId: preview?.id || '', heading: preview?.title || '', tabs: {
                     items: [],
                     currentTabId: previewTabId || '',
                     onClick: (id) => setPreviewTabId(id)
                 }, followed: true, summary: preview && _jsx(Flex, { container: { pad: 2 }, children: preview.description }), onBeforeClose: () => {
                     setPreview(undefined);
                 } })] }));
-    return args.withAppShell ? _jsx(AppShellDemo, { appHeader: true, main: searchResults }) : searchResults;
+    return args.withAppShell ? (_jsx(AppShellDemo, { appHeader: true, main: searchResults, searchPage: true })) : (searchResults);
 };
 SearchResultsDemo.args = {
     withAppShell: false