gatsby-core-theme 44.13.4 → 44.14.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [44.14.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.13.5...v44.14.0) (2026-02-11)
+
+
+### Bug Fixes
+
+* maxchar prop ([0973336](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/09733366c2e2b8f74ed4a9a4e3deafefa719b268))
+* template six ([915270f](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/915270fae542a59dee6732406eeaaa729cef5e68))
+* test ([5d02286](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/5d02286b077906048633287e4630f8d88c75bf55))
+* tests ([4eae4ad](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/4eae4ad3b6e80ee011d3cd98763c0c3f9b911dce))
+
+
+* Merge branch 'EN-327/spotlight-six' into 'master' ([066cbed](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/066cbed8aa9d8a6288d45294f985a25de88d3b6f))
+
+
+### Features
+
+* spotlights template six ([0d062e6](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/0d062e68350879bf68fd658d8da8c935becf0ce5))
+
+## [44.13.5](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.13.4...v44.13.5) (2026-02-09)
+
+
+### Bug Fixes
+
+* add load more button to cards ([1e157a3](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/1e157a363d185d1016c1024e02bf898207923267))
+
+
+* Merge branch 'en-54-add-load-more-button-to-cards' into 'master' ([9e81ffc](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/9e81ffc1392c99be916960d4680e5247b4261599))
+
 ## [44.13.4](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.13.3...v44.13.4) (2026-02-06)
 
 

package/package.json

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

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

@@ -83,6 +83,11 @@ const Modules = ({ module, page, pageContext, modulePosition }) => {
             return lazy(() =>
               import("~molecules/spotlights_v2/image-text/template-five")
             );
+          }
+           if (module?.style === "template_six") {
+            return lazy(() =>
+              import("~molecules/spotlights_v2/image-text/template-six")
+            );
           }
           return lazy(() =>
             import("~molecules/spotlights_v2/image-text/template-one")

package/src/components/molecules/search/search.test.js

@@ -94,7 +94,8 @@ describe('Search Component', () => {
 
       const button2 = container.querySelector('.customSelectContainer ol li:nth-child(2) button');
       fireEvent.click(button2);
-
+      const loadMoreButton = getByText("Load More");
+      fireEvent.click(loadMoreButton);
       // Default Pages
       expect(getByText('Best Arabic Online Casinos 2024')).toBeInTheDocument();
       expect(getByText('Best Online Casino Payment Methods For Arab Players In 2024')).toBeInTheDocument();

package/src/components/molecules/spotlights_v2/image-text/template-six/index.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TemplateThree from "../template-three/index"
+
+export default function TemplateOne({
+  module,
+  characterMaxReadMore=300
+}) {
+  return (
+    <TemplateThree
+      readMore={false}
+      module={module}
+      characterMaxReadMore={characterMaxReadMore}
+    />
+  );
+}
+
+TemplateOne.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+    name: PropTypes.string,
+  }).isRequired,
+    characterMaxReadMore: PropTypes.number,
+};

package/src/components/molecules/spotlights_v2/image-text/template-six/template-six.stories.js

