gatsby-core-theme 40.0.32 → 40.0.34

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [40.0.34](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v40.0.33...v40.0.34) (2024-11-14)
+
+
+### Bug Fixes
+
+* content show more fix ([c4e91fb](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/c4e91fbcb37f6c383f90dba3da2ac4d892868a7d))
+
+## [40.0.33](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v40.0.32...v40.0.33) (2024-11-13)
+
+
+### Bug Fixes
+
+* clean up code ([020fa15](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/020fa1542f13769eb2f8e823ecef0b0916d47150))
+* fix anchor for items on content module ([e9b811e](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/e9b811e19dbbf64be59fbb68e260b196daeada0b))
+* fix ribbons ([95ada5b](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/95ada5b7de9625b48f9ff5c34b0934178f617898))
+* fix tests ([da1e5b7](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/da1e5b7b75b67c7d9c91a883932a02f94671cc84))
+* preview feature bug ([e61af0f](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/e61af0ff04f0112403b84bee8f82313bacdeafc4))
+* update scroll ([30472d1](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/30472d1620cd6eba84ad28ae8d6d322c5a08192e))
+
+
+* Merge branch 'tm-4954-ribbons' into 'master' ([54ad0bc](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/54ad0bc92dbed1fe3d3d862c93dbb26d16f291cc))
+* Merge branch 'tm-4901-anchor' into 'master' ([dbae75c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/dbae75c5aa5bbd582ca0de52398e1afb0a7a1c40))
+* Merge branch 'master' into tm-4901-anchor ([5c21c9c](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/5c21c9c7b59b6f39d15294bbd741424006ce0e65))
+
 ## [40.0.32](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v40.0.31...v40.0.32) (2024-11-12)
 
 

package/package.json

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

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

