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

package/jsx/work/IntelligentGuidance/IntelligentGuidance.stories.jsx

@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import { registerIcon } from '@pega/cosmos-react-core';
+import { IntelligentGuidance } from '@pega/cosmos-react-work';
+import * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';
+registerIcon(userSolidIcon);
+export default {
+    title: 'Work/IntelligentGuidance',
+    component: IntelligentGuidance,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const IntelligentGuidanceDemo = () => {
+    const [previousItems, setPreviousItems] = useState([]);
+    const [currentItems, setCurrentItems] = useState([
+        {
+            id: '1',
+            label: 'Change address',
+            icon: 'clipboard',
+            type: 'Task',
+            onDismiss: () => {
+                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: 'polaris',
+            type: 'Knowledge Article',
+            onClick: () => {
+                setCurrentItems(prevItems => prevItems.map(item => (item.id === '2' ? { ...item, new: false } : item)));
+            },
+            onDismiss: () => {
+                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 (<IntelligentGuidance items={currentItems} previousItems={previousItems} heading='Suggested actions' isCollapsed={isCollapsed} onExpandCollapse={() => {
+            setIsCollapsed(prevState => !prevState);
+        }}/>);
+};
+//# sourceMappingURL=IntelligentGuidance.stories.jsx.map

package/jsx/work/IntelligentGuidance/IntelligentGuidance.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"IntelligentGuidance.stories.jsx","sourceRoot":"","sources":["../../../src/work/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { registerIcon } from '@pega/cosmos-react-core';\nimport { IntelligentGuidance } from '@pega/cosmos-react-work';\nimport type { IntelligentGuidanceProps } from '@pega/cosmos-react-work';\nimport * as userSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/user-solid.icon';\n\nregisterIcon(userSolidIcon);\n\nexport default {\n  title: 'Work/IntelligentGuidance',\n  component: IntelligentGuidance,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const IntelligentGuidanceDemo: StoryFn = () => {\n  const [previousItems, setPreviousItems] = useState<IntelligentGuidanceProps['items']>([]);\n  const [currentItems, setCurrentItems] = useState<IntelligentGuidanceProps['items']>([\n    {\n      id: '1',\n      label: 'Change address',\n      icon: 'clipboard',\n      type: 'Task',\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '1');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '1'));\n      },\n      onClick: () => {}\n    },\n    {\n      id: '2',\n      label: 'Update contact profile',\n      icon: 'polaris',\n      type: 'Knowledge Article',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '2' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '2');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '2'));\n      },\n      new: true\n    },\n    {\n      id: '3',\n      label: 'Task suggestion',\n      icon: 'polaris',\n      type: 'Reason detected',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '3' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '3');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '3'));\n      },\n      new: true\n    },\n    {\n      id: '4',\n      label: 'Demo item',\n      icon: 'polaris',\n      type: 'Demo',\n      onClick: () => {\n        setCurrentItems(prevItems =>\n          prevItems.map(item => (item.id === '4' ? { ...item, new: false } : item))\n        );\n      },\n      onDismiss: () => {\n        const currentItem = currentItems.find(item => item.id === '4');\n        if (currentItem) {\n          setPreviousItems(prevItems => [\n            ...prevItems,\n            {\n              ...currentItem,\n              new: false,\n              onDismiss: undefined\n            }\n          ]);\n        }\n        setCurrentItems(prevItems => prevItems.filter(item => item.id !== '4'));\n      },\n      new: true\n    }\n  ]);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n\n  return (\n    <IntelligentGuidance\n      items={currentItems}\n      previousItems={previousItems}\n      heading='Suggested actions'\n      isCollapsed={isCollapsed}\n      onExpandCollapse={() => {\n        setIsCollapsed(prevState => !prevState);\n      }}\n    />\n  );\n};\n"]}

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

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

package/jsx/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,mCAiB7B,CAAC"}

package/jsx/work/Predictions/Predictions.mocks.jsx

@@ -0,0 +1,18 @@
+import { Flex, Text } from '@pega/cosmos-react-core';
+export const FraudRiskRenderer = () => {
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      <Flex container={{ direction: 'column', gap: 0.5 }}>
+        <Text variant='secondary'>Fraud risk</Text>
+        <Text variant='h3'>76%</Text>
+      </Flex>
+      <Text variant='secondary'>65% average</Text>
+      <Text as='p'>
+        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.
+      </Text>
+    </Flex>);
+};
+//# sourceMappingURL=Predictions.mocks.jsx.map

package/jsx/work/Predictions/Predictions.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.mocks.jsx","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,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CACjD;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,CAC1C;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAC9B;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,WAAW,EAAE,IAAI,CAC3C;MAAA,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CACV;;;;;;MAKF,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,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/jsx/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/jsx/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"}

package/jsx/work/Predictions/Predictions.stories.jsx

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useState } from 'react';
+import { Predictions } from '@pega/cosmos-react-work';
+import { formatNumber, useConfiguration } from '@pega/cosmos-react-core';
+import { FraudRiskRenderer } from './Predictions.mocks';
+export default {
+    title: 'Work/Predictions',
+    component: Predictions
+};
+export const PredictionsDemo = () => {
+    const { locale } = useConfiguration();
+    const getFormattedPercentage = useCallback((value) => formatNumber(value, {
+        locale,
+        options: {
+            style: 'unit',
+            unit: 'percent'
+        }
+    }), []);
+    const [predictionsItems, setPredictionsItems] = useState([
+        {
+            id: '1',
+            label: 'Fraud risk',
+            value: getFormattedPercentage(76),
+            additionalInfo: <FraudRiskRenderer />
+        },
+        {
+            id: '2',
+            label: 'Predict the likehood of case completion',
+            value: getFormattedPercentage(73)
+        },
+        {
+            id: '3',
+            label: 'Probability to churn',
+            value: getFormattedPercentage(82)
+        }
+    ]);
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            if (predictionsItems.length < 4) {
+                setPredictionsItems([
+                    ...predictionsItems,
+                    {
+                        id: '4',
+                        label: 'Risk of missing SLA',
+                        value: getFormattedPercentage(19)
+                    }
+                ]);
+            }
+        }, 3000);
+        return () => clearTimeout(timeout);
+    }, [predictionsItems, getFormattedPercentage]);
+    return <Predictions count={predictionsItems.length} items={predictionsItems}/>;
+};
+//# sourceMappingURL=Predictions.stories.jsx.map

