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

package/FullProcess.css

@@ -5,37 +5,31 @@
   border: 1px solid var(--charcoal);
   margin-bottom: 20px;
 }
-.cid-idp-selector-full-process.open {
-  border: 1px solid var(--charcoal);
-}
-.cid-idp-selector-full-process.close {
-  border: 1px solid var(--charcoal50);
-}
-
-.cid-idp-selector-full-process.open.light {
+.cid-idp-selector-full-process--light {
   border: 1px solid var(--charcoal10);
+  background-color: transparent;
 }
-.cid-idp-selector-full-process.close.light {
-  border: 1px solid var(--charcoal50);
+.cid-idp-selector-full-process-summary {
+  list-style: none;
+  padding: 0;
+  cursor: pointer;
 }
-
-.cid-idp-selector-full-process--light {
-  border: 1px solid var(--charcoal50);
-  background-color: transparent;
+.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);
@@ -43,93 +37,12 @@
 .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 {
   color: white;
 }
-.cid-idp-selector-full-process-step {
-  display: flex;
-  align-items: center;
-}
-.cid-idp-selector-full-process-dot {
-  width: 11px;
-  height: 11px;
-  background-color: var(--mint);
-  border-radius: 50%;
-  border: 1px solid var(--charcoal);
-}
-.cid-idp-selector-full-process-dot-wrapper {
-  width: 17px;
-  height: 17px;
-  background-color: white;
-  border-radius: 50%;
-  border: 1px solid var(--charcoal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.cid-idp-selector-full-process-line {
-  width: 100%;
-  height: 1px;
-  background-color: var(--charcoal);
-}
-.cid-idp-selector-full-process--light .cid-idp-selector-full-process-line {
-  background-color: white;
-} 
-.cid-idp-selector-full-process-grid {
-  display: none;
-  grid-template-columns: 1fr 1fr 132px;
-  grid-row-gap: 8px;
-}
-.cid-idp-selector-full-process--open .cid-idp-selector-full-process-grid {
-  display: grid;
-}
-.cid-idp-selector-full-process-subtitle {
-  max-width: 132px;
-  font-size: 14px;
-  color: var(--charcoal);
-  display: none;
-  line-height: 130%;
-  margin-right: 26px;
-}
-.cid-idp-selector-full-process--light .cid-idp-selector-full-process-subtitle {
-  color: white;
-}
-.cid-idp-selector-full-process-subtitle.cid-idp-selector-full-process-subtitle--wide {
-  display: block;
-}
-
-@media (max-width: 1280px) {
-  .cid-idp-selector-full-process-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-  .cid-idp-selector-full-process-subtitle.cid-idp-selector-full-process-subtitle--wide {
-    display: none;
-  }
-  .cid-idp-selector-full-process-subtitle {
-    display: block;
-  }
-  .cid-idp-selector-full-process-line {
-    width: 1px;
-    height: 26px;
-    background-color: var(--charcoal);
-  }
-  .cid-idp-selector-full-process-grid {
-    grid-template-columns: 19px 1fr;
-    column-gap: 8px;
-    grid-row-gap: 0;
-  }
-  .cid-idp-selector-full-process-step {
-    flex-direction: column;
-  }
-  .cid-idp-selector-full-process-subtitle {
-    max-width: 100%;
-    margin: 0;
-  }
-}
 
 @media (max-width: 430px) {
   .cid-idp-selector-full-process-title {
@@ -142,9 +55,3 @@
     font-size: 16px;
   }
 }
-
-@media(max-width: 320px) {
-  .cid-idp-selector-full-process-line {
-    height: 35px;
-  }
-}

package/FullProcess.js

@@ -1,12 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } 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";
-// on a wide screen the layout is like this
+import { FullProcessVerticalList } from "./FullProcessVerticalList.js";
+import { FullProcessHorizontalList } from "./FullProcessHorizontalList.js";
+// on a wide screen the layout is like this (FullProcessHorizontalList)
 // .----------.----------.
 // text       text       text
 //
-// however, when the screen is not wide, the layout is like this
+// however, when the screen is not wide, the layout is like this (FullProcessVerticalList)
 // . text
 // |
 // |
@@ -16,20 +18,16 @@ import "./FullProcess.css";
 // . text
 export const FullProcess = ({ collapsible = false }) => {
     const theme = useContext(ThemeContext);
-    const shouldOpen = collapsible ? false : true;
-    const [open, setOpen] = useState(shouldOpen);
-    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 })] }));
     };
-    const colorChanged = () => {
-        if (collapsible === false) {
-            return true;
-        }
-        if (open === true) {
-            return true;
-        }
-    };
-    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" })] })] }));
+    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.css

