@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/lib/work/CaseView/FileService.mock.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo } from 'react';
+import { createUID, getKindFromMimeType, getMimeTypeFromFile, hasProp, useAfterInitialEffect } from '@pega/cosmos-react-core';
+// -----------------------------------------------------------------------------
+// FileServiceContext
+// -----------------------------------------------------------------------------
+export const FileServiceContext = createContext({
+    files: [],
+    setFiles: () => { },
+    attachFile: () => { },
+    cancelFile: () => { },
+    deleteFile: () => { }
+});
+// -----------------------------------------------------------------------------
+// uploadsInProgress
+// -----------------------------------------------------------------------------
+const uploadsInProgress = {};
+// -----------------------------------------------------------------------------
+// postFile
+// -----------------------------------------------------------------------------
+const postFile = ({ file, onLoadStart, onProgress, onLoad }) => {
+    const xhr = new XMLHttpRequest();
+    const fd = new FormData();
+    uploadsInProgress[file.id] = xhr;
+    xhr.upload.onloadstart = () => {
+        onLoadStart(file, 0);
+    };
+    xhr.upload.onprogress = ({ lengthComputable, loaded, total }) => {
+        if (lengthComputable) {
+            onProgress(file, (loaded / total) * 100);
+        }
+    };
+    xhr.upload.onload = () => {
+        onLoad(file);
+    };
+    // This is a mock api used to demo upload progress
+    xhr.open('POST', 'http://cosmos.eng.pega.com/attachments');
+    xhr.setRequestHeader('Content-Type', 'multipart/form-data');
+    fd.append('attachments', file.File);
+    xhr.send(fd);
+    return xhr;
+};
+// Mock date generator
+const getMockPriorDate = (h) => {
+    const d = new Date();
+    return d.setHours(d.getHours() - h);
+};
+export const mockCategories = [
+    'HR',
+    'Marketing',
+    'Sales',
+    'Accounting',
+    'Engineering'
+];
+export const mockAttachmentListRequest = () => {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve([
+                {
+                    id: createUID(),
+                    name: 'File.doc',
+                    category: mockCategories[0],
+                    createDate: getMockPriorDate(1)
+                },
+                {
+                    id: createUID(),
+                    name: 'File.ppt',
+                    category: mockCategories[1],
+                    createDate: getMockPriorDate(4)
+                },
+                {
+                    id: createUID(),
+                    name: 'File.xls',
+                    category: mockCategories[2],
+                    createDate: getMockPriorDate(30)
+                },
+                {
+                    id: createUID(),
+                    name: 'emptyFile',
+                    category: '',
+                    createDate: getMockPriorDate(144)
+                }
+            ]);
+        }, 1000);
+    });
+};
+// -----------------------------------------------------------------------------
+// Provider
+// -----------------------------------------------------------------------------
+const Provider = ({ children }) => {
+    const [files, setFiles] = useState([]);
+    const attachFile = useCallback((file) => {
+        if (files.some(f => f.id === file.id))
+            return;
+        const type = getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '');
+        if (type === 'image' && file.thumbnail)
+            setFiles(current => [file, ...current]);
+        else
+            setFiles(current => [...current, file]);
+    }, [files]);
+    // Remove a file from the state array
+    const cancelFile = useCallback((id) => {
+        if (uploadsInProgress[id]) {
+            uploadsInProgress[id].abort();
+            delete uploadsInProgress[id];
+        }
+        setFiles(current => current.filter(f => f.id !== id));
+    }, [uploadsInProgress]);
+    // Mock an api request and remove a file from the state array
+    const deleteFile = useCallback(async (id) => {
+        const file = files.find(f => f.id === id);
+        fetch(`http://cosmos.eng.pega.com/attachments/${file.id}`, { method: 'DELETE' }).then(() => {
+            setFiles(current => current.filter(f => f.id !== file.id));
+        });
+    }, [files]);
+    const setProgress = useCallback((file, progress) => {
+        setFiles(current => current.map(f => {
+            if (file.id === f.id) {
+                f.progress = progress;
+            }
+            return f;
+        }));
+    }, []);
+    useAfterInitialEffect(() => {
+        files.forEach(file => {
+            // Return if we have a mock attachment resource object or a File object that is currently uploading.
+            if (!hasProp(file, 'File') || typeof file.progress === 'number')
+                return;
+            // For each File in the array, not uploaded yet, make a POST to the mock service.
+            postFile({
+                file,
+                onLoadStart: setProgress,
+                onProgress: setProgress,
+                onLoad(loadedFile) {
+                    delete uploadsInProgress[loadedFile.id];
+                    setFiles(cur => {
+                        return cur.map(f => {
+                            if (f.id === loadedFile.id) {
+                                return {
+                                    ...loadedFile,
+                                    id: createUID(),
+                                    createDate: Date.now()
+                                };
+                            }
+                            return f;
+                        });
+                    });
+                }
+            });
+        });
+    }, [files.length, setProgress]);
+    const value = useMemo(() => ({
+        files,
+        setFiles,
+        attachFile,
+        cancelFile,
+        deleteFile
+    }), [files, attachFile, cancelFile, deleteFile]);
+    return _jsx(FileServiceContext.Provider, { value: value, children: children }, void 0);
+};
+export default Provider;
+//# sourceMappingURL=FileService.mock.js.map

