@pega/custom-dx-components 0.23.15 → 0.23.17

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 (30) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/Constellation/Field/Decimal/index.jsx.mustache +2 -2
  3. package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.jsx.mustache +2 -2
  4. package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.jsx.mustache +4 -4
  5. package/src/tasks/create/templates/Constellation/Field/Integer/index.jsx.mustache +2 -2
  6. package/src/tasks/create/templates/Constellation/Template/DETAILS/index.jsx.mustache +2 -2
  7. package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.jsx.mustache +2 -2
  8. package/src/tasks/create/templates/Constellation/Template/FORM/demo.stories.jsx.mustache +5 -2
  9. package/src/tasks/create/templates/Constellation/Template/FORM/index.jsx.mustache +18 -12
  10. package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.stories.jsx.mustache +5 -2
  11. package/src/tasks/create/templates/Constellation/Template/FORM-region/index.jsx.mustache +14 -11
  12. package/src/tasks/create/templates/Constellation/Widget/CASE/config.json.mustache +1 -1
  13. package/src/tasks/create/templates/Constellation/Widget/CASE/index.jsx.mustache +2 -2
  14. package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Operator.jsx.mustache +2 -2
  15. package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/index.jsx.mustache +2 -2
  16. package/src/tasks/create/templates/Launchpad/Widget/CASE/config.json.mustache +1 -1
  17. package/src/tasks/create/templates/Launchpad/Widget/CASE/index.jsx.mustache +2 -2
  18. package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Operator.jsx.mustache +2 -2
  19. package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/index.jsx.mustache +2 -2
  20. package/src/tasks/init/template/package.json.mustache +1 -1
  21. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/config.json +1 -1
  22. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/demo.stories.jsx +3 -0
  23. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/index.jsx +15 -9
  24. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/demo.stories.jsx +3 -0
  25. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/index.jsx +12 -9
  26. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCaseWidget/config.json +1 -1
  27. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/demo.stories.jsx +3 -0
  28. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/index.jsx +15 -9
  29. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/demo.stories.jsx +3 -0
  30. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/index.jsx +12 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/custom-dx-components",
3
- "version": "0.23.15",
3
+ "version": "0.23.17",
4
4
  "description": "Utility for building custom UI components",
5
5
  "bin": "./bin/index.js",
6
6
  "scripts": {
package/src/tasks/create/templates/Constellation/Field/Decimal/index.jsx.mustache CHANGED
@@ -110,7 +110,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
110
110
  }
111
111
 
112
112
 
113
- {{! pick new delimiteres for mustache }}
113
+ {{! pick new delimiters for mustache }}
114
114
  {{=<% %>=}}
115
115
 
116
116
  const displayComp =
@@ -138,7 +138,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
138
138
  />
139
139
  );
140
140
 
141
- <%={{ }}=%> {{! revert delimiteres for mustache }}
141
+ <%={{ }}=%> {{! revert delimiters for mustache }}
142
142
 
143
143
  switch (displayMode) {
144
144
  case 'DISPLAY_ONLY': {
package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.jsx.mustache CHANGED
@@ -105,7 +105,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
105
105
 
106
106
  const displayValue = !value && value !== 0 ? undefined : Number(currencyValue);
107
107
 
108
- {{! pick new delimiteres for mustache }}
108
+ {{! pick new delimiters for mustache }}
109
109
  {{=<% %>=}}
110
110
 
111
111
  displayComp = (
@@ -161,7 +161,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
161
161
  );
162
162
  }
163
163
 
164
- <%={{ }}=%> {{! revert delimiteres for mustache }}
164
+ <%={{ }}=%> {{! revert delimiters for mustache }}
165
165
 
166
166
  switch (displayMode) {
167
167
  case 'DISPLAY_ONLY': {
package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.jsx.mustache CHANGED
@@ -112,7 +112,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
112
112
  }
113
113
  }
114
114
 
115
- {{! pick new delimiteres for mustache }}
115
+ {{! pick new delimiters for mustache }}
116
116
  {{=<% %>=}}
117
117
 
118
118
  displayComp = (
@@ -143,7 +143,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
143
143
  );
144
144
  }
