gatsby-core-theme 32.0.6 → 33.0.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [33.0.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v32.0.6...v33.0.0) (2024-06-13)
+
+
+### Bug Fixes
+
+* conflicts ([39c9bb4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/39c9bb43b9a203276edebbdd0c2e259d32419e8f))
+* content modules not bigger than module ([d3317d3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d3317d3b73bdc1d0f22183c7b2b5ff3c76666b37))
+* fix bug for prefilled module ([2d58502](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2d58502ed2010d7421d81d3037cafa2b8896971d))
+* fix logic ([2d6dfe5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2d6dfe5e634952af1d9c391dcc30acc9ccf90d5e))
+* image size ([cb20c7e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cb20c7e453599d6baaa58c8eee1e6cfaedde6398))
+* prefilled module ([dc631f8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/dc631f8fccb81ffe4b1e0bcdb398184b5a4abaae))
+* resolve conflicts ([41d401a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/41d401a3a4f770a2ba79ab0f872de3c2a852928c))
+* test ([a882a09](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a882a092ac1f3206320940134ad6c7b378f3d7c1))
+* width and height proptype ([fd0db97](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fd0db977f6a2048f092c866a88e541e9329b1ed4))
+
+
+### Code Refactoring
+
+* add aria labels for svg titles ([01f477a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/01f477ac723f6c4f4f1c5c3905166a6fa225210c))
+* changes to statistics ([65c38ec](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/65c38ec64a032b1780f763bef559e09673be195f))
+* correction to typo ([2b75024](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2b750243d384a27ff856c3c94aa73702974d3953))
+* move stats to modules ([1d64d84](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1d64d8466c64bae6bff1fa3a5ef085fa1c18fd9a))
+
+
+* Merge branch 'tm-4416-aria-labels' into 'master' ([088f5a0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/088f5a04465d376fd19444e4a9f079b84460c208))
+* Merge branch 'tm-4419-prefilled-module' into 'master' ([bce297c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/bce297c4cb1b17074c5f948c3cb19efa32753f5c))
+* Merge branch 'tm-4327-stats' into 'master' ([17d410d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/17d410df307c91c3600c20f4d431947f9ae57ef9))
+* Merge branch 'master' into tm-4327-stats ([2bb17ee](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2bb17eee58f18f5fbe2f7f44e70a7f5ce9d9182a))
+* Merge branch 'tm-4358-images-size' into 'master' ([8281773](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8281773a9a79feba674c3ca7753ea5995ab97892))
+
+
+### Tests
+
+* fix test ([6a3fd25](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6a3fd25b6b20764b11192c6475a6a2c3f4657d0e))
+
 ## [32.0.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v32.0.5...v32.0.6) (2024-06-04)
 
 

package/package.json

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

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { authorObject } from '~tests/factories/modules/author-box.factory';
+import AuthorDescription from '.';
+
+describe('author box component', () => {
+  test('render', () => {
+    const author = authorObject;
+    author.biography =
+      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout";
+    const { container, getByText } = render(<AuthorDescription author={author} />);
+    expect(container).toBeTruthy();
+    expect(container.querySelector('.description')).toBeTruthy();
+    expect(container.querySelector('.biography')).toBeTruthy();
+    expect(getByText(author.biography)).toBeTruthy();
+  });
+  test('render different templates', () => {
+    const author = authorObject;
+    const { container } = render(<AuthorDescription author={author} template="templateOne" />);
+    expect(container).toBeTruthy();
+    expect(container.querySelector('.templateOne')).toBeTruthy();
+  });
+  test('render with read more ', async () => {
+    const author = authorObject;
+
+    author.biography =
+      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout";
+
+    const { container, getByText } = render(
+      <AuthorDescription author={author} readMore maximumLength={2} />
+    );
+
+    expect(container).toBeTruthy();
+    expect(getByText('The purpose')).toBeTruthy();
+    expect(container.querySelector('.showReadMore')).toBeTruthy();
+    expect(container.querySelector('.contReadText')).toBeTruthy();
+    expect(getByText('...continue reading')).toBeTruthy();
+  });
+  test('click read more ', async () => {
+    const author = authorObject;
+
+    author.biography =
+      "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout";
+
+    const { container, getByText } = render(
+      <AuthorDescription author={author} readMore maximumLength={2} />
+    );
+
+    expect(container).toBeTruthy();
+    expect(getByText('The purpose')).toBeTruthy();
+    expect(container.querySelector('.showReadMore')).toBeTruthy();
+    expect(container.querySelector('.contReadText')).toBeTruthy();
+    expect(getByText('...continue reading')).toBeTruthy();
+
+    const button = container.querySelector('.showReadMore');
+    fireEvent.click(button);
+    expect(getByText(author.biography)).toBeTruthy();
+    expect(container.querySelector('.open')).toBeTruthy();
+  });
+});
+afterEach(() => {
+  cleanup();
+});

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

