@pega/custom-dx-components 0.23.14 → 0.23.16

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 (68) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/Constellation/Field/Boolean/index.jsx.mustache +15 -3
  3. package/src/tasks/create/templates/Constellation/Field/Date/config.json.mustache +10 -1
  4. package/src/tasks/create/templates/Constellation/Field/Date/index.jsx.mustache +19 -3
  5. package/src/tasks/create/templates/Constellation/Field/DateTime/index.jsx.mustache +18 -3
  6. package/src/tasks/create/templates/Constellation/Field/Decimal/index.jsx.mustache +18 -3
  7. package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.jsx.mustache +18 -3
  8. package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.jsx.mustache +19 -3
  9. package/src/tasks/create/templates/Constellation/Field/Integer/index.jsx.mustache +20 -3
  10. package/src/tasks/create/templates/Constellation/Field/Picklist/index.jsx.mustache +25 -3
  11. package/src/tasks/create/templates/Constellation/Field/Text/index.jsx.mustache +4 -3
  12. package/src/tasks/create/templates/Constellation/Field/Text-Email/index.jsx.mustache +19 -3
  13. package/src/tasks/create/templates/Constellation/Field/Text-Input/index.jsx.mustache +15 -3
  14. package/src/tasks/create/templates/Constellation/Field/Text-Paragraph/index.jsx.mustache +15 -3
  15. package/src/tasks/create/templates/Constellation/Field/Text-Phone/index.jsx.mustache +18 -3
  16. package/src/tasks/create/templates/Constellation/Field/Text-URL/index.jsx.mustache +18 -3
  17. package/src/tasks/create/templates/Constellation/Field/TimeofDay/index.jsx.mustache +20 -4
  18. package/src/tasks/create/templates/Constellation/Template/FORM/index.jsx.mustache +18 -12
  19. package/src/tasks/create/templates/Constellation/Template/FORM-region/index.jsx.mustache +12 -9
  20. package/src/tasks/create/templates/Constellation/Widget/CASE/config.json.mustache +1 -1
  21. package/src/tasks/create/templates/Launchpad/Widget/CASE/config.json.mustache +1 -1
  22. package/src/tasks/init/index.js +5 -5
  23. package/src/tasks/init/template/jest.config.cjs +21 -0
  24. package/src/tasks/init/template/package.json.mustache +1 -1
  25. package/tests/assets/components/create/Pega_DXIL_MyTestText/index.jsx +5 -4
  26. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyBoolean/index.jsx +17 -5
  27. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/config.json +1 -1
  28. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCurrency/index.jsx +19 -4
  29. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/config.json +10 -1
  30. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDate/index.jsx +20 -4
  31. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDateTime/index.jsx +19 -4
  32. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyDecimal/index.jsx +19 -4
  33. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyEmail/index.jsx +20 -4
  34. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/index.jsx +15 -9
  35. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyInteger/index.jsx +21 -4
  36. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyParagraph/index.jsx +16 -4
  37. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPercentage/index.jsx +20 -4
  38. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPhone/index.jsx +19 -4
  39. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyPicklist/index.jsx +26 -4
  40. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyText/index.jsx +5 -4
  41. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTextInput/index.jsx +16 -4
  42. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTimeOfDay/index.jsx +21 -5
  43. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/index.jsx +12 -9
  44. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyURL/index.jsx +19 -4
  45. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyBoolean/index.jsx +17 -5
  46. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCaseWidget/config.json +1 -1
  47. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCurrency/index.jsx +19 -4
  48. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDate/config.json +10 -1
  49. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDate/index.jsx +20 -4
  50. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDateTime/index.jsx +19 -4
  51. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyDecimal/index.jsx +19 -4
  52. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyEmail/index.jsx +20 -4
  53. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/index.jsx +15 -9
  54. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyInteger/index.jsx +21 -4
  55. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/index.jsx +1 -1
  56. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyParagraph/index.jsx +16 -4
  57. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPercentage/index.jsx +20 -4
  58. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPhone/index.jsx +19 -4
  59. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPicklist/index.jsx +26 -4
  60. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyText/index.jsx +5 -4
  61. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTextInput/index.jsx +16 -4
  62. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTimeOfDay/index.jsx +21 -5
  63. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyTwoColumnForm/index.jsx +12 -9
  64. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyURL/index.jsx +19 -4
  65. package/tests/functional/localCreateBuildAllDeleteAll.test.js +2 -2
  66. package/tests/functional/localCreateBuildDelete.test.js +1 -1
  67. package/tests/functional/localCreatePublishAllDeleteAll.test.js +2 -2
  68. package/tests/functional/localCreatePublishDelete.test.js +2 -1
