@pega/cosmos-react-demos 5.0.0-dev.4.8 → 5.0.0-dev.5.0

package/jsx/work/ConfigurableLayout/ConfigurableLayout.mocks.jsx

@@ -0,0 +1,166 @@
+import { Flex } from '@pega/cosmos-react-core';
+import { StyledPlaceholder } from './ConfigurableLayout.styles';
+export const Placeholder = ({ text }) => {
+    const props = {
+        verticalPadding: Math.floor(Math.random() * (4 - 1 + 1)) + 1
+    };
+    return (<Flex as={StyledPlaceholder} container={{ direction: 'column', justify: 'center' }} {...props}>
+      <p>{text}</p>
+    </Flex>);
+};
+export const regionAItems = [
+    {
+        id: 'a0',
+        content: <Placeholder text='A0'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a1',
+        content: <Placeholder text='A1'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a2',
+        content: <Placeholder text='A2'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a3',
+        content: <Placeholder text='A3'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a4',
+        content: <Placeholder text='A4'/>,
+        layoutConfig: {
+            width: '3/4'
+        }
+    },
+    {
+        id: 'a5',
+        content: <Placeholder text='A5'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'a6',
+        content: <Placeholder text='A6'/>,
+        layoutConfig: {
+            width: '1/3'
+        }
+    },
+    {
+        id: 'a7',
+        content: <Placeholder text='A7'/>,
+        layoutConfig: {
+            width: '2/3'
+        }
+    }
+];
+export const regionBItems = [
+    {
+        id: 'b0',
+        content: <Placeholder text='B0'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b1',
+        content: <Placeholder text='B1'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b2',
+        content: <Placeholder text='B2'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b3',
+        content: <Placeholder text='B3'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 150
+        }
+    },
+    {
+        id: 'b4',
+        content: <Placeholder text='B4'/>,
+        layoutConfig: {
+            width: '1/2'
+        }
+    },
+    {
+        id: 'b5',
+        content: <Placeholder text='B5'/>,
+        layoutConfig: {
+            width: '1/2'
+        }
+    },
+    {
+        id: 'b6',
+        content: <Placeholder text='B6'/>,
+        layoutConfig: {
+            width: 'full'
+        }
+    },
+    {
+        id: 'b7',
+        content: <Placeholder text='B7'/>,
+        layoutConfig: {
+            width: '1/3'
+        }
+    },
+    {
+        id: 'b8',
+        content: <Placeholder text='B8'/>,
+        layoutConfig: {
+            width: '2/3'
+        }
+    },
+    {
+        id: 'b9',
+        content: <Placeholder text='B9'/>,
+        layoutConfig: {
+            width: '3/4'
+        }
+    },
+    {
+        id: 'b10',
+        content: <Placeholder text='B10'/>,
+        layoutConfig: {
+            width: '1/4'
+        }
+    },
+    {
+        id: 'b11',
+        content: <Placeholder text='B11'/>,
+        layoutConfig: {
+            width: '1/4',
+            minWidth: 330,
+            fillAvailable: false
+        }
+    }
+];
+//# sourceMappingURL=ConfigurableLayout.mocks.jsx.map

package/jsx/work/ConfigurableLayout/ConfigurableLayout.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.mocks.jsx","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Flex } from '@pega/cosmos-react-core';\n\nimport { StyledPlaceholder } from './ConfigurableLayout.styles';\n\nexport const 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\nexport const 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\nexport const 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"]}

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

@@ -0,0 +1,5 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const ConfigurableLayoutInPageRegions: StoryFn;
+//# sourceMappingURL=ConfigurableLayout.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.stories.d.ts","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAUtD,wBAMU;AAEV,eAAO,MAAM,+BAA+B,EAAE,OAgC7C,CAAC"}

package/jsx/work/ConfigurableLayout/ConfigurableLayout.stories.jsx