@@ -0,0 +1,94 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import TemplateOne from '.';
+
+export default {
+  title: 'Theme/Modules/Spotlight/Image Text/Template Six',
+  component: TemplateOne,
+  argTypes: {
+    buttonType: {
+      name: 'buttonType',
+      defaultValue: 'secondary',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'radio' },
+    },
+    buttonSize: {
+      name: 'buttonType',
+      defaultValue: 'm',
+      options: ['xs', 's', 'm', 'l', 'xl', 'noSize'],
+      control: { type: 'radio' },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that shows a list of pros and cons and corresponding icons.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <TemplateOne {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  module: {
+    mode: 'image_text',
+    read_more_text: '',
+    show_read_more: '1',
+    items: [
+      {
+        image: `1702045256/xl.png`,
+        label: `Javier A. Pernia`,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+        link_text: 'Read Review',
+        subtitle: 'Senior Content Writer',
+        text: `<p>Lorem ipsum dolor sit amet consectetur. Diam justo eu tellus morbi amet suspendisse purus tincidunt. Fermentum with risus felis feugiat scelerisque in convallis id cras. Varius lacus id lacus hendrerit commodo orci loredio dignissim massa mauris massa pellentesque et magna lectus duis. Rhoncus eros enim egestas integer eu duis ullamcorper. Magna dictum suspendisse habitasse massa. Odio viverra sit nisl duis nisl sit. Quam ut tincidunt dui lorem pretium commodo aliquam accumsan. Sagittis ultrices est vitae habitant eget morbi. Eu non ipsum pretium enim eleifend quam ut. At tortor in ut sed ultrices suspendisse bibendum nunc. In odio volutpat scelerisque gravida egestas ut turpis. Ut facilisi massa elit maecenas amet volutpat quis eu.</p>`,
+      },
+      {
+        image: `1702045256/xl.png`,
+        label: `Javier A. Pernia`,
+        subtitle: 'Senior Content Writer',
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+        link_text: 'Read Review',
+        text: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper orci a, nec lacus, viverra. Fusce pellentesque eget vitae, ac nibh sem in neque sagittis. Dapibus ornare egestas sagittis massa arcu est arcu fermentum.</p>`,
+      },
+      {
+        image: `1702045256/xl.png`,
+        subtitle: 'Senior Content Writer',
+        label: `Javier A. Pernia`,
+        link: {
+          title: null,
+          type: 'internal',
+          value: `/rizk`,
+        },
+        link_text: 'Read Review',
+        text: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ullamcorper orci a, nec lacus, viverra. Fusce pellentesque eget vitae, ac nibh sem in neque sagittis. Dapibus ornare egestas sagittis massa arcu est arcu fermentum.</p>`,
+      },
+    ],
+  },
+  scrollableContent: false,
+};

package/src/components/molecules/spotlights_v2/image-text/template-six/template-six.test.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import TemplateOne from '.';
+import TemplateThree from '../template-three';
+import { getSpotlightItems } from '~tests/factories/modules/spotlights.factory';
+
+jest.mock('../template-three', () => jest.fn(() => null));
+
+describe('TemplateOne Component', () => {
+  test('renders TemplateThree with correct props', () => {
+    const moduleMock = getSpotlightItems(3, 'image');
+
+    render(<TemplateOne module={moduleMock} />);
+
+    expect(TemplateThree).toHaveBeenCalledTimes(1);
+
+    expect(TemplateThree).toHaveBeenCalledWith(
+      expect.objectContaining({
+        readMore: false,
+        module: moduleMock,
+        characterMaxReadMore:300
+      }),
+      {}
+    );
+  });
+});

package/src/components/molecules/spotlights_v2/image-text/template-three/index.js

@@ -18,7 +18,7 @@ export default function TemplateOne({
 }) {
   const { items } = module;
   return (
-    <div className={styles?.spotlightsImage || ''}>
+    <div className={`${styles?.spotlightsImage} ${!readMore ? styles.carouselTemplate : ``}`}>
       {
         // eslint-disable-next-line react/prop-types
         items?.map((res) => {

package/src/components/molecules/spotlights_v2/image-text/template-three/template-three.module.scss

@@ -1,7 +1,50 @@
 .spotlightsImage {
   max-width: var(--main-container-max);
   margin: 0 auto;
+
   @include flex-direction(column);
   @include flex-align(center, center);
+
   gap: 1.6rem;
+}
+
+.carouselTemplate {
+  max-width: var(--main-container-max);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  overflow-x: scroll;
+  gap: 1.6rem;
+  justify-content: flex-start;
+  padding-bottom: 1.6rem;
+
+  @include min(tablet) {
+    flex-direction: column;
+    overflow-x: hidden;
+  }
+
+  &::-webkit-scrollbar {
+    height: 6px;
+    border-radius: 30px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #e0e0e2;
+    border-radius: 30px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #64646D;
+    border-radius: 30px;
+  }
+
+  div:first-child {
+    div {
+      width: 30rem;
+
+      @include min(tablet) {
+        width: 100%;
+      }
+    }
+  }
 }

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable no-nested-ternary */
-import React, { useState, useEffect } from 'react';
+import React from "react";
 import PropTypes from 'prop-types';
 
 import Pagination from '~molecules/pagination';
@@ -9,31 +9,26 @@ import Button from '~atoms/button/button';
 
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import styles from './archive.module.scss';
+import useLoadMore from "~hooks/useLoadMore";
 
 const Archive = ({ module, page, loadMore, gtmClass = '', anchorLabel, modulePosition, buttonType = 'tertiary', buttonSize = 'm' }) => {
-  const [moduleItems, setModuleItems] = useState([...module.items]);
-  const updatedModule = { ...module };
-  const hasLoadMore = module.pagination_type === 'load_more';
+  const hasLoadMore = module.pagination_type === "load_more";
 
-  useEffect(() => {
-    if (module.pagination_type === 'load_more') {
-      const items = module.items.filter(
-        (item, index) => index < parseInt(loadMore ? loadMore.limit : 9)
-      );
-      setModuleItems(items);
-    }
-  }, [module, module.items, loadMore]);
+  const {
+    items: moduleItems,
+    loadMore: loadMoreHandler,
+    hasMore,
+  } = useLoadMore({
+    items: module.items,
+    enabled: hasLoadMore,
+    initialLimit: loadMore?.limit ?? 9,
+    increment: loadMore?.increment ?? 9,
+  });
 
-  const loadMoreHandler = () => {
-    let items = [...module.items];
-    if (items.length > moduleItems.length) {
-      items = items.filter(
-        (item, index) => index < moduleItems.length + parseInt(loadMore ? loadMore.increment : 9)
-      );
-      setModuleItems(items);
-    }
+  const updatedModule = {
+    ...module,
+    items: moduleItems,
   };
-  
   const loadMoreText = useTranslate(`load_more_${module?.model_type}`) || useTranslate('load_more', 'Load More');
   
   updatedModule.items = moduleItems;
@@ -41,6 +36,7 @@ const Archive = ({ module, page, loadMore, gtmClass = '', anchorLabel, modulePos
     <>
       <Items module={updatedModule} page={page} gtmClass={gtmClass} modulePosition={modulePosition}/>
       {hasLoadMore ? (
+        hasMore &&
         module.items.length > updatedModule.items.length && (
           <div className={styles.loadMoreWrapper || ''}>
             <Button

package/src/hooks/useLoadMore/index.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+const useLoadMore = ({
+  items = [],
+  enabled = true,
+  initialLimit = 9,
+  increment = initialLimit,
+}) => {
+  const [visibleItems, setVisibleItems] = useState([]);
+
+  useEffect(() => {
+    if (!enabled) {
+      setVisibleItems(items)
+      return;
+    }
+
+    setVisibleItems(items.slice(0, initialLimit));
+  }, [items, enabled, initialLimit])
+
+  const loadMore = () => {
+    setVisibleItems((prev) => items.slice(0, Math.min(prev.length + increment, items.length)))
+  }
+
+  const hasMore = visibleItems.length < items.length;
+
+  return {
+    items: visibleItems,
+    loadMore,
+    hasMore
+  }
+};
+
+export default useLoadMore

package/src/hooks/useLoadMore/useLoadMore.test.js

@@ -0,0 +1,84 @@
+import { renderHook, act } from "@testing-library/react";
+import useLoadMore from "./index";
+
+describe("useLoadMore hook", () => {
+  const items = [1, 2, 3, 4, 5, 6];
+
+  test("returns initial limited items when enabled", () => {
+    const { result } = renderHook(() =>
+      useLoadMore({
+        items,
+        enabled: true,
+        initialLimit: 3,
+        increment: 2,
+      })
+    );
+
+    expect(result.current.items).toEqual([1, 2, 3]);
+    expect(result.current.hasMore).toBe(true);
+  });
+
+  test("returns all items when disabled", () => {
+    const { result } = renderHook(() =>
+      useLoadMore({
+        items,
+        enabled: false,
+        initialLimit: 3,
+      })
+    );
+
+    expect(result.current.items).toEqual(items);
+    expect(result.current.hasMore).toBe(false);
+  });
+
+  test("loadMore increases visible items by increment", () => {
+    const { result } = renderHook(() =>
+      useLoadMore({
+        items,
+        initialLimit: 2,
+        increment: 2,
+      })
+    );
+
+    act(() => {
+      result.current.loadMore();
+    });
+
+    expect(result.current.items).toEqual([1, 2, 3, 4]);
+    expect(result.current.hasMore).toBe(true);
+  });
+
+  test("loadMore does not exceed total items length", () => {
+    const { result } = renderHook(() =>
+      useLoadMore({
+        items,
+        initialLimit: 4,
+        increment: 5,
+      })
+    );
+
+    act(() => {
+      result.current.loadMore();
+    });
+
+    expect(result.current.items).toEqual(items);
+    expect(result.current.hasMore).toBe(false);
+  });
+
+  test("hasMore becomes false when all items are visible", () => {
+    const { result } = renderHook(() =>
+      useLoadMore({
+        items,
+        initialLimit: 3,
+        increment: 3,
+      })
+    );
+
+    act(() => {
+      result.current.loadMore();
+    });
+
+    expect(result.current.items).toEqual(items);
+    expect(result.current.hasMore).toBe(false);
+  });
+});