gatsby-core-theme 18.0.7 → 18.0.9

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [18.0.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.8...v18.0.9) (2023-02-06)
+
+
+### Code Refactoring
+
+* remove --scroll-to-top-bottom-offset css var ([7231d0d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7231d0da6ff48e0c0df956470b68ec8c129a1573))
+* update sticky scroll hook ([d813ef8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d813ef894b1c7f517d7e81b2062ffe360567f61b))
+
+
+* Merge branch 'tm-3097-update-general-scroll-hook' into 'master' ([150188a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/150188a0b0802363bdb773efe7454b79992b365c))
+
+## [18.0.8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.7...v18.0.8) (2023-02-06)
+
+
+### Bug Fixes
+
+* add validation for bonus ([476287e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/476287eb552f51e3ce1aa6d433479017ad71e79e))
+
+
+* Merge branch 'validation-bonus' into 'master' ([cf8b25b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cf8b25b5efa4f5f81eb123543116f42b1ea7fe77))
+
 ## [18.0.7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.6...v18.0.7) (2023-02-02)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "18.0.7",
+  "version": "18.0.9",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/molecules/operator-banner/index.js

@@ -21,14 +21,14 @@ export default function OperatorBanner({
   pageTemplate,
 }) {
   const prettyLink = prettyTracker(operator, 'main', false, pageTemplate);
-  const [show, setShow] = useState(false);
+  const [show, setShow] = useState(!sticky);
   const [closed, setClosed] = useState(false);
   const { cookieAccepted, setBannerActive } = useContext(Context) || {};
 
   const status = operator?.status;
   const isPlaceholder = status === 'coming_soon';
 
-  isSticky(stickyOffset, setShow);
+  sticky && isSticky(stickyOffset, setShow);
   useEffect(() => {
     // eslint-disable-next-line no-unused-expressions
     sticky && setBannerActive(show);
@@ -37,7 +37,6 @@ export default function OperatorBanner({
   const clickHandler = () => {
     setShow(false);
     setClosed(true);
-    setBannerActive(false);
   };
 
   return (

package/src/components/molecules/sticky/index.js

@@ -1,6 +1,5 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import useIsMobile from '~hooks/useIsMobile';
 import isSticky from '~hooks/stickyOnScroll';
 import styles from './sticky.module.scss';
 
@@ -11,24 +10,8 @@ const Sticky = ({
   className = '',
   children,
 }) => {
-  const isMobile = useIsMobile();
   const sticky = isSticky();
 
-  useEffect(() => {
-    if (position === 'bottom') {
-      document?.documentElement.style.setProperty(
-        '--scroll-to-top-bottom-offset',
-        isMobile ? '18rem' : '11rem'
-      );
-    }
-
-    return () => {
-      if (position === 'bottom' && document.getElementsByClassName(styles.sticky).length === 2) {
-        document?.documentElement.style.removeProperty('--scroll-to-top-bottom-offset');
-      }
-    };
-  });
-
   return (
     <div
       className={`${styles.sticky} ${position === 'top' && styles.top} ${

package/src/components/organisms/anchor/index.js

@@ -17,6 +17,7 @@ function Anchor({
   module: { items },
   headerOffset = 60,
   isFixed = true,
+  stickyOffset = 0,
   icon = null,
   showTitle = true,
   heightOfAnchor = 60,
@@ -108,7 +109,7 @@ function Anchor({
     }
   };
 
-  const sticky = isFixed && isSticky(anchorContainerRef?.current?.offsetTop, setActiveAnchor);
+  const sticky = isFixed && isSticky(stickyOffset, setActiveAnchor, anchorContainerRef);
   return (
     <div className={styles.containerAnchor} ref={anchorContainerRef}>
       {showTitle ? (

package/src/helpers/processor/common.js

@@ -69,7 +69,7 @@ export function clonePageForCards(item, style) {
 
   const object = pick(item, pickPageKeys);
   object.relation = pick(item.relation, pickRelationKeys[item.type]);
-  if (item.type === 'operator' && style !== 'comparison_table') {
+  if (item.type === 'operator' && style !== 'comparison_table' && object.relation.bonus) {
     delete object.relation.bonus.deposit_methods;
   }
 

package/src/hooks/stickyOnScroll/index.js

@@ -3,23 +3,25 @@
 import { useEffect, useState } from 'react';
 import { debounce } from '~helpers/scroll';
 
-export default function StickyOnScroll(offset = 0, callback) {
+export default function StickyOnScroll(stickyOffset = 0, callback, elementRef) {
   const [sticky, setSticky] = useState(false);
 
   const handler = debounce(() => {
-    if (typeof window !== 'undefined' && typeof offset === 'number') {
+    if (typeof window !== 'undefined' && typeof stickyOffset === 'number') {
+      const offset =
+        elementRef?.current?.getBoundingClientRect()?.top + window.pageYOffset || 0 + stickyOffset;
       const isSticky = window.pageYOffset > offset;
       sticky !== isSticky && setSticky(isSticky);
       callback && callback(isSticky);
     }
-  });
+  }, 200);
 
   useEffect(() => {
     window.addEventListener('scroll', handler);
     return () => {
       window.removeEventListener('scroll', handler);
     };
-  }, [sticky, offset]);
+  }, [sticky, stickyOffset]);
 
   return sticky;
 }

package/src/styles/utils/variables/_main.scss

@@ -25,6 +25,7 @@
   --body-background-color: var(--color-5);
 
   // Spacing and sizes - site
+  --nav-height: 6rem;
   --module-spacing: 2rem;
   --side-container: 30rem;
   --main-container-max: 96rem;
@@ -43,7 +44,7 @@
   --h5-mobile-size: 1.6rem;
   --h6-mobile-size: 1.5rem;
 
-    // Line heights - site
+  // Line heights - site
   --h1-line-height: 4.2rem;
   --h2-line-height: 3.4rem;
   --h3-line-height: 3.2rem;
@@ -101,8 +102,6 @@
   --cookie-consent-text-color: var(--color-18);
   --cookie-consent-text-size: 1.4rem;
 
-  --scroll-to-top-bottom-offset: 2rem;
-
   --toplist-ranking-first-color: var(--color-14);
   --toplist-ranking-second-color: var(--color-8);
   --toplist-ranking-third-color: var(--color-15);