@connectid-tools/idp-selector-react 6.4.1

package/Popup.css

@@ -0,0 +1,457 @@
+@keyframes fade {
+  50% { background: white; }
+}
+
+.cid-idp-selector-popup {
+  background: white;
+  box-shadow: 0 10px 10px -1px rgba(0, 0, 0, 0.2);
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 99;
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding: 60px 120px;
+  box-sizing: border-box;
+  height: 100vh;
+}
+
+.cid-idp-selector-popup::-webkit-scrollbar {
+  display: none;
+}
+.cid-idp-selector-popup-close {
+  padding: 12px;
+  border-radius: 12px;
+  background-color: #F4F4F4;
+  color: var(--charcoal);
+  font-size: 13px;
+  font-family: var(--font);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border: none; 
+}
+.cid-idp-selector-popup-close:hover {
+  background-color: #C9C9C9;
+}
+.cid-idp-selector-popup-close > svg {
+  fill: black;
+  margin-left: 4px;
+  width: 16px;
+  height: 16px;
+}
+.cid-idp-selector-popup-logo-container {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 30px;
+}
+.cid-idp-selector-popup-logos {
+  display: flex;
+  align-items: center;
+}
+.cid-idp-selector-popup-logo {
+  background: var(--charcoal);
+  fill: white;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 72px;
+  height: 72px;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+.cid-idp-selector-popup-logo-dots {
+  display: flex;
+  margin: 0 8px;
+}
+.cid-idp-selector-popup-logo-dots > div:nth-child(1) {
+  background: grey;
+}
+.cid-idp-selector-popup-logo-dots > div:nth-child(2) {
+  margin: 0 12px;
+  background: darkgrey;
+  animation-delay: 0.25s;
+}
+.cid-idp-selector-popup-logo-dots > div:nth-child(3) {
+  background: lightgrey;
+  animation-delay: 0.5s;
+}
+.cid-idp-selector-popup-logo-dot {
+  animation-name: fade;
+  animation-duration: 1.5s;
+  animation-iteration-count: 3;
+  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+}
+.cid-idp-selector-popup-logo-rp {
+  width: 72px;
+  height: 72px;
+  border-radius: 12px;
+}
+.cid-idp-selector-popup-title {
+  font-family: var(--font);
+  font-size: 36px;
+  color: var(--charcoal);
+  font-weight: bold;
+  margin: 0;
+  margin-bottom: 8px;
+}
+.cid-idp-selector-popup-description {
+  font-size: 13px;
+  line-height: 16px;
+  color: #5C5C5C;
+  font-family: var(--font);
+  margin: 0;
+  margin-bottom: 30px;
+}
+.cid-idp-selector-popup-title-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.cid-idp-selector-popup-subtitle {
+  font-family: var(--font);
+  font-size: 24px;
+  line-height: 28px;
+  color: var(--charcoal);
+  font-weight: bold;
+  margin: 0;
+}
+.cid-idp-selector-popup-claims-toggle {
+  display: none;
+  fill: var(--charcoal);
+}
+.cid-idp-selector-popup-claims-toggle--open {
+  transform: rotate(180deg);
+}
+.cid-idp-selector-popup-claims {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 165px);
+  grid-gap: 10px;
+  margin-top: 20px;
+  margin-bottom: 30px;
+  padding-left: 0;
+}
+.cid-idp-selector-popup-claims.cid-idp-selector-popup-claims--visible {
+  display: grid;
+}
+.cid-idp-selector-popup-claim {
+  font-family: var(--font);
+  font-size: 14px;
+  color: var(--charcoal);
+  display: flex;
+  align-items: flex-start;
+  text-align: left;
+}
+.cid-idp-selector-popup-claim > svg {
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+.cid-idp-selector-popup-participants {
+  margin-top: 24px;
+  display: grid;
+  grid-template-columns: 225px 225px;
+  grid-gap: 16px;
+  max-height: 285px;
+  overflow-y: auto;
+  padding-left: 0;
+}
+.cid-idp-selector-popup-participants::-webkit-scrollbar {
+  display: none;
+}
+.cid-idp-selector-popup-participant {
+  display: flex;
+  align-items: center;
+  border-radius: 12px;
+  cursor: pointer;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  border: 1px solid #E9E9E9;
+}
+.cid-idp-selector-popup-participant-greyed-out {
+  display: flex;
+  align-items: center;
+  border-radius: 12px;
+  cursor: pointer;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  border: 1px solid #E9E9E9;
+  background-color: #F4F4F4;
+  cursor: default;
+  margin-bottom: 4px;
+}
+.cid-idp-selector-popup-participant-greyed-out-text {
+  color: #5C5C5C;
+  font-size: 10px;
+}
+.cid-idp-selector-popup-participant-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+}
+.cid-idp-selector-popup-participant-icon-greyed-out {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  opacity: 60%
+}
+.cid-idp-selector-popup-participant-description {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+  white-space: nowrap;
+}
+.cid-idp-selector-popup-participant:hover {
+  border: 1px solid lightgrey;
+}
+.cid-idp-selector-popup-participant-name {
+  font-size: 14px;
+  font-family: var(--font);
+  color: var(--charcoal);
+  margin-left: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 90%;
+}
+.cid-idp-selector-popup-participant-name-greyed-out {
+  font-size: 14px;
+  font-family: var(--font);
+  color: var(--charcoal75);
+  margin-left: 12px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 90%;
+
+}
+.cid-idp-selector-popup-manual {
+  font-family: var(--font);
+  margin: 0;
+  margin-top: 30px;
+  text-align: center;
+}
+.cid-idp-selector-popup-manual-title {
+  color: #5C5C5C;
+  display: block;
+}
+.cid-idp-selector-popup-manual-action {
+  color: var(--charcoal);
+  font-weight: bold;
+  text-decoration: underline;
+  cursor: pointer;
+  display: block;
+  margin-top: 4px;
+}
+.cid-idp-selector-popup-manual-description {
+  font-size: 12px;
+  color: #5C5C5C;
+  display: block;
+  margin: 20px auto 0 auto;
+  max-width: 300px;
+}
+.cid-idp-selector-popup-info-box-error-wrapper {
+  margin-top: 24px;
+}
+.cid-idp-selector-popup-info-box-title {
+  font-family: var(--font);
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0;
+  margin-bottom: 4px;
+  color: var(--charcoal);
+}
+.cid-idp-selector-popup-info-box-text {
+  margin: 0;
+  font-size: 13px;
+  font-family: var(--font);
+  color: var(--charcoal);
+  line-height: 16px;
+}
+.cid-idp-selector-popup-info-box-link {
+  color: var(--charcoal);
+  font-size: 13px;
+  font-weight: bold;
+  width: fit-content;
+  text-decoration: none;
+}
+.cid-idp-selector-popup-info-box-wrapper {
+  padding-top: 24px;
+  max-width: 466px;
+}
+
+.cid-idp-selector-popup-info-box-wrapper-warn {
+  max-width: 466px;
+}
+
+.cid-greyout-participant-name {
+  position: absolute;
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.cid-idp-selector-button-info-icon-greyed-out {
+  margin-right: 2px;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cid-idp-selector-popup-logo-dot {
+    animation: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .cid-idp-selector-popup {
+    width: 100%;
+    padding: 32px;
+  }
+  .cid-idp-selector-popup-manual {
+    text-align: left;
+  }
+  .cid-idp-selector-popup-manual-description {
+    margin: 20px 0;
+  }
+  .cid-idp-selector-popup-participants {
+    grid-template-columns: 190px 190px;
+  }
+}
+
+@media (max-width: 482px) {
+  @keyframes fade {
+    50% { background: #F4F4F4; }
+  }
+
+  .cid-idp-selector-popup-manual {
+    text-align: center;
+  }
+  .cid-idp-selector-popup-manual-title {
+    font-size: 14px;
+  }
+  .cid-idp-selector-popup-manual-action {
+    background-color: transparent;
+    width: 100%;
+    text-align: center;
+    padding: 12px;
+    box-sizing: border-box;
+    border-radius: 12px;
+    font-size: 14px;
+    font-family: var(--font);
+    font-weight: normal;
+    text-decoration: none;
+    margin-top: 12px;
+    border: 1px solid #8C8C8C;
+    color: var(--charcoal);
+  }
+  .cid-idp-selector-popup-manual-description {
+    margin: 20px auto 0 auto;
+  }
+  .cid-idp-selector-popup-participants {
+    margin-top: 12px;
+    grid-template-columns: 1fr;
+  }
+  .cid-idp-selector-popup-participant-greyed-out {
+    margin-bottom: 8px;
+  }
+  .cid-idp-selector-popup-participant-name {
+    overflow: inherit;
+    white-space: normal;
+    text-overflow: inherit;
+    width: 100%;
+    font-size: 16px;
+  }
+  .cid-greyout-participant-name {
+    margin-top: -6px;
+  }
+  .cid-idp-selector-popup-close {
+    position: absolute;
+    padding: 8px;
+    right: 0;
+  }
+  .cid-idp-selector-popup-close-label {
+    display: none;
+  }
+  .cid-idp-selector-popup-close > svg {
+    margin-left: 0;
+  }  
+  .cid-idp-selector-popup-claims-toggle {
+    display: block;
+  }
+  .cid-idp-selector-popup-logo {
+    width: 56px;
+    height: 56px;
+  }
+  .cid-idp-selector-popup-logos {
+    justify-content: center;
+  }
+  .cid-idp-selector-popup-logo-container {
+    margin-bottom: 12px;
+    justify-content: center;
+  }
+  .cid-idp-selector-popup-title-description-container {
+    text-align: center;
+  }
+  .cid-idp-selector-popup-logo-dots {
+    margin: 0 6px;
+  }
+  .cid-idp-selector-popup-logo-dots > div:nth-child(2) {
+    margin: 0 8px;
+    background: darkgrey;
+  }
+  .cid-idp-selector-popup-logo-dot {
+    width: 6px;
+    height: 6px;
+  }
+  .cid-idp-selector-popup-logo-rp {
+    width: 56px;
+    height: 56px;
+  }
+  .cid-idp-selector-popup-claims {
+    grid-template-columns: repeat(auto-fit, 118px);
+    display: none;
+    margin-top: 12px;
+    margin-bottom: 0;
+  }
+  .cid-idp-selector-popup-title {
+    font-size: 26px;
+  }
+  .cid-idp-selector-popup-subtitle {
+    font-size: 18px;
+  }
+  .cid-idp-selector-popup {
+    background-color: #F4F4F4;
+  }
+  .cid-idp-selector-popup-provider-wrapper {
+    background-color: white;
+    padding: 20px;
+    border-radius: 12px;
+  }
+  .cid-idp-selector-popup-claims-button-wrapper {
+    padding: 20px;
+    background-color: white;
+    border-radius: 12px;
+    margin-bottom: 20px;
+  }
+  .cid-idp-selector-popup-claims-button {
+    background-color: white;
+    border: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+  .cid-idp-selector-popup-info-box-error-wrapper {
+    margin-top: 12px;
+  }
+}

package/Popup.d.ts

@@ -0,0 +1,22 @@
+import './global.css';
+import './Popup.css';
+import { CertificationStatus, Claim, Participant, RequiredCertification } from './types';
+type PopupProps = {
+    onProceed: (authorisationServerId: string, authorisationServerName: string) => void;
+    onCancel: () => void;
+    onError?: (error: string) => void;
+    claims: Claim[];
+    requiredClaims?: Claim[];
+    showAllParticipants: boolean;
+    certificationStatus: CertificationStatus;
+    popupTitle: string;
+    rpDataSharingDescription: string;
+    enableManualVerification: boolean;
+    requiredCertifications?: RequiredCertification[];
+    rpLogoUrl?: string;
+    participants?: Participant[];
+    error: boolean;
+    isLoading: boolean;
+};
+export declare const Popup: React.FC<PopupProps>;
+export {};

package/Popup.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { useMediaQuery } from 'react-responsive';
+import { useAnalytics } from './analytics';
+import { filterAuthorisationServers, getManualAuthorisationServer, mapAuthorisationServerToDeviceType, } from './certification';
+import './global.css';
+import { InfoBox } from './InfoBox';
+import { getCurrentUrlOrigin } from './navigator';
+import { NoIdpError } from './NoIdpError';
+import { ParticipantsLoader } from './ParticipantsLoader';
+import './Popup.css';
+import { useOverrideShiftTab, useOverrideTab } from './TabHook';
+import { getDeviceType } from './userAgent';
+export const Popup = ({ onProceed, onCancel, onError, claims, requiredClaims, showAllParticipants, certificationStatus, popupTitle, rpDataSharingDescription, enableManualVerification, requiredCertifications, rpLogoUrl, participants, error, isLoading, }) => {
+    const [showClaims, setShowClaims] = useState(false); // mobile only
+    const popupRef = useRef(null);
+    useAnalytics();
+    const isMobile = useMediaQuery({ query: '(max-width: 482px)' });
+    const infoboxLinkRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    useOverrideTab(infoboxLinkRef, closeButtonRef);
+    useOverrideShiftTab(closeButtonRef, infoboxLinkRef);
+    useEffect(() => {
+        var _a;
+        (_a = popupRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const claimsOrder = {
+        given_name: 2,
+        middle_name: 3,
+        family_name: 4,
+        birthdate: 5,
+        email: 6,
+        address: 7,
+        phone_number: 8,
+        over16: 9,
+        over18: 10,
+        over21: 11,
+        over25: 12,
+        over65: 13,
+        beneficiary_account_au: 14,
+        beneficiary_account_au_payid: 15,
+        beneficiary_account_international: 16,
+    };
+    const claimsDescription = {
+        address: 'Residential address',
+        birthdate: 'Date of birth',
+        email: 'Email address',
+        family_name: 'Family name',
+        given_name: 'Given name',
+        middle_name: 'Middle name',
+        phone_number: 'Phone number',
+        over16: '16+ verification',
+        over18: '18+ verification',
+        over21: '21+ verification',
+        over25: '25+ verification',
+        over65: '65+ verification',
+        beneficiary_account_au: 'Bank account details',
+        beneficiary_account_au_payid: 'PayID',
+        beneficiary_account_international: 'International account',
+    };
+    const sortClaims = (claims) => {
+        const sortedClaims = [...claims];
+        return sortedClaims.sort((claim1, claim2) => claimsOrder[claim1] - claimsOrder[claim2]);
+    };
+    const handleEnterEsc = (event) => {
+        if (event.key !== 'Enter' && event.key !== 'Escape')
+            return;
+        if (event.key === 'Escape') {
+            onCancel();
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return;
+        // Handling 'Enter' key
+        const classList = activeElement.classList;
+        if (classList.contains('cid-idp-selector-popup-participant') ||
+            classList.contains('cid-idp-selector-popup-manual-action')) {
+            activeElement.click();
+        }
+    };
+    const handleConnectIdLinkClicked = () => {
+        analytics === null || analytics === void 0 ? void 0 : analytics.track('Link to External Page Clicked', {
+            source: 'what_is_connectid',
+            link_url: 'https://www.connectid.com.au',
+            rp_sub_brand: getCurrentUrlOrigin(),
+        });
+    };
+    const renderClaimList = () => {
+        return (_jsx("ul", { id: "cid-idp-selector-popup-claims", className: `cid-idp-selector-popup-claims ${showClaims ? 'cid-idp-selector-popup-claims--visible' : ''}`, "data-testid": "claims", children: sortClaims(claims).map((claim) => (_jsxs("li", { className: "cid-idp-selector-popup-claim", "data-testid": `claim-${claim}`, children: [_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z", fill: "#BEEDD2" }), _jsx("path", { d: "M4.81445 8.14121L6.95437 10.2811L11.472 5.76465", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round" })] }), claimsDescription[claim]] }, claim))) }));
+    };
+    const renderClaimsTitle = () => {
+        return (_jsxs(_Fragment, { children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Details requested" }), _jsx("svg", { className: `cid-idp-selector-popup-claims-toggle ${showClaims ? 'cid-idp-selector-popup-claims-toggle--open' : ''}`, xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 24 24", children: _jsx("path", { d: "M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" }) })] }));
+    };
+    const renderClaims = () => {
+        if (!claims)
+            return null;
+        if (isMobile) {
+            return (_jsxs("div", { className: "cid-idp-selector-popup-claims-button-wrapper", children: [_jsx("button", { className: "cid-idp-selector-popup-claims-button", onClick: () => setShowClaims(!showClaims), "aria-expanded": showClaims, "aria-controls": "cid-idp-selector-popup-claims", "data-testid": "claims-button", children: renderClaimsTitle() }), renderClaimList()] }));
+        }
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: "cid-idp-selector-popup-title-container", children: renderClaimsTitle() }), renderClaimList()] }));
+    };
+    const participantTile = (AuthorisationServerId, CustomerFriendlyName, CustomerFriendlyLogoUri, deviceType) => {
+        if (deviceType === 'desktop') {
+            return (_jsxs("div", { children: [_jsx("span", { id: `participant-greyed-out-description-${CustomerFriendlyName}`, className: "cid-idp-selector-popup-participant-description", "aria-hidden": "true", children: "available on mobile only" }), _jsxs("li", { "data-testid": "participant-greyed-out", className: "cid-idp-selector-popup-participant-greyed-out", "aria-disabled": "true", "aria-describedby": `participant-greyed-out-description-${CustomerFriendlyName}`, tabIndex: 0, children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon-greyed-out", src: CustomerFriendlyLogoUri, alt: `${CustomerFriendlyName} logo` }), _jsx("div", { className: "cid-idp-selector-popup-participant-name-greyed-out", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId), _jsxs("div", { className: "cid-greyout-participant-name", children: [_jsxs("svg", { className: "cid-idp-selector-button-info-icon-greyed-out", width: "8", height: "8", viewBox: "0 0 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M6.53509 12.3572C9.59207 12.3572 12.0702 9.81483 12.0702 6.67859C12.0702 3.54239 9.59207 1 6.53509 1C3.47814 1 1 3.54239 1 6.67859C1 9.81483 3.47814 12.3572 6.53509 12.3572Z", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.25781 9.29883H7.81247", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 4.49472C6.7703 4.49472 6.96093 4.29915 6.96093 4.05791C6.96093 3.81666 6.7703 3.62109 6.53515 3.62109C6.3 3.62109 6.10938 3.81666 6.10938 4.05791C6.10938 4.29915 6.3 4.49472 6.53515 4.49472Z", fill: "#262626", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.53515 9.29989V6.24219H5.68359", stroke: "#262626", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("div", { "data-testid": "cid-greyout-participant-name-mobile-only", className: "cid-idp-selector-popup-participant-greyed-out-text", "aria-describedby": `participant-greyed-out-description-${CustomerFriendlyName}`, children: "Available on mobile only" })] })] }));
+        }
+        else {
+            return (_jsxs("li", { "data-testid": "participant", className: "cid-idp-selector-popup-participant", tabIndex: 0, onClick: () => onProceed(AuthorisationServerId, CustomerFriendlyName), children: [_jsx("img", { className: "cid-idp-selector-popup-participant-icon", src: CustomerFriendlyLogoUri, alt: `${CustomerFriendlyName} logo` }), _jsx("div", { className: "cid-idp-selector-popup-participant-name", title: CustomerFriendlyName, "data-testid": "participant-name", children: CustomerFriendlyName })] }, AuthorisationServerId));
+        }
+    };
+    const renderAuthorisationServers = () => {
+        if (isLoading) {
+            return (_jsxs("div", { className: "cid-idp-selector-popup-provider-wrapper", children: [_jsx("h3", { className: "cid-idp-selector-popup-subtitle", children: "Choose a provider" }), _jsx(ParticipantsLoader, {})] }));
+        }
+        if (error) {
+            if (onError) {
+                onError('Unable to load participants');
+            }
+            return (_jsx("div", { className: "cid-idp-selector-popup-info-box-wrapper-warn", children: _jsx(NoIdpError, { dataTestId: "participant-error", hasManualIdp: false }) }));
+        }
+        const authorisationServers = participants
+            .map((participant) => participant.AuthorisationServers)
+            .flat()
+            .sort((authServer1, authServer2) => authServer1.CustomerFriendlyName.localeCompare(authServer2.CustomerFriendlyName));
+        const manualAuthorisationServer = getManualAuthorisationServer(authorisationServers, showAllParticipants);
+        const authorisationServersWithoutManual = authorisationServers.filter(({ AuthorisationServerId }) => AuthorisationServerId !== (manualAuthorisationServer === null || manualAuthorisationServer === void 0 ? void 0 : manualAuthorisationServer.AuthorisationServerId));
+        const filterByClaims = requiredClaims || claims;
+        const filteredAuthorisationServers = filterAuthorisationServers(authorisationServersWithoutManual, showAllParticipants, certificationStatus, filterByClaims, requiredCertifications);
+        const filteredAuthServerByDevice = mapAuthorisationServerToDeviceType(filteredAuthorisationServers, getDeviceType());
+        const hasManualIdp = enableManualVerification && !!manualAuthorisationServer;
+        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]) => {
+                                return (_jsx("div", { children: participantTile(authServer.AuthorisationServerId, authServer.CustomerFriendlyName, authServer.CustomerFriendlyLogoUri, device) }, authServer.AuthorisationServerId));
+                            }) })] })) : (_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." })] }) }))] }));
+    };
+    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'));
+};

package/Process.css

@@ -0,0 +1,51 @@
+.cid-idp-selector-process {
+  display: grid;
+  grid-template-columns: 6px 1fr;
+  column-gap: 8px;
+  margin-top: -12px;
+  margin-bottom: 9px;
+}
+.cid-idp-selector-process-dot {
+  width: 7px;
+  height: 7px;
+  background-color: var(--charcoal);
+}
+.cid-idp-selector-process-dot--grey {
+  background-color: var(--charcoal50);
+}
+.cid-idp-selector-process-line {
+  width: 1px;
+  height: calc(100% / 2 - 3.5px);
+  background-color: var(--charcoal);
+  margin-left: 3px;
+}
+.cid-idp-selector-process-line--grey {
+  background-color: var(--charcoal50);
+}
+.cid-idp-selector-process-filler {
+  height: calc(100% / 2 - 3.5px);
+  background-color: transparent;
+}
+.cid-idp-selector-process-step {
+  font-size: 16px;
+  color: var(--charcoal);
+  padding: 8px 0;
+  line-height: 130%;
+}
+.cid-idp-selector-process-step--light {
+  color: white;
+}
+.cid-idp-selector-process-line-last {
+  width: 1px;
+  height: 13.5px;
+  background-color: var(--charcoal);
+  margin-left: 3px;
+}
+.cid-idp-selector-process-line-last--grey {
+  background-color: var(--charcoal50);
+}
+@media (max-width: 744px) {
+  .cid-idp-selector-process-step {
+    font-size: 14px;
+  }
+}

package/Process.d.ts

@@ -0,0 +1,2 @@
+import './Process.css';
+export declare const Process: () => import("react/jsx-runtime").JSX.Element;

package/Process.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import './Process.css';
+import { ThemeContext } from './ThemeContext';
+export const Process = () => {
+    const theme = useContext(ThemeContext);
+    const dotClasses = `cid-idp-selector-process-dot ${theme === 'light' ? 'cid-idp-selector-process-dot--grey' : ''}`;
+    const lineClasses = `cid-idp-selector-process-line ${theme === 'light' ? 'cid-idp-selector-process-line--grey' : ''}`;
+    const lastLineClass = `cid-idp-selector-process-line-last ${theme === 'light' ? 'cid-idp-selector-process-line-last--grey' : ''}`;
+    const stepClasses = `cid-idp-selector-process-step ${theme === 'light' ? 'cid-idp-selector-process-step--light' : ''}`;
+    return (_jsxs("div", { className: "cid-idp-selector-process", "data-testid": "process", 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("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("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" })] }));
+};