145
145
 
146
- <%={{ }}=%> {{! revert delimiteres for mustache }}
146
+ <%={{ }}=%> {{! revert delimiters for mustache }}
147
147
 
148
148
  return displayMode === 'DISPLAY_ONLY' ? (
149
149
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -160,7 +160,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
160
160
  );
161
161
  }
162
162
 
163
- {{! pick new delimiteres for mustache }}
163
+ {{! pick new delimiters for mustache }}
164
164
  {{=<% %>=}}
165
165
 
166
166
  if (displayMode === 'STACKED_LARGE_VAL') {
@@ -175,7 +175,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
175
175
  />
176
176
  );
177
177
 
178
- <%={{ }}=%> {{! revert delimiteres for mustache }}
178
+ <%={{ }}=%> {{! revert delimiters for mustache }}
179
179
 
180
180
  return (
181
181
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
package/src/tasks/create/templates/Constellation/Field/Integer/index.jsx.mustache CHANGED
@@ -123,7 +123,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
123
123
  }
124
124
  }
125
125
 
126
- {{! pick new delimiteres for mustache }}
126
+ {{! pick new delimiters for mustache }}
127
127
  {{=<% %>=}}
128
128
 
129
129
  const displayComp =
@@ -152,7 +152,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
152
152
  />
153
153
  );
154
154
 
155
- <%={{ }}=%> {{! revert delimiteres for mustache }}
155
+ <%={{ }}=%> {{! revert delimiters for mustache }}
156
156
 
157
157
  switch (displayMode) {
158
158
  case 'DISPLAY_ONLY': {
package/src/tasks/create/templates/Constellation/Template/DETAILS/index.jsx.mustache CHANGED
@@ -46,7 +46,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
46
46
 
47
47
  return (
48
48
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
49
- {{! pick new delimiteres for mustache }}
49
+ {{! pick new delimiters for mustache }}
50
50
  {{=<% %>=}}
51
51
  <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
52
52
  {showHighlightedData && highlightedDataArr.length > 0 && (
@@ -65,7 +65,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
65
65
  ))}
66
66
  </Grid>
67
67
  </FieldGroup>
68
- <%={{ }}=%> {{! revert delimiteres for mustache }}
68
+ <%={{ }}=%> {{! revert delimiters for mustache }}
69
69
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
70
70
  );
71
71
 
package/src/tasks/create/templates/Constellation/Template/DETAILS-region/index.jsx.mustache CHANGED
@@ -46,7 +46,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
46
46
 
47
47
  return (
48
48
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
49
- {{! pick new delimiteres for mustache }}
49
+ {{! pick new delimiters for mustache }}
50
50
  {{=<% %>=}}
51
51
  <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
52
52
  {showHighlightedData && highlightedDataArr.length > 0 && (
@@ -65,7 +65,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
65
65
  ))}
66
66
  </Grid>
67
67
  </FieldGroup>
68
- <%={{ }}=%> {{! revert delimiteres for mustache }}
68
+ <%={{ }}=%> {{! revert delimiters for mustache }}
69
69
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
70
70
  );
71
71
 
package/src/tasks/create/templates/Constellation/Template/FORM/demo.stories.jsx.mustache CHANGED
@@ -37,7 +37,7 @@ const renderField = resolvedProps => {
37
37
  ''
38
38
  );
39
39
 
40
- {{! pick new delimiteres for mustache }}
40
+ {{! pick new delimiters for mustache }}
41
41
  {{=<% %>=}}
42
42
 
43
43
  if (label === 'Service Date')
@@ -91,7 +91,7 @@ const renderField = resolvedProps => {
91
91
  ></CosmosPhone>
92
92
  );
93
93
 
94
- <%={{ }}=%> {{! revert delimiteres for mustache }}
94
+ <%={{ }}=%> {{! revert delimiters for mustache }}
95
95
 