@@ -33,6 +33,7 @@ export default function AuthorDescription({
         tabIndex={0}
         onClick={toggleReadMore}
         onKeyDown={toggleReadMore}
+        // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
           __html:
             author?.biography?.split(' ').length > maximumLength && isReadMore

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

@@ -5,17 +5,17 @@ import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl } from '~helpers/getters';
 import styles from './image.module.scss';
 
-const Image = ({ module = {} }) => {
+const Image = ({ module = {}, width = '912', height = '333' }) => {
   const { title, value, alt = 'missing alt', alignment } = module;
 
   if (!value) return <></>;
 
   return (
     <LazyImage
-      src={imagePrettyUrl(value, 912, 333)}
+      src={imagePrettyUrl(value, width, height)}
       alt={alt || 'missing alt'}
-      width={912}
-      height={333}
+      width={width}
+      height={height}
       title={title && title}
       className={`${styles.imageModule || ''} ${styles[alignment] || ''}`}
     />
@@ -29,6 +29,8 @@ Image.propTypes = {
     alt: PropTypes.string,
     alignment: PropTypes.string,
   }),
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default Image;

package/src/components/atoms/search/autocomplete/operator.js

@@ -6,13 +6,18 @@ import { imagePrettyUrl } from '~helpers/getters';
 import OperatorCta from '~atoms/button/operator-cta';
 import styles from './operator.module.scss';
 
-const Operator = ({ item = {} }) => {
+const Operator = ({ item = {}, width = '56', height = '56' }) => {
   const { relation } = item;
   const img = relation?.standardised_logo_url_object?.filename || relation.logo_url;
 
   return (
     <div className={styles.row || ''}>
-      <LazyImage width={56} height={56} src={imagePrettyUrl(img, 56, 56)} alt={item.title} />
+      <LazyImage
+        width={width}
+        height={height}
+        src={imagePrettyUrl(img, width, height)}
+        alt={item.title}
+      />
       <h3>{item.title}</h3>
       <OperatorCta module="search" operator={relation} gtmClass="toplist-operator-cta-gtm" />
     </div>
@@ -26,6 +31,8 @@ Operator.propTypes = {
       logo_url: PropTypes.string,
     }),
   }).isRequired,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default Operator;

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

@@ -19,6 +19,8 @@ export default function Bonus({
   },
   tncEnable = true,
   tncFixed = false,
+  width = '100',
+  height = '120',
   showRoundedRating = false,
 }) {
   const { standardised_logo_url, logo_url, bonus, name } = operator || {};
@@ -42,7 +44,12 @@ export default function Bonus({
             clickedElement="oneliner"
             className={`${styles.logo || ''} operator-banner-gtm logo-cta`}
           >
-            <LazyImage alt={operator?.name} src={imagePrettyUrl(logo)} height={120} width={100} />
+            <LazyImage
+              alt={operator?.name}
+              src={imagePrettyUrl(logo, width, height)}
+              height={height}
+              width={width}
+            />
             <div className={styles.details}>
               {name && <span>{name}</span>}
               {(operator?.rating || bonus?.rating) && (
@@ -97,5 +104,7 @@ Bonus.propTypes = {
     type: PropTypes.string,
     name: PropTypes.string,
   }),
+  width: PropTypes.string,
+  height: PropTypes.string,
   showRoundedRating: PropTypes.bool,
 };

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

@@ -27,6 +27,8 @@ export default function TemplateOne({
   closedBanner,
   setClosedBanner,
   showRoundedRating = false,
+  width = '120',
+  height = '120',
 }) {
   const { translations } = useContext(Context) || {};
   const { standardised_logo_url, logo_url, bonus, name } = operator || {};
@@ -64,10 +66,10 @@ export default function TemplateOne({
           >
             <LazyImage
               alt={operator?.name}
-              src={imagePrettyUrl(logo, 120, 120)}
+              src={imagePrettyUrl(logo, width, height)}
               loading="eager"
-              height={120}
-              width={100}
+              height={height}
+              width={width}
             />
             <div className={styles.details}>
               {name && <span>{name}</span>}
@@ -142,5 +144,7 @@ TemplateOne.propTypes = {
     type: PropTypes.string,
     name: PropTypes.string,
   }),
+  width: PropTypes.string,
+  height: PropTypes.string,
   showRoundedRating: PropTypes.bool,
 };

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

@@ -19,6 +19,7 @@ const Content = ({
   page,
   isContentCollapsible = false,
   icon = <IoIosArrowDown />,
+  moduleWidth = 960,
 }) => {
   const { show_more_label, show_more_enabled } = module || {};
 
@@ -65,7 +66,7 @@ const Content = ({
       `}
     >
       {parse(content, {
-        replace: (node) => replaceMedia(node, page, translations),
+        replace: (node) => replaceMedia(node, page, translations, moduleWidth),
       })}
     </div>
   );
@@ -110,6 +111,7 @@ Content.propTypes = {
   isModuleIntroduction: PropTypes.string,
   isContentCollapsible: PropTypes.bool,
   icon: PropTypes.node,
+  moduleWidth: PropTypes.node,
 };
 
 export default Content;

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

@@ -12,7 +12,7 @@ const Newsletter = ({
   openBtnText = 'Unlock Bonuses',
   isSticky = false,
   showLabels = true,
-  titleType = 'p',
+  titleType = 'h2',
 }) => {
   const [toggleNewsetter, setToggleNewsletter] = useState(false);
   const [isClicked, setIsClicked] = useState(false);

package/src/components/molecules/spotlights_v2/icon/template-one/index.js

@@ -6,14 +6,19 @@ import Link from '../../../../../hooks/link';
 import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
 import styles from './template-one.module.scss';
 
-export default function TemplateOne({ module }) {
+export default function TemplateOne({ module, width = 106, height = 106 }) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
 
   const content = (res) => (
     <>
       {res?.icon && (
-        <LazyImage height={106} width={106} src={imagePrettyUrl(res?.icon)} alt={res?.link_text} />
+        <LazyImage
+          height={height}
+          width={width}
+          src={imagePrettyUrl(res?.icon, width, height)}
+          alt={res?.link_text}
+        />
       )}
       <p>{res?.link_text || translate(translations, 'read_more', 'Read more')}</p>
       {res.subtitle && <span>{res.subtitle}</span>}
@@ -43,4 +48,6 @@ TemplateOne.propTypes = {
   module: PropTypes.shape({
     items: PropTypes.shape({}),
   }).isRequired,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

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

@@ -6,14 +6,19 @@ import Link from '../../../../../hooks/link';
 import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
 import styles from './template-one.module.scss';
 
-export default function TemplateOne({ module }) {
+export default function TemplateOne({ module, width = '295', height = '260' }) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
 
   const content = (res) => (
     <>
       {res?.image && (
-        <LazyImage width={295} height={260} src={imagePrettyUrl(res?.image)} alt={res?.link_text} />
+        <LazyImage
+          width={width}
+          height={height}
+          src={imagePrettyUrl(res?.image, width, height)}
+          alt={res?.link_text}
+        />
       )}
       {/* Need to talk to add this field on hercules */}
       <p>
@@ -43,4 +48,6 @@ TemplateOne.propTypes = {
   module: PropTypes.shape({
     items: PropTypes.shape({}),
   }).isRequired,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

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

@@ -7,13 +7,15 @@ import Link from '../../../../../hooks/link';
 import { imagePrettyUrl, translate } from '../../../../../helpers/getters.mjs';
 import styles from './template-two.module.scss';
 
-export default function TemplateOne({ module }) {
+export default function TemplateOne({ module, width = '340', height = '268' }) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
 
   const content = (res) => (
     <>
-      {res?.image && <LazyImage src={imagePrettyUrl(res?.image)} />}
+      {res?.image && (
+        <LazyImage src={imagePrettyUrl(res?.image, width, height)} width={width} height={height} />
+      )}
       <p>
         {res?.link_text || translate(translations, 'link_text_spotlights', 'Top Online Casinos')}{' '}
         {res.link?.value && <FaArrowRight size={20} color="#fff" />}
@@ -44,4 +46,6 @@ TemplateOne.propTypes = {
   module: PropTypes.shape({
     items: PropTypes.shape({}),
   }).isRequired,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

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

@@ -12,6 +12,8 @@ export default function TemplateOne({
   scrollableContent = false,
   buttonType = 'secondary',
   buttonSize = 'm',
+  width = '300',
+  height = '176',
 }) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
@@ -26,7 +28,11 @@ export default function TemplateOne({
             <div className={`${styles.item} ${scrollableContent && styles.scrollContent}`}>
               <div className={styles.topSection}>
                 {res?.image && (
-                  <LazyImage width={300} height={176} src={imagePrettyUrl(res?.image)} />
+                  <LazyImage
+                    width={width}
+                    height={height}
+                    src={imagePrettyUrl(res?.image, width, height)}
+                  />
                 )}
                 {res?.label && <TitleTag>{res.label}</TitleTag>}
                 {res.subtitle && <span>{res.subtitle}</span>}
@@ -67,4 +73,6 @@ TemplateOne.propTypes = {
   scrollableContent: PropTypes.bool,
   buttonType: PropTypes.string,
   buttonSize: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

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

@@ -10,6 +10,8 @@ export default function TemplateOne({
   characterMaxReadMore = 600,
   buttonType = 'secondary',
   buttonSize = 'm',
+  width = '104',
+  height = '104',
 }) {
   const { items } = module;
   return (
@@ -26,6 +28,8 @@ export default function TemplateOne({
               scrollableContent={scrollableContent}
               buttonType={buttonType}
               buttonSize={buttonSize}
+              width={width}
+              height={height}
             />
           );
         })
@@ -43,4 +47,6 @@ TemplateOne.propTypes = {
   characterMaxReadMore: PropTypes.number,
   buttonType: PropTypes.string,
   buttonSize: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

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

@@ -17,6 +17,8 @@ export default function TemplateOne({
   scrollableContent = false,
   buttonType = 'secondary',
   buttonSize = 'm',
+  width = '104',
+  height = '104',
 }) {
   const { translations } = useContext(Context) || {};
   const [showMore, setShowMore] = useState(false);
@@ -25,7 +27,13 @@ export default function TemplateOne({
   return (
     <div className={styles.item}>
       <div className={styles.topSection}>
-        {item?.image && <LazyImage width={104} height={104} src={imagePrettyUrl(item?.image)} />}
+        {item?.image && (
+          <LazyImage
+            width={width}
+            height={height}
+            src={imagePrettyUrl(item?.image, width, height)}
+          />
+        )}
         {item?.label && <TitleTag>{item?.label}</TitleTag>}
         {item?.text && (
           <div
@@ -85,4 +93,6 @@ TemplateOne.propTypes = {
   scrollableContent: PropTypes.bool,
   buttonType: PropTypes.string,
   buttonSize: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

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

@@ -13,6 +13,8 @@ export default function TemplateOne({
   buttonType = 'secondary',
   buttonSize = 'm',
   titleType = 'label',
+  width = '104',
+  height = '104',
 }) {
   const { items } = module;
   const { translations } = useContext(Context) || {};
@@ -27,7 +29,11 @@ export default function TemplateOne({
             <div className={`${styles.item} ${scrollableContent && styles.scrollContent}`}>
               <div className={styles.topSection}>
                 {res?.image && (
-                  <LazyImage width={104} height={104} src={imagePrettyUrl(res?.image)} />
+                  <LazyImage
+                    width={width}
+                    height={height}
+                    src={imagePrettyUrl(res?.image, width, height)}
+                  />
                 )}
                 {res?.label && <TitleTag className={styles.titleTag || ''}>{res.label}</TitleTag>}
                 {res.subtitle && <span>{res.subtitle}</span>}
@@ -68,4 +74,6 @@ TemplateOne.propTypes = {
   buttonType: PropTypes.string,
   buttonSize: PropTypes.string,
   titleType: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };

package/src/components/molecules/toplist/default-row/index.js

@@ -23,6 +23,8 @@ const Row = ({
   className,
   nofollow = false,
   module,
+  width = '100',
+  height = '100',
 }) => {
   const reviewPath = item.review_link ? `/${item.review_link}` : item.path || null;
   const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;
@@ -51,9 +53,9 @@ const Row = ({
       >
         <LazyImage
           alt={getAltText(imageObject, item.name)}
-          src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 100, 100)}
-          width={100}
-          height={100}
+          src={imagePrettyUrl(imageObject?.filename || item?.logo_url, width, height)}
+          width={width}
+          height={height}
         />
       </PrettyLink>
       <Bonus module="bonus" item={item} tracker={oneliner} />
@@ -104,6 +106,8 @@ Row.propTypes = {
     bonus: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   }).isRequired,
   pageTemplate: PropTypes.string,
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default Row;

package/src/components/organisms/accordion/variants/template-two/index.js

@@ -8,7 +8,7 @@ import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl } from '~helpers/getters';
 
-const TemplateTwo = ({ module, author }) => {
+const TemplateTwo = ({ module, author, width = '36', height = '36' }) => {
   const { items } = module;
   const usernames = [
     'mindbrew94',
@@ -85,8 +85,8 @@ const TemplateTwo = ({ module, author }) => {
                       className={styles.userAvatar}
                       alt="user-avatar"
                       filename="user_avatar"
-                      width={36}
-                      height={36}
+                      width={width}
+                      height={height}
                     />
                   </div>
                 </div>
@@ -99,9 +99,9 @@ const TemplateTwo = ({ module, author }) => {
                         <LazyImage
                           alt={author.name}
                           loading="eager"
-                          width={36}
-                          height={36}
-                          src={imagePrettyUrl(author.image, 36, 36)}
+                          width={width}
+                          height={height}
+                          src={imagePrettyUrl(author.image, width, height)}
                         />
                       </Link>
                     </div>
@@ -131,6 +131,8 @@ TemplateTwo.propTypes = {
     profile_page_path: PropTypes.string,
     name: PropTypes.string,
   }),
+  width: PropTypes.string,
+  height: PropTypes.string,
 };
 
 export default TemplateTwo;

package/src/components/pages/tracker/index-ssr.js

@@ -24,6 +24,8 @@ const Tracker = ({
   operatorLogo = false,
   operatorLogoWidth = 80,
   operatorLogoHeight = 80,
+  siteLogoWidth = '100',
+  siteLogoHeight = '100',
   serverData,
 }) => {
   const { operator, page, translations } = pageContext;
@@ -84,7 +86,7 @@ const Tracker = ({
           <div className={styles.container || ''}>
             {background}
             <div className={styles.content || ''}>
-              <LazyImage alt="Site logo" src={logo} />
+              <LazyImage alt="Site logo" src={logo} width={siteLogoWidth} height={siteLogoHeight} />
               <p
                 className={`${styles.mainText || ''} ${
                   operatorLogo && (styles.mainTextWithlogo || '')

package/src/components/pages/tracker/index.js

@@ -24,6 +24,8 @@ const Tracker = ({
   operatorLogo = false,
   operatorLogoWidth = 80,
   operatorLogoHeight = 80,
+  siteLogoWidth = '185',
+  siteLogoHeight = '45',
 }) => {
   const { operator, page, translations } = pageContext;
 
@@ -78,7 +80,7 @@ const Tracker = ({
           <div className={styles.container || ''}>
             {background}
             <div className={styles.content || ''}>
-              <LazyImage alt="Site logo" src={logo} />
+              <LazyImage alt="Site logo" src={logo} width={siteLogoWidth} height={siteLogoHeight} />
               <p
                 className={`${styles.mainText || ''} ${
                   operatorLogo && (styles.mainTextWithlogo || '')

package/src/components/pages/tracker-geo/index-ssr.js

@@ -22,6 +22,8 @@ export default function TrackerGeo({
   operatorLogo = false,
   operatorLogoWidth = 80,
   operatorLogoHeight = 80,
+  siteLogoWidth = '100',
+  siteLogoHeight = '100',
 }) {
   const { page, operatorsByMarket } = pageContext;
   const operator = operatorsByMarket[Object.keys(operatorsByMarket)[0]][0];
@@ -106,7 +108,7 @@ export default function TrackerGeo({
           <div className={styles.container}>
             {background}
             <div className={styles.content}>
-              <LazyImage alt="Site logo" src={logo} />
+              <LazyImage alt="Site logo" src={logo} width={siteLogoWidth} height={siteLogoHeight} />
               <p
                 className={`${styles.mainText} ${operatorLogo && styles.mainTextWithlogo}`}
               >{`${mainText.replace(

package/src/components/pages/tracker-geo/index.js

@@ -22,6 +22,8 @@ export default function TrackerGeo({
   operatorLogo = false,
   operatorLogoWidth = 80,
   operatorLogoHeight = 80,
+  siteLogoWidth = '100',
+  siteLogoHeight = '100',
 }) {
   const { page, operatorsByMarket } = pageContext;
   const operator = operatorsByMarket[Object.keys(operatorsByMarket)[0]][0];
@@ -121,7 +123,7 @@ export default function TrackerGeo({
           <div className={styles.container}>
             {background}
             <div className={styles.content}>
-              <LazyImage alt="Site logo" src={logo} />
+              <LazyImage alt="Site logo" src={logo} width={siteLogoWidth} height={siteLogoHeight} />
               <p
                 className={`${styles.mainText} ${operatorLogo && styles.mainTextWithlogo}`}
               >{`${mainText.replace(

package/src/helpers/getters.test.js

@@ -71,6 +71,12 @@ describe('Getters Helper', () => {
     expect(Getters.textWordsLimit(text, 2)).toEqual('Lorem Ipsum...');
     expect(Getters.textWordsLimit(1, 2)).toEqual(null);
   });
+  test('textWordsLimit() for texts with markup', () => {
+    const text = `<a class="abc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </>`;
+    expect(Getters.textWordsLimit(text, 100)).toEqual(
+      'Lorem Ipsum is simply dummy text of the printing and typesetting industry. '
+    );
+  });
 
   test('filterImgSrc()', () => {
     expect(Getters.filterImgSrc('/wp-content/photo.jpg')).toEqual(
@@ -95,6 +101,13 @@ describe('Getters Helper', () => {
   });
 
   test('getPageImage()', () => {
+    expect(
+      Getters.getPageImage({
+        relation_type: 'operator',
+        featured_image: 'foo.jpg',
+        relation: { default_logo_url: 'foo.jpg' },
+      })
+    ).toEqual(Getters.imagePrettyUrl('foo.jpg'));
     expect(
       Getters.getPageImage({ relation_type: 'operator', relation: { default_logo_url: 'foo.jpg' } })
     ).toEqual(Getters.imagePrettyUrl('foo.jpg'));
@@ -260,6 +273,14 @@ describe('Getters Helper', () => {
     expect(module).toEqual({ name: 'menu', children: 'hello' });
   });
 
+  test('getFirstModuleByName() if no modules', () => {
+    const object = {
+      modules: null,
+    };
+    const module = Getters.getFirstModuleByName(object, 'menu');
+    expect(typeof module).toEqual('object');
+  });
+
   test('translate()', () => {
     const object = { hello: 'world' };
     expect(Getters.translate(object, 'hello')).toEqual('world');

package/src/helpers/processor/index.mjs

@@ -115,12 +115,12 @@ export function processSections(sections, skipPost = false, page, translations,
     }
     if (sections[sectionKey] && sections[sectionKey].modules) {
       sections[sectionKey].modules.forEach((module, key) => {
-        if (shouldSavePrefilled(module, siteName) && savedModules[module.value_id]) {
-          Object.assign(module, savedModules[module.value_id]);
+        if (shouldSavePrefilled(module, siteName) && savedModules[module.module_value_id]) {
+          Object.assign(module, savedModules[module.module_value_id]);
         } else {
           if (module.value_type === ModuleValue.VALUE_TYPE_PREFILLED_MODULE_MARKET) {
             module = {
-              ...cloneDeep(prefilledMarketModules[module.value_id]),
+              ...cloneDeep(prefilledMarketModules[module.module_value_id] || prefilledMarketModules[module.value_id]),
               value_type: ModuleValue.VALUE_TYPE_PREFILLED_MODULE_MARKET,
             };
           }
@@ -142,8 +142,9 @@ export function processSections(sections, skipPost = false, page, translations,
           sections[sectionKey].modules[key] = module;
 
           if (shouldSavePrefilled(module, siteName)) {
-            savedModules[module.value_id] = module;
+              savedModules[module.module_value_id] = module;
           }
+         
         }
       });
     }

package/src/helpers/processor/modules.mjs

@@ -376,5 +376,13 @@ export function processModule(
     processTopListModule(module, relations, pages, markets);
   } else if (module.name === 'menu' && menus && menus[module.menu_id]) {
     module = Object.assign(module, menus[module.menu_id]);
+  } else if (module.name === 'statistics_counter') {
+    const pagesByTemplate = Object.values(pages)
+      .flatMap(category => Object.values(category))
+      .reduce((makeCount, page) => {
+        makeCount[page.template] = (makeCount[page.template] || 0) + 1;
+        return makeCount;
+      }, {});
+    module.stats = pagesByTemplate;
   }
 }

package/src/helpers/replaceMedia.js

@@ -8,7 +8,7 @@ import { parseCss } from 'gatsby-core-theme/src/helpers/css-parser';
 import { generatePlaceholderString } from './generators.mjs';
 import styles from '../components/molecules/content/content.module.scss';
 
-export default (node, page, translations) => {
+export default (node, page, translations, moduleWidth = 960) => {
   if (node.name === 'iframe') {
     return <Iframe src={node.attribs.src} />;
   }
@@ -27,12 +27,18 @@ export default (node, page, translations) => {
     } else if (classes?.includes('content-image--align-right')) {
       stylesClass = 'alignRight';
     }
+
+    const imgWidth =
+      node.attribs.width &&
+      (node.attribs.width > moduleWidth ? moduleWidth : node.attribs.width.replace('px', ''));
+    const imgHeight =
+      node.attribs.height &&
+      (node.attribs.height === 'auto' ? '298' : node.attribs.height.replace('px', ''));
+
     const lazyProps = {
-      src: parseContentImageUrl(node.attribs.src),
-      width: node.attribs.width && node.attribs.width.replace('px', ''),
-      height:
-        node.attribs.height &&
-        (node.attribs.height === 'auto' ? '298' : node.attribs.height.replace('px', '')),
+      src: parseContentImageUrl(node.attribs.src, imgWidth, imgHeight),
+      width: imgWidth,
+      height: imgHeight,
       style: node.attribs.style ? parseCss(node.attribs.style) : null,
       alt: node.attribs.alt ? node.attribs.alt : '',
       className: styles[stylesClass],

package/src/helpers/replaceMedia.test.js

@@ -21,7 +21,7 @@ describe('replaceMedia function', () => {
     };
     const transformedNode = transformNode(node, {}, {});
     expect(transformedNode.type.name).toBe('LazyImage');
-    expect(transformedNode.props.src).toBe('https://cdn.images.com/image.jpg');
+    expect(transformedNode.props.src).toBe('https://cdn.images.com/fit-in/300x200/image.jpg');
     expect(transformedNode.props.width).toBe('300');
     expect(transformedNode.props.height).toBe('200');
     expect(transformedNode.props.alt).toBe('Alt text');

package/src/helpers/strings.js

@@ -59,12 +59,13 @@ export function cleanHTML(string) {
   return string && string.replace(/(<([^>]+)>)/gi, '');
 }
 
-export function parseContentImageUrl(src) {
+export function parseContentImageUrl(src, width = null, height = null) {
   const srcArr = src && src.split('//');
+
   if (srcArr && srcArr.length === 2) {
     const refUrl = srcArr[1].substring(srcArr[1].indexOf('/'));
 
-    return imagePrettyUrl(refUrl.substring(1));
+    return imagePrettyUrl(refUrl.substring(1), width, height);
   }
 
   return src;

package/src/images/icons/check.js

@@ -2,7 +2,16 @@ import React from 'react';
 
 export default function check() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      role="img"
+      aria-labelledby="checkIcon"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title id="checkIcon">check icon</title>
       <path
         d="M12.4663 4.8C12.1997 4.53333 11.7997 4.53333 11.533 4.8L6.53301 9.8L4.46634 7.73333C4.19967 7.46667 3.79967 7.46667 3.53301 7.73333C3.26634 8 3.26634 8.4 3.53301 8.66667L6.06634 11.2C6.19967 11.3333 6.33301 11.4 6.53301 11.4C6.73301 11.4 6.86634 11.3333 6.99967 11.2L12.4663 5.73333C12.733 5.46667 12.733 5.06667 12.4663 4.8Z"
         fill="#3C3C40"

package/src/images/logo.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 28" focusable="false">
-  <title>
+<svg role="img" aria-labelledby="logoIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 28" focusable="false">
+  <title id="logoIcon">
     Logo Icon
   </title>
   <path d="M62.9 12h2.8v10h-2.8v-1.3c-1 1.5-2.3 1.6-3.1 1.6-3.1 0-5.1-2.4-5.1-5.3 0-3 2-5.3 4.9-5.3.8 0 2.3.1 3.2 1.6V12zm-5.2 5c0 1.6 1.1 2.8 2.8 2.8 1.6 0 2.8-1.2 2.8-2.8 0-1.6-1.1-2.8-2.8-2.8-1.6 0-2.8 1.2-2.8 2.8zm13.5-2.6V22h-2.8v-7.6h-1.1V12h1.1V8.6h2.8V12h1.9v2.4h-1.9zm8.5 0c-.7-.6-1.3-.7-1.6-.7-.7 0-1.1.3-1.1.8 0 .3.1.6.9.9l.7.2c.8.3 2 .6 2.5 1.4.3.4.5 1 .5 1.7 0 .9-.3 1.8-1.1 2.5s-1.8 1.1-3 1.1c-2.1 0-3.2-1-3.9-1.7l1.5-1.7c.6.6 1.4 1.2 2.2 1.2.8 0 1.4-.4 1.4-1.1 0-.6-.5-.9-.9-1l-.6-.2c-.7-.3-1.5-.6-2.1-1.2-.5-.5-.8-1.1-.8-1.9 0-1 .5-1.8 1-2.3.8-.6 1.8-.7 2.6-.7.7 0 1.9.1 3.2 1.1l-1.4 1.6zm6.1-1.1c1-1.4 2.4-1.6 3.2-1.6 2.9 0 4.9 2.3 4.9 5.3s-2 5.3-5 5.3c-.6 0-2.1-.1-3.2-1.6V22H83V5.2h2.8v8.1zm-.3 3.7c0 1.6 1.1 2.8 2.8 2.8 1.6 0 2.8-1.2 2.8-2.8 0-1.6-1.1-2.8-2.8-2.8-1.7 0-2.8 1.2-2.8 2.8zm13 3.5L93.7 12H97l3.1 5.7 2.8-5.7h3.2l-8 15.3h-3.2l3.6-6.8zM54 13.7h-7v2.8h3.7c-.6 1.9-2 3.2-4.6 3.2-2.9 0-5-2.4-5-5.3S43.1 9 46 9c1.6 0 3.2.8 4.2 2.1l2.3-1.5C51 7.5 48.6 6.3 46 6.3c-4.4 0-8 3.6-8 8.1s3.4 8.1 8 8.1 8-3.6 8-8.1c.1-.3 0-.5 0-.7z"/>

package/src/images/security.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" xmlns:v="https://vecta.io/nano">
-  <title>
+<svg role="img" aria-labelledby="securityIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" xmlns:v="https://vecta.io/nano">
+  <title id="securityIcon">
     Security Icon
   </title>
 <path d="M15.63 1.65a1 1 0 0 0-.84-.2A8 8 0 0 1 8.57.18a1 1 0 0 0-1.14 0 8 8 0 0 1-6.22 1.27 1 1 0 0 0-.84.2 1 1 0 0 0-.274.348A1 1 0 0 0 0 2.43v7.45a9 9 0 0 0 3.77 7.33l3.65 2.6a1 1 0 0 0 1.16 0l3.65-2.6A9 9 0 0 0 16 9.88V2.43a1 1 0 0 0-.37-.78zM14 9.88a7 7 0 0 1-2.93 5.7L8 17.77l-3.07-2.2A7 7 0 0 1 2 9.88v-6.3a10 10 0 0 0 6-1.39 10 10 0 0 0 6 1.39v6.3zM9.54 7.6l-2.7 2.7-.9-.9c-.188-.188-.444-.294-.7-.294s-.522.106-.7.294-.294.444-.294.7.106.522.294.7l1.6 1.6a1 1 0 0 0 .71.296 1 1 0 0 0 .71-.296L11 9c.188-.188.294-.444.294-.7s-.106-.522-.294-.7-.444-.294-.7-.294-.522.106-.7.294l-.04.01z" fill="#1C1A28"/><defs><linearGradient id="A" x1="15.945" y1="3.36" x2="2.181" y2="3.36" gradientUnits="userSpaceOnUse"><stop stop-color="#17d6cc"/><stop offset="1" stop-color="#17d68a"/></linearGradient></defs></svg>

package/src/images/verify.svg

@@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <title>
+<svg role="img" aria-labelledby="verifyIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title id="verifyIcon">
     Verify Icon
   </title>
 <g clip-path="url(#clip0_1978_1963)">

package/static/images/bell.svg

@@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <title>
+<svg role="img" aria-labelledby="bellIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title id="bellIcon">
     Bell Icon
   </title>
 <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z" fill="#1C1A28"/>

package/static/images/logo.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 28" focusable="false">
-  <title>
+<svg role="img" aria-labelledby="logoIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 106 28" focusable="false">
+  <title id="logoIcon">
     Logo Icon
   </title>
   <path d="M62.9 12h2.8v10h-2.8v-1.3c-1 1.5-2.3 1.6-3.1 1.6-3.1 0-5.1-2.4-5.1-5.3 0-3 2-5.3 4.9-5.3.8 0 2.3.1 3.2 1.6V12zm-5.2 5c0 1.6 1.1 2.8 2.8 2.8 1.6 0 2.8-1.2 2.8-2.8 0-1.6-1.1-2.8-2.8-2.8-1.6 0-2.8 1.2-2.8 2.8zm13.5-2.6V22h-2.8v-7.6h-1.1V12h1.1V8.6h2.8V12h1.9v2.4h-1.9zm8.5 0c-.7-.6-1.3-.7-1.6-.7-.7 0-1.1.3-1.1.8 0 .3.1.6.9.9l.7.2c.8.3 2 .6 2.5 1.4.3.4.5 1 .5 1.7 0 .9-.3 1.8-1.1 2.5s-1.8 1.1-3 1.1c-2.1 0-3.2-1-3.9-1.7l1.5-1.7c.6.6 1.4 1.2 2.2 1.2.8 0 1.4-.4 1.4-1.1 0-.6-.5-.9-.9-1l-.6-.2c-.7-.3-1.5-.6-2.1-1.2-.5-.5-.8-1.1-.8-1.9 0-1 .5-1.8 1-2.3.8-.6 1.8-.7 2.6-.7.7 0 1.9.1 3.2 1.1l-1.4 1.6zm6.1-1.1c1-1.4 2.4-1.6 3.2-1.6 2.9 0 4.9 2.3 4.9 5.3s-2 5.3-5 5.3c-.6 0-2.1-.1-3.2-1.6V22H83V5.2h2.8v8.1zm-.3 3.7c0 1.6 1.1 2.8 2.8 2.8 1.6 0 2.8-1.2 2.8-2.8 0-1.6-1.1-2.8-2.8-2.8-1.7 0-2.8 1.2-2.8 2.8zm13 3.5L93.7 12H97l3.1 5.7 2.8-5.7h3.2l-8 15.3h-3.2l3.6-6.8zM54 13.7h-7v2.8h3.7c-.6 1.9-2 3.2-4.6 3.2-2.9 0-5-2.4-5-5.3S43.1 9 46 9c1.6 0 3.2.8 4.2 2.1l2.3-1.5C51 7.5 48.6 6.3 46 6.3c-4.4 0-8 3.6-8 8.1s3.4 8.1 8 8.1 8-3.6 8-8.1c.1-.3 0-.5 0-.7z"/>

package/static/images/notification-bubble.svg

@@ -1,5 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<title>Notification Bubble Icon</title>
-<rect width="16" height="16" rx="8" fill="#F2281D"/>
-<path d="M7.51465 11.5H8.93066V4.30762H8.28125L5.74707 5.25V6.45605L7.51465 5.75781V11.5Z" fill="white"/>
+<svg role="img" aria-labelledby="notificationBubbleIcon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title id="notificationBubbleIcon">Notification Bubble Icon</title>
+    <rect width="16" height="16" rx="8" fill="#F2281D"/>
+    <path d="M7.51465 11.5H8.93066V4.30762H8.28125L5.74707 5.25V6.45605L7.51465 5.75781V11.5Z" fill="white"/>
 </svg>

package/static/images/security.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" xmlns:v="https://vecta.io/nano">
-  <title>
+<svg role="img" aria-labelledby="securityIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" xmlns:v="https://vecta.io/nano">
+  <title id="securityIcon">
     Security Icon
   </title>
 <path d="M15.63 1.65a1 1 0 0 0-.84-.2A8 8 0 0 1 8.57.18a1 1 0 0 0-1.14 0 8 8 0 0 1-6.22 1.27 1 1 0 0 0-.84.2 1 1 0 0 0-.274.348A1 1 0 0 0 0 2.43v7.45a9 9 0 0 0 3.77 7.33l3.65 2.6a1 1 0 0 0 1.16 0l3.65-2.6A9 9 0 0 0 16 9.88V2.43a1 1 0 0 0-.37-.78zM14 9.88a7 7 0 0 1-2.93 5.7L8 17.77l-3.07-2.2A7 7 0 0 1 2 9.88v-6.3a10 10 0 0 0 6-1.39 10 10 0 0 0 6 1.39v6.3zM9.54 7.6l-2.7 2.7-.9-.9c-.188-.188-.444-.294-.7-.294s-.522.106-.7.294-.294.444-.294.7.106.522.294.7l1.6 1.6a1 1 0 0 0 .71.296 1 1 0 0 0 .71-.296L11 9c.188-.188.294-.444.294-.7s-.106-.522-.294-.7-.444-.294-.7-.294-.522.106-.7.294l-.04.01z" fill="#1C1A28"/><defs><linearGradient id="A" x1="15.945" y1="3.36" x2="2.181" y2="3.36" gradientUnits="userSpaceOnUse"><stop stop-color="#17d6cc"/><stop offset="1" stop-color="#17d68a"/></linearGradient></defs></svg>