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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.10.1-beta.3",
+  "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/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -4,7 +4,6 @@ import Text from "../../atoms/text";
 import { Box } from "../../atoms/layouts";
 import { fallbackValues } from "./TermsAndConditionsModal.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import useScrollTo from "../../../util/useScrollTo";
 
 const TermsAndConditionsModal = ({
   link,
@@ -21,10 +20,7 @@ const TermsAndConditionsModal = ({
   <Modal
     modalOpen={isOpen}
     hideModal={() => toggleOpen(false)}
-    showModal={() => {
-      toggleOpen(true);
-      useScrollTo("terms-body-text", 0, 0, false);
-    }}
+    showModal={() => toggleOpen(true)}
     modalHeaderText={title}
     modalBodyText={
       <Box

package/src/util/useScrollTo.js

@@ -3,12 +3,20 @@
   And optionally values for top position, left position, smooth behavior
   Finds element on screen and scrolls it to the provided coordinates
 
-  (string, number, number, boolean) => undefined;
+  (string, number, number, string, number) => undefined;
 */
 
-const useScrollTo = (id, top = 0, left = 0, smooth = false) => {
-  const scrollItem = document.getElementById(id);
-  scrollItem?.scrollTo({ top, left, smooth });
+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;