npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1484) hide show

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

	@@ -1 +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"]}
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, useRef } 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 const [searchLoading, setSearchLoading] = useState(false);\n const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\n\n const getActiveFilters = () => {\n return 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\n const getResults = (\n searchStr: string,\n activeFilters: { groupName: string; name: string; id: string }[]\n ) => {\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(searchStr.toLowerCase()) \|\|\n result.title.toLowerCase().includes(searchStr.toLowerCase()) \|\|\n result.id.toLowerCase().includes(searchStr.toLowerCase()))\n ) {\n return true;\n }\n\n return false;\n });\n };\n\n useEffect(() => {\n const activeFilters = getActiveFilters();\n\n if (activeFilters.length > 0 \|\| search !== '') {\n if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n setSearchLoading(true);\n searchTimeoutRef.current = setTimeout(() => {\n setResults(getResults(search, activeFilters));\n setSearchLoading(false);\n }, 1500);\n } else {\n setResults([]);\n }\n\n return () => {\n if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);\n };\n }, [filters]);\n\n const handleSearchSubmit = (value: string) => {\n if (searchTimeoutRef?.current) clearTimeout(searchTimeoutRef?.current);\n setSearchLoading(true);\n searchTimeoutRef.current = setTimeout(() => {\n setResults(getResults(value, getActiveFilters()));\n setSearchLoading(false);\n }, 1500);\n };\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={{\n value: search,\n onSearchChange: setSearch,\n onSearchSubmit: handleSearchSubmit,\n searchInputAriaLabel: 'Search'\n }}\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={searchLoading}\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};\n\nSearchResultsDemo.argTypes = {\n withAppShell: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -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 ADDED Viewed

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stages.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stages/Stages.stories.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,EAAE,~~IAAI~~,EAAE,MAAM,~~yBAAyB~~,CAAC;~~AAC/C~~,OAAO,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE9D,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,~~UAAU,GAAG,~~CAAC,~~SAAS,EAAE,~~MAAM,EAAE,~~aAAa~~,~~EAAE~~,~~eAAe~~,~~EAAE,~~QAAQ,~~CAAC~~,~~CAAC;IAEjF,MAAM,SAAS,GAAG;QAChB,~~YAAY~~;QACZ~~,~~2EAA2E;QAC3E,~~CAAC,IAAI,CAAC,IAAI,~~CAAC~~,~~sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAC/C;;IACF,~~EAAE,IAAI,CAAC~~;KACC~~,~~CAAC;IAEX~~,~~MAAM,SAAS,GAAG,~~IAAI,~~IAAI,EAAE,~~CAAC~~;IAE7B~~,~~MAAM,UAAU,GAAG,~~CAAC,~~iBAAyB~~,~~EAAE,UAAkB,EAAE,KAAa,EAAE,EAAE;QAClF,IAAI,UAAU,GAAG,iBAAiB;YAAE,OAAO,IAAI,~~CAAC;~~QAChD~~,~~IAAI,UAAU,KAAK,iBAAiB,IAAI,KAAK,KAAK,CAAC;YAAE,~~OAAO,~~IAAI~~,CAAC~~;QACjE~~,~~OAAO~~,~~KAAK~~,~~CAAC;IACf~~,CAAC,CAAC~~;IAEF~~,MAAM,~~QAAQ,GAAG,~~CAAC,~~iBAAyB~~,~~EAAE,UAAkB,EAAE,EAAE;QACjE,~~OAAO,~~SAAS~~,CAAC,~~GAAG~~,~~CAAC~~,CAAC,~~CAAC~~,EAAE,CAAC,~~EAAE~~,~~EAAE;YAC5B,OAAO;gBACL,IAAI,EAAE,~~SAAS,CAAC,CAAC,CAAC~~;gBAClB~~,~~QAAQ~~,~~EAAE,UAAU,~~CAAC,~~iBAAiB~~,~~EAAE~~,~~UAAU,EAAE,~~CAAC,CAAC~~;gBACtD~~,~~EAAE,EAAE,~~GAAG,CAAC,~~GAAG,CAAC,~~EAAE;~~aACf~~,~~CAAC;QACJ~~,~~CAAC~~,~~CAAC~~,~~CAAC;IACL~~,~~CAAC~~,~~CAAC;IAEF,MAAM,~~SAAS,~~GAAG,~~CAAC,~~cAAuB~~,~~EAAE,OAAO,GAAG,~~CAAC,EAAE~~,EAAE~~;~~QACzD~~,OAAO,~~KAAK~~,CAAC,~~IAAI,CAAC,EAAE,MAAM,EAAE,cAAc,IAAI,CAAC,EAAE,CAAC,CAAC,~~GAAG,CAAC,CAAC,~~CAAC~~,EAAE,CAAC,EAAE,EAAE;~~YAC9D~~,~~IAAI~~,~~SAAS,~~GAAG,~~EAAE,~~CAAC~~;YAEnB~~,~~IAAI~~,CAAC,~~IAAI~~,CAAC~~;gBAAE~~,~~SAAS~~,~~GAAG,UAAU,~~CAAC,CAAC,CAAC,~~CAAC;;gBACjC~~,~~SAAS,~~GAAG,~~SAAS~~,~~CAAC,GAAG,CAAC,~~EAAE,~~CAAC;YAElC~~,~~OAAO;gBACL,IAAI,~~EAAE,~~SAAS;gBACf~~,~~EAAE,EAAE,SAAS,~~CAAC,~~GAAG,~~CAAC,~~EAAE;gBACpB,~~IAAI,~~EAAE,SAAS,~~CAAC,~~OAAO~~,~~CAAC,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,cAAc,~~IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC~~;gBAC1E~~,~~QAAQ,~~EAAE~~,IAAI~~;~~gBACd~~,~~QAAQ,EAAE,~~CAAC,~~GAAG,~~CAAC,~~GAAG,OAAO;gBACzB,~~KAAK,~~EAAE,QAAQ,~~CAAC~~,OAAO,GAAG,CAAC,EAAE,CAAC,CAAC~~;~~aAChC~~,CAAC~~;QACJ~~,CAAC,CAAC~~,CAAC~~;~~IACL~~,CAAC,CAAC~~;IAEF~~,~~OAAO~~,~~CACL~~,~~CAAC,MAAM,~~CACL,~~MAAM,~~CAAC,CAAC,~~SAAS,~~CAAC,~~IAAI~~,~~CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAC1D,OAAO,CAAC,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,CAAC,CACtC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAC1B,~~CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,MAAM;IACjB,~~cAAc,EAAE,CAAC;IACjB,~~YAAY,EAAE,CAAC;CAChB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,~~cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC/C,~~YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","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"]}
1	+ {"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.stories.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

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

package/jsx/work/Stakeholders/Stakeholders.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAkC,MAAM,yBAAyB,CAAC;AAEvF,OAAO,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,sBAAsB,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,~~GAAG~~,GAAG,EAAE;~~IACnC~~,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAClE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAGjE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,mBAAmB,CAAC,GAAG,EAAE;QACvE,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAErC,CAAC;IAGJ,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAoB,EAAE,EAAE;QACvB,OAAO,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC7B,OAAO;gBACL,GAAG,WAAW;gBACd,MAAM,EAAE,GAAG,EAAE;oBACX,cAAc,CAAC,IAAI,CAAC,CAAC;oBACrB,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;oBAC3B,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;oBACzE,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;gBACrD,CAAC;gBACD,QAAQ,EAAE,GAAG,EAAE;oBACb,mBAAmB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC5E,CAAC;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,IAAI,GAA8B,OAAO,CAAC,GAAG,EAAE;QACnD,OAAO;YAEL,OAAO,EAAE,WAAW;YAEpB,KAAK,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAE7C,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS;YAK1F,QAAQ,EAAE,cAAc;YACxB,aAAa,EAAE,QAAQ;YACvB,QAAQ,EAAE,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC5C,cAAc,CAAC,IAAI,CAAC,CAAC;gBACrB,MAAM,CAAC,yBAAyB,gBAAgB,EAAE,CAAC,CAAC;gBAEpD,cAAc,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACnC,CAAC;YACD,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC3B,SAAS,EAAE,CAAC;YACd,CAAC;YACD,YAAY,EAAE,GAAG,EAAE;gBAEjB,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,WAAW,CAAC,SAAS,CAAC,CAAC;gBACvB,OAAO,CAAC,SAAS,CAAC,CAAC;YACrB,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtD,MAAM,OAAO,GAAiC,OAAO,CAAC,GAAG,EAAE;QACzD,IAAI,YAAY,GAAG,gBAAgB,CAAC;QAGpC,IAAI,kBAAkB,EAAE;YAEtB,MAAM,WAAW,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;YAExE,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAiB,CAAC,CAAC,CAAC;SAC9F;QAED,OAAO;YAEL,OAAO,EAAE,cAAc;YAEvB,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC;YAE/B,QAAQ,EAAE,qBAAqB;YAC/B,YAAY,EAAE,GAAG,EAAE;gBAEjB,IAAI,cAAc;oBAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;~~YAC/C~~,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;IAEf,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;IAEf,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,CAAC,YAAY,CACX,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,OAAO,CACZ,GAAG,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAC9C,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC/B,CAAC,CACF,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACrD,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,CAAC;YACf,cAAc,CAAC,IAAI,CAAC,CAAC;YACrB,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;QACrD,CAAC,CAAC,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,SAAS,CAAC,CAAC;YACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QACxD,CAAC,CAAC,CACF,OAAO,CAAC,CAAC,OAAO,CAAC,EACjB,CACH,CAAC;AACJ,CAAC,CAAC","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"]}
1	+ {"version":3,"file":"Stakeholders.stories.jsx","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, Story } 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: Story = () => {\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 setViewAllSearchValue('');\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/jsx/work/Tasks/TaskList.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskList.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,~~KAU1B~~,CAAC"}
1	+ {"version":3,"file":"TaskList.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAC"}

package/jsx/work/Tasks/TaskList.stories.jsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { MetaList, Avatar } from '@pega/cosmos-react-core';
+import { MetaList, Avatar, useUID } from '@pega/cosmos-react-core';
 import { TaskList } from '@pega/cosmos-react-work';
 export default {
     title: 'Work/TaskList',
@@ -7,6 +7,8 @@ export default {
 export const TaskListDemo = () => {
     const items = [
         {
+            id: useUID(),
+            processName: 'Parent process',
             name: 'Send references',
             meta: <MetaList items={[' Due in 1d', 'Priority 95']}/>,
             avatar: <Avatar name='James Gregory'/>

package/jsx/work/Tasks/TaskList.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskList.stories.jsx","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,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,EAAG;YACxD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAG;SACxC;KACF,CAAC;IAEF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,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"]}
1	+ {"version":3,"file":"TaskList.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/TaskList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACnE,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,EAAE,EAAE,MAAM,EAAE;YACZ,WAAW,EAAE,gBAAgB;YAC7B,IAAI,EAAE,iBAAiB;YACvB,IAAI,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC,EAAG;YACxD,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAG;SACxC;KACF,CAAC;IAEF,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;AACpC,CAAC,CAAC","sourcesContent":["import { Story, Meta } from '@storybook/react';\n\nimport { MetaList, Avatar, useUID } 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 id: useUID(),\n processName: 'Parent process',\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"]}

package/jsx/work/Tasks/Tasks.stories.d.ts CHANGED Viewed

@@ -4,6 +4,10 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface TasksStoryProps {
     headerText?: TasksProps['headerText'];
+    showHeaderVisual?: boolean;
+    showHeaderSecondary?: boolean;
+    count?: TasksProps['count'];
+    openableTasks?: boolean;
 }
 export declare const TasksDemo: Story<TasksStoryProps>;
 //# sourceMappingURL=Tasks.stories.d.ts.map

package/jsx/work/Tasks/Tasks.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0B/C,OAAO,EAAS,UAAU,EAAiB,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;~~CACvC~~;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,~~CAwI5C~~,CAAC"}
1	+ {"version":3,"file":"Tasks.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AA0B/C,OAAO,EAAS,UAAU,EAAiB,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,UAAU,eAAe;IACvB,UAAU,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CA2I5C,CAAC"}

package/jsx/work/Tasks/Tasks.stories.jsx CHANGED Viewed

@@ -17,7 +17,7 @@ export const TasksDemo = (args) => {
           </>}>
         <Input label='Text field 1' required/>
         <Input label='Text field 2'/>
-        <NumberInput label='Number field'/>
+        <NumberInput onChange={() => { }} label='Number field'/>
         <Checkbox label='Boolean field' required/>
         <RadioCheckGroup label='Picklist options' name='picklist-1'>
           <RadioButton label='option 1' defaultChecked/>
@@ -34,7 +34,7 @@ export const TasksDemo = (args) => {
             return {
                 id: `${i + 1}`,
                 primary: `Workgroup ${i + 1}`,
-                count: Math.floor(Math.random() * 10),
+                count: typeof args.count === 'number' ? args.count : Math.floor(Math.random() * 10),
                 selected: i === 0,
                 visual: <Avatar size='l' name={`Team ${i + 1}`}/>
             };
@@ -57,7 +57,7 @@ export const TasksDemo = (args) => {
                     });
                 }
             }}/>);
-    }, [activeGroup.primary]);
+    }, [activeGroup.primary, workGroups]);
     const taskArray = useMemo(() => Array.from({ length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount }, (_, i) => {
         const dueIn = 86400000 * i;
         let status = 'info';
@@ -68,7 +68,9 @@ export const TasksDemo = (args) => {
             status = 'warn';
         }
         return {
+            id: `${i}`,
             name: `Task ${i + 1}`,
+            processName: i % 2 ? 'Demo process' : undefined,
             meta: (<MetaList items={[
                     <Status variant={status}>{status}</Status>,
                     <Text variant='secondary'>
@@ -76,26 +78,34 @@ export const TasksDemo = (args) => {
                   </Text>,
                     <Link href='#demo'>Parent case link</Link>
                 ]}/>),
-            actions: (<Button onClick={() => {
+            onOpen: args.openableTasks !== false
+                ? () => {
                     setHasOpenTask(true);
-                }}>
-                Go
-              </Button>),
+                }
+                : undefined,
             content: hasOpenTask ? (<DemoTaskForm onSubmit={() => {
                     setHasOpenTask(false);
                 }} onCancel={() => {
                     setHasOpenTask(false);
                 }}/>) : null
         };
-    }), [isLimited, activeGroup, hasOpenTask]);
-    return (<Tasks headerText={args.headerText || 'Tasks'} count={activeGroupTaskCount} items={taskArray} headerVisual={activeGroup ? <Avatar size='l' name={activeGroup.primary}/> : undefined} headerSecondary={groupSelection} emptyPlaceholder={<EmptyState />} onExpandToggle={() => {
+    }), [isLimited, activeGroupTaskCount, args.openableTasks, hasOpenTask]);
+    return (<Tasks headerText={args.headerText || 'Tasks'} count={activeGroupTaskCount} items={taskArray} headerVisual={args.showHeaderVisual && activeGroup ? (<Avatar size='l' name={activeGroup.primary}/>) : undefined} headerSecondary={args.showHeaderSecondary ? groupSelection : undefined} emptyPlaceholder={<EmptyState />} onExpandToggle={() => {
             setIsLimited(cur => !cur);
         }}/>);
 };
 TasksDemo.args = {
-    headerText: 'Tasks'
+    headerText: 'Tasks',
+    showHeaderVisual: true,
+    showHeaderSecondary: true,
+    count: undefined,
+    openableTasks: true
 };
 TasksDemo.argTypes = {
-    headerText: { control: { type: 'text' } }
+    headerText: { control: { type: 'text' } },
+    showHeaderVisual: { control: { type: 'boolean' } },
+    showHeaderSecondary: { control: { type: 'boolean' } },
+    count: { control: { type: 'number' } },
+    openableTasks: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Tasks.stories.jsx.map

package/jsx/work/Tasks/Tasks.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tasks.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EACL,MAAM,EACN,MAAM,EACN,UAAU,EAEV,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,eAAe,EACf,WAAW,EACX,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,MAAM,EACN,IAAI,EACJ,eAAe,EAEf,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAA6B,MAAM,yBAAyB,CAAC;AAE3E,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAMV,MAAM,CAAC,MAAM,SAAS,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACzE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAkD,EAAE,EAAE;QAC9F,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CACN,EACE;YAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,CACzC;YAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAC1C;;YACF,EAAE,MAAM,CACV;UAAA,GAAG,CACJ,CAED;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,EACpC;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,EAC3B;QAAA,CAAC,WAAW,CAAC,KAAK,CAAC,cAAc,EACjC;QAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,eAAe,CAAC,QAAQ,EACxC;QAAA,CAAC,eAAe,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,YAAY,CACzD;UAAA,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,EAC5C;UAAA,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,EAC7B;UAAA,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,EAC/B;QAAA,EAAE,eAAe,CACjB;QAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,sBAAsB,CAAC,QAAQ,EAC/C;QAAA,CAAC,SAAS,CAAC,KAAK,CAAC,YAAY,EAC7B;QAAA,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,EACnC;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAqB,GAAG,EAAE;QACpE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACzC,OAAO;gBACL,EAAE,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE;gBACd,OAAO,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE;gBAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC;gBACrC,QAAQ,EAAE,CAAC,KAAK,CAAC;gBACjB,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,EAAG;aACnD,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IACxF,MAAM,oBAAoB,GAAG,WAAW,EAAE,KAAK,IAAI,CAAC,CAAC;IAErD,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,OAAO,CACL,CAAC,UAAU,CACT,OAAO,CAAC,MAAM,CACd,IAAI,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAC1B,IAAI,CAAC,CAAC;gBACJ,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,UAAU;gBACjB,WAAW,EAAE,EAAE,CAAC,EAAE;oBAChB,aAAa,CAAC,iBAAiB,CAAC,EAAE;wBAChC,OAAO,WAAW,CAAC,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,EAAE;4BACpD,IAAI,EAAE,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,QAAQ,EAAE;gCACrC,OAAO,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,EAAE,KAAK,KAAK,CAAC,EAAE,EAAE,CAAC;6BAChD;4BAED,OAAO,KAAK,CAAC;wBACf,CAAC,CAAC,CAAC;oBACL,CAAC,CAAC,CAAC;gBACL,CAAC;aACF,CAAC,EACF,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1B,MAAM,SAAS,GAAoB,OAAO,CACxC,GAAG,EAAE,CACH,KAAK,CAAC,IAAI,CACR,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAChF,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACP,MAAM,KAAK,GAAG,QAAQ,GAAG,CAAC,CAAC;QAC3B,IAAI,MAAM,GAA2B,MAAM,CAAC;QAE5C,IAAI,CAAC,KAAK,CAAC,EAAE;YACX,MAAM,GAAG,QAAQ,CAAC;SACnB;aAAM,IAAI,CAAC,KAAK,CAAC,EAAE;YAClB,MAAM,GAAG,MAAM,CAAC;SACjB;QAED,OAAO;YACL,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE;YACrB,IAAI,EAAE,CACJ,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC;oBACL,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;oBAC1C,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CACvB;wBAAI,CAAC,eAAe,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,EACpE;kBAAA,EAAE,IAAI,CAAC;oBACP,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC;iBAC3C,CAAC,EACF,CACH;YACD,OAAO,EAAE,CACP,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;oBACZ,cAAc,CAAC,IAAI,CAAC,CAAC;gBACvB,CAAC,CAAC,CAEF;;cACF,EAAE,MAAM,CAAC,CACV;YACD,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CACrB,CAAC,YAAY,CACX,QAAQ,CAAC,CAAC,GAAG,EAAE;oBACb,cAAc,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC,CAAC,CACF,QAAQ,CAAC,CAAC,GAAG,EAAE;oBACb,cAAc,CAAC,KAAK,CAAC,CAAC;gBACxB,CAAC,CAAC,EACF,CACH,CAAC,CAAC,CAAC,IAAI;SACT,CAAC;IACJ,CAAC,CACF,EACH,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,CACtC,CAAC;IAEF,OAAO,CACL,CAAC,KAAK,CACJ,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,OAAO,CAAC,CACvC,KAAK,CAAC,CAAC,oBAAoB,CAAC,CAC5B,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,YAAY,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,EAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CACvF,eAAe,CAAC,CAAC,cAAc,CAAC,CAChC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC,AAAD,EAAG,CAAC,CACjC,cAAc,CAAC,CAAC,GAAG,EAAE;YACnB,YAAY,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,UAAU,EAAE,OAAO;CACpB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport {\n Avatar,\n Button,\n MenuButton,\n MenuProps,\n MetaList,\n Text,\n Form,\n Input,\n TextArea,\n RadioCheckGroup,\n RadioButton,\n Checkbox,\n DateInput,\n NumberInput,\n FileInput,\n menuHelpers,\n Status,\n Link,\n DateTimeDisplay,\n StatusProps,\n EmptyState\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n title: 'Work/Tasks',\n component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n headerText?: TasksProps['headerText'];\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n const [isLimited, setIsLimited] = useState(true);\n const [hasOpenTask, setHasOpenTask] = useState(false);\n\n const DemoTaskForm = ({ onSubmit, onCancel }: { onSubmit: () => void; onCancel: () => void }) => {\n return (\n <Form\n actions={\n <>\n <Button onClick={onCancel}>Cancel</Button>\n <Button variant='primary' onClick={onSubmit}>\n Submit\n </Button>\n </>\n }\n >\n <Input label='Text field 1' required />\n <Input label='Text field 2' />\n <NumberInput label='Number field' />\n <Checkbox label='Boolean field' required />\n <RadioCheckGroup label='Picklist options' name='picklist-1'>\n <RadioButton label='option 1' defaultChecked />\n <RadioButton label='option 2' />\n <RadioButton label='option 3' />\n </RadioCheckGroup>\n <TextArea label='Text paragraph field' required />\n <FileInput label='File field' />\n <DateInput label='Datetime field' />\n </Form>\n );\n };\n\n const [workGroups, setWorkGroups] = useState<MenuProps['items']>(() => {\n return Array.from({ length: 10 }, (_, i) => {\n return {\n id: `${i + 1}`,\n primary: `Workgroup ${i + 1}`,\n count: Math.floor(Math.random() * 10),\n selected: i === 0,\n visual: <Avatar size='l' name={`Team ${i + 1}`} />\n };\n });\n });\n\n const activeGroup = useMemo(() => menuHelpers.getSelected(workGroups)[0], [workGroups]);\n const activeGroupTaskCount = activeGroup?.count ?? 0;\n\n const groupSelection = useMemo(() => {\n return (\n <MenuButton\n variant='text'\n text={activeGroup.primary}\n menu={{\n mode: 'single-select',\n items: workGroups,\n onItemClick: id => {\n setWorkGroups(currentWorkGroups => {\n return menuHelpers.mapTree(currentWorkGroups, group => {\n if (id === group.id \|\| group.selected) {\n return { ...group, selected: id === group.id };\n }\n\n return group;\n });\n });\n }\n }}\n />\n );\n }, [activeGroup.primary]);\n\n const taskArray: TaskItemProps[] = useMemo(\n () =>\n Array.from(\n { length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount },\n (_, i) => {\n const dueIn = 86400000 * i;\n let status: StatusProps['variant'] = 'info';\n\n if (i === 0) {\n status = 'urgent';\n } else if (i === 1) {\n status = 'warn';\n }\n\n return {\n name: `Task ${i + 1}`,\n meta: (\n <MetaList\n items={[\n <Status variant={status}>{status}</Status>,\n <Text variant='secondary'>\n Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n </Text>,\n <Link href='#demo'>Parent case link</Link>\n ]}\n />\n ),\n actions: (\n <Button\n onClick={() => {\n setHasOpenTask(true);\n }}\n >\n Go\n </Button>\n ),\n content: hasOpenTask ? (\n <DemoTaskForm\n onSubmit={() => {\n setHasOpenTask(false);\n }}\n onCancel={() => {\n setHasOpenTask(false);\n }}\n />\n ) : null\n };\n }\n ),\n [isLimited, activeGroup, hasOpenTask]\n );\n\n return (\n <Tasks\n headerText={args.headerText \|\| 'Tasks'}\n count={activeGroupTaskCount}\n items={taskArray}\n headerVisual={activeGroup ? <Avatar size='l' name={activeGroup.primary} /> : undefined}\n headerSecondary={groupSelection}\n emptyPlaceholder={<EmptyState />}\n onExpandToggle={() => {\n setIsLimited(cur => !cur);\n }}\n />\n );\n};\n\nTasksDemo.args = {\n headerText: 'Tasks'\n};\n\nTasksDemo.argTypes = {\n headerText: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"Tasks.stories.jsx","sourceRoot":"","sources":["../../../src/work/Tasks/Tasks.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport {\n Avatar,\n Button,\n MenuButton,\n MenuProps,\n MetaList,\n Text,\n Form,\n Input,\n TextArea,\n RadioCheckGroup,\n RadioButton,\n Checkbox,\n DateInput,\n NumberInput,\n FileInput,\n menuHelpers,\n Status,\n Link,\n DateTimeDisplay,\n StatusProps,\n EmptyState\n} from '@pega/cosmos-react-core';\nimport { Tasks, TasksProps, TaskItemProps } from '@pega/cosmos-react-work';\n\nexport default {\n title: 'Work/Tasks',\n component: Tasks\n} as Meta;\n\ninterface TasksStoryProps {\n headerText?: TasksProps['headerText'];\n showHeaderVisual?: boolean;\n showHeaderSecondary?: boolean;\n count?: TasksProps['count'];\n openableTasks?: boolean;\n}\n\nexport const TasksDemo: Story<TasksStoryProps> = (args: TasksStoryProps) => {\n const [isLimited, setIsLimited] = useState(true);\n const [hasOpenTask, setHasOpenTask] = useState(false);\n\n const DemoTaskForm = ({ onSubmit, onCancel }: { onSubmit: () => void; onCancel: () => void }) => {\n return (\n <Form\n actions={\n <>\n <Button onClick={onCancel}>Cancel</Button>\n <Button variant='primary' onClick={onSubmit}>\n Submit\n </Button>\n </>\n }\n >\n <Input label='Text field 1' required />\n <Input label='Text field 2' />\n <NumberInput onChange={() => {}} label='Number field' />\n <Checkbox label='Boolean field' required />\n <RadioCheckGroup label='Picklist options' name='picklist-1'>\n <RadioButton label='option 1' defaultChecked />\n <RadioButton label='option 2' />\n <RadioButton label='option 3' />\n </RadioCheckGroup>\n <TextArea label='Text paragraph field' required />\n <FileInput label='File field' />\n <DateInput label='Datetime field' />\n </Form>\n );\n };\n\n const [workGroups, setWorkGroups] = useState<MenuProps['items']>(() => {\n return Array.from({ length: 10 }, (_, i) => {\n return {\n id: `${i + 1}`,\n primary: `Workgroup ${i + 1}`,\n count: typeof args.count === 'number' ? args.count : Math.floor(Math.random() * 10),\n selected: i === 0,\n visual: <Avatar size='l' name={`Team ${i + 1}`} />\n };\n });\n });\n\n const activeGroup = useMemo(() => menuHelpers.getSelected(workGroups)[0], [workGroups]);\n const activeGroupTaskCount = activeGroup?.count ?? 0;\n\n const groupSelection = useMemo(() => {\n return (\n <MenuButton\n variant='text'\n text={activeGroup.primary}\n menu={{\n mode: 'single-select',\n items: workGroups,\n onItemClick: id => {\n setWorkGroups(currentWorkGroups => {\n return menuHelpers.mapTree(currentWorkGroups, group => {\n if (id === group.id \|\| group.selected) {\n return { ...group, selected: id === group.id };\n }\n\n return group;\n });\n });\n }\n }}\n />\n );\n }, [activeGroup.primary, workGroups]);\n\n const taskArray: TaskItemProps[] = useMemo(\n () =>\n Array.from(\n { length: isLimited ? Math.min(3, activeGroupTaskCount) : activeGroupTaskCount },\n (_, i) => {\n const dueIn = 86400000 * i;\n let status: StatusProps['variant'] = 'info';\n\n if (i === 0) {\n status = 'urgent';\n } else if (i === 1) {\n status = 'warn';\n }\n\n return {\n id: `${i}`,\n name: `Task ${i + 1}`,\n processName: i % 2 ? 'Demo process' : undefined,\n meta: (\n <MetaList\n items={[\n <Status variant={status}>{status}</Status>,\n <Text variant='secondary'>\n Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn} />\n </Text>,\n <Link href='#demo'>Parent case link</Link>\n ]}\n />\n ),\n onOpen:\n args.openableTasks !== false\n ? () => {\n setHasOpenTask(true);\n }\n : undefined,\n content: hasOpenTask ? (\n <DemoTaskForm\n onSubmit={() => {\n setHasOpenTask(false);\n }}\n onCancel={() => {\n setHasOpenTask(false);\n }}\n />\n ) : null\n };\n }\n ),\n [isLimited, activeGroupTaskCount, args.openableTasks, hasOpenTask]\n );\n\n return (\n <Tasks\n headerText={args.headerText \|\| 'Tasks'}\n count={activeGroupTaskCount}\n items={taskArray}\n headerVisual={\n args.showHeaderVisual && activeGroup ? (\n <Avatar size='l' name={activeGroup.primary} />\n ) : undefined\n }\n headerSecondary={args.showHeaderSecondary ? groupSelection : undefined}\n emptyPlaceholder={<EmptyState />}\n onExpandToggle={() => {\n setIsLimited(cur => !cur);\n }}\n />\n );\n};\n\nTasksDemo.args = {\n headerText: 'Tasks',\n showHeaderVisual: true,\n showHeaderSecondary: true,\n count: undefined,\n openableTasks: true\n};\n\nTasksDemo.argTypes = {\n headerText: { control: { type: 'text' } },\n showHeaderVisual: { control: { type: 'boolean' } },\n showHeaderSecondary: { control: { type: 'boolean' } },\n count: { control: { type: 'number' } },\n openableTasks: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/work/Timeline/Timeline.stories.d.ts CHANGED Viewed

@@ -4,4 +4,5 @@ import { TimelineProps } from '@pega/cosmos-react-work';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const TimelineDemo: Story<OmitStrict<TimelineProps, 'activity' | 'currentTime'>>;
+export declare const TimelineToolbarDemo: Story;
 //# sourceMappingURL=Timeline.stories.d.ts.map

package/jsx/work/Timeline/Timeline.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,~~EAAE~~,UAAU,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AACrD~~,OAAO,EAAY,aAAa,~~EAAE~~,MAAM,yBAAyB,CAAC;;~~AAIlE~~,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,GAAG,aAAa,CAAC,CA6CrF,CAAC"}
1	+ {"version":3,"file":"Timeline.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Timeline/Timeline.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAIL,UAAU,EAEX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAY,aAAa,EAAmB,MAAM,yBAAyB,CAAC;;AAQnF,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,EAAE,UAAU,GAAG,aAAa,CAAC,CA6CrF,CAAC;AAeF,eAAO,MAAM,mBAAmB,EAAE,KAyCjC,CAAC"}

package/jsx/work/Timeline/Timeline.stories.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import { useCallback, useState } from 'react';
-import { Timeline } from '@pega/cosmos-react-work';
+import { Card, CardContent, CardHeader } from '@pega/cosmos-react-core';
+import { Timeline, TimelineToolbar } from '@pega/cosmos-react-work';
 import { activity } from './Timeline.mocks';
 export default {
     title: 'Work/Timeline',
@@ -40,4 +41,31 @@ TimelineDemo.argTypes = {
         control: { type: 'select' }
     }
 };
+export const TimelineToolbarDemo = () => {
+    const [sortOrder, setSortOrder] = useState();
+    const [groupBy, setGroupBy] = useState();
+    const [items, setItems] = useState(activity);
+    const [searchValue, onSearchChange] = useState('');
+    const onSearchSubmit = useCallback((value) => {
+        setItems(activity.filter(item => JSON.stringify(item.title).includes(value)));
+    }, []);
+    return (<Card>
+      <CardHeader>
+        <TimelineToolbar heading='Timeline Demo' search={{ onSearchSubmit, onSearchChange, value: searchValue }} count={{ total: items.length }} sort={{
+            selected: sortOrder,
+            onItemClick: (id) => {
+                setSortOrder(id);
+            }
+        }} group={{
+            selected: groupBy,
+            onItemClick: (id) => {
+                setGroupBy(id);
+            }
+        }}/>
+      </CardHeader>
+      <CardContent>
+        <Timeline activity={items} currentTime={new Date()} sortOrder={sortOrder} groupBy={groupBy}/>
+      </CardContent>
+    </Card>);
+};
 //# sourceMappingURL=Timeline.stories.jsx.map