@pega/cosmos-react-demos 2.0.0

package/lib/work/Details/Details.stories.jsx

@@ -0,0 +1,65 @@
+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 (<Details highlightedFields={[
+            {
+                id: '1',
+                name: 'Statement balance',
+                value: <CurrencyDisplay value='1,289.00' currencyISOCode='USD'/>
+            },
+            {
+                id: '2',
+                name: 'Total balance',
+                value: <CurrencyDisplay value='35,667.00' currencyISOCode='USD'/>
+            },
+            {
+                id: '3',
+                name: 'Available credit',
+                value: <CurrencyDisplay value='5,813.00' currencyISOCode='USD'/>
+            },
+            {
+                id: '4',
+                name: 'Payment due date',
+                value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long'/>
+            },
+            {
+                id: '5',
+                name: 'Available benefits',
+                value: (<URLDisplay value='https://www.google.com/' displayText='View benefits' variant='link'/>)
+            },
+            {
+                id: '6',
+                name: 'Platinum member',
+                value: <BooleanDisplay value/>
+            }
+        ]} regions={[
+            <FieldGroup name='Personal'>
+          <FieldValueList fields={[
+                    { name: 'Home address', value: '12 Higgins Bottom Way, Carnell, NH, 02133' },
+                    { name: 'Primary phone', value: '(617) 374-9637' },
+                    {
+                        name: 'Primary email',
+                        value: <Link href='mailto:joe.smith@example.com'>joe.smith@example.com</Link>
+                    }
+                ]}/>
+        </FieldGroup>,
+            <FieldGroup name='Work'>
+          <FieldValueList fields={[
+                    {
+                        name: 'Work address',
+                        value: '1 Monolith Business Parkway, Milltown, NH, 02333'
+                    },
+                    { name: 'Work phone', value: '(800) 374-2200' },
+                    {
+                        name: 'Work email',
+                        value: <Link href='mailto:jane.smith@example.com'>jane.smith@example.com</Link>
+                    }
+                ]}/>
+        </FieldGroup>
+        ]}/>);
+};
+//# sourceMappingURL=Details.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.stories.jsx","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,CAAC,OAAO,CACN,iBAAiB,CAAC,CAAC;YACjB;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,EAAG;aAClE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,KAAK,EAAG;aACnE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,EAAG;aAClE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAG;aAC/E;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CACL,CAAC,UAAU,CACT,KAAK,CAAC,yBAAyB,CAC/B,WAAW,CAAC,eAAe,CAC3B,OAAO,CAAC,MAAM,EACd,CACH;aACF;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,EAAG;aAChC;SACF,CAAC,CACF,OAAO,CAAC,CAAC;YACP,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CACzB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,2CAA2C,EAAE;oBAC5E,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAClD;wBACE,IAAI,EAAE,eAAe;wBACrB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAAC,qBAAqB,EAAE,IAAI,CAAC;qBAC9E;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;YACb,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CACrB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN;wBACE,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,kDAAkD;qBAC1D;oBACD,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAC/C;wBACE,IAAI,EAAE,YAAY;wBAClB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,sBAAsB,EAAE,IAAI,CAAC;qBAChF;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;SACd,CAAC,EACF,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.jsx

