@connectid-tools/idp-selector-react 6.4.1

package/README.md

@@ -0,0 +1,633 @@
+# IDP Selector - React
+
+## 👋 Getting Started
+
+Install the package in your project using:
+
+```shell
+npm install @connectid-tools/idp-selector-react
+```
+
+Place the `<CidButton>` component where you want to render the ConnectID button in your page:
+
+```jsx
+import { CidButton } from '@connectid-tools/idp-selector-react'
+
+<CidButton 
+  onProceed={(authorisationServerClicked: string) => {
+    /* do something here */
+  }} 
+  claims={['email']} 
+  type="full process"
+  showInfoContent
+/>
+```
+
+Your page should render a widget similar to this 👇 And when the button is clicked a popup is displayed with Identity Providers.
+
+![](/images/readme_screenshot.png)
+
+## ⭐ CidButton Options
+
+| key                      | description                                                                                                                                                                                                                                                                                                                                                    | type                                                                                         | required                                          | default                                                 |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------------------------------------------------- |
+| onProceed                | Callback to be called when IDP Selector `Proceed` button is clicked                                                                                                                                                                                                                                                                                            | (authorisationServerId: string) => void                                                      | yes                                               | -                                                       |
+| claims                   | List of claims to be displayed to the user and will be requested from IDP to be shared. If `requiredClaims` not supplied then only IDPs that support all listed `claims` will be displayed to the user.                                                                                                                                                        | Claim[]                                                                                      | yes                                               | -                                                       |
+| requiredClaims           | List of claims to be supported by IDPs. Must be a subset of `claims`. Where an RP can successfully complete their use case without all claims specified in `claims`, they can specify `requiredClaims` with the minimum list of claims needed, which will then be used for filtering and may result in additional IDP options being displayed to the customer. | Claim[]                                                                                      | no (`claims` will be used if no `requiredClaims`) | -                                                       |
+| label                    | The button label. Do not use 'Sign Up'. It is deprecated.                                                                                                                                                                                                                                                                                                      | 'Verify' \| 'Login' \| 'Sign Up' \| 'Age check' \| 'Sign up' \| 'Authenticate' \| 'Checkout' | no                                                | 'Verify'                                                |
+| size                     | The button size                                                                                                                                                                                                                                                                                                                                                | 'regular' \| 'large'                                                                         | no                                                | 'regular'                                               |
+| participantsUri          | Registry API URI used to retrieve the list of participating Identity Providers. Should be changed only for testing.                                                                                                                                                                                                                                            | string                                                                                       | no                                                | 'https://data.directory.connectid.com.au/participants'  |
+| certificationStatus      | Filter Identity Provider by certification status.                                                                                                                                                                                                                                                                                                              | 'Active' \| 'All'                                                                            | no                                                | 'Active'                                                |
+| requiredCertifications   | Filter Identity Provider by certifications.                                                                                                                                                                                                                                                                                                                    | RequiredCertification[]                                                                      | no                                                | All certifications.                                     |
+| rpLogoUrl                | URL of the RP logo (your logo). Size 40x40.                                                                                                                                                                                                                                                                                                                    | URL                                                                                          | no                                                | No logo.                                                |
+| 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.' |
+| enableManualVerification | Whether an option to verify identity manually is displayed or not.                                                                                                                                                                                                                                                                                             | boolean                                                                                      | no                                                | false                                                   |
+| 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).                |
+| 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.                     | -                                                 |
+| fullProcessCollapsible   | Whether process items are collapsible or not. Only available when `type` is `full process`.                                                                                                                                                                                                                                                                    | boolean                                                                                      | no                                                | false                                                   |
+| showAllParticipants      | Show all participants regardless of any other option. **_This should only be used for testing_**.                                                                                                                                                                                                                                                              | boolean                                                                                      | no                                                | false                                                   |
+| theme                    | ConnectID button theme.                                                                                                                                                                                                                                                                                                                                        | 'dark' \| 'light'                                                                            | no                                                | 'dark'                                                  |
+| logoLockupStyle          | Logo lockup theme                                                                                                                                                                                                                                                                                                                                              | 'dark' \| 'light'                                                                            | no                                                | 'light'                                                 |
+| showInfoContent                  | The text that goes below the ConnectID button [More details here](#infoContent)                                                                                                                                                                                                                                               | boolean                                                                            | false                                                | false                                 |
+| onError                  | Callback to be called when there is an error fetching participants or invalid options.                                                                                                                                                                                                                                                                         | () => void                                                                                   | no                                                | () => {} // do nothing                                  |
+
+#### certificationStatus values
+
+- `Active`: only IDPs with active certification
+- `All`: All IDPs
+
+#### RequiredCertification type
+
+```typescript
+// TDIF.IDP = TDIF Accreditation, Identity Provider
+// 'Redirect.FAPI2' = Redirect, FAPI2 Adv. OP w/Private Key, PAR
+type RequiredCertification = 'TDIF.IDP' | 'Redirect.FAPI2'
+
+// filtering participants with TDIF.IDP
+<CidButton requiredCertifications={['TDIF.IDP']} />
+
+// filtering participants with TDIF.IDP and Redirect.FAPI2
+// only participants with both certification will be returned
+<CidButton requiredCertifications={['TDIF.IDP', 'Redirect.FAPI2']} />
+```
+
+#### Claim type
+
+```typescript
+type Claim =
+| 'given_name'
+| 'middle_name'
+| 'family_name'
+| 'phone_number'
+| 'email'
+| 'address'
+| 'birthdate'
+| 'over18'
+| 'over21'
+| 'over25'
+| 'over65'
+| 'beneficiary_account_au'
+| 'beneficiary_account_au_payid'
+| 'beneficiary_account_international'
+
+// e.g.
+<CidButton claims={['email', 'given_name', 'birthdate']} />
+```
+
+#### More examples
+
+```typescript
+
+// ConnectID button with `Continue with ConnectID` label, sandbox participants URI, RP logo and claims
+<CidButton
+  label="Continue"
+  participantsUri="https://data.directory.sandbox.connectid.com.au/participants" rpLogoUrl="https://www.nasa.gov/sites/all/themes/custom/nasatwo/images/nasa-logo.svg"
+  claims={['email', 'given_name', 'birthdate', 'phone_number', 'address']}
+/>
+
+// ConnectID button loading all Identity Providers (with and without certification)
+<CidButton certificationStatus="All" claims={['birthdate', 'given_name']} />
+```
+
+## ⚙️ Widgets
+
+### <a name="type"></a>Type option
+
+### Tiny
+
+- When type is not set, only ConnectID button is displayed.
+- When type is set to `tiny`, the ConnectID plus other elements below are displayed.
+<details> 
+  <summary>Tiny example</summary>
+
+![](/images/readme_type_tiny.png 'IDP Selector type option set with `tiny`')
+</details>
+
+### Medium benefits
+
+- `medium benefits` type is a variation of the `tiny` type. It includes the same elements as the `tiny` type plus a list of benefits.
+
+<details> 
+  <summary>Medium benefits example</summary>
+
+![](/images/readme_type_medium_benefits.png 'IDP Selector type option set with `medium benefits`')
+</details>
+
+### Medium process
+
+- `medium process` type is a variation of the `medium benefits` type. The only difference is a list of steps (process) instead of a list of benefits.
+
+<details> 
+  <summary>Medium process example</summary>
+
+![](/images/readme_type_medium_process.png 'IDP Selector type option set with `medium process`')
+</details>
+
+### Full benefits
+
+- `full benefits` type is a variation of the `medium benefits` type. It displays a bigger list of benefits.
+
+<details> 
+  <summary>Full benefits example</summary>
+
+![](/images/readme_type_full_benefits.png 'IDP Selector type option set with `medium benefits`')
+</details>
+
+### Full process
+
+- `full process` type is a variation of the `full benefits` type. The only difference is a list of steps (process) instead of a list of benefits.
+
+<details> 
+  <summary>Full process example</summary>
+
+![](/images/readme_type_full_process.png 'IDP Selector type option set with `full process`')
+</details>
+
+### <a name="introTextType"></a>introTextType option
+
+> \[!NOTE]
+>
+> The intro text is a set of pre-defined paragraphs that you need to pick from. The text is not customizable. See below.
+> The text that goes above the ConnectID button. The text is a set of pre-defined paragraphs that you need to pick from. The text is not customizable
+
+All elements have classes that can be styled with CSS to match you brand identity. To style the intro text "You choose how to share ...", for example, you would use the following CSS:
+
+```css
+.cid-idp-selector-intro-text {
+  font-size: 13px;
+  color: blue;
+}
+```
+
+<details> 
+  <summary>Introduction text options</summary>
+
+`verify-trust`: ConnectID lets you verify your identity through details stored with an organisation you already trust, like your bank.\
+`verify-account`: ConnectID gives you the power to choose how you share your details, using organisations you already trust.\
+`power`: ConnectID gives you the power to choose how you share your details, using organisations you already trust.
+
+</details>
+
+### <a name="infoContent"></a>infoContent option
+
+This is an optional field in addition with the widgets below the ConnectID button to either display or not display the information content.
+
+<details> 
+  <summary>Info content</summary>
+
+![](/images/readme_below_button.png 'Below information content')
+</details>
+
+
+### <a name="logoLockupStyle"></a>logoLockup option
+
+The SVG image below the ConnectID button has either option dark or light mode. By default it set as light mode.
+
+> \[!NOTE]
+>
+> The light mode logo has a transparent background.
+
+<details> 
+  <summary>Logo lockup mode</summary>
+
+**Light mode:** <br>
+![Light mode logo](https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-light.svg)
+
+**Dark mode:** <br>
+![Dark mode logo](https://cdn.connectid.com.au/images/idp-selector/logo-lockup/logo-lockup-dark.svg)
+</details>
+
+
+## 🚀 Release Notes
+
+### 6.4.1 (Feb 24, 2025)
+- Update README. 
+- Add license file to bundle.
+
+### 6.4.0 (Feb 12, 2025)
+- Add new `introTextType` option. 
+
+### 6.3.0 (Feb 3, 2025)
+- Support `over16` claim.
+
+### 6.2.2 (Jan 22, 2025)
+- Fix icon and text alignment.
+
+### 6.2.1 (Jan 9, 2025)
+- Update README example using `type` option.
+
+### 6.2.0 (Dec 11, 2024)
+- Added `showInfoContent` option.
+- Removed `name` claim field.
+
+### 6.1.1 (Dec 5, 2024)
+- Fix screen reader focus for greyed out tile.
+
+### 6.1.0 (Dec 2, 2024)
+- Widget release for `tiny`, `medium` and `full` sizes options.
+- Add `logoLockupStyle` option.
+
+### 6.0.0 (Nov 27, 2024)
+
+- Breaking change:
+  - Updated both intro text and types.
+- Updated URL link for ConnectID use case.
+- Updated `full process` `type`.
+
+<details> 
+  <summary>🚀 Release Version 5.x.x</summary>
+
+### 5.5.2 (Nov 20, 2024)
+- Update IDP container to show 4.5 tiles.
+
+### 5.5.1 (Nov 5, 2024)
+
+- Add `charcoal` colour to button info.
+
+### 5.5.0 (Oct 10, 2024)
+
+- Add `fullProcessCollapsible` option.
+
+### 5.4.1 (Oct 10, 2024)
+
+- Fix `tiny` spacing.
+
+### 5.4.0 (Oct 9, 2024)
+
+- Add `full process` `type`.
+
+### 5.3.0 (Oct 8, 2024)
+
+- Add `full benefits` `type`.
+
+### 5.2.1 (Oct 8, 2024)
+
+- Replace `how does it work` with `learn more` on `medium process` option.
+
+### 5.2.0 (Oct 4, 2024)
+
+- Add `medium process` `type`.
+
+### 5.1.0 (Oct 3, 2024)
+
+- Add `medium benefits` `type`.
+- Fix info icon shrinking.
+
+### 5.0.1 (Oct 3, 2024)
+
+- Use SVG info icon.
+- Fix margins.
+
+### 5.0.0 (Oct 2, 2024)
+
+- Add `type` option.
+- Add `introText` option.
+- Breaking change:
+  - `showIdpLogoList` option was removed. Use `type` instead.
+
+</details>
+
+<details> 
+  <summary>🚀 Release Version 4.x.x</summary>
+
+### 4.13.1 (Sep 9, 2024)
+
+- Take into account certification start date when filtering by certifications.
+
+### 4.13.0 (Sep 5, 2024)
+
+- Add `showIdpLogoList` option.
+
+### 4.12.3 (Sep 4, 2024)
+
+- Update `beneficiary_account_au` claim label.
+
+### 4.12.2 (Sep 4, 2024)
+
+- Change ConnectID button font weight.
+
+### 4.12.1 (Aug 2, 2024)
+
+- Replace `jest` with Node native test runner.
+
+### 4.12.0 (Aug 2, 2024)
+
+- Add `Authenticate`, `Sign up`, `Checkout`, `Login` button labels.
+
+### 4.11.1 (Jul 23, 2024)
+
+- Set font color on IDP name, "What's ConnectID" section and manual verification link.
+
+### 4.11.0 (Jul 12, 2024)
+
+- Announce to screen readers when there is an error loading participants.
+
+### 4.10.0 (Jul 9, 2024)
+
+- Announce to screen readers when loading participants is displayed.
+
+### 4.9.5 (Jul 9, 2024)
+
+- Fix `Details requested` losing focus on `Enter`.
+
+### 4.9.4 (Jul 8, 2024)
+
+- Manual provider not working on keyboard `Enter` key.
+
+### 4.9.3 (Jun 18, 2024)
+
+- `rp_sub_brand` is set with `window.location.hostname`
+
+### 4.9.2 (Jun 5, 2024)
+
+- Change participants loader from skeleton to text plus spinner.
+
+### 4.9.1 (May 29, 2024)
+
+- Fix error message in mobile view.
+
+### 4.9.0 (May 22, 2024)
+
+- Display ConnectID button while participants is loaded (rather than wait participants to show the button).
+- Fix claims being centered on certain screen sizes.
+- Infobox size updated to be dynamic.
+
+### 4.8.8 (May 20, 2024)
+
+- Improve confirm identity button contrast.
+
+### 4.8.7 (May 20, 2024)
+
+- Make popup dot animation finite.
+
+### 4.8.6 (May 16, 2024)
+
+- Trap focus inside popup.
+
+### 4.8.5 (May 15, 2024)
+
+- Make `Details requested` accessible by keyboard.
+
+### 4.8.4 (May 14, 2024)
+
+- Use `li` for lists.
+
+### 4.8.3 (May 13, 2024)
+
+- Change all `tabindex` to `0`.
+
+### 4.8.2 (May 13, 2024)
+
+- Add `<title>` and `role` to ConnectID logo.
+
+### 4.8.1 (May 13, 2024)
+
+- Add `aria-label` to popup close button.
+
+### 4.8.0 (Mar 12, 2023)
+
+- Add `onError` callback option.
+- Set ConnectID button `type="button"`.
+
+### 4.7.1 (Jan 29, 2024)
+
+- Send url origin instead of full url when posting `rp_sub_brand` event.
+
+### 4.7.0 (Jan 11, 2023)
+
+- Send `rp_sub_brand`, `idp_name`, `source` and `link_url` event properties.
+
+### 4.6.0 (Dec 12, 2023)
+
+- Add `Link to External page clicked` event.
+
+### 4.5.2 (Dec 11, 2023)
+
+- Rename existing analytics event names.
+
+### 4.5.1 (Nov 1, 2023)
+
+- Fix button label responsiveness.
+
+### 4.5.0 (Oct 26, 2023)
+
+- Add `requiredClaims` option so that RPs can specify the minimum set of claims an IDP must support to be considered as a candidate to use for the flow.
+
+### 4.4.3 (Oct 20, 2023)
+
+- Manual verification button label is no longer bold on mobile.
+
+### 4.4.2 (Oct 19, 2023)
+
+- Popup dots animation.
+
+### 4.4.1 (Oct 10, 2023)
+
+- Display claims in two columns on mobile.
+
+### 4.4.0 (Aug 9, 2023)
+
+- Add analytics.
+
+### 4.3.0 (Aug 4, 2023)
+
+- Add button `size` option.
+
+### 4.2.4 (Aug 1, 2023)
+
+- Update claim labels.
+
+### 4.2.3 (Jul 31, 2023)
+
+- Update ConnectID button styles.
+
+### 4.2.2 (Jun 29, 2023)
+
+- Update manual verification copy.
+
+### 4.2.1 (Jun 29, 2023)
+
+- Update `What is ConnectID` copy.
+
+### 4.2.0 (Jun 22, 2023)
+
+- Add `theme` option.
+
+### 4.1.0 (May 22, 2023)
+
+- `showAllParticipants` option.
+
+### 4.0.2 (May 22, 2023)
+
+- Fix filter by device.
+
+### 4.0.1 (May 15, 2023)
+
+- Fix filter by claims.
+
+### 4.0.0 (May 11, 2023)
+
+- Breaking change:
+  - Filter IDPs that supports all `claims` option.
+  - `claims` is required.
+
+</details>
+
+<details> 
+  <summary>🚀 Release Version 3.x.x</summary>
+
+### 3.0.0 (May 10, 2023)
+
+- Breaking change:
+  - `certificationStatus="Active"` now returns only authorisation servers that have at least one certification with `ProfileType === 'Redirect' && ProfileVariant === 'FAPI2 Adv. OP w/Private Key, PAR'` (needs to be `Status === 'Certified'` and `CertificationExpirationDate` not expired as well).
+  - Removed `Inactive` from `certificationStatus`.
+- Filter authorisation servers by certification channel (`app` and `web`).
+
+</details>
+
+<details> 
+  <summary>🚀 Release Version 2.x.x</summary>
+
+
+### 2.1.1 (Apr 28, 2023)
+
+- Compile to ES6.
+
+### 2.1.0 (Apr 26, 2023)
+
+- Handle only one manual IDP use case.
+
+### 2.0.0 (Mar 30, 2023)
+
+- Update claims:
+  - `beneficiary_account_au` replaces `beneficiary_account`.
+  - `beneficiary_account_au_payid` replaces `pay_id`.
+  - New claim `beneficiary_account_international`.
+- Fix claims toggle on mobile.
+
+</details>
+
+<details> 
+  <summary>🚀 Release Version 1.x.x</summary>
+
+### 1.7.0 (Mar 14, 2023)
+
+- Add claims: `'over18', 'over21', 'over25', 'over65', 'beneficiary_account', 'pay_id'`.
+
+### 1.6.5 (Mar 13, 2023)
+
+- `Active` `certificationStatus` will only return `Certified` authorisation servers. Previously, it was returning `Self-Certified` as well.
+
+### 1.6.4 (Feb 28, 2023)
+
+- Fix IDP container height and add scrollbar.
+
+### 1.6.3 (Feb 21, 2023)
+
+- Change IDP error message layout.
+
+### 1.6.2 (Feb 21, 2023)
+
+- auto-fit claims on mobile (482px width).
+- Reduce margin between details and providers on mobile (482px width).
+- Increase font size of providers on mobile (482px width).
+- Center logos, title and description on mobile (482px width).
+
+### 1.6.1 (Feb 20, 2023)
+
+- Fix manual identity provider `ProfileVariant` (Fallback Identity Service Provider).
+
+### 1.6.0 (Feb 20, 2023)
+
+- `Roobert` font.
+
+### 1.5.3 (Feb 17, 2023)
+
+- Fix `What is ConnectID` section layout.
+- Fix RP logo size on mobile (482px width).
+
+### 1.5.2 (Feb 9, 2023)
+
+- Wrap claims and IDPs into white box on mobile (482px width).
+
+### 1.5.1 (Feb 7, 2023)
+
+- Manual verification on mobile (482px width).
+
+### 1.5.0 (Feb 7, 2023)
+
+- Collapse claims on mobile (482px width).
+- Smaller fonts for titles on mobile (482px width).
+
+### 1.4.2 (Feb 3, 2023)
+
+- Sort claims: `name, given_name, middle_name, family_name, birthdate, email, address, phone_number`.
+
+### 1.4.1 (Feb 2, 2023)
+
+- Minor layout changes.
+
+### 1.4.0 (Feb 2, 2023)
+
+- Add `enableManualVerification` option. See `CidButton Options`.
+
+### 1.3.2 (Jan 30, 2023)
+
+- Fix popup `position`.
+
+### 1.3.1 (Jan 25, 2023)
+
+- Fix claims width.
+
+### 1.3.0 (Jan 25, 2023)
+
+- New participant layout.
+- Remove `Cancel` and `Proceed` buttons.
+
+### 1.2.0 (Jan 25, 2023)
+
+- Add `What is ConnectID?` section.
+- Remove `My bank is not listed`.
+
+### 1.1.0 (Jan 24, 2023)
+
+- Add popup close button.
+- Fix claims list on small screens.
+
+### 1.0.0 (Jan 24, 2023)
+
+- New layout.
+- New prop `rpDataSharingDescription`. See `CidButton Options`.
+- **Breaking changes:**
+  - new button label values.
+
+```typescript
+type CidButtonLabel = 'Verify' | 'Sign Up' | 'Age check'
+```
+
+### 0.4.5 (Jan 6, 2023)
+
+- Starting point.
+</details>
+
+[Back to top](#top)

package/Skeleton.css

@@ -0,0 +1,27 @@
+@keyframes animation {
+  0% {
+    left: -150px;
+  }
+  100% {
+    left: 100%;
+  }
+}
+.cid-idp-selector-skeleton {
+  position: relative;
+  overflow: hidden;
+  border-radius: 5px;
+}
+.cid-idp-selector-skeleton:after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: -150px;
+  top: 0;
+  height: 100%;
+  width: 150px;
+  background: linear-gradient(to right, transparent 0%, white 50%, transparent 100%);
+  animation-name: animation;
+  animation-duration: 1s;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-iteration-count: infinite;
+}

package/Skeleton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Skeleton.css';
+type SkeletonProps = {
+    height: string;
+    width?: string;
+    background?: string;
+    dataTestId?: string;
+};
+export declare const Skeleton: React.FC<SkeletonProps>;
+export {};

package/Skeleton.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Skeleton.css';
+export const Skeleton = ({ height, dataTestId, width = '100%', background = 'whitesmoke', }) => {
+    return _jsx("div", { className: "cid-idp-selector-skeleton", style: { height, width, background }, "data-testid": dataTestId });
+};

package/TabHook.d.ts

@@ -0,0 +1,2 @@
+export declare function useOverrideTab<T extends HTMLElement, U extends HTMLElement>(element: React.RefObject<T> | null, nextElement: React.RefObject<U> | null): void;
+export declare function useOverrideShiftTab<T extends HTMLElement, U extends HTMLElement>(element: React.RefObject<T> | null, nextElement: React.RefObject<U> | null): void;