@pega/custom-dx-components 0.24.9 → 0.24.10

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/index.tsx.mustache +43 -4
  3. package/src/tasks/init/template/package.json.mustache +1 -1
  4. package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyIconButtonURL/index.tsx +43 -4
  5. package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/index.tsx +43 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/custom-dx-components",
3
- "version": "0.24.9",
3
+ "version": "0.24.10",
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/Icon-Button-URL/index.tsx.mustache CHANGED
@@ -5,7 +5,8 @@ import {
5
5
  withConfiguration,
6
6
  registerIcon,
7
7
  Table,
8
- Label
8
+ Label,
9
+ Link
9
10
  } from '@pega/cosmos-react-core';
10
11
  import type { PConnFieldProps } from './PConnProps';
11
12
 
@@ -15,6 +16,7 @@ import type { PConnFieldProps } from './PConnProps';
15
16
  // Icons need to be registered (camel case), and then used (kabab case)
16
17
  import * as listNumber from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';
17
18
  import * as arrowRight from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';
19
+ import * as globe from '@pega/cosmos-react-core/lib/components/Icon/icons/globe.icon';
18
20
 
19
21
  import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
20
22
 
@@ -35,6 +37,10 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
35
37
  // In this example, the click will get a list of states for a given country and display in a
36
38
  // table below. The table dispaly will toggle with the click of the button icon.
37
39
  //
40
+ // Globe icon is an icon placed in a LINK element set to use an icon (NOTE: In general
41
+ // the LINK element shows the open icon to the left of the link text, but here we are using
42
+ // another icon, so with "icon" specified in the link, the open icon doesn't show)
43
+ //
38
44
  // NOTE: because icons have to be imported and registered, you can NOT put the icon name
39
45
  // inside the config.json and let the user pick it, if it is not already part of your
40
46
  // import and registration (can't be done on the fly)
@@ -43,13 +49,14 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
43
49
  // props passed in combination of props from property panel (config.json) and run time props from Constellation
44
50
  // any default values in config.pros should be set in defaultProps at bottom of this file
45
51
  function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
46
- const { countryCode = 'USA', getPConnect } = props;
52
+ const { value, countryCode = 'USA', getPConnect, testId } = props;
47
53
  const [statelist, setStatelist] = useState([]);
48
54
  const [showTable, setShowTable] = useState(false);
55
+ const [validUrl, setValidUrl] = useState('');
49
56
  const PConnect = getPConnect();
50
57
 
51
58
  // IMPORTANT: need to register icons used in camel case
52
- registerIcon(listNumber, arrowRight);
59
+ registerIcon(listNumber, arrowRight, globe);
53
60
 
54
61
 
55
62
  // setting up columns for the work list table
@@ -63,6 +70,27 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
63
70
  setShowTable(prevShowTable => !prevShowTable);
64
71
  }
65
72
 
73
+ // check if url is valid
74
+ function validateUrl(href: string) {
75
+ return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
76
+ href
77
+ );
78
+ }
79
+
80
+ // Testing to see if value entered is valid url, if not can't use it.
81
+ // Reason for this code is that you can NOT pass to Link component
82
+ // a bad url, or it will error out.
83
+ // For example: Since the value is the property field,
84
+ // it could be entered from another component and thus as it is
85
+ // entered (typed in), it won't be valid until it is all entered.
86
+ useEffect(() => {
87
+ if (validateUrl(value)) {
88
+ setValidUrl(value);
89
+ } else {
90
+ setValidUrl('');
91
+ }
92
+ }, [value]);
93
+
66
94
  // going to get data for worklist to put into a table
67
95
  // data comes from calling a PCore function to get
68
96
  // get data from a data page and a PConnect function
@@ -102,6 +130,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
102
130
  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
103
131
  {{! pick new delimiters for mustache }}
104
132
  {{=<% %>=}}
133
+ <div style={{ display: 'flex' }} data-testid={testId}>
105
134
  <Icon