@@ -0,0 +1,24 @@
+import { useRef } from 'react';
+import { NarrowWidePage } from '@pega/cosmos-react-core';
+import { ConfigurableLayout, useTrackWrappedRegions } from '@pega/cosmos-react-work';
+import { AppShellDemo as AppShell } from '../../core/AppShell/AppShell.stories';
+import { regionAItems, regionBItems } from './ConfigurableLayout.mocks';
+export default {
+    title: 'Work/ConfigurableLayout',
+    component: ConfigurableLayout,
+    parameters: {
+        layout: 'fullscreen'
+    }
+};
+export const ConfigurableLayoutInPageRegions = () => {
+    const regionElArray = useRef(new Array(2).fill(null));
+    const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);
+    return (<AppShell main={<NarrowWidePage regionsRef={containerRef} a={<ConfigurableLayout ref={(el) => {
+                    if (el)
+                        regionElArray.current[0] = el;
+                }} arrangement={{ size: 'narrow', hasWrapped: regionWrappedStates[0] }} items={regionAItems}/>} b={<ConfigurableLayout ref={(el) => {
+                    if (el)
+                        regionElArray.current[1] = el;
+                }} arrangement={{ size: 'main', hasWrapped: regionWrappedStates[1] }} items={regionBItems}/>} title='Configurable Layout in Narrow Wide Page'/>}/>);
+};
+//# sourceMappingURL=ConfigurableLayout.stories.jsx.map

