@pega/cosmos-react-demos 3.0.0-dev.4.2 → 3.0.0-dev.5.0

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

@@ -10,56 +10,56 @@ export const DetailsDemo = () => {
                 {
                     id: '1',
                     name: 'Statement balance',
-                    value: _jsx(CurrencyDisplay, { value: 1289.0, currencyISOCode: 'USD' }, void 0)
+                    value: _jsx(CurrencyDisplay, { value: 1289.0, currencyISOCode: 'USD' })
                 },
                 {
                     id: '2',
                     name: 'Total balance',
-                    value: _jsx(CurrencyDisplay, { value: 35667.0, currencyISOCode: 'USD' }, void 0)
+                    value: _jsx(CurrencyDisplay, { value: 35667.0, currencyISOCode: 'USD' })
                 },
                 {
                     id: '3',
                     name: 'Available credit',
-                    value: _jsx(CurrencyDisplay, { value: 5813.0, currencyISOCode: 'USD' }, void 0)
+                    value: _jsx(CurrencyDisplay, { value: 5813.0, currencyISOCode: 'USD' })
                 },
                 {
                     id: '4',
                     name: 'Payment due date',
-                    value: _jsx(DateTimeDisplay, { value: Date.now(), variant: 'datetime', format: 'long' }, void 0)
+                    value: _jsx(DateTimeDisplay, { value: Date.now(), variant: 'datetime', format: 'long' })
                 },
                 {
                     id: '5',
                     name: 'Available benefits',
-                    value: (_jsx(URLDisplay, { value: 'https://www.google.com/', displayText: 'View benefits', variant: 'link' }, void 0))
+                    value: (_jsx(URLDisplay, { value: 'https://www.google.com/', displayText: 'View benefits', variant: 'link' }))
                 },
                 {
                     id: '6',
                     name: 'Platinum member',
-                    value: _jsx(BooleanDisplay, { value: true }, void 0)
+                    value: _jsx(BooleanDisplay, { value: true })
                 }
             ], regions: [
                 _jsx(FieldGroup, { name: 'Personal', children: _jsx(FieldValueList, { fields: [
                             {
                                 name: 'Home address',
-                                value: (_jsx(LocationDisplay, { value: '12 Higgins Bottom Way, Carnell, NH, 02133', variant: 'text' }, void 0))
+                                value: (_jsx(LocationDisplay, { value: '12 Higgins Bottom Way, Carnell, NH, 02133', variant: 'text' }))
                             },
-                            { name: 'Primary phone', value: _jsx(PhoneDisplay, { value: '+15553749637' }, void 0) },
+                            { name: 'Primary phone', value: _jsx(PhoneDisplay, { value: '+15553749637' }) },
                             {
                                 name: 'Primary email',
-                                value: _jsx(EmailDisplay, { value: 'joe.smith@example.com' }, void 0)
+                                value: _jsx(EmailDisplay, { value: 'joe.smith@example.com' })
                             }
-                        ] }, void 0) }, void 0),
+                        ] }) }),
                 _jsx(FieldGroup, { name: 'Work', children: _jsx(FieldValueList, { fields: [
                             {
                                 name: 'Work address',
-                                value: (_jsx(LocationDisplay, { value: '1 Monolith Business Parkway, Milltown, NH, 02333', variant: 'text' }, void 0))
+                                value: (_jsx(LocationDisplay, { value: '1 Monolith Business Parkway, Milltown, NH, 02333', variant: 'text' }))
                             },
-                            { name: 'Work phone', value: _jsx(PhoneDisplay, { value: '+15553742200' }, void 0) },
+                            { name: 'Work phone', value: _jsx(PhoneDisplay, { value: '+15553742200' }) },
                             {
                                 name: 'Work email',
-                                value: _jsx(EmailDisplay, { value: 'jane.smith@example.com' }, void 0)
+                                value: _jsx(EmailDisplay, { value: '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

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  LocationDisplay,\n  MapsContext,\n  PhoneDisplay,\n  EmailDisplay\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  return (\n    <MapsContext.Provider value={{ name: 'google' }}>\n      <Details\n        highlightedFields={[\n          {\n            id: '1',\n            name: 'Statement balance',\n            value: <CurrencyDisplay value={1289.0} currencyISOCode='USD' />\n          },\n          {\n            id: '2',\n            name: 'Total balance',\n            value: <CurrencyDisplay value={35667.0} currencyISOCode='USD' />\n          },\n          {\n            id: '3',\n            name: 'Available credit',\n            value: <CurrencyDisplay value={5813.0} currencyISOCode='USD' />\n          },\n          {\n            id: '4',\n            name: 'Payment due date',\n            value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n          },\n          {\n            id: '5',\n            name: 'Available benefits',\n            value: (\n              <URLDisplay\n                value='https://www.google.com/'\n                displayText='View benefits'\n                variant='link'\n              />\n            )\n          },\n          {\n            id: '6',\n            name: 'Platinum member',\n            value: <BooleanDisplay value />\n          }\n        ]}\n        regions={[\n          <FieldGroup name='Personal'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Home address',\n                  value: (\n                    <LocationDisplay\n                      value='12 Higgins Bottom Way, Carnell, NH, 02133'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Primary phone', value: <PhoneDisplay value='+15553749637' /> },\n                {\n                  name: 'Primary email',\n                  value: <EmailDisplay value='joe.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>,\n          <FieldGroup name='Work'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Work address',\n                  value: (\n                    <LocationDisplay\n                      value='1 Monolith Business Parkway, Milltown, NH, 02333'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Work phone', value: <PhoneDisplay value='+15553742200' /> },\n                {\n                  name: 'Work email',\n                  value: <EmailDisplay value='jane.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>\n        ]}\n      />\n    </MapsContext.Provider>\n  );\n};\n"]}
+{"version":3,"file":"Details.stories.js","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  LocationDisplay,\n  MapsContext,\n  PhoneDisplay,\n  EmailDisplay\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  return (\n    <MapsContext.Provider value={{ name: 'google' }}>\n      <Details\n        highlightedFields={[\n          {\n            id: '1',\n            name: 'Statement balance',\n            value: <CurrencyDisplay value={1289.0} currencyISOCode='USD' />\n          },\n          {\n            id: '2',\n            name: 'Total balance',\n            value: <CurrencyDisplay value={35667.0} currencyISOCode='USD' />\n          },\n          {\n            id: '3',\n            name: 'Available credit',\n            value: <CurrencyDisplay value={5813.0} currencyISOCode='USD' />\n          },\n          {\n            id: '4',\n            name: 'Payment due date',\n            value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n          },\n          {\n            id: '5',\n            name: 'Available benefits',\n            value: (\n              <URLDisplay\n                value='https://www.google.com/'\n                displayText='View benefits'\n                variant='link'\n              />\n            )\n          },\n          {\n            id: '6',\n            name: 'Platinum member',\n            value: <BooleanDisplay value />\n          }\n        ]}\n        regions={[\n          <FieldGroup name='Personal'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Home address',\n                  value: (\n                    <LocationDisplay\n                      value='12 Higgins Bottom Way, Carnell, NH, 02133'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Primary phone', value: <PhoneDisplay value='+15553749637' /> },\n                {\n                  name: 'Primary email',\n                  value: <EmailDisplay value='joe.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>,\n          <FieldGroup name='Work'>\n            <FieldValueList\n              fields={[\n                {\n                  name: 'Work address',\n                  value: (\n                    <LocationDisplay\n                      value='1 Monolith Business Parkway, Milltown, NH, 02333'\n                      variant='text'\n                    />\n                  )\n                },\n                { name: 'Work phone', value: <PhoneDisplay value='+15553742200' /> },\n                {\n                  name: 'Work email',\n                  value: <EmailDisplay value='jane.smith@example.com' />\n                }\n              ]}\n            />\n          </FieldGroup>\n        ]}\n      />\n    </MapsContext.Provider>\n  );\n};\n"]}

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

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

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

@@ -14,18 +14,18 @@ export const GlimpseDemo = (args) => {
         },
         {
             name: 'Phone number',
-            value: _jsx(PhoneDisplay, { value: '(111) 111-1111' }, void 0)
+            value: _jsx(PhoneDisplay, { value: '(111) 111-1111' })
         },
         {
             name: 'Email',
-            value: _jsx(EmailDisplay, { value: 'turnc@example.com' }, void 0)
+            value: _jsx(EmailDisplay, { value: 'turnc@example.com' })
         },
         {
             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));
+    return (_jsx(Glimpse, { id: 'turnc', primary: 'Cindy Turner', secondary: args.showSecondary ? ['Lead Engineer'] : undefined, visual: args.showVisual ? _jsx(Avatar, { size: 'l', name: 'Cindy Turner' }) : undefined, fields: args.showFields ? fields : undefined }));
 };
 GlimpseDemo.args = {
     showSecondary: true,

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

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

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

@@ -63,20 +63,20 @@ export const initialFilters = [
         items: [
             {
                 id: 'blocked',
-                label: _jsx(Status, { variant: 'urgent', children: "Blocked" }, void 0),
+                label: _jsx(Status, { variant: 'urgent', children: "Blocked" }),
                 checked: false,
                 name: 'Blocked'
             },
             {
                 id: 'pending',
-                label: _jsx(Status, { variant: 'pending', children: "Pending" }, void 0),
+                label: _jsx(Status, { variant: 'pending', children: "Pending" }),
                 checked: false,
                 name: 'Pending'
             },
-            { id: 'ready', label: _jsx(Status, { variant: 'info', children: "Ready" }, void 0), checked: false, name: 'Ready' },
+            { id: 'ready', label: _jsx(Status, { variant: 'info', children: "Ready" }), checked: false, name: 'Ready' },
             {
                 id: 'completed',
-                label: _jsx(Status, { variant: 'success', children: "Completed" }, void 0),
+                label: _jsx(Status, { variant: 'success', children: "Completed" }),
                 checked: false,
                 name: 'Completed'
             }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchResults.mocks.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Dispatch, SetStateAction } from 'react';\n\nimport { OmitStrict, Status } from '@pega/cosmos-react-core';\nimport { SearchResultProps, SearchResultsProps } from '@pega/cosmos-react-work';\n\nconst description =\n  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper, arcu eu sodales accumsan, ante purus fermentum dolor, ac convallis urna nisl eget lectus. Vivamus ut neque et turpis posuere pharetra imperdiet id augue. Nullam porta venenatis pharetra. Donec hendrerit, dolor eleifend vulputate tristique, dui dolor consequat ante, a vestibulum mi neque in purus.';\n\ntype ResultMeta = OmitStrict<SearchResultProps, 'link'>;\n\nconst getResultLink = (\n  result: ResultMeta,\n  setPreview: Dispatch<SetStateAction<ResultMeta | undefined>>,\n  setPreviewTabId: Dispatch<SetStateAction<string | undefined>>\n) => {\n  return {\n    href: `projects/${result.id}`,\n    previewable: true,\n    onPreview: () => {\n      setPreview(result);\n      setPreviewTabId(`summary-${result.id}`);\n    }\n  };\n};\n\nexport const getInitialResults = (\n  setPreview: Dispatch<SetStateAction<ResultMeta | undefined>>,\n  setPreviewTabId: Dispatch<SetStateAction<string | undefined>>\n): SearchResultProps[] => {\n  return [\n    {\n      id: 'PROJ-300',\n      title: 'The Art of Building Beautiful Demos',\n      description,\n      meta: ['Completed', 'Low priority', new Date('01/01/21')]\n    },\n    {\n      id: 'PROJ-123',\n      title: 'Be Single Minded',\n      description,\n      meta: ['Blocked', 'Medium priority', new Date('12/31/20')]\n    },\n    {\n      id: 'PROJ-456',\n      title: 'Differentiate Yourself and Attract More Attention Sales and Profits',\n      description,\n      meta: ['Pending', 'High priority', new Date('12/01/20')]\n    },\n    {\n      id: 'PROJ-789',\n      title: 'Importance of the Custom Test',\n      description,\n      meta: ['Completed', 'Medium priority', new Date('01/01/21 08:00:00')]\n    },\n    {\n      id: 'PROJ-100',\n      title: 'Improve Your Business Cards and Enhance Your Sales',\n      description,\n      meta: ['Ready', 'High priority', new Date('12/31/20')]\n    },\n    {\n      id: 'PROJ-200',\n      title: 'How to Write Better Advertising',\n      description,\n      meta: ['Ready', 'Low priority', new Date('12/25/20')]\n    }\n  ].map(result => {\n    return {\n      ...result,\n      link: getResultLink(result, setPreview, setPreviewTabId)\n    };\n  });\n};\n\nexport const initialFilters: SearchResultsProps['filters'] = [\n  {\n    type: 'select',\n    name: 'Status',\n    items: [\n      {\n        id: 'blocked',\n        label: <Status variant='urgent'>Blocked</Status>,\n        checked: false,\n        name: 'Blocked'\n      },\n      {\n        id: 'pending',\n        label: <Status variant='pending'>Pending</Status>,\n        checked: false,\n        name: 'Pending'\n      },\n      { id: 'ready', label: <Status variant='info'>Ready</Status>, checked: false, name: 'Ready' },\n      {\n        id: 'completed',\n        label: <Status variant='success'>Completed</Status>,\n        checked: false,\n        name: 'Completed'\n      }\n    ]\n  },\n  {\n    type: 'select',\n    selectType: 'single-select',\n    name: 'Last updated',\n    items: [\n      { id: 'today', label: 'Today', checked: false, name: 'Today' },\n      { id: 'yesterday', label: 'Yesterday', checked: false, name: 'Yesterday' },\n      { id: '7-days', label: 'Last 7 days', checked: false, name: 'Last 7 days' },\n      { id: '30-days', label: 'Last 30 days', checked: false, name: 'Last 30 days' }\n    ]\n  }\n];\n"]}
+{"version":3,"file":"SearchResults.mocks.js","sourceRoot":"","sources":["../../../src/work/SearchResults/SearchResults.mocks.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAG7D,MAAM,WAAW,GACf,kXAAkX,CAAC;AAIrX,MAAM,aAAa,GAAG,CACpB,MAAkB,EAClB,UAA4D,EAC5D,eAA6D,EAC7D,EAAE;IACF,OAAO;QACL,IAAI,EAAE,YAAY,MAAM,CAAC,EAAE,EAAE;QAC7B,WAAW,EAAE,IAAI;QACjB,SAAS,EAAE,GAAG,EAAE;YACd,UAAU,CAAC,MAAM,CAAC,CAAC;YACnB,eAAe,CAAC,WAAW,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC;QAC1C,CAAC;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,UAA4D,EAC5D,eAA6D,EACxC,EAAE;IACvB,OAAO;QACL;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,qCAAqC;YAC5C,WAAW;YACX,IAAI,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;SAC1D;QACD;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,kBAAkB;YACzB,WAAW;YACX,IAAI,EAAE,CAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;SAC3D;QACD;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,qEAAqE;YAC5E,WAAW;YACX,IAAI,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;SACzD;QACD;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,+BAA+B;YACtC,WAAW;YACX,IAAI,EAAE,CAAC,WAAW,EAAE,iBAAiB,EAAE,IAAI,IAAI,CAAC,mBAAmB,CAAC,CAAC;SACtE;QACD;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,oDAAoD;YAC3D,WAAW;YACX,IAAI,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;SACvD;QACD;YACE,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,iCAAiC;YACxC,WAAW;YACX,IAAI,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;SACtD;KACF,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;QACb,OAAO;YACL,GAAG,MAAM;YACT,IAAI,EAAE,aAAa,CAAC,MAAM,EAAE,UAAU,EAAE,eAAe,CAAC;SACzD,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAkC;IAC3D;QACE,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,SAAS;gBACb,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,wBAAiB;gBAChD,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,SAAS;aAChB;YACD;gBACE,EAAE,EAAE,SAAS;gBACb,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,wBAAiB;gBACjD,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,SAAS;aAChB;YACD,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,sBAAe,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;YAC5F;gBACE,EAAE,EAAE,WAAW;gBACf,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,0BAAmB;gBACnD,OAAO,EAAE,KAAK;gBACd,IAAI,EAAE,WAAW;aAClB;SACF;KACF;IACD;QACE,IAAI,EAAE,QAAQ;QACd,UAAU,EAAE,eAAe;QAC3B,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE;YAC9D,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE;YAC1E,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE;YAC3E,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE;SAC/E;KACF;CACF,CAAC","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.js

@@ -150,19 +150,19 @@ export const SearchResultsDemo = (args) => {
                     }
                     switch (item) {
                         case 'Completed':
-                            return _jsx(Status, { variant: 'success', children: "Completed" }, void 0);
+                            return _jsx(Status, { variant: 'success', children: "Completed" });
                         case 'Ready':
-                            return _jsx(Status, { variant: 'info', children: "Ready" }, void 0);
+                            return _jsx(Status, { variant: 'info', children: "Ready" });
                         case 'Pending':
-                            return _jsx(Status, { variant: 'pending', children: "Pending" }, void 0);
+                            return _jsx(Status, { variant: 'pending', children: "Pending" });
                         case 'Blocked':
-                            return _jsx(Status, { variant: 'urgent', children: "Blocked" }, void 0);
+                            return _jsx(Status, { variant: 'urgent', children: "Blocked" });
                         case 'Low priority':
-                            return _jsx(Text, { variant: 'secondary', children: "Low priority" }, void 0);
+                            return _jsx(Text, { variant: 'secondary', children: "Low priority" });
                         case 'Medium priority':
-                            return (_jsx(Text, { as: ColoredText, colorVariant: 'warn', variant: 'secondary', children: "Medium priority" }, void 0));
+                            return (_jsx(Text, { as: ColoredText, colorVariant: 'warn', variant: 'secondary', children: "Medium priority" }));
                         case 'High priority':
-                            return (_jsx(Text, { as: ColoredText, colorVariant: 'urgent', variant: 'secondary', children: "High priority" }, void 0));
+                            return (_jsx(Text, { as: ColoredText, colorVariant: 'urgent', variant: 'secondary', children: "High priority" }));
                         default:
                             return item;
                     }
@@ -174,14 +174,14 @@ export const SearchResultsDemo = (args) => {
     };
     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: {
+                        : renderForDisplay(results), searchInputProps: { value: search, onSearchChange: setSearch }, count: results.length, filters: filters, onFilterChange: handleFilterChange, onClearAllFilters: clearAllFilters, onClearFilter: handleClearFilter, onShowMore: limit < results.length ? handleShowMore : undefined }) }), _jsx(CasePreview, { open: !!preview, caseId: preview?.id || '', heading: preview?.title || '', tabs: {
                     items: [],
                     currentTabId: previewTabId || '',
                     onClick: (id) => setPreviewTabId(id)
-                }, followed: true, summary: preview && _jsx(Flex, { container: { pad: 2 }, children: preview.description }, void 0), onBeforeClose: () => {
+                }, followed: true, summary: preview && _jsx(Flex, { container: { pad: 2 }, children: preview.description }), onBeforeClose: () => {
                     setPreview(undefined);
-                } }, void 0)] }, void 0));
-    return args.withAppShell ? _jsx(AppShellDemo, { appHeader: true, main: searchResults }, void 0) : searchResults;
+                } })] }));
+    return args.withAppShell ? _jsx(AppShellDemo, { appHeader: true, main: searchResults }) : searchResults;
 };
 SearchResultsDemo.args = {
     withAppShell: false

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

@@ -1 +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';\n\nimport { AppShellDemo } from '../../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"]}
+{"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';\n\nimport { AppShellDemo } from '../../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/Stages/Stages.stories.js

@@ -13,7 +13,7 @@ export const StagesDemo = (args) => {
     const stepNames = [
         'First step',
         'Second step that contains much more text to demonstrate overflow handling',
-        _jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "Steps can be links as well" }, void 0)
+        _jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "Steps can be links as well" })
     ];
     const dateValue = new Date();
     const isComplete = (currentStageIndex, stageIndex, index) => {
@@ -49,7 +49,7 @@ export const StagesDemo = (args) => {
             };
         });
     };
