@connectid-tools/idp-selector-react 6.10.0-alpha.8 → 6.10.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.
- package/CidButton.css +5 -0
- package/CidButton.js +10 -11
- package/FullProcess.js +1 -1
- package/IdpLogoList.css +7 -37
- package/IdpLogoList.js +5 -9
- package/Popup.js +2 -2
- package/Process.css +5 -2
- package/Process.js +1 -1
- package/README.md +35 -1
- package/package.json +5 -5
package/CidButton.css
CHANGED
|
@@ -14,6 +14,11 @@
|
|
|
14
14
|
background-color: #262626;
|
|
15
15
|
color: white;
|
|
16
16
|
}
|
|
17
|
+
.cid-idp-selector-button:focus-visible {
|
|
18
|
+
outline: 3px solid #1a73e8;
|
|
19
|
+
box-shadow: 0 0 0 6px white;
|
|
20
|
+
outline-offset: 0.2rem;
|
|
21
|
+
}
|
|
17
22
|
/* so we do not break current cid buttons */
|
|
18
23
|
.cid-idp-selector-button--type {
|
|
19
24
|
width: 100%;
|
package/CidButton.js
CHANGED
|
@@ -44,6 +44,7 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
44
44
|
}));
|
|
45
45
|
const [showPopup, setShowPopup] = useState(false);
|
|
46
46
|
const [isIncognito, setIsIncognito] = useState();
|
|
47
|
+
const [authorisationServersThatDisplayedCompatibilityPopup, setAuthorisationServersThatDisplayedCompatibilityPopup] = useState([]);
|
|
47
48
|
const analyticsData = {
|
|
48
49
|
claims,
|
|
49
50
|
rpLogoUrl,
|
|
@@ -125,11 +126,11 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
125
126
|
return;
|
|
126
127
|
track();
|
|
127
128
|
}, []);
|
|
128
|
-
const
|
|
129
|
+
const getCompatibilityPopupText = (compatibilityWarnings) => {
|
|
129
130
|
if (compatibilityWarnings.mobileOs === 'android' && compatibilityWarnings.browser === 'samsung') {
|
|
130
|
-
return '
|
|
131
|
+
return "We couldn't open your identity provider's app. Samsung Internet doesn't support this step. To continue verifying your identity, please switch to a different browser.";
|
|
131
132
|
}
|
|
132
|
-
return
|
|
133
|
+
return "Looks like you're in incognito mode.\nWe can't complete verification using this identity provider while private browsing is on. To continue, please open a regular browser window and try again.";
|
|
133
134
|
};
|
|
134
135
|
const handleOnProceed = (authorisationServerId, authorisationServerName, authorisationServerCertifications) => {
|
|
135
136
|
if (typeof analytics !== 'undefined') {
|
|
@@ -147,14 +148,12 @@ forceBrowser = undefined, // only for testing purposes
|
|
|
147
148
|
isIos: forceIos || isIos(),
|
|
148
149
|
browser: forceBrowser || getBrowserName(),
|
|
149
150
|
});
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
setShowPopup(true);
|
|
157
|
-
}
|
|
151
|
+
const authorisationServerHasNotDisplayedCompatibilityPopup = authorisationServersThatDisplayedCompatibilityPopup.find(authServerId => authServerId === authorisationServerId) === undefined;
|
|
152
|
+
if (showCompatibilityWarnings && compatibility.mightFail && authorisationServerHasNotDisplayedCompatibilityPopup) {
|
|
153
|
+
const popupText = getCompatibilityPopupText(compatibility);
|
|
154
|
+
alert(popupText);
|
|
155
|
+
setShowPopup(true);
|
|
156
|
+
setAuthorisationServersThatDisplayedCompatibilityPopup([...authorisationServersThatDisplayedCompatibilityPopup, authorisationServerId]);
|
|
158
157
|
return;
|
|
159
158
|
}
|
|
160
159
|
onProceed(authorisationServerId, compatibility);
|
package/FullProcess.js
CHANGED
|
@@ -31,5 +31,5 @@ export const FullProcess = ({ collapsible = false }) => {
|
|
|
31
31
|
return true;
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
|
-
return (_jsxs("div", { className: `cid-idp-selector-full-process ${theme === 'light' ? 'cid-idp-selector-full-process--light' : ''} ${open ? 'cid-idp-selector-full-process--open' : ''} ${colorChanged() ? 'open' : 'close'} ${theme === 'light' ? 'light' : ''}`, "data-testid": "full-process", children: [_jsxs("
|
|
34
|
+
return (_jsxs("div", { className: `cid-idp-selector-full-process ${theme === 'light' ? 'cid-idp-selector-full-process--light' : ''} ${open ? 'cid-idp-selector-full-process--open' : ''} ${colorChanged() ? 'open' : 'close'} ${theme === 'light' ? 'light' : ''}`, "data-testid": "full-process", children: [_jsxs("h3", { className: "cid-idp-selector-full-process-title", children: ["How it works", collapsible && (_jsx("svg", { className: "cid-idp-selector-full-process-toggle", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: handleToggle, "data-testid": "full-process-toggle", children: _jsx("path", { d: "M13.1684 5.3125L13.8125 5.9998L8.5 11.6875L3.1875 5.9998L3.82832 5.3125L8.5 10.3096L13.1684 5.3125Z" }) }))] }), _jsxs("div", { className: "cid-idp-selector-full-process-grid", "data-testid": "full-process-grid", children: [_jsxs("div", { className: "cid-idp-selector-full-process-step", children: [_jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }), _jsx("div", { className: "cid-idp-selector-full-process-line" })] }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Select your trusted organisation" }), _jsxs("div", { className: "cid-idp-selector-full-process-step", children: [_jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }), _jsx("div", { className: "cid-idp-selector-full-process-line" })] }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Log in to your existing account" }), _jsx("div", { className: "cid-idp-selector-full-process-step", children: _jsx("div", { className: "cid-idp-selector-full-process-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-full-process-dot" }) }) }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle", children: "Review your details and provide consent" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Select your trusted organisation" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Log in to your existing account" }), _jsx("div", { className: "cid-idp-selector-full-process-subtitle cid-idp-selector-full-process-subtitle--wide", children: "Review your details and provide consent" })] })] }));
|
|
35
35
|
};
|
package/IdpLogoList.css
CHANGED
|
@@ -2,52 +2,22 @@
|
|
|
2
2
|
display: flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
|
-
flex-wrap: wrap;
|
|
6
5
|
gap: 8px;
|
|
7
|
-
margin-top:
|
|
8
|
-
margin-bottom:
|
|
6
|
+
margin-top: 10px;
|
|
7
|
+
margin-bottom: 16px;
|
|
9
8
|
}
|
|
10
|
-
.cid-idp-selector-idp-logo-list-
|
|
11
|
-
font-size:
|
|
12
|
-
color: var(--
|
|
9
|
+
.cid-idp-selector-idp-logo-list-label {
|
|
10
|
+
font-size: 13px;
|
|
11
|
+
color: var(--charcoal);
|
|
13
12
|
}
|
|
14
|
-
.cid-idp-selector-idp-logo-list-
|
|
13
|
+
.cid-idp-selector-idp-logo-list-label--dark {
|
|
15
14
|
color: white;
|
|
16
15
|
}
|
|
17
|
-
.cid-idp-selector-idp-logo-list {
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-wrap: wrap;
|
|
20
|
-
gap: 8px;
|
|
21
|
-
}
|
|
22
16
|
.cid-idp-selector-idp-logo-list-logo {
|
|
23
|
-
|
|
24
|
-
height: 24px;
|
|
25
|
-
border-radius: 2px;
|
|
17
|
+
height: 30px;
|
|
26
18
|
}
|
|
27
19
|
.cid-idp-selector-idp-logo-list-skeleton-wrapper {
|
|
28
20
|
margin-top: 20px;
|
|
29
21
|
display: flex;
|
|
30
22
|
justify-content: center;
|
|
31
23
|
}
|
|
32
|
-
.cid-logo-lockup {
|
|
33
|
-
width: 264px;
|
|
34
|
-
height: 53.18px;
|
|
35
|
-
}
|
|
36
|
-
@media (max-width: 1440px) {
|
|
37
|
-
.cid-logo-lockup {
|
|
38
|
-
width: 234px;
|
|
39
|
-
height: 47px;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
@media (max-width: 430px) {
|
|
43
|
-
.cid-logo-lockup {
|
|
44
|
-
width: 233.78px;
|
|
45
|
-
height: 45px;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
@media (max-width: 375px) {
|
|
49
|
-
.cid-logo-lockup {
|
|
50
|
-
width: 213px;
|
|
51
|
-
height: 41px;
|
|
52
|
-
}
|
|
53
|
-
}
|
package/IdpLogoList.js
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import './IdpLogoList.css';
|
|
3
3
|
import { Skeleton } from './Skeleton';
|
|
4
|
-
const logoLockupUrl = {
|
|
5
|
-
dark: 'https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-dark.svg',
|
|
6
|
-
light: 'https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-light.svg',
|
|
7
|
-
};
|
|
8
4
|
export const IdpLogoList = ({ loading, logoLockupStyle }) => {
|
|
9
5
|
if (loading) {
|
|
10
|
-
return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "
|
|
6
|
+
return (_jsx("div", { className: "cid-idp-selector-idp-logo-list-skeleton-wrapper", children: _jsx(Skeleton, { height: "25px", width: "203px", dataTestId: "idp-logo-list-loading" }) }));
|
|
11
7
|
}
|
|
12
8
|
const isDarkMode = logoLockupStyle === 'dark';
|
|
13
|
-
const imgSrc = isDarkMode ?
|
|
14
|
-
const dataTestId = isDarkMode ? '
|
|
15
|
-
return (
|
|
9
|
+
const imgSrc = `https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-${isDarkMode ? 'dark' : 'light'}2.svg`;
|
|
10
|
+
const dataTestId = `idp-logo-lockup-${isDarkMode ? 'dark' : 'light'}`;
|
|
11
|
+
return (_jsxs("div", { className: "cid-idp-selector-idp-logo-list-wrapper", "data-testid": "idp-logo-list-wrapper", children: [_jsx("span", { className: `cid-idp-selector-idp-logo-list-label ${isDarkMode ? 'cid-idp-selector-idp-logo-list-label--dark' : ''}`, "data-testid": "idp-logo-list-label", children: "Available on" }), _jsx("img", { "data-testid": dataTestId, className: "cid-idp-selector-idp-logo-list-logo", src: imgSrc, alt: "CommBank, NAB, ANZ Plus and Westpac" })] }));
|
|
16
12
|
};
|
package/Popup.js
CHANGED
|
@@ -145,7 +145,7 @@ export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, sh
|
|
|
145
145
|
});
|
|
146
146
|
const missingAuthorisationServerWithProfileRedirectFapi2 = authorisationServerWithProfileRedirectFapi2.length !== filteredAuthorisationServers.length;
|
|
147
147
|
const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
|
|
148
|
-
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: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications }) => (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: "" }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("
|
|
148
|
+
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: filteredAuthorisationServers.map(({ AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, AuthorisationServerCertifications, }) => (_jsxs("li", { role: "img", "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName, AuthorisationServerCertifications), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: "" }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId))) }), missingAuthorisationServerWithProfileRedirectFapi2 && (_jsxs("div", { className: "cid-idp-selector-popup-missing", "data-testid": "missing-auth-server", children: [_jsx("h4", { className: "cid-idp-selector-popup-missing-title", children: "Can't find your provider?" }), _jsx("p", { className: "cid-idp-selector-popup-missing-text", children: "Not all of our identity providers are available for this verification." })] }))] })) : (_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: "Use a document to verify your identity" }), _jsx("span", { className: "cid-idp-selector-popup-manual-action", tabIndex: 0, onClick: () => onProceed(manualAuthorisationServer.AuthorisationServerId, manualAuthorisationServer.CustomerFriendlyName, manualAuthorisationServer.AuthorisationServerCertifications), "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." })] }) }))] }));
|
|
149
149
|
};
|
|
150
|
-
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("
|
|
150
|
+
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("h2", { 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'));
|
|
151
151
|
};
|
package/Process.css
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
.cid-idp-selector-process {
|
|
2
|
+
padding: 0;
|
|
3
|
+
margin-top: -12px;
|
|
4
|
+
margin-bottom: 9px;
|
|
5
|
+
}
|
|
6
|
+
.cid-idp-selector-process-item {
|
|
2
7
|
display: grid;
|
|
3
8
|
grid-template-columns: 6px 1fr;
|
|
4
9
|
column-gap: 8px;
|
|
5
|
-
margin-top: -12px;
|
|
6
|
-
margin-bottom: 9px;
|
|
7
10
|
}
|
|
8
11
|
.cid-idp-selector-process-dot {
|
|
9
12
|
width: 7px;
|
package/Process.js
CHANGED
|
@@ -8,5 +8,5 @@ export const Process = () => {
|
|
|
8
8
|
const lineClasses = `cid-idp-selector-process-line ${theme === 'light' ? 'cid-idp-selector-process-line--grey' : ''}`;
|
|
9
9
|
const lastLineClass = `cid-idp-selector-process-line-last ${theme === 'light' ? 'cid-idp-selector-process-line-last--grey' : ''}`;
|
|
10
10
|
const stepClasses = `cid-idp-selector-process-step ${theme === 'light' ? 'cid-idp-selector-process-step--light' : ''}`;
|
|
11
|
-
return (_jsxs("
|
|
11
|
+
return (_jsxs("ol", { className: "cid-idp-selector-process", "data-testid": "process", children: [_jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: "cid-idp-selector-process-filler" }), _jsx("div", { className: dotClasses, "data-testid": "process-dot" }), _jsx("div", { className: lineClasses, "data-testid": "process-line" })] }), _jsx("div", { className: stepClasses, "data-testid": "process-step", children: "Select your bank" })] }), _jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: lineClasses }), _jsx("div", { className: dotClasses }), _jsx("div", { className: lineClasses })] }), _jsx("div", { className: stepClasses, children: "Log in to your account" })] }), _jsxs("li", { className: "cid-idp-selector-process-item", children: [_jsxs("div", { children: [_jsx("div", { className: lastLineClass }), _jsx("div", { className: dotClasses }), _jsx("div", { className: "cid-idp-selector-process-filler" })] }), _jsx("div", { className: stepClasses, children: "Review your details and provide consent" })] })] }));
|
|
12
12
|
};
|
package/README.md
CHANGED
|
@@ -229,7 +229,7 @@ This is an optional field in addition with the widgets below the ConnectID butto
|
|
|
229
229
|
|
|
230
230
|
### <a name="showCompatibilityWarnings"></a>showCompatibilityWarnings option
|
|
231
231
|
|
|
232
|
-
If set to `true`, a popup with compatibility warnings will be displayed after an IDP is selected, if the conditions are met. The popup will show information about the compatibility of the user's browser, device, incognito/private mode with the ConnectID flow
|
|
232
|
+
If set to `true`, a popup with compatibility warnings will be displayed after an IDP is selected, if the conditions are met. The popup will show information about the compatibility of the user's browser, device, incognito/private mode with the ConnectID flow.
|
|
233
233
|
|
|
234
234
|
<details>
|
|
235
235
|
<summary>Show compatibility warnings</summary>
|
|
@@ -259,6 +259,40 @@ The SVG image below the ConnectID button has either option dark or light mode. B
|
|
|
259
259
|
|
|
260
260
|
## 🚀 Release Notes
|
|
261
261
|
|
|
262
|
+
### 6.10.0 (Jul 22, 2025)
|
|
263
|
+
- Remove `Available on` from IDP logo list image.
|
|
264
|
+
- Add `role="img"` to participant list item.
|
|
265
|
+
- Show border on ConnectID button when on focus.
|
|
266
|
+
- `medium process` as list.
|
|
267
|
+
- Fix headings.
|
|
268
|
+
- Set empty `alt` attribute for IDP logos.
|
|
269
|
+
- Fix bank logos `alt` attribute.
|
|
270
|
+
- Add `disableAnalytics` option.
|
|
271
|
+
- Fix analytics double loading.
|
|
272
|
+
- Add test support for Samsung and Chrome browsers.
|
|
273
|
+
- Add `supportIncognito` option.
|
|
274
|
+
- Add `showCompatibilityWarnings` option.
|
|
275
|
+
- Rename `compabilityWarnings` to `compatibilityWarnings`.
|
|
276
|
+
- Add `compabilityWarnings` to `onProceed` callback.
|
|
277
|
+
|
|
278
|
+
### 6.10.0-alpha.14 (Jul 18, 2025)
|
|
279
|
+
- Compatibility warning popup adjustments.
|
|
280
|
+
|
|
281
|
+
### 6.10.0-alpha.13 (Jul 18, 2025)
|
|
282
|
+
- Remove `Available on` from IDP logo list image.
|
|
283
|
+
|
|
284
|
+
### 6.10.0-alpha.12 (Jul 17, 2025)
|
|
285
|
+
- Add `role="img"` to participant list item.
|
|
286
|
+
|
|
287
|
+
### 6.10.0-alpha.11 (Jul 17, 2025)
|
|
288
|
+
- Show border on ConnectID button when on focus.
|
|
289
|
+
|
|
290
|
+
### 6.10.0-alpha.10 (Jul 15, 2025)
|
|
291
|
+
- `medium process` as list.
|
|
292
|
+
|
|
293
|
+
### 6.10.0-alpha.9 (Jul 14, 2025)
|
|
294
|
+
- Fix headings.
|
|
295
|
+
|
|
262
296
|
### 6.10.0-alpha.8 (Jun 27, 2025)
|
|
263
297
|
- Set empty `alt` attribute for IDP logos.
|
|
264
298
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@connectid-tools/idp-selector-react",
|
|
3
|
-
"version": "6.10.0
|
|
3
|
+
"version": "6.10.0",
|
|
4
4
|
"description": "React component for IDP Selector.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
"homepage": "https://github.com/connectid-tools/idp-selector-react",
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@babel/preset-typescript": "^7.27.1",
|
|
29
|
-
"@types/node": "^22.
|
|
29
|
+
"@types/node": "^22.16.5",
|
|
30
30
|
"@types/react": "^18.3.23",
|
|
31
31
|
"@types/react-dom": "^18.3.7",
|
|
32
|
-
"cypress": "^14.5.
|
|
32
|
+
"cypress": "^14.5.2",
|
|
33
33
|
"jest-environment-jsdom": "^29.7.0",
|
|
34
|
-
"prettier": "^3.6.
|
|
34
|
+
"prettier": "^3.6.2",
|
|
35
35
|
"react": "^18.3.1",
|
|
36
36
|
"react-dom": "^18.3.1",
|
|
37
37
|
"replace-in-file": "^8.3.0",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"react-responsive": "^10.0.1",
|
|
43
|
-
"swr": "^2.3.
|
|
43
|
+
"swr": "^2.3.4",
|
|
44
44
|
"vite": "^6.3.5"
|
|
45
45
|
}
|
|
46
46
|
}
|