@connectid-tools/idp-selector-react 6.4.1

package/InfoBox.css

@@ -0,0 +1,49 @@
+.cid-idp-selector-popup-info-box {
+  padding: 12px 12px 12px 20px;
+  background-color: #F9FDFB;
+  border-radius: 8px;
+  position: relative;
+}
+.cid-idp-selector-popup-info-box--info {
+  background-color: #F9FDFB;
+}
+.cid-idp-selector-popup-info-box--warning {
+  background-color: #FFF9F5;
+}
+.cid-idp-selector-popup-info-box::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #BEEDD2;
+  height: 100%;
+  width: 8px;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  content: '';
+}
+.cid-idp-selector-popup-info-box--warning::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #FFC1A0;
+  height: 100%;
+  width: 8px;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  content: '';
+}
+.cid-idp-selector-popup-info-box--info .cid-idp-selector-popup-info-box::before {
+  background-color: #BEEDD2;
+}
+.cid-idp-selector-popup-info-box--warning .cid-idp-selector-popup-info-box::before {
+  background-color: #FFC1A0;
+}
+.cid-idp-selector-popup-info-box-container {
+  display: flex;
+}
+.cid-idp-selector-popup-info-box-content {
+  margin-left: 20px;
+}
+.cid-idp-selector-popup-info-box-icon {
+  flex-shrink: 0;
+}

package/InfoBox.d.ts

@@ -0,0 +1,9 @@
+import './InfoBox.css';
+type InfoBoxProps = {
+    children: React.ReactNode;
+    type?: 'info' | 'warning';
+    role?: string;
+    dataTestId?: string;
+};
+export declare const InfoBox: React.FC<InfoBoxProps>;
+export {};