@@ -0,0 +1,39 @@
+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: <PhoneDisplay value='(111) 111-1111'/>
+        },
+        {
+            name: 'Email',
+            value: <EmailDisplay value='turnc@example.com'/>
+        },
+        {
+            name: 'Reports to',
+            value: 'Helen Bush'
+        }
+    ];
+    return (<Glimpse id='turnc' primary='Cindy Turner' secondary={args.showSecondary ? ['Lead Engineer'] : undefined} visual={args.showVisual ? <Avatar size='l' name='Cindy Turner'/> : undefined} fields={args.showFields ? fields : undefined}/>);
+};
+GlimpseDemo.args = {
+    showSecondary: true,
+    showVisual: true,
+    showFields: true
+};
+GlimpseDemo.argTypes = {
+    showSecondary: { control: { type: 'boolean' } },
+    showVisual: { control: { type: 'boolean' } },
+    showFields: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Glimpse.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Glimpse.stories.jsx","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,CAAC,YAAY,CAAC,KAAK,CAAC,gBAAgB,EAAG;SAC/C;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,mBAAmB,EAAG;SAClD;QACD;YACE,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,YAAY;SACpB;KACF,CAAC;IAEF,OAAO,CACL,CAAC,OAAO,CACN,EAAE,CAAC,OAAO,CACV,OAAO,CAAC,cAAc,CACtB,SAAS,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9D,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9E,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,EAC7C,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.jsx

@@ -0,0 +1,96 @@
+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: <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/lib/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 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;;AAuB/C,wBAMU;AAIV,UAAU,uBAAuB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAiBD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CA6O5D,CAAC"}

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

@@ -0,0 +1,205 @@
+import { useEffect, useState, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { Status, OneColumnPage, Text, Flex, defaultThemeProp } 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';
+export default {
+    title: 'Work/SearchResults',
+    component: SearchResults,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const ColoredText = styled.span(({ colorVariant, theme: { base: { palette } } }) => {
+    return css `
+      color: ${palette[colorVariant]};
+    `;
+});
+ColoredText.defaultProps = defaultThemeProp;
+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 <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 = (<>
+      <OneColumnPage title='Search results' a={<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}/>}/>
+
+      <CasePreview open={!!preview} caseId={preview?.id || ''} heading={preview?.title || ''} tabs={{
+            items: [],
+            currentTabId: previewTabId || '',
+            onClick: (id) => setPreviewTabId(id)
+        }} followed summary={preview && <Flex container={{ pad: 2 }}>{preview.description}</Flex>} onBeforeClose={() => {
+            setPreview(undefined);
+        }}/>
+    </>);
+    return args.withAppShell ? <AppShellDemo appHeader main={searchResults}/> : searchResults;
+};
+SearchResultsDemo.args = {
+    withAppShell: false
+};
+SearchResultsDemo.argTypes = {
+    withAppShell: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=SearchResults.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchResults.stories.jsx","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';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Status,\n  OmitStrict,\n  OneColumnPage,\n  Text,\n  Flex,\n  defaultThemeProp\n} 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';\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\nconst 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\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        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/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"}

package/lib/work/Stages/Stages.stories.jsx

@@ -0,0 +1,65 @@
+import { Link } from '@pega/cosmos-react-core';
+import { Stages } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/Stages',
+    component: Stages,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const StagesDemo = (args) => {
+    const stageNames = ['Initial', 'Plan', 'Development', 'Accessibility', 'Review'];
+    const stepNames = [
+        'First step',
+        'Second step that contains much more text to demonstrate overflow handling',
+        <Link href='https://www.pega.com' target='_blank'>
+      Steps can be links as well
+    </Link>
+    ];
+    const dateValue = new Date();
+    const isComplete = (currentStageIndex, stageIndex, index) => {
+        if (stageIndex < currentStageIndex)
+            return true;
+        if (stageIndex === currentStageIndex && index === 0)
+            return true;
+        return false;
+    };
+    const getSteps = (currentStageIndex, stageIndex) => {
+        return stepNames.map((_, i) => {
+            return {
+                name: stepNames[i],
+                complete: isComplete(currentStageIndex, stageIndex, i),
+                id: `${i + 1}`
+            };
+        });
+    };
+    const getStages = (numberOfStages, current = 0) => {
+        return Array.from({ length: numberOfStages || 0 }).map((_, i) => {
+            let stageName = '';
+            if (i <= 4)
+                stageName = stageNames[i];
+            else
+                stageName = `Stage ${i + 1}`;
+            return {
+                name: stageName,
+                id: `stage-${i + 1}`,
+                date: dateValue.setDate(dateValue.getDate() - ((numberOfStages || i) - i)),
+                required: true,
+                complete: i + 1 < current,
+                steps: getSteps(current - 1, i)
+            };
+        });
+    };
+    return (<Stages stages={getStages(args.numberOfStages, args.currentStage)} current={`stage-${args.currentStage}`} caseTitle={args.caseTitle}/>);
+};
+StagesDemo.args = {
+    caseTitle: 'Demo',
+    numberOfStages: 6,
+    currentStage: 3
+};
+StagesDemo.argTypes = {
+    caseTitle: { control: { type: 'text' } },
+    numberOfStages: { control: { type: 'number' } },
+    currentStage: { control: { type: 'number' } }
+};
+//# sourceMappingURL=Stages.stories.jsx.map

package/lib/work/Stages/Stages.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stages/Stages.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Link } from '@pega/cosmos-react-core';\nimport { Stages, StagesProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Stages',\n  component: Stages,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\ninterface StagesStoryProps {\n  caseTitle?: StagesProps['caseTitle'];\n  numberOfStages?: number;\n  currentStage?: number;\n}\n\nexport const StagesDemo: Story<StagesStoryProps> = (args: StagesStoryProps) => {\n  const stageNames = ['Initial', 'Plan', 'Development', 'Accessibility', 'Review'];\n\n  const stepNames = [\n    'First step',\n    'Second step that contains much more text to demonstrate overflow handling',\n    <Link href='https://www.pega.com' target='_blank'>\n      Steps can be links as well\n    </Link>\n  ] as const;\n\n  const dateValue = new Date();\n\n  const isComplete = (currentStageIndex: number, stageIndex: number, index: number) => {\n    if (stageIndex < currentStageIndex) return true;\n    if (stageIndex === currentStageIndex && index === 0) return true;\n    return false;\n  };\n\n  const getSteps = (currentStageIndex: number, stageIndex: number) => {\n    return stepNames.map((_, i) => {\n      return {\n        name: stepNames[i],\n        complete: isComplete(currentStageIndex, stageIndex, i),\n        id: `${i + 1}`\n      };\n    });\n  };\n\n  const getStages = (numberOfStages?: number, current = 0) => {\n    return Array.from({ length: numberOfStages || 0 }).map((_, i) => {\n      let stageName = '';\n\n      if (i <= 4) stageName = stageNames[i];\n      else stageName = `Stage ${i + 1}`;\n\n      return {\n        name: stageName,\n        id: `stage-${i + 1}`,\n        date: dateValue.setDate(dateValue.getDate() - ((numberOfStages || i) - i)),\n        required: true,\n        complete: i + 1 < current,\n        steps: getSteps(current - 1, i)\n      };\n    });\n  };\n\n  return (\n    <Stages\n      stages={getStages(args.numberOfStages, args.currentStage)}\n      current={`stage-${args.currentStage}`}\n      caseTitle={args.caseTitle}\n    />\n  );\n};\n\nStagesDemo.args = {\n  caseTitle: 'Demo',\n  numberOfStages: 6,\n  currentStage: 3\n};\n\nStagesDemo.argTypes = {\n  caseTitle: { control: { type: 'text' } },\n  numberOfStages: { control: { type: 'number' } },\n  currentStage: { control: { type: 'number' } }\n};\n"]}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StakeholdersProps } from '@pega/cosmos-react-work';
+declare const _default: {
+    title: string;
+    component: import("react").FunctionComponent<StakeholdersProps & import("@pega/cosmos-react-core").ForwardProps>;
+};
+export default _default;
+export declare const StakeHoldersDemo: () => JSX.Element;
+//# sourceMappingURL=Stakeholders.stories.d.ts.map