@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

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

@@ -1,70 +1,59 @@
-import { CurrencyDisplay, DateTimeDisplay, URLDisplay, BooleanDisplay, FieldGroup, FieldValueList, LocationDisplay, MapsContext, PhoneDisplay, EmailDisplay } from '@pega/cosmos-react-core';
-import { Details } from '@pega/cosmos-react-work';
+import { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
+import { Details, DetailsContext } from '@pega/cosmos-react-work';
 export default {
     title: 'Work/Details',
-    component: Details
+    component: Details,
+    parameters: {
+        layout: 'centered'
+    }
 };
 export const DetailsDemo = () => {
-    return (<MapsContext.Provider value={{ name: 'google' }}>
-      <Details highlightedFields={[
-            {
-                id: '1',
-                name: 'Statement balance',
-                value: <CurrencyDisplay value='1289.00' currencyISOCode='USD'/>
-            },
-            {
-                id: '2',
-                name: 'Total balance',
-                value: <CurrencyDisplay value='35667.00' currencyISOCode='USD'/>
-            },
-            {
-                id: '3',
-                name: 'Available credit',
-                value: <CurrencyDisplay value='5813.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: (<LocationDisplay value='12 Higgins Bottom Way, Carnell, NH, 02133' variant='text'/>)
-                    },
-                    { name: 'Primary phone', value: <PhoneDisplay value='+15553749637'/> },
-                    {
-                        name: 'Primary email',
-                        value: <EmailDisplay value='joe.smith@example.com'/>
-                    }
-                ]}/>
-          </FieldGroup>,
-            <FieldGroup name='Work'>
-            <FieldValueList fields={[
-                    {
-                        name: 'Work address',
-                        value: (<LocationDisplay value='1 Monolith Business Parkway, Milltown, NH, 02333' variant='text'/>)
-                    },
-                    { name: 'Work phone', value: <PhoneDisplay value='+15553742200'/> },
-                    {
-                        name: 'Work email',
-                        value: <EmailDisplay value='jane.smith@example.com'/>
-                    }
-                ]}/>
-          </FieldGroup>
-        ]}/>
-    </MapsContext.Provider>);
+    const isNotMobile = useBreakpoint('sm');
+    return (<DetailsContext.Provider value={{ mobileView: !isNotMobile }}>
+      <Details name='Outer list' highlightedData={[
+            <FieldValueItem variant='stacked' name='Age' value='56'/>,
+            <FieldValueItem variant='stacked' name='Location' value='Berlin'/>,
+            <FieldValueItem variant='stacked' name='Make' value='Ford'/>,
+            <FieldValueItem variant='stacked' name='Model' value='F150'/>
+        ]}>
+        
+        <Details name='Nested as flex' nested asFlex>
+          
+          <Details nested>
+            <Details name='Purchase details' nested>
+              <FieldValueItem name='Make' value='Ford'/>
+              <FieldValueItem name='Model' value='F150'/>
+            </Details>
+          </Details>
+
+          <Details nested>
+            <FieldValueItem name='Mileage' value='78,500'/>
+            <FieldValueItem name='Trim' value='Lariat'/>
+          </Details>
+        </Details>
+
+        <FieldValueItem name='Description' variant='stacked' value={<p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla
+              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus
+              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor
+              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.
+              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget
+              risus. Fusce cursus sollicitudin nibh molestie volutpat.
+            </p>}/>
+
+        <Details name='Nested list' nested>
+          <FieldValueItem name='First name' value='Howard'/>
+          <FieldValueItem name='Last name' value='Kennedy'/>
+
+          <Details name='Deeper list' nested>
+            <FieldValueItem name='Color' value='red'/>
+            <FieldValueItem name='Year' value='2017'/>
+          </Details>
+        </Details>
+
+        <FieldValueItem name='Age' value='56'/>
+        <FieldValueItem name='Location' value='Berlin'/>
+      </Details>
+    </DetailsContext.Provider>);
 };
 //# sourceMappingURL=Details.stories.jsx.map

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

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.jsx","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.00' currencyISOCode='USD' />\n          },\n          {\n            id: '2',\n            name: 'Total balance',\n            value: <CurrencyDisplay value='35667.00' currencyISOCode='USD' />\n          },\n          {\n            id: '3',\n            name: 'Available credit',\n            value: <CurrencyDisplay value='5813.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                {\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.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  const isNotMobile = useBreakpoint('sm');\n\n  return (\n    <DetailsContext.Provider value={{ mobileView: !isNotMobile }}>\n      <Details\n        name='Outer list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n      >\n        {/* Siblings can be rendered in a responsive row with the `asFlex` attribute */}\n        <Details name='Nested as flex' nested asFlex>\n          {/* Arbitrary recursive nesting is supported with nested attribute */}\n          <Details nested>\n            <Details name='Purchase details' nested>\n              <FieldValueItem name='Make' value='Ford' />\n              <FieldValueItem name='Model' value='F150' />\n            </Details>\n          </Details>\n\n          <Details nested>\n            <FieldValueItem name='Mileage' value='78,500' />\n            <FieldValueItem name='Trim' value='Lariat' />\n          </Details>\n        </Details>\n\n        <FieldValueItem\n          name='Description'\n          variant='stacked'\n          value={\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla\n              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus\n              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor\n              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.\n              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget\n              risus. Fusce cursus sollicitudin nibh molestie volutpat.\n            </p>\n          }\n        />\n\n        <Details name='Nested list' nested>\n          <FieldValueItem name='First name' value='Howard' />\n          <FieldValueItem name='Last name' value='Kennedy' />\n\n          <Details name='Deeper list' nested>\n            <FieldValueItem name='Color' value='red' />\n            <FieldValueItem name='Year' value='2017' />\n          </Details>\n        </Details>\n\n        <FieldValueItem name='Age' value='56' />\n        <FieldValueItem name='Location' value='Berlin' />\n      </Details>\n    </DetailsContext.Provider>\n  );\n};\n"]}

package/jsx/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/jsx/work/Glimpse/Glimpse.stories.jsx.map

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

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

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

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

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

@@ -1,9 +1,9 @@
 import { useEffect, useState, useMemo } from 'react';
-import { Status, OneColumnPage, Text, Flex } from '@pega/cosmos-react-core';
+import { Status, Text, Flex } from '@pega/cosmos-react-core';
 import { CasePreview, SearchResults } from '@pega/cosmos-react-work';
 import { AppShellDemo } from '../../core/AppShell/AppShell.stories';
 import { getInitialResults, initialFilters } from './SearchResults.mocks';
-import { ColoredText, StyledSearchResults } from './SearchResults.styles';
+import { ColoredText } from './SearchResults.styles';
 export default {
     title: 'Work/SearchResults',
     component: SearchResults,
@@ -176,9 +176,9 @@ export const SearchResultsDemo = (args) => {
         });
     };
     const searchResults = (<>
-      <OneColumnPage as={StyledSearchResults} 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}/>}/>
+      <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} loading={args.loading}/>
 
       <CasePreview open={!!preview} caseId={preview?.id || ''} heading={preview?.title || ''} tabs={{
             items: [],
@@ -188,12 +188,14 @@ export const SearchResultsDemo = (args) => {
             setPreview(undefined);
         }}/>
     </>);