@@ -142,6 +142,7 @@ const Modules = ({ module, page, pageContext, modulePosition }) => {
   return (
     ModuleComponent && (
       <div
+        data-track={!!module.anchor_label}
         id={
           module.name === 'archive' && module.module_title ? null : anchorLabel
         }

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

@@ -1,28 +1,26 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable prefer-destructuring */
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useRef, 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';
-import isSticky from '~hooks/stickyOnScroll';
-import keygen from '~helpers/keygen';
-import { anchorLink, removeSymbols } from '~helpers/strings';
+import PropTypes from "prop-types";
+import { IoIosArrowBack } from "@react-icons/all-files/io/IoIosArrowBack";
+import { IoIosArrowForward } from "@react-icons/all-files/io/IoIosArrowForward";
+import isSticky from "~hooks/stickyOnScroll";
+import keygen from "~helpers/keygen";
+import { anchorLink, removeSymbols } from "~helpers/strings";
 
-import useTranslate from '~hooks/useTranslate/useTranslate';
-import styles from './anchor.module.scss';
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import styles from "./anchor.module.scss";
 
 function Anchor({
   module: { items },
-  headerOffset = 80,
   isFixed = true,
   stickyOffset = 0,
   icon = null,
   showTitle = true,
-  heightOfAnchor = 60,
-  offset = 10,
   exclOperator = false,
   minCharactersForButtons = 86,
   setShowButtons = false,
@@ -42,97 +40,92 @@ function Anchor({
   const anchorList = items.map((anchor) => {
     numberOfCharacters += anchor?.label?.length;
     return {
-      id: `${anchor.label && removeSymbols(anchorLink(anchor?.label?.toLowerCase()))}`,
+      id: `${
+        anchor.label &&
+        removeSymbols(anchorLink(anchor?.label?.toLowerCase().trim()))
+      }`,
       label: anchor.label,
-      slug: `${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`,
+      slug: `${
+        anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())
+      }`,
     };
   });
-  const showButtons = numberOfCharacters > minCharactersForButtons && setShowButtons;
+  const showButtons =
+    numberOfCharacters > minCharactersForButtons && setShowButtons;
 
   const updateButtons = (shift) => {
     setScrollEnd(
-      Math.floor(anchorListRef.current.scrollWidth - (anchorListRef.current.scrollLeft + shift)) <=
-        anchorListRef.current.offsetWidth
+      Math.floor(
+        anchorListRef.current.scrollWidth -
+          (anchorListRef.current.scrollLeft + shift)
+      ) <= anchorListRef.current.offsetWidth
     );
   };
 
   const scroll = (shift) => {
     anchorListRef.current.scrollTo({
       left: anchorListRef.current.scrollLeft + shift,
-      behavior: 'smooth',
+      behavior: "smooth",
     });
     updateButtons(shift);
     setScrollX(scrollX + shift);
   };
 
-  function compact(array) {
-    return array?.filter(Boolean);
-  }
-
   const setActiveAnchor = () => {
+    const elements = document.querySelectorAll("[data-track='true']");
     const { innerHeight, scrollY } = window;
+    const scrollHeight = document.body.scrollHeight;
 
-    // Progress scroll bar
-    const scrollHeight = document.querySelector('body').scrollHeight;
+    // Update progress bar
     const calcPercent = (scrollY * 100) / (scrollHeight - innerHeight);
-    progressBar.current ? (progressBar.current.style.width = `${calcPercent}%`) : null;
-
-    // Get element in viewport
-    const currentAnchor = anchorList?.map((el) => {
-      const element = document.getElementById(el.id);
-      if (element?.offsetTop - headerOffset - heightOfAnchor - offset <= scrollY) {
-        return element;
-      }
-      return null;
-    });
+    if (progressBar.current) {
+      progressBar.current.style.width = `${calcPercent}%`;
+    }
 
-    // Filter out undefined value
-    const currentAnchorValues = compact(currentAnchor);
-    const currentAnchorValuesLength = currentAnchorValues.length - 1;
+    // Get visible elements
+    const visibleElements = Array.from(elements)
+      .filter((el) => el.getBoundingClientRect().top >= 0)
+      .map((el) => el.id);
 
-    const activeElement = itemsRef.current.find(
-      (element) =>
-        element &&
-        element.getAttribute('href') ===
-          `#${currentAnchorValues[currentAnchorValuesLength]?.getAttribute('id')}`
+    // Reset active classes
+    itemsRef.current.forEach((li) =>
+      li?.parentNode.classList.remove(styles.active)
     );
 
-    // Remove all active classes
-    itemsRef.current.forEach((li) => {
-      li && li.parentNode.classList.remove(styles.active);
-    });
+    if (visibleElements.length > 0) {
+      const activeElement = itemsRef.current.find(
+        (el) => el?.getAttribute("href") === `#${visibleElements[0]}`
+      );
 
-    if (activeElement && anchorListRef.current) {
-      activeElement.parentNode.classList.add(styles.active);
+      if (activeElement) {
+        activeElement.parentNode.classList.add(styles.active);
 
-      const elementOffsetWidth = activeElement.offsetWidth;
-      const elementOffsetLeft = activeElement.offsetLeft;
+        const { offsetWidth: elementWidth, offsetLeft: elementLeft } =
+          activeElement;
+        const containerWidth = anchorContainerRef.current.offsetWidth;
 
-      if (elementOffsetLeft > anchorContainerRef.current.offsetWidth - elementOffsetWidth) {
         anchorListRef.current.scrollLeft =
-          elementOffsetWidth + elementOffsetLeft + 5 - anchorContainerRef.current.offsetWidth;
-      } else {
-        anchorListRef.current.scrollLeft = 0;
+          elementLeft > containerWidth - elementWidth
+            ? elementLeft + elementWidth + 5 - containerWidth
+            : 0;
       }
-    } else if (anchorListRef.current) {
-      // anchorListRef.current.scrollLeft = 0;
     }
   };
 
-  const sticky = isFixed && isSticky(stickyOffset, setActiveAnchor, anchorContainerRef);
+  const sticky =
+    isFixed && isSticky(stickyOffset, setActiveAnchor, anchorContainerRef);
 
   const anchorItems = anchorList?.map((item, index) => (
     // eslint-disable-next-line react/no-array-index-key
-    <li key={index} className={styles.anchorItem || ''}>
+    <li key={index} className={styles.anchorItem || ""}>
       <a
-        className={`${styles.link || ''} anchor-carousel-gtm anchor-menu-gtm`}
+        className={`${styles.link || ""} anchor-carousel-gtm anchor-menu-gtm`}
         key={keygen()}
         draggable="false"
         // eslint-disable-next-line no-return-assign
         ref={(el) => (itemsRef.current[index] = el)}
         href={`#${item?.id && item.id}`}
       >
-        {/* eslint-disable-next-line react-hooks/rules-of-hooks */}
         {useTranslate(item.slug, item.label)}
         {icon}
       </a>
@@ -140,21 +133,24 @@ function Anchor({
   ));
 
   return (
-    <div className={styles.containerAnchor || ''} ref={anchorContainerRef}>
+    <div className={styles.containerAnchor || ""} ref={anchorContainerRef}>
       {showTitle && (
-        <div className={`${styles.anchorTitle || ''}`}>
-          {/* eslint-disable-next-line react-hooks/rules-of-hooks */}
-          <span>{useTranslate('anchor_title', 'Table of Contents')}</span>
+        <div className={`${styles.anchorTitle || ""}`}>
+          <span>{useTranslate("anchor_title", "Table of Contents")}</span>
         </div>
       )}
 
       <div
-        className={`${sticky ? styles.stickyContainer || '' : styles.defaultConatiner || ''} 
-                    ${exclOperator ? styles.usingExclOperator || '' : ''}`}
+        className={`${
+          sticky ? styles.stickyContainer || "" : styles.defaultConatiner || ""
+        } 
+                    ${exclOperator ? styles.usingExclOperator || "" : ""}`}
       >
         {showButtons && (
           <button
-            className={`${styles.buttLeft} ${scrollX <= 0 ? styles.disabled : ''}`}
+            className={`${styles.buttLeft} ${
+              scrollX <= 0 ? styles.disabled : ""
+            }`}
             onClick={() => scroll(-buttonScroll)}
             type="button"
             title="anchorButtonLeft"
@@ -162,12 +158,14 @@ function Anchor({
             {leftButtonIcon}
           </button>
         )}
-        <ul ref={anchorListRef} className={`${styles.anchor || ''}`}>
+        <ul ref={anchorListRef} className={`${styles.anchor || ""}`}>
           {anchorItems}
         </ul>
         {showButtons && (
           <button
-            className={`${styles.buttRight} ${!scrollEnd ? '' : styles.disabled}`}
+            className={`${styles.buttRight} ${
+              !scrollEnd ? "" : styles.disabled
+            }`}
             onClick={() => scroll(buttonScroll)}
             type="button"
             title="anchorButtonRight"
@@ -175,7 +173,9 @@ function Anchor({
             {rightButtonIcon}
           </button>
         )}
-        {sticky && <div ref={progressBar} className={styles.progressBar || ''} />}
+        {sticky && (
+          <div ref={progressBar} className={styles.progressBar || ""} />
+        )}
       </div>
     </div>
   );
@@ -190,13 +190,10 @@ Anchor.propTypes = {
       })
     ),
   }).isRequired,
-  headerOffset: PropTypes.number,
   styles: PropTypes.shape({}),
   isFixed: PropTypes.bool,
   icon: PropTypes.element,
   showTitle: PropTypes.string,
-  heightOfAnchor: PropTypes.number,
-  offset: PropTypes.number,
   stickyOffset: PropTypes.number,
   buttonScroll: PropTypes.number,
   leftButtonIcon: PropTypes.shape({}),

package/src/helpers/processor/modules.mjs

@@ -338,11 +338,6 @@ export function processTopListModule(
     
     listItem.items = listItem.items
       ? listItem.items.map((item) => {
-          // Remove the ribbons if are empty, will be add ribbons from operator
-          if (item.ribbons && item.ribbons.length === 0) delete item.ribbons;
-          if (item.ribbon_ids && item.ribbon_ids.length === 0)
-            delete item.ribbon_ids;
-
           const operatorRelation = Object.values(relations.operator).find(
             (operator) =>
               operator.operator_id === item.operator_id &&
@@ -350,7 +345,7 @@ export function processTopListModule(
               type === operator.type
           );
 
-          if (operatorRelation) {
+          if (operatorRelation) {      
             operatorRelation.ribbons =
               item.ribbon_ids && item.ribbon_ids.length === 0
                 ? operatorRelation.ribbons
@@ -405,6 +400,7 @@ export function processContentModule(
     relationData
   );
   if (module.show_more_enabled === "1" && module.show_more_content) {
+    module.show_more_content = (content && content[module.show_more_content]) || module.show_more_content;
     module.show_more_content = generatePlaceholderString(
       module.show_more_content,
       translations,

package/src/helpers/replaceMedia.js

@@ -11,6 +11,10 @@ export default (node, moduleWidth = 960, moduleName, pageTemplate, modulePositio
     node.attribs.class = styles && styles[node?.attribs?.class];
   }
 
+  if(node && node.attribs && node.attribs['data-anchor-label']) {
+    node.attribs['data-track'] = true;
+  }
+
   if(node.name ==='div' && (node.attribs['data-type'] === 'columnBlock' || node.attribs['data-type'] === 'threeColumnBlock')) {
     node.attribs.class = `${styles.column} ${node.attribs?.class === 'two-column-block' ? styles.twoColumnBlock : styles.threeColumnBlock}`; 
   }

package/src/helpers/server-data.js

@@ -30,12 +30,10 @@ export async function getAPIData(page, url, headers, preview) {
         ribbons: ribbonsData
       },{}, null, null, true);
  
-      const { path } = processed.pages[pagePreview.market].preview[0];
- 
       const pagePreviewProcessed = processed.pages[pagePreview.market][
         pagePreview.relation_type
         // eslint-disable-next-line no-shadow
-      ].find((page) => page.path === path);
+      ].find((page) => page.path === params?.path);
            
       return {
         props: {