package/lib/work/CaseView/FileService.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileService.mock.js","sourceRoot":"","sources":["../../../src/work/CaseView/FileService.mock.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  ReactNode,\n  useState,\n  FunctionComponent,\n  useCallback,\n  useMemo,\n  Dispatch,\n  SetStateAction\n} from 'react';\n\nimport {\n  createUID,\n  FileUploadItemProps,\n  getKindFromMimeType,\n  getMimeTypeFromFile,\n  hasProp,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\n// -----------------------------------------------------------------------------\n// MockFileResourceObject\n// -----------------------------------------------------------------------------\nexport interface MockFileAttachmentResource {\n  id: string;\n  name: string;\n  category: string;\n  thumbnail?: string;\n  createDate?: number;\n  modifiedDate?: number;\n}\n\n// -----------------------------------------------------------------------------\n// MockFileSelectionObject\n// -----------------------------------------------------------------------------\nexport interface MockFileUploadItem\n  extends Pick<MockFileAttachmentResource, 'id' | 'category'>,\n    FileUploadItemProps {\n  File: File;\n}\n\n// -----------------------------------------------------------------------------\n// FileServiceContextValue\n// -----------------------------------------------------------------------------\nexport interface FileServiceContextValue {\n  files: (MockFileAttachmentResource | MockFileUploadItem)[];\n  setFiles: Dispatch<SetStateAction<FileServiceContextValue['files']>>;\n  attachFile: (file: MockFileUploadItem) => void;\n  cancelFile: (id: MockFileAttachmentResource['id']) => void;\n  deleteFile: (id: MockFileAttachmentResource['id']) => void;\n}\n\n// -----------------------------------------------------------------------------\n// FileServiceContext\n// -----------------------------------------------------------------------------\nexport const FileServiceContext = createContext<FileServiceContextValue>({\n  files: [],\n  setFiles: () => {},\n  attachFile: () => {},\n  cancelFile: () => {},\n  deleteFile: () => {}\n});\n\n// -----------------------------------------------------------------------------\n// FilePostArg\n// -----------------------------------------------------------------------------\ninterface FilePostArg {\n  file: MockFileUploadItem;\n  onLoadStart: (file: MockFileUploadItem, progress: number) => void;\n  onProgress: (file: MockFileUploadItem, progress: number) => void;\n  onLoad: (file: MockFileUploadItem) => void;\n}\n\n// -----------------------------------------------------------------------------\n// uploadsInProgress\n// -----------------------------------------------------------------------------\nconst uploadsInProgress: Record<string, XMLHttpRequest> = {};\n\n// -----------------------------------------------------------------------------\n// postFile\n// -----------------------------------------------------------------------------\nconst postFile = ({ file, onLoadStart, onProgress, onLoad }: FilePostArg) => {\n  const xhr = new XMLHttpRequest();\n  const fd = new FormData();\n\n  uploadsInProgress[file.id] = xhr;\n\n  xhr.upload.onloadstart = () => {\n    onLoadStart(file, 0);\n  };\n\n  xhr.upload.onprogress = ({ lengthComputable, loaded, total }) => {\n    if (lengthComputable) {\n      onProgress(file, (loaded / total) * 100);\n    }\n  };\n\n  xhr.upload.onload = () => {\n    onLoad(file);\n  };\n\n  // This is a mock api used to demo upload progress\n  xhr.open('POST', 'http://cosmos.eng.pega.com/attachments');\n  xhr.setRequestHeader('Content-Type', 'multipart/form-data');\n  fd.append('attachments', file.File);\n  xhr.send(fd);\n\n  return xhr;\n};\n\n// Mock date generator\nconst getMockPriorDate = (h: number) => {\n  const d = new Date();\n  return d.setHours(d.getHours() - h);\n};\n\nexport const mockCategories: ('HR' | 'Marketing' | 'Sales' | 'Accounting' | 'Engineering')[] = [\n  'HR',\n  'Marketing',\n  'Sales',\n  'Accounting',\n  'Engineering'\n];\n\nexport const mockAttachmentListRequest = (): Promise<MockFileAttachmentResource[]> => {\n  return new Promise(resolve => {\n    setTimeout(() => {\n      resolve([\n        {\n          id: createUID(),\n          name: 'File.doc',\n          category: mockCategories[0],\n          createDate: getMockPriorDate(1)\n        },\n        {\n          id: createUID(),\n          name: 'File.ppt',\n          category: mockCategories[1],\n          createDate: getMockPriorDate(4)\n        },\n        {\n          id: createUID(),\n          name: 'File.xls',\n          category: mockCategories[2],\n          createDate: getMockPriorDate(30)\n        },\n        {\n          id: createUID(),\n          name: 'emptyFile',\n          category: '',\n          createDate: getMockPriorDate(144)\n        }\n      ]);\n    }, 1000);\n  });\n};\n\n// -----------------------------------------------------------------------------\n// Provider\n// -----------------------------------------------------------------------------\nconst Provider: FunctionComponent<{ children: ReactNode }> = ({ children }) => {\n  const [files, setFiles] = useState<FileServiceContextValue['files']>([]);\n\n  const attachFile = useCallback(\n    (file: MockFileUploadItem) => {\n      if (files.some(f => f.id === file.id)) return;\n\n      const type = getKindFromMimeType(getMimeTypeFromFile(file.name) ?? '');\n      if (type === 'image' && file.thumbnail) setFiles(current => [file, ...current]);\n      else setFiles(current => [...current, file]);\n    },\n    [files]\n  );\n\n  // Remove a file from the state array\n  const cancelFile = useCallback(\n    (id: MockFileUploadItem['id']) => {\n      if (uploadsInProgress[id]) {\n        uploadsInProgress[id].abort();\n        delete uploadsInProgress[id];\n      }\n      setFiles(current => current.filter(f => f.id !== id));\n    },\n    [uploadsInProgress]\n  );\n\n  // Mock an api request and remove a file from the state array\n  const deleteFile = useCallback(\n    async (id: MockFileUploadItem['id']) => {\n      const file = files.find(f => f.id === id) as MockFileAttachmentResource;\n      fetch(`http://cosmos.eng.pega.com/attachments/${file.id}`, { method: 'DELETE' }).then(() => {\n        setFiles(current => current.filter(f => f.id !== file.id));\n      });\n    },\n    [files]\n  );\n\n  const setProgress = useCallback((file: MockFileUploadItem, progress?: number) => {\n    setFiles(current =>\n      current.map(f => {\n        if (file.id === f.id) {\n          (f as MockFileUploadItem).progress = progress;\n        }\n        return f;\n      })\n    );\n  }, []);\n\n  useAfterInitialEffect(() => {\n    files.forEach(file => {\n      // Return if we have a mock attachment resource object or a File object that is currently uploading.\n      if (!hasProp(file, 'File') || typeof file.progress === 'number') return;\n\n      // For each File in the array, not uploaded yet, make a POST to the mock service.\n      postFile({\n        file,\n        onLoadStart: setProgress,\n        onProgress: setProgress,\n        onLoad(loadedFile) {\n          delete uploadsInProgress[loadedFile.id];\n\n          setFiles(cur => {\n            return cur.map(f => {\n              if (f.id === loadedFile.id) {\n                return {\n                  ...loadedFile,\n                  id: createUID(),\n                  createDate: Date.now()\n                };\n              }\n\n              return f;\n            });\n          });\n        }\n      });\n    });\n  }, [files.length, setProgress]);\n\n  const value: FileServiceContextValue = useMemo(\n    () => ({\n      files,\n      setFiles,\n      attachFile,\n      cancelFile,\n      deleteFile\n    }),\n    [files, attachFile, cancelFile, deleteFile]\n  );\n\n  return <FileServiceContext.Provider value={value}>{children}</FileServiceContext.Provider>;\n};\n\nexport default Provider;\n"]}

package/lib/work/CaseView/MobileCaseView.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { MobileCaseView } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/CaseView/Mobile',
+    component: MobileCaseView,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const MobileCaseViewDemo = () => {
+    const tabs = Array.from({ length: 2 }, (undef, i) => {
+        const key = `${i + 1}`;
+        return { name: `Hello tab ${key}`, id: key };
+    });
+    const [currentTabId, setCurrentTabId] = useState(tabs[0].id);
+    const [tabContent, setTabContent] = useState(tabs[0].name);
+    const onTabClick = useCallback((id) => {
+        setCurrentTabId(id);
+        setTabContent(tabs.find(tab => tab.id === id)?.name ?? '');
+    }, []);
+    return (_jsx(MobileCaseView, { title: 'Mobile Case View Story', tabs: {
+            tabs,
+            onTabClick,
+            currentTabId
+        }, tabContent: _jsx("div", { style: { padding: '2.5rem' }, children: tabContent }, void 0) }, void 0));
+};
+//# sourceMappingURL=MobileCaseView.stories.js.map

package/lib/work/CaseView/MobileCaseView.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileCaseView.stories.js","sourceRoot":"","sources":["../../../src/work/CaseView/MobileCaseView.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,cAAc;IACzB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QAClD,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QACvB,OAAO,EAAE,IAAI,EAAE,aAAa,GAAG,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE3D,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAC5C,eAAe,CAAC,EAAE,CAAC,CAAC;QACpB,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,cAAc,IACb,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE;YACJ,IAAI;YACJ,UAAU;YACV,YAAY;SACb,EACD,UAAU,EAAE,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAG,UAAU,WAAO,WACjE,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState, useCallback } from 'react';\n\nimport { MobileCaseView } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/CaseView/Mobile',\n  component: MobileCaseView,\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nexport const MobileCaseViewDemo = () => {\n  const tabs = Array.from({ length: 2 }, (undef, i) => {\n    const key = `${i + 1}`;\n    return { name: `Hello tab ${key}`, id: key };\n  });\n\n  const [currentTabId, setCurrentTabId] = useState(tabs[0].id);\n  const [tabContent, setTabContent] = useState(tabs[0].name);\n\n  const onTabClick = useCallback((id: string) => {\n    setCurrentTabId(id);\n    setTabContent(tabs.find(tab => tab.id === id)?.name ?? '');\n  }, []);\n\n  return (\n    <MobileCaseView\n      title='Mobile Case View Story'\n      tabs={{\n        tabs,\n        onTabClick,\n        currentTabId\n      }}\n      tabContent={<div style={{ padding: '2.5rem' }}>{tabContent}</div>}\n    />\n  );\n};\n"]}