-    return (_jsx(Stages, { stages: getStages(args.numberOfStages, args.currentStage), current: `stage-${args.currentStage}`, caseTitle: args.caseTitle }, void 0));
+    return (_jsx(Stages, { stages: getStages(args.numberOfStages, args.currentStage), current: `stage-${args.currentStage}`, caseTitle: args.caseTitle }));
 };
 StagesDemo.args = {
     caseTitle: 'Demo',

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

@@ -1 +1 @@
-{"version":3,"file":"Stages.stories.js","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"]}
+{"version":3,"file":"Stages.stories.js","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.mocks.js

@@ -16,8 +16,8 @@ export const mockRoles = Array.from({ length: 3 }, (_, i) => ({
  * The return content of this will likely be a dynamically rendered view.
  */
 export const AddAndEditForm = ({ selectedRoleName, firstName, lastName, email }) => {
-    const inputs = (_jsxs(Grid, { container: { cols: '1fr', gap: 2 }, children: [_jsx(Input, { label: 'First name', required: true, defaultValue: firstName }, void 0), _jsx(Input, { label: 'Last name', required: true, defaultValue: lastName }, void 0), _jsx(Input, { type: 'email', label: 'Email', required: true, defaultValue: email }, void 0), _jsx(Input, { label: 'Job title', defaultValue: firstName ? 'Vice president' : undefined }, void 0)] }, void 0));
-    return selectedRoleName ? (_jsx(FieldGroup, { name: `Fields for: ${selectedRoleName}`, children: inputs }, void 0)) : (inputs);
+    const inputs = (_jsxs(Grid, { container: { cols: '1fr', gap: 2 }, children: [_jsx(Input, { label: 'First name', required: true, defaultValue: firstName }), _jsx(Input, { label: 'Last name', required: true, defaultValue: lastName }), _jsx(Input, { type: 'email', label: 'Email', required: true, defaultValue: email }), _jsx(Input, { label: 'Job title', defaultValue: firstName ? 'Vice president' : undefined })] }));
+    return selectedRoleName ? (_jsx(FieldGroup, { name: `Fields for: ${selectedRoleName}`, children: inputs })) : (inputs);
 };
 export const useMockStakeholders = (cb) => {
     const [mockStakeholders, setMockStakeholders] = useState([]);

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.mocks.js","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAO3E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AAEtF,4CAA4C;AAC5C,MAAM,KAAK,GAAG,EAAE,CAAC;AAEjB,0BAA0B;AAC1B,MAAM,CAAC,MAAM,SAAS,GAAoD,KAAK,CAAC,IAAI,CAClF,EAAE,MAAM,EAAE,CAAC,EAAE,EACb,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;IACrB,WAAW,EAAE,iCACX,CAAC,GAAG,CACN,6GAA6G;CAC9G,CAAC,CACH,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aACtC,KAAC,KAAK,IAAC,KAAK,EAAC,YAAY,EAAC,QAAQ,QAAC,YAAY,EAAE,SAAS,WAAI,EAC9D,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,QAAC,YAAY,EAAE,QAAQ,WAAI,EAC5D,KAAC,KAAK,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,QAAC,YAAY,EAAE,KAAK,WAAI,EAClE,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,WAAI,YAC9E,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,KAAC,UAAU,IAAC,IAAI,EAAE,eAAe,gBAAgB,EAAE,YAAG,MAAM,WAAc,CAC3E,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,EAAc,EACgE,EAAE;IAChF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IACtF,yBAAyB;IACzB,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,CACpC,GAAG,EAAE;QACH,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAClC,EAAE,EAAE,CAAC;IACP,CAAC,EACD,EAAE,KAAK,EAAE,CACV,CAAC;IAEF,OAAO;QACL,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACjC,OAAO,EAAE,GAAG,WAAW,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACpE,CAAC,CAAC;QACF,mBAAmB;KACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Dispatch, SetStateAction, useState } from 'react';\n\nimport { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';\nimport { Role, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport { useMockListData } from '../../core/SummaryList/SummaryList.mocks';\n\ninterface MockStakeholderObject extends Stakeholder {\n  role?: Role;\n  data?: StakeholdersProps['form']['rendererProps'];\n}\n\nexport const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));\n\n// Mock total count of Stakeholder resource.\nconst count = 20;\n\n// Mock stakeholder roles.\nexport const mockRoles: NonNullable<StakeholdersProps['form']>['roles'] = Array.from(\n  { length: 3 },\n  (_, i) => ({\n    name: `Role-${i + 1}`,\n    description: `This is a description of Role-${\n      i + 1\n    }. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet dolor a mauris imperdiet convallis.`\n  })\n);\n\n/**\n * A component that will be rendered internally by Stakeholders when adding or editing.\n * If roles exists, the component will be passed the selected role as a prop.\n * The return content of this will likely be a dynamically rendered view.\n */\nexport const AddAndEditForm = ({\n  selectedRoleName,\n  firstName,\n  lastName,\n  email\n}: {\n  // Cosmos will pass the selectedRoleName\n  selectedRoleName?: Role['name'];\n  // Any prop passed to rendererProps will be forwarded here\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n}) => {\n  const inputs = (\n    <Grid container={{ cols: '1fr', gap: 2 }}>\n      <Input label='First name' required defaultValue={firstName} />\n      <Input label='Last name' required defaultValue={lastName} />\n      <Input type='email' label='Email' required defaultValue={email} />\n      <Input label='Job title' defaultValue={firstName ? 'Vice president' : undefined} />\n    </Grid>\n  );\n\n  return selectedRoleName ? (\n    <FieldGroup name={`Fields for: ${selectedRoleName}`}>{inputs}</FieldGroup>\n  ) : (\n    inputs\n  );\n};\n\nexport const useMockStakeholders = (\n  cb: () => void\n): [MockStakeholderObject[], Dispatch<SetStateAction<MockStakeholderObject[]>>] => {\n  const [mockStakeholders, setMockStakeholders] = useState<MockStakeholderObject[]>([]);\n  // Grab some mock data...\n  const [mockListData] = useMockListData(\n    () => {\n      setMockStakeholders(mockListData);\n      cb();\n    },\n    { count }\n  );\n\n  return [\n    mockStakeholders.map(stakeholder => {\n      return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };\n    }),\n    setMockStakeholders\n  ];\n};\n"]}
+{"version":3,"file":"Stakeholders.mocks.js","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4B,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGlE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAO3E,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AAEtF,4CAA4C;AAC5C,MAAM,KAAK,GAAG,EAAE,CAAC;AAEjB,0BAA0B;AAC1B,MAAM,CAAC,MAAM,SAAS,GAAoD,KAAK,CAAC,IAAI,CAClF,EAAE,MAAM,EAAE,CAAC,EAAE,EACb,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;IACrB,WAAW,EAAE,iCACX,CAAC,GAAG,CACN,6GAA6G;CAC9G,CAAC,CACH,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,aACtC,KAAC,KAAK,IAAC,KAAK,EAAC,YAAY,EAAC,QAAQ,QAAC,YAAY,EAAE,SAAS,GAAI,EAC9D,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,QAAC,YAAY,EAAE,QAAQ,GAAI,EAC5D,KAAC,KAAK,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,QAAC,YAAY,EAAE,KAAK,GAAI,EAClE,KAAC,KAAK,IAAC,KAAK,EAAC,WAAW,EAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,GAAI,IAC9E,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,KAAC,UAAU,IAAC,IAAI,EAAE,eAAe,gBAAgB,EAAE,YAAG,MAAM,GAAc,CAC3E,CAAC,CAAC,CAAC,CACF,MAAM,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,EAAc,EACgE,EAAE;IAChF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IACtF,yBAAyB;IACzB,MAAM,CAAC,YAAY,CAAC,GAAG,eAAe,CACpC,GAAG,EAAE;QACH,mBAAmB,CAAC,YAAY,CAAC,CAAC;QAClC,EAAE,EAAE,CAAC;IACP,CAAC,EACD,EAAE,KAAK,EAAE,CACV,CAAC;IAEF,OAAO;QACL,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACjC,OAAO,EAAE,GAAG,WAAW,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;QACpE,CAAC,CAAC;QACF,mBAAmB;KACpB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Dispatch, SetStateAction, useState } from 'react';\n\nimport { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';\nimport { Role, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport { useMockListData } from '../../core/SummaryList/SummaryList.mocks';\n\ninterface MockStakeholderObject extends Stakeholder {\n  role?: Role;\n  data?: StakeholdersProps['form']['rendererProps'];\n}\n\nexport const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));\n\n// Mock total count of Stakeholder resource.\nconst count = 20;\n\n// Mock stakeholder roles.\nexport const mockRoles: NonNullable<StakeholdersProps['form']>['roles'] = Array.from(\n  { length: 3 },\n  (_, i) => ({\n    name: `Role-${i + 1}`,\n    description: `This is a description of Role-${\n      i + 1\n    }. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet dolor a mauris imperdiet convallis.`\n  })\n);\n\n/**\n * A component that will be rendered internally by Stakeholders when adding or editing.\n * If roles exists, the component will be passed the selected role as a prop.\n * The return content of this will likely be a dynamically rendered view.\n */\nexport const AddAndEditForm = ({\n  selectedRoleName,\n  firstName,\n  lastName,\n  email\n}: {\n  // Cosmos will pass the selectedRoleName\n  selectedRoleName?: Role['name'];\n  // Any prop passed to rendererProps will be forwarded here\n  firstName?: string;\n  lastName?: string;\n  email?: string;\n}) => {\n  const inputs = (\n    <Grid container={{ cols: '1fr', gap: 2 }}>\n      <Input label='First name' required defaultValue={firstName} />\n      <Input label='Last name' required defaultValue={lastName} />\n      <Input type='email' label='Email' required defaultValue={email} />\n      <Input label='Job title' defaultValue={firstName ? 'Vice president' : undefined} />\n    </Grid>\n  );\n\n  return selectedRoleName ? (\n    <FieldGroup name={`Fields for: ${selectedRoleName}`}>{inputs}</FieldGroup>\n  ) : (\n    inputs\n  );\n};\n\nexport const useMockStakeholders = (\n  cb: () => void\n): [MockStakeholderObject[], Dispatch<SetStateAction<MockStakeholderObject[]>>] => {\n  const [mockStakeholders, setMockStakeholders] = useState<MockStakeholderObject[]>([]);\n  // Grab some mock data...\n  const [mockListData] = useMockListData(\n    () => {\n      setMockStakeholders(mockListData);\n      cb();\n    },\n    { count }\n  );\n\n  return [\n    mockStakeholders.map(stakeholder => {\n      return { ...stakeholder, role: stakeholder.role ?? mockRoles[0] };\n    }),\n    setMockStakeholders\n  ];\n};\n"]}

package/lib/work/Stakeholders/Stakeholders.stories.js

@@ -106,6 +106,6 @@ export const StakeHoldersDemo = () => {
             setMode('viewAll');
             setViewAllLoading(true);
             mockNetworkReq().then(() => setViewAllLoading(false));
-        }, viewAll: viewAll }, void 0));
+        }, viewAll: viewAll }));
 };
 //# sourceMappingURL=Stakeholders.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.stories.js","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta } from '@storybook/react';\n\nimport { createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport {\n  AddAndEditForm,\n  mockNetworkReq,\n  mockRoles,\n  useMockStakeholders\n} from './Stakeholders.mocks';\n\nexport default {\n  title: 'Work/Stakeholders',\n  component: Stakeholders\n} as Meta;\n\nexport const StakeHoldersDemo = () => {\n  const [loading, setLoading] = useState(true);\n  const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n  const [editing, setEditing] = useState<Stakeholder['id'] | null>(null);\n  const [formLoading, setFormLoading] = useState(false);\n  const [viewAllLoading, setViewAllLoading] = useState(false);\n  const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n\n  // Grab some mock data...\n  const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {\n    setLoading(false);\n  });\n\n  const [editData, setEditData] = useState<\n    StakeholdersProps['form']['rendererProps'] | undefined\n  >();\n\n  // Merges built-in available actions with stakeholder objects.\n  const addActions = useCallback(\n    (items: Stakeholder[]) => {\n      return items.map(stakeholder => {\n        return {\n          ...stakeholder,\n          onEdit: () => {\n            setFormLoading(true);\n            setEditing(stakeholder.id);\n            setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);\n            mockNetworkReq().then(() => setFormLoading(false));\n          },\n          onRemove: () => {\n            setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));\n          }\n        };\n      });\n    },\n    [mockStakeholders]\n  );\n\n  const form: StakeholdersProps['form'] = useMemo(() => {\n    return {\n      // Set this to true when fetching view metadata for the form or during submit validation.\n      loading: formLoading,\n      // Represents \"available\" roles for a stakeholder. Set to undefined when choosing not to present them as options.\n      roles: mode === 'add' ? mockRoles : undefined,\n      // Represents the current role of a stakeholder if they have one. When undefined the first role in the roles array with be selected in the UI.\n      currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,\n      /**\n       * A function that will be invoked by React's createElement. If only a simple function is needed then an inline arrow is ok.\n       * If local state(hooks) is desired best to define a stable component definition outside of the parent component's function body.\n       */\n      renderer: AddAndEditForm,\n      rendererProps: editData,\n      onSubmit: ({ selectedRoleName, closeForm }) => {\n        setFormLoading(true);\n        action(`The selected role is: ${selectedRoleName}`);\n        // Create or update the stakeholder resource.\n        mockNetworkReq().then(closeForm);\n      },\n      onDismiss: ({ closeForm }) => {\n        closeForm();\n      },\n      onAfterClose: () => {\n        // Clean up loading state when the form is closed.\n        setFormLoading(false);\n        setEditing(null);\n        setEditData(undefined);\n        setMode(undefined);\n      }\n    };\n  }, [mode, formLoading, mockRoles, editing, editData]);\n\n  const viewAll: StakeholdersProps['viewAll'] = useMemo(() => {\n    let viewAllItems = mockStakeholders;\n\n    // When the user has entered a search value we can filter the array or api request.\n    if (viewAllSearchValue) {\n      // For client side searches cosmos offers utils such as createStringMatcher for creating RegExp with params.\n      const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');\n      // Asserting as string since, in this demo, primary is a string. But type is a non nullable ReactNode.\n      viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary as string));\n    }\n\n    return {\n      // Set this to true when fetching data for the view all modal.\n      loading: viewAllLoading,\n      // Even when loading is true this must be an array, empty or not.\n      items: addActions(viewAllItems),\n      // The search string will be handed back as the arg, pass a state setter and filter off of that.\n      onSearch: setViewAllSearchValue,\n      onAfterClose: () => {\n        // Clean up loading state when the modal is closed.\n        if (viewAllLoading) setViewAllLoading(false);\n      }\n    };\n  }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);\n\n  useEffect(() => {\n    // Orchestrate based on mode state if needed.\n  }, [mode]);\n\n  useEffect(() => {\n    // Orchestrate based on editing state if needed.\n  }, [editing]);\n\n  return (\n    <Stakeholders\n      loading={loading}\n      items={useMemo(\n        () => addActions(mockStakeholders.slice(0, 3)),\n        [addActions, mockStakeholders]\n      )}\n      count={loading ? undefined : mockStakeholders.length}\n      onAddNew={() => {\n        setMode('add');\n        setFormLoading(true);\n        mockNetworkReq().then(() => setFormLoading(false));\n      }}\n      form={form}\n      onViewAll={() => {\n        setMode('viewAll');\n        setViewAllLoading(true);\n        mockNetworkReq().then(() => setViewAllLoading(false));\n      }}\n      viewAll={viewAll}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Stakeholders.stories.js","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta } from '@storybook/react';\n\nimport { createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders, StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport {\n  AddAndEditForm,\n  mockNetworkReq,\n  mockRoles,\n  useMockStakeholders\n} from './Stakeholders.mocks';\n\nexport default {\n  title: 'Work/Stakeholders',\n  component: Stakeholders\n} as Meta;\n\nexport const StakeHoldersDemo = () => {\n  const [loading, setLoading] = useState(true);\n  const [mode, setMode] = useState<undefined | 'add' | 'viewAll'>();\n  const [editing, setEditing] = useState<Stakeholder['id'] | null>(null);\n  const [formLoading, setFormLoading] = useState(false);\n  const [viewAllLoading, setViewAllLoading] = useState(false);\n  const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n\n  // Grab some mock data...\n  const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {\n    setLoading(false);\n  });\n\n  const [editData, setEditData] = useState<\n    StakeholdersProps['form']['rendererProps'] | undefined\n  >();\n\n  // Merges built-in available actions with stakeholder objects.\n  const addActions = useCallback(\n    (items: Stakeholder[]) => {\n      return items.map(stakeholder => {\n        return {\n          ...stakeholder,\n          onEdit: () => {\n            setFormLoading(true);\n            setEditing(stakeholder.id);\n            setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);\n            mockNetworkReq().then(() => setFormLoading(false));\n          },\n          onRemove: () => {\n            setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));\n          }\n        };\n      });\n    },\n    [mockStakeholders]\n  );\n\n  const form: StakeholdersProps['form'] = useMemo(() => {\n    return {\n      // Set this to true when fetching view metadata for the form or during submit validation.\n      loading: formLoading,\n      // Represents \"available\" roles for a stakeholder. Set to undefined when choosing not to present them as options.\n      roles: mode === 'add' ? mockRoles : undefined,\n      // Represents the current role of a stakeholder if they have one. When undefined the first role in the roles array with be selected in the UI.\n      currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,\n      /**\n       * A function that will be invoked by React's createElement. If only a simple function is needed then an inline arrow is ok.\n       * If local state(hooks) is desired best to define a stable component definition outside of the parent component's function body.\n       */\n      renderer: AddAndEditForm,\n      rendererProps: editData,\n      onSubmit: ({ selectedRoleName, closeForm }) => {\n        setFormLoading(true);\n        action(`The selected role is: ${selectedRoleName}`);\n        // Create or update the stakeholder resource.\n        mockNetworkReq().then(closeForm);\n      },\n      onDismiss: ({ closeForm }) => {\n        closeForm();\n      },\n      onAfterClose: () => {\n        // Clean up loading state when the form is closed.\n        setFormLoading(false);\n        setEditing(null);\n        setEditData(undefined);\n        setMode(undefined);\n      }\n    };\n  }, [mode, formLoading, mockRoles, editing, editData]);\n\n  const viewAll: StakeholdersProps['viewAll'] = useMemo(() => {\n    let viewAllItems = mockStakeholders;\n\n    // When the user has entered a search value we can filter the array or api request.\n    if (viewAllSearchValue) {\n      // For client side searches cosmos offers utils such as createStringMatcher for creating RegExp with params.\n      const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');\n      // Asserting as string since, in this demo, primary is a string. But type is a non nullable ReactNode.\n      viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary as string));\n    }\n\n    return {\n      // Set this to true when fetching data for the view all modal.\n      loading: viewAllLoading,\n      // Even when loading is true this must be an array, empty or not.\n      items: addActions(viewAllItems),\n      // The search string will be handed back as the arg, pass a state setter and filter off of that.\n      onSearch: setViewAllSearchValue,\n      onAfterClose: () => {\n        // Clean up loading state when the modal is closed.\n        if (viewAllLoading) setViewAllLoading(false);\n      }\n    };\n  }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);\n\n  useEffect(() => {\n    // Orchestrate based on mode state if needed.\n  }, [mode]);\n\n  useEffect(() => {\n    // Orchestrate based on editing state if needed.\n  }, [editing]);\n\n  return (\n    <Stakeholders\n      loading={loading}\n      items={useMemo(\n        () => addActions(mockStakeholders.slice(0, 3)),\n        [addActions, mockStakeholders]\n      )}\n      count={loading ? undefined : mockStakeholders.length}\n      onAddNew={() => {\n        setMode('add');\n        setFormLoading(true);\n        mockNetworkReq().then(() => setFormLoading(false));\n      }}\n      form={form}\n      onViewAll={() => {\n        setMode('viewAll');\n        setViewAllLoading(true);\n        mockNetworkReq().then(() => setViewAllLoading(false));\n      }}\n      viewAll={viewAll}\n    />\n  );\n};\n"]}

