@connectid-tools/idp-selector-react 6.12.1-alpha.1 → 6.12.1-alpha.2

package/FullProcess.css

@@ -9,19 +9,27 @@
   border: 1px solid var(--charcoal10);
   background-color: transparent;
 }
+.cid-idp-selector-full-process-summary {
+  list-style: none;
+  padding: 0;
+  cursor: pointer;
+}
+.cid-idp-selector-full-process-summary::-webkit-details-marker, .cid-idp-selector-full-process-summary::marker {
+  display: none;
+}
 .cid-idp-selector-full-process-title {
   font-size: 20px;
   color: var(--charcoal);
-  margin-bottom: 0;
+  margin-bottom: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.cid-idp-selector-full-process--open .cid-idp-selector-full-process-title {
-  margin-bottom: 20px;
+.cid-idp-selector-full-process-summary .cid-idp-selector-full-process-title {
+  margin-bottom: 0;
 }
-.cid-idp-selector-full-process-toggle {
-  cursor: pointer;
+.cid-idp-selector-full-process[open] .cid-idp-selector-full-process-title {
+  margin-bottom: 20px;
 }
 .cid-idp-selector-full-process-toggle path {
   fill: var(--charcoal);
@@ -29,7 +37,7 @@
 .cid-idp-selector-full-process--light .cid-idp-selector-full-process-toggle path {
   fill: white;
 }
-.cid-idp-selector-full-process--open .cid-idp-selector-full-process-toggle {
+.cid-idp-selector-full-process[open] .cid-idp-selector-full-process-toggle {
   transform: rotate(180deg);
 }
 .cid-idp-selector-full-process--light .cid-idp-selector-full-process-title {

package/FullProcess.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useState } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
 import { ThemeContext } from "./ThemeContext.js";
 import "./FullProcess.css";
 import { FullProcessVerticalList } from "./FullProcessVerticalList.js";
@@ -18,14 +18,16 @@ import { FullProcessHorizontalList } from "./FullProcessHorizontalList.js";
 // . text
 export const FullProcess = ({ collapsible = false }) => {
     const theme = useContext(ThemeContext);
-    const [open, setOpen] = useState(!collapsible);
-    const handleToggle = () => {
-        if (!collapsible)
-            return;
-        setOpen(!open);
+    const listItems = [
+        "Select your trusted organisation",
+        "Log in to your existing account",
+        "Review your details and provide consent",
+    ];
+    const renderList = () => {
+        return (_jsxs(_Fragment, { children: [_jsx(FullProcessVerticalList, { items: listItems }), _jsx(FullProcessHorizontalList, { items: listItems })] }));
     };
-    return (_jsxs("div", { className: `cid-idp-selector-full-process 
-        ${theme === "light" ? "cid-idp-selector-full-process--light" : ""} 
-        ${open ? "cid-idp-selector-full-process--open" : ""}
-      `, "data-testid": "full-process", children: [_jsxs("h3", { className: "cid-idp-selector-full-process-title", "data-testid": "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" }) }))] }), open && (_jsxs(_Fragment, { children: [_jsx(FullProcessVerticalList, {}), _jsx(FullProcessHorizontalList, {})] }))] }));
+    if (collapsible) {
+        return (_jsxs("details", { className: `cid-idp-selector-full-process ${theme === "light" ? "cid-idp-selector-full-process--light" : ""}`, "data-testid": "full-process", children: [_jsx("summary", { className: "cid-idp-selector-full-process-summary", "data-testid": "full-process-summary", children: _jsxs("h3", { className: "cid-idp-selector-full-process-title", "data-testid": "full-process-title", children: ["How it works", _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", "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" }) })] }) }), renderList()] }));
+    }
+    return (_jsxs("div", { className: `cid-idp-selector-full-process ${theme === "light" ? "cid-idp-selector-full-process--light" : ""}`, "data-testid": "full-process", children: [_jsx("h3", { className: "cid-idp-selector-full-process-title", "data-testid": "full-process-title", children: "How it works" }), renderList()] }));
 };

package/FullProcessHorizontalList.d.ts

@@ -1,2 +1,6 @@
 import './FullProcessHorizontalList.css';
-export declare const FullProcessHorizontalList: React.FC;
+type FullProcessHorizontalListProps = {
+    items: string[];
+};
+export declare const FullProcessHorizontalList: React.FC<FullProcessHorizontalListProps>;
+export {};

package/FullProcessHorizontalList.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./FullProcessHorizontalList.css";
 import { Step } from "./Step.js";
 import { StepTitle } from "./StepTitle.js";
-export const FullProcessHorizontalList = () => {
-    return (_jsxs("ol", { className: "cid-idp-selector-full-process-h-list", "data-testid": "full-process-h-list", children: [_jsxs("li", { className: "cid-idp-selector-full-process-h-item", children: [_jsx(Step, {}), _jsx(StepTitle, { title: "Select your trusted organisation" })] }), _jsxs("li", { className: "cid-idp-selector-full-process-h-item", children: [_jsx(Step, {}), _jsx(StepTitle, { title: "Log in to your existing account" })] }), _jsxs("li", { className: "cid-idp-selector-full-process-h-item", children: [_jsx(Step, { removeLine: true }), _jsx(StepTitle, { title: "Review your details and provide consent" })] })] }));
+export const FullProcessHorizontalList = ({ items }) => {
+    return (_jsx("ol", { className: "cid-idp-selector-full-process-h-list", "data-testid": "full-process-h-list", children: items.map((item, index) => (_jsxs("li", { className: "cid-idp-selector-full-process-h-item", children: [_jsx(Step, { removeLine: index === items.length - 1 }), _jsx(StepTitle, { title: item })] }, index))) }));
 };

package/FullProcessVerticalList.d.ts

@@ -1,2 +1,6 @@
 import './FullProcessVerticalList.css';
-export declare const FullProcessVerticalList: React.FC;
+type FullProcessVerticalListProps = {
+    items: string[];
+};
+export declare const FullProcessVerticalList: React.FC<FullProcessVerticalListProps>;
+export {};

package/FullProcessVerticalList.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./FullProcessVerticalList.css";
 import { Step } from "./Step.js";
 import { StepTitle } from "./StepTitle.js";
-export const FullProcessVerticalList = () => {
-    return (_jsxs("ol", { className: "cid-idp-selector-full-process-v-list", "data-testid": "full-process-v-list", children: [_jsxs("li", { className: "cid-idp-selector-full-process-v-item", children: [_jsx(Step, {}), _jsx(StepTitle, { title: "Select your trusted organisation" })] }), _jsxs("li", { className: "cid-idp-selector-full-process-v-item", children: [_jsx(Step, {}), _jsx(StepTitle, { title: "Log in to your existing account" })] }), _jsxs("li", { className: "cid-idp-selector-full-process-v-item", children: [_jsx(Step, { removeLine: true }), _jsx(StepTitle, { title: "Review your details and provide consent" })] })] }));
+export const FullProcessVerticalList = ({ items }) => {
+    return (_jsx("ol", { className: "cid-idp-selector-full-process-v-list", "data-testid": "full-process-v-list", children: items.map((item, index) => (_jsxs("li", { className: "cid-idp-selector-full-process-v-item", children: [_jsx(Step, { removeLine: index === items.length - 1 }), _jsx(StepTitle, { title: item })] }, index))) }));
 };

package/README.md

@@ -260,6 +260,12 @@ The SVG image below the ConnectID button has either option dark or light mode. B
 
 ## 🚀 Release Notes
 
+### 6.12.1-alpha.2 (Aug 25, 2025)
+- `full process` with `detail/summary`.
+
+### 6.12.1-alpha.1 (Aug 25, 2025)
+- `full process` type as list(`ul/li`).
+
 ### 6.12.0 (Aug 14, 2025)
 - Update `cba_loyalty` claim label.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectid-tools/idp-selector-react",
-  "version": "6.12.1-alpha.1",
+  "version": "6.12.1-alpha.2",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",
@@ -26,11 +26,11 @@
   "homepage": "https://github.com/connectid-tools/idp-selector-react",
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",
-    "@types/node": "^22.17.2",
+    "@types/node": "^22.18.0",
     "@types/react": "^18.3.24",
     "@types/react-dom": "^18.3.7",
-    "cypress": "^14.5.4",
-    "jest-environment-jsdom": "^29.7.0",
+    "cypress": "^15.0.0",
+    "jest-environment-jsdom": "^30.0.5",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -43,6 +43,6 @@
     "detectincognitojs": "^1.6.1",
     "react-responsive": "^10.0.1",
     "swr": "^2.3.6",
-    "vite": "^6.3.5"
+    "vite": "^7.1.3"
   }
 }