package/lib/work/CaseView/Pulse.mocks.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Tabs, TabPanel, Flex, Table, Card, CardContent } from '@pega/cosmos-react-core';
+import { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';
+const msInHour = 60 * 60 * 1000;
+export const PulseMock = ({ markdownMap }) => {
+    const [currentTab, setCurrentTab] = useState('pulse');
+    const historyData = useMemo(() => Array.from({ length: 37 }, (_, i) => {
+        return {
+            id: i,
+            date: new Date(Date.now() - i * 24 * msInHour + Math.random() * 2 * msInHour - msInHour).toLocaleString(),
+            description: `Description for history item ${i + 1}`,
+            performedBy: 'Cosmos Operator'
+        };
+    }), []);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Tabs, { tabs: [
+                    { id: 'pulse', name: 'Pulse' },
+                    { id: 'history', name: 'History' }
+                ], currentTabId: currentTab, onTabClick: setCurrentTab }, void 0), _jsxs(TabPanel, { tabId: currentTab, children: [currentTab === 'pulse' && _jsx(FeedDemo, { markdownMap: markdownMap }, void 0), currentTab === 'history' && (_jsx(Card, { children: _jsx(CardContent, { children: _jsx(Table, { title: 'History', data: historyData, columns: [
+                                    { renderer: 'date', label: 'Date' },
+                                    { renderer: 'description', label: 'Description' },
+                                    { renderer: 'performedBy', label: 'Performed By' }
+                                ] }, void 0) }, void 0) }, void 0))] }, void 0)] }, void 0));
+};
+//# sourceMappingURL=Pulse.mocks.js.map