package/lib/work/Tags/Tags.stories.js

@@ -47,7 +47,7 @@ export const TagsDemo = (args) => {
             }
         });
     };
-    return (_jsx(Tags, { tags: tags, availableTags: availableTags, loading: loading, error: args.displayRetry ? { message: args.error, onRetry: () => { } } : args.error, onSearch: (query) => setFilterValue(query), onEditTags: handleEditTags }, void 0));
+    return (_jsx(Tags, { tags: tags, availableTags: availableTags, loading: loading, error: args.displayRetry ? { message: args.error, onRetry: () => { } } : args.error, onSearch: (query) => setFilterValue(query), onEditTags: handleEditTags }));
 };
 TagsDemo.args = {
     error: '',

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

@@ -1 +1 @@
-{"version":3,"file":"Tags.stories.js","sourceRoot":"","sources":["../../../src/work/Tags/Tags.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { Tags, SelectedTag, TagsProps } from '@pega/cosmos-react-work';\n\nimport { addNewMockTag, getMockAvailableTags } from './Tags.mocks';\n\nexport default {\n  title: 'Work/Tags',\n  component: Tags\n} as Meta;\n\ninterface TagsStoryProps {\n  error?: string;\n  displayRetry?: boolean;\n  editError?: string;\n}\n\nexport const TagsDemo: Story<TagsStoryProps> = (args: TagsStoryProps) => {\n  const [loading, setLoading] = useState(true);\n  const [availableTags, setAvailableTags] = useState<TagsProps['availableTags']>();\n  const [filterValue, setFilterValue] = useState('');\n  const [tags, setTags] = useState<TagsProps['tags']>([\n    'Pega',\n    'Cosmos',\n    'Design_system',\n    'animal',\n    'bread',\n    'hour',\n    'music',\n    'paint',\n    'space',\n    'weather'\n  ]);\n\n  useEffect(() => {\n    const allTags = getMockAvailableTags();\n    setAvailableTags(filterValue ? allTags?.filter(tag => tag.startsWith(filterValue)) : []);\n  }, [filterValue]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setLoading(false);\n    }, 1000);\n  }, []);\n\n  const handleEditTags = (selectedTags: SelectedTag[]) => {\n    return new Promise<void>((resolve, reject) => {\n      if (args.editError) {\n        reject(new Error(args.editError));\n      } else {\n        setTags(\n          selectedTags.map(tag => {\n            if (tag.newTag) {\n              addNewMockTag(tag.text);\n            }\n            return tag.text;\n          })\n        );\n        resolve();\n      }\n    });\n  };\n\n  return (\n    <Tags\n      tags={tags}\n      availableTags={availableTags}\n      loading={loading}\n      error={args.displayRetry ? { message: args.error, onRetry: () => {} } : args.error}\n      onSearch={(query: string) => setFilterValue(query)}\n      onEditTags={handleEditTags}\n    />\n  );\n};\n\nTagsDemo.args = {\n  error: '',\n  displayRetry: false,\n  editError: ''\n};\n\nTagsDemo.argTypes = {\n  error: { control: { type: 'text' } },\n  displayRetry: { control: { type: 'boolean' } },\n  editError: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Tags.stories.js","sourceRoot":"","sources":["../../../src/work/Tags/Tags.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { Tags, SelectedTag, TagsProps } from '@pega/cosmos-react-work';\n\nimport { addNewMockTag, getMockAvailableTags } from './Tags.mocks';\n\nexport default {\n  title: 'Work/Tags',\n  component: Tags\n} as Meta;\n\ninterface TagsStoryProps {\n  error?: string;\n  displayRetry?: boolean;\n  editError?: string;\n}\n\nexport const TagsDemo: Story<TagsStoryProps> = (args: TagsStoryProps) => {\n  const [loading, setLoading] = useState(true);\n  const [availableTags, setAvailableTags] = useState<TagsProps['availableTags']>();\n  const [filterValue, setFilterValue] = useState('');\n  const [tags, setTags] = useState<TagsProps['tags']>([\n    'Pega',\n    'Cosmos',\n    'Design_system',\n    'animal',\n    'bread',\n    'hour',\n    'music',\n    'paint',\n    'space',\n    'weather'\n  ]);\n\n  useEffect(() => {\n    const allTags = getMockAvailableTags();\n    setAvailableTags(filterValue ? allTags?.filter(tag => tag.startsWith(filterValue)) : []);\n  }, [filterValue]);\n\n  useEffect(() => {\n    setTimeout(() => {\n      setLoading(false);\n    }, 1000);\n  }, []);\n\n  const handleEditTags = (selectedTags: SelectedTag[]) => {\n    return new Promise<void>((resolve, reject) => {\n      if (args.editError) {\n        reject(new Error(args.editError));\n      } else {\n        setTags(\n          selectedTags.map(tag => {\n            if (tag.newTag) {\n              addNewMockTag(tag.text);\n            }\n            return tag.text;\n          })\n        );\n        resolve();\n      }\n    });\n  };\n\n  return (\n    <Tags\n      tags={tags}\n      availableTags={availableTags}\n      loading={loading}\n      error={args.displayRetry ? { message: args.error, onRetry: () => {} } : args.error}\n      onSearch={(query: string) => setFilterValue(query)}\n      onEditTags={handleEditTags}\n    />\n  );\n};\n\nTagsDemo.args = {\n  error: '',\n  displayRetry: false,\n  editError: ''\n};\n\nTagsDemo.argTypes = {\n  error: { control: { type: 'text' } },\n  displayRetry: { control: { type: 'boolean' } },\n  editError: { control: { type: 'text' } }\n};\n"]}

package/lib/work/Tasks/TaskList.stories.js

@@ -9,10 +9,10 @@ export const TaskListDemo = () => {
     const items = [
         {
             name: 'Send references',
-            meta: _jsx(MetaList, { items: [' Due in 1d', 'Priority 95'] }, void 0),
-            avatar: _jsx(Avatar, { name: 'James Gregory' }, void 0)
+            meta: _jsx(MetaList, { items: [' Due in 1d', 'Priority 95'] }),
+            avatar: _jsx(Avatar, { name: 'James Gregory' })
         }
     ];
-    return _jsx(TaskList, { items: items }, void 0);
+    return _jsx(TaskList, { items: items });
 };
 //# sourceMappingURL=TaskList.stories.js.map

package/lib/work/Tasks/TaskList.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskList.stories.js","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAU,GAAG,EAAE;IACtC,MAAM,KAAK,GAAoB;QAC7B;YACE,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,WAAI;YACxD,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,eAAe,WAAG;SACxC;KACF,CAAC;IAEF,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,WAAI,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import { Story, Meta } from '@storybook/react';\n\nimport { MetaList, Avatar } from '@pega/cosmos-react-core';\nimport { TaskList, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/TaskList',\n  component: TaskList\n} as Meta;\n\nexport const TaskListDemo: Story = () => {\n  const items: TaskItemProps[] = [\n    {\n      name: 'Send references',\n      meta: <MetaList items={[' Due in 1d', 'Priority 95']} />,\n      avatar: <Avatar name='James Gregory' />\n    }\n  ];\n\n  return <TaskList items={items} />;\n};\n"]}
+{"version":3,"file":"TaskList.stories.js","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAElE,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAU,GAAG,EAAE;IACtC,MAAM,KAAK,GAAoB;QAC7B;YACE,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,GAAI;YACxD,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,eAAe,GAAG;SACxC;KACF,CAAC;IAEF,OAAO,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import { Story, Meta } from '@storybook/react';\n\nimport { MetaList, Avatar } from '@pega/cosmos-react-core';\nimport { TaskList, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/TaskList',\n  component: TaskList\n} as Meta;\n\nexport const TaskListDemo: Story = () => {\n  const items: TaskItemProps[] = [\n    {\n      name: 'Send references',\n      meta: <MetaList items={[' Due in 1d', 'Priority 95']} />,\n      avatar: <Avatar name='James Gregory' />\n    }\n  ];\n\n  return <TaskList items={items} />;\n};\n"]}