gatsby-core-theme 30.0.66 → 30.0.67

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [30.0.67](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.66...v30.0.67) (2024-01-31)
+
+
+### Bug Fixes
+
+* add validation ([9fb7327](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9fb7327f8db264823ce66fadb205cbc7b71496f7))
+* add validation ([23b06e6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/23b06e6bef4ce0bb8baaebd926ed93da6cf296d9))
+* anchor ([b83b456](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b83b456efdc7418322642043e31c21f60ddaa57d))
+* anchor module ([0e41993](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0e41993d7c280aa3135d09f6038faf96cfec5267))
+* fix tests ([6315ec5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6315ec564073a949c6583f400b44b02bdd8aa29a))
+
+
+* Merge branch 'tm-3976-anchor-module' into 'master' ([14e5e79](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/14e5e7979fb68d019d0453418c8212f58a459357))
+
 ## [30.0.66](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.65...v30.0.66) (2024-01-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.66",
+  "version": "30.0.67",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/pretty-link/index.js

@@ -27,11 +27,11 @@ const PrettyLink = ({
   return (
     <a
       href={prettyLink || '#'}
-      title={operator.name}
+      title={operator?.name}
       className={className}
       target="_blank"
       rel="noreferrer sponsored nofollow"
-      aria-label={`${operator.name} Link`}
+      aria-label={`${operator?.name} Link`}
       onClick={onCTAClick}
     >
       {children}

package/src/components/molecules/bonus/template-one/index.js

@@ -44,7 +44,7 @@ export default function Bonus({
             <LazyImage alt={operator?.name} src={imagePrettyUrl(logo)} height={120} width={100} />
             <div className={styles.details}>
               {name && <span>{name}</span>}
-              {(operator.rating || bonus?.rating) && (
+              {(operator?.rating || bonus?.rating) && (
                 <Rating rating={operator.rating || bonus?.rating} showDecimal />
               )}
             </div>

package/src/components/molecules/bonus/template-two/index.js

@@ -70,8 +70,8 @@ export default function TemplateOne({
             />
             <div className={styles.details}>
               {name && <span>{name}</span>}
-              {(operator.rating || bonus?.rating) && (
-                <Rating rating={operator.rating || bonus?.rating} showDecimal />
+              {(operator?.rating || bonus?.rating) && (
+                <Rating rating={operator?.rating || bonus?.rating} showDecimal />
               )}
             </div>
           </PrettyLink>

package/src/components/molecules/content/content.module.scss

@@ -26,6 +26,16 @@
   padding: var(--padding-conent) !important;
   border: var(--border-content-module);
   background: var(--background-content-module);
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    scroll-margin-top: calc(var(--nav-height-mobile, 60) + var(--nav-anchor-height, 40));
+    @include min(laptop){
+      scroll-margin-top: calc(var(--nav-height-desktop, 80) + var(--nav-anchor-height, 40));
+    }
+  }
 
   @include min(tablet) {
     margin: var(--margin-content-min-tablet) !important;

package/src/components/molecules/module/module.module.scss

@@ -1,6 +1,20 @@
 .module {
   background-color: var(--module-background-color);
   padding: 4.8rem 0;
+  scroll-margin-top: calc(var(--nav-height-mobile, 60) + var(--nav-anchor-height, 40));
+  @include min(laptop){
+    scroll-margin-top: calc(var(--nav-height-desktop, 80) + var(--nav-anchor-height, 40));
+  }
+}
+
+.module,
+.module h1,
+.module h2,
+.module h3 {
+  scroll-margin-top: calc(var(--nav-height-mobile) + var(--nav-anchor-height));
+  @include min(laptop) {
+    scroll-margin-top: calc(var(--nav-height-desktop) + var(--nav-anchor-height));
+  }
 }
 
 .anchor-module {

package/src/components/organisms/anchor/template-one/anchor.module.scss

@@ -22,6 +22,8 @@
   left: 0;
   right: 0;
   top: var(--nav-height);
+  @include flex-direction(row);
+  @include flex-align(center, center);
 
   &.usingExclOperator {
     top: calc(var(--nav-height) + var(--exc-operator-height));
@@ -37,11 +39,11 @@
 
 .defaultConatiner {
   position: relative;
+  @include flex-direction(row);
 }
 
 .anchor {
   max-width: var(--main-container-max);
-  margin: 0 auto;
   @include flex-direction(row);
 
   &::-webkit-scrollbar {
@@ -98,13 +100,6 @@
   }
 }
 
-.storyDivs {
-  width: 100%;
-  display: block;
-  margin: 3rem 0;
-  padding: 2rem;
-}
-
 .anchorTitle {
   font-size: var(--h2-size);
   font-weight: var(--h2-font-weight);
@@ -119,6 +114,7 @@
   @include flex-align(center, center);
   display: none;
   z-index: 1;
+  padding: 0rem 1rem;
 
   @include custom-min(960) {
     display: flex;
@@ -139,169 +135,4 @@
     color: #515156;
     background-color: #f4f4f4;
   }
-}
-
-.staticShowButtons {
-  display: flex;
-
-  >button:first-child {
-    padding-right: 1.6rem;
-  }
-
-  >button:last-of-type {
-    padding-left: 1.6rem;
-  }
-}
-
-.stickyShowButtons {
-  >button:first-child {
-    position: absolute;
-    top: 0.6rem;
-    padding-right: 1.6rem;
-    height: 4rem;
-
-    @include custom-min(960) {
-      left: calc(50% - (var(--anchor-max-width, --main-container-max) / 2) - 2.6rem);
-      transform: translateX(50%);
-    }
-  }
-
-  >button:last-of-type {
-    position: absolute;
-    top: 0.6rem;
-    height: 4rem;
-    padding-left: 1.6rem;
-
-    @include custom-min(960) {
-      right: calc(50% - (var(--anchor-max-width, --main-container-max) / 2) - 2.6rem);
-      transform: translateX(-50%);
-    }
-  }
-
-  >ul {
-    >li:first-child {
-      margin-left: 4.8rem;
-    }
-
-    >li:last-child {
-      margin-right: 4.8rem;
-    }
-  }
-}
-
-.containerAnchorFullWidth {
-  max-width: 100% !important;
-  padding: 0 !important;
-}
-
-.titleFullWidth {
-  padding: 0 1.6rem;
-  max-width: var(--anchor-max-width, --main-container-max);
-  margin: 0 auto;
-
-  @include min(tablet) {
-    padding: 0 2.4rem;
-  }
-}
-
-.staticFullScrollWidth {
-  min-width: 100vw;
-  display: inline-grid;
-
-  @include min(tablet) {
-    max-width: 100vw;
-  }
-
-  &:not(.staticShowButtons) {
-    &::before {
-      display: none;
-    }
-
-    >ul {
-      >li:first-child {
-        padding-left: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2) !important;
-      }
-    }
-  }
-
-  &::before,
-  &::after {
-    content: '';
-    display: none;
-    position: absolute;
-    top: 0;
-    background-color: var(--body-background-color, white);
-    height: 4.5rem;
-    z-index: 1;
-
-    @include custom-min(960) {
-      display: block;
-    }
-
-    @include custom-min-max(960, 1100) {
-      width: 2.4rem;
-    }
-
-    width: calc((100% - var(--anchor-max-width, --main-container-max)) / 2 + 6.8rem);
-  }
-
-  &::before {
-    left: 0;
-  }
-
-  &::after {
-    right: 0;
-  }
-
-  >button {
-    position: absolute;
-    z-index: 2;
-    height: 4.5rem;
-    padding-right: 1.6rem;
-    left: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2 + 2.4rem);
-
-    &:last-of-type {
-      left: unset;
-      right: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2 + 2.4rem);
-    }
-
-    @include custom-min-max(960, 1100) {
-      left: 2.4rem;
-
-      &:last-of-type {
-        right: 2.4rem;
-      }
-    }
-  }
-
-  >ul {
-    max-width: unset !important;
-    margin: 0 !important;
-    padding: 0 1.6rem;
-
-    &::-webkit-scrollbar {
-      display: block !important;
-    }
-
-    >li:first-child {
-      padding-left: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2 + 5.8rem) !important;
-
-      @include custom-min-max(960, 1100) {
-        padding-left: 7.2rem !important;
-      }
-
-    }
-
-    >li:last-child {
-      padding-right: calc((100vw - var(--anchor-max-width, --main-container-max)) / 2 + 5.8rem) !important;
-
-      @include custom-min-max(960, 1100) {
-        padding-right: 7.2rem !important;
-      }
-    }
-  }
-}
-
-.displayNone {
-  visibility: hidden !important;
 }

package/src/components/organisms/anchor/template-one/anchor.stories.js

@@ -92,7 +92,13 @@ const sections = [
 const Template = (args) => (
   <>
     <Navigation {...navigationData} />
-    <main style={{ marginTop: 'var(--nav-height, 8rem)', '--anchor-max-width': `${args?.width}` }}>
+    <main
+      style={{
+        marginTop: 'var(--nav-height, 8rem)',
+        '--anchor-max-width': `${args?.width}`,
+        alignItems: 'center',
+      }}
+    >
       <Anchor {...args} />
       {sections?.map((sec) => (
         <div id={sec}>
@@ -132,7 +138,7 @@ Default.args = {
     ],
   },
   fullScrollWidth: false,
-  isShowButtons: false,
+  setShowButtons: false,
   sliderGap: 10,
   headerOffset: 20,
 };
@@ -157,32 +163,7 @@ FullWidth.args = {
     ],
   },
   fullScrollWidth: true,
-  isShowButtons: true,
-  sliderGap: 10,
-  headerOffset: 80,
-};
-
-export const Buttons = Template.bind({});
-Buttons.args = {
-  width: '100%',
-  module: {
-    items: [
-      { label: 'section-one' },
-      { label: 'section-two' },
-      { label: 'section-three' },
-      { label: 'section-four' },
-      { label: 'section-five' },
-      { label: 'section-six' },
-      { label: 'section-seven' },
-      { label: 'section-eight' },
-      { label: 'section-nine' },
-      { label: 'section-ten' },
-      { label: 'section-eleven' },
-      { label: 'section-twelf' },
-    ],
-  },
-  fullScrollWidth: false,
-  isShowButtons: true,
+  setShowButtons: true,
   sliderGap: 10,
   headerOffset: 80,
 };

package/src/components/organisms/anchor/template-one/anchor.test.js

@@ -30,7 +30,6 @@ describe('Anchor Component', () => {
     expect(getByText('label-1')).toBeTruthy();
     fireEvent.mouseDown(getByText('label-1'));
     fireEvent.click(getByText('label-1'));
-    expect(scrollToSpy).toHaveBeenCalled();
   });
 });
 afterEach(() => {

package/src/components/organisms/anchor/template-one/index.js

@@ -3,7 +3,7 @@
 /* eslint-disable no-unused-expressions */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useRef, useContext, useState, useEffect } from 'react';
+import React, { useRef, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { IoIosArrowBack } from '@react-icons/all-files/io/IoIosArrowBack';
 import { IoIosArrowForward } from '@react-icons/all-files/io/IoIosArrowForward';
@@ -17,7 +17,7 @@ import styles from './anchor.module.scss';
 
 function Anchor({
   module: { items },
-  headerOffset = 60,
+  headerOffset = 80,
   isFixed = true,
   stickyOffset = 0,
   icon = null,
@@ -26,27 +26,30 @@ function Anchor({
   offset = 10,
   exclOperator = false,
   isScrollable = true,
-  isShowButtons = false,
+  minCharactersForButtons = 86,
+  setShowButtons = true,
   buttonScroll = 200,
   leftButtonIcon = <IoIosArrowBack />,
   rightButtonIcon = <IoIosArrowForward />,
-  fullScrollWidth = false,
 }) {
   const [scrollX, setScrollX] = useState(0);
   const [scrollEnd, setScrollEnd] = useState(false);
-  const [showButtons, setShowButtons] = useState(false);
-  const [loading, setLoading] = useState(!!isShowButtons);
 
   const itemsRef = useRef([]);
   const anchorContainerRef = useRef(null);
   const anchorListRef = useRef(null);
   const progressBar = useRef(null);
   const { translations } = useContext(Context) || {};
-  const anchorList = items.map((anchor) => ({
-    id: `${anchor.label && removeSymbols(anchorLink(anchor?.label?.toLowerCase().trim()))}`,
-    label: anchor.label,
-    slug: `${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`,
-  }));
+  let numberOfCharacters = 0;
+  const anchorList = items.map((anchor) => {
+    numberOfCharacters += anchor?.label?.length;
+    return {
+      id: `${anchor.label && removeSymbols(anchorLink(anchor?.label?.toLowerCase().trim()))}`,
+      label: anchor.label,
+      slug: `${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`,
+    };
+  });
+  const showButtons = numberOfCharacters > minCharactersForButtons && setShowButtons;
 
   const updateButtons = (shift) => {
     setScrollEnd(
@@ -74,36 +77,10 @@ function Anchor({
     setScrollX(scrollLeft);
   };
 
-  useEffect(() => {
-    if (isShowButtons) {
-      setShowButtons(anchorListRef.current.scrollWidth > anchorListRef.current.offsetWidth);
-      setLoading(false);
-    }
-  }, []);
-
   function compact(array) {
     return array?.filter(Boolean);
   }
 
-  const handleClick = (event) => {
-    event.preventDefault();
-    const scrollToElementId = event.currentTarget.getAttribute('href').replace('#', '');
-
-    const targetEl = document.getElementById(scrollToElementId);
-
-    if (targetEl) {
-      const offsetPosition = targetEl.offsetTop - headerOffset;
-      window.scrollTo({
-        top: isFixed ? offsetPosition - heightOfAnchor : offsetPosition,
-      });
-    }
-  };
-
-  function getWindowDimensions() {
-    const { innerWidth: width } = window;
-    return width;
-  }
-
   const setActiveAnchor = () => {
     const { innerHeight, scrollY } = window;
 
@@ -144,12 +121,8 @@ function Anchor({
       const elementOffsetLeft = activeElement.offsetLeft;
 
       if (elementOffsetLeft > anchorContainerRef.current.offsetWidth - elementOffsetWidth) {
-        if (getWindowDimensions() > 960) {
-          anchorListRef.current.scrollLeft =
-            elementOffsetWidth + elementOffsetLeft + 5 - anchorContainerRef.current.offsetWidth;
-        } else {
-          anchorListRef.current.scrollLeft = elementOffsetLeft - 5;
-        }
+        anchorListRef.current.scrollLeft =
+          elementOffsetWidth + elementOffsetLeft + 5 - anchorContainerRef.current.offsetWidth;
       } else {
         anchorListRef.current.scrollLeft = 0;
       }
@@ -168,7 +141,6 @@ function Anchor({
         draggable="false"
         // eslint-disable-next-line no-return-assign
         ref={(el) => (itemsRef.current[index] = el)}
-        onClick={handleClick}
         href={`#${item?.id && item.id}`}
       >
         {translate(translations, item.slug, item.label)}
@@ -178,69 +150,51 @@ function Anchor({
   ));
 
   return (
-    <div
-      className={`${styles.containerAnchor || ''} ${
-        (fullScrollWidth && !sticky && styles.containerAnchorFullWidth) || ''
-      }`}
-      ref={anchorContainerRef}
-    >
-      <>
-        {showTitle ? (
-          <div
-            className={`${styles.anchorTitle || ''} ${fullScrollWidth && styles.titleFullWidth}`}
+    <div className={styles.containerAnchor || ''} ref={anchorContainerRef}>
+      {showTitle && (
+        <div className={`${styles.anchorTitle || ''}`}>
+          <span>{translate(translations, 'anchor_title', 'Table of Contents')}</span>
+        </div>
+      )}
+
+      <div
+        className={`${sticky ? styles.stickyContainer || '' : styles.defaultConatiner || ''} 
+                    ${exclOperator ? styles.usingExclOperator || '' : ''}`}
+      >
+        {showButtons && (
+          <button
+            className={`${styles.buttLeft} ${scrollX <= 0 ? styles.disabled : ''}`}
+            onClick={() => scroll(-buttonScroll)}
+            type="button"
           >
-            <span>{translate(translations, 'anchor_title', 'Table of Contents')}</span>
-          </div>
-        ) : null}
-        <div
-          className={`${sticky ? styles.stickyContainer || '' : styles.defaultConatiner || ''} ${
-            showButtons ? (sticky ? styles.stickyShowButtons : styles.staticShowButtons) : ''
-          } 
-        ${
-          fullScrollWidth
-            ? sticky
-              ? styles.stickyFullScrollWidth
-              : styles.staticFullScrollWidth
-            : ''
-        }
-        ${exclOperator ? styles.usingExclOperator || '' : ''}`}
+            {leftButtonIcon}
+          </button>
+        )}
+
+        <ScollX
+          refTag={anchorListRef}
+          scroll={isScrollable}
+          stopScrolling={() => onStopScrolling()}
+          onScroll={onScroll}
+          leftPosition={scrollX}
         >
-          {showButtons && (
-            <button
-              className={`${styles.buttLeft} ${scrollX <= 0 ? styles.disabled : ''}`}
-              onClick={() => scroll(-buttonScroll)}
-              type="button"
-            >
-              {leftButtonIcon}
-            </button>
-          )}
-          <ScollX
-            refTag={anchorListRef}
-            scroll={isScrollable}
-            stopScrolling={() => onStopScrolling()}
-            onScroll={onScroll}
-            leftPosition={scrollX}
+          <ul ref={anchorListRef} className={`${styles.anchor || ''}`}>
+            {anchorItems}
+          </ul>
+        </ScollX>
+
+        {showButtons && (
+          <button
+            className={`${styles.buttRight} ${!scrollEnd ? '' : styles.disabled}`}
+            onClick={() => scroll(buttonScroll)}
+            type="button"
           >
-            <ul
-              ref={anchorListRef}
-              className={`${styles.anchor || ''} ${loading && styles.displayNone}`}
-            >
-              {anchorItems}
-            </ul>
-          </ScollX>
-          {showButtons && (
-            <button
-              className={`${styles.buttRight} ${!scrollEnd ? '' : styles.disabled}`}
-              onClick={() => scroll(buttonScroll)}
-              type="button"
-            >
-              {rightButtonIcon}
-            </button>
-          )}
+            {rightButtonIcon}
+          </button>
+        )}
+      </div>
 
-          {sticky && <div ref={progressBar} className={styles.progressBar || ''} />}
-        </div>
-      </>
+      {sticky && <div ref={progressBar} className={styles.progressBar || ''} />}
     </div>
   );
 }
@@ -263,11 +217,11 @@ Anchor.propTypes = {
   offset: PropTypes.number,
   isScrollable: PropTypes.bool,
   stickyOffset: PropTypes.number,
-  isShowButtons: PropTypes.bool,
   buttonScroll: PropTypes.number,
   leftButtonIcon: PropTypes.shape({}),
   rightButtonIcon: PropTypes.shape({}),
-  fullScrollWidth: PropTypes.bool,
+  minCharactersForButtons: PropTypes.number,
+  setShowButtons: PropTypes.bool,
 };
 
 export default Anchor;

package/src/components/organisms/anchor/template-two/index.js

@@ -12,13 +12,7 @@ import { anchorLink, removeSymbols } from '~helpers/strings';
 import { Context } from '~context/MainProvider';
 import styles from './template-two.module.scss';
 
-function Anchor({
-  module: { items },
-  headerOffset = 60,
-  icon = null,
-  showTitle = true,
-  exclOperator = false,
-}) {
+function Anchor({ module: { items }, icon = null, showTitle = true, exclOperator = false }) {
   const itemsRef = useRef([]);
   const anchorContainerRef = useRef(null);
   const anchorListRef = useRef(null);
@@ -29,20 +23,6 @@ function Anchor({
     slug: `${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`,
   }));
 
-  const handleClick = (event) => {
-    event.preventDefault();
-    const scrollToElementId = event.currentTarget.getAttribute('href').replace('#', '');
-
-    const targetEl = document.getElementById(scrollToElementId);
-
-    if (targetEl) {
-      const offsetPosition = targetEl.offsetTop - headerOffset;
-      window.scrollTo({
-        top: offsetPosition,
-      });
-    }
-  };
-
   return (
     <div className={styles.containerAnchor || ''} ref={anchorContainerRef}>
       {showTitle ? (
@@ -71,7 +51,6 @@ function Anchor({
                   draggable="false"
                   // eslint-disable-next-line no-return-assign
                   ref={(el) => (itemsRef.current[index] = el)}
-                  onClick={handleClick}
                   href={`#${item?.id && item.id}`}
                 >
                   {translate(translations, item.slug, item.label)}

package/src/components/organisms/anchor/template-two/template-two.test.js

@@ -30,7 +30,6 @@ describe('Anchor Component', () => {
     expect(getByText('label-1')).toBeTruthy();
     fireEvent.mouseDown(getByText('label-1'));
     fireEvent.click(getByText('label-1'));
-    expect(scrollToSpy).toHaveBeenCalled();
   });
 });
 afterEach(() => {

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

@@ -28,6 +28,9 @@
 
   // Spacing and sizes - site
   --nav-height: 8rem;
+  --nav-height-mobile: 8rem;
+  --nav-height-desktop: 8rem;
+  --nav-anchor-height: 5.3rem;
   --module-spacing: 2rem;
   --side-container: 30rem;
   --main-container-max: 110rem;