-    return args.withAppShell ? <AppShellDemo appHeader main={searchResults}/> : searchResults;
+    return args.withAppShell ? (<AppShellDemo appHeader main={searchResults} searchPage/>) : (searchResults);
 };
 SearchResultsDemo.args = {
-    withAppShell: false
+    withAppShell: false,
+    loading: false
 };
 SearchResultsDemo.argTypes = {
-    withAppShell: { control: { type: 'boolean' } }
+    withAppShell: { control: { type: 'boolean' } },
+    loading: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=SearchResults.stories.jsx.map

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

@@ -1 +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';\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.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';\n\nimport { Status, OmitStrict, 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 } 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  loading?: 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      <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        loading={args.loading}\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 ? (\n    <AppShellDemo appHeader main={searchResults} searchPage />\n  ) : (\n    searchResults\n  );\n};\n\nSearchResultsDemo.args = {\n  withAppShell: false,\n  loading: false\n};\n\nSearchResultsDemo.argTypes = {\n  withAppShell: { control: { type: 'boolean' } },\n  loading: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const defaultStageNames: string[];
+export declare const createStages: (stageNames: string[], current: number) => {
+    name: string;
+    id: string;
+    date: Date | undefined;
+    completed: boolean;
+}[];
+export declare const getSteps: (currentStageIndex: number, stageIndex: number) => {
+    name: string | JSX.Element;
+    completed: boolean;
+    id: string;
+}[];
+//# sourceMappingURL=Stages.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.mocks.d.ts","sourceRoot":"","sources":["../../../src/work/Stages/Stages.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,iBAAiB,UAO7B,CAAC;AAEF,eAAO,MAAM,YAAY,eAAgB,MAAM,EAAE,WAAW,MAAM;;;;;GAajE,CAAC;AAEF,eAAO,MAAM,QAAQ,sBAAuB,MAAM,cAAc,MAAM;;;;GAcrE,CAAC"}

package/jsx/work/Stages/Stages.mocks.jsx

@@ -0,0 +1,40 @@
+import { Link } from '@pega/cosmos-react-core';
+export const defaultStageNames = [
+    'Initial',
+    'Plan',
+    'Development',
+    'Accessibility',
+    'Review',
+    'Merge'
+];
+export const createStages = (stageNames, current) => {
+    const now = new Date();
+    return stageNames.map((stageName, i) => {
+        const stageDate = new Date(now);
+        const completed = i + 1 < current;
+        if (completed)
+            stageDate.setDate(now.getDate() + i - current);
+        return {
+            name: stageName,
+            id: `stage-${i + 1}`,
+            date: completed || i + 1 === current ? stageDate : undefined,
+            completed
+        };
+    });
+};
+export const getSteps = (currentStageIndex, stageIndex) => {
+    return [
+        '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>
+    ].map((step, i) => {
+        return {
+            name: step,
+            completed: stageIndex < currentStageIndex || (stageIndex === currentStageIndex && i === 0),
+            id: `step-${i + 1}`
+        };
+    });
+};
+//# sourceMappingURL=Stages.mocks.jsx.map

package/jsx/work/Stages/Stages.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stages.mocks.jsx","sourceRoot":"","sources":["../../../src/work/Stages/Stages.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,SAAS;IACT,MAAM;IACN,aAAa;IACb,eAAe;IACf,QAAQ;IACR,OAAO;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,UAAoB,EAAE,OAAe,EAAE,EAAE;IACpE,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IACvB,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;QAChC,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC;QAClC,IAAI,SAAS;YAAE,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC;QAC9D,OAAO;YACL,IAAI,EAAE,SAAS;YACf,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,EAAE,SAAS,IAAI,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAC5D,SAAS;SACV,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,iBAAyB,EAAE,UAAkB,EAAE,EAAE;IACxE,OAAO;QACL,YAAY;QACZ,2EAA2E;QAC3E,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAC/C;;IACF,EAAE,IAAI,CAAC;KACR,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;QAChB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,UAAU,GAAG,iBAAiB,IAAI,CAAC,UAAU,KAAK,iBAAiB,IAAI,CAAC,KAAK,CAAC,CAAC;YAC1F,EAAE,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;SACpB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { Link } from '@pega/cosmos-react-core';\n\nexport const defaultStageNames = [\n  'Initial',\n  'Plan',\n  'Development',\n  'Accessibility',\n  'Review',\n  'Merge'\n];\n\nexport const createStages = (stageNames: string[], current: number) => {\n  const now = new Date();\n  return stageNames.map((stageName, i) => {\n    const stageDate = new Date(now);\n    const completed = i + 1 < current;\n    if (completed) stageDate.setDate(now.getDate() + i - current);\n    return {\n      name: stageName,\n      id: `stage-${i + 1}`,\n      date: completed || i + 1 === current ? stageDate : undefined,\n      completed\n    };\n  });\n};\n\nexport const getSteps = (currentStageIndex: number, stageIndex: number) => {\n  return [\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  ].map((step, i) => {\n    return {\n      name: step,\n      completed: stageIndex < currentStageIndex || (stageIndex === currentStageIndex && i === 0),\n      id: `step-${i + 1}`\n    };\n  });\n};\n"]}

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

@@ -4,7 +4,7 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface StagesStoryProps {
     caseTitle?: StagesProps['caseTitle'];
-    numberOfStages?: number;
+    stageNames?: string[];
     currentStage?: number;
 }
 export declare const StagesDemo: Story<StagesStoryProps>;

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

@@ -1 +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"}
+{"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;;AAI9D,wBAMU;AAEV,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAyB9C,CAAC"}

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

@@ -1,5 +1,6 @@
-import { Link } from '@pega/cosmos-react-core';
+import { useState } from 'react';
 import { Stages } from '@pega/cosmos-react-work';
+import { defaultStageNames as stageNames, createStages, getSteps } from './Stages.mocks';
 export default {
     title: 'Work/Stages',
     component: Stages,
@@ -8,58 +9,23 @@ export default {
     }
 };
 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}/>);
