@thecb/components 7.10.1-beta.2 → 7.10.1-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.10.1-beta.2",
+  "version": "7.10.1-beta.4",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -9,6 +9,7 @@ import {
   ERROR_COLOR
 } from "../../../constants/colors";
 import { generateShadows } from "../../../util/generateShadows";
+import useScrollTo from "../../../util/useScrollTo";
 
 const TermsAndConditionsControlV2 = ({
   showCheckbox = true,
@@ -30,6 +31,13 @@ const TermsAndConditionsControlV2 = ({
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
 
+  const toggleTerms = termsOpen => {
+    toggleShowTerms(termsOpen);
+    if (termsOpen) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
+
   return (
     <Box
       padding={displayInline ? "0" : "1.5rem"}
@@ -64,7 +72,7 @@ const TermsAndConditionsControlV2 = ({
                   link={linkText}
                   terms={terms}
                   isOpen={showTerms}
-                  toggleOpen={toggleShowTerms}
+                  toggleOpen={toggleTerms}
                   linkVariant={modalVariant}
                   title={modalTitle}
                 />

package/src/util/useScrollTo.js

@@ -0,0 +1,22 @@
+/* 
+  Hook that takes an ID selector for an element on the screen
+  And optionally values for top position, left position, smooth behavior
+  Finds element on screen and scrolls it to the provided coordinates
+
+  (string, number, number, string, number) => undefined;
+*/
+
+const useScrollTo = (id, top = 0, left = 0, behavior = "auto", delay) => {
+  let scrollItem;
+  if (delay) {
+    setTimeout(() => {
+      scrollItem = document.getElementById(id);
+      scrollItem?.scrollTo({ top, left, behavior });
+    }, delay);
+  } else {
+    scrollItem = document.getElementById(id);
+    scrollItem?.scrollTo({ top, left, behavior });
+  }
+};
+
+export default useScrollTo;