@pega/custom-dx-components 0.24.12 → 0.24.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/build-all/helper.js +6 -0
  3. package/src/tasks/build-comp/helper.js +8 -0
  4. package/src/tasks/create/templates/Constellation/Template/DETAILS/{DetailsRender.tsx → DetailsRender.tsx.mustache} +7 -10
  5. package/src/tasks/create/templates/Constellation/Template/DETAILS/{HighlightRender.tsx → HighlightRender.tsx.mustache} +12 -13
  6. package/src/tasks/create/templates/Constellation/Template/DETAILS/demo.stories.tsx.mustache +27 -7
  7. package/src/tasks/create/templates/Constellation/Template/DETAILS/index.tsx.mustache +26 -33
  8. package/src/tasks/create/templates/Constellation/Template/DETAILS/mock.ts.mustache +13 -14
  9. package/src/tasks/create/templates/Constellation/Template/DETAILS/styles.ts.mustache +16 -0
  10. package/src/tasks/create/templates/Constellation/Template/DETAILS-region/{DetailsRender.tsx → DetailsRender.tsx.mustache} +7 -10
  11. package/src/tasks/create/templates/Constellation/Template/DETAILS-region/{HighlightRender.tsx → HighlightRender.tsx.mustache} +12 -13
  12. package/src/tasks/create/templates/Constellation/Template/DETAILS-region/demo.stories.tsx.mustache +45 -10
  13. package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.tsx.mustache +19 -41
  14. package/src/tasks/create/templates/Constellation/Template/DETAILS-region/mock.ts.mustache +13 -10
  15. package/src/tasks/create/templates/Constellation/Template/DETAILS-region/styles.ts.mustache +15 -0
  16. package/src/tasks/create/templates/Constellation/Template/PAGE/localizations.json.mustache +4 -2
  17. package/src/tasks/create/templates/Constellation/Widget/PAGE/demo.stories.tsx.mustache +5 -5
  18. package/src/tasks/create/templates/Constellation/Widget/PAGE/index.tsx.mustache +1 -1
  19. package/src/tasks/create/templates/Launchpad/Widget/PAGE/demo.stories.tsx.mustache +1 -1
  20. package/src/tasks/create/templates/Launchpad/Widget/PAGE/index.tsx.mustache +1 -1
  21. package/src/tasks/init/template/package.json.mustache +1 -1
  22. package/src/tasks/publish/helper.js +6 -0
  23. package/src/tasks/publish-all/helper.js +6 -0
  24. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/DetailsRender.tsx +4 -10
  25. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/HighlightRender.tsx +9 -13
  26. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/demo.stories.tsx +27 -7
  27. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/index.tsx +26 -33
  28. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/mock.ts +13 -14
  29. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDetails/styles.ts +16 -0
  30. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPage/localizations.json +4 -2
  31. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/demo.stories.tsx +5 -5
  32. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPageWidget/index.tsx +1 -1
  33. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx +4 -10
  34. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/HighlightRender.tsx +9 -13
  35. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx +45 -10
  36. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/index.tsx +19 -41
  37. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/mock.ts +13 -10
  38. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnDetails/styles.ts +15 -0
  39. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/DetailsRender.tsx +4 -10
  40. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/HighlightRender.tsx +9 -13
  41. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/demo.stories.tsx +27 -7
  42. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/index.tsx +26 -33
  43. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/mock.ts +13 -14
  44. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDetails/styles.ts +16 -0
  45. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPage/localizations.json +4 -2
  46. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/demo.stories.tsx +1 -1
  47. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageWidget/index.tsx +1 -1
  48. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/DetailsRender.tsx +4 -10
  49. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/HighlightRender.tsx +9 -13
  50. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/demo.stories.tsx +45 -10
  51. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/index.tsx +19 -41
  52. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/mock.ts +13 -10
  53. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnDetails/styles.ts +15 -0
