@pega/custom-dx-components 0.23.15 → 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 (13) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/Constellation/Template/FORM/index.jsx.mustache +18 -12
  3. package/src/tasks/create/templates/Constellation/Template/FORM-region/index.jsx.mustache +12 -9
  4. package/src/tasks/create/templates/Constellation/Widget/CASE/config.json.mustache +1 -1
  5. package/src/tasks/create/templates/Launchpad/Widget/CASE/config.json.mustache +1 -1
  6. package/src/tasks/init/template/package.json.mustache +1 -1
  7. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyCaseWidget/config.json +1 -1
  8. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyForm/index.jsx +15 -9
  9. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyTwoColumnForm/index.jsx +12 -9
  10. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyCaseWidget/config.json +1 -1
  11. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyForm/index.jsx +15 -9
  12. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyPageCaseWidget/index.jsx +1 -1
  13. 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.16",
4
4
  "description": "Utility for building custom UI components",
5
5
  "bin": "./bin/index.js",
6
6
  "scripts": {
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 delimiteres 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 delimiteres 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/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)");
@@ -26,13 +27,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props) {
26
27
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
27
28
  {{! pick new delimiteres 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>
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>
36
39
  <%={{ }}=%> {{! revert delimiteres for mustache }}
37
40
  </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
38
41
  );
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/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/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.16",
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/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/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/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_MyPageCaseWidget/index.jsx CHANGED
@@ -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';
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