package/jsx/work/Predictions/Predictions.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Predictions.stories.jsx","sourceRoot":"","sources":["../../../src/work/Predictions/Predictions.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAExD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAY,GAAG,EAAE;IAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,KAAa,EAAE,EAAE,CAChB,YAAY,CAAC,KAAK,EAAE;QAClB,MAAM;QACN,OAAO,EAAE;YACP,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,SAAS;SAChB;KACF,CAAC,EACJ,EAAE,CACH,CAAC;IAEF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAmB;QACzE;YACE,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,YAAY;YACnB,KAAK,EAAE,sBAAsB,CAAC,EAAE,CAAC;YACjC,cAAc,EAAE,CAAC,iBAAiB,CAAC,AAAD,EAAG;SACtC;QACD;YACE,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,yCAAyC;YAChD,KAAK,EAAE,sBAAsB,CAAC,EAAE,CAAC;SAClC;QACD;YACE,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,sBAAsB;YAC7B,KAAK,EAAE,sBAAsB,CAAC,EAAE,CAAC;SAClC;KACF,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAC9B,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/B,mBAAmB,CAAC;oBAClB,GAAG,gBAAgB;oBACnB;wBACE,EAAE,EAAE,GAAG;wBACP,KAAK,EAAE,qBAAqB;wBAC5B,KAAK,EAAE,sBAAsB,CAAC,EAAE,CAAC;qBAClC;iBACF,CAAC,CAAC;aACJ;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC,gBAAgB,CAAC,EAAG,CAAC;AAClF,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport { Predictions } from '@pega/cosmos-react-work';\nimport { formatNumber, useConfiguration } from '@pega/cosmos-react-core';\nimport type { PredictionItem } from '@pega/cosmos-react-work/lib/components/Predictions/Predictions.types';\n\nimport { FraudRiskRenderer } from './Predictions.mocks';\n\nexport default {\n  title: 'Work/Predictions',\n  component: Predictions\n} as Meta;\n\nexport const PredictionsDemo: StoryFn = () => {\n  const { locale } = useConfiguration();\n\n  const getFormattedPercentage = useCallback(\n    (value: number) =>\n      formatNumber(value, {\n        locale,\n        options: {\n          style: 'unit',\n          unit: 'percent'\n        }\n      }),\n    []\n  );\n\n  const [predictionsItems, setPredictionsItems] = useState<PredictionItem[]>([\n    {\n      id: '1',\n      label: 'Fraud risk',\n      value: getFormattedPercentage(76),\n      additionalInfo: <FraudRiskRenderer />\n    },\n    {\n      id: '2',\n      label: 'Predict the likehood of case completion',\n      value: getFormattedPercentage(73)\n    },\n    {\n      id: '3',\n      label: 'Probability to churn',\n      value: getFormattedPercentage(82)\n    }\n  ]);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      if (predictionsItems.length < 4) {\n        setPredictionsItems([\n          ...predictionsItems,\n          {\n            id: '4',\n            label: 'Risk of missing SLA',\n            value: getFormattedPercentage(19)\n          }\n        ]);\n      }\n    }, 3000);\n    return () => clearTimeout(timeout);\n  }, [predictionsItems, getFormattedPercentage]);\n\n  return <Predictions count={predictionsItems.length} items={predictionsItems} />;\n};\n"]}

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

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { OmitStrict } from '@pega/cosmos-react-core';
+import { SearchResultProps, SearchResultsProps } from '@pega/cosmos-react-work';
+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 {};
+//# sourceMappingURL=SearchResults.mocks.d.ts.map

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