package/jsx/work/ConfigurableLayout/ConfigurableLayout.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.stories.jsx","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAGrF,OAAO,EAAE,YAAY,IAAI,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,kBAAkB;IAC7B,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,+BAA+B,GAAY,GAAG,EAAE;IAC3D,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACtD,MAAM,EAAE,YAAY,EAAE,mBAAmB,EAAE,GAAG,sBAAsB,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE5F,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CACH,CAAC,cAAc,CACb,UAAU,CAAC,CAAC,YAAY,CAAC,CACzB,CAAC,CAAC,CACA,CAAC,kBAAkB,CACjB,GAAG,CAAC,CAAC,CAAC,EAAe,EAAE,EAAE;oBACvB,IAAI,EAAE;wBAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBACxC,CAAC,CAAC,CACF,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,CACpE,KAAK,CAAC,CAAC,YAAgD,CAAC,EACxD,CACH,CACD,CAAC,CAAC,CACA,CAAC,kBAAkB,CACjB,GAAG,CAAC,CAAC,CAAC,EAAe,EAAE,EAAE;oBACvB,IAAI,EAAE;wBAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;gBACxC,CAAC,CAAC,CACF,WAAW,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC,CAClE,KAAK,CAAC,CAAC,YAAgD,CAAC,EACxD,CACH,CACD,KAAK,CAAC,yCAAyC,EAC/C,CACH,EACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useRef } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { NarrowWidePage } from '@pega/cosmos-react-core';\nimport { ConfigurableLayout, useTrackWrappedRegions } from '@pega/cosmos-react-work';\nimport type { ConfigurableLayoutProps } from '@pega/cosmos-react-work';\n\nimport { AppShellDemo as AppShell } from '../../core/AppShell/AppShell.stories';\n\nimport { regionAItems, regionBItems } from './ConfigurableLayout.mocks';\n\nexport default {\n  title: 'Work/ConfigurableLayout',\n  component: ConfigurableLayout,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const ConfigurableLayoutInPageRegions: StoryFn = () => {\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/jsx/work/ConfigurableLayout/ConfigurableLayout.styles.d.ts

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

package/jsx/work/ConfigurableLayout/ConfigurableLayout.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.styles.d.ts","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;qBAAuD,MAAM;SAQzF,CAAC"}

package/jsx/work/ConfigurableLayout/ConfigurableLayout.styles.js

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+export const StyledPlaceholder = styled.div(({ verticalPadding }) => {
+    return css `
+    background: white;
+    border: 0.0625rem black dashed;
+    text-align: center;
+    min-height: 100%;
+    padding: ${`${verticalPadding}rem`} 0;
+  `;
+});
+//# sourceMappingURL=ConfigurableLayout.styles.js.map

package/jsx/work/ConfigurableLayout/ConfigurableLayout.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurableLayout.styles.js","sourceRoot":"","sources":["../../../src/work/ConfigurableLayout/ConfigurableLayout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,eAAe,EAA+B,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;;;;;eAKG,GAAG,eAAe,KAAK;GACnC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const 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"]}

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

@@ -0,0 +1,13 @@
+import type { StoryFn } from '@storybook/react';
+import type { ConfirmationProps } from '@pega/cosmos-react-work';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface ConfirmationStoryProps {
+    title: ConfirmationProps['title'];
+    showDetails?: boolean;
+    detailsName?: string;
+    showWhatsNext?: boolean;
+    showTasks?: boolean;
+}
+export declare const ConfirmationDemo: StoryFn<ConfirmationStoryProps>;
+//# sourceMappingURL=Confirmation.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;;AAOjE,wBAGU;AAEV,UAAU,sBAAsB;IAC9B,KAAK,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,sBAAsB,CAwC5D,CAAC"}

package/jsx/work/Confirmation/Confirmation.stories.jsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { Button, FieldValueItem, Flex } from '@pega/cosmos-react-core';
+import { Confirmation, Details } from '@pega/cosmos-react-work';
+import { mockData } from '../../core/FieldValueList/FieldValueList.mocks';
+import { TasksDemo } from '../Tasks/Tasks.stories';
+import { StyledFlex } from './Confirmation.styles';
+export default {
+    title: 'Work/Confirmation',
+    component: Confirmation
+};
+export const ConfirmationDemo = (args) => {
+    const [showConfirmation, setShowConfirmation] = useState(true);
+    const details = (<Details name={args.detailsName}>
+      {mockData.map(({ name, value }) => {
+            return <FieldValueItem name={name} value={value}/>;
+        })}
+    </Details>);
+    return (<Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>
+      {showConfirmation && (<Confirmation title={args.title} details={args.showDetails ? details : undefined} whatsNext={args.showWhatsNext
+                ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']
+                : undefined} tasks={args.showTasks ? (<TasksDemo showVisual={false} showViewSelector={false} count={3} openableTasks={false}/>) : undefined} onClose={() => setShowConfirmation(false)}/>)}
+      {!showConfirmation && (<Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>)}
+    </Flex>);
+};
+ConfirmationDemo.args = {
+    title: 'US-1337 confirmation',
+    showDetails: true,
+    detailsName: 'Case summary',
+    showWhatsNext: true,
+    showTasks: true
+};
+ConfirmationDemo.argTypes = {
+    title: { control: { type: 'text' } },
+    showDetails: { control: { type: 'boolean' } },
+    detailsName: { control: { type: 'text' } },
+    showWhatsNext: { control: { type: 'boolean' } },
+    showTasks: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=Confirmation.stories.jsx.map

package/jsx/work/Confirmation/Confirmation.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmation.stories.jsx","sourceRoot":"","sources":["../../../src/work/Confirmation/Confirmation.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, FieldValueItem, Flex } from '@pega/cosmos-react-core';\nimport { Confirmation, Details } from '@pega/cosmos-react-work';\nimport type { ConfirmationProps } from '@pega/cosmos-react-work';\n\nimport { mockData } from '../../core/FieldValueList/FieldValueList.mocks';\nimport { TasksDemo } from '../Tasks/Tasks.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  showDetails?: boolean;\n  detailsName?: string;\n  showWhatsNext?: boolean;\n  showTasks?: boolean;\n}\n\nexport const ConfirmationDemo: StoryFn<ConfirmationStoryProps> = (args: ConfirmationStoryProps) => {\n  const [showConfirmation, setShowConfirmation] = useState(true);\n\n  const details = (\n    <Details name={args.detailsName}>\n      {mockData.map(({ name, value }) => {\n        return <FieldValueItem name={name} value={value} />;\n      })}\n    </Details>\n  );\n\n  return (\n    <Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>\n      {showConfirmation && (\n        <Confirmation\n          title={args.title}\n          details={args.showDetails ? details : undefined}\n          whatsNext={\n            args.showWhatsNext\n              ? ['Send references', 'Collect information on the case', 'Prepare a demonstration']\n              : undefined\n          }\n          tasks={\n            args.showTasks ? (\n              <TasksDemo\n                showVisual={false}\n                showViewSelector={false}\n                count={3}\n                openableTasks={false}\n              />\n            ) : undefined\n          }\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  showDetails: true,\n  detailsName: 'Case summary',\n  showWhatsNext: true,\n  showTasks: true\n};\n\nConfirmationDemo.argTypes = {\n  title: { control: { type: 'text' } },\n  showDetails: { control: { type: 'boolean' } },\n  detailsName: { control: { type: 'text' } },\n  showWhatsNext: { control: { type: 'boolean' } },\n  showTasks: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/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/jsx/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/jsx/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/jsx/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/jsx/work/Details/Details.stories.d.ts

@@ -0,0 +1,10 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface DetailsDemoProps {
+    description?: string;
+    collapsible?: boolean;
+    showAdditionalInfo?: boolean;
+}
+export declare const DetailsDemo: StoryFn<DetailsDemoProps>;
+//# sourceMappingURL=Details.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAKtD,wBAiBU;AAEV,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,gBAAgB,CAkHjD,CAAC"}

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

@@ -0,0 +1,110 @@
+import { useMemo } from 'react';
+import { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
+import { Details, DetailsContext } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/Details',
+    component: Details,
+    parameters: {
+        layout: 'centered'
+    },
+    args: {
+        description: 'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',
+        collapsible: false,
+        showAdditionalInfo: false
+    },
+    argTypes: {
+        description: { control: { type: 'text' } },
+        collapsible: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } }
+    }
+};
+export const DetailsDemo = (args) => {
+    const { description, collapsible, showAdditionalInfo } = args;
+    const isNotMobile = useBreakpoint('sm');
+    const ctx = useMemo(() => ({
+        mobileView: !isNotMobile,
+        longestLabelLength: 10
+    }), [isNotMobile]);
+    return (<DetailsContext.Provider value={ctx}>
+      <Details name='Outer list' highlightedData={[
+            <FieldValueItem variant='stacked' name='Age' value='56'/>,
+            <FieldValueItem variant='stacked' name='Location' value='Berlin'/>,
+            <FieldValueItem variant='stacked' name='Make' value='Ford'/>,
+            <FieldValueItem variant='stacked' name='Model' value='F150'/>
+        ]} description={description} collapsible={collapsible} additionalInfo={showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
+                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent
+                      semper feugiat nibh sed pulvinar proin gravida.
+                    </p>
+                    <p>
+                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit
+                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim
+                      nulla aliquet porttitor lacus.
+                    </p>
+                    <Link href='/' target='_blank'>
+                      Neque vitae
+                    </Link>
+                  </Flex>)
+            }
+            : undefined}>
+        
+        <Details name='Nested as flex' nested asFlex>
+          
+          <Details nested>
+            <Details nested>
+              <FieldValueItem name='Make' value='Ford'/>
+              <FieldValueItem name='Model' value='F150'/>
+            </Details>
+          </Details>
+
+          <Details nested>
+            <FieldValueItem name='Mileage' value='78,500'/>
+            <FieldValueItem name='Trim' value='Lariat'/>
+          </Details>
+        </Details>
+
+        <FieldValueItem name='Description' variant='stacked' value={<p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla
+              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus
+              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor
+              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.
+              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget
+              risus. Fusce cursus sollicitudin nibh molestie volutpat.
+            </p>}/>
+
+        <FieldValueItem name='Keys' value='3'/>
+
+        <Details name='Nested list' nested>
+          <FieldValueItem name='First name' value='Howard'/>
+          <FieldValueItem name='Last name' value='Kennedy'/>
+
+          <Details name='Deeper list' nested>
+            <FieldValueItem name='Color' value='red'/>
+            <FieldValueItem name='Year' value='2017'/>
+          </Details>
+
+          <Details name='Value comparison' nested valueComparison>
+            <FieldValueItem name='Open lorem ipsum dolor set amet ipsum ket sit amet' value='$405,000,000.00'/>
+            <FieldValueItem name='Close' value='$401.00'/>
+            <FieldValueItem name='52 week high' value='$445.00'/>
+            <FieldValueItem name='52 week low' value='$335.00'/>
+          </Details>
+
+          <Details name='Collapsible' nested valueComparison collapsible>
+            <FieldValueItem name='Open' value='$205.00'/>
+            <FieldValueItem name='Close' value='$209.00'/>
+            <FieldValueItem name='52 week high' value='$312.00'/>
+            <FieldValueItem name='52 week low' value='$115.00'/>
+          </Details>
+        </Details>
+
+        <FieldValueItem name='Age' value='56'/>
+        <FieldValueItem name='Location' value='Berlin'/>
+      </Details>
+    </DetailsContext.Provider>);
+};
+//# sourceMappingURL=Details.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';\nimport { Details, DetailsContext } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details,\n  parameters: {\n    layout: 'centered'\n  },\n  args: {\n    description:\n      'Pellentesque pharetra justo augue, non maximus nulla venenatis et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget risus. Fusce cursus sollicitudin nibh molestie volutpat.',\n    collapsible: false,\n    showAdditionalInfo: false\n  },\n  argTypes: {\n    description: { control: { type: 'text' } },\n    collapsible: { control: { type: 'boolean' } },\n    showAdditionalInfo: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface DetailsDemoProps {\n  description?: string;\n  collapsible?: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const DetailsDemo: StoryFn<DetailsDemoProps> = (args: DetailsDemoProps) => {\n  const { description, collapsible, showAdditionalInfo } = args;\n  const isNotMobile = useBreakpoint('sm');\n\n  const ctx = useMemo(\n    () => ({\n      mobileView: !isNotMobile,\n      longestLabelLength: 10\n    }),\n    [isNotMobile]\n  );\n\n  return (\n    <DetailsContext.Provider value={ctx}>\n      <Details\n        name='Outer list'\n        highlightedData={[\n          <FieldValueItem variant='stacked' name='Age' value='56' />,\n          <FieldValueItem variant='stacked' name='Location' value='Berlin' />,\n          <FieldValueItem variant='stacked' name='Make' value='Ford' />,\n          <FieldValueItem variant='stacked' name='Model' value='F150' />\n        ]}\n        description={description}\n        collapsible={collapsible}\n        additionalInfo={\n          showAdditionalInfo\n            ? {\n                heading: 'Additional Info',\n                content: (\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n                    <p>\n                      Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n                      magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n                      semper feugiat nibh sed pulvinar proin gravida.\n                    </p>\n                    <p>\n                      Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n                      egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim\n                      nulla aliquet porttitor lacus.\n                    </p>\n                    <Link href='/' target='_blank'>\n                      Neque vitae\n                    </Link>\n                  </Flex>\n                )\n              }\n            : undefined\n        }\n      >\n        {/* Siblings can be rendered in a responsive row with the `asFlex` attribute */}\n        <Details name='Nested as flex' nested asFlex>\n          {/* Arbitrary recursive nesting is supported with nested attribute */}\n          <Details nested>\n            <Details nested>\n              <FieldValueItem name='Make' value='Ford' />\n              <FieldValueItem name='Model' value='F150' />\n            </Details>\n          </Details>\n\n          <Details nested>\n            <FieldValueItem name='Mileage' value='78,500' />\n            <FieldValueItem name='Trim' value='Lariat' />\n          </Details>\n        </Details>\n\n        <FieldValueItem\n          name='Description'\n          variant='stacked'\n          value={\n            <p>\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo nulla\n              vitae mi bibendum, a fringilla nisl efficitur. Praesent vitae nulla lobortis, finibus\n              felis ultricies, fermentum mi. Nunc lorem ligula, placerat nec elit id, auctor\n              pellentesque est. Pellentesque pharetra justo augue, non maximus nulla venenatis et.\n              Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum semper fringilla in eget\n              risus. Fusce cursus sollicitudin nibh molestie volutpat.\n            </p>\n          }\n        />\n\n        <FieldValueItem name='Keys' value='3' />\n\n        <Details name='Nested list' nested>\n          <FieldValueItem name='First name' value='Howard' />\n          <FieldValueItem name='Last name' value='Kennedy' />\n\n          <Details name='Deeper list' nested>\n            <FieldValueItem name='Color' value='red' />\n            <FieldValueItem name='Year' value='2017' />\n          </Details>\n\n          <Details name='Value comparison' nested valueComparison>\n            <FieldValueItem\n              name='Open lorem ipsum dolor set amet ipsum ket sit amet'\n              value='$405,000,000.00'\n            />\n            <FieldValueItem name='Close' value='$401.00' />\n            <FieldValueItem name='52 week high' value='$445.00' />\n            <FieldValueItem name='52 week low' value='$335.00' />\n          </Details>\n\n          <Details name='Collapsible' nested valueComparison collapsible>\n            <FieldValueItem name='Open' value='$205.00' />\n            <FieldValueItem name='Close' value='$209.00' />\n            <FieldValueItem name='52 week high' value='$312.00' />\n            <FieldValueItem name='52 week low' value='$115.00' />\n          </Details>\n        </Details>\n\n        <FieldValueItem name='Age' value='56' />\n        <FieldValueItem name='Location' value='Berlin' />\n      </Details>\n    </DetailsContext.Provider>\n  );\n};\n"]}

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