+    const [stages, setStages] = useState(createStages(args.stageNames ?? stageNames, args.currentStage ?? 0));
+    return (<Stages stages={stages} current={`stage-${args.currentStage}`} caseTitle={args.caseTitle} onLoadStage={ids => {
+            setTimeout(() => setStages(prevStages => {
+                return prevStages.map((stage, i) => {
+                    return ids.includes(stage.id)
+                        ? { ...stage, steps: getSteps((args.currentStage || 0) - 1, i) }
+                        : stage;
+                });
+            }), 1500);
+        }}/>);
 };
 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/jsx/work/Stages/Stages.stories.jsx.map

@@ -1 +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"]}
+{"version":3,"file":"Stages.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stages/Stages.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,iBAAiB,IAAI,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAClC,YAAY,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,EAAE,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,CACL,CAAC,MAAM,CACL,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC,CACtC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,WAAW,CAAC,CAAC,GAAG,CAAC,EAAE;YACjB,UAAU,CACR,GAAG,EAAE,CACH,SAAS,CAAC,UAAU,CAAC,EAAE;gBACrB,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;oBACjC,OAAO,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;wBAC3B,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE;wBAChE,CAAC,CAAC,KAAK,CAAC;gBACZ,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,EACJ,IAAI,CACL,CAAC;QACJ,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,CAAC;CAChB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Stages, StagesProps } from '@pega/cosmos-react-work';\n\nimport { defaultStageNames as stageNames, createStages, getSteps } from './Stages.mocks';\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  stageNames?: string[];\n  currentStage?: number;\n}\n\nexport const StagesDemo: Story<StagesStoryProps> = (args: StagesStoryProps) => {\n  const [stages, setStages] = useState(\n    createStages(args.stageNames ?? stageNames, args.currentStage ?? 0)\n  );\n\n  return (\n    <Stages\n      stages={stages}\n      current={`stage-${args.currentStage}`}\n      caseTitle={args.caseTitle}\n      onLoadStage={ids => {\n        setTimeout(\n          () =>\n            setStages(prevStages => {\n              return prevStages.map((stage, i) => {\n                return ids.includes(stage.id)\n                  ? { ...stage, steps: getSteps((args.currentStage || 0) - 1, i) }\n                  : stage;\n              });\n            }),\n          1500\n        );\n      }}\n    />\n  );\n};\n\nStagesDemo.args = {\n  caseTitle: 'Demo',\n  currentStage: 3\n};\n\nStagesDemo.argTypes = {\n  caseTitle: { control: { type: 'text' } },\n  currentStage: { control: { type: 'number' } }\n};\n"]}

