@connectid-tools/idp-selector-react 6.5.1 → 6.6.0

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/Benefits.js +1 -1
  2. package/Popup.css +1 -0
  3. package/Popup.js +1 -1
  4. package/README.md +13 -3
  5. package/package.json +5 -5
package/Benefits.js CHANGED
@@ -24,5 +24,5 @@ export const Benefits = ({ full, introTextType }) => {
24
24
  const adjustedFullBenefits = bankDetailsIntroTextTypes.includes(introTextType) ? fullBenefitsBankDetails : fullBenefits;
25
25
  const listItemClasses = `cid-idp-selector-benefit ${theme === 'light' ? 'cid-idp-selector-benefit--light' : ''}`;
26
26
  const benefits = full ? adjustedFullBenefits : defaultBenefits;
27
- return (_jsx("ul", { className: `cid-idp-selector-benefits ${full ? 'cid-idp-selector-benefits--box' : ''} ${theme === 'light' ? 'cid-idp-selector-benefits--light' : ''}`, "data-testid": "benefits", children: benefits.map((benefit) => (_jsxs("li", { className: listItemClasses, "data-testid": "benefit-item", children: [_jsx("svg", { className: "cid-idp-selector-benefit-icon", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.28025 8.71975L14.25 1.75L15.3105 2.8105L7.28025 10.8407L3 6.5605L4.0605 5.5L7.28025 8.71975Z" }) }), benefit] }))) }));
27
+ return (_jsx("ul", { className: `cid-idp-selector-benefits ${full ? 'cid-idp-selector-benefits--box' : ''} ${theme === 'light' ? 'cid-idp-selector-benefits--light' : ''}`, "data-testid": "benefits", children: benefits.map((benefit) => (_jsxs("li", { className: listItemClasses, "data-testid": "benefit-item", children: [_jsx("svg", { className: "cid-idp-selector-benefit-icon", width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.28025 8.71975L14.25 1.75L15.3105 2.8105L7.28025 10.8407L3 6.5605L4.0605 5.5L7.28025 8.71975Z" }) }), benefit] }, benefit))) }));
28
28
  };
package/Popup.css CHANGED
@@ -360,6 +360,7 @@
360
360
  .cid-idp-selector-popup-participants {
361
361
  margin-top: 12px;
362
362
  grid-template-columns: 1fr;
363
+ max-height: 550px;
363
364
  }
364
365
  .cid-idp-selector-popup-participant-greyed-out {
365
366
  margin-bottom: 8px;
package/Popup.js CHANGED
@@ -131,7 +131,7 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
131
131
  const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
132
132
  return (_jsxs(_Fragment, { children: [filteredAuthorisationServers.length > 0 ? (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx("ul", { className: "cid-idp-selector-popup-participants", "data-testid": "participants", children: Array.from(filteredAuthServerByDevice.entries()).map(([authServer, device]) => {
133
133
  return (_jsx("div", { children: participantTile(authServer.AuthorisationServerId, authServer.CustomerFriendlyName, authServer.CustomerFriendlyLogoUri, device) }, authServer.AuthorisationServerId));
134
- }) })] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", children: "Can't see a provider that works for you?" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName), "data-testid": "manual-verification-action", role: "link", children: "Confirm your identity with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
134
+ }) })] })) : (_jsx("div", { className: "cid-idp-selector-popup-info-box-error-wrapper", "data-testid": "popup-error-info-box", children: _jsx(NoIdpError, { hasManualIdp: hasManualIdp }) })), enableManualVerification && manualAuthorisationServer && (_jsx(_Fragment, { children: _jsxs("p", { className: "cid-idp-selector-popup-manual", children: [_jsx("span", { className: "cid-idp-selector-popup-manual-title", "data-testid": "manual-verification-text", children: "Or, use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName), "data-testid": "manual-verification-action", role: "link", children: "Verify with a document" }), _jsx("span", { className: "cid-idp-selector-popup-manual-description", children: "ConnectID does not collect, hold or store your personal information at any time." })] }) }))] }));
135
135
  };
136
136
  return ReactDOM.createPortal(_jsxs("div", { className: "cid-idp-selector-popup", tabIndex: 0, ref: popupRef, onKeyDown: handleEnterEsc, children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-container", children: [_jsxs("div", { className: "cid-idp-selector-popup-logos", children: [_jsxs("svg", { role: "img", focusable: "false", className: "cid-idp-selector-popup-logo", viewBox: "0 0 132.37 157.84", "data-testid": "cid-logo", children: [_jsx("title", { children: "ConnectID logo" }), _jsx("path", { d: "M102.22,91.65c0,19.9-16.13,36.03-36.03,36.03s-36.03-16.13-36.03-36.03,16.13-36.03,36.03-36.03c9.95,0,18.96,4.03,25.48,10.55l40.71-40.71c-6.52-6.52-10.55-15.52-10.55-25.46h-30.14c0,13.45,4.02,25.95,10.92,36.39-10.45-6.9-22.96-10.93-36.42-10.93C29.63,25.47,0,55.1,0,91.65s29.63,66.19,66.19,66.19,66.19-29.63,66.19-66.19h-30.16Z" })] }), rpLogoUrl && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cid-idp-selector-popup-logo-dots", children: [_jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" }), _jsx("div", { className: "cid-idp-selector-popup-logo-dot" })] }), _jsx("img", { className: "cid-idp-selector-popup-logo-rp", src: rpLogoUrl, alt: "RP logo", "data-testid": "rp-logo" })] }))] }), _jsxs("button", { "aria-label": "Close popup", "data-testid": "popup-close", className: "cid-idp-selector-popup-close", onClick: onCancel, tabIndex: 0, ref: closeButtonRef, children: [_jsx("span", { className: "cid-idp-selector-popup-close-label", children: "Close" }), _jsx("svg", { clipRule: "evenodd", fillRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "m12 10.93 5.719-5.72c.146-.146.339-.219.531-.219.404 0 .75.324.75.749 0 .193-.073.385-.219.532l-5.72 5.719 5.719 5.719c.147.147.22.339.22.531 0 .427-.349.75-.75.75-.192 0-.385-.073-.531-.219l-5.719-5.719-5.719 5.719c-.146.146-.339.219-.531.219-.401 0-.75-.323-.75-.75 0-.192.073-.384.22-.531l5.719-5.719-5.72-5.719c-.146-.147-.219-.339-.219-.532 0-.425.346-.749.75-.749.192 0 .385.073.531.219z" }) })] })] }), _jsxs("div", { className: "cid-idp-selector-popup-title-description-container", children: [_jsx("h2", { className: "cid-idp-selector-popup-title", children: popupTitle }), _jsx("p", { className: "cid-idp-selector-popup-description", children: rpDataSharingDescription })] }), renderClaims(), renderAuthorisationServers(), _jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper", children: _jsxs(InfoBox, { children: [_jsx("h4", { className: "cid-idp-selector-popup-info-box-title", children: "What is ConnectID?" }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", "data-testid": "whats-cid-text", children: ["ConnectID is an Australian-owned digital identity solution which allows you to securely prove who you are. ConnectID does not see or store your personal data. Visit", ' ', _jsx("a", { className: "cid-idp-selector-popup-info-box-link", href: "https://www.connectid.com.au", onClick: handleConnectIdLinkClicked, target: "_blank", tabIndex: 0, "data-testid": "info-box-link", ref: infoboxLinkRef, children: "connectid.com.au" }), ' ', "to find out more."] })] }) })] }), document.querySelector('body'));
137
137
  };
package/README.md CHANGED
@@ -43,7 +43,7 @@ Your page should render a widget similar to this 👇 And when the button is cli
43
43
  | rpDataSharingDescription | The text that goes under the popup title explaining how shared data will be used. | string | no | 'Your details will be shared with the current website.' |
44
44
  | enableManualVerification | Whether an option to verify identity manually is displayed or not. | boolean | no | false |
45
45
  | type | The type of ConnectID button widget. [More details here](#type) | 'tiny' \| 'medium benefits' \| 'medium process' \| 'full benefits' \| 'full process' | no | undefined (shows only ConnectID button). |
46
- | introTextType | The text that goes above the ConnectID button. [More details here](#introTextType) | 'verify-trust' \| 'verify-account' \| 'power' \| 'sign-up' \| yes when `type` is set. | - |
46
+ | introTextType | The text that goes above the ConnectID button. [More details here](#introTextType) | 'verify-trust' \| 'verify-account' \| 'power' \| 'sign-up' \| 'bank-details-plus-personal-info' \| 'bank-details-only' | yes when `type` is set. | - |
47
47
  | fullProcessCollapsible | Whether process items are collapsible or not. Only available when `type` is `full process`. | boolean | no | false |
48
48
  | showAllParticipants | Show all participants regardless of any other option. **_This should only be used for testing_**. | boolean | no | false |
49
49
  | theme | ConnectID button theme. | 'dark' \| 'light' | no | 'dark' |
@@ -183,9 +183,11 @@ All elements have classes that can be styled with CSS to match you brand identit
183
183
  <summary>Introduction text options</summary>
184
184
 
185
185
  `verify-trust`: ConnectID lets you verify your identity through details stored with an organisation you already trust, like your bank.\
186
- `verify-account`: ConnectID gives you the power to choose how you share your details, using organisations you already trust.\
186
+ `verify-account`: Verify your identity through an organisation you already have an account with, like your bank.\
187
187
  `power`: ConnectID gives you the power to choose how you share your details, using organisations you already trust.
188
-
188
+ `sign-up`: ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.\
189
+ `bank-details-plus-personal-info`: Provide your preferred bank account and personal details in a secure and simple way, without oversharing information.\
190
+ `bank-details-only`: Provide your preferred bank account details in a secure and simple way, without oversharing information.
189
191
  </details>
190
192
 
191
193
  ### <a name="infoContent"></a>infoContent option
@@ -220,6 +222,14 @@ The SVG image below the ConnectID button has either option dark or light mode. B
220
222
 
221
223
  ## 🚀 Release Notes
222
224
 
225
+ ### 6.6.0 (May 5, 2025)
226
+ - Fix benefits list (missing `key`).
227
+ - Update verify manually copy.
228
+ - Show 8 IDPs on mobile view without needing to scroll.
229
+
230
+ ### 6.5.2 (Apr 30, 2025)
231
+ - Fix `introTextType` in README.
232
+
223
233
  ### 6.5.1 (Apr 29, 2025)
224
234
  - Add `alt` attribute to logo lockup image.
225
235
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@connectid-tools/idp-selector-react",
3
- "version": "6.5.1",
3
+ "version": "6.6.0",
4
4
  "description": "React component for IDP Selector.",
5
5
  "main": "index.js",
6
6
  "type": "module",
@@ -25,19 +25,19 @@
25
25
  },
26
26
  "homepage": "https://github.com/connectid-tools/idp-selector-react",
27
27
  "devDependencies": {
28
- "@babel/preset-typescript": "^7.27.0",
28
+ "@babel/preset-typescript": "^7.27.1",
29
29
  "@types/node": "^22.15.3",
30
30
  "@types/react": "^18.3.20",
31
- "@types/react-dom": "^18.3.6",
31
+ "@types/react-dom": "^18.3.7",
32
32
  "cypress": "^13.17.0",
33
33
  "jest-environment-jsdom": "^29.7.0",
34
34
  "prettier": "^3.5.3",
35
35
  "react": "^18.3.1",
36
36
  "react-dom": "^18.3.1",
37
37
  "replace-in-file": "^8.3.0",
38
- "tsx": "^4.19.3",
38
+ "tsx": "^4.19.4",
39
39
  "typescript": "^5.8.3",
40
- "vite": "^5.4.18"
40
+ "vite": "^5.4.19"
41
41
  },
42
42
  "dependencies": {
43
43
  "react-responsive": "^10.0.1",