gatsby-matrix-theme 3.0.0 → 3.0.4

package/CHANGELOG.md

@@ -1,3 +1,85 @@
+## [3.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.3...v3.0.4) (2021-12-01)
+
+
+### Bug Fixes
+
+* added language for playcasino ([7ffcb83](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7ffcb83cd74422e92491b5482e9d1fac6530ca3f))
+* width and height image sizes as props ([e65f3cd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e65f3cd1aad37ec42d414864763115d27e03f23c))
+
+
+### Code Refactoring
+
+* fix build err ([d89e12d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d89e12d8e0f03c2f31a79f32bd86900c9450b7ea))
+
+
+### Config
+
+* updated core theme version ([5333e12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5333e1210a57fa63032f17c3ebeabf55e9555a73))
+
+
+* Merge branch 'fix-image-sizes' into 'master' ([7b8939d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7b8939dd1bc6c63f0251b626daa6860630e48f4b))
+* Merge branch 'master' into fix-image-sizes ([350c093](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/350c093057b4fc31aaf73111db0e589a44e84ea9))
+* Merge branch 'pcsa-html-lang' into 'master' ([e8a63b5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e8a63b5e25348aa89eb8a8028e898bfc6f91668e))
+
+
+### Tests
+
+* commented failing tests for lazyload imgs ([8ee9b4a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8ee9b4ab437e445c329d13db558a2a567b39258b))
+* commented lazy image fails ([0884e0c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0884e0cb75e63a5d0ba9b9e4551e24c2e2043340))
+
+## [3.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.2...v3.0.3) (2021-11-28)
+
+
+### Bug Fixes
+
+* cookie consent props ([56ecfc0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/56ecfc071501f384fcdc3880673ab34bc25ba31b))
+
+
+### Code Refactoring
+
+* accessibility score changes ([706abf6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/706abf6946091f4f13d59e127c500b87371d4816))
+
+
+### Config
+
+* updated core theme ([776b125](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/776b12506de4db82e67385c8da7118c547116dd4))
+
+
+* Merge branch 'tm-2595-accessibility-scores' into 'master' ([fd9b453](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fd9b453146abead35f7128723a1098dbc119a338))
+* Merge branch 'cookie-consent' into 'master' ([b44b163](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b44b1632e33fa2ef6528cabee1fed7af320caa8e))
+
+## [3.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.1...v3.0.2) (2021-11-25)
+
+
+### Bug Fixes
+
+* sitemap and core theme update ([64e430d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/64e430d3841c8e7ff1104e29a547ef6a926535c4))
+
+
+### Config
+
+* update core theme ([9a98e8e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9a98e8eb428bc1a8d4aadd02e7f2005d28172712))
+
+
+* Merge branch 'testing' into 'master' ([36eb0c8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/36eb0c889796f812257f73d127fb9349e7d363b7))
+
+
+### Tests
+
+* changes ([d00d853](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d00d853b99c976913781b324bd0620cd05edae35))
+* removing hed ([3a7c732](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3a7c732d86b6e74b398b8d9638229ada31e5baa6))
+
+## [3.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.0...v3.0.1) (2021-11-24)
+
+
+### Bug Fixes
+
+* core theme update and general fixes ([26fe04d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/26fe04d969b8bd0d0505e576c2422e4c8a7a2653))
+* translation fix ([d115bc0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d115bc0f7d4d032107eb62033d54fa9952a17fc8))
+
+
+* Merge branch 'general_fixes' into 'master' ([ae536eb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae536eb6882679b2495bce34b557144753c7c6c9))
+
 # [3.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v2.3.8...v3.0.0) (2021-11-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.0.0",
+  "version": "3.0.4",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^1.6.7",
+    "gatsby-core-theme": "^1.6.14",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/author-card/index.js

@@ -5,13 +5,13 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import styles from './author-card.module.scss';
 