@@ -6,3 +6,19 @@ export default styled.div(() => {
6
6
  margin: 0px 0;
7
7
  `;
8
8
  });
9
+
10
+ export const StyledDetailsGridContainer = styled.div(() => {
11
+ return css`
12
+ margin-line-start: 1;
13
+ `;
14
+ });
15
+
16
+
17
+ export const StyledHighlightedFieldsHrLine = styled.hr(() => {
18
+ return css`
19
+ line: {
20
+ margin: '0.75rem 0';
21
+ opacity: '50%'
22
+ }
23
+ `;
24
+ });
@@ -1,4 +1,6 @@
1
1
  {
2
- "Get next work" : "Get next work",
3
- "No task currently available" : "No task currently available"
2
+ "fields" : {
3
+ "Get next work" : "Get next work",
4
+ "No task currently available" : "No task currently available"
5
+ }
4
6
  }
@@ -97,11 +97,11 @@ export const BasePegaDxilMyPageWidget: Story = args => {
97
97
  }
98
98
  };
99
99
 
100
- return (
101
- <>
102
- <PegaDxilMyPageWidget {...props} {...args} />
103
- </>
104
- );
100
+ return (
101
+ <>
102
+ <PegaDxilMyPageWidget {...props} {...args} />
103
+ </>
104
+ );
105
105
  };
106
106
 
107
107
  BasePegaDxilMyPageWidget.args = {
@@ -81,7 +81,7 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
81
81
  whatsNewLink={whatsnewlink}
82
82
  image={image.replace(/ /g, '+')}
83
83
  />
84
- <br></br>
84
+ <br />
85
85
  <Table
86
86
  title={PConnect.getLocalizedValue('Work list', '', '')}
87
87
  columns={columns}
@@ -13,7 +13,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
13
13
 
14
14
  const displayCompArr: ReactElement[] = [];
15
15
 
16
- Object.values(kids).forEach((value: any) => {
16
+ Object.values(kids).forEach((value: any, i :number) => {
17
17
  const { type } = value.getPConnect().getRawMetadata();
18
18
  const { hideLabel, variant, testId, label } = value
19
19
  .getPConnect()
@@ -21,6 +21,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
21
21
 
22
22
  let displayComp;
23
23
  const key = JSON.stringify(value.getPConnect());
24
+ const key1 = key.concat(`-${i}`);
24
25
 
25
26
  if (type === 'reference') {
26
27
  const refElement = value.getPConnect().getComponent();
@@ -30,17 +31,10 @@ const DetailsRender = (props: DetailsRenderProps) => {
30
31
  const element = value.getPConnect().getComponent();
31
32
  const displayEl = <Fragment key={key}>{element}</Fragment>;
32
33
 
33
- const fvlStyle = {
34
- myColGap: {
35
- columnGap: '0'
36
- }
37
- };
38
-
39
- // const myEl = <div>boo</div>;
40
34
  displayComp = (
41
- <Fragment key={key}>
35
+ <Fragment key={key1}>
42
36
  <FieldValueList
43
- style={fvlStyle.myColGap}
37
+ style={{ columnGap: '0'}}
44
38
  variant={hideLabel ? 'stacked' : variant}
45
39
  data-testid={testId}
46
40
  fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
@@ -1,10 +1,14 @@
1
1
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
2
  import React from 'react';
3
3
  import { FieldValueList, Text } from '@pega/cosmos-react-core';
4
+ import type { PConnProps } from './PConnProps';
4
5
 
5
- const HighlightRender = (data: any) => {
6
- const { getPConnect } = data.props;
7
- const { field } = data;
6
+ interface HighlightRenderProps extends PConnProps {
7
+ field?: any;
8
+ }
9
+
10
+ const HighlightRender = (props: HighlightRenderProps) => {
11
+ const { getPConnect, field } = props;
8
12
 
9
13
  field.config['displayMode'] = 'DISPLAY_ONLY';
10
14
 
@@ -16,20 +20,12 @@ const HighlightRender = (data: any) => {
16
20
 
17
21
  const configProps = getPConnect().resolveConfigProps(field.config);
18
22
 
19
- // field.config = configProps;
20
-
23
+ // @ts-ignore
21
24
  const reactField = getPConnect().createComponent(field);
22
- // const reactField = field.getPConnect().getComponent();
23
-
24
- const styles = {
25
- myWidth: {
26
- width: 'auto'
27
- }
28
- };
29
25
 
30
26
  return (
31
27
  <FieldValueList
32
- style={styles.myWidth}
28
+ style={{ width: 'auto' }}
33
29
  variant='stacked'
34
30
  data-testid={field.testId}
35
31
  fields={[
@@ -18,6 +18,11 @@ const meta: Meta<typeof PegaDxilMyTwoColumnDetails> = {
18
18
 
19
19
  export default meta;
20
20
  type Story = StoryObj<typeof PegaDxilMyTwoColumnDetails>;
21
+
22
+ const Region = props => {
23
+ return <></>;
24
+ };
25
+
21
26
  const renderField = resolvedProps => {
22
27
  const {
23
28
  displayAsStatus = false,
@@ -122,24 +127,54 @@ export const BasePegaDxilMyTwoColumnDetails: Story = args => {
122
127
  setInheritedProp: () => {
123
128
  /* nothing */
124
129
  },
125
- resolveConfigProps: () => {
126
- /* nothing */
130
+ resolveConfigProps: config => {
131
+ return config;
127
132
  }
128
133
  };
129
134
  }
130
135
  };
131
136
 
132
- const regionAChildren = pyReviewRaw.children[0].children.map(child => {
133
- return props.getPConnect().createComponent(child);
134
- });
135
- const regionBChildren = pyReviewRaw.children[1].children.map(child => {
136
- return props.getPConnect().createComponent(child);
137
- });
138
137
 
139
138
  return (
140
139
  <PegaDxilMyTwoColumnDetails {...props} {...args}>
141
- {regionAChildren}
142
- {regionBChildren}
140
+ <Region
141
+ {...{
142
+ getPConnect: () => ({
143
+ setInheritedProp: () => {},
144
+ getChildren: () =>
145
+ pyReviewRaw.children[0].children.map((child, index) => {
146
+ return {
147
+ getPConnect: () => ({
148
+ getRawMetadata: () => pyReviewRaw.children[0].children[index],
149
+ getConfigProps: () => {},
150
+ resolveConfigProps: () => regionChildrenResolved[index],
151
+ getComponent: config =>
152
+ props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
153
+ })
154
+ };
155
+ })
156
+ })
157
+ }}
158
+ />
159
+ <Region
160
+ {...{
161
+ getPConnect: () => ({
162
+ setInheritedProp: () => {},
163
+ getChildren: () =>
164
+ pyReviewRaw.children[1].children.map((child, index) => {
165
+ return {
166
+ getPConnect: () => ({
167
+ getRawMetadata: () => pyReviewRaw.children[1].children[index],
168
+ getConfigProps: () => {},
169
+ resolveConfigProps: () => regionChildrenResolved[index],
170
+ getComponent: config =>
171
+ props.getPConnect().createComponent(pyReviewRaw.children[1].children[index])
172
+ })
173
+ };
174
+ })
175
+ })
176
+ }}
177
+ />
143
178
  </PegaDxilMyTwoColumnDetails>
144
179
  );
145
180
  };
@@ -1,10 +1,10 @@
1
- import { Fragment } from 'react';
2
- import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
1
+ import { Fragment, Children, ReactElement } from 'react';
2
+ import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
3
3
  import type { PConnFieldProps } from './PConnProps';
4
4
  import DetailsRender from './DetailsRender';
5
5
  import HighlightRender from './HighlightRender';
6
6
 
7
- import StyledPegaDxilMyTwoColumnDetailsWrapper from './styles';
7
+ import StyledPegaDxilMyTwoColumnDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
8
8
 
9
9
  // includes in bundle
10
10
  import { getAllFields } from './utils';
@@ -14,40 +14,31 @@ interface PegaDxilMyTwoColumnDetailsProps extends PConnFieldProps {
14
14
  // If any, enter additional props that only exist on TextInput here
15
15
  showLabel: boolean;
16
16
  showHighlightedData: boolean;
17
- children: any;
17
+ children: ReactElement[];
18
18
  }
19
19
 
20
20
  // props passed in combination of props from property panel (config.json) and run time props from Constellation
21
21
  // any default values in config.pros should be set in defaultProps at bottom of this file
22
22
  function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
23
23
 
24
- const { getPConnect, children, label, showLabel = true, showHighlightedData = false } = props;
24
+ const { getPConnect, label, children, showLabel = true, showHighlightedData = false } = props;
25
25
  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
26
26
 
27
27
  // update children with readonly
28
- // eslint-disable-next-line guard-for-in
29
- for (const index in children) {
30
- const kid = children[index];
31
- kid.props.getPConnect().setInheritedProp('readOnly', true);
32
- kid.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
33
- }
28
+ Children.toArray(children).forEach(child => {
29
+ // @ts-ignore
30
+ child.props.getPConnect().setInheritedProp('readOnly', true);
31
+ // @ts-ignore
32
+ child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
33
+ });
34
34
 
35
35
  const numRegions = getAllFields(getPConnect)?.length;
36
36
  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
37
- const gridContainer = { colGap: 0, 'margin-line-start': 0 };
38
- // @ts-ignore
37
+
38
+ const gridContainer: GridContainerProps = { colGap: 0 };
39
39
  gridContainer.cols = gridRepeat;
40
- // @ts-ignore
41
40
  gridContainer.alignItems = 'start';
42
41
 
43
- const gridHighlightContainer = { "gap": 2};
44
- // @ts-ignore
45
- gridHighlightContainer.cols = gridRepeat;
46
- // @ts-ignore
47
- gridHighlightContainer.alignItems = 'flex-start';
48
- // @ts-ignore
49
- gridHighlightContainer.pad = [0, 0, 2, 0];
50
-
51
42
  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
52
43
  let highlightedDataArr = [];
53
44
  if (showHighlightedData) {
@@ -55,26 +46,10 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
55
46
  const { highlightedData = [] } = getPConnect().getRawMetadata().config;
56
47
  // @ts-ignore
57
48
  highlightedDataArr = highlightedData.map((field) => {
58
- // field.config.displayMode = 'STACKED_LARGE_VAL';
59
-
60
- // // Mark as status display when using pyStatusWork
61
- // if (field.config.value === '@P .pyStatusWork') {
62
- // field.type = 'TextInput';
63
- // field.config.displayAsStatus = true;
64
- // }
65
- // // @ts-ignore
66
- // return getPConnect().createComponent(field);
67
- return <HighlightRender field={field} props={props} />;
49
+ return <HighlightRender field={field} getPConnect={props.getPConnect} />;
68
50
  });
69
51
  }
70
52
 
71
- const hrStyle = {
72
- line: {
73
- margin: '0.75rem 0',
74
- opacity: '50%'
75
- }
76
- };
77
-
78
53
  return (
79
54
  <StyledPegaDxilMyTwoColumnDetailsWrapper>
80
55
  <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
@@ -88,10 +63,13 @@ function PegaDxilMyTwoColumnDetails(props: PegaDxilMyTwoColumnDetailsProps) {
88
63
  <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
89
64
  ))}
90
65
  </Flex>
91
- <hr style={hrStyle.line} />
66
+ <StyledHighlightedFieldsHrLine />
92
67
  </>
93
68
  )}
94
- <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
69
+ <Grid
70
+ as={StyledDetailsGridContainer}
71
+ container={gridContainer}
72
+ data-testid={`column-count-${numRegions}`} >
95
73
  {children.map((child: any, i: number) => (
96
74
  <Flex
97
75
  // @ts-ignore
@@ -16,6 +16,7 @@ export const pyReviewRaw = {
16
16
  config: {
17
17
  value: '@P .pyStatusWork',
18
18
  label: '@L Work Status',
19
+ hideLabel: true,
19
20
  displayMode: 'STACKED_LARGE_VAL',
20
21
  displayAsStatus: true,
21
22
  key: 'pyStatusWork'
@@ -26,6 +27,7 @@ export const pyReviewRaw = {
26
27
  config: {
27
28
  value: '@P .pyID',
28
29
  label: '@L Case ID',
30
+ hideLabel: true,
29
31
  displayMode: 'STACKED_LARGE_VAL',
30
32
  key: 'pyID'
31
33
  }
@@ -35,6 +37,7 @@ export const pyReviewRaw = {
35
37
  config: {
36
38
  value: '@P .pxCreateDateTime',
37
39
  label: '@L Create date/time',
40
+ hideLabel: true,
38
41
  displayMode: 'STACKED_LARGE_VAL',
39
42
  key: 'pxCreateDateTime'
40
43
  }
@@ -43,6 +46,7 @@ export const pyReviewRaw = {
43
46
  type: 'UserReference',
44
47
  config: {
45
48
  label: '@L Create Operator',
49
+ hideLabel: true,
46
50
  value: '@USER .pxCreateOperator',
47
51
  placeholder: 'Select...',
48
52
  displayMode: 'STACKED_LARGE_VAL',
@@ -160,7 +164,6 @@ export const pyReviewResolved = {
160
164
  config: {
161
165
  value: 'New',
162
166
  label: 'Work Status',
163
- displayMode: 'STACKED_LARGE_VAL',
164
167
  displayAsStatus: true
165
168
  }
166
169
  },
@@ -168,16 +171,14 @@ export const pyReviewResolved = {
168
171
  type: 'TextInput',
169
172
  config: {
170
173
  value: 'M-1002',
171
- label: 'Case ID',
172
- displayMode: 'STACKED_LARGE_VAL'
174
+ label: 'Case ID'
173
175
  }
174
176
  },
175
177
  {
176
178
  type: 'DateTime',
177
179
  config: {
178
180
  value: '2022-12-11T20:06:27.232Z',
179
- label: 'Create date/time',
180
- displayMode: 'STACKED_LARGE_VAL'
181
+ label: 'Create date/time'
181
182
  }
182
183
  },
183
184
  {
@@ -188,8 +189,7 @@ export const pyReviewResolved = {
188
189
  userId: 'conns',
189
190
  userName: 'Sara Connor'
190
191
  },
191
- placeholder: 'Select...',
192
- displayMode: 'STACKED_LARGE_VAL'
192
+ placeholder: 'Select...'
193
193
  }
194
194
  }
195
195
  ],
@@ -199,22 +199,25 @@ export const pyReviewResolved = {
199
199
  export const regionChildrenResolved = [
200
200
  {
201
201
  readOnly: true,
202
- value: '',
202
+ value: 'Deadline',
203
203
  label: 'SLA Deadline',
204
+ hideLabel: true,
204
205
  displayMode: 'LABELS_LEFT',
205
206
  key: 'SLA Deadline'
206
207
  },
207
208
  {
208
209
  readOnly: true,
209
- value: '',
210
+ value: 'Goal',
210
211
  label: 'SLA Goal',
212
+ hideLabel: true,
211
213
  displayMode: 'LABELS_LEFT',
212
214
  key: 'SLA Goal'
213
215
  },
214
216
  {
215
217
  readOnly: true,
216
- value: '',
218
+ value: 'Start Time',
217
219
  label: 'SLA Start Time',
220
+ hideLabel: true,
218
221
  listType: 'associated',
219
222
  datasource: [
220
223
  {
@@ -6,3 +6,18 @@ export default styled.div(() => {
6
6
  margin: 0px 0;
7
7
  `;
8
8
  });