package/lib/work/CaseView/Pulse.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pulse.mocks.js","sourceRoot":"","sources":["../../../src/work/CaseView/Pulse.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEzF,OAAO,EAAE,QAAQ,EAAE,MAAM,uDAAuD,CAAC;AAEjF,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;AAEhC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,WAAW,EAA2B,EAAE,EAAE;IACpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAEtD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CACH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QAClC,OAAO;YACL,EAAE,EAAE,CAAC;YACL,IAAI,EAAE,IAAI,IAAI,CACZ,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,QAAQ,GAAG,QAAQ,CACzE,CAAC,cAAc,EAAE;YAClB,WAAW,EAAE,gCAAgC,CAAC,GAAG,CAAC,EAAE;YACpD,WAAW,EAAE,iBAAiB;SAC/B,CAAC;IACJ,CAAC,CAAC,EACJ,EAAE,CACH,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IACH,IAAI,EAAE;oBACJ,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE;oBAC9B,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;iBACnC,EACD,YAAY,EAAE,UAAU,EACxB,UAAU,EAAE,aAAa,WACzB,EAEF,MAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,aACxB,UAAU,KAAK,OAAO,IAAI,KAAC,QAAQ,IAAC,WAAW,EAAE,WAAW,WAAI,EAChE,UAAU,KAAK,SAAS,IAAI,CAC3B,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,KAAK,IACJ,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE;oCACP,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;oCACnC,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;oCACjD,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE;iCACnD,WACD,WACU,WACT,CACR,YACQ,YACN,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useMemo, useState } from 'react';\n\nimport { Tabs, TabPanel, Flex, Table, Card, CardContent } from '@pega/cosmos-react-core';\nimport { MDMap } from '@pega/cosmos-react-rte';\nimport { FeedDemo } from '@pega/cosmos-react-demos/lib/social/Feed/Feed.stories';\n\nconst msInHour = 60 * 60 * 1000;\n\nexport const PulseMock = ({ markdownMap }: { markdownMap?: MDMap }) => {\n  const [currentTab, setCurrentTab] = useState('pulse');\n\n  const historyData = useMemo(\n    () =>\n      Array.from({ length: 37 }, (_, i) => {\n        return {\n          id: i,\n          date: new Date(\n            Date.now() - i * 24 * msInHour + Math.random() * 2 * msInHour - msInHour\n          ).toLocaleString(),\n          description: `Description for history item ${i + 1}`,\n          performedBy: 'Cosmos Operator'\n        };\n      }),\n    []\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Tabs\n        tabs={[\n          { id: 'pulse', name: 'Pulse' },\n          { id: 'history', name: 'History' }\n        ]}\n        currentTabId={currentTab}\n        onTabClick={setCurrentTab}\n      />\n\n      <TabPanel tabId={currentTab}>\n        {currentTab === 'pulse' && <FeedDemo markdownMap={markdownMap} />}\n        {currentTab === 'history' && (\n          <Card>\n            <CardContent>\n              <Table\n                title='History'\n                data={historyData}\n                columns={[\n                  { renderer: 'date', label: 'Date' },\n                  { renderer: 'description', label: 'Description' },\n                  { renderer: 'performedBy', label: 'Performed By' }\n                ]}\n              />\n            </CardContent>\n          </Card>\n        )}\n      </TabPanel>\n    </Flex>\n  );\n};\n"]}

