@pega/cosmos-react-demos 2.1.6 → 2.1.7

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

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const DetailsDemo: Story;
+//# sourceMappingURL=Details.stories.d.ts.map

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

@@ -0,0 +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;;AAa/C,wBAGU;AAEV,eAAO,MAAM,WAAW,EAAE,KAwEzB,CAAC"}

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CurrencyDisplay, DateTimeDisplay, URLDisplay, BooleanDisplay, FieldGroup, FieldValueList, Link } from '@pega/cosmos-react-core';
+import { Details } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/Details',
+    component: Details
+};
+export const DetailsDemo = () => {
+    return (_jsx(Details, { highlightedFields: [
+            {
+                id: '1',
+                name: 'Statement balance',
+                value: _jsx(CurrencyDisplay, { value: '1,289.00', currencyISOCode: 'USD' }, void 0)
+            },
+            {
+                id: '2',
+                name: 'Total balance',
+                value: _jsx(CurrencyDisplay, { value: '35,667.00', currencyISOCode: 'USD' }, void 0)
+            },
+            {
+                id: '3',
+                name: 'Available credit',
+                value: _jsx(CurrencyDisplay, { value: '5,813.00', currencyISOCode: 'USD' }, void 0)
+            },
+            {
+                id: '4',
+                name: 'Payment due date',
+                value: _jsx(DateTimeDisplay, { value: Date.now(), variant: 'datetime', format: 'long' }, void 0)
+            },
+            {
+                id: '5',
+                name: 'Available benefits',
+                value: (_jsx(URLDisplay, { value: 'https://www.google.com/', displayText: 'View benefits', variant: 'link' }, void 0))
+            },
+            {
+                id: '6',
+                name: 'Platinum member',
+                value: _jsx(BooleanDisplay, { value: true }, void 0)
+            }
+        ], regions: [
+            _jsx(FieldGroup, { name: 'Personal', children: _jsx(FieldValueList, { fields: [
+                        { name: 'Home address', value: '12 Higgins Bottom Way, Carnell, NH, 02133' },
+                        { name: 'Primary phone', value: '(617) 374-9637' },
+                        {
+                            name: 'Primary email',
+                            value: _jsx(Link, { href: 'mailto:joe.smith@example.com', children: "joe.smith@example.com" }, void 0)
+                        }
+                    ] }, void 0) }, void 0),
+            _jsx(FieldGroup, { name: 'Work', children: _jsx(FieldValueList, { fields: [
+                        {
+                            name: 'Work address',
+                            value: '1 Monolith Business Parkway, Milltown, NH, 02333'
+                        },
+                        { name: 'Work phone', value: '(800) 374-2200' },
+                        {
+                            name: 'Work email',
+                            value: _jsx(Link, { href: 'mailto:jane.smith@example.com', children: "jane.smith@example.com" }, void 0)
+                        }
+                    ] }, void 0) }, void 0)
+        ] }, void 0));
+};
+//# sourceMappingURL=Details.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,eAAe,EACf,eAAe,EACf,UAAU,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,OAAO,CACL,KAAC,OAAO,IACN,iBAAiB,EAAE;YACjB;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,KAAC,eAAe,IAAC,KAAK,EAAC,UAAU,EAAC,eAAe,EAAC,KAAK,WAAG;aAClE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,KAAC,eAAe,IAAC,KAAK,EAAC,WAAW,EAAC,eAAe,EAAC,KAAK,WAAG;aACnE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,KAAC,eAAe,IAAC,KAAK,EAAC,UAAU,EAAC,eAAe,EAAC,KAAK,WAAG;aAClE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,KAAC,eAAe,IAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,OAAO,EAAC,UAAU,EAAC,MAAM,EAAC,MAAM,WAAG;aAC/E;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CACL,KAAC,UAAU,IACT,KAAK,EAAC,yBAAyB,EAC/B,WAAW,EAAC,eAAe,EAC3B,OAAO,EAAC,MAAM,WACd,CACH;aACF;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,KAAC,cAAc,IAAC,KAAK,iBAAG;aAChC;SACF,EACD,OAAO,EAAE;YACP,KAAC,UAAU,IAAC,IAAI,EAAC,UAAU,YACzB,KAAC,cAAc,IACb,MAAM,EAAE;wBACN,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,2CAA2C,EAAE;wBAC5E,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE;wBAClD;4BACE,IAAI,EAAE,eAAe;4BACrB,KAAK,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,8BAA8B,8CAA6B;yBAC9E;qBACF,WACD,WACS;YACb,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,YACrB,KAAC,cAAc,IACb,MAAM,EAAE;wBACN;4BACE,IAAI,EAAE,cAAc;4BACpB,KAAK,EAAE,kDAAkD;yBAC1D;wBACD,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE;wBAC/C;4BACE,IAAI,EAAE,YAAY;4BAClB,KAAK,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,+BAA+B,+CAA8B;yBAChF;qBACF,WACD,WACS;SACd,WACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  Link\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    <Details\n      highlightedFields={[\n        {\n          id: '1',\n          name: 'Statement balance',\n          value: <CurrencyDisplay value='1,289.00' currencyISOCode='USD' />\n        },\n        {\n          id: '2',\n          name: 'Total balance',\n          value: <CurrencyDisplay value='35,667.00' currencyISOCode='USD' />\n        },\n        {\n          id: '3',\n          name: 'Available credit',\n          value: <CurrencyDisplay value='5,813.00' 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              { name: 'Home address', value: '12 Higgins Bottom Way, Carnell, NH, 02133' },\n              { name: 'Primary phone', value: '(617) 374-9637' },\n              {\n                name: 'Primary email',\n                value: <Link href='mailto:joe.smith@example.com'>joe.smith@example.com</Link>\n              }\n            ]}\n          />\n        </FieldGroup>,\n        <FieldGroup name='Work'>\n          <FieldValueList\n            fields={[\n              {\n                name: 'Work address',\n                value: '1 Monolith Business Parkway, Milltown, NH, 02333'\n              },\n              { name: 'Work phone', value: '(800) 374-2200' },\n              {\n                name: 'Work email',\n                value: <Link href='mailto:jane.smith@example.com'>jane.smith@example.com</Link>\n              }\n            ]}\n          />\n        </FieldGroup>\n      ]}\n    />\n  );\n};\n"]}

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar, EmailDisplay, PhoneDisplay } from '@pega/cosmos-react-core';
+import { Glimpse } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/Glimpse',
+    component: Glimpse,
+    parameters: { layout: 'centered' }
+};
+export const GlimpseDemo = (args) => {
+    const fields = [
+        {
+            name: 'Project',
+            value: 'Cosmos Demo'
+        },
+        {
+            name: 'Phone number',
+            value: _jsx(PhoneDisplay, { value: '(111) 111-1111' }, void 0)
+        },
+        {
+            name: 'Email',
+            value: _jsx(EmailDisplay, { value: 'turnc@example.com' }, void 0)
+        },
+        {
+            name: 'Reports to',
+            value: 'Helen Bush'
+        }
+    ];
+    return (_jsx(Glimpse, { id: 'turnc', primary: 'Cindy Turner', secondary: args.showSecondary ? ['Lead Engineer'] : undefined, visual: args.showVisual ? _jsx(Avatar, { size: 'l', name: 'Cindy Turner' }, void 0) : undefined, fields: args.showFields ? fields : undefined }, void 0));
+};
+GlimpseDemo.args = {
+    showSecondary: true,
+    showVisual: true,
+    showFields: true
+};
+GlimpseDemo.argTypes = {
+    showSecondary: { control: { type: 'boolean' } },
+    showVisual: { control: { type: 'boolean' } },
+    showFields: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Glimpse.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Glimpse.stories.js","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAuB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;CAC3B,CAAC;AAQV,MAAM,CAAC,MAAM,WAAW,GAA6B,CAAC,IAAuB,EAAE,EAAE;IAC/E,MAAM,MAAM,GAAkC;QAC5C;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,aAAa;SACrB;QACD;YACE,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,KAAC,YAAY,IAAC,KAAK,EAAC,gBAAgB,WAAG;SAC/C;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,KAAC,YAAY,IAAC,KAAK,EAAC,mBAAmB,WAAG;SAClD;QACD;YACE,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,YAAY;SACpB;KACF,CAAC;IAEF,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAC,OAAO,EACV,OAAO,EAAC,cAAc,EACtB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAC7D,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,WAAG,CAAC,CAAC,CAAC,SAAS,EAC7E,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,WAC5C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,UAAU,EAAE,IAAI;CACjB,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Avatar, EmailDisplay, FieldValueListProps, PhoneDisplay } from '@pega/cosmos-react-core';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Glimpse',\n  component: Glimpse,\n  parameters: { layout: 'centered' }\n} as Meta;\n\ninterface GlimpseStoryProps {\n  showSecondary?: boolean;\n  showVisual?: boolean;\n  showFields?: boolean;\n}\n\nexport const GlimpseDemo: Story<GlimpseStoryProps> = (args: GlimpseStoryProps) => {\n  const fields: FieldValueListProps['fields'] = [\n    {\n      name: 'Project',\n      value: 'Cosmos Demo'\n    },\n    {\n      name: 'Phone number',\n      value: <PhoneDisplay value='(111) 111-1111' />\n    },\n    {\n      name: 'Email',\n      value: <EmailDisplay value='turnc@example.com' />\n    },\n    {\n      name: 'Reports to',\n      value: 'Helen Bush'\n    }\n  ];\n\n  return (\n    <Glimpse\n      id='turnc'\n      primary='Cindy Turner'\n      secondary={args.showSecondary ? ['Lead Engineer'] : undefined}\n      visual={args.showVisual ? <Avatar size='l' name='Cindy Turner' /> : undefined}\n      fields={args.showFields ? fields : undefined}\n    />\n  );\n};\n\nGlimpseDemo.args = {\n  showSecondary: true,\n  showVisual: true,\n  showFields: true\n};\n\nGlimpseDemo.argTypes = {\n  showSecondary: { control: { type: 'boolean' } },\n  showVisual: { control: { type: 'boolean' } },\n  showFields: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,8 @@
+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 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/lib/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,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"}

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

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 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 {
+            ...result,
+            link: getResultLink(result, setPreview, setPreviewTabId)
+        };
+    });
+};
+export const initialFilters = [
+    {
+        type: 'select',
+        name: 'Status',
+        items: [
+            {
+                id: 'blocked',
+                label: _jsx(Status, { variant: 'urgent', children: "Blocked" }, void 0),
+                checked: false,
+                name: 'Blocked'
+            },
+            {
+                id: 'pending',
+                label: _jsx(Status, { variant: 'pending', children: "Pending" }, void 0),
+                checked: false,
+                name: 'Pending'
+            },
+            { id: 'ready', label: _jsx(Status, { variant: 'info', children: "Ready" }, void 0), checked: false, name: 'Ready' },
+            {
+                id: 'completed',
+                label: _jsx(Status, { variant: 'success', children: "Completed" }, void 0),
+                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.js.map

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

@@ -0,0 +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"]}

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

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

package/lib/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,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAgB/C,wBAMU;AAIV,UAAU,uBAAuB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CA8O5D,CAAC"}

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

@@ -0,0 +1,192 @@
+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 { CasePreview, SearchResults } from '@pega/cosmos-react-work';
+import { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
+import { getInitialResults, initialFilters } from './SearchResults.mocks';
+import { ColoredText, StyledSearchResults } 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);
+    useEffect(() => {
+        const activeFilters = 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 [];
+        });
+        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;
+                    }
+                    return false;
+                });
+            });
+        }
+        else {
+            setResults([]);
+        }
+    }, [search, filters]);
+    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 _jsx(Status, { variant: 'success', children: "Completed" }, void 0);
+                        case 'Ready':
+                            return _jsx(Status, { variant: 'info', children: "Ready" }, void 0);
+                        case 'Pending':
+                            return _jsx(Status, { variant: 'pending', children: "Pending" }, void 0);
+                        case 'Blocked':
+                            return _jsx(Status, { variant: 'urgent', children: "Blocked" }, void 0);
+                        case 'Low priority':
+                            return _jsx(Text, { variant: 'secondary', children: "Low priority" }, void 0);
+                        case 'Medium priority':
+                            return (_jsx(Text, { as: ColoredText, colorVariant: 'warn', variant: 'secondary', children: "Medium priority" }, void 0));
+                        case 'High priority':
+                            return (_jsx(Text, { as: ColoredText, colorVariant: 'urgent', variant: 'secondary', children: "High priority" }, void 0));
+                        default:
+                            return item;
+                    }
+                });
+                return { ...result, meta: renderedMeta };
+            }
+            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 }, void 0) }, void 0), _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 }, void 0), onBeforeClose: () => {
+                    setPreview(undefined);
+                } }, void 0)] }, void 0));
+    return args.withAppShell ? _jsx(AppShellDemo, { appHeader: true, main: searchResults }, void 0) : searchResults;
+};
+SearchResultsDemo.args = {
+    withAppShell: false
+};
+SearchResultsDemo.argTypes = {
+    withAppShell: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=SearchResults.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.stories.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState, useMemo } from 'react';\n\nimport { Status, OmitStrict, OneColumnPage, Text, Flex } from '@pega/cosmos-react-core';\nimport {\n  CasePreview,\n  SearchResults,\n  SearchResultsProps,\n  FilterEvent,\n  SearchResultProps\n} from '@pega/cosmos-react-work';\nimport { AppShellDemo } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\n\nimport { getInitialResults, initialFilters } from './SearchResults.mocks';\nimport { ColoredText, StyledSearchResults } from './SearchResults.styles';\n\nexport default {\n  title: 'Work/SearchResults',\n  component: SearchResults,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ntype ResultMeta = OmitStrict<SearchResultProps, 'link'>;\n\ninterface SearchResultsStoryProps {\n  withAppShell?: boolean;\n}\n\nexport const SearchResultsDemo: Story<SearchResultsStoryProps> = (\n  args: SearchResultsStoryProps\n) => {\n  const [preview, setPreview] = useState<undefined | ResultMeta>();\n  const [previewTabId, setPreviewTabId] = useState<undefined | string>();\n  const initialResults = useMemo(() => getInitialResults(setPreview, setPreviewTabId), []);\n  const [results, setResults] = useState(initialResults);\n  const [filters, setFilters] = useState(initialFilters);\n  const [search, setSearch] = useState('');\n  const [limit, setLimit] = useState(2);\n\n  useEffect(() => {\n    const activeFilters = filters.flatMap(group => {\n      if (group.type === 'select') {\n        return group.items.flatMap(item => {\n          if (item.checked) {\n            return {\n              id: item.id,\n              name: item.name,\n              groupName: group.name\n            };\n          }\n          return [];\n        });\n      }\n      return [];\n    });\n\n    if (activeFilters.length > 0 || search !== '') {\n      setResults(() => {\n        const filteredResults = initialResults.filter(result => {\n          const statusFilterActive = activeFilters.findIndex(x => x.groupName === 'Status') !== -1;\n          const lastUpdatedFilterActive =\n            activeFilters.findIndex(x => x.groupName === 'Last updated') !== -1;\n\n          let matchesStatusFilter = !statusFilterActive;\n          let matchesLastUpdatedFilter = !lastUpdatedFilterActive;\n\n          activeFilters.forEach(filter => {\n            result.meta?.forEach(tag => {\n              if (tag) {\n                if (!matchesStatusFilter && filter.groupName === 'Status' && tag === filter.name) {\n                  matchesStatusFilter = true;\n                }\n                if (\n                  !matchesLastUpdatedFilter &&\n                  filter.groupName === 'Last updated' &&\n                  typeof tag === 'string' &&\n                  ((filter.name === 'Today' && Date.parse(tag) >= Date.parse('01/01/21')) ||\n                    (filter.name === 'Yesterday' && Date.parse(tag) >= Date.parse('12/31/20')) ||\n                    (filter.name === 'Last 7 days' && Date.parse(tag) >= Date.parse('12/25/20')) ||\n                    (filter.name === 'Last 30 days' && Date.parse(tag) >= Date.parse('12/01/20')))\n                ) {\n                  matchesLastUpdatedFilter = true;\n                }\n              }\n            });\n          });\n\n          return matchesStatusFilter && matchesLastUpdatedFilter;\n        });\n\n        return filteredResults.filter(result => {\n          if (\n            result &&\n            (result.description?.toLowerCase().includes(search.toLowerCase()) ||\n              result.title.toLowerCase().includes(search.toLowerCase()) ||\n              result.id.toLowerCase().includes(search.toLowerCase()))\n          ) {\n            return true;\n          }\n\n          return false;\n        });\n      });\n    } else {\n      setResults([]);\n    }\n  }, [search, filters]);\n\n  const handleFilterChange = (changeEvent: FilterEvent) => {\n    setFilters(curr => {\n      return curr.map(filter => {\n        const newFilter = { ...filter };\n        if (\n          newFilter.name === changeEvent.name &&\n          changeEvent.type === 'select' &&\n          newFilter.type === 'select'\n        ) {\n          newFilter.items = newFilter.items.map(item => {\n            const newItem = { ...item };\n            if (item.id === changeEvent.value.id) newItem.checked = changeEvent.value.checked;\n            else if (newFilter.selectType === 'single-select') newItem.checked = false;\n            return newItem;\n          });\n        }\n        return newFilter;\n      });\n    });\n  };\n\n  const clearAllFilters = () => {\n    setFilters(curr => {\n      return curr.map(filter => {\n        if (filter.type === 'select') {\n          filter.items = filter.items.map(item => {\n            item.checked = false;\n            return item;\n          });\n        }\n        return filter;\n      });\n    });\n  };\n\n  const handleClearFilter = (filterName: string) => {\n    setFilters(curr => {\n      return curr.map(filter => {\n        if (filter.name === filterName && filter.type === 'select') {\n          filter.items = filter.items.map(item => {\n            item.checked = false;\n            return item;\n          });\n        }\n        return filter;\n      });\n    });\n  };\n\n  const handleShowMore = () => {\n    if (limit < results.length) setLimit(curr => curr + 2);\n  };\n\n  const renderForDisplay = (\n    resultsToDisplay: SearchResultsProps['results']\n  ): SearchResultsProps['results'] => {\n    return resultsToDisplay.map(result => {\n      if (result.meta) {\n        const metaValues = [...result.meta];\n        const renderedMeta = metaValues.map(item => {\n          if (!Number.isNaN(Date.parse(item as string))) {\n            if (\n              Date.parse(item as string) >= Date.parse('12/01/20') &&\n              Date.parse(item as string) < Date.parse('12/25/20')\n            )\n              return 'Updated 1 month ago';\n            if (\n              Date.parse(item as string) >= Date.parse('12/25/20') &&\n              Date.parse(item as string) < Date.parse('12/31/20')\n            )\n              return 'Updated 1 week ago';\n            if (\n              Date.parse(item as string) >= Date.parse('12/31/20') &&\n              Date.parse(item as string) < Date.parse('01/01/21')\n            )\n              return 'Updated yesterday';\n            if (\n              Date.parse(item as string) >= Date.parse('01/01/21') &&\n              Date.parse(item as string) < Date.parse('01/01/21 07:00:00')\n            )\n              return 'Updated today';\n            return 'Updated just now';\n          }\n          switch (item) {\n            case 'Completed':\n              return <Status variant='success'>Completed</Status>;\n            case 'Ready':\n              return <Status variant='info'>Ready</Status>;\n            case 'Pending':\n              return <Status variant='pending'>Pending</Status>;\n            case 'Blocked':\n              return <Status variant='urgent'>Blocked</Status>;\n            case 'Low priority':\n              return <Text variant='secondary'>Low priority</Text>;\n            case 'Medium priority':\n              return (\n                <Text as={ColoredText} colorVariant='warn' variant='secondary'>\n                  Medium priority\n                </Text>\n              );\n            case 'High priority':\n              return (\n                <Text as={ColoredText} colorVariant='urgent' variant='secondary'>\n                  High priority\n                </Text>\n              );\n            default:\n              return item;\n          }\n        });\n        return { ...result, meta: renderedMeta };\n      }\n      return result;\n    });\n  };\n\n  const searchResults = (\n    <>\n      <OneColumnPage\n        as={StyledSearchResults}\n        title='Search results'\n        a={\n          <SearchResults\n            results={\n              limit < results.length\n                ? renderForDisplay(results.slice(0, limit))\n                : renderForDisplay(results)\n            }\n            searchInputProps={{ value: search, onSearchChange: setSearch }}\n            count={results.length}\n            filters={filters}\n            onFilterChange={handleFilterChange}\n            onClearAllFilters={clearAllFilters}\n            onClearFilter={handleClearFilter}\n            onShowMore={limit < results.length ? handleShowMore : undefined}\n          />\n        }\n      />\n\n      <CasePreview\n        open={!!preview}\n        caseId={preview?.id || ''}\n        heading={preview?.title || ''}\n        tabs={{\n          items: [],\n          currentTabId: previewTabId || '',\n          onClick: (id: string) => setPreviewTabId(id)\n        }}\n        followed\n        summary={preview && <Flex container={{ pad: 2 }}>{preview.description}</Flex>}\n        onBeforeClose={() => {\n          setPreview(undefined);\n        }}\n      />\n    </>\n  );\n\n  return args.withAppShell ? <AppShellDemo appHeader main={searchResults} /> : searchResults;\n};\n\nSearchResultsDemo.args = {\n  withAppShell: false\n};\n\nSearchResultsDemo.argTypes = {\n  withAppShell: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,5 @@
+export declare const StyledSearchResults: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ColoredText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    colorVariant: 'warn' | 'urgent';
+}, never>;
+//# sourceMappingURL=SearchResults.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.d.ts","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,yGAE/B,CAAC;AAEF,eAAO,MAAM,WAAW;kBAA+B,MAAM,GAAG,QAAQ;SAWvE,CAAC"}

package/lib/work/SearchResults/SearchResults.styles.js

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledSearchResults = styled.div `
+  height: 100vh;
+`;
+export const ColoredText = styled.span(({ colorVariant, theme: { base: { palette } } }) => {
+    return css `
+      color: ${palette[colorVariant]};
+    `;
+});
+ColoredText.defaultProps = defaultThemeProp;
+//# sourceMappingURL=SearchResults.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.styles.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CACpC,CAAC,EACC,YAAY,EACZ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;eACC,OAAO,CAAC,YAAY,CAAC;KAC/B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledSearchResults = styled.div`\n  height: 100vh;\n`;\n\nexport const ColoredText = styled.span<{ colorVariant: 'warn' | 'urgent' }>(\n  ({\n    colorVariant,\n    theme: {\n      base: { palette }\n    }\n  }) => {\n    return css`\n      color: ${palette[colorVariant]};\n    `;\n  }\n);\n\nColoredText.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/react';
+import { StagesProps } from '@pega/cosmos-react-work';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface StagesStoryProps {
+    caseTitle?: StagesProps['caseTitle'];
+    numberOfStages?: number;
+    currentStage?: number;
+}
+export declare const StagesDemo: Story<StagesStoryProps>;
+//# sourceMappingURL=Stages.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stages/Stages.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,wBAMU;AAEV,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAsD9C,CAAC"}