@@ -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
 
@@ -38,12 +38,15 @@ const PegaDxilMyUrl = props => {
38
38
  propUrlLabel,
39
39
  urlLabelSelection,
40
40
  tableDisplayAs,
41
- hasSuggestions
41
+ hasSuggestions,
42
+ fieldMetadata,
43
+ enableAdditionalInformation
42
44
  } = props;
43
45
  const { formatter } = props;
44
46
  const pConn = getPConnect();
45
47
  const actions = pConn.getActionsApi();
46
48
  const propName = pConn.getStateProps().value;
49
+ const fieldDescription = fieldMetadata?.description;
47
50
  const hasValueChange = useRef(false);
48
51
 
49
52
 
@@ -166,6 +169,14 @@ const PegaDxilMyUrl = props => {
166
169
  }}
167
170
  onFocus={actions.onFocus}
168
171
  onResolveSuggestion={onResolveSuggestionHandler}
172
+ {...(enableAdditionalInformation && fieldDescription
173
+ ? {
174
+ additionalInfo: {
175
+ heading: label,
176
+ content: fieldDescription
177
+ }
178
+ }
179
+ : {})}
169
180
  />
170
181
  </StyledPegaDxilMyUrlWrapper>
171
182
  );
@@ -180,7 +191,7 @@ PegaDxilMyUrl.defaultProps = {
180
191
  disabled: false,
181
192
  readOnly: false,
182
193
  required: false,
183
- testId: null,
194
+ testId: '',
184
195
  displayMode: null,
185
196
  additionalProps: {},
186
197
  variant: 'inline',
@@ -196,7 +207,9 @@ PegaDxilMyUrl.defaultProps = {
196
207
  propUrlLabel: '',
197
208
  urlLabelSelection: 'constant',
198
209
  tableDisplayAs: 'link',
199
- hasSuggestions: false
210
+ hasSuggestions: false,
211
+ fieldMetadata: {},
212
+ enableAdditionalInformation: false
200
213
  };
201
214
 
202
215
  PegaDxilMyUrl.propTypes = {
@@ -226,7 +239,9 @@ PegaDxilMyUrl.propTypes = {
226
239
  propUrlLabel: PropTypes.string,
227
240
  urlLabelSelection: PropTypes.string,
228
241
  tableDisplayAs: PropTypes.string,
229
- hasSuggestions: PropTypes.bool
242
+ hasSuggestions: PropTypes.bool,
243
+ fieldMetadata: PropTypes.objectOf(PropTypes.any),
244
+ enableAdditionalInformation: PropTypes.bool
230
245
  };
231
246
 
232
247
  export default PegaDxilMyUrl;
@@ -29,12 +29,21 @@ const PegaDxilMyBoolean = props => {
29
29
  displayMode,
30
30
  variant,
31
31
  trueLabel,
32
- falseLabel
32
+ falseLabel,
33
+ fieldMetadata
33
34
  } = props;
34
35
  const pConn = getPConnect();
35
36
  const actions = pConn.getActionsApi();
36
37
  const propName = pConn.getStateProps().value;
37
38
 
39
+ const fieldAdditionalInfo = fieldMetadata?.additionalInformation;
40
+ const additionalInfo = fieldAdditionalInfo
41
+ ? {
42
+ heading: caption,
43
+ content: fieldAdditionalInfo
44
+ }
45
+ : undefined;
46
+
38
47
  let { readOnly, required, disabled } = props;
39
48
  [readOnly, required, disabled] = [readOnly, required, disabled].map(
40
49
  (prop) => prop === true || (typeof prop === 'string' && prop === 'true')
@@ -62,10 +71,11 @@ const PegaDxilMyBoolean = props => {
62
71
  pConn.getValidationApi().validate(event.target.checked);
63
72
  }}
64
73
  data-testid={testId}
74
+ additionalInfo={additionalInfo}
65
75
  />
66
76
  );
67
77
 
68
- const parentTestId = testId ? `${testId}-parent` : testId;
78
+ const parentTestId = testId === '' ? `${testId}-parent` : testId;
69
79
 
70
80
  let displayComponent;
71
81
  if (displayMode) {
@@ -138,13 +148,14 @@ PegaDxilMyBoolean.defaultProps = {
138
148
  disabled: false,
139
149
  readOnly: false,
140
150
  required: false,
141
- testId: null,
151
+ testId: '',
142
152
  additionalProps: {},
143
153
  displayMode: null,
144
154
  variant: 'inline',
145
155
  displayValue: 'Yes/No',
146
156
  trueLabel: '',
147
- falseLabel: ''
157
+ falseLabel: '',
158
+ fieldMetadata: {}
148
159
  };
149
160
 
150
161
  PegaDxilMyBoolean.propTypes = {
@@ -164,7 +175,8 @@ PegaDxilMyBoolean.propTypes = {
164
175
  variant: PropTypes.string,
165
176
  displayValue: PropTypes.string,
166
177
  trueLabel: PropTypes.string,
167
- falseLabel: PropTypes.string
178
+ falseLabel: PropTypes.string,
179
+ fieldMetadata: PropTypes.objectOf(PropTypes.any)
168
180
  };
169
181
 
170
182
  export default PegaDxilMyBoolean;
@@ -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
  }
@@ -46,13 +46,23 @@ const PegaDxilMyCurrency = props => {
46
46
  negative,
47
47
  notation,
48
48
  isTableFormatter,
49
- hasSuggestions
49
+ hasSuggestions,
50
+ fieldMetadata,
51
+ enableAdditionalInformation
50
52
  } = props;
51
53
  let { currencyDisplay } = props;
52
54
  const pConn = getPConnect();
53
55
  const actions = pConn.getActionsApi();
54
56
  const propName = pConn.getStateProps().value;
55
57
  const [currencyValue, setCurrencyValue] = useState(() => formatValue(value));
58
+ const fieldDescription = fieldMetadata?.description;
59
+ const additionalInfo =
60
+ enableAdditionalInformation && fieldDescription
61
+ ? {
62
+ heading: label,
63
+ content: fieldDescription
64
+ }
65
+ : undefined;
56
66
 
57
67
  let { readOnly, required, disabled } = props;
58
68
 
@@ -211,6 +221,7 @@ const PegaDxilMyCurrency = props => {
211
221
  readOnly={readOnly}
212
222
  required={required}
213
223
  data-testid={testId}
224
+ additionalInfo={additionalInfo}
214
225
  onChange={(enteredValue) => {
215
226
  if (hasSuggestions) {
216
227
  setStatus(undefined);
@@ -248,7 +259,7 @@ PegaDxilMyCurrency.defaultProps = {
248
259
  allowDecimals: true,
249
260
  currencyISOCode: 'USD',
250
261
  isoCodeSelection: 'constant',
251
- testId: null,
262
+ testId: '',
252
263
  displayMode: null,
253
264
  additionalProps: {},
254
265
  variant: 'inline',
@@ -260,7 +271,9 @@ PegaDxilMyCurrency.defaultProps = {
260
271
  currencyDecimalPrecision: 'auto',
261
272
  isTableFormatter: false,
262
273
  alwaysShowISOCode: false,
263
- hasSuggestions: false
274
+ hasSuggestions: false,
275
+ fieldMetadata: {},
276
+ enableAdditionalInformation: false
264
277
  };
265
278
 
266
279
  PegaDxilMyCurrency.propTypes = {
@@ -290,7 +303,9 @@ PegaDxilMyCurrency.propTypes = {
290
303
  currencyDecimalPrecision: PropTypes.string,
291
304
  isTableFormatter: PropTypes.bool,
292
305
  alwaysShowISOCode: PropTypes.bool,
293
- hasSuggestions: PropTypes.bool
306
+ hasSuggestions: PropTypes.bool,
307
+ fieldMetadata: PropTypes.objectOf(PropTypes.any),
308
+ enableAdditionalInformation: PropTypes.bool
294
309
  };
295
310
 
296
311
  export default PegaDxilMyCurrency;
@@ -117,6 +117,11 @@
117
117
  "name": "helperText",
118
118
  "label": "Helper text",
119
119
  "format": "TEXT"
120
+ },
121
+ {
122
+ "name": "enableAdditionalInformation",
123
+ "label": "Enable additional information on field",
124
+ "format": "BOOLEAN"
120
125
  }
121
126
  ]
122
127
  },
@@ -141,7 +146,11 @@
141
146
  },
142
147
  {
143
148
  "key": "DateTime-Long",
144
- "value": "Date Time"
149
+ "value": "Date (Long)"
150
+ },
151
+ {
152
+ "key": "DateTime-Short",
153
+ "value": "Date (Short)"
145
154
  },
146
155
  {
147
156
  "key": "DateTime-Since",
@@ -38,7 +38,9 @@ const PegaDxilMyDate = props => {
38
38
  additionalProps,
39
39
  displayMode,
40
40
  variant,
41
- hasSuggestions
41
+ hasSuggestions,
42
+ fieldMetadata,
43
+ enableAdditionalInformation
42
44
  } = props;
43
45
 
44
46
  let {formatter} = props;
@@ -182,6 +184,15 @@ const PegaDxilMyDate = props => {
182
184
  </StyledPegaDxilMyDateWrapper>
183
185
  );
184
186
  } else {
187
+ const fieldDescription = fieldMetadata?.description;
188
+ const additionalInfo =
189
+ enableAdditionalInformation && fieldDescription
190
+ ? {
191
+ heading: label,
192
+ content: fieldDescription
193
+ }
194
+ : undefined;
195
+
185
196
  dateComponent = (
186
197
  <StyledPegaDxilMyDateWrapper>
187
198
  <DateInput
@@ -189,6 +200,7 @@ const PegaDxilMyDate = props => {
189
200
  label={label}
190
201
  labelHidden={hideLabel}
191
202
  info={validatemessage || helperText}
203
+ additionalInfo={additionalInfo}
192
204
  status={status}
193
205
  value={value || undefined}
194
206
  disabled={disabled}
@@ -222,13 +234,15 @@ PegaDxilMyDate.defaultProps = {
222
234
  showWeekNumber: false,
223
235
  nextYearRange: "",
224
236
  previousYearRange: "",
225
- testId: null,
237
+ testId: "",
226
238
  showAsFormattedText: false,
227
239
  additionalProps: {},
228
240
  displayMode: null,
229
241
  variant: "inline",
230
242
  formatter: "defaultDate",
231
- hasSuggestions: false
243
+ hasSuggestions: false,
244
+ fieldMetadata: {},
245
+ enableAdditionalInformation: false
232
246
  };
233
247
 
234
248
  PegaDxilMyDate.propTypes = {
@@ -250,7 +264,9 @@ PegaDxilMyDate.propTypes = {
250
264
  displayMode: PropTypes.string,
251
265
  variant: PropTypes.string,
252
266
  formatter: PropTypes.string,
253
- hasSuggestions: PropTypes.bool
267
+ hasSuggestions: PropTypes.bool,
268
+ fieldMetadata: PropTypes.objectOf(PropTypes.any),
269
+ enableAdditionalInformation: PropTypes.bool
254
270
  };
255
271
 
256
272
  export default PegaDxilMyDate;
@@ -40,12 +40,22 @@ const PegaDxilMyDateTime = props => {
40
40
  additionalProps,
41
41
  displayMode,
42
42
  variant,
43
- hasSuggestions
43
+ hasSuggestions,
44
+ fieldMetadata,
45
+ enableAdditionalInformation
44
46
  } = props;
45
47
  let { formatter } = props;
46
48
  const pConn = getPConnect();
47
49
  const actions = pConn.getActionsApi();
48
50
  const propName = pConn.getStateProps().value;
51
+ const fieldDescription = fieldMetadata?.description;
52
+ const additionalInfo =
53
+ enableAdditionalInformation && fieldDescription
54
+ ? {
55
+ heading: label,
56
+ content: fieldDescription
57
+ }
58
+ : undefined;
49
59
 
50
60
  const environmentInfo = PCore.getEnvironmentInfo();
51
61
  const timezone = environmentInfo && environmentInfo.getTimeZone();
@@ -181,6 +191,7 @@ const PegaDxilMyDateTime = props => {
181
191
  label={label}
182
192
  labelHidden={hideLabel}
183
193
  info={validatemessage || helperText}
194
+ additionalInfo={additionalInfo}
184
195
  status={status}
185
196
  value={DateTimeFormatter.convertToTimezone(value, { timezone }) || undefined}
186
197
  withSeconds={withSeconds}
@@ -218,12 +229,14 @@ PegaDxilMyDateTime.defaultProps = {
218
229
  showWeekNumber: false,
219
230
  nextYearRange: "",
220
231
  previousYearRange: "",
221
- testId: null,
232
+ testId: "",
222
233
  additionalProps: {},
223
234
  displayMode: null,
224
235
  variant: "inline",
225
236
  Format: "defaultDateTime",
226
- hasSuggestions: false
237
+ hasSuggestions: false,
238
+ fieldMetadata: {},
239
+ enableAdditionalInformation: false
227
240
  };
228
241
 
229
242
  PegaDxilMyDateTime.propTypes = {
@@ -248,7 +261,9 @@ PegaDxilMyDateTime.propTypes = {
248
261
  variant: PropTypes.string,
249
262
  formatter: PropTypes.string,
250
263
  Format: PropTypes.string,
251
- hasSuggestions: PropTypes.bool
264
+ hasSuggestions: PropTypes.bool,
265
+ fieldMetadata: PropTypes.objectOf(PropTypes.any),
266
+ enableAdditionalInformation: PropTypes.bool
252
267
  };
253
268
 
254
269
  export default PegaDxilMyDateTime;
@@ -30,7 +30,9 @@ const PegaDxilMyDecimal = props => {
30
30
  notation,
31
31
  currencyISOCode,
32
32
  isTableFormatter,
33
- hasSuggestions
33
+ hasSuggestions,
34
+ fieldMetadata,
35
+ enableAdditionalInformation
34
36
  } = props;
35
37
  let { showGroupSeparators } = props;
36
38
  let { currencyDisplay } = props;
@@ -38,6 +40,14 @@ const PegaDxilMyDecimal = props => {
38
40
  const actions = pConn.getActionsApi();
39
41
  const propName = pConn.getStateProps().value;
40
42
  const [decimalValue, setDecimalValue] = useState(value?.toString());
43
+ const fieldDescription = fieldMetadata?.description;
44
+ const additionalInfo =
45
+ enableAdditionalInformation && fieldDescription
46
+ ? {
47
+ heading: label,
48
+ content: fieldDescription
49
+ }
50
+ : undefined;
41
51
  const hasValueChange = useRef(false);
42
52
 
43
53
  let { readOnly, required, disabled } = props;
@@ -187,6 +197,7 @@ const PegaDxilMyDecimal = props => {
187
197
  numberOfDecimals={numberOfDecimals}
188
198
  showGroupSeparators={showGroupSeparators}
189
199
  data-testid={testId}
200
+ additionalInfo={additionalInfo}
190
201
  onChange={(enteredValue) => {
191
202
  if (hasSuggestions) {
192
203
  setStatus(undefined);
@@ -222,7 +233,7 @@ PegaDxilMyDecimal.defaultProps = {
222
233
  disabled: false,
223
234
  readOnly: false,
224
235
  required: false,
225
- testId: null,
236
+ testId: "",
226
237
  decimalPrecision: '',
227
238
  showGroupSeparators: false,
228
239
  displayMode: null,
@@ -236,7 +247,9 @@ PegaDxilMyDecimal.defaultProps = {
236
247
  currencyDisplay: 'symbol',
237
248
  currencyDecimalPrecision: 'auto',
238
249
  isTableFormatter: false,
239
- hasSuggestions: false
250
+ hasSuggestions: false,
251
+ fieldMetadata: {},
252
+ enableAdditionalInformation: false
240
253
  };
241
254
 
242
255
  PegaDxilMyDecimal.propTypes = {
@@ -264,7 +277,9 @@ PegaDxilMyDecimal.propTypes = {
264
277
  currencyDisplay: PropTypes.string,
265
278
  currencyDecimalPrecision: PropTypes.string,
266
279
  isTableFormatter: PropTypes.bool,
267
- hasSuggestions: PropTypes.bool
280
+ hasSuggestions: PropTypes.bool,
281
+ fieldMetadata: PropTypes.objectOf(PropTypes.any),
282
+ enableAdditionalInformation: PropTypes.bool
268
283
  };
269
284
 
270
285
  export default PegaDxilMyDecimal;
@@ -70,12 +70,23 @@ const PegaDxilMyEmail = props => {
70
70
  additionalProps,
71
71
  variant,
72
72
  isTableFormatter,
73
- hasSuggestions
73
+ hasSuggestions,
74
+ fieldMetadata,
75
+ enableAdditionalInformation
74
76
  } = props;
75
77
  const { formatter } = props;
76
78
  const pConn = getPConnect();
77
79
  const actions = pConn.getActionsApi();
78
80
  const propName = pConn.getStateProps().value;
81
+ const fieldDescription = fieldMetadata?.description;
82
+ const additionalInfo =
83
+ enableAdditionalInformation && fieldDescription
84
+ ? {
85
+ heading: label,
86
+ content: fieldDescription
87
+ }
88
+ : undefined;
89
+
79
90
  const hasValueChange = useRef(false);
80
91
 
81
92
 
@@ -157,6 +168,7 @@ const PegaDxilMyEmail = props => {
157
168
  label={label}
158
169
  labelHidden={hideLabel}
159
170
  info={validatemessage || helperText}
171
+ additionalInfo={additionalInfo}
160
172
  value={inputValue}
161
173
  status={status}
162
174
  placeholder={placeholder}
@@ -199,13 +211,15 @@ PegaDxilMyEmail.defaultProps = {
199
211
  disabled: false,
200
212
  readOnly: false,
201
213
  required: false,
202
- testId: null,
214
+ testId: '',
203
215
  displayMode: null,
204
216
  additionalProps: {},
205
217
  variant: 'inline',
206
218
  formatter: '',
207
219
  isTableFormatter: false,
208
- hasSuggestions: false
220
+ hasSuggestions: false,
221
+ fieldMetadata: {},
222
+ enableAdditionalInformation: false
209
223
  };
210
224
 
211
225
  PegaDxilMyEmail.propTypes = {
@@ -225,7 +239,9 @@ PegaDxilMyEmail.propTypes = {
225
239
  variant: PropTypes.string,
226
240
  formatter: PropTypes.string,
227
241
  isTableFormatter: PropTypes.bool,
228
- hasSuggestions: PropTypes.bool
242
+ hasSuggestions: PropTypes.bool,
243
+ fieldMetadata: PropTypes.objectOf(PropTypes.any),
244
+ enableAdditionalInformation: PropTypes.bool
229
245
  };
230
246
 
231
247
  export default PegaDxilMyEmail;
@@ -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 = {
@@ -37,7 +37,9 @@ const PegaDxilMyInteger = props => {
37
37
  negative,
38
38
  notation,
39
39
  isTableFormatter,
40
- hasSuggestions
40
+ hasSuggestions,
41
+ fieldMetadata,
42
+ enableAdditionalInformation
41
43
  } = props;
42
44
  let { showGroupSeparators } = props;
43
45
  let { currencyDisplay } = props;
@@ -46,6 +48,15 @@ const PegaDxilMyInteger = props => {
46
48
  const propName = pConn.getStateProps().value;
47
49
  const [integerValue, setIntegerValue] = useState(value?.toString());
48
50
  const sliderDefaultValue = !defaultValue && defaultValue !== 0 ? max : defaultValue;
51
+ const fieldDescription = fieldMetadata?.description;
52
+ const additionalInfo =
53
+ enableAdditionalInformation && fieldDescription
54
+ ? {
55
+ heading: label,
56
+ content: fieldDescription
57
+ }
58
+ : undefined;
59
+
49
60
  const hasValueChange = useRef(false);
50
61
 
51
62
 
@@ -207,6 +218,7 @@ const PegaDxilMyInteger = props => {
207
218
  label={label}
208
219
  labelHidden={hideLabel}
209
220
  info={validatemessage || helperText}
221
+ additionalInfo={additionalInfo}
210
222
  value={!integerValue ? sliderDefaultValue : Number(integerValue)}
211
223
  status={status}
212
224
  placeholder={placeholder}
@@ -234,6 +246,7 @@ const PegaDxilMyInteger = props => {
234
246
  label={label}
235
247
  labelHidden={hideLabel}
236
248
  info={validatemessage || helperText}
249
+ additionalInfo={additionalInfo}
237
250
  value={integerValue}
238
251
  status={status}
239
252
  placeholder={displayAs === 'input' ? placeholder : ''}
@@ -272,7 +285,7 @@ PegaDxilMyInteger.defaultProps = {
272
285
  disabled: false,
273
286
  readOnly: false,
274
287
  required: false,
275
- testId: null,
288
+ testId: '',
276
289
  showGroupSeparators: false,
277
290
  displayMode: null,
278
291
  displayAs: 'input',
@@ -292,7 +305,9 @@ PegaDxilMyInteger.defaultProps = {
292
305
  currencyDisplay: 'symbol',
293
306
  currencyDecimalPrecision: 'auto',
294
307
  isTableFormatter: false,
295
- hasSuggestions: false
308
+ hasSuggestions: false,
309
+ fieldMetadata: {},
310
+ enableAdditionalInformation: false
296
311
  };
297
312
 
298
313
  PegaDxilMyInteger.propTypes = {
@@ -327,7 +342,9 @@ PegaDxilMyInteger.propTypes = {
327
342
  currencyDisplay: PropTypes.string,
328
343
  currencyDecimalPrecision: PropTypes.string,
329
344
  isTableFormatter: PropTypes.bool,
330
- hasSuggestions: PropTypes.bool
345
+ hasSuggestions: PropTypes.bool,
346
+ fieldMetadata: PropTypes.objectOf(PropTypes.any),
347
+ enableAdditionalInformation: PropTypes.bool
331
348
  };
332
349
 
333
350
  export default PegaDxilMyInteger;
@@ -1,4 +1,4 @@
1
- /* eslint-disable no-nested-ternary */
1
+
2
2
  import { Fragment } from 'react';
3
3
  import { DateTimeDisplay, Card, CardHeader, CardContent, Flex } from '@pega/cosmos-react-core';
4
4
  import PropTypes from 'prop-types';
@@ -71,7 +71,8 @@ const PegaDxilMyParagraph = props => {
71
71
  additionalProps,
72
72
  variant,
73
73
  isTableFormatter,
74
- hasSuggestions
74
+ hasSuggestions,
75
+ enableAdditionalInformation
75
76
  } = props;
76
77
  const { formatter } = props;
77
78
  const pConn = getPConnect();
@@ -79,6 +80,7 @@ const PegaDxilMyParagraph = props => {
79
80
  const propName = pConn.getStateProps().value;
80
81
  const maxLength = fieldMetadata?.maxLength;
81
82
  const hasValueChange = useRef(false);
83
+ const fieldDescription = fieldMetadata?.description;
82
84
 
83
85
 
84
86
  // BUG-547602: Temporary type coercion for 8.5 until DXAPIs are enhanced to pass original pxViewMetadata JSON, respecting boolean primitives
@@ -183,6 +185,14 @@ const PegaDxilMyParagraph = props => {
183
185
  }
184
186
  }}
185
187
  onResolveSuggestion={onResolveSuggestionHandler}
188
+ {...(enableAdditionalInformation && fieldDescription
189
+ ? {
190
+ additionalInfo: {
191
+ heading: label,
192
+ content: fieldDescription
193
+ }
194
+ }
195
+ : {})}
186
196
  />
187
197
  </StyledPegaDxilMyParagraphWrapper>
188
198
  );
@@ -197,14 +207,15 @@ PegaDxilMyParagraph.defaultProps = {
197
207
  disabled: false,
198
208
  readOnly: false,
199
209
  required: false,
200
- testId: null,
210
+ testId: '',
201
211
  displayMode: null,
202
212
  fieldMetadata: {},
203
213
  additionalProps: {},
204
214
  variant: 'inline',
205
215
  formatter: '',
206
216
  isTableFormatter: false,
207
- hasSuggestions: false
217
+ hasSuggestions: false,
218
+ enableAdditionalInformation: false
208
219
  };
209
220
 
210
221
  PegaDxilMyParagraph.propTypes = {
@@ -225,7 +236,8 @@ PegaDxilMyParagraph.propTypes = {
225
236
  variant: PropTypes.string,
226
237
  formatter: PropTypes.string,
227
238
  isTableFormatter: PropTypes.bool,
228
- hasSuggestions: PropTypes.bool
239
+ hasSuggestions: PropTypes.bool,
240
+ enableAdditionalInformation: PropTypes.bool
229
241
  };
230
242
 
231
243
  export default PegaDxilMyParagraph;