@@ -0,0 +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,KAAK,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/jsx/work/SearchResults/SearchResults.mocks.jsx

@@ -0,0 +1,97 @@
+import { Status } from '@pega/cosmos-react-core';
+const description = '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.';
+const getResultLink = (result, setPreview, setPreviewTabId) => {
+    return {
+        href: `projects/${result.id}`,
+        previewable: true,
+        onPreview: () => {
+            setPreview(result);
+            setPreviewTabId(`summary-${result.id}`);
+        }
+    };
+};
+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 searchResults.map(result => {
+        return {
+            ...result,
+            link: getResultLink(result, setPreview, setPreviewTabId)
+        };
+    });
+};
+export const initialFilters = [
+    {
+        type: 'select',
+        name: 'Status',
+        items: [
+            {
+                id: 'blocked',
+                label: <Status variant='urgent'>Blocked</Status>,
+                checked: false,
+                name: 'Blocked'
+            },
+            {
+                id: 'pending',
+                label: <Status variant='pending'>Pending</Status>,
+                checked: false,
+                name: 'Pending'
+            },
+            { id: 'ready', label: <Status variant='info'>Ready</Status>, checked: false, name: 'Ready' },
+            {
+                id: 'completed',
+                label: <Status variant='success'>Completed</Status>,
+                checked: false,
+                name: 'Completed'
+            }
+        ]
+    },
+    {
+        type: 'select',
+        selectType: 'single-select',
+        name: 'Last updated',
+        items: [
+            { id: 'today', label: 'Today', checked: false, name: 'Today' },
+            { id: 'yesterday', label: 'Yesterday', checked: false, name: 'Yesterday' },
+            { id: '7-days', label: 'Last 7 days', checked: false, name: 'Last 7 days' },
+            { id: '30-days', label: 'Last 30 days', checked: false, name: 'Last 30 days' }
+        ]
+    }
+];
+//# sourceMappingURL=SearchResults.mocks.jsx.map

package/jsx/work/SearchResults/SearchResults.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.mocks.jsx","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/jsx/work/SearchResults/SearchResults.stories.d.ts

@@ -0,0 +1,9 @@
+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 SearchResultsStoryProps {
+    withAppShell?: boolean;
+    loading?: boolean;
+}
+export declare const SearchResultsDemo: StoryFn<SearchResultsStoryProps>;
+//# sourceMappingURL=SearchResults.stories.d.ts.map

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

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

package/jsx/work/SearchResults/SearchResults.stories.jsx