@@ -0,0 +1,20 @@
+.cid-idp-selector-full-process-h-list {
+  display: none;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  grid-template-columns: 1fr 1fr 132px;
+  grid-row-gap: 8px;
+}
+.cid-idp-selector-full-process-h-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+@media (min-width: 1281px) {
+  .cid-idp-selector-full-process-h-list {
+    display: grid;
+  }
+}

package/FullProcessHorizontalList.d.ts

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

package/FullProcessHorizontalList.js

@@ -0,0 +1,7 @@
+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 = ({ 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.css

@@ -0,0 +1,17 @@
+.cid-idp-selector-full-process-v-list {
+  display: none;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+.cid-idp-selector-full-process-v-item {
+  display: grid;
+  grid-template-columns: 19px 1fr;
+  grid-column-gap: 8px;
+}
+
+@media (max-width: 1280px) {
+  .cid-idp-selector-full-process-v-list {
+    display: block;
+  }
+}

package/FullProcessVerticalList.d.ts

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

package/FullProcessVerticalList.js

@@ -0,0 +1,7 @@
+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 = ({ 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/Step.css

@@ -0,0 +1,48 @@
+.cid-idp-selector-step {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.cid-idp-selector-step-dot {
+  width: 11px;
+  height: 11px;
+  background-color: var(--mint);
+  border-radius: 50%;
+  border: 1px solid var(--charcoal);
+}
+.cid-idp-selector-step-dot-wrapper {
+  width: 17px;
+  height: 17px;
+  background-color: white;
+  border-radius: 50%;
+  border: 1px solid var(--charcoal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.cid-idp-selector-step-line {
+  width: 1px;
+  height: 26px;
+  background-color: var(--charcoal);
+}
+.cid-idp-selector-step-line.cid-idp-selector-step-line--light {
+  background-color: white;
+}
+
+@media (max-width: 320px) {
+  .cid-idp-selector-step-line {
+    height: 35px;
+  }
+}
+
+@media (min-width: 1281px) {
+  .cid-idp-selector-step {
+    flex-direction: row;
+    width: 100%;
+  }
+  .cid-idp-selector-step-line {
+    width: 100%;
+    height: 1px;
+  }
+}

package/Step.d.ts

@@ -0,0 +1,6 @@
+import './Step.css';
+type StepProps = {
+    removeLine?: boolean;
+};
+export declare const Step: React.FC<StepProps>;
+export {};

package/Step.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import "./Step.css";
+import { ThemeContext } from "./ThemeContext.js";
+export const Step = ({ removeLine = false }) => {
+    const theme = useContext(ThemeContext);
+    return (_jsxs("div", { className: "cid-idp-selector-step", "data-testid": "step", children: [_jsx("div", { className: "cid-idp-selector-step-dot-wrapper", children: _jsx("div", { className: "cid-idp-selector-step-dot" }) }), !removeLine && (_jsx("div", { className: `cid-idp-selector-step-line ${theme === "light" ? "cid-idp-selector-step-line--light" : ""}`, "data-testid": "step-line" }))] }));
+};

package/StepTitle.css

@@ -0,0 +1,11 @@
+.cid-idp-selector-step-title {
+  font-size: 14px;
+  color: var(--charcoal);
+  line-height: 130%;
+  max-width: 100%;
+  margin: 0;
+  margin-right: 26px;
+}
+.cid-idp-selector-step-title.cid-idp-selector-step-title--light {
+  color: white;
+}

package/StepTitle.d.ts

@@ -0,0 +1,6 @@
+import './StepTitle.css';
+type StepTitleProps = {
+    title: string;
+};
+export declare const StepTitle: React.FC<StepTitleProps>;
+export {};

package/StepTitle.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeContext.js";
+import "./StepTitle.css";
+export const StepTitle = ({ title }) => {
+    const theme = useContext(ThemeContext);
+    return (_jsx("div", { className: `cid-idp-selector-step-title ${theme === "light" ? "cid-idp-selector-step-title--light" : ""}`, "data-testid": "step-title", children: title }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectid-tools/idp-selector-react",
-  "version": "6.12.0",
+  "version": "6.12.1-alpha.2",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",
@@ -26,23 +26,23 @@
   "homepage": "https://github.com/connectid-tools/idp-selector-react",
   "devDependencies": {
     "@babel/preset-typescript": "^7.27.1",
-    "@types/node": "^22.17.1",
-    "@types/react": "^18.3.23",
+    "@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",
     "replace-in-file": "^8.3.0",
     "ts-add-js-extension": "^1.6.6",
-    "tsx": "^4.20.4",
+    "tsx": "^4.20.5",
     "typescript": "^5.9.2"
   },
   "dependencies": {
     "detectincognitojs": "^1.6.1",
     "react-responsive": "^10.0.1",
     "swr": "^2.3.6",
-    "vite": "^6.3.5"
+    "vite": "^7.1.3"
   }
 }