package/InfoBox.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './InfoBox.css';
+export const InfoBox = ({ children, role, dataTestId, type = 'info' }) => {
+    const renderIcon = () => {
+        if (type === 'info') {
+            return (_jsxs("svg", { className: "cid-idp-selector-popup-info-box-icon", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z", fill: "#BEEDD2" }), _jsx("path", { d: "M8.07129 13.8572H11.9284H8.07129Z", fill: "#BEEDD2" }), _jsx("path", { d: "M8.07129 13.8572H11.9284", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 6.78571C10.3553 6.78571 10.6431 6.49789 10.6431 6.14286C10.6431 5.78782 10.3553 5.5 10.0003 5.5C9.64524 5.5 9.35742 5.78782 9.35742 6.14286C9.35742 6.49789 9.64524 6.78571 10.0003 6.78571Z", fill: "#262626", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0006 13.8572V9.35718H8.71484", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+        }
+        // warning
+        return (_jsxs("svg", { className: "cid-idp-selector-popup-info-box-icon", width: "20", height: "20", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M9.96487 2.53513L2.53513 9.96487C1.96344 10.5366 1.96344 11.4634 2.53513 12.0351L9.96487 19.4649C10.5366 20.0366 11.4634 20.0366 12.0351 19.4649L19.4649 12.0351C20.0366 11.4634 20.0366 10.5366 19.4649 9.96487L12.0351 2.53513C11.4634 1.96344 10.5366 1.96344 9.96487 2.53513Z", fill: "#FFC1A0", stroke: "#FFC1A0", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M11.0029 6.66895V10.7733", stroke: "#262626", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.9419 15.4863C11.3197 15.4863 11.6259 15.18 11.6259 14.8022C11.6259 14.4244 11.3197 14.1182 10.9419 14.1182C10.5641 14.1182 10.2578 14.4244 10.2578 14.8022C10.2578 15.18 10.5641 15.4863 10.9419 15.4863Z", fill: "#262626", stroke: "#262626", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+    };
+    return (_jsx("div", { className: `cid-idp-selector-popup-info-box cid-idp-selector-popup-info-box--${type}`, role: role, "data-testid": dataTestId, children: _jsxs("div", { className: "cid-idp-selector-popup-info-box-container", children: [renderIcon(), _jsx("div", { className: "cid-idp-selector-popup-info-box-content", children: children })] }) }));
+};

package/IntroText.css

@@ -0,0 +1,24 @@
+.cid-idp-selector-intro-text {
+  color: var(--charcoal);
+  font-size: 18px;
+  line-height: 23px;
+  margin-bottom: 20px;
+}
+
+.cid-idp-selector-intro-text.cid-idp-selector-intro-text--light {
+  color: white;
+}
+
+@media (max-width: 430px) {
+  .cid-idp-selector-intro-text {
+    font-size: 16px;
+    line-height: 20px;
+  }
+}
+
+@media (max-width: 375px) {
+  .cid-idp-selector-intro-text {
+    font-size: 14px;
+    line-height: 18px;
+  }
+}

package/IntroText.d.ts

@@ -0,0 +1,5 @@
+import { IntroTextType } from './types';
+import './IntroText.css';
+export declare const IntroText: React.FC<{
+    type: IntroTextType;
+}>;

package/IntroText.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './IntroText.css';
+import { useContext } from 'react';
+import { ThemeContext } from './ThemeContext';
+const introTextContent = {
+    'verify-trust': 'ConnectID lets you verify your identity through details stored with an organisation you already trust, like your bank.',
+    'verify-account': 'Verify your identity through an organisation you already have an account with, like your bank.',
+    'power': 'ConnectID gives you the power to choose how you share your details, using organisations you already trust.',
+    'sign-up': 'ConnectID lets you sign up using details stored with an organisation you already trust, like your bank.'
+};
+export const IntroText = ({ type }) => {
+    const theme = useContext(ThemeContext);
+    return (_jsx("div", { className: `cid-idp-selector-intro-text ${theme === 'light' ? 'cid-idp-selector-intro-text--light' : ''}`, "data-testid": "intro-text", children: introTextContent[type] }));
+};

package/LearnMore.css

@@ -0,0 +1,27 @@
+.cid-idp-selector-learn-more {
+  text-align: center;
+  margin-top: 8px;
+  font-size: 14px;
+  color: var(--charcoal);
+}
+.cid-idp-selector-learn-more a { 
+  color: var(--charcoal);
+} 
+.cid-idp-selector-learn-more--light {
+  color: white;
+}
+.cid-idp-selector-learn-more--light a { 
+  color: white;
+}
+
+@media (max-width: 744px) {
+  .cid-idp-selector-learn-more {
+    font-size: 13px;
+  } 
+}
+
+@media (max-width: 375px) {
+  .cid-idp-selector-learn-more {
+    font-size: 12px;
+  } 
+}

package/LearnMore.d.ts

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

package/LearnMore.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import './LearnMore.css';
+import { ThemeContext } from './ThemeContext';
+import { useAnalytics } from './analytics';
+import { getCurrentUrlOrigin } from './navigator';
+export const LearnMore = () => {
+    useAnalytics();
+    const theme = useContext(ThemeContext);
+    const handleClick = () => {
+        if (!analytics)
+            return;
+        analytics.track('Link to External Page Clicked', {
+            source: 'learn_more',
+            link_url: 'https://www.connectid.com.au',
+            rp_sub_brand: getCurrentUrlOrigin(),
+        });
+    };
+    return (_jsxs("div", { className: `cid-idp-selector-learn-more ${theme === 'light' ? 'cid-idp-selector-learn-more--light' : ''}`, children: ["Visit", ' ', _jsx("a", { href: "https://www.connectid.com.au", onClick: handleClick, target: "_blank", tabIndex: 0, "data-testid": "learn-more", children: "connectid.com.au" }), ' ', "to learn more."] }));
+};

package/NoIdpError.d.ts

@@ -0,0 +1,6 @@
+type NoIdpErrorProps = {
+    hasManualIdp: boolean;
+    dataTestId?: string;
+};
+export declare const NoIdpError: React.FC<NoIdpErrorProps>;
+export {};

package/NoIdpError.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { InfoBox } from './InfoBox';
+export const NoIdpError = ({ hasManualIdp, dataTestId }) => {
+    // This is only to trigger the alert on screen readers
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+    const [isDisplayed, setDisplayed] = useState(false);
+    useEffect(() => {
+        setDisplayed(true);
+    }, []);
+    return (_jsx(InfoBox, { type: "warning", dataTestId: dataTestId, role: "alert", children: isDisplayed && (_jsxs(_Fragment, { children: [_jsx("h4", { className: "cid-idp-selector-popup-info-box-title", children: "We weren't able to load Identity Providers." }), _jsxs("p", { className: "cid-idp-selector-popup-info-box-text", children: ["Come back to us later", hasManualIdp && ' or enter details manually instead', "."] })] })) }));
+};

package/Overlay.css

@@ -0,0 +1,9 @@
+.cid-idp-selector-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9;
+}

package/Overlay.d.ts

@@ -0,0 +1,6 @@
+import './Overlay.css';
+type OverlayProps = {
+    onClick: () => void;
+};
+export declare const Overlay: React.FC<OverlayProps>;
+export {};

package/Overlay.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom';
+import './Overlay.css';
+export const Overlay = ({ onClick }) => {
+    return ReactDOM.createPortal(_jsx("div", { className: "cid-idp-selector-overlay", onClick: onClick }), document.querySelector('body'));
+};

package/ParticipantsLoader.css

@@ -0,0 +1,50 @@
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.cid-idp-selector-participants-loader {
+  border: 1px solid #c9c9c9;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 240px;
+  margin-top: 24px;
+  border-radius: 12px;
+}
+.cid-idp-selector-participants-loader__label {
+  font-size: 12px;
+  color: #5c5c5c;
+  margin-top: 12px;
+}
+.cid-idp-selector-participants-loader__spinner {
+  width: 30px;
+  height: 30px;
+  border: 3px dotted #5c5c5c;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  animation: rotation 2.5s linear infinite;
+  /* this is a request from vision australia, this wont happen (taking more than 5 sec to load participants) although we need it to get the WCAG certification so dont bother */
+  animation-iteration-count: 2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cid-idp-selector-participants-loader__spinner {
+    animation: none;
+  }
+}
+
+@media (max-width: 488px) {
+  .cid-idp-selector-participants-loader {
+    height: 180px;
+  }
+}
+

package/ParticipantsLoader.d.ts

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

package/ParticipantsLoader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './ParticipantsLoader.css';
+export const ParticipantsLoader = () => {
+    // This is only to trigger the alert on screen readers
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+    const [isDisplayed, setDisplayed] = useState(false);
+    useEffect(() => {
+        setDisplayed(true);
+    }, []);
+    return (_jsx("div", { className: "cid-idp-selector-participants-loader", "data-testid": "participants-loader", role: "alert", children: isDisplayed && (_jsxs(_Fragment, { children: [_jsx("span", { className: "cid-idp-selector-participants-loader__spinner" }), _jsx("span", { className: "cid-idp-selector-participants-loader__label", children: "Loading a list of identity providers" })] })) }));
+};