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

package/package.json

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

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -4,6 +4,7 @@ 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,
@@ -20,7 +21,10 @@ const TermsAndConditionsModal = ({
   <Modal
     modalOpen={isOpen}
     hideModal={() => toggleOpen(false)}
-    showModal={() => toggleOpen(true)}
+    showModal={() => {
+      toggleOpen(true);
+      useScrollTo("terms-body-text", 0, 0, false);
+    }}
     modalHeaderText={title}
     modalBodyText={
       <Box

package/src/util/useScrollTo.js

@@ -0,0 +1,14 @@
+/* 
+  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, boolean) => undefined;
+*/
+
+const useScrollTo = (id, top = 0, left = 0, smooth = false) => {
+  const scrollItem = document.getElementById(id);
+  scrollItem?.scrollTo({ top, left, smooth });
+};
+
+export default useScrollTo;