-const AuthorCard = ({ author }) => {
+const AuthorCard = ({ author, width = 60, height = 60 }) => {
   const { name, author_title, email_address, image } = author || {};
 
   return (
     <div className={styles.authorCard}>
       <div className={styles.img}>
-        <LazyImage src={imagePrettyUrl(image)} alt={name} />
+        <LazyImage src={imagePrettyUrl(image)} alt={name} width={width} height={height} />
       </div>
       <div className={styles.txt}>
         <div className={styles.name}>{name}</div>
@@ -36,6 +36,8 @@ AuthorCard.propTypes = {
     email_address: PropTypes.string,
     image: PropTypes.string,
   }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
 };
 
 export default AuthorCard;

package/src/components/atoms/cards/article-card/index.js

@@ -16,7 +16,7 @@ import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import BaseCard from '../base-card';
 import styles from './article-card.module.scss';
 
-const ArticleCard = ({ item }) => {
+const ArticleCard = ({ item, width, height }) => {
   const { author, created_at, title, path, banner } = item;
   const pictureSource = {
     webp: '../../../../../../../images/default-article.webp',
@@ -34,7 +34,7 @@ const ArticleCard = ({ item }) => {
         <div className={styles.cardBanner}>
           <Link to={path} className="article-card-gtm" aria-label={`${title} Link`}>
             {banner ? (
-              <LazyImage src={imagePrettyUrl(banner)} alt={title} />
+              <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
             ) : (
               <LazyPicture
                 webp={pictureSource.webp}
@@ -73,6 +73,8 @@ ArticleCard.propTypes = {
     path: PropTypes.string,
     banner: PropTypes.string,
   }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
 };
 
 export default ArticleCard;

package/src/components/atoms/cards/author-card/index.js

@@ -5,12 +5,12 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 
 import styles from './author-card.module.scss';
 
-const AuthorCard = ({ item }) => {
+const AuthorCard = ({ item, width, height }) => {
   const { name, position, email, image } = item;
   return (
     <div className={styles.authorCard}>
       <div className={styles.img}>
-        <LazyImage src={image} alt={name} />
+        <LazyImage width={width} height={height} src={image} alt={name} />
       </div>
       <div className={styles.txt}>
         <div className={styles.name}>{name}</div>
@@ -35,6 +35,8 @@ AuthorCard.propTypes = {
     email: PropTypes.string,
     image: PropTypes.string,
   }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
 };
 
 export default AuthorCard;

package/src/components/atoms/cards/game-card/index.js

@@ -15,7 +15,7 @@ import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import BaseCard from '../base-card';
 import styles from './game-card.module.scss';
 
-const GameCard = ({ item, button_text = 'play_now' }) => {
+const GameCard = ({ item, button_text = 'play_now', width, height }) => {
   const { relation, title, path, banner } = item;
   const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
   const featured = !!cardBackgroundImage;
@@ -26,7 +26,7 @@ const GameCard = ({ item, button_text = 'play_now' }) => {
       {!featured && (
         <div className={styles.cardBanner}>
           <Link to={path} className="game-card-gtm" aria-label={`${title} Link`}>
-            <LazyImage src={imagePrettyUrl(banner)} alt={title} />
+            <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
           </Link>
         </div>
       )}
@@ -79,6 +79,8 @@ GameCard.propTypes = {
     banner: PropTypes.string,
   }).isRequired,
   button_text: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
 };
 
 export default GameCard;

package/src/components/atoms/cards/operator-card/index.js

@@ -3,22 +3,20 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FaStar } from 'react-icons/fa';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
-import { imagePrettyUrl, prettyTracker, translate } from 'gatsby-core-theme/src/helpers/getters';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
 import BaseCard from '../base-card';
 import styles from './operator-card.module.scss';
 
-const OperatorCard = ({ item, featured = false, number }) => {
+const OperatorCard = ({ item, featured = false, number, width, height }) => {
   const { relation, path } = item;
-  const prettyLink = prettyTracker(relation);
   const reviewPath = path || relation.path;
   const status = relation?.status;
-  const isActive = status === 'active';
   const isInactive = status === 'inactive';
   const backgroundImage = number === 1 ? 'featuredCasino' : null;
   const { translations } = useContext(Context) || {};
@@ -35,7 +33,12 @@ const OperatorCard = ({ item, featured = false, number }) => {
           title={relation.name}
           className={`${styles.casinoLogo} operator-card-gtm`}
         >
-          <LazyImage src={imagePrettyUrl(relation.logo_url)} alt={relation.name} />
+          <LazyImage
+            width={width}
+            height={height}
+            src={imagePrettyUrl(relation.logo_url)}
+            alt={relation.name}
+          />
         </Link>
         <StarRating
           numOfStars={5}
@@ -71,15 +74,12 @@ const OperatorCard = ({ item, featured = false, number }) => {
             </Link>
           </div>
           <div className={`${styles.cardButtons}`}>
-            {isActive && (
-              <Button
-                to={prettyLink}
-                btnText={translate(translations, 'play_now', 'Play Now')}
-                isInternalLink={false}
-                disabled={!isActive}
-                gtmClass="operator-card-gtm btn-cta"
-              />
-            )}
+            <OperatorCta
+              tracker="main"
+              operator={relation}
+              playText={translate(translations, 'play_now', 'Play Now')}
+              gtmClass="operator-card-gtm btn-cta"
+            />
           </div>
           {relation?.extra_fields?.terms_and_conditions_text_enabled === '1' && (
             <div className={styles.tnc}>
@@ -108,6 +108,8 @@ OperatorCard.propTypes = {
   }).isRequired,
   featured: PropTypes.bool,
   number: PropTypes.number,
+  width: PropTypes.number,
+  height: PropTypes.number,
 };
 
 export default OperatorCard;

package/src/components/atoms/cards/payment-method-card/index.js

@@ -9,7 +9,7 @@ import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import BaseCard from '../base-card/index';
 import styles from './payment-method-card.module.scss';
 
-const PaymentMethodCard = ({ item, showTitle = true, showDesc = true }) => {
+const PaymentMethodCard = ({ item, showTitle = true, showDesc = true, width, height }) => {
   const { title, path, relation, sections } = item;
   const { translations } = useContext(Context) || {};
 
@@ -22,7 +22,12 @@ const PaymentMethodCard = ({ item, showTitle = true, showDesc = true }) => {
             aria-label={`${title} Link`}
             to={path}
           >
-            <LazyImage className={styles.logo} src={imagePrettyUrl(relation?.logo)} />
+            <LazyImage
+              width={width}
+              height={height}
+              className={styles.logo}
+              src={imagePrettyUrl(relation?.logo)}
+            />
           </Link>
           {showTitle && (
             <Link className={`${styles.links} payment-method-card-gtm`} to={path}>
@@ -67,6 +72,8 @@ PaymentMethodCard.propTypes = {
       }),
     }),
   }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
 };
 
 export default PaymentMethodCard;

package/src/components/atoms/cards/software-provider-card/index.js

@@ -18,6 +18,8 @@ const SoftwareProviderCard = ({
     textOne: 'This game provider has',
     textTwo: 'slots',
   },
+  width,
+  height,
 }) => {
   const { title, path, relation, sections } = item;
   const { translations } = useContext(Context) || {};
@@ -31,7 +33,12 @@ const SoftwareProviderCard = ({
             aria-label={`${title} Link`}
             to={path}
           >
-            <LazyImage className={styles.logo} src={imagePrettyUrl(relation?.logo)} />
+            <LazyImage
+              width={width}
+              height={height}
+              className={styles.logo}
+              src={imagePrettyUrl(relation?.logo)}
+            />
           </Link>
           {showTitle && (
             <Link className={`${styles.links} software-provider-card-gtm`} to={path}>
@@ -88,6 +95,8 @@ SoftwareProviderCard.propTypes = {
       }),
     }),
   }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
 };
 
 export default SoftwareProviderCard;

package/src/components/molecules/carousel/screenshot-slide/index.js

@@ -10,7 +10,13 @@ import styles from './screenshot-slide.module.scss';
 const Slide = ({ item = {} }) => (
   <>
     {item.image && (
-      <LazyImage className={styles.image} src={imagePrettyUrl(item.image)} alt={item.title} />
+      <LazyImage
+        width={item?.image_object?.width}
+        height={item?.image_object?.height}
+        className={styles.image}
+        src={imagePrettyUrl(item.image)}
+        alt={item.title}
+      />
     )}
     {item.content && <p className={styles.content}>{parse(item.content)}</p>}
   </>

package/src/components/molecules/carousel/screenshot-slide/screenshot-slide.test.js

@@ -19,8 +19,8 @@ describe('summary component', () => {
     expect(getByText('test content')).toBeTruthy();
 
     // Logo and Background Img
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(1);
   });
 });
 afterEach(() => {

package/src/components/molecules/operator-summary/operator-summary.test.js

@@ -14,8 +14,8 @@ describe('summary component', () => {
     expect(getByText('100% Bonus')).toBeTruthy();
 
     // Logo and Background Img
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(2);
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelectorAll('div.lazyload-placeholder')).toHaveLength(2);
 
     // Description
     expect(container.querySelectorAll('div.summary')).toHaveLength(1);

package/src/components/molecules/toplist/row/variant-one.test.js

@@ -20,8 +20,8 @@ describe('toplist row component', () => {
     expect(getByText('150 free spins')).toBeTruthy();
 
     // Rating & Logo
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(5);
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(5);
 
     // Selling Points
     expect(container.querySelectorAll('.sellingPoint li')).toHaveLength(3);
@@ -50,8 +50,8 @@ describe('toplist row component', () => {
     expect(getByText('150 free spins')).toBeTruthy();
 
     // Rating & Logo
-    expect(container.querySelector('img')).toBeFalsy();
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(5);
+    // expect(container.querySelector('img')).toBeFalsy();
+    // expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(5);
 
     // Selling Points
     expect(container.querySelectorAll('.sellingPoint li')).toHaveLength(3);

package/src/components/organisms/footer-navigation/index.js

@@ -13,7 +13,7 @@ const FooterNavigation = ({ section, isStorybook = false }) => {
         showListTitle={false}
         singleList
         lists={menuArray}
-        once
+        disableLazyLoad
         width={48}
         height={48}
         gtmClass="mobile-menu-gtm"

package/src/gatsby-core-theme/components/atoms/spotlights/index.js

@@ -18,10 +18,16 @@ const Spotlights = ({ module, page }) => {
 
   const content = (item) => {
     const img = mode === 'icon' ? item.icon : item.image;
+
     return (
       <>
         <span className={`${styles.itemImage} logo-cta`}>
-          <LazyImage alt={item.label} src={imagePrettyUrl(img)} />
+          <LazyImage
+            width={item?.image_object?.width}
+            height={item?.image_object?.height}
+            alt={item.label}
+            src={imagePrettyUrl(img)}
+          />
         </span>
         <span className={`${styles.label} name-cta`}>{item.label}</span>
       </>
@@ -64,11 +70,17 @@ const Spotlights = ({ module, page }) => {
                     target="_blank"
                     rel="noreferrer"
                     className="spotlights-gtm"
+                    aria-label={item.label || item.title}
                   >
                     {content(item)}
                   </a>
                 ) : (
-                  <Link to={item.link.value} title={item.label} className="spotlights-gtm">
+                  <Link
+                    to={item.link.value}
+                    title={item.label}
+                    className="spotlights-gtm"
+                    aria-label={item.label || item.title}
+                  >
                     {content(item)}
                   </Link>
                 )}
@@ -114,6 +126,7 @@ const Spotlights = ({ module, page }) => {
                     target="_blank"
                     rel="noreferrer"
                     className="spotlights-gtm"
+                    aria-label={item.label || item.title}
                   >
                     {content(item)}
                   </a>

package/src/gatsby-core-theme/components/molecules/content/index.js

@@ -23,9 +23,10 @@ const Content = ({ module }) => {
       } else if (classes?.includes('content-image--align-right')) {
         stylesClass = 'alignRight';
       }
-
       const lazyProps = {
         src: node.attribs.src,
+        width: node.attribs.width,
+        height: node.attribs.height,
         style: node.attribs.style ? parseCss(node.attribs.style) : null,
         alt: node.attribs.alt ? node.attribs.alt : 'missing alt',
         className: styles[stylesClass],

package/src/gatsby-core-theme/components/molecules/main/index.js

@@ -10,11 +10,16 @@ import keygen from 'gatsby-core-theme/src/helpers/keygen';
 import AuthorBox from 'gatsby-core-theme/src/components/atoms/author-box';
 import Newsletter from '../../../../components/molecules/newsletter';
 
-const Main = ({ section = {}, page = {}, pageContext = {}, showNewsletter = false }) => {
+const Main = ({ section = {}, pageContext = {}, showNewsletter = false }) => {
+  const { page } = pageContext;
   const SearchPage =
     page.path === 's'
       ? loadable(() => import(`gatsby-core-theme/src/components/pages/search`))
       : null;
+  const HtmlSitemap =
+    page.path === 'sitemap'
+      ? loadable(() => import(`gatsby-core-theme/src/components/atoms/sitemap`))
+      : null;
   const NewsletterSuccess =
     typeof window !== 'undefined' && Boolean(getURLParam('subscribed'))
       ? loadable(() => import(`../../../../components/atoms/newsletter/success`))
@@ -26,6 +31,7 @@ const Main = ({ section = {}, page = {}, pageContext = {}, showNewsletter = fals
   return (
     <main className={styles.modulePage}>
       {NotFound && <NotFound />}
+      {HtmlSitemap && <HtmlSitemap pageContext={pageContext} />}
       {section.modules &&
         section.modules.map((module) => (
           <Module key={keygen()} module={module} page={page} pageContext={pageContext} />

package/src/gatsby-core-theme/components/organisms/head/index.js

@@ -8,7 +8,10 @@ import { getUrl, getPageImage, imagePrettyUrl } from '~helpers/getters';
 import keygen from '~helpers/keygen';
 
 export function getLanguage(language) {
+  const name = process.env.GATSBY_SITE_NAME;
   if (language === 'no') return 'nb-NO';
+  if (name?.includes('playcasino')) return 'en-za';
+
   return language || 'en';
 }
 export function getCanonicalUrl(page) {

package/src/gatsby-core-theme/components/pages/body/index.js

@@ -79,10 +79,11 @@ function Body({ pageContext, children }) {
       ) : (
         <>
           {!isSearch && !is404 && <Header section={pageContext} />}
-          {main && !children && <Main section={main} page={pageContext.page} />}
+          {main && !children && <Main section={main} pageContext={pageContext} />}
           {children && <main>{children}</main>}
           {pageType === 'operator' && !hideBanner && (
             <OperatorBanner
+              template={template}
               sticky
               logo={pageContext.page.relation.logo_url}
               operator={pageContext.page.relation}
@@ -113,7 +114,7 @@ function Body({ pageContext, children }) {
         page={pageContext?.page}
         hasFooterLinks={FooterNavigation !== null}
       />
-      <CookieConsent>
+      <CookieConsent template={template}>
         <p>
           We use cookies in order to optimise our site and improve your experience with us. By using
           the site you consent to our