@pega/cosmos-react-demos 6.3.0 → 6.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/jsx/work/DetailsV2/DetailsV2.stories.d.ts +10 -0
- package/jsx/work/DetailsV2/DetailsV2.stories.d.ts.map +1 -0
- package/jsx/work/DetailsV2/DetailsV2.stories.jsx +215 -0
- package/jsx/work/DetailsV2/DetailsV2.stories.jsx.map +1 -0
- package/lib/work/DetailsV2/DetailsV2.stories.d.ts +10 -0
- package/lib/work/DetailsV2/DetailsV2.stories.d.ts.map +1 -0
- package/lib/work/DetailsV2/DetailsV2.stories.js +157 -0
- package/lib/work/DetailsV2/DetailsV2.stories.js.map +1 -0
- package/package.json +8 -8
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { StoryFn } from '@storybook/react';
|
|
2
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
|
3
|
+
export default _default;
|
|
4
|
+
interface DetailsV2DemoProps {
|
|
5
|
+
description?: string;
|
|
6
|
+
collapsible?: boolean;
|
|
7
|
+
showAdditionalInfo?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const DetailsV2Demo: StoryFn<DetailsV2DemoProps>;
|
|
10
|
+
//# sourceMappingURL=DetailsV2.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DetailsV2.stories.d.ts","sourceRoot":"","sources":["../../../src/work/DetailsV2/DetailsV2.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAOtD,wBAcU;AAEV,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,kBAAkB,CA8XrD,CAAC"}
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
|
|
3
|
+
import { DetailsV2, DetailsV2Context, DetailsV2List } from '@pega/cosmos-react-work';
|
|
4
|
+
import { TableDemo } from '../../core/Table/Table.stories';
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Work/DetailsV2',
|
|
7
|
+
component: DetailsV2,
|
|
8
|
+
args: {
|
|
9
|
+
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.',
|
|
10
|
+
collapsible: false,
|
|
11
|
+
showAdditionalInfo: false
|
|
12
|
+
},
|
|
13
|
+
argTypes: {
|
|
14
|
+
description: { control: { type: 'text' } },
|
|
15
|
+
collapsible: { control: { type: 'boolean' } },
|
|
16
|
+
showAdditionalInfo: { control: { type: 'boolean' } }
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
export const DetailsV2Demo = (args) => {
|
|
20
|
+
const { description, collapsible, showAdditionalInfo } = args;
|
|
21
|
+
const isNotMobile = useBreakpoint('sm');
|
|
22
|
+
const longestInlineLabel = 'Trim with a longer label';
|
|
23
|
+
const longestLabelLength = longestInlineLabel.split(' ').join('').length;
|
|
24
|
+
const ctx = useMemo(() => ({
|
|
25
|
+
mobileView: !isNotMobile,
|
|
26
|
+
longestLabelLength
|
|
27
|
+
}), [isNotMobile]);
|
|
28
|
+
return (<DetailsV2Context.Provider value={ctx}>
|
|
29
|
+
<DetailsV2 name='Upper list' highlightedData={[
|
|
30
|
+
<FieldValueItem variant='stacked' name='Age' value='56'/>,
|
|
31
|
+
<FieldValueItem variant='stacked' name='Location' value='Berlin'/>,
|
|
32
|
+
<FieldValueItem variant='stacked' name='Make' value='Ford'/>,
|
|
33
|
+
<FieldValueItem variant='stacked' name='Model' value='F150'/>
|
|
34
|
+
]} description={description} collapsible={collapsible} additionalInfo={showAdditionalInfo
|
|
35
|
+
? {
|
|
36
|
+
content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
|
|
37
|
+
<p>
|
|
38
|
+
Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
|
|
39
|
+
magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent
|
|
40
|
+
semper feugiat nibh sed pulvinar proin gravida.
|
|
41
|
+
</p>
|
|
42
|
+
<p>
|
|
43
|
+
Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit
|
|
44
|
+
egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim
|
|
45
|
+
nulla aliquet porttitor lacus.
|
|
46
|
+
</p>
|
|
47
|
+
<Link href='/' target='_blank'>
|
|
48
|
+
Neque vitae
|
|
49
|
+
</Link>
|
|
50
|
+
</Flex>)
|
|
51
|
+
}
|
|
52
|
+
: undefined} columns={{
|
|
53
|
+
a: (<>
|
|
54
|
+
<DetailsV2 name='One Column' columns={{
|
|
55
|
+
a: (<DetailsV2 description='Two column with no headings.' columns={{
|
|
56
|
+
a: (<DetailsV2 columns={{
|
|
57
|
+
a: (<DetailsV2List items={[
|
|
58
|
+
{ name: 'Year', value: '2021' },
|
|
59
|
+
{ name: 'Owners', value: '2' }
|
|
60
|
+
]}/>)
|
|
61
|
+
}}/>),
|
|
62
|
+
b: (<DetailsV2 columns={{
|
|
63
|
+
a: (<DetailsV2List items={[
|
|
64
|
+
{ name: 'Transmission', value: 'Automatic' },
|
|
65
|
+
{ name: 'Drivetrain', value: 'AWD' }
|
|
66
|
+
]}/>)
|
|
67
|
+
}}/>)
|
|
68
|
+
}}/>)
|
|
69
|
+
}} collapsible/>
|
|
70
|
+
|
|
71
|
+
<DetailsV2 description='Two Column with some description and no top heading.' columns={{
|
|
72
|
+
a: (<DetailsV2 name='First Column' columns={{
|
|
73
|
+
a: (<DetailsV2List items={[
|
|
74
|
+
{ name: 'Make', value: 'Ford' },
|
|
75
|
+
{ name: 'Model', value: 'F150' }
|
|
76
|
+
]}/>)
|
|
77
|
+
}}/>),
|
|
78
|
+
b: (<DetailsV2 name='Second Column' columns={{
|
|
79
|
+
a: (<DetailsV2List items={[
|
|
80
|
+
{ name: 'Mileage', value: '78,500' },
|
|
81
|
+
{ name: 'Trim', value: 'Lariat' }
|
|
82
|
+
]}/>)
|
|
83
|
+
}}/>)
|
|
84
|
+
}}/>
|
|
85
|
+
|
|
86
|
+
<DetailsV2 name='Three Column' description='Text telling you what you are looking at or why it is relevant.' columns={{
|
|
87
|
+
a: (<DetailsV2 name='First Column' columns={{
|
|
88
|
+
a: (<DetailsV2List items={[
|
|
89
|
+
{ name: 'Make', value: 'Ford' },
|
|
90
|
+
{ name: 'Model', value: 'F150' }
|
|
91
|
+
]}/>)
|
|
92
|
+
}}/>),
|
|
93
|
+
b: (<DetailsV2 description='Column with no heading but some description.' columns={{
|
|
94
|
+
a: (<DetailsV2List items={[
|
|
95
|
+
{ name: 'Mileage', value: '78,500' },
|
|
96
|
+
{ name: longestInlineLabel, value: 'Lariat' }
|
|
97
|
+
]}/>)
|
|
98
|
+
}}/>),
|
|
99
|
+
c: (<DetailsV2 name='Third Column' columns={{
|
|
100
|
+
a: (<DetailsV2List items={[
|
|
101
|
+
{ name: 'Mileage', value: '78,500' },
|
|
102
|
+
{ name: 'Trim', value: 'Lariat' }
|
|
103
|
+
]}/>)
|
|
104
|
+
}}/>)
|
|
105
|
+
}}/>
|
|
106
|
+
|
|
107
|
+
<DetailsV2 name='Wide Narrow' arrangement='wideNarrow' columns={{
|
|
108
|
+
a: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }}/>,
|
|
109
|
+
b: (<DetailsV2 name='Narrow Column' columns={{
|
|
110
|
+
a: (<DetailsV2List items={[
|
|
111
|
+
{ name: 'Mileage', value: '78,500' },
|
|
112
|
+
{ name: 'Trim', value: 'Lariat' }
|
|
113
|
+
]}/>)
|
|
114
|
+
}}/>)
|
|
115
|
+
}}/>
|
|
116
|
+
|
|
117
|
+
<DetailsV2 name='Narrow Wide' arrangement='narrowWide' columns={{
|
|
118
|
+
a: (<DetailsV2 name='Narrow Column' columns={{
|
|
119
|
+
a: (<DetailsV2List items={[
|
|
120
|
+
{ name: 'Mileage', value: '78,500' },
|
|
121
|
+
{ name: 'Trim', value: 'Lariat' }
|
|
122
|
+
]}/>)
|
|
123
|
+
}}/>),
|
|
124
|
+
b: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }}/>
|
|
125
|
+
}}/>
|
|
126
|
+
|
|
127
|
+
<DetailsV2 name='Table' columns={{ a: <TableDemo /> }}/>
|
|
128
|
+
|
|
129
|
+
<DetailsV2 name='Nested List 1 Column' columns={{
|
|
130
|
+
a: (<>
|
|
131
|
+
<DetailsV2 name='First Child' columns={{
|
|
132
|
+
a: (<DetailsV2List items={[
|
|
133
|
+
{ name: 'Year', value: '2021' },
|
|
134
|
+
{ name: 'Owners', value: '2' }
|
|
135
|
+
]}/>)
|
|
136
|
+
}}/>
|
|
137
|
+
|
|
138
|
+
<DetailsV2 name='Second Child' columns={{
|
|
139
|
+
a: (<DetailsV2List items={[
|
|
140
|
+
{ name: 'Transmission', value: 'Automatic' },
|
|
141
|
+
{ name: 'Drivetrain', value: 'AWD' }
|
|
142
|
+
]}/>)
|
|
143
|
+
}}/>
|
|
144
|
+
</>)
|
|
145
|
+
}}/>
|
|
146
|
+
|
|
147
|
+
<DetailsV2 columns={{
|
|
148
|
+
a: (<>
|
|
149
|
+
<DetailsV2List items={[
|
|
150
|
+
{
|
|
151
|
+
name: 'Description',
|
|
152
|
+
variant: 'stacked',
|
|
153
|
+
value: (<p>
|
|
154
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
|
155
|
+
commodo nulla vitae mi bibendum, a fringilla nisl efficitur.
|
|
156
|
+
Praesent vitae nulla lobortis, finibus felis ultricies, fermentum
|
|
157
|
+
mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque
|
|
158
|
+
est. Pellentesque pharetra justo augue, non maximus nulla venenatis
|
|
159
|
+
et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum
|
|
160
|
+
semper fringilla in eget risus. Fusce cursus sollicitudin nibh
|
|
161
|
+
molestie volutpat.
|
|
162
|
+
</p>)
|
|
163
|
+
},
|
|
164
|
+
{ name: 'Keys', value: '3' }
|
|
165
|
+
]}/>
|
|
166
|
+
|
|
167
|
+
<DetailsV2 name='Nested' columns={{
|
|
168
|
+
a: (<>
|
|
169
|
+
<DetailsV2List items={[
|
|
170
|
+
{ name: 'First name', value: 'Howard' },
|
|
171
|
+
{ name: 'Last name', value: 'Kennedy' }
|
|
172
|
+
]}/>
|
|
173
|
+
|
|
174
|
+
<DetailsV2 name='Further Nested List' columns={{
|
|
175
|
+
a: (<DetailsV2List items={[
|
|
176
|
+
{ name: 'Color', value: 'Red' },
|
|
177
|
+
{ name: 'Tires', value: 'Firestone all weather' }
|
|
178
|
+
]}/>)
|
|
179
|
+
}}/>
|
|
180
|
+
</>)
|
|
181
|
+
}}/>
|
|
182
|
+
|
|
183
|
+
<DetailsV2 name='Value comparison' columns={{
|
|
184
|
+
a: (<DetailsV2List items={[
|
|
185
|
+
{ name: 'Open', value: '$405.00' },
|
|
186
|
+
{ name: 'Close', value: '$401.00' },
|
|
187
|
+
{ name: '52 week high', value: '$446.00' },
|
|
188
|
+
{ name: '52 week low', value: '$335.00' },
|
|
189
|
+
{ name: 'Total number of active shares', value: '567,000.00' }
|
|
190
|
+
]} valueComparison/>)
|
|
191
|
+
}}/>
|
|
192
|
+
|
|
193
|
+
<DetailsV2 name='Collapsible' columns={{
|
|
194
|
+
a: (<DetailsV2List items={[
|
|
195
|
+
{ name: 'Open', value: '$405.00' },
|
|
196
|
+
{ name: 'Close', value: '$401.00' },
|
|
197
|
+
{ name: '52 week high', value: '$446.00' },
|
|
198
|
+
{ name: '52 week low', value: '$335.00' },
|
|
199
|
+
{ name: 'Total number of active shares', value: '567,000.00' }
|
|
200
|
+
]} valueComparison/>)
|
|
201
|
+
}} collapsible/>
|
|
202
|
+
|
|
203
|
+
<DetailsV2 columns={{
|
|
204
|
+
a: (<DetailsV2List items={[
|
|
205
|
+
{ name: 'Age', value: '56' },
|
|
206
|
+
{ name: 'Location', value: 'Berlin PA' }
|
|
207
|
+
]}/>)
|
|
208
|
+
}}/>
|
|
209
|
+
</>)
|
|
210
|
+
}}/>
|
|
211
|
+
</>)
|
|
212
|
+
}}/>
|
|
213
|
+
</DetailsV2Context.Provider>);
|
|
214
|
+
};
|
|
215
|
+
//# sourceMappingURL=DetailsV2.stories.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DetailsV2.stories.jsx","sourceRoot":"","sources":["../../../src/work/DetailsV2/DetailsV2.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 { DetailsV2, DetailsV2Context, DetailsV2List } from '@pega/cosmos-react-work';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\n\nexport default {\n title: 'Work/DetailsV2',\n component: DetailsV2,\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 DetailsV2DemoProps {\n description?: string;\n collapsible?: boolean;\n showAdditionalInfo?: boolean;\n}\n\nexport const DetailsV2Demo: StoryFn<DetailsV2DemoProps> = (args: DetailsV2DemoProps) => {\n const { description, collapsible, showAdditionalInfo } = args;\n const isNotMobile = useBreakpoint('sm');\n const longestInlineLabel = 'Trim with a longer label';\n const longestLabelLength = longestInlineLabel.split(' ').join('').length;\n\n const ctx = useMemo(\n () => ({\n mobileView: !isNotMobile,\n longestLabelLength\n }),\n [isNotMobile]\n );\n\n return (\n <DetailsV2Context.Provider value={ctx}>\n <DetailsV2\n name='Upper 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 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 columns={{\n a: (\n <>\n <DetailsV2\n name='One Column'\n columns={{\n a: (\n <DetailsV2\n description='Two column with no headings.'\n columns={{\n a: (\n <DetailsV2\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Year', value: '2021' },\n { name: 'Owners', value: '2' }\n ]}\n />\n )\n }}\n />\n ),\n b: (\n <DetailsV2\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Transmission', value: 'Automatic' },\n { name: 'Drivetrain', value: 'AWD' }\n ]}\n />\n )\n }}\n />\n )\n }}\n />\n )\n }}\n collapsible\n />\n\n <DetailsV2\n description='Two Column with some description and no top heading.'\n columns={{\n a: (\n <DetailsV2\n name='First Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Make', value: 'Ford' },\n { name: 'Model', value: 'F150' }\n ]}\n />\n )\n }}\n />\n ),\n b: (\n <DetailsV2\n name='Second Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: 'Trim', value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n )\n }}\n />\n\n <DetailsV2\n name='Three Column'\n description='Text telling you what you are looking at or why it is relevant.'\n columns={{\n a: (\n <DetailsV2\n name='First Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Make', value: 'Ford' },\n { name: 'Model', value: 'F150' }\n ]}\n />\n )\n }}\n />\n ),\n b: (\n <DetailsV2\n description='Column with no heading but some description.'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: longestInlineLabel, value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n ),\n c: (\n <DetailsV2\n name='Third Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: 'Trim', value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n )\n }}\n />\n\n <DetailsV2\n name='Wide Narrow'\n arrangement='wideNarrow'\n columns={{\n a: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }} />,\n b: (\n <DetailsV2\n name='Narrow Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: 'Trim', value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n )\n }}\n />\n\n <DetailsV2\n name='Narrow Wide'\n arrangement='narrowWide'\n columns={{\n a: (\n <DetailsV2\n name='Narrow Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: 'Trim', value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n ),\n b: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }} />\n }}\n />\n\n <DetailsV2 name='Table' columns={{ a: <TableDemo /> }} />\n\n <DetailsV2\n name='Nested List 1 Column'\n columns={{\n a: (\n <>\n <DetailsV2\n name='First Child'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Year', value: '2021' },\n { name: 'Owners', value: '2' }\n ]}\n />\n )\n }}\n />\n\n <DetailsV2\n name='Second Child'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Transmission', value: 'Automatic' },\n { name: 'Drivetrain', value: 'AWD' }\n ]}\n />\n )\n }}\n />\n </>\n )\n }}\n />\n\n <DetailsV2\n columns={{\n a: (\n <>\n <DetailsV2List\n items={[\n {\n name: 'Description',\n variant: 'stacked',\n value: (\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse\n commodo nulla vitae mi bibendum, a fringilla nisl efficitur.\n Praesent vitae nulla lobortis, finibus felis ultricies, fermentum\n mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque\n est. Pellentesque pharetra justo augue, non maximus nulla venenatis\n et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum\n semper fringilla in eget risus. Fusce cursus sollicitudin nibh\n molestie volutpat.\n </p>\n )\n },\n { name: 'Keys', value: '3' }\n ]}\n />\n\n <DetailsV2\n name='Nested'\n columns={{\n a: (\n <>\n <DetailsV2List\n items={[\n { name: 'First name', value: 'Howard' },\n { name: 'Last name', value: 'Kennedy' }\n ]}\n />\n\n <DetailsV2\n name='Further Nested List'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Color', value: 'Red' },\n { name: 'Tires', value: 'Firestone all weather' }\n ]}\n />\n )\n }}\n />\n </>\n )\n }}\n />\n\n <DetailsV2\n name='Value comparison'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Open', value: '$405.00' },\n { name: 'Close', value: '$401.00' },\n { name: '52 week high', value: '$446.00' },\n { name: '52 week low', value: '$335.00' },\n { name: 'Total number of active shares', value: '567,000.00' }\n ]}\n valueComparison\n />\n )\n }}\n />\n\n <DetailsV2\n name='Collapsible'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Open', value: '$405.00' },\n { name: 'Close', value: '$401.00' },\n { name: '52 week high', value: '$446.00' },\n { name: '52 week low', value: '$335.00' },\n { name: 'Total number of active shares', value: '567,000.00' }\n ]}\n valueComparison\n />\n )\n }}\n collapsible\n />\n\n <DetailsV2\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Age', value: '56' },\n { name: 'Location', value: 'Berlin PA' }\n ]}\n />\n )\n }}\n />\n </>\n )\n }}\n />\n </>\n )\n }}\n />\n </DetailsV2Context.Provider>\n );\n};\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { StoryFn } from '@storybook/react';
|
|
2
|
+
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
|
|
3
|
+
export default _default;
|
|
4
|
+
interface DetailsV2DemoProps {
|
|
5
|
+
description?: string;
|
|
6
|
+
collapsible?: boolean;
|
|
7
|
+
showAdditionalInfo?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export declare const DetailsV2Demo: StoryFn<DetailsV2DemoProps>;
|
|
10
|
+
//# sourceMappingURL=DetailsV2.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DetailsV2.stories.d.ts","sourceRoot":"","sources":["../../../src/work/DetailsV2/DetailsV2.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAOtD,wBAcU;AAEV,UAAU,kBAAkB;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,kBAAkB,CA8XrD,CAAC"}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from 'react';
|
|
3
|
+
import { Flex, Link, FieldValueItem, useBreakpoint } from '@pega/cosmos-react-core';
|
|
4
|
+
import { DetailsV2, DetailsV2Context, DetailsV2List } from '@pega/cosmos-react-work';
|
|
5
|
+
import { TableDemo } from '../../core/Table/Table.stories';
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Work/DetailsV2',
|
|
8
|
+
component: DetailsV2,
|
|
9
|
+
args: {
|
|
10
|
+
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.',
|
|
11
|
+
collapsible: false,
|
|
12
|
+
showAdditionalInfo: false
|
|
13
|
+
},
|
|
14
|
+
argTypes: {
|
|
15
|
+
description: { control: { type: 'text' } },
|
|
16
|
+
collapsible: { control: { type: 'boolean' } },
|
|
17
|
+
showAdditionalInfo: { control: { type: 'boolean' } }
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
export const DetailsV2Demo = (args) => {
|
|
21
|
+
const { description, collapsible, showAdditionalInfo } = args;
|
|
22
|
+
const isNotMobile = useBreakpoint('sm');
|
|
23
|
+
const longestInlineLabel = 'Trim with a longer label';
|
|
24
|
+
const longestLabelLength = longestInlineLabel.split(' ').join('').length;
|
|
25
|
+
const ctx = useMemo(() => ({
|
|
26
|
+
mobileView: !isNotMobile,
|
|
27
|
+
longestLabelLength
|
|
28
|
+
}), [isNotMobile]);
|
|
29
|
+
return (_jsx(DetailsV2Context.Provider, { value: ctx, children: _jsx(DetailsV2, { name: 'Upper list', highlightedData: [
|
|
30
|
+
_jsx(FieldValueItem, { variant: 'stacked', name: 'Age', value: '56' }),
|
|
31
|
+
_jsx(FieldValueItem, { variant: 'stacked', name: 'Location', value: 'Berlin' }),
|
|
32
|
+
_jsx(FieldValueItem, { variant: 'stacked', name: 'Make', value: 'Ford' }),
|
|
33
|
+
_jsx(FieldValueItem, { variant: 'stacked', name: 'Model', value: 'F150' })
|
|
34
|
+
], description: description, collapsible: collapsible, additionalInfo: showAdditionalInfo
|
|
35
|
+
? {
|
|
36
|
+
content: (_jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2 }, children: [_jsx("p", { children: "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." }), _jsx("p", { children: "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." }), _jsx(Link, { href: '/', target: '_blank', children: "Neque vitae" })] }))
|
|
37
|
+
}
|
|
38
|
+
: undefined, columns: {
|
|
39
|
+
a: (_jsxs(_Fragment, { children: [_jsx(DetailsV2, { name: 'One Column', columns: {
|
|
40
|
+
a: (_jsx(DetailsV2, { description: 'Two column with no headings.', columns: {
|
|
41
|
+
a: (_jsx(DetailsV2, { columns: {
|
|
42
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
43
|
+
{ name: 'Year', value: '2021' },
|
|
44
|
+
{ name: 'Owners', value: '2' }
|
|
45
|
+
] }))
|
|
46
|
+
} })),
|
|
47
|
+
b: (_jsx(DetailsV2, { columns: {
|
|
48
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
49
|
+
{ name: 'Transmission', value: 'Automatic' },
|
|
50
|
+
{ name: 'Drivetrain', value: 'AWD' }
|
|
51
|
+
] }))
|
|
52
|
+
} }))
|
|
53
|
+
} }))
|
|
54
|
+
}, collapsible: true }), _jsx(DetailsV2, { description: 'Two Column with some description and no top heading.', columns: {
|
|
55
|
+
a: (_jsx(DetailsV2, { name: 'First Column', columns: {
|
|
56
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
57
|
+
{ name: 'Make', value: 'Ford' },
|
|
58
|
+
{ name: 'Model', value: 'F150' }
|
|
59
|
+
] }))
|
|
60
|
+
} })),
|
|
61
|
+
b: (_jsx(DetailsV2, { name: 'Second Column', columns: {
|
|
62
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
63
|
+
{ name: 'Mileage', value: '78,500' },
|
|
64
|
+
{ name: 'Trim', value: 'Lariat' }
|
|
65
|
+
] }))
|
|
66
|
+
} }))
|
|
67
|
+
} }), _jsx(DetailsV2, { name: 'Three Column', description: 'Text telling you what you are looking at or why it is relevant.', columns: {
|
|
68
|
+
a: (_jsx(DetailsV2, { name: 'First Column', columns: {
|
|
69
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
70
|
+
{ name: 'Make', value: 'Ford' },
|
|
71
|
+
{ name: 'Model', value: 'F150' }
|
|
72
|
+
] }))
|
|
73
|
+
} })),
|
|
74
|
+
b: (_jsx(DetailsV2, { description: 'Column with no heading but some description.', columns: {
|
|
75
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
76
|
+
{ name: 'Mileage', value: '78,500' },
|
|
77
|
+
{ name: longestInlineLabel, value: 'Lariat' }
|
|
78
|
+
] }))
|
|
79
|
+
} })),
|
|
80
|
+
c: (_jsx(DetailsV2, { name: 'Third Column', columns: {
|
|
81
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
82
|
+
{ name: 'Mileage', value: '78,500' },
|
|
83
|
+
{ name: 'Trim', value: 'Lariat' }
|
|
84
|
+
] }))
|
|
85
|
+
} }))
|
|
86
|
+
} }), _jsx(DetailsV2, { name: 'Wide Narrow', arrangement: 'wideNarrow', columns: {
|
|
87
|
+
a: _jsx(DetailsV2, { name: 'Wide Column', columns: { a: _jsx(TableDemo, {}) } }),
|
|
88
|
+
b: (_jsx(DetailsV2, { name: 'Narrow Column', columns: {
|
|
89
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
90
|
+
{ name: 'Mileage', value: '78,500' },
|
|
91
|
+
{ name: 'Trim', value: 'Lariat' }
|
|
92
|
+
] }))
|
|
93
|
+
} }))
|
|
94
|
+
} }), _jsx(DetailsV2, { name: 'Narrow Wide', arrangement: 'narrowWide', columns: {
|
|
95
|
+
a: (_jsx(DetailsV2, { name: 'Narrow Column', columns: {
|
|
96
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
97
|
+
{ name: 'Mileage', value: '78,500' },
|
|
98
|
+
{ name: 'Trim', value: 'Lariat' }
|
|
99
|
+
] }))
|
|
100
|
+
} })),
|
|
101
|
+
b: _jsx(DetailsV2, { name: 'Wide Column', columns: { a: _jsx(TableDemo, {}) } })
|
|
102
|
+
} }), _jsx(DetailsV2, { name: 'Table', columns: { a: _jsx(TableDemo, {}) } }), _jsx(DetailsV2, { name: 'Nested List 1 Column', columns: {
|
|
103
|
+
a: (_jsxs(_Fragment, { children: [_jsx(DetailsV2, { name: 'First Child', columns: {
|
|
104
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
105
|
+
{ name: 'Year', value: '2021' },
|
|
106
|
+
{ name: 'Owners', value: '2' }
|
|
107
|
+
] }))
|
|
108
|
+
} }), _jsx(DetailsV2, { name: 'Second Child', columns: {
|
|
109
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
110
|
+
{ name: 'Transmission', value: 'Automatic' },
|
|
111
|
+
{ name: 'Drivetrain', value: 'AWD' }
|
|
112
|
+
] }))
|
|
113
|
+
} })] }))
|
|
114
|
+
} }), _jsx(DetailsV2, { columns: {
|
|
115
|
+
a: (_jsxs(_Fragment, { children: [_jsx(DetailsV2List, { items: [
|
|
116
|
+
{
|
|
117
|
+
name: 'Description',
|
|
118
|
+
variant: 'stacked',
|
|
119
|
+
value: (_jsx("p", { children: "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." }))
|
|
120
|
+
},
|
|
121
|
+
{ name: 'Keys', value: '3' }
|
|
122
|
+
] }), _jsx(DetailsV2, { name: 'Nested', columns: {
|
|
123
|
+
a: (_jsxs(_Fragment, { children: [_jsx(DetailsV2List, { items: [
|
|
124
|
+
{ name: 'First name', value: 'Howard' },
|
|
125
|
+
{ name: 'Last name', value: 'Kennedy' }
|
|
126
|
+
] }), _jsx(DetailsV2, { name: 'Further Nested List', columns: {
|
|
127
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
128
|
+
{ name: 'Color', value: 'Red' },
|
|
129
|
+
{ name: 'Tires', value: 'Firestone all weather' }
|
|
130
|
+
] }))
|
|
131
|
+
} })] }))
|
|
132
|
+
} }), _jsx(DetailsV2, { name: 'Value comparison', columns: {
|
|
133
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
134
|
+
{ name: 'Open', value: '$405.00' },
|
|
135
|
+
{ name: 'Close', value: '$401.00' },
|
|
136
|
+
{ name: '52 week high', value: '$446.00' },
|
|
137
|
+
{ name: '52 week low', value: '$335.00' },
|
|
138
|
+
{ name: 'Total number of active shares', value: '567,000.00' }
|
|
139
|
+
], valueComparison: true }))
|
|
140
|
+
} }), _jsx(DetailsV2, { name: 'Collapsible', columns: {
|
|
141
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
142
|
+
{ name: 'Open', value: '$405.00' },
|
|
143
|
+
{ name: 'Close', value: '$401.00' },
|
|
144
|
+
{ name: '52 week high', value: '$446.00' },
|
|
145
|
+
{ name: '52 week low', value: '$335.00' },
|
|
146
|
+
{ name: 'Total number of active shares', value: '567,000.00' }
|
|
147
|
+
], valueComparison: true }))
|
|
148
|
+
}, collapsible: true }), _jsx(DetailsV2, { columns: {
|
|
149
|
+
a: (_jsx(DetailsV2List, { items: [
|
|
150
|
+
{ name: 'Age', value: '56' },
|
|
151
|
+
{ name: 'Location', value: 'Berlin PA' }
|
|
152
|
+
] }))
|
|
153
|
+
} })] }))
|
|
154
|
+
} })] }))
|
|
155
|
+
} }) }));
|
|
156
|
+
};
|
|
157
|
+
//# sourceMappingURL=DetailsV2.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DetailsV2.stories.js","sourceRoot":"","sources":["../../../src/work/DetailsV2/DetailsV2.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 { DetailsV2, DetailsV2Context, DetailsV2List } from '@pega/cosmos-react-work';\n\nimport { TableDemo } from '../../core/Table/Table.stories';\n\nexport default {\n title: 'Work/DetailsV2',\n component: DetailsV2,\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 DetailsV2DemoProps {\n description?: string;\n collapsible?: boolean;\n showAdditionalInfo?: boolean;\n}\n\nexport const DetailsV2Demo: StoryFn<DetailsV2DemoProps> = (args: DetailsV2DemoProps) => {\n const { description, collapsible, showAdditionalInfo } = args;\n const isNotMobile = useBreakpoint('sm');\n const longestInlineLabel = 'Trim with a longer label';\n const longestLabelLength = longestInlineLabel.split(' ').join('').length;\n\n const ctx = useMemo(\n () => ({\n mobileView: !isNotMobile,\n longestLabelLength\n }),\n [isNotMobile]\n );\n\n return (\n <DetailsV2Context.Provider value={ctx}>\n <DetailsV2\n name='Upper 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 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 columns={{\n a: (\n <>\n <DetailsV2\n name='One Column'\n columns={{\n a: (\n <DetailsV2\n description='Two column with no headings.'\n columns={{\n a: (\n <DetailsV2\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Year', value: '2021' },\n { name: 'Owners', value: '2' }\n ]}\n />\n )\n }}\n />\n ),\n b: (\n <DetailsV2\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Transmission', value: 'Automatic' },\n { name: 'Drivetrain', value: 'AWD' }\n ]}\n />\n )\n }}\n />\n )\n }}\n />\n )\n }}\n collapsible\n />\n\n <DetailsV2\n description='Two Column with some description and no top heading.'\n columns={{\n a: (\n <DetailsV2\n name='First Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Make', value: 'Ford' },\n { name: 'Model', value: 'F150' }\n ]}\n />\n )\n }}\n />\n ),\n b: (\n <DetailsV2\n name='Second Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: 'Trim', value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n )\n }}\n />\n\n <DetailsV2\n name='Three Column'\n description='Text telling you what you are looking at or why it is relevant.'\n columns={{\n a: (\n <DetailsV2\n name='First Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Make', value: 'Ford' },\n { name: 'Model', value: 'F150' }\n ]}\n />\n )\n }}\n />\n ),\n b: (\n <DetailsV2\n description='Column with no heading but some description.'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: longestInlineLabel, value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n ),\n c: (\n <DetailsV2\n name='Third Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: 'Trim', value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n )\n }}\n />\n\n <DetailsV2\n name='Wide Narrow'\n arrangement='wideNarrow'\n columns={{\n a: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }} />,\n b: (\n <DetailsV2\n name='Narrow Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: 'Trim', value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n )\n }}\n />\n\n <DetailsV2\n name='Narrow Wide'\n arrangement='narrowWide'\n columns={{\n a: (\n <DetailsV2\n name='Narrow Column'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Mileage', value: '78,500' },\n { name: 'Trim', value: 'Lariat' }\n ]}\n />\n )\n }}\n />\n ),\n b: <DetailsV2 name='Wide Column' columns={{ a: <TableDemo /> }} />\n }}\n />\n\n <DetailsV2 name='Table' columns={{ a: <TableDemo /> }} />\n\n <DetailsV2\n name='Nested List 1 Column'\n columns={{\n a: (\n <>\n <DetailsV2\n name='First Child'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Year', value: '2021' },\n { name: 'Owners', value: '2' }\n ]}\n />\n )\n }}\n />\n\n <DetailsV2\n name='Second Child'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Transmission', value: 'Automatic' },\n { name: 'Drivetrain', value: 'AWD' }\n ]}\n />\n )\n }}\n />\n </>\n )\n }}\n />\n\n <DetailsV2\n columns={{\n a: (\n <>\n <DetailsV2List\n items={[\n {\n name: 'Description',\n variant: 'stacked',\n value: (\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse\n commodo nulla vitae mi bibendum, a fringilla nisl efficitur.\n Praesent vitae nulla lobortis, finibus felis ultricies, fermentum\n mi. Nunc lorem ligula, placerat nec elit id, auctor pellentesque\n est. Pellentesque pharetra justo augue, non maximus nulla venenatis\n et. Sed laoreet ultricies ullamcorper. Mauris ac nulla quis ipsum\n semper fringilla in eget risus. Fusce cursus sollicitudin nibh\n molestie volutpat.\n </p>\n )\n },\n { name: 'Keys', value: '3' }\n ]}\n />\n\n <DetailsV2\n name='Nested'\n columns={{\n a: (\n <>\n <DetailsV2List\n items={[\n { name: 'First name', value: 'Howard' },\n { name: 'Last name', value: 'Kennedy' }\n ]}\n />\n\n <DetailsV2\n name='Further Nested List'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Color', value: 'Red' },\n { name: 'Tires', value: 'Firestone all weather' }\n ]}\n />\n )\n }}\n />\n </>\n )\n }}\n />\n\n <DetailsV2\n name='Value comparison'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Open', value: '$405.00' },\n { name: 'Close', value: '$401.00' },\n { name: '52 week high', value: '$446.00' },\n { name: '52 week low', value: '$335.00' },\n { name: 'Total number of active shares', value: '567,000.00' }\n ]}\n valueComparison\n />\n )\n }}\n />\n\n <DetailsV2\n name='Collapsible'\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Open', value: '$405.00' },\n { name: 'Close', value: '$401.00' },\n { name: '52 week high', value: '$446.00' },\n { name: '52 week low', value: '$335.00' },\n { name: 'Total number of active shares', value: '567,000.00' }\n ]}\n valueComparison\n />\n )\n }}\n collapsible\n />\n\n <DetailsV2\n columns={{\n a: (\n <DetailsV2List\n items={[\n { name: 'Age', value: '56' },\n { name: 'Location', value: 'Berlin PA' }\n ]}\n />\n )\n }}\n />\n </>\n )\n }}\n />\n </>\n )\n }}\n />\n </DetailsV2Context.Provider>\n );\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-demos",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.4.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
"build": "tsc -b tsconfig.build.json && tsc -b tsconfig.build-preserve.json"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-condition-builder": "6.
|
|
24
|
-
"@pega/cosmos-react-core": "6.
|
|
25
|
-
"@pega/cosmos-react-dnd": "6.
|
|
26
|
-
"@pega/cosmos-react-rte": "6.
|
|
27
|
-
"@pega/cosmos-react-social": "6.
|
|
28
|
-
"@pega/cosmos-react-work": "6.
|
|
23
|
+
"@pega/cosmos-react-condition-builder": "6.4.0",
|
|
24
|
+
"@pega/cosmos-react-core": "6.4.0",
|
|
25
|
+
"@pega/cosmos-react-dnd": "6.4.0",
|
|
26
|
+
"@pega/cosmos-react-rte": "6.4.0",
|
|
27
|
+
"@pega/cosmos-react-social": "6.4.0",
|
|
28
|
+
"@pega/cosmos-react-work": "6.4.0",
|
|
29
29
|
"@storybook/addon-actions": "~7.5.3",
|
|
30
30
|
"@storybook/react": "~7.5.3",
|
|
31
31
|
"@types/dompurify": "^3.0.5",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"react": "^17.0.0",
|
|
40
40
|
"react-dom": "^17.0.0",
|
|
41
41
|
"styled-components": "^5.2.0",
|
|
42
|
-
"tinymce": "^6.
|
|
42
|
+
"tinymce": "^6.8.5"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"typescript": "~5.2.2"
|