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

package/FullProcess.css

@@ -5,22 +5,8 @@
   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 {
-  border: 1px solid var(--charcoal10);
-}
-.cid-idp-selector-full-process.close.light {
-  border: 1px solid var(--charcoal50);
-}
-
 .cid-idp-selector-full-process--light {
-  border: 1px solid var(--charcoal50);
+  border: 1px solid var(--charcoal10);
   background-color: transparent;
 }
 .cid-idp-selector-full-process-title {
@@ -49,87 +35,6 @@
 .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 +47,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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useState } 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,14 @@ import "./FullProcess.css";
 // . text
 export const FullProcess = ({ collapsible = false }) => {
     const theme = useContext(ThemeContext);
-    const shouldOpen = collapsible ? false : true;
-    const [open, setOpen] = useState(shouldOpen);
+    const [open, setOpen] = useState(!collapsible);
     const handleToggle = () => {
         if (!collapsible)
             return;
         setOpen(!open);
     };
-    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" })] })] }));
+    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, {})] }))] }));
 };

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,2 @@
+import './FullProcessHorizontalList.css';
+export declare const FullProcessHorizontalList: React.FC;

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 = () => {
+    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" })] })] }));
+};

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,2 @@
+import './FullProcessVerticalList.css';
+export declare const FullProcessVerticalList: React.FC;

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 = () => {
+    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" })] })] }));
+};

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.1",
   "description": "React component for IDP Selector.",
   "main": "index.js",
   "type": "module",
@@ -26,8 +26,8 @@
   "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.17.2",
+    "@types/react": "^18.3.24",
     "@types/react-dom": "^18.3.7",
     "cypress": "^14.5.4",
     "jest-environment-jsdom": "^29.7.0",
@@ -36,7 +36,7 @@
     "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": {