@prosopo/procaptcha-react 1.0.2 → 2.0.1

package/dist/cjs/components/Button.cjs

@@ -30,8 +30,16 @@ const buttonStyleBase = {
   backgroundColor: "#ffffff",
   boxShadow: "rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px"
 };
-const Button = ({ themeColor, buttonType, text, onClick }) => {
-  const theme = React.useMemo(() => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme, [themeColor]);
+const Button = ({
+  themeColor,
+  buttonType,
+  text,
+  onClick
+}) => {
+  const theme = React.useMemo(
+    () => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme,
+    [themeColor]
+  );
   const [hover, setHover] = React.useState(false);
   const buttonStyle = React.useMemo(() => {
     const baseStyle = {
@@ -43,12 +51,11 @@ const Button = ({ themeColor, buttonType, text, onClick }) => {
         ...baseStyle,
         backgroundColor: hover ? theme.palette.grey[600] : "transparent"
       };
-    } else {
-      return {
-        ...baseStyle,
-        backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
-      };
     }
+    return {
+      ...baseStyle,
+      backgroundColor: hover ? theme.palette.primary.main : theme.palette.background.default
+    };
   }, [buttonType, hover, theme]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",

package/dist/cjs/components/CaptchaComponent.cjs

@@ -1,12 +1,12 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const CaptchaWidget = require("./CaptchaWidget.cjs");
-const React = require("react");
+const common = require("@prosopo/common");
 const util = require("@prosopo/util");
 const webComponents = require("@prosopo/web-components");
-const common = require("@prosopo/common");
-const Button = require("./Button.cjs");
+const React = require("react");
 const index = require("../util/index.cjs");
+const Button = require("./Button.cjs");
+const CaptchaWidget = require("./CaptchaWidget.cjs");
 const CaptchaComponent = ({
   challenge,
   index: index$1,
@@ -20,7 +20,10 @@ const CaptchaComponent = ({
   const { t } = common.useTranslation();
   const captcha = challenge.captchas ? util.at(challenge.captchas, index$1) : null;
   const solution = solutions ? util.at(solutions, index$1) : [];
-  const theme = React.useMemo(() => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme, [themeColor]);
+  const theme = React.useMemo(
+    () => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme,
+    [themeColor]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { children: "Loading..." }), children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -32,7 +35,12 @@ const CaptchaComponent = ({
         maxWidth: "500px",
         maxHeight: "100%",
         display: "flex",
-        flexDirection: "column"
+        flexDirection: "column",
+        border: "1px solid #dddddd",
+        boxShadow: "rgba(255, 255, 255, 0.2) 0px 0px 4px",
+        borderRadius: "4px",
+        padding: `${theme.spacing.unit}px`,
+        backgroundColor: theme.palette.background.default
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -44,47 +52,65 @@ const CaptchaComponent = ({
             minWidth: "300px"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 style: {
                   display: "flex",
                   alignItems: "center",
-                  width: "100%",
-                  backgroundColor: theme.palette.primary.main,
-                  padding: "24px 16px"
+                  width: "100%"
                 },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "p",
-                    {
-                      style: {
-                        color: "#ffffff",
-                        fontWeight: 700,
-                        lineHeight: 1.5
-                      },
-                      children: [
-                        t("WIDGET.SELECT_ALL"),
-                        ": "
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "p",
-                    {
-                      style: {
-                        color: "#ffffff",
-                        fontWeight: 700,
-                        textTransform: "capitalize",
-                        lineHeight: 1.5
-                      },
-                      children: `${util.at(challenge.captchas, index$1).captcha.target}`
-                    }
-                  )
-                ]
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      backgroundColor: theme.palette.primary.main,
+                      width: "100%"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          paddingLeft: `${theme.spacing.half}px`,
+                          paddingRight: `${theme.spacing.half}px`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "p",
+                            {
+                              style: {
+                                color: "#ffffff",
+                                fontWeight: 700,
+                                lineHeight: 1.5
+                              },
+                              children: [
+                                t("WIDGET.SELECT_ALL"),
+                                ":",
+                                " ",
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { textTransform: "capitalize" }, children: `${util.at(challenge.captchas, index$1).target}` })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "p",
+                            {
+                              style: {
+                                color: "#ffffff",
+                                fontWeight: 500,
+                                lineHeight: 0.8,
+                                fontSize: "0.8rem"
+                              },
+                              children: t("WIDGET.IF_NONE_CLICK_NEXT")
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { ...index({ dev: { cy: "captcha-" + index$1 } }), children: captcha && /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { ...index({ dev: { cy: `captcha-${index$1}` } }), children: captcha && /* @__PURE__ */ jsxRuntime.jsx(
               CaptchaWidget.CaptchaWidget,
               {
                 challenge: captcha,
@@ -109,7 +135,7 @@ const CaptchaComponent = ({
               "div",
               {
                 style: {
-                  padding: "8px 16px",
+                  padding: `0 ${theme.spacing}px`,
                   display: "flex",
                   width: "100%"
                 }
@@ -119,7 +145,7 @@ const CaptchaComponent = ({
               "div",
               {
                 style: {
-                  padding: "0 16px 16px",
+                  padding: `0 ${theme.spacing}px`,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "space-between",
@@ -143,7 +169,8 @@ const CaptchaComponent = ({
                       buttonType: "next",
                       text: index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
                       onClick: index$1 < challenge.captchas.length - 1 ? onNext : onSubmit,
-                      "aria-label": index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT")
+                      "aria-label": index$1 < challenge.captchas.length - 1 ? t("WIDGET.NEXT") : t("WIDGET.SUBMIT"),
+                      "data-cy": "button-next"
                     }
                   )
                 ]

package/dist/cjs/components/CaptchaWidget.cjs

@@ -6,14 +6,50 @@ const webComponents = require("@prosopo/web-components");
 const React = require("react");
 const getHash = (item) => {
   if (!item.hash) {
-    throw new common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", { context: { item } });
+    throw new common.ProsopoDatasetError("CAPTCHA.MISSING_ITEM_HASH", {
+      context: { item }
+    });
   }
   return item.hash;
 };
-const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
-  const items = challenge.captcha.items;
-  const theme = React.useMemo(() => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme, [themeColor]);
+const CaptchaWidget = ({
+  challenge,
+  solution,
+  onClick,
+  themeColor
+}) => {
+  const items = challenge.items;
+  const theme = React.useMemo(
+    () => themeColor === "light" ? webComponents.lightTheme : webComponents.darkTheme,
+    [themeColor]
+  );
   const isTouchDevice = "ontouchstart" in window;
+  const fullSpacing = `${theme.spacing.unit}px`;
+  const halfSpacing = `${theme.spacing.half}px`;
+  const paddingForImageColumns = {
+    0: {
+      paddingLeft: 0,
+      paddingRight: halfSpacing,
+      paddingTop: halfSpacing,
+      paddingBottom: halfSpacing
+    },
+    1: {
+      paddingLeft: halfSpacing,
+      paddingRight: halfSpacing,
+      paddingTop: halfSpacing,
+      paddingBottom: halfSpacing
+    },
+    2: {
+      paddingLeft: halfSpacing,
+      paddingRight: 0,
+      paddingTop: halfSpacing,
+      paddingBottom: halfSpacing
+    }
+  };
+  const paddingForImageRows = {
+    0: { paddingTop: fullSpacing },
+    2: { paddingBottom: fullSpacing }
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -30,118 +66,120 @@ const CaptchaWidget = ({ challenge, solution, onClick, themeColor }) => {
       },
       children: items.map((item, index) => {
         const hash = getHash(item);
-        return /* @__PURE__ */ jsxRuntime.jsx(
+        const imageStyle = {
+          ...paddingForImageColumns[index % 3],
+          ...paddingForImageRows[Math.floor(index / 3)],
+          // enable the items in the grid to grow in width to use up excess space
+          flexGrow: 1,
+          // make the width of each item 1/3rd of the width overall, i.e. 3 columns
+          flexBasis: "33.3333%",
+          // include the padding / margin / border in the width
+          boxSizing: "border-box"
+        };
+        console.log("imageStyle index ", index, imageStyle);
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: imageStyle, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             style: {
-              paddingTop: "4px",
-              paddingLeft: "4px",
-              // enable the items in the grid to grow in width to use up excess space
-              flexGrow: 1,
-              // make the width of each item 1/3rd of the width overall, i.e. 3 columns
-              flexBasis: "33.3333%",
-              // include the padding / margin / border in the width
-              boxSizing: "border-box"
+              cursor: "pointer",
+              height: "100%",
+              width: "100%",
+              border: 1,
+              borderStyle: "solid",
+              borderColor: theme.palette.grey[300]
             },
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: { cursor: "pointer", height: "100%", width: "100%" },
-                onClick: isTouchDevice ? void 0 : () => onClick(hash),
-                onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { border: 1, borderColor: theme.palette.grey[300] }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      style: {
-                        width: "100%",
-                        // image should be full width / height of the item
-                        backgroundColor: theme.palette.grey[300],
-                        // colour of the bands when letterboxing and image
-                        opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
-                        // iphone workaround
-                        display: "block",
-                        // removes whitespace below imgs
-                        objectFit: "contain",
-                        // contain the entire image in the img tag
-                        aspectRatio: "1/1",
-                        // force AR to be 1, letterboxing images with different aspect ratios
-                        height: "auto"
-                        // make the img tag responsive to its container
-                      },
-                      src: item.data,
-                      alt: `Captcha image ${index + 1}`
-                    }
-                  ) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
+            onClick: isTouchDevice ? void 0 : () => onClick(hash),
+            onTouchStart: isTouchDevice ? () => onClick(hash) : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  style: {
+                    width: "100%",
+                    // image should be full width / height of the item
+                    backgroundColor: theme.palette.grey[300],
+                    // colour of the bands when letterboxing and image
+                    opacity: solution.includes(hash) && isTouchDevice ? "50%" : "100%",
+                    // iphone workaround
+                    display: "block",
+                    // removes whitespace below imgs
+                    objectFit: "contain",
+                    // contain the entire image in the img tag
+                    aspectRatio: "1/1",
+                    // force AR to be 1, letterboxing images with different aspect ratios
+                    height: "auto"
+                    // make the img tag responsive to its container
+                  },
+                  src: item.data,
+                  alt: `Captcha image ${index + 1}`
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    // relative to where the element _should_ be positioned
+                    position: "relative",
+                    // make the overlay the full height/width of an item
+                    width: "100%",
+                    height: "100%",
+                    // shift it up 100% to overlay the item element
+                    top: "-100%",
+                    visibility: solution.includes(hash) ? "visible" : "hidden",
+                    // transition on opacity upon (de)selection
+                    transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+                    opacity: 1
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
                       style: {
-                        // relative to where the element _should_ be positioned
-                        position: "relative",
-                        // make the overlay the full height/width of an item
-                        width: "100%",
+                        // make the overlay absolute positioned compare to its container
+                        position: "absolute",
+                        // spread across 100% width/height of the item box
+                        top: 0,
+                        left: 0,
+                        bottom: 0,
+                        right: 0,
                         height: "100%",
-                        // shift it up 100% to overlay the item element
-                        top: "-100%",
-                        visibility: solution.includes(hash) ? "visible" : "hidden",
-                        // transition on opacity upon (de)selection
-                        transition: "opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                        opacity: 1
+                        width: "100%",
+                        // display overlays in center
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        // make bg half opacity, i.e. shadowing the item's img
+                        backgroundColor: "rgba(0,0,0,0.5)"
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
+                        "svg",
                         {
                           style: {
-                            // make the overlay absolute positioned compare to its container
-                            position: "absolute",
-                            // spread across 100% width/height of the item box
-                            top: 0,
-                            left: 0,
-                            bottom: 0,
-                            right: 0,
-                            height: "100%",
-                            width: "100%",
-                            // display overlays in center
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            // make bg half opacity, i.e. shadowing the item's img
-                            backgroundColor: "rgba(0,0,0,0.5)"
+                            backgroundColor: "transparent",
+                            // img must be displayed as block otherwise gets a bottom whitespace border
+                            display: "block",
+                            // how big the overlay icon is
+                            width: "35%",
+                            height: "35%",
+                            transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+                            userSelect: "none",
+                            fill: "currentcolor"
                           },
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "svg",
-                            {
-                              style: {
-                                backgroundColor: "transparent",
-                                // img must be displayed as block otherwise gets a bottom whitespace border
-                                display: "block",
-                                // how big the overlay icon is
-                                width: "35%",
-                                height: "35%",
-                                transition: "fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                                userSelect: "none",
-                                fill: "currentcolor"
-                              },
-                              focusable: "false",
-                              color: "#fff",
-                              "aria-hidden": "true",
-                              viewBox: "0 0 24 24",
-                              "data-testid": "CheckIcon",
-                              "aria-label": "Check icon",
-                              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
-                            }
-                          )
+                          focusable: "false",
+                          color: "#fff",
+                          "aria-hidden": "true",
+                          viewBox: "0 0 24 24",
+                          "data-testid": "CheckIcon",
+                          "aria-label": "Check icon",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
                         }
                       )
                     }
                   )
-                ]
-              }
-            )
-          },
-          index
-        );
+                }
+              )
+            ]
+          }
+        ) }, item.hash);
       })
     }
   );

package/dist/cjs/components/Modal.cjs

@@ -1,40 +1,42 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
-const ModalComponent = React.memo((props, nextProps) => {
-  const { show, children } = props;
-  const display = show ? "block" : "none";
-  const ModalOuterDivCss = {
-    position: "fixed",
-    zIndex: 2147483646,
-    inset: 0,
-    display
-  };
-  const ModalBackgroundCSS = {
-    position: "fixed",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    right: 0,
-    bottom: 0,
-    top: 0,
-    left: 0,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    zIndex: -1
-  };
-  const ModalInnerDivCSS = {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: "400px",
-    backgroundColor: "rgb(255, 255, 255)",
-    border: "none",
-    boxShadow: "rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px,"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modalOuter", style: ModalOuterDivCss, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalBackground", style: ModalBackgroundCSS }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalInner", style: ModalInnerDivCSS, children })
-  ] });
-});
+const ModalComponent = React.memo(
+  (props, nextProps) => {
+    const { show, children } = props;
+    const display = show ? "block" : "none";
+    const ModalOuterDivCss = {
+      position: "fixed",
+      zIndex: 2147483646,
+      inset: 0,
+      display
+    };
+    const ModalBackgroundCSS = {
+      position: "fixed",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      right: 0,
+      bottom: 0,
+      top: 0,
+      left: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      zIndex: -1
+    };
+    const ModalInnerDivCSS = {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "400px",
+      backgroundColor: "transparent",
+      border: "none",
+      boxShadow: "rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px,"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "modalOuter", style: ModalOuterDivCss, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalBackground", style: ModalBackgroundCSS }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "modalInner", style: ModalInnerDivCSS, children })
+    ] });
+  }
+);
 module.exports = ModalComponent;

package/dist/cjs/components/Procaptcha.cjs

@@ -1,10 +1,8 @@
 "use strict";
 const jsxRuntime = require("@emotion/react/jsx-runtime");
-const React = require("react");
 const webComponents = require("@prosopo/web-components");
+const React = require("react");
 const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
-const ProcaptchaWidget = React.lazy(
-  async () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./ProcaptchaWidget.cjs")))
-);
+const ProcaptchaWidget = React.lazy(async () => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("./ProcaptchaWidget.cjs"))));
 const Procaptcha = (props) => /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(webComponents.ProcaptchaPlaceholder, { darkMode: props.config.theme }), children: /* @__PURE__ */ jsxRuntime.jsx(ProcaptchaWidget, { config: props.config, callbacks: props.callbacks }) });
 module.exports = Procaptcha;