96
96
  if (variant === 'inline') {
97
97
  val = value || (
@@ -136,6 +136,9 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
136
136
  getChildren: () => {
137
137
  return pyReviewRaw.children;
138
138
  },
139
+ getInheritedProps: () => {
140
+ return pyReviewRaw.config.inheritedProps;
141
+ },
139
142
  createComponent: config => {
140
143
  // eslint-disable-next-line default-case
141
144
  switch (config.config.value) {
package/src/tasks/create/templates/Constellation/Template/FORM/index.jsx.mustache CHANGED
@@ -1,4 +1,4 @@
1
- import { Grid } from '@pega/cosmos-react-core';
1
+ import { Grid, FieldGroup } from '@pega/cosmos-react-core';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
4
  import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -11,27 +11,33 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
11
11
  export default function {{COMPONENT_CLASS_NAME}}(props) {
12
12
 
13
13
 
14
- const { children, NumCols } = props;
14
+ const { children, NumCols, label, showLabel, getPConnect } = props;
15
+ const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
15
16
 
16
17
  const nCols = parseInt(NumCols, 10);
17
18
 
18
19
  // console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
19
20
 
21
+
22
+
20
23
  return (
21
24
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
22
- {{! pick new delimiteres for mustache }}
23
- {{=<% %>=}}
24
- <Grid container={{
25
- cols: `repeat(${nCols}, minmax(0, 1fr))`,
26
- gap: 2,
27
- wrap: `wrap`
28
- }}>
29
- {children}
30
- </Grid>
31
- <%={{ }}=%> {{! revert delimiteres for mustache }}
25
+ {{! pick new delimiters for mustache }}
26
+ {{=<% %>=}}
27
+ <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
28
+ <Grid container={{
29
+ cols: `repeat(${nCols}, minmax(0, 1fr))`,
30
+ gap: 2,
31
+ wrap: `wrap`
32
+ }}>
33
+ {children}
34
+ </Grid>
35
+ </FieldGroup>
36
+ <%={{ }}=%> {{! revert delimiters for mustache }}
32
37
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
33
38
  );
34
39
 
40
+
35
41
  }
36
42
 
37
43
  {{COMPONENT_CLASS_NAME}}.defaultProps = {
package/src/tasks/create/templates/Constellation/Template/FORM-region/demo.stories.jsx.mustache CHANGED
@@ -38,7 +38,7 @@ const renderField = resolvedProps => {
38
38
  ''
39
39
  );
40
40
 
41
- {{! pick new delimiteres for mustache }}
41
+ {{! pick new delimiters for mustache }}
42
42
  {{=<% %>=}}
43
43
 
44
44
  if (label === 'Service Date')
@@ -93,7 +93,7 @@ const renderField = resolvedProps => {
93
93
  ></CosmosPhone>
94
94
  );
95
95
 
96
- <%={{ }}=%> {{! revert delimiteres for mustache }}
96
+ <%={{ }}=%> {{! revert delimiters for mustache }}
97
97
 
98
98
  if (variant === 'inline') {
99
99
  val = value || (
@@ -141,6 +141,9 @@ export const base{{COMPONENT_CLASS_NAME}} = () => {
141
141
  getChildren: () => {
142
142
  return pyReviewRaw.children;
143
143
  },
144
+ getInheritedProps: () => {
145
+ return pyReviewRaw.config.inheritedProps;
146
+ },
144
147
  createComponent: config => {
145
148
  // eslint-disable-next-line default-case
146
149
  switch (config.config.value) {
package/src/tasks/create/templates/Constellation/Template/FORM-region/index.jsx.mustache CHANGED
@@ -1,4 +1,4 @@
1
- import { Grid, Flex } from '@pega/cosmos-react-core';
1
+ import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
4
  import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
@@ -11,7 +11,8 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
11
11
  export default function {{COMPONENT_CLASS_NAME}}(props) {
12
12
 
13
13
 
14
- const { children } = props;
14
+ const { children, label, showLabel, getPConnect } = props;
15
+ const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
15
16
 
16
17
  const numRegions = children?.length;
17
18
  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
@@ -24,16 +25,18 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
24
25
 
25
26
  return (
26
27
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
27
- {{! pick new delimiteres for mustache }}
28
+ {{! pick new delimiters for mustache }}
28
29
  {{=<% %>=}}
29
- <Grid container={gridContainer}>
30
- {children.map((child, i) => (
31
- <Flex container={flexContainer} key={`r-${i + 1}`}>
32
- {child}
33
- </Flex>
34
- ))}
35
- </Grid>
36
- <%={{ }}=%> {{! revert delimiteres for mustache }}
30
+ <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
31
+ <Grid container={gridContainer}>
32
+ {children.map((child, i) => (
33
+ <Flex container={flexContainer} key={`r-${i + 1}`}>
34
+ {child}
35
+ </Flex>
36
+ ))}
37
+ </Grid>
38
+ </FieldGroup>
39
+ <%={{ }}=%> {{! revert delimiters for mustache }}
37
40
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
38
41
  );
39
42
 
package/src/tasks/create/templates/Constellation/Widget/CASE/config.json.mustache CHANGED
@@ -18,6 +18,6 @@
18
18
  }
19
19
  ],
20
20
  "defaultConfig": {
21
- "label": "@L $this.label"
21
+ "label": "@L {{COMPONENT_LABEL}}"
22
22
  }
23
23
  }
package/src/tasks/create/templates/Constellation/Widget/CASE/index.jsx.mustache CHANGED
@@ -33,7 +33,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
33
33
  if (response.data.data !== null) {
34
34
  setHistory(
35
35
  response.data.data.map((entry, index) => {
36
- {{! pick new delimiteres for mustache }}
36
+ {{! pick new delimiters for mustache }}
37
37
  {{=<% %>=}}
38
38
  return {
39
39
  date: new Date(entry.pxTimeCreated).toLocaleString(),
@@ -41,7 +41,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
41
41
  user: entry.pyPerformer,
42
42
  id: index
43
43
  };
44
- <%={{ }}=%> {{! revert delimiteres for mustache }}
44
+ <%={{ }}=%> {{! revert delimiters for mustache }}
45
45
  })
46
46
  );
47
47
  } else {
package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/Operator.jsx.mustache CHANGED
@@ -31,7 +31,7 @@ const Operator = (props) => {
31
31
  }, [id]);
32
32
 
33
33
 
34
- {{! pick new delimiteres for mustache }}
34
+ {{! pick new delimiters for mustache }}
35
35
  {{=<% %>=}}
36
36
 
37
37
  const OperatorPreview = () => {
@@ -145,7 +145,7 @@ const Operator = (props) => {
145
145
  }
146
146
  };
147
147
 
148
- <%={{ }}=%> {{! revert delimiteres for mustache }}
148
+ <%={{ }}=%> {{! revert delimiters for mustache }}
149
149
 
150
150
  const clickAction = (e) => {
151
151
  setPopoverTarget(e.currentTarget);
package/src/tasks/create/templates/Constellation/Widget/PAGE-CASE/index.jsx.mustache CHANGED
@@ -46,11 +46,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
46
46
  <Card>
47
47
  <CardHeader>{title}</CardHeader>
48
48
  <CardContent>
49
- {{! pick new delimiteres for mustache }} {{=<% %>=}}
49
+ {{! pick new delimiters for mustache }} {{=<% %>=}}
50
50
  <Flex container={{ direction: 'row'}}>
51
51
  <Operator label={hideLabel ? null : _label} name={user.userName} id={user.userId} getPConnect={getPConnect} />
52
52
 
53
- <%={{ }}=%> {{! revert delimiteres for mustache }}
53
+ <%={{ }}=%> {{! revert delimiters for mustache }}
54
54
  {dateTimeValue && (
55
55
  <Fragment>
56
56
  {' '}
package/src/tasks/create/templates/Launchpad/Widget/CASE/config.json.mustache CHANGED
@@ -18,6 +18,6 @@
18
18
  }
19
19
  ],
20
20
  "defaultConfig": {
21
- "label": "@L $this.label"
21
+ "label": "@L {{COMPONENT_LABEL}}"
22
22
  }
23
23
  }
package/src/tasks/create/templates/Launchpad/Widget/CASE/index.jsx.mustache CHANGED
@@ -33,7 +33,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
33
33
  if (response.data.data !== null) {
34
34
  setHistory(
35
35
  response.data.data.map((entry, index) => {
36
- {{! pick new delimiteres for mustache }}
36
+ {{! pick new delimiters for mustache }}
37
37
  {{=<% %>=}}
38
38
  return {
39
39
  date: new Date(entry.CreateDateTime).toLocaleString(),
@@ -41,7 +41,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
41
41
  user: entry.PerformerID,
42
42
  id: index
43
43
  };
44
- <%={{ }}=%> {{! revert delimiteres for mustache }}
44
+ <%={{ }}=%> {{! revert delimiters for mustache }}
45
45
  })
46
46
  );
47
47
  } else {
package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/Operator.jsx.mustache CHANGED
@@ -31,7 +31,7 @@ const Operator = (props) => {
31
31
  }, [id]);
32
32
 
33
33
 
34
- {{! pick new delimiteres for mustache }}
34
+ {{! pick new delimiters for mustache }}
35
35
  {{=<% %>=}}
36
36
 
37
37
  const OperatorPreview = () => {
@@ -187,7 +187,7 @@ const Operator = (props) => {
187
187
  }
188
188
  };
189
189
 
190
- <%={{ }}=%> {{! revert delimiteres for mustache }}
190
+ <%={{ }}=%> {{! revert delimiters for mustache }}
191
191
 
192
192
  const clickAction = (e) => {
193
193
  setPopoverTarget(e.currentTarget);
package/src/tasks/create/templates/Launchpad/Widget/PAGE-CASE/index.jsx.mustache CHANGED
@@ -38,11 +38,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
38
38
  <Card>
39
39
  <CardHeader>{title}</CardHeader>
40
40
  <CardContent>
41
- {{! pick new delimiteres for mustache }} {{=<% %>=}}
41
+ {{! pick new delimiters for mustache }} {{=<% %>=}}
42
42
  <Flex container={{ direction: 'row'}}>
43
43
  <Operator label={_label} name={user} id={user} getPConnect={getPConnect} />
44
44
 
45
- <%={{ }}=%> {{! revert delimiteres for mustache }}
45
+ <%={{ }}=%> {{! revert delimiters for mustache }}
46
46
  {dateTimeValue && (
47
47
  <Fragment>
48
48
  {' '}
package/src/tasks/init/template/package.json.mustache CHANGED
@@ -66,7 +66,7 @@
66
66
  },
67
67
  "devDependencies": {
68
68
  "@pega/configs": "^0.5.3",
69
- "@pega/custom-dx-components": "^0.23.15",
69
+ "@pega/custom-dx-components": "^0.23.17",
70
70
  "@pega/eslint-config": "^0.3.2",
71
71
  "@storybook/addon-actions": "^6.5.12",
72
72
  "@storybook/addon-essentials": "^6.5.12",
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/config.json CHANGED
@@ -18,6 +18,6 @@
18
18
  }
19
19
  ],
20
20
  "defaultConfig": {
21
- "label": "@L $this.label"
21
+ "label": "@L My Case Widget"
22
22
  }
23
23
  }
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/demo.stories.jsx CHANGED
@@ -133,6 +133,9 @@ export const basePegaDxilMyForm = () => {
133
133
  getChildren: () => {
134
134
  return pyReviewRaw.children;
135
135
  },
136
+ getInheritedProps: () => {
137
+ return pyReviewRaw.config.inheritedProps;
138
+ },
136
139
  createComponent: config => {
137
140
  // eslint-disable-next-line default-case
138
141
  switch (config.config.value) {
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/index.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Grid } from '@pega/cosmos-react-core';
1
+ import { Grid, FieldGroup } from '@pega/cosmos-react-core';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
4
  import StyledPegaDxilMyFormWrapper from './styles';
@@ -11,24 +11,30 @@ import StyledPegaDxilMyFormWrapper from './styles';
11
11
  export default function PegaDxilMyForm(props) {
12
12
 
13
13
 
14
- const { children, NumCols } = props;
14
+ const { children, NumCols, label, showLabel, getPConnect } = props;
15
+ const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
15
16
 
16
17
  const nCols = parseInt(NumCols, 10);
17
18
 
18
19
  // console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
19
20
 
21
+
22
+
20
23
  return (
21
24
  <StyledPegaDxilMyFormWrapper>
22
- <Grid container={{
23
- cols: `repeat(${nCols}, minmax(0, 1fr))`,
24
- gap: 2,
25
- wrap: `wrap`
26
- }}>
27
- {children}
28
- </Grid>
25
+ <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
26
+ <Grid container={{
27
+ cols: `repeat(${nCols}, minmax(0, 1fr))`,
28
+ gap: 2,
29
+ wrap: `wrap`
30
+ }}>
31
+ {children}
32
+ </Grid>
33
+ </FieldGroup>
29
34
  </StyledPegaDxilMyFormWrapper>
30
35
  );
31
36
 
37
+
32
38
  }
33
39
 
34
40
  PegaDxilMyForm.defaultProps = {
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/demo.stories.jsx CHANGED
@@ -138,6 +138,9 @@ export const basePegaDxilMyTwoColumnForm = () => {
138
138
  getChildren: () => {
139
139
  return pyReviewRaw.children;
140
140
  },
141
+ getInheritedProps: () => {
142
+ return pyReviewRaw.config.inheritedProps;
143
+ },
141
144
  createComponent: config => {
142
145
  // eslint-disable-next-line default-case
143
146
  switch (config.config.value) {
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/index.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Grid, Flex } from '@pega/cosmos-react-core';
1
+ import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
4
  import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
@@ -11,7 +11,8 @@ import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
11
11
  export default function PegaDxilMyTwoColumnForm(props) {
12
12
 
13
13
 
14
- const { children } = props;
14
+ const { children, label, showLabel, getPConnect } = props;
15
+ const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
15
16
 
16
17
  const numRegions = children?.length;
17
18
  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
@@ -24,13 +25,15 @@ export default function PegaDxilMyTwoColumnForm(props) {
24
25
 
25
26
  return (
26
27
  <StyledPegaDxilMyTwoColumnFormWrapper>
27
- <Grid container={gridContainer}>
28
- {children.map((child, i) => (
29
- <Flex container={flexContainer} key={`r-${i + 1}`}>
30
- {child}
31
- </Flex>
32
- ))}
33
- </Grid>
28
+ <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
29
+ <Grid container={gridContainer}>
30
+ {children.map((child, i) => (
31
+ <Flex container={flexContainer} key={`r-${i + 1}`}>
32
+ {child}
33
+ </Flex>
34
+ ))}
35
+ </Grid>
36
+ </FieldGroup>
34
37
  </StyledPegaDxilMyTwoColumnFormWrapper>
35
38
  );
36
39
 
package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCaseWidget/config.json CHANGED
@@ -18,6 +18,6 @@
18
18
  }
19
19
  ],
20
20
  "defaultConfig": {
21
- "label": "@L $this.label"
21
+ "label": "@L My Case Widget"
22
22
  }
23
23
  }
package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/demo.stories.jsx CHANGED
@@ -133,6 +133,9 @@ export const basePegaDxilMyForm = () => {
133
133
  getChildren: () => {
134
134
  return pyReviewRaw.children;
135
135
  },
136
+ getInheritedProps: () => {
137
+ return pyReviewRaw.config.inheritedProps;
138
+ },
136
139
  createComponent: config => {
137
140
  // eslint-disable-next-line default-case
138
141
  switch (config.config.value) {
package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/index.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Grid } from '@pega/cosmos-react-core';
1
+ import { Grid, FieldGroup } from '@pega/cosmos-react-core';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
4
  import StyledPegaDxilMyFormWrapper from './styles';
@@ -11,24 +11,30 @@ import StyledPegaDxilMyFormWrapper from './styles';
11
11
  export default function PegaDxilMyForm(props) {
12
12
 
13
13
 
14
- const { children, NumCols } = props;
14
+ const { children, NumCols, label, showLabel, getPConnect } = props;
15
+ const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
15
16
 
16
17
  const nCols = parseInt(NumCols, 10);
17
18
 
18
19
  // console.log(`Rendering ${getPConnect()?.getComponentName()} with ${template} with ${children?.length} Region(s)`);
19
20
 
21
+
22
+
20
23
  return (
21
24
  <StyledPegaDxilMyFormWrapper>
22
- <Grid container={{
23
- cols: `repeat(${nCols}, minmax(0, 1fr))`,
24
- gap: 2,
25
- wrap: `wrap`
26
- }}>
27
- {children}
28
- </Grid>
25
+ <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
26
+ <Grid container={{
27
+ cols: `repeat(${nCols}, minmax(0, 1fr))`,
28
+ gap: 2,
29
+ wrap: `wrap`
30
+ }}>
31
+ {children}
32
+ </Grid>
33
+ </FieldGroup>
29
34
  </StyledPegaDxilMyFormWrapper>
30
35
  );
31
36
 
37
+
32
38
  }
33
39
 
34
40
  PegaDxilMyForm.defaultProps = {
package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/demo.stories.jsx CHANGED
@@ -138,6 +138,9 @@ export const basePegaDxilMyTwoColumnForm = () => {
138
138
  getChildren: () => {
139
139
  return pyReviewRaw.children;
140
140
  },
141
+ getInheritedProps: () => {
142
+ return pyReviewRaw.config.inheritedProps;
143
+ },
141
144
  createComponent: config => {
142
145
  // eslint-disable-next-line default-case
143
146
  switch (config.config.value) {
package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/index.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Grid, Flex } from '@pega/cosmos-react-core';
1
+ import { Grid, Flex, FieldGroup } from '@pega/cosmos-react-core';
2
2
  import PropTypes from 'prop-types';
3
3
 
4
4
  import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
@@ -11,7 +11,8 @@ import StyledPegaDxilMyTwoColumnFormWrapper from './styles';
11
11
  export default function PegaDxilMyTwoColumnForm(props) {
12
12
 
13
13
 
14
- const { children } = props;
14
+ const { children, label, showLabel, getPConnect } = props;
15
+ const propsToUse = { label, showLabel, ...getPConnect().getInheritedProps() };
15
16
 
16
17
  const numRegions = children?.length;
17
18
  const gridRepeat = "repeat(".concat(numRegions).concat(", 1fr)");
@@ -24,13 +25,15 @@ export default function PegaDxilMyTwoColumnForm(props) {
24
25
 
25
26
  return (
26
27
  <StyledPegaDxilMyTwoColumnFormWrapper>
27
- <Grid container={gridContainer}>
28
- {children.map((child, i) => (
29
- <Flex container={flexContainer} key={`r-${i + 1}`}>
30
- {child}
31
- </Flex>
32
- ))}
33
- </Grid>
28
+ <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
29
+ <Grid container={gridContainer}>
30
+ {children.map((child, i) => (
31
+ <Flex container={flexContainer} key={`r-${i + 1}`}>
32
+ {child}
33
+ </Flex>
34
+ ))}
35
+ </Grid>
36
+ </FieldGroup>
34
37
  </StyledPegaDxilMyTwoColumnFormWrapper>
35
38
  );
36
39