@@ -0,0 +1,5 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const GlimpseDemo: StoryFn;
+//# sourceMappingURL=Glimpse.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Glimpse.stories.d.ts","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAIU;AAEV,eAAO,MAAM,WAAW,EAAE,OA+CzB,CAAC"}

package/jsx/work/Glimpse/Glimpse.stories.jsx

@@ -0,0 +1,42 @@
+import { action } from '@storybook/addon-actions';
+import { Avatar, Button, EmailDisplay, PhoneDisplay, useElement } from '@pega/cosmos-react-core';
+import { Glimpse } from '@pega/cosmos-react-work';
+export default {
+    title: 'Work/Glimpse',
+    component: Glimpse,
+    parameters: { layout: 'centered' }
+};
+export const GlimpseDemo = () => {
+    const [target, setTarget] = useElement(null);
+    const fields = [
+        {
+            name: 'Project',
+            value: 'Constellation Demo'
+        },
+        {
+            name: 'Phone number',
+            value: <PhoneDisplay value='(111) 111-1111'/>
+        },
+        {
+            name: 'Email',
+            value: <EmailDisplay value='turnc@example.com'/>
+        },
+        {
+            name: 'Reports to',
+            value: 'Helen Bush'
+        }
+    ];
+    return (<>
+      <Button variant='link' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
+        Open Glimpse
+      </Button>
+      {target && (<Glimpse id='turnc' target={target} heading={{
+                primary: 'Cindy Turner',
+                secondary: 'Lead Engineer',
+                visual: <Avatar name='Cindy Turner'/>
+            }} fields={fields} onViewProfile={action('View profile')} onDismiss={() => setTarget(null)}/>)}
+    </>);
+};
+//# sourceMappingURL=Glimpse.stories.jsx.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Glimpse.stories.jsx","sourceRoot":"","sources":["../../../src/work/Glimpse/Glimpse.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,UAAU,EAAE,EAAE,MAAM,EAAE,UAAU,EAAE;CAC3B,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAY,GAAG,EAAE;IACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,CAAoB,IAAI,CAAC,CAAC;IAChE,MAAM,MAAM,GAAkC;QAC5C;YACE,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,oBAAoB;SAC5B;QACD;YACE,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,gBAAgB,EAAG;SAC/C;QACD;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,mBAAmB,EAAG;SAClD;QACD;YACE,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,YAAY;SACpB;KACF,CAAC;IAEF,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CACL,OAAO,CAAC,MAAM,CACd,OAAO,CAAC,CAAC,CAAC,CAAgC,EAAE,EAAE;YAC5C,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,IAAI,CACT,CAAC,OAAO,CACN,EAAE,CAAC,OAAO,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC;gBACP,OAAO,EAAE,cAAc;gBACvB,SAAS,EAAE,eAAe;gBAC1B,MAAM,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,EAAG;aACvC,CAAC,CACF,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,aAAa,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CACtC,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,EACjC,CACH,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// cspell:words turnc\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MouseEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Avatar, Button, EmailDisplay, PhoneDisplay, useElement } from '@pega/cosmos-react-core';\nimport type { FieldValueListProps } from '@pega/cosmos-react-core';\nimport { Glimpse } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Glimpse',\n  component: Glimpse,\n  parameters: { layout: 'centered' }\n} as Meta;\n\nexport const GlimpseDemo: StoryFn = () => {\n  const [target, setTarget] = useElement<HTMLButtonElement>(null);\n  const fields: FieldValueListProps['fields'] = [\n    {\n      name: 'Project',\n      value: 'Constellation Demo'\n    },\n    {\n      name: 'Phone number',\n      value: <PhoneDisplay value='(111) 111-1111' />\n    },\n    {\n      name: 'Email',\n      value: <EmailDisplay value='turnc@example.com' />\n    },\n    {\n      name: 'Reports to',\n      value: 'Helen Bush'\n    }\n  ];\n\n  return (\n    <>\n      <Button\n        variant='link'\n        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n          setTarget(e.currentTarget);\n        }}\n      >\n        Open Glimpse\n      </Button>\n      {target && (\n        <Glimpse\n          id='turnc'\n          target={target}\n          heading={{\n            primary: 'Cindy Turner',\n            secondary: 'Lead Engineer',\n            visual: <Avatar name='Cindy Turner' />\n          }}\n          fields={fields}\n          onViewProfile={action('View profile')}\n          onDismiss={() => setTarget(null)}\n        />\n      )}\n    </>\n  );\n};\n"]}

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

@@ -0,0 +1,5 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const IntelligentGuidanceDemo: StoryFn;
+//# sourceMappingURL=IntelligentGuidance.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IntelligentGuidance.stories.d.ts","sourceRoot":"","sources":["../../../src/work/IntelligentGuidance/IntelligentGuidance.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAStD,wBAMU;AAEV,eAAO,MAAM,uBAAuB,EAAE,OAoHrC,CAAC"}