gatsby-core-theme 44.1.7 → 44.2.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [44.2.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.1.8...v44.2.0) (2025-06-09)
+
+
+* Merge branch 'tm-5437-translate-aria-labels' into 'master' ([63ddf09](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/63ddf09d10c25f973ee53d45c61f6c3c7f2e66d8))
+
+
+### Features
+
+* useTranslate aria labels ([2b93d65](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/2b93d65ad56a5bb08d8d769e7aa26bd7f85794a2))
+
+## [44.1.8](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.1.7...v44.1.8) (2025-06-09)
+
+
+### Bug Fixes
+
+* load defaultImg if there is no src ([34ed7d7](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/34ed7d77139f27b55e7ae05ea256c024b664727a))
+
+
+* Merge branch 'tm-5506-load-deafult-img' into 'master' ([f65e038](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/commit/f65e038d2e307cc87775f01478807d0ed3df4e99))
+
 ## [44.1.7](https://gitlab.com/g2m-gentoo/team-floyd/themes/gatsby-themes/compare/v44.1.6...v44.1.7) (2025-06-09)
 
 

package/package.json

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

package/src/components/atoms/admin/translate/index.js

@@ -1,12 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { MdGTranslate } from "@react-icons/all-files/md/MdGTranslate";
+import useTranslate from "../../../../hooks/useTranslate/useTranslate";
 
 const TranslateLink = ({ translationKey, language }) => (
   <a
     href={`${process.env.HERCULES_BACKEND_URL}translations?key=${translationKey}&language=${language}`}
-    aria-label="translation"
-    target="_blank" rel="noreferrer"
+    aria-label={useTranslate("ariaLabel-translation", "translation")}
+    target="_blank"
+    rel="noreferrer"
   >
     <MdGTranslate />
   </a>

package/src/components/atoms/author-box/description/index.js

@@ -1,12 +1,12 @@
-import React, { useRef, useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
 
-import styles from './author-description.module.scss';
-import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from "./author-description.module.scss";
+import useTranslate from "~hooks/useTranslate/useTranslate";
 
 export default function AuthorDescription({
   author,
-  template = '',
+  template = "",
   readMore = false,
   maximumLength = 30,
 }) {
@@ -19,27 +19,35 @@ export default function AuthorDescription({
   };
 
   return (
-    <div className={`${styles.description || ''} ${styles[template]}`}>
+    <div className={`${styles.description || ""} ${styles[template]}`}>
       <div
         ref={biographyRef}
         className={`${styles.biography} ${
-          author?.biography?.split(' ').length > maximumLength && readMore
+          author?.biography?.split(" ").length > maximumLength && readMore
             ? styles.showReadMore
-            : ''
+            : ""
         }`}
         role="button"
-        aria-label="Toggle biography read more"
+        aria-label={useTranslate(
+          "ariaLabel-toggleBiography",
+          "Toggle biography read more"
+        )}
         tabIndex={0}
         onClick={toggleReadMore}
         onKeyDown={toggleReadMore}
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
           __html:
-            author?.biography?.split(' ').length > maximumLength && isReadMore && readMore
-              ? `${author?.biography?.split(' ').slice(0, maximumLength).join(' ')} <span class='${
+            author?.biography?.split(" ").length > maximumLength &&
+            isReadMore &&
+            readMore
+              ? `${author?.biography
+                  ?.split(" ")
+                  .slice(0, maximumLength)
+                  .join(" ")} <span class='${
                   styles.contReadText
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                }'>${useTranslate('toggle_read', '...continue reading')}</span>`
+                  // eslint-disable-next-line react-hooks/rules-of-hooks
+                }'>${useTranslate("toggle_read", "...continue reading")}</span>`
               : author?.biography,
         }}
       />

package/src/components/atoms/breadcrumbs/index.js

@@ -1,44 +1,59 @@
-import React from 'react';
+import React from "react";
 
-import PropTypes from 'prop-types';
-import Link from '~hooks/link';
+import PropTypes from "prop-types";
+import Link from "~hooks/link";
 
-import styles from './breadcrumbs.module.scss';
-import keygen from '~helpers/keygen';
-import { excludeTemplates } from '../../../constants/excludedTemplates';
-import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from "./breadcrumbs.module.scss";
+import keygen from "~helpers/keygen";
+import { excludeTemplates } from "../../../constants/excludedTemplates";
+import useTranslate from "~hooks/useTranslate/useTranslate";
 
-function Breadcrumbs({ page, separator = <span aria-hidden="true"> / </span>, markets }) {
+function Breadcrumbs({
+  page,
+  separator = <span aria-hidden="true"> / </span>,
+  markets,
+}) {
   const activeMarket = markets && markets[page.market];
+  const breadcrumbAriaLabel = useTranslate(
+    "ariaLabel-breadcrumb",
+    "Breadcrumb"
+  );
+  const getTranslationArray = () => {
+    const translationArray = ["Home", `home_${page.type}`];
+    if (page.categories?.length > 0) {
+      translationArray.push(
+        `home_${page.template}_${page.categories[0].short_name}`
+      );
+    }
+    return translationArray;
+  };
+
+  const homeTranslation = useTranslate(getTranslationArray().reverse(), "Home");
 
   if (
     page.path ===
-    `${activeMarket && activeMarket.path_prefix ? `${activeMarket.path_prefix}` : '/'}`
+    `${
+      activeMarket && activeMarket.path_prefix
+        ? `${activeMarket.path_prefix}`
+        : "/"
+    }`
   ) {
     return <></>;
   }
   const isExcludedTemplate = excludeTemplates.includes(page?.template);
 
-  const getTranslationArray = () => {
-    const translationArray = ['Home', `home_${page.type}`];
-    if (page.categories?.length > 0) {
-      translationArray.push(`home_${page.template}_${page.categories[0].short_name}`);
-    }
-    return translationArray;
-  };
-
   return (
-    <ol className={styles.breadcrumbs || ''} aria-label="Breadcrumb">
-      <li className={styles.item || ''}>
+    <ol className={styles.breadcrumbs || ""} aria-label={breadcrumbAriaLabel}>
+      <li className={styles.item || ""}>
         {isExcludedTemplate ? (
-          useTranslate(getTranslationArray().reverse(), 'Home')
+          homeTranslation
         ) : (
           <Link
-            to={(activeMarket && activeMarket.path_prefix) || '/'}
+            to={(activeMarket && activeMarket.path_prefix) || "/"}
             title="Home"
             className="breadcrumbs-gtm"
           >
-            {useTranslate(getTranslationArray().reverse(), 'Home')}
+            {homeTranslation}
           </Link>
         )}
 
@@ -48,7 +63,11 @@ function Breadcrumbs({ page, separator = <span aria-hidden="true"> / </span>, ma
         page.breadcrumbs.map((breadcrumb) => (
           <li key={keygen()} className={styles.item}>
             {breadcrumb.path ? (
-              <Link to={breadcrumb.path} title={breadcrumb.label} className="breadcrumbs-gtm">
+              <Link
+                to={breadcrumb.path}
+                title={breadcrumb.label}
+                className="breadcrumbs-gtm"
+              >
                 {breadcrumb.label}
               </Link>
             ) : (
@@ -57,7 +76,7 @@ function Breadcrumbs({ page, separator = <span aria-hidden="true"> / </span>, ma
             {separator}
           </li>
         ))}
-      <li aria-current="page" className={styles.item || ''}>
+      <li aria-current="page" className={styles.item || ""}>
         {page.vanity_label ? page.vanity_label : page.title}
       </li>
     </ol>

package/src/components/atoms/menu/menu-icon/index.js

@@ -1,21 +1,26 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { NavigationContext } from '~organisms/navigation/navigationContext';
-import styles from './menu-icon.module.scss';
+import React, { useContext } from "react";
+import PropTypes from "prop-types";
+import { NavigationContext } from "~organisms/navigation/navigationContext";
+import styles from "./menu-icon.module.scss";
+import useTranslate from "../../../../hooks/useTranslate/useTranslate";
 
 const MenuIcon = ({ onClick, gtmClass }) => {
   const { showMenu } = useContext(NavigationContext);
 
   return (
     <div
-      className={`${styles.menuIconContainer || ''} ${gtmClass}`}
+      className={`${styles.menuIconContainer || ""} ${gtmClass}`}
       onKeyDown={() => onClick()}
       onClick={() => onClick()}
       role="button"
-      aria-label="Menu Icon"
+      aria-label={useTranslate("ariaLabel-menuIcon", "Menu Icon")}
       tabIndex={0}
     >
-      <div className={`${styles.menuIcon || ''} ${(showMenu && styles.active) || ''}`}>
+      <div
+        className={`${styles.menuIcon || ""} ${
+          (showMenu && styles.active) || ""
+        }`}
+      >
         <div />
       </div>
     </div>

package/src/components/atoms/notifications/index.js

@@ -1,72 +1,88 @@
-import React, { useState, useContext, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { toggleScroll } from 'gatsby-core-theme/src/helpers/scroll';
-import { NavigationContext } from 'gatsby-core-theme/src/components/organisms/navigation/navigationContext';
-import SpotlightItems from './notification-items/spotlight';
-import CardsItems from './notification-items/cards-v2';
-import BellIcon from '~images/icons/bell';
-import styles from './notifications.module.scss';
+import React, { useState, useContext, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { toggleScroll } from "gatsby-core-theme/src/helpers/scroll";
+import { NavigationContext } from "gatsby-core-theme/src/components/organisms/navigation/navigationContext";
+import SpotlightItems from "./notification-items/spotlight";
+import CardsItems from "./notification-items/cards-v2";
+import BellIcon from "~images/icons/bell";
+import styles from "./notifications.module.scss";
+import useTranslate from "../../../hooks/useTranslate/useTranslate";
 
 const Notifications = ({ section }) => {
-  const { setShowSearch, setShowMenu, showMenu, showSearch } = useContext(NavigationContext);
+  const { setShowSearch, setShowMenu, showMenu, showSearch } =
+    useContext(NavigationContext);
   const notificationRef = useRef(null);
   const [newNotification, setNewNotification] = useState(true);
   const [openNotification, setOpenNotification] = useState(false);
 
   const { modules } = section || {};
-  const getNotifications = () => modules?.find((module) => module?.name === 'spotlights' || module?.name === 'cards_v2') || {};
+  const getNotifications = () =>
+    modules?.find(
+      (module) => module?.name === "spotlights" || module?.name === "cards_v2"
+    ) || {};
 
   const notificationActions = () => {
     setNewNotification(false);
     setOpenNotification(!openNotification);
 
     if (showSearch) {
-      toggleScroll('search');
+      toggleScroll("search");
       setShowSearch(!showSearch);
     }
     if (showMenu) {
-      toggleScroll('menu');
+      toggleScroll("menu");
       setShowMenu(!showMenu);
     }
-
   };
 
   useEffect(() => {
     function handleClickOutside(event) {
-      if (notificationRef.current && !notificationRef.current.contains(event.target)) {
+      if (
+        notificationRef.current &&
+        !notificationRef.current.contains(event.target)
+      ) {
         setOpenNotification(false);
       }
     }
 
     // Bind the event listener
-    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
 
     return () => {
       // Unbind the event listener on clean up
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [notificationRef]);
-  
+
   return (
-    <div ref={notificationRef} className={styles?.notificationOuter || ''}>
+    <div ref={notificationRef} className={styles?.notificationOuter || ""}>
       <div
-        className={`${styles.notificationIcon || ''} ${
-          newNotification ? styles.newNotification || '' : ''
+        className={`${styles.notificationIcon || ""} ${
+          newNotification ? styles.newNotification || "" : ""
         } notification-bell-gtm`}
         onKeyDown={() => notificationActions()}
         onClick={() => notificationActions()}
         role="button"
-        aria-label="Notification Bell Icon"
+        aria-label={useTranslate(
+          "ariaLabel-notificationBellIcon",
+          "Notification Bell Icon"
+        )}
         tabIndex={0}
       >
         <BellIcon />
       </div>
-      {openNotification && (
-          getNotifications()?.name === 'cards_v2' ?
-          <CardsItems module={getNotifications()} onClose={() => notificationActions()} /> :
-          <SpotlightItems module={getNotifications()} onClose={() => notificationActions()} />
-        )
-      }
+      {openNotification &&
+        (getNotifications()?.name === "cards_v2" ? (
+          <CardsItems
+            module={getNotifications()}
+            onClose={() => notificationActions()}
+          />
+        ) : (
+          <SpotlightItems
+            module={getNotifications()}
+            onClose={() => notificationActions()}
+          />
+        ))}
     </div>
   );
 };
@@ -76,4 +92,5 @@ Notifications.propTypes = {
   section: PropTypes.shape({}),
 };
 
-export default Notifications;
+export default Notifications;
+

package/src/components/atoms/notifications/notification-items/cards-v2/index.js

@@ -1,131 +1,156 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import LazyImage from '~hooks/lazy-image';
-import keygen from '~helpers/keygen';
-import Link from '~hooks/link';
-import { imagePrettyUrl, getExtraField } from '~helpers/getters';
-import { getAltText, getImageFilename } from '~helpers/image';
-import useTranslate from '~hooks/useTranslate/useTranslate';
-import CloseIcon from '~images/icons/close';
-import styles from './notification-items.module.scss';
+import React from "react";
+import PropTypes from "prop-types";
+import LazyImage from "~hooks/lazy-image";
+import keygen from "~helpers/keygen";
+import Link from "~hooks/link";
+import { imagePrettyUrl, getExtraField } from "~helpers/getters";
+import { getAltText, getImageFilename } from "~helpers/image";
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import CloseIcon from "~images/icons/close";
+import styles from "./notification-items.module.scss";
 
 const CardsItems = ({ module, onClose, useBanner = false }) => {
-    const { items } = module;
-    const noNewUpdates = useTranslate('noNewUpdates', 'No new items');
+  const { items } = module;
+  const noNewUpdates = useTranslate("noNewUpdates", "No new items");
 
-    const getTimeAgo = (dateString) => {
-        const date = new Date(dateString.replace(' ', 'T')); // Make it ISO-compliant
-        const now = new Date();
+  const getTimeAgo = (dateString) => {
+    const date = new Date(dateString.replace(" ", "T")); // Make it ISO-compliant
+    const now = new Date();
 
-        const diffMs = now.getTime() - date.getTime();
-        const diffMinutes = Math.floor(diffMs / (1000 * 60));
-        const diffHours = Math.floor(diffMinutes / 60);
-        const diffDays = Math.floor(diffHours / 24);
-        const diffMonths = Math.floor(diffDays / 30);
+    const diffMs = now.getTime() - date.getTime();
+    const diffMinutes = Math.floor(diffMs / (1000 * 60));
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    const diffMonths = Math.floor(diffDays / 30);
 
-        let timeAgo = '';
+    let timeAgo = "";
 
-        if (diffDays >= 32) {
-            timeAgo = `${diffMonths} month${diffMonths > 1 ? 's' : ''} ago`;
-        } else if (diffDays >= 1) {
-            timeAgo = `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
-        } else if (diffHours >= 1) {
-            timeAgo = `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
-        } else {
-            timeAgo = `${diffMinutes} minute${diffMinutes !== 1 ? 's' : ''} ago`;
-        }
-
-        return timeAgo;
+    if (diffDays >= 32) {
+      timeAgo = `${diffMonths} month${diffMonths > 1 ? "s" : ""} ago`;
+    } else if (diffDays >= 1) {
+      timeAgo = `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
+    } else if (diffHours >= 1) {
+      timeAgo = `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
+    } else {
+      timeAgo = `${diffMinutes} minute${diffMinutes !== 1 ? "s" : ""} ago`;
     }
 
-    const content = (item) => {
-        const priorityImage = useBanner ? item?.banner || item?.relation?.logo?.fileName : item?.relation?.logo?.fileName;
-        const img = getExtraField(item?.extra_fields, 'notification_image') || priorityImage || '';
-        const imageSrc = imagePrettyUrl(img, 40, 40);
-        const fileName = getImageFilename(imageSrc);
+    return timeAgo;
+  };
 
-        const TitleTag = item?.title_tag || 'label';
-        const ribbon = getExtraField(item?.extra_fields, 'notification_ribbon');
+  const content = (item) => {
+    const priorityImage = useBanner
+      ? item?.banner || item?.relation?.logo?.fileName
+      : item?.relation?.logo?.fileName;
+    const img =
+      getExtraField(item?.extra_fields, "notification_image") ||
+      priorityImage ||
+      "";
+    const imageSrc = imagePrettyUrl(img, 40, 40);
+    const fileName = getImageFilename(imageSrc);
 
-        
+    const TitleTag = item?.title_tag || "label";
+    const ribbon = getExtraField(item?.extra_fields, "notification_ribbon");
 
-        return (
-            <div className={styles.notificationContent}>
-                {img && (
-                    <LazyImage
-                        width={40}
-                        height={40}
-                        alt={getAltText(item?.image_object, item?.label || item?.link_text || fileName)}
-                        src={imageSrc}
-                    />
-                )}
-                <div className={styles.innerContent}>
-                    {item?.title && <TitleTag>{item?.title}</TitleTag>}
-                    {item?.description && (
-                    <div className={styles.subtitle} dangerouslySetInnerHTML={{ __html: item?.description }} />
-                    )}
-                    {item?.template && (
-                        <div className={styles.ribbonAndTime}>
-                            {ribbon && <span className={styles.ribbon}>{ribbon}</span>}
-                            <span className={styles.extraContent}>{getTimeAgo(item?.manual_updated_at || item?.updated_at || item?.manual_created_at || item?.created_at)}</span>
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    };
     return (
-        <div className={styles.container || ''}>
-            <div className={styles.notificationsContainer || ''}>
-                <span>
-                    {useTranslate('latestUpdates', 'Latest Updates')}
-                    <button 
-                        type='button' 
-                        onClick={onClose} 
-                        className={styles.close || ''}
-                        aria-label="Close notifications"
-                    >
-                        <CloseIcon />
-                    </button>
-                </span>
-                {items?.length ? (
-                <ul className={styles.notifications || ''}>
-                    {items.map((item) => (
-                        <li className={`${styles.notification} notification-item-gtm`} key={keygen()}>
-                            <Link
-                                to={item?.path}
-                                title={item?.title}
-                                className={`${styles.notificationLink} cards-gtm`}
-                                aria-label={`${item?.title} Link`}
-                                >
-                                {content(item)}
-                            </Link>
-                        </li>
-                    ))}
-                </ul>
-                ) : (
-                <>{noNewUpdates}</>
+      <div className={styles.notificationContent}>
+        {img && (
+          <LazyImage
+            width={40}
+            height={40}
+            alt={getAltText(
+              item?.image_object,
+              item?.label || item?.link_text || fileName
+            )}
+            src={imageSrc}
+          />
+        )}
+        <div className={styles.innerContent}>
+          {item?.title && <TitleTag>{item?.title}</TitleTag>}
+          {item?.description && (
+            <div
+              className={styles.subtitle}
+              dangerouslySetInnerHTML={{ __html: item?.description }}
+            />
+          )}
+          {item?.template && (
+            <div className={styles.ribbonAndTime}>
+              {ribbon && <span className={styles.ribbon}>{ribbon}</span>}
+              <span className={styles.extraContent}>
+                {getTimeAgo(
+                  item?.manual_updated_at ||
+                    item?.updated_at ||
+                    item?.manual_created_at ||
+                    item?.created_at
                 )}
+              </span>
             </div>
-            <div className={styles.triangle} />
-            <div 
-                className={styles.overlay} 
-                onKeyDown={onClose}
-                onClick={onClose}
-                role="button"
-                aria-label="Notification Bell Icon"
-                tabIndex={0}
-            />
+          )}
         </div>
+      </div>
     );
+  };
+  return (
+    <div className={styles.container || ""}>
+      <div className={styles.notificationsContainer || ""}>
+        <span>
+          {useTranslate("latestUpdates", "Latest Updates")}
+          <button
+            type="button"
+            onClick={onClose}
+            className={styles.close || ""}
+            aria-label={useTranslate(
+              "ariaLabel-closeNotifications",
+              "Close notifications"
+            )}
+          >
+            <CloseIcon />
+          </button>
+        </span>
+        {items?.length ? (
+          <ul className={styles.notifications || ""}>
+            {items.map((item) => (
+              <li
+                className={`${styles.notification} notification-item-gtm`}
+                key={keygen()}
+              >
+                <Link
+                  to={item?.path}
+                  title={item?.title}
+                  className={`${styles.notificationLink} cards-gtm`}
+                  aria-label={`${item?.title} Link`}
+                >
+                  {content(item)}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <>{noNewUpdates}</>
+        )}
+      </div>
+      <div className={styles.triangle} />
+      <div
+        className={styles.overlay}
+        onKeyDown={onClose}
+        onClick={onClose}
+        role="button"
+        aria-label={useTranslate(
+          "ariaLabel-notificationBellIcon",
+          "Notification Bell Icon"
+        )}
+        tabIndex={0}
+      />
+    </div>
+  );
 };
 
 CardsItems.propTypes = {
-    module: PropTypes.shape({
-        items: PropTypes.arrayOf(PropTypes.shape({}))
-    }),
-    onClose: PropTypes.func,
-    useBanner: PropTypes.bool
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.shape({})),
+  }),
+  onClose: PropTypes.func,
+  useBanner: PropTypes.bool,
 };
 
 export default CardsItems;