9
+
10
+ export const StyledDetailsGridContainer = styled.div(() => {
11
+ return css`
12
+ margin-line-start: 1;
13
+ `;
14
+ });
15
+
16
+ export const StyledHighlightedFieldsHrLine = styled.hr(() => {
17
+ return css`
18
+ line: {
19
+ margin: '0.75rem 0';
20
+ opacity: '50%'
21
+ }
22
+ `;
23
+ });
@@ -13,7 +13,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
13
13
 
14
14
  const displayCompArr: ReactElement[] = [];
15
15
 
16
- Object.values(kids).forEach((value: any) => {
16
+ Object.values(kids).forEach((value: any, i :number) => {
17
17
  const { type } = value.getPConnect().getRawMetadata();
18
18
  const { hideLabel, variant, testId, label } = value
19
19
  .getPConnect()
@@ -21,6 +21,7 @@ const DetailsRender = (props: DetailsRenderProps) => {
21
21
 
22
22
  let displayComp;
23
23
  const key = JSON.stringify(value.getPConnect());
24
+ const key1 = key.concat(`-${i}`);
24
25
 
25
26
  if (type === 'reference') {
26
27
  const refElement = value.getPConnect().getComponent();
@@ -30,17 +31,10 @@ const DetailsRender = (props: DetailsRenderProps) => {
30
31
  const element = value.getPConnect().getComponent();
31
32
  const displayEl = <Fragment key={key}>{element}</Fragment>;
32
33
 
33
- const fvlStyle = {
34
- myColGap: {
35
- columnGap: '0'
36
- }
37
- };
38
-
39
- // const myEl = <div>boo</div>;
40
34
  displayComp = (
41
- <Fragment key={key}>
35
+ <Fragment key={key1}>
42
36
  <FieldValueList
43
- style={fvlStyle.myColGap}
37
+ style={{ columnGap: '0'}}
44
38
  variant={hideLabel ? 'stacked' : variant}
45
39
  data-testid={testId}
46
40
  fields={[{ id: '1', name: hideLabel ? '' : label, value: displayEl }]}
@@ -1,10 +1,14 @@
1
1
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
2
2
  import React from 'react';
3
3
  import { FieldValueList, Text } from '@pega/cosmos-react-core';
4
+ import type { PConnProps } from './PConnProps';
4
5
 
5
- const HighlightRender = (data: any) => {
6
- const { getPConnect } = data.props;
7
- const { field } = data;
6
+ interface HighlightRenderProps extends PConnProps {
7
+ field?: any;
8
+ }
9
+
10
+ const HighlightRender = (props: HighlightRenderProps) => {
11
+ const { getPConnect, field } = props;
8
12
 
9
13
  field.config['displayMode'] = 'DISPLAY_ONLY';
10
14
 
@@ -16,20 +20,12 @@ const HighlightRender = (data: any) => {
16
20
 
17
21
  const configProps = getPConnect().resolveConfigProps(field.config);
18
22
 
19
- // field.config = configProps;
20
-
23
+ // @ts-ignore
21
24
  const reactField = getPConnect().createComponent(field);
22
- // const reactField = field.getPConnect().getComponent();
23
-
24
- const styles = {
25
- myWidth: {
26
- width: 'auto'
27
- }
28
- };
29
25
 
30
26
  return (
31
27
  <FieldValueList
32
- style={styles.myWidth}
28
+ style={{ width: 'auto' }}
33
29
  variant='stacked'
34
30
  data-testid={field.testId}
35
31
  fields={[
@@ -20,6 +20,10 @@ const meta: Meta<typeof PegaDxilMyDetails> = {
20
20
  export default meta;
21
21
  type Story = StoryObj<typeof PegaDxilMyDetails>;
22
22
 
23
+ const Region = props => {
24
+ return <></>;
25
+ };
26
+
23
27
  const renderField = resolvedProps => {
24
28
  const {
25
29
  displayAsStatus = false,
@@ -124,20 +128,36 @@ export const BasePegaDxilMyDetails: Story = args => {
124
128
  setInheritedProp: () => {
125
129
  /* nothing */
126
130
  },
127
- resolveConfigProps: () => {
128
- /* nothing */
131
+ resolveConfigProps: config => {
132
+ return config;
129
133
  }
130
134
  };
131
135
  }
132
136
  };
133
137
 
134
- const regionAChildren = pyReviewRaw.children[0].children.map(child => {
135
- return props.getPConnect().createComponent(child);
136
- });
137
-
138
138
  return (
139
139
  <>
140
- <PegaDxilMyDetails {...props} {...args}>{regionAChildren}</PegaDxilMyDetails>
140
+ <PegaDxilMyDetails {...props} {...args}>
141
+ <Region
142
+ {...{
143
+ getPConnect: () => ({
144
+ setInheritedProp: () => {},
145
+ getChildren: () =>
146
+ pyReviewRaw.children[0].children.map((child, index) => {
147
+ return {
148
+ getPConnect: () => ({
149
+ getRawMetadata: () => pyReviewRaw.children[0].children[index],
150
+ getConfigProps: () => {},
151
+ resolveConfigProps: () => regionChildrenResolved[index],
152
+ getComponent: config =>
153
+ props.getPConnect().createComponent(pyReviewRaw.children[0].children[index])
154
+ })
155
+ };
156
+ })
157
+ })
158
+ }}
159
+ />
160
+ </PegaDxilMyDetails>
141
161
  </>
142
162
  );
143
163
  };
@@ -1,10 +1,10 @@
1
- import { Fragment } from 'react';
2
- import { Grid, Flex, FieldGroup, withConfiguration } from '@pega/cosmos-react-core';
1
+ import { Fragment, Children, ReactElement } from 'react';
2
+ import { Grid, Flex, FieldGroup, withConfiguration, GridContainerProps } from '@pega/cosmos-react-core';
3
3
  import type { PConnFieldProps } from './PConnProps';
4
4
  import DetailsRender from './DetailsRender';
5
5
  import HighlightRender from './HighlightRender';
6
6
 
7
- import StyledPegaDxilMyDetailsWrapper from './styles';
7
+ import StyledPegaDxilMyDetailsWrapper, { StyledDetailsGridContainer, StyledHighlightedFieldsHrLine } from './styles';
8
8
 
9
9
  // includes in bundle
10
10
  import { getAllFields } from './utils';
@@ -21,33 +21,30 @@ interface PegaDxilMyDetailsProps extends PConnFieldProps {
21
21
  // any default values in config.pros should be set in defaultProps at bottom of this file
22
22
  function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
23
23
 
24
- const { getPConnect, children, label, showLabel = true, showHighlightedData = false } = props;
24
+ const { getPConnect, label, showLabel = true, showHighlightedData = false } = props;
25
25
  const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
26
26
 
27
- // update children with readonly
28
- // eslint-disable-next-line guard-for-in
29
- for (const index in children) {
30
- const kid = children[index];
31
- kid.props.getPConnect().setInheritedProp('readOnly', true);
32
- kid.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
27
+ // storybook doesn't get children of 1 as an array of 1
28
+ let { children } = props;
29
+ if (!Array.isArray(children)) {
30
+ children = Children.toArray(children);
33
31
  }
34
32
 
33
+ // update children with readonly
34
+ Children.toArray(children).forEach(child => {
35
+ // @ts-ignore
36
+ child.props.getPConnect().setInheritedProp('readOnly', true);
37
+ // @ts-ignore
38
+ child.props.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
39
+ });
40
+
35
41
  const numRegions = getAllFields(getPConnect)?.length;
36
42
  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
37
- const gridContainer = { colGap: 0, 'margin-line-start': 0 };
38
- // @ts-ignore
43
+
44
+ const gridContainer: GridContainerProps = { colGap: 0 };
39
45
  gridContainer.cols = gridRepeat;
40
- // @ts-ignore
41
46
  gridContainer.alignItems = 'start';
42
47
 
43
- const gridHighlightContainer = { "gap": 2};
44
- // @ts-ignore
45
- gridHighlightContainer.cols = gridRepeat;
46
- // @ts-ignore
47
- gridHighlightContainer.alignItems = 'flex-start';
48
- // @ts-ignore
49
- gridHighlightContainer.pad = [0, 0, 2, 0];
50
-
51
48
  // Set up highlighted data to pass in return if is set to show, need raw metadata to pass to createComponent
52
49
  let highlightedDataArr = [];
53
50
  if (showHighlightedData) {
@@ -55,17 +52,10 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
55
52
  const { highlightedData = [] } = getPConnect().getRawMetadata().config;
56
53
  // @ts-ignore
57
54
  highlightedDataArr = highlightedData.map((field) => {
58
-
59
- return <HighlightRender field={field} props={props} />;
55
+ return <HighlightRender field={field} getPConnect={props.getPConnect} />;
60
56
  });
61
57
  }
62
58
 
63
- const hrStyle = {
64
- line: {
65
- margin: '0.75rem 0',
66
- opacity: '50%'
67
- }
68
- };
69
59
 
70
60
  return (
71
61
  <StyledPegaDxilMyDetailsWrapper>
@@ -77,15 +67,18 @@ function PegaDxilMyDetails(props: PegaDxilMyDetailsProps) {
77
67
  container={{ direction: 'row', alignItems: 'normal', colGap: 10 }}
78
68
  data-testid={`highlighted-column-count-${numRegions}`}
79
69
  >
80
- {highlightedDataArr.map((child: any, i: number) => (
70
+ {highlightedDataArr.map((child: ReactElement, i: number) => (
81
71
  <Fragment key={`hf-${i + 1}`}>{child}</Fragment>
82
72
  ))}
83
73
  </Flex>
84
- <hr style={hrStyle.line} />
74
+ <StyledHighlightedFieldsHrLine />
85
75
  </>
86
76
  )}
87
- <Grid container={gridContainer} data-testid={`column-count-${numRegions}`} >
88
- {children.map((child: any, i: number) => (
77
+ <Grid
78
+ as={StyledDetailsGridContainer}
79
+ container={gridContainer}
80
+ data-testid={`column-count-${numRegions}`} >
81
+ {children.map((child: ReactElement, i: number) => (
89
82
 
90
83
  <Flex
91
84
  // @ts-ignore