package/lib/work/ConfigurableLayout/ConfigurableLayout.stories.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, NarrowWidePage } from '@pega/cosmos-react-core';
+import { ConfigurableLayout, useTrackWrappedRegions } from '@pega/cosmos-react-work';
+import { AppShellDemo as AppShell } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';
+export default {
+    title: 'Work/ConfigurableLayout',
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+const StyledPlaceholder = styled.div(({ verticalPadding }) => {
+    return css `
+    background: white;
+    border: 0.0625rem black dashed;
+    text-align: center;
+    min-height: 100%;
+    padding: ${`${verticalPadding}rem`} 0;
+  `;
+});
+const Placeholder = ({ text }) => {
+    const props = {
+        verticalPadding: Math.floor(Math.random() * (4 - 1 + 1)) + 1
+    };
+    return (_jsx(Flex, { as: StyledPlaceholder, container: { direction: 'column', justify: 'center' }, ...props, children: _jsx("p", { children: text }, void 0) }, void 0));
+};
+const regionAItems = [
+    {
+        id: 'a0',
+        content: _jsx(Placeholder, { text: 'A0' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a1',
+        content: _jsx(Placeholder, { text: 'A1' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a2',
+        content: _jsx(Placeholder, { text: 'A2' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a3',
+        content: _jsx(Placeholder, { text: 'A3' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a4',
+        content: _jsx(Placeholder, { text: 'A4' }, void 0),
+        layoutConfig: {
+            width: '3/4'
+        }
+    },
+    {
+        id: 'a5',
+        content: _jsx(Placeholder, { text: 'A5' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a6',
+        content: _jsx(Placeholder, { text: 'A6' }, void 0),
+        layoutConfig: {
+            width: '1/3'
+        }
+    },
+    {
+        id: 'a7',
+        content: _jsx(Placeholder, { text: 'A7' }, void 0),
+        layoutConfig: {
+            width: '2/3'
+        }
+    }
+];
+const regionBItems = [
+    {
+        id: 'b0',
+        content: _jsx(Placeholder, { text: 'B0' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b1',
+        content: _jsx(Placeholder, { text: 'B1' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b2',
+        content: _jsx(Placeholder, { text: 'B2' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b3',
+        content: _jsx(Placeholder, { text: 'B3' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b4',
+        content: _jsx(Placeholder, { text: 'B4' }, void 0),
+        layoutConfig: {
+            width: '1/2'
+        }
+    },
+    {
+        id: 'b5',
+        content: _jsx(Placeholder, { text: 'B5' }, void 0),
+        layoutConfig: {
+            width: '1/2'
+        }
+    },
+    {
+        id: 'b6',
+        content: _jsx(Placeholder, { text: 'B6' }, void 0),
+        layoutConfig: {
+            width: 'full'
+        }
+    },
+    {
+        id: 'b7',
+        content: _jsx(Placeholder, { text: 'B7' }, void 0),
+        layoutConfig: {
+            width: '1/3'
+        }
+    },
+    {
+        id: 'b8',
+        content: _jsx(Placeholder, { text: 'B8' }, void 0),
+        layoutConfig: {
+            width: '2/3'
+        }
+    },
+    {
+        id: 'b9',
+        content: _jsx(Placeholder, { text: 'B9' }, void 0),
+        layoutConfig: {
+            width: '3/4'
+        }
+    },
+    {
+        id: 'b10',
+        content: _jsx(Placeholder, { text: 'B10' }, void 0),
+        layoutConfig: {
+            width: '1/4'
+        }
+    },
+    {
+        id: 'b11',
+        content: _jsx(Placeholder, { text: 'B11' }, void 0),
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 330,
+            fillAvailable: false
+        }
+    }
+];
+export const ConfigurableLayoutInPageRegions = () => {
+    const regionElArray = useRef(new Array(2).fill(null));
+    const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);
+    return (_jsx(AppShell, { main: _jsx(NarrowWidePage, { regionsRef: containerRef, a: _jsx(ConfigurableLayout, { ref: (el) => {
+                    if (el)
+                        regionElArray.current[0] = el;
+                }, arrangement: { size: 'narrow', hasWrapped: regionWrappedStates[0] }, items: regionAItems }, void 0), b: _jsx(ConfigurableLayout, { ref: (el) => {
+                    if (el)
+                        regionElArray.current[1] = el;
+                }, arrangement: { size: 'main', hasWrapped: regionWrappedStates[1] }, items: regionBItems }, void 0), title: 'Configurable Layout in Narrow Wide Page' }, void 0) }, void 0));
+};
+//# sourceMappingURL=ConfigurableLayout.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.stories.js","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, NarrowWidePage } from '@pega/cosmos-react-core';\nimport {\n  ConfigurableLayout,\n  ConfigurableLayoutProps,\n  useTrackWrappedRegions\n} from '@pega/cosmos-react-work';\nimport { AppShellDemo as AppShell } from '@pega/cosmos-react-demos/lib/core/AppShell/AppShell.stories';\n\nexport default {\n  title: 'Work/ConfigurableLayout',\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nconst StyledPlaceholder = styled.div(({ verticalPadding }: { verticalPadding: number }) => {\n  return css`\n    background: white;\n    border: 0.0625rem black dashed;\n    text-align: center;\n    min-height: 100%;\n    padding: ${`${verticalPadding}rem`} 0;\n  `;\n});\n\nconst Placeholder = ({ text }: { text: string }) => {\n  const props = {\n    verticalPadding: Math.floor(Math.random() * (4 - 1 + 1)) + 1\n  };\n\n  return (\n    <Flex as={StyledPlaceholder} container={{ direction: 'column', justify: 'center' }} {...props}>\n      <p>{text}</p>\n    </Flex>\n  );\n};\n\nconst regionAItems = [\n  {\n    id: 'a0',\n    content: <Placeholder text='A0' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a1',\n    content: <Placeholder text='A1' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a2',\n    content: <Placeholder text='A2' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a3',\n    content: <Placeholder text='A3' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a4',\n    content: <Placeholder text='A4' />,\n    layoutConfig: {\n      width: '3/4'\n    }\n  },\n  {\n    id: 'a5',\n    content: <Placeholder text='A5' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'a6',\n    content: <Placeholder text='A6' />,\n    layoutConfig: {\n      width: '1/3'\n    }\n  },\n  {\n    id: 'a7',\n    content: <Placeholder text='A7' />,\n    layoutConfig: {\n      width: '2/3'\n    }\n  }\n];\n\nconst regionBItems = [\n  {\n    id: 'b0',\n    content: <Placeholder text='B0' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b1',\n    content: <Placeholder text='B1' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b2',\n    content: <Placeholder text='B2' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b3',\n    content: <Placeholder text='B3' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 150\n    }\n  },\n  {\n    id: 'b4',\n    content: <Placeholder text='B4' />,\n    layoutConfig: {\n      width: '1/2'\n    }\n  },\n  {\n    id: 'b5',\n    content: <Placeholder text='B5' />,\n    layoutConfig: {\n      width: '1/2'\n    }\n  },\n  {\n    id: 'b6',\n    content: <Placeholder text='B6' />,\n    layoutConfig: {\n      width: 'full'\n    }\n  },\n  {\n    id: 'b7',\n    content: <Placeholder text='B7' />,\n    layoutConfig: {\n      width: '1/3'\n    }\n  },\n  {\n    id: 'b8',\n    content: <Placeholder text='B8' />,\n    layoutConfig: {\n      width: '2/3'\n    }\n  },\n  {\n    id: 'b9',\n    content: <Placeholder text='B9' />,\n    layoutConfig: {\n      width: '3/4'\n    }\n  },\n  {\n    id: 'b10',\n    content: <Placeholder text='B10' />,\n    layoutConfig: {\n      width: '1/4'\n    }\n  },\n  {\n    id: 'b11',\n    content: <Placeholder text='B11' />,\n    layoutConfig: {\n      width: '1/4',\n      minWidth: 330,\n      fillAvailable: false\n    }\n  }\n];\n\nexport const ConfigurableLayoutInPageRegions = () => {\n  const regionElArray = useRef(new Array(2).fill(null));\n  const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);\n\n  return (\n    <AppShell\n      main={\n        <NarrowWidePage\n          regionsRef={containerRef}\n          a={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[0] = el;\n              }}\n              arrangement={{ size: 'narrow', hasWrapped: regionWrappedStates[0] }}\n              items={regionAItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          b={\n            <ConfigurableLayout\n              ref={(el: HTMLElement) => {\n                if (el) regionElArray.current[1] = el;\n              }}\n              arrangement={{ size: 'main', hasWrapped: regionWrappedStates[1] }}\n              items={regionBItems as ConfigurableLayoutProps['items']}\n            />\n          }\n          title='Configurable Layout in Narrow Wide Page'\n        />\n      }\n    />\n  );\n};\n"]}

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

@@ -3,7 +3,7 @@ import { ConfirmationProps } from '@pega/cosmos-react-work';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface ConfirmationStoryProps {
-    title?: ConfirmationProps['title'];
+    title: ConfirmationProps['title'];
 }
 export declare const ConfirmationDemo: Story<ConfirmationStoryProps>;
 //# sourceMappingURL=Confirmation.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAI1E,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAS1D,CAAC"}
+{"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAgB,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAM1E,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,sBAAsB,CAuB1D,CAAC"}

package/lib/work/Confirmation/Confirmation.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Flex } from '@pega/cosmos-react-core';
+import { Confirmation } from '@pega/cosmos-react-work';
+import { FieldValueListDemo } from '@pega/cosmos-react-demos/lib/core/FieldValueList/FieldValueList.stories';
+import { TaskListDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/TaskList.stories';
+import { StyledFlex } from './Confirmation.styles';
+export default {
+    title: 'Work/Confirmation',
+    component: Confirmation
+};
+export const ConfirmationDemo = (args) => {
+    const [showConfirmation, setShowConfirmation] = useState(true);
+    return (_jsxs(Flex, { as: StyledFlex, container: { justify: 'center', alignItems: 'center' }, children: [showConfirmation && (_jsx(Confirmation, { title: args.title, details: _jsx(FieldValueListDemo, { name: 'Project', value: 'Pega Cosmos', fields: [] }, void 0), whatsNext: [
+                    'Send references',
+                    'Collect information on the case',
+                    'Prepare a demonstration'
+                ], tasks: _jsx(TaskListDemo, {}, void 0), onClose: () => setShowConfirmation(false) }, void 0)), !showConfirmation && (_jsx(Button, { onClick: () => setShowConfirmation(true), children: "Show confirmation" }, void 0))] }, void 0));
+};
+ConfirmationDemo.args = {
+    title: 'US-1337 confirmation'
+};
+ConfirmationDemo.argTypes = {
+    title: { control: { type: 'text' } }
+};
+//# sourceMappingURL=Confirmation.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.stories.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAqB,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,yEAAyE,CAAC;AAC7G,OAAO,EAAE,YAAY,EAAE,MAAM,0DAA0D,CAAC;AAExF,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAMV,MAAM,CAAC,MAAM,gBAAgB,GAAkC,CAAC,IAA4B,EAAE,EAAE;IAC9F,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,aACzE,gBAAgB,IAAI,CACnB,KAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,KAAC,kBAAkB,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,aAAa,EAAC,MAAM,EAAE,EAAE,WAAI,EAC9E,SAAS,EAAE;oBACT,iBAAiB;oBACjB,iCAAiC;oBACjC,yBAAyB;iBAC1B,EACD,KAAK,EAAE,KAAC,YAAY,aAAG,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,WACzC,CACH,EACA,CAAC,gBAAgB,IAAI,CACpB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,0CAA4B,CAC7E,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, Flex } from '@pega/cosmos-react-core';\nimport { Confirmation, ConfirmationProps } from '@pega/cosmos-react-work';\nimport { FieldValueListDemo } from '@pega/cosmos-react-demos/lib/core/FieldValueList/FieldValueList.stories';\nimport { TaskListDemo } from '@pega/cosmos-react-demos/lib/work/Tasks/TaskList.stories';\n\nimport { StyledFlex } from './Confirmation.styles';\n\nexport default {\n  title: 'Work/Confirmation',\n  component: Confirmation\n} as Meta;\n\ninterface ConfirmationStoryProps {\n  title: ConfirmationProps['title'];\n}\n\nexport const ConfirmationDemo: Story<ConfirmationStoryProps> = (args: ConfirmationStoryProps) => {\n  const [showConfirmation, setShowConfirmation] = useState(true);\n\n  return (\n    <Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>\n      {showConfirmation && (\n        <Confirmation\n          title={args.title}\n          details={<FieldValueListDemo name='Project' value='Pega Cosmos' fields={[]} />}\n          whatsNext={[\n            'Send references',\n            'Collect information on the case',\n            'Prepare a demonstration'\n          ]}\n          tasks={<TaskListDemo />}\n          onClose={() => setShowConfirmation(false)}\n        />\n      )}\n      {!showConfirmation && (\n        <Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>\n      )}\n    </Flex>\n  );\n};\n\nConfirmationDemo.args = {\n  title: 'US-1337 confirmation'\n};\n\nConfirmationDemo.argTypes = {\n  title: { control: { type: 'text' } }\n};\n"]}

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

@@ -0,0 +1,2 @@
+export declare const StyledFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Confirmation.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.styles.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yGAItB,CAAC"}

package/lib/work/Confirmation/Confirmation.styles.js

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const StyledFlex = styled.div `
+  article {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=Confirmation.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.styles.js","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAInC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledFlex = styled.div`\n  article {\n    width: 100%;\n  }\n`;\n"]}

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

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

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

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