106
135
  style={{ height: '1.5rem', width: '1.5rem' }}
107
136
  // icon name is kabab case
@@ -109,7 +138,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
109
138
  role='img'
110
139
  aria-label='arrow right'
111
140
  />
112
- <Label>
141
+ <Label style={{ margin: '0.1rem' }}>
113
142
  {' '}
114
143
  {PConnect.getLocalizedValue('State list for', '', '')}{' '}
115
144
  {PConnect.getLocalizedValue(`${countryCode}`, '', '')}{' '}
@@ -129,6 +158,16 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
129
158
  aria-label='numbered list'
130
159
  />
131
160
  </Button>
161
+ <Link href={validUrl} variant='link' label={validUrl} icon>
162
+ <Icon
163
+ style={{ height: '1.5rem', width: '1.5rem' }}
164
+ // icon name is kabab case
165
+ name='globe'
166
+ role='img'
167
+ aria-label='open link'
168
+ />
169
+ </Link>
170
+ </div>
132
171
  {showTable && (
133
172
  <Table
134
173
  title={PConnect.getLocalizedValue('State list', '', '')}
package/src/tasks/init/template/package.json.mustache CHANGED
@@ -69,7 +69,7 @@
69
69
  },
70
70
  "devDependencies": {
71
71
  "@pega/configs": "^0.6.0",
72
- "@pega/custom-dx-components": "0.24.9",
72
+ "@pega/custom-dx-components": "0.24.10",
73
73
  "@pega/pcore-pconnect-typedefs": "~3.0.0",
74
74
  "@storybook/addon-actions": "^7.6.7",
75
75
  "@storybook/addon-essentials": "^7.6.7",
package/tests/assets/components/createAll/Constellation/Pega_DXIL_MyIconButtonURL/index.tsx CHANGED
@@ -5,7 +5,8 @@ import {
5
5
  withConfiguration,
6
6
  registerIcon,
7
7
  Table,
8
- Label
8
+ Label,
9
+ Link
9
10
  } from '@pega/cosmos-react-core';
10
11
  import type { PConnFieldProps } from './PConnProps';
11
12
 
@@ -15,6 +16,7 @@ import type { PConnFieldProps } from './PConnProps';
15
16
  // Icons need to be registered (camel case), and then used (kabab case)
16
17
  import * as listNumber from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';
17
18
  import * as arrowRight from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';
19
+ import * as globe from '@pega/cosmos-react-core/lib/components/Icon/icons/globe.icon';
18
20
 
19
21
  import StyledPegaDxilMyIconButtonUrlWrapper from './styles';
20
22
 
@@ -35,6 +37,10 @@ interface PegaDxilMyIconButtonUrlProps extends PConnFieldProps {
35
37
  // In this example, the click will get a list of states for a given country and display in a
36
38
  // table below. The table dispaly will toggle with the click of the button icon.
37
39
  //
40
+ // Globe icon is an icon placed in a LINK element set to use an icon (NOTE: In general
41
+ // the LINK element shows the open icon to the left of the link text, but here we are using
42
+ // another icon, so with "icon" specified in the link, the open icon doesn't show)
43
+ //
38
44
  // NOTE: because icons have to be imported and registered, you can NOT put the icon name
39
45
  // inside the config.json and let the user pick it, if it is not already part of your
40
46
  // import and registration (can't be done on the fly)
@@ -43,13 +49,14 @@ interface PegaDxilMyIconButtonUrlProps extends PConnFieldProps {
43
49
  // props passed in combination of props from property panel (config.json) and run time props from Constellation
44
50
  // any default values in config.pros should be set in defaultProps at bottom of this file
45
51
  function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
46
- const { countryCode = 'USA', getPConnect } = props;
52
+ const { value, countryCode = 'USA', getPConnect, testId } = props;
47
53
  const [statelist, setStatelist] = useState([]);
48
54
  const [showTable, setShowTable] = useState(false);
55
+ const [validUrl, setValidUrl] = useState('');
49
56
  const PConnect = getPConnect();
50
57
 
51
58
  // IMPORTANT: need to register icons used in camel case
52
- registerIcon(listNumber, arrowRight);
59
+ registerIcon(listNumber, arrowRight, globe);
53
60
 
54
61
 
55
62
  // setting up columns for the work list table
@@ -63,6 +70,27 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
63
70
  setShowTable(prevShowTable => !prevShowTable);
64
71
  }
65
72
 
73
+ // check if url is valid
74
+ function validateUrl(href: string) {
75
+ return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
76
+ href
77
+ );
78
+ }
79
+
80
+ // Testing to see if value entered is valid url, if not can't use it.
81
+ // Reason for this code is that you can NOT pass to Link component
82
+ // a bad url, or it will error out.
83
+ // For example: Since the value is the property field,
84
+ // it could be entered from another component and thus as it is
85
+ // entered (typed in), it won't be valid until it is all entered.
86
+ useEffect(() => {
87
+ if (validateUrl(value)) {
88
+ setValidUrl(value);
89
+ } else {
90
+ setValidUrl('');
91
+ }
92
+ }, [value]);
93
+
66
94
  // going to get data for worklist to put into a table
67
95
  // data comes from calling a PCore function to get
68
96
  // get data from a data page and a PConnect function
@@ -100,6 +128,7 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
100
128
 
101
129
  return (
102
130
  <StyledPegaDxilMyIconButtonUrlWrapper>
131
+ <div style={{ display: 'flex' }} data-testid={testId}>
103
132
  <Icon
104
133
  style={{ height: '1.5rem', width: '1.5rem' }}
105
134
  // icon name is kabab case
@@ -107,7 +136,7 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
107
136
  role='img'
108
137
  aria-label='arrow right'
109
138
  />
110
- <Label>
139
+ <Label style={{ margin: '0.1rem' }}>
111
140
  {' '}
112
141
  {PConnect.getLocalizedValue('State list for', '', '')}{' '}
113
142
  {PConnect.getLocalizedValue(`${countryCode}`, '', '')}{' '}
@@ -127,6 +156,16 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
127
156
  aria-label='numbered list'
128
157
  />
129
158
  </Button>
159
+ <Link href={validUrl} variant='link' label={validUrl} icon>
160
+ <Icon
161
+ style={{ height: '1.5rem', width: '1.5rem' }}
162
+ // icon name is kabab case
163
+ name='globe'
164
+ role='img'
165
+ aria-label='open link'
166
+ />
167
+ </Link>
168
+ </div>
130
169
  {showTable && (
131
170
  <Table
132
171
  title={PConnect.getLocalizedValue('State list', '', '')}
package/tests/assets/components/createAll/Launchpad/Pega_DXIL_MyIconButtonURL/index.tsx CHANGED
@@ -5,7 +5,8 @@ import {
5
5
  withConfiguration,
6
6
  registerIcon,
7
7
  Table,
8
- Label
8
+ Label,
9
+ Link
9
10
  } from '@pega/cosmos-react-core';
10
11
  import type { PConnFieldProps } from './PConnProps';
11
12
 
@@ -15,6 +16,7 @@ import type { PConnFieldProps } from './PConnProps';
15
16
  // Icons need to be registered (camel case), and then used (kabab case)
16
17
  import * as listNumber from '@pega/cosmos-react-core/lib/components/Icon/icons/list-number.icon';
17
18
  import * as arrowRight from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-right.icon';
19
+ import * as globe from '@pega/cosmos-react-core/lib/components/Icon/icons/globe.icon';
18
20
 
19
21
  import StyledPegaDxilMyIconButtonUrlWrapper from './styles';
20
22
 
@@ -35,6 +37,10 @@ interface PegaDxilMyIconButtonUrlProps extends PConnFieldProps {
35
37
  // In this example, the click will get a list of states for a given country and display in a
36
38
  // table below. The table dispaly will toggle with the click of the button icon.
37
39
  //
40
+ // Globe icon is an icon placed in a LINK element set to use an icon (NOTE: In general
41
+ // the LINK element shows the open icon to the left of the link text, but here we are using
42
+ // another icon, so with "icon" specified in the link, the open icon doesn't show)
43
+ //
38
44
  // NOTE: because icons have to be imported and registered, you can NOT put the icon name
39
45
  // inside the config.json and let the user pick it, if it is not already part of your
40
46
  // import and registration (can't be done on the fly)
@@ -43,13 +49,14 @@ interface PegaDxilMyIconButtonUrlProps extends PConnFieldProps {
43
49
  // props passed in combination of props from property panel (config.json) and run time props from Constellation
44
50
  // any default values in config.pros should be set in defaultProps at bottom of this file
45
51
  function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
46
- const { countryCode = 'USA', getPConnect } = props;
52
+ const { value, countryCode = 'USA', getPConnect, testId } = props;
47
53
  const [statelist, setStatelist] = useState([]);
48
54
  const [showTable, setShowTable] = useState(false);
55
+ const [validUrl, setValidUrl] = useState('');
49
56
  const PConnect = getPConnect();
50
57
 
51
58
  // IMPORTANT: need to register icons used in camel case
52
- registerIcon(listNumber, arrowRight);
59
+ registerIcon(listNumber, arrowRight, globe);
53
60
 
54
61
 
55
62
  // setting up columns for the work list table
@@ -63,6 +70,27 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
63
70
  setShowTable(prevShowTable => !prevShowTable);
64
71
  }
65
72
 
73
+ // check if url is valid
74
+ function validateUrl(href: string) {
75
+ return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
76
+ href
77
+ );
78
+ }
79
+
80
+ // Testing to see if value entered is valid url, if not can't use it.
81
+ // Reason for this code is that you can NOT pass to Link component
82
+ // a bad url, or it will error out.
83
+ // For example: Since the value is the property field,
84
+ // it could be entered from another component and thus as it is
85
+ // entered (typed in), it won't be valid until it is all entered.
86
+ useEffect(() => {
87
+ if (validateUrl(value)) {
88
+ setValidUrl(value);
89
+ } else {
90
+ setValidUrl('');
91
+ }
92
+ }, [value]);
93
+
66
94
  // going to get data for worklist to put into a table
67
95
  // data comes from calling a PCore function to get
68
96
  // get data from a data page and a PConnect function
@@ -100,6 +128,7 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
100
128
 
101
129
  return (
102
130
  <StyledPegaDxilMyIconButtonUrlWrapper>
131
+ <div style={{ display: 'flex' }} data-testid={testId}>
103
132
  <Icon
104
133
  style={{ height: '1.5rem', width: '1.5rem' }}
105
134
  // icon name is kabab case
@@ -107,7 +136,7 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
107
136
  role='img'
108
137
  aria-label='arrow right'
109
138
  />
110
- <Label>
139
+ <Label style={{ margin: '0.1rem' }}>
111
140
  {' '}
112
141
  {PConnect.getLocalizedValue('State list for', '', '')}{' '}
113
142
  {PConnect.getLocalizedValue(`${countryCode}`, '', '')}{' '}
@@ -127,6 +156,16 @@ function PegaDxilMyIconButtonUrl(props: PegaDxilMyIconButtonUrlProps) {
127
156
  aria-label='numbered list'
128
157
  />
129
158
  </Button>
159
+ <Link href={validUrl} variant='link' label={validUrl} icon>
160
+ <Icon
161
+ style={{ height: '1.5rem', width: '1.5rem' }}
162
+ // icon name is kabab case
163
+ name='globe'
164
+ role='img'
165
+ aria-label='open link'
166
+ />
167
+ </Link>
168
+ </div>
130
169
  {showTable && (
131
170
  <Table
132
171
  title={PConnect.getLocalizedValue('State list', '', '')}