@pega/cosmos-react-demos 4.0.0-dev.22.2 → 4.0.0-dev.23.1
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.
- package/jsx/core/FieldValueList/FieldValueList.mocks.d.ts +20 -0
- package/jsx/core/FieldValueList/FieldValueList.mocks.d.ts.map +1 -0
- package/jsx/core/FieldValueList/FieldValueList.mocks.jsx +54 -0
- package/jsx/core/FieldValueList/FieldValueList.mocks.jsx.map +1 -0
- package/jsx/core/FieldValueList/FieldValueList.stories.d.ts.map +1 -1
- package/jsx/core/FieldValueList/FieldValueList.stories.jsx +5 -54
- package/jsx/core/FieldValueList/FieldValueList.stories.jsx.map +1 -1
- package/jsx/work/Confirmation/Confirmation.stories.d.ts +1 -0
- package/jsx/work/Confirmation/Confirmation.stories.d.ts.map +1 -1
- package/jsx/work/Confirmation/Confirmation.stories.jsx +11 -4
- package/jsx/work/Confirmation/Confirmation.stories.jsx.map +1 -1
- package/lib/core/FieldValueList/FieldValueList.mocks.d.ts +20 -0
- package/lib/core/FieldValueList/FieldValueList.mocks.d.ts.map +1 -0
- package/lib/core/FieldValueList/FieldValueList.mocks.js +51 -0
- package/lib/core/FieldValueList/FieldValueList.mocks.js.map +1 -0
- package/lib/core/FieldValueList/FieldValueList.stories.d.ts.map +1 -1
- package/lib/core/FieldValueList/FieldValueList.stories.js +5 -50
- package/lib/core/FieldValueList/FieldValueList.stories.js.map +1 -1
- package/lib/work/Confirmation/Confirmation.stories.d.ts +1 -0
- package/lib/work/Confirmation/Confirmation.stories.d.ts.map +1 -1
- package/lib/work/Confirmation/Confirmation.stories.js +9 -4
- package/lib/work/Confirmation/Confirmation.stories.js.map +1 -1
- package/package.json +9 -9
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const mockData: ({
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
value: JSX.Element;
|
|
6
|
+
} | {
|
|
7
|
+
id: string;
|
|
8
|
+
name: string;
|
|
9
|
+
value: string;
|
|
10
|
+
} | {
|
|
11
|
+
id: string;
|
|
12
|
+
name: string;
|
|
13
|
+
value?: undefined;
|
|
14
|
+
})[];
|
|
15
|
+
export declare const mockNumericData: {
|
|
16
|
+
id: string;
|
|
17
|
+
name: string;
|
|
18
|
+
value: number;
|
|
19
|
+
}[];
|
|
20
|
+
//# sourceMappingURL=FieldValueList.mocks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldValueList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;IAiCpB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;GAqB3B,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { Link, Status, Text } from '@pega/cosmos-react-core';
|
|
2
|
+
export const mockData = [
|
|
3
|
+
{
|
|
4
|
+
id: 'id',
|
|
5
|
+
name: 'ID',
|
|
6
|
+
value: (<Text variant='h1' as='span'>
|
|
7
|
+
C-1234
|
|
8
|
+
</Text>)
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
id: 'status',
|
|
12
|
+
name: 'Status',
|
|
13
|
+
value: <Status variant='pending'>pending</Status>
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
id: 'link',
|
|
17
|
+
name: 'Link',
|
|
18
|
+
value: (<Link href='https://www.pega.com' target='_blank'>
|
|
19
|
+
C-ABC
|
|
20
|
+
</Link>)
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
id: 'created',
|
|
24
|
+
name: 'Created',
|
|
25
|
+
value: new Date().toLocaleDateString()
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
id: 'no value',
|
|
29
|
+
name: 'No Value'
|
|
30
|
+
}
|
|
31
|
+
];
|
|
32
|
+
export const mockNumericData = [
|
|
33
|
+
{
|
|
34
|
+
id: 'open',
|
|
35
|
+
name: 'Open',
|
|
36
|
+
value: 405
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
id: 'close',
|
|
40
|
+
name: 'Close',
|
|
41
|
+
value: 401
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
id: 'year_high',
|
|
45
|
+
name: '52 week high',
|
|
46
|
+
value: 445
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
id: 'year_low',
|
|
50
|
+
name: '52 week low',
|
|
51
|
+
value: 335
|
|
52
|
+
}
|
|
53
|
+
];
|
|
54
|
+
//# sourceMappingURL=FieldValueList.mocks.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldValueList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,CACL,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAC1B;;MACF,EAAE,IAAI,CAAC,CACR;KACF;IACD;QACE,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;KAClD;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CAC/C;;MACF,EAAE,IAAI,CAAC,CACR;KACF;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;KACvC;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,UAAU;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,OAAO;QACX,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,GAAG;KACX;CACF,CAAC","sourcesContent":["import { Link, Status, Text } from '@pega/cosmos-react-core';\n\nexport const mockData = [\n {\n id: 'id',\n name: 'ID',\n value: (\n <Text variant='h1' as='span'>\n C-1234\n </Text>\n )\n },\n {\n id: 'status',\n name: 'Status',\n value: <Status variant='pending'>pending</Status>\n },\n {\n id: 'link',\n name: 'Link',\n value: (\n <Link href='https://www.pega.com' target='_blank'>\n C-ABC\n </Link>\n )\n },\n {\n id: 'created',\n name: 'Created',\n value: new Date().toLocaleDateString()\n },\n {\n id: 'no value',\n name: 'No Value'\n }\n];\n\nexport const mockNumericData = [\n {\n id: 'open',\n name: 'Open',\n value: 405\n },\n {\n id: 'close',\n name: 'Close',\n value: 401\n },\n {\n id: 'year_high',\n name: '52 week high',\n value: 445\n },\n {\n id: 'year_low',\n name: '52 week low',\n value: 335\n }\n];\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;
|
|
1
|
+
{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAK/E,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,UAAU,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,wBAAwB,CAoBhE,CAAC"}
|
|
@@ -1,71 +1,22 @@
|
|
|
1
1
|
import { Fragment } from 'react';
|
|
2
|
-
import { FieldValueList
|
|
2
|
+
import { FieldValueList } from '@pega/cosmos-react-core';
|
|
3
3
|
import { StyledDemoContainer } from './FieldValueList.styles';
|
|
4
|
+
import { mockData, mockNumericData } from './FieldValueList.mocks';
|
|
4
5
|
export default {
|
|
5
6
|
title: 'Core/FieldValueList',
|
|
6
7
|
component: FieldValueList
|
|
7
8
|
};
|
|
8
9
|
export const FieldValueListDemo = (args) => {
|
|
9
10
|
const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;
|
|
10
|
-
const data = [
|
|
11
|
-
{
|
|
12
|
-
id: 'id',
|
|
13
|
-
name: 'ID',
|
|
14
|
-
value: (<Text variant='h1' as='span'>
|
|
15
|
-
C-1234
|
|
16
|
-
</Text>)
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
id: 'status',
|
|
20
|
-
name: 'Status',
|
|
21
|
-
value: <Status variant='pending'>pending</Status>
|
|
22
|
-
},
|
|
11
|
+
const data = mockData.concat([
|
|
23
12
|
{
|
|
24
13
|
id: 'dynamic',
|
|
25
14
|
name: args.name,
|
|
26
15
|
value: args.value
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
id: 'link',
|
|
30
|
-
name: 'Link',
|
|
31
|
-
value: (<Link href='https://www.pega.com' target='_blank'>
|
|
32
|
-
C-ABC
|
|
33
|
-
</Link>)
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
id: 'created',
|
|
37
|
-
name: 'Created',
|
|
38
|
-
value: new Date().toLocaleDateString()
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
id: 'no value',
|
|
42
|
-
name: 'No Value'
|
|
43
|
-
}
|
|
44
|
-
];
|
|
45
|
-
const numericData = [
|
|
46
|
-
{
|
|
47
|
-
id: 'open',
|
|
48
|
-
name: 'Open',
|
|
49
|
-
value: 405
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
id: 'close',
|
|
53
|
-
name: 'Close',
|
|
54
|
-
value: 401
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
id: 'year_high',
|
|
58
|
-
name: '52 week high',
|
|
59
|
-
value: 445
|
|
60
|
-
},
|
|
61
|
-
{
|
|
62
|
-
id: 'year_low',
|
|
63
|
-
name: '52 week low',
|
|
64
|
-
value: 335
|
|
65
16
|
}
|
|
66
|
-
];
|
|
17
|
+
]);
|
|
67
18
|
return (<Wrapper>
|
|
68
|
-
<FieldValueList variant={args.variant} fields={args.variant === 'value-comparison' ?
|
|
19
|
+
<FieldValueList variant={args.variant} fields={args.variant === 'value-comparison' ? mockNumericData : data}/>
|
|
69
20
|
</Wrapper>);
|
|
70
21
|
};
|
|
71
22
|
FieldValueListDemo.args = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldValueList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"FieldValueList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEnE,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAQV,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CACnE,IAA8B,EAC9B,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC;IACzE,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC3B;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;KACF,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,OAAO,CACN;MAAA,CAAC,cAAc,CACb,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,EAEzE;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,kBAAkB,EAAE,IAAI;IACxB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,kBAAkB,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Fragment } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { FieldValueList } from '@pega/cosmos-react-core';\nimport type { FieldValueListProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport { StyledDemoContainer } from './FieldValueList.styles';\nimport { mockData, mockNumericData } from './FieldValueList.mocks';\n\nexport default {\n title: 'Core/FieldValueList',\n component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {\n name: string;\n value: string;\n inContentContainer?: boolean;\n}\n\nexport const FieldValueListDemo: StoryFn<FieldValueListStoryProps> = (\n args: FieldValueListStoryProps\n) => {\n const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;\n const data = mockData.concat([\n {\n id: 'dynamic',\n name: args.name,\n value: args.value\n }\n ]);\n\n return (\n <Wrapper>\n <FieldValueList\n variant={args.variant}\n fields={args.variant === 'value-comparison' ? mockNumericData : data}\n />\n </Wrapper>\n );\n};\n\nFieldValueListDemo.args = {\n variant: 'inline',\n inContentContainer: true,\n name: 'Name',\n value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n variant: {\n options: ['inline', 'stacked', 'value-comparison'],\n control: { type: 'select' }\n },\n inContentContainer: { control: { type: 'boolean' } },\n name: { control: { type: 'text' } },\n value: { control: { type: 'text' } }\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
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,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,sBAAsB,
|
|
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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useState } from 'react';
|
|
2
|
-
import { Button, Flex } from '@pega/cosmos-react-core';
|
|
3
|
-
import { Confirmation } from '@pega/cosmos-react-work';
|
|
4
|
-
import {
|
|
2
|
+
import { Button, FieldValueItem, Flex } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Confirmation, Details } from '@pega/cosmos-react-work';
|
|
4
|
+
import { mockData } from '../../core/FieldValueList/FieldValueList.mocks';
|
|
5
5
|
import { TasksDemo } from '../Tasks/Tasks.stories';
|
|
6
6
|
import { StyledFlex } from './Confirmation.styles';
|
|
7
7
|
export default {
|
|
@@ -10,8 +10,13 @@ export default {
|
|
|
10
10
|
};
|
|
11
11
|
export const ConfirmationDemo = (args) => {
|
|
12
12
|
const [showConfirmation, setShowConfirmation] = useState(true);
|
|
13
|
+
const details = (<Details name={args.detailsName}>
|
|
14
|
+
{mockData.map(({ name, value }) => {
|
|
15
|
+
return <FieldValueItem name={name} value={value}/>;
|
|
16
|
+
})}
|
|
17
|
+
</Details>);
|
|
13
18
|
return (<Flex as={StyledFlex} container={{ justify: 'center', alignItems: 'center' }}>
|
|
14
|
-
{showConfirmation && (<Confirmation title={args.title} details={args.showDetails ?
|
|
19
|
+
{showConfirmation && (<Confirmation title={args.title} details={args.showDetails ? details : undefined} whatsNext={args.showWhatsNext
|
|
15
20
|
? ['Send references', 'Collect information on the case', 'Prepare a demonstration']
|
|
16
21
|
: undefined} tasks={args.showTasks ? (<TasksDemo showVisual={false} showViewSelector={false} count={3} openableTasks={false}/>) : undefined} onClose={() => setShowConfirmation(false)}/>)}
|
|
17
22
|
{!showConfirmation && (<Button onClick={() => setShowConfirmation(true)}>Show confirmation</Button>)}
|
|
@@ -20,12 +25,14 @@ export const ConfirmationDemo = (args) => {
|
|
|
20
25
|
ConfirmationDemo.args = {
|
|
21
26
|
title: 'US-1337 confirmation',
|
|
22
27
|
showDetails: true,
|
|
28
|
+
detailsName: 'Case summary',
|
|
23
29
|
showWhatsNext: true,
|
|
24
30
|
showTasks: true
|
|
25
31
|
};
|
|
26
32
|
ConfirmationDemo.argTypes = {
|
|
27
33
|
title: { control: { type: 'text' } },
|
|
28
34
|
showDetails: { control: { type: 'boolean' } },
|
|
35
|
+
detailsName: { control: { type: 'text' } },
|
|
29
36
|
showWhatsNext: { control: { type: 'boolean' } },
|
|
30
37
|
showTasks: { control: { type: 'boolean' } }
|
|
31
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Confirmation.stories.jsx","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;
|
|
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"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const mockData: ({
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
value: JSX.Element;
|
|
6
|
+
} | {
|
|
7
|
+
id: string;
|
|
8
|
+
name: string;
|
|
9
|
+
value: string;
|
|
10
|
+
} | {
|
|
11
|
+
id: string;
|
|
12
|
+
name: string;
|
|
13
|
+
value?: undefined;
|
|
14
|
+
})[];
|
|
15
|
+
export declare const mockNumericData: {
|
|
16
|
+
id: string;
|
|
17
|
+
name: string;
|
|
18
|
+
value: number;
|
|
19
|
+
}[];
|
|
20
|
+
//# sourceMappingURL=FieldValueList.mocks.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldValueList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,QAAQ;;;;;;;;;;;;IAiCpB,CAAC;AAEF,eAAO,MAAM,eAAe;;;;GAqB3B,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Link, Status, Text } from '@pega/cosmos-react-core';
|
|
3
|
+
export const mockData = [
|
|
4
|
+
{
|
|
5
|
+
id: 'id',
|
|
6
|
+
name: 'ID',
|
|
7
|
+
value: (_jsx(Text, { variant: 'h1', as: 'span', children: "C-1234" }))
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
id: 'status',
|
|
11
|
+
name: 'Status',
|
|
12
|
+
value: _jsx(Status, { variant: 'pending', children: "pending" })
|
|
13
|
+
},
|
|
14
|
+
{
|
|
15
|
+
id: 'link',
|
|
16
|
+
name: 'Link',
|
|
17
|
+
value: (_jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "C-ABC" }))
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
id: 'created',
|
|
21
|
+
name: 'Created',
|
|
22
|
+
value: new Date().toLocaleDateString()
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: 'no value',
|
|
26
|
+
name: 'No Value'
|
|
27
|
+
}
|
|
28
|
+
];
|
|
29
|
+
export const mockNumericData = [
|
|
30
|
+
{
|
|
31
|
+
id: 'open',
|
|
32
|
+
name: 'Open',
|
|
33
|
+
value: 405
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
id: 'close',
|
|
37
|
+
name: 'Close',
|
|
38
|
+
value: 401
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
id: 'year_high',
|
|
42
|
+
name: '52 week high',
|
|
43
|
+
value: 445
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
id: 'year_low',
|
|
47
|
+
name: '52 week low',
|
|
48
|
+
value: 335
|
|
49
|
+
}
|
|
50
|
+
];
|
|
51
|
+
//# sourceMappingURL=FieldValueList.mocks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FieldValueList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB;QACE,EAAE,EAAE,IAAI;QACR,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,uBAErB,CACR;KACF;IACD;QACE,EAAE,EAAE,QAAQ;QACZ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,wBAAiB;KAClD;IACD;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,sBAE1C,CACR;KACF;IACD;QACE,EAAE,EAAE,SAAS;QACb,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;KACvC;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,UAAU;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B;QACE,EAAE,EAAE,MAAM;QACV,IAAI,EAAE,MAAM;QACZ,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,OAAO;QACX,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,WAAW;QACf,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,GAAG;KACX;IACD;QACE,EAAE,EAAE,UAAU;QACd,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,GAAG;KACX;CACF,CAAC","sourcesContent":["import { Link, Status, Text } from '@pega/cosmos-react-core';\n\nexport const mockData = [\n {\n id: 'id',\n name: 'ID',\n value: (\n <Text variant='h1' as='span'>\n C-1234\n </Text>\n )\n },\n {\n id: 'status',\n name: 'Status',\n value: <Status variant='pending'>pending</Status>\n },\n {\n id: 'link',\n name: 'Link',\n value: (\n <Link href='https://www.pega.com' target='_blank'>\n C-ABC\n </Link>\n )\n },\n {\n id: 'created',\n name: 'Created',\n value: new Date().toLocaleDateString()\n },\n {\n id: 'no value',\n name: 'No Value'\n }\n];\n\nexport const mockNumericData = [\n {\n id: 'open',\n name: 'Open',\n value: 405\n },\n {\n id: 'close',\n name: 'Close',\n value: 401\n },\n {\n id: 'year_high',\n name: '52 week high',\n value: 445\n },\n {\n id: 'year_low',\n name: '52 week low',\n value: 335\n }\n];\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;
|
|
1
|
+
{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAK/E,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,UAAU,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,wBAAwB,CAoBhE,CAAC"}
|
|
@@ -1,67 +1,22 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Fragment } from 'react';
|
|
3
|
-
import { FieldValueList
|
|
3
|
+
import { FieldValueList } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledDemoContainer } from './FieldValueList.styles';
|
|
5
|
+
import { mockData, mockNumericData } from './FieldValueList.mocks';
|
|
5
6
|
export default {
|
|
6
7
|
title: 'Core/FieldValueList',
|
|
7
8
|
component: FieldValueList
|
|
8
9
|
};
|
|
9
10
|
export const FieldValueListDemo = (args) => {
|
|
10
11
|
const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;
|
|
11
|
-
const data = [
|
|
12
|
-
{
|
|
13
|
-
id: 'id',
|
|
14
|
-
name: 'ID',
|
|
15
|
-
value: (_jsx(Text, { variant: 'h1', as: 'span', children: "C-1234" }))
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
id: 'status',
|
|
19
|
-
name: 'Status',
|
|
20
|
-
value: _jsx(Status, { variant: 'pending', children: "pending" })
|
|
21
|
-
},
|
|
12
|
+
const data = mockData.concat([
|
|
22
13
|
{
|
|
23
14
|
id: 'dynamic',
|
|
24
15
|
name: args.name,
|
|
25
16
|
value: args.value
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
id: 'link',
|
|
29
|
-
name: 'Link',
|
|
30
|
-
value: (_jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "C-ABC" }))
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
id: 'created',
|
|
34
|
-
name: 'Created',
|
|
35
|
-
value: new Date().toLocaleDateString()
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
id: 'no value',
|
|
39
|
-
name: 'No Value'
|
|
40
|
-
}
|
|
41
|
-
];
|
|
42
|
-
const numericData = [
|
|
43
|
-
{
|
|
44
|
-
id: 'open',
|
|
45
|
-
name: 'Open',
|
|
46
|
-
value: 405
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
id: 'close',
|
|
50
|
-
name: 'Close',
|
|
51
|
-
value: 401
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
id: 'year_high',
|
|
55
|
-
name: '52 week high',
|
|
56
|
-
value: 445
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
id: 'year_low',
|
|
60
|
-
name: '52 week low',
|
|
61
|
-
value: 335
|
|
62
17
|
}
|
|
63
|
-
];
|
|
64
|
-
return (_jsx(Wrapper, { children: _jsx(FieldValueList, { variant: args.variant, fields: args.variant === 'value-comparison' ?
|
|
18
|
+
]);
|
|
19
|
+
return (_jsx(Wrapper, { children: _jsx(FieldValueList, { variant: args.variant, fields: args.variant === 'value-comparison' ? mockNumericData : data }) }));
|
|
65
20
|
};
|
|
66
21
|
FieldValueListDemo.args = {
|
|
67
22
|
variant: 'inline',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEnE,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAQV,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CACnE,IAA8B,EAC9B,EAAE;IACF,MAAM,OAAO,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC;IACzE,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC;QAC3B;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;KACF,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,OAAO,cACN,KAAC,cAAc,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,kBAAkB,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,GACpE,GACM,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,kBAAkB,EAAE,IAAI;IACxB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,kBAAkB,CAAC;QAClD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Fragment } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { FieldValueList } from '@pega/cosmos-react-core';\nimport type { FieldValueListProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport { StyledDemoContainer } from './FieldValueList.styles';\nimport { mockData, mockNumericData } from './FieldValueList.mocks';\n\nexport default {\n title: 'Core/FieldValueList',\n component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {\n name: string;\n value: string;\n inContentContainer?: boolean;\n}\n\nexport const FieldValueListDemo: StoryFn<FieldValueListStoryProps> = (\n args: FieldValueListStoryProps\n) => {\n const Wrapper = args.inContentContainer ? StyledDemoContainer : Fragment;\n const data = mockData.concat([\n {\n id: 'dynamic',\n name: args.name,\n value: args.value\n }\n ]);\n\n return (\n <Wrapper>\n <FieldValueList\n variant={args.variant}\n fields={args.variant === 'value-comparison' ? mockNumericData : data}\n />\n </Wrapper>\n );\n};\n\nFieldValueListDemo.args = {\n variant: 'inline',\n inContentContainer: true,\n name: 'Name',\n value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n variant: {\n options: ['inline', 'stacked', 'value-comparison'],\n control: { type: 'select' }\n },\n inContentContainer: { control: { type: 'boolean' } },\n name: { control: { type: 'text' } },\n value: { control: { type: 'text' } }\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
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,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,sBAAsB,
|
|
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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
|
-
import { Button, Flex } from '@pega/cosmos-react-core';
|
|
4
|
-
import { Confirmation } from '@pega/cosmos-react-work';
|
|
5
|
-
import {
|
|
3
|
+
import { Button, FieldValueItem, Flex } from '@pega/cosmos-react-core';
|
|
4
|
+
import { Confirmation, Details } from '@pega/cosmos-react-work';
|
|
5
|
+
import { mockData } from '../../core/FieldValueList/FieldValueList.mocks';
|
|
6
6
|
import { TasksDemo } from '../Tasks/Tasks.stories';
|
|
7
7
|
import { StyledFlex } from './Confirmation.styles';
|
|
8
8
|
export default {
|
|
@@ -11,19 +11,24 @@ export default {
|
|
|
11
11
|
};
|
|
12
12
|
export const ConfirmationDemo = (args) => {
|
|
13
13
|
const [showConfirmation, setShowConfirmation] = useState(true);
|
|
14
|
-
|
|
14
|
+
const details = (_jsx(Details, { name: args.detailsName, children: mockData.map(({ name, value }) => {
|
|
15
|
+
return _jsx(FieldValueItem, { name: name, value: value });
|
|
16
|
+
}) }));
|
|
17
|
+
return (_jsxs(Flex, { as: StyledFlex, container: { justify: 'center', alignItems: 'center' }, children: [showConfirmation && (_jsx(Confirmation, { title: args.title, details: args.showDetails ? details : undefined, whatsNext: args.showWhatsNext
|
|
15
18
|
? ['Send references', 'Collect information on the case', 'Prepare a demonstration']
|
|
16
19
|
: undefined, tasks: args.showTasks ? (_jsx(TasksDemo, { showVisual: false, showViewSelector: false, count: 3, openableTasks: false })) : undefined, onClose: () => setShowConfirmation(false) })), !showConfirmation && (_jsx(Button, { onClick: () => setShowConfirmation(true), children: "Show confirmation" }))] }));
|
|
17
20
|
};
|
|
18
21
|
ConfirmationDemo.args = {
|
|
19
22
|
title: 'US-1337 confirmation',
|
|
20
23
|
showDetails: true,
|
|
24
|
+
detailsName: 'Case summary',
|
|
21
25
|
showWhatsNext: true,
|
|
22
26
|
showTasks: true
|
|
23
27
|
};
|
|
24
28
|
ConfirmationDemo.argTypes = {
|
|
25
29
|
title: { control: { type: 'text' } },
|
|
26
30
|
showDetails: { control: { type: 'boolean' } },
|
|
31
|
+
detailsName: { control: { type: 'text' } },
|
|
27
32
|
showWhatsNext: { control: { type: 'boolean' } },
|
|
28
33
|
showTasks: { control: { type: 'boolean' } }
|
|
29
34
|
};
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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,cAAc,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gDAAgD,CAAC;AAC1E,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAUV,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,IAA4B,EAAE,EAAE;IAChG,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,MAAM,OAAO,GAAG,CACd,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,CAAC,WAAW,YAC5B,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;YAChC,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QACtD,CAAC,CAAC,GACM,CACX,CAAC;IAEF,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,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAC/C,SAAS,EACP,IAAI,CAAC,aAAa;oBAChB,CAAC,CAAC,CAAC,iBAAiB,EAAE,iCAAiC,EAAE,yBAAyB,CAAC;oBACnF,CAAC,CAAC,SAAS,EAEf,KAAK,EACH,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CACf,KAAC,SAAS,IACR,UAAU,EAAE,KAAK,EACjB,gBAAgB,EAAE,KAAK,EACvB,KAAK,EAAE,CAAC,EACR,aAAa,EAAE,KAAK,GACpB,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,GACzC,CACH,EACA,CAAC,gBAAgB,IAAI,CACpB,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,kCAA4B,CAC7E,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,sBAAsB;IAC7B,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,cAAc;IAC3B,aAAa,EAAE,IAAI;IACnB,SAAS,EAAE,IAAI;CAChB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC5C,CAAC","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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-demos",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.23.1",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-build": "4.0.0-dev.
|
|
24
|
-
"@pega/cosmos-react-condition-builder": "4.0.0-dev.
|
|
25
|
-
"@pega/cosmos-react-core": "4.0.0-dev.
|
|
26
|
-
"@pega/cosmos-react-cs": "4.0.0-dev.
|
|
27
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.
|
|
28
|
-
"@pega/cosmos-react-rte": "4.0.0-dev.
|
|
29
|
-
"@pega/cosmos-react-social": "4.0.0-dev.
|
|
30
|
-
"@pega/cosmos-react-work": "4.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-build": "4.0.0-dev.23.1",
|
|
24
|
+
"@pega/cosmos-react-condition-builder": "4.0.0-dev.23.1",
|
|
25
|
+
"@pega/cosmos-react-core": "4.0.0-dev.23.1",
|
|
26
|
+
"@pega/cosmos-react-cs": "4.0.0-dev.23.1",
|
|
27
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.23.1",
|
|
28
|
+
"@pega/cosmos-react-rte": "4.0.0-dev.23.1",
|
|
29
|
+
"@pega/cosmos-react-social": "4.0.0-dev.23.1",
|
|
30
|
+
"@pega/cosmos-react-work": "4.0.0-dev.23.1",
|
|
31
31
|
"@storybook/addon-a11y": "^7.0.24",
|
|
32
32
|
"@storybook/addon-actions": "^7.0.24",
|
|
33
33
|
"@storybook/addon-links": "^7.0.24",
|