@@ -0,0 +1,242 @@
+import { useEffect, useState, useMemo, useRef } from 'react';
+import { Status, Text } 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 } from './SearchResults.styles';
+export default {
+    title: 'Work/SearchResults',
+    component: SearchResults,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const SearchResultsDemo = (args) => {
+    const [preview, setPreview] = useState();
+    const [previewTabId, setPreviewTabId] = useState();
+    const initialResults = useMemo(() => getInitialResults(setPreview, setPreviewTabId), []);
+    const [results, setResults] = useState(initialResults);
+    const [filters, setFilters] = useState(initialFilters);
+    const [search, setSearch] = useState('');
+    const [limit, setLimit] = useState(2);
+    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) {
+                        return {
+                            id: item.id,
+                            name: item.name,
+                            groupName: group.name
+                        };
+                    }
+                    return [];
+                });
+            }
+            return [];
+        });
+    };
+    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 matchesStatusFilter && matchesLastUpdatedFilter;
+        });
+        return filteredResults.filter(result => {
+            return (result &&
+                (result.description?.toLowerCase().includes(searchStr.toLowerCase()) ||
+                    result.title.toLowerCase().includes(searchStr.toLowerCase()) ||
+                    result.id.toLowerCase().includes(searchStr.toLowerCase())));
+        });
+    };
+    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([]);
+        }
+        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 => {
+                const newFilter = { ...filter };
+                if (newFilter.name === changeEvent.name &&
+                    changeEvent.type === 'select' &&
+                    newFilter.type === 'select') {
+                    newFilter.items = newFilter.items.map(item => {
+                        const newItem = { ...item };
+                        if (item.id === changeEvent.value.id)
+                            newItem.checked = changeEvent.value.checked;
+                        else if (newFilter.selectType === 'single-select')
+                            newItem.checked = false;
+                        return newItem;
+                    });
+                }
+                return newFilter;
+            });
+        });
+    };
+    const clearAllFilters = () => {
+        setFilters(curr => {
+            return curr.map(filter => {
+                if (filter.type === 'select') {
+                    filter.items = filter.items.map(item => {
+                        item.checked = false;
+                        return item;
+                    });
+                }
+                return filter;
+            });
+        });
+    };
+    const handleClearFilter = (filterName) => {
+        setFilters(curr => {
+            return curr.map(filter => {
+                if (filter.name === filterName && filter.type === 'select') {
+                    filter.items = filter.items.map(item => {
+                        item.checked = false;
+                        return item;
+                    });
+                }
+                return filter;
+            });
+        });
+    };
+    const handleShowMore = () => {
+        if (limit < results.length)
+            setLimit(curr => curr + 2);
+    };
+    const renderForDisplay = (resultsToDisplay) => {
+        return resultsToDisplay.map(result => {
+            if (result.meta) {
+                const metaValues = [...result.meta];
+                const renderedMeta = metaValues.map(item => {
+                    if (!Number.isNaN(Date.parse(item))) {
+                        if (Date.parse(item) >= Date.parse('12/01/20') &&
+                            Date.parse(item) < Date.parse('12/25/20'))
+                            return 'Updated 1 month ago';
+                        if (Date.parse(item) >= Date.parse('12/25/20') &&
+                            Date.parse(item) < Date.parse('12/31/20'))
+                            return 'Updated 1 week ago';
+                        if (Date.parse(item) >= Date.parse('12/31/20') &&
+                            Date.parse(item) < Date.parse('01/01/21'))
+                            return 'Updated yesterday';
+                        if (Date.parse(item) >= Date.parse('01/01/21') &&
+                            Date.parse(item) < Date.parse('01/01/21 07:00:00'))
+                            return 'Updated today';
+                        return 'Updated just now';
+                    }
+                    switch (item) {
+                        case 'Completed':
+                            return <Status variant='success'>Completed</Status>;
+                        case 'Ready':
+                            return <Status variant='info'>Ready</Status>;
+                        case 'Pending':
+                            return <Status variant='pending'>Pending</Status>;
+                        case 'Blocked':
+                            return <Status variant='urgent'>Blocked</Status>;
+                        case 'Low priority':
+                            return <Text variant='secondary'>Low priority</Text>;
+                        case 'Medium priority':
+                            return (<Text as={ColoredText} colorVariant='warn' variant='secondary'>
+                  Medium priority
+                </Text>);
+                        case 'High priority':
+                            return (<Text as={ColoredText} colorVariant='urgent' variant='secondary'>
+                  High priority
+                </Text>);
+                        default:
+                            return item;
+                    }
+                });
+                return { ...result, meta: renderedMeta };
+            }
+            return result;
+        });
+    };
+    const searchResults = (<>
+      <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}/>
+
+      <CasePreview open={!!preview} caseId={preview?.id || ''} heading={preview?.title || ''} tabs={{
+            items: [],
+            currentTabId: previewTabId || '',
+            onClick: (id) => setPreviewTabId(id)
+        }} followed summaryFields={{
+            secondary: [
+                {
+                    name: 'Target Release',
+                    value: '1.0.0'
+                },
+                {
+                    name: 'Team',
+                    value: 'Scrum Team A'
+                },
+                {
+                    name: 'Description',
+                    value: preview?.description,
+                    variant: 'stacked'
+                }
+            ]
+        }} onBeforeClose={() => {
+            setPreview(undefined);
+        }}/>
+    </>);
+    return args.withAppShell ? (<AppShellDemo appHeader main={searchResults} searchPage/>) : (searchResults);
+};
+SearchResultsDemo.args = {
+    withAppShell: false
+};
+SearchResultsDemo.argTypes = {
+    withAppShell: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=SearchResults.stories.jsx.map