package/jsx/work/Stakeholders/Stakeholders.mocks.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Input, Grid, FieldGroup } from '@pega/cosmos-react-core';
 import { useMockListData } from '../../core/SummaryList/SummaryList.mocks';
 export const mockNetworkReq = () => new Promise(resolve => setTimeout(resolve, 2000));
-const count = Math.floor(Math.random() * 50) + 1;
+const count = 20;
 export const mockRoles = Array.from({ length: 3 }, (_, i) => ({
     name: `Role-${i + 1}`,
     description: `This is a description of Role-${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet dolor a mauris imperdiet convallis.`

package/jsx/work/Stakeholders/Stakeholders.mocks.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.mocks.jsx","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;AAGtF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC;AAGjD,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;AAOF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,EAC3D;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EACzD;MAAA,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,EAC/D;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,EAClF;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,eAAe,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,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;IAEtF,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 = Math.floor(Math.random() * 50) + 1;\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.jsx","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;AAGtF,MAAM,KAAK,GAAG,EAAE,CAAC;AAGjB,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;AAOF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAQN,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,CACb,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,EAC3D;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,EACzD;MAAA,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,EAC/D;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,EAClF;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;IAEF,OAAO,gBAAgB,CAAC,CAAC,CAAC,CACxB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,eAAe,gBAAgB,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,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;IAEtF,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/jsx/work/Stakeholders/Stakeholders.stories.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const StakeHoldersDemo: () => JSX.Element;
+export declare const StakeHoldersDemo: Story;
 //# sourceMappingURL=Stakeholders.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stakeholders.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAYxC,wBAGU;AAEV,eAAO,MAAM,gBAAgB,mBA8H5B,CAAC"}
+{"version":3,"file":"Stakeholders.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,eAAO,MAAM,gBAAgB,EAAE,KA+H9B,CAAC"}

package/jsx/work/Stakeholders/Stakeholders.stories.jsx

@@ -70,6 +70,7 @@ export const StakeHoldersDemo = () => {
             onAfterClose: () => {
                 if (viewAllLoading)
                     setViewAllLoading(false);
+                setViewAllSearchValue('');
             }
         };
     }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);