gatsby-matrix-theme 19.0.1 → 19.0.3

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## [19.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.2...v19.0.3) (2023-04-12)
+
+
+### Bug Fixes
+
+* added author link as optional ([3e4ef4d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3e4ef4d2b4e3a814c47e88c250eb5829eb259fca))
+
+
+### Code Refactoring
+
+* update mobile device detect import and implementation ([08218c5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/08218c5f4f489c665645f9771aa70e3b5ead4d5b))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([be5c739](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/be5c739cbf2a15f3c3884d175712849efc89a550))
+* Merge branch 'tm-3348-remove-is-mobile-func' into 'master' ([edbceb8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/edbceb8d75b78469cce114092bc91bf86aa1e201))
+
+## [19.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.1...v19.0.2) (2023-04-12)
+
+
+### Bug Fixes
+
+* article styling ([6d7e98d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6d7e98da6da7eda8c1039d7cf7ae3a5d9cc03010))
+* conflicts ([60b9650](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/60b9650b58b61b5ab6e57072c6f8a48da75c76cb))
+* faq display front end matrix ([d379930](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d37993016fa3866e9ad955b3c0accc5f9f09967c))
+* tests ([b78f03e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b78f03e921475209f0af76e5a2919c21d5cf1fb5))
+* tests ([7145589](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7145589aad290e31505ab3a8a8eff5a81f51ba3a))
+* updaet core version ([6bf6788](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6bf6788f12ea33fa4248f0f4418fa12d23e74159))
+
+
+* Merge branch 'tm-3311-article-cards' into 'master' ([96cd092](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/96cd092a2d7d0d9ee049465385d5e5c531be1590))
+* Merge branch 'tm-3381-faq-section-matrix' into 'master' ([88a229b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/88a229b815777a3e75d70b27e76755cc03f43aa1))
+
 ## [19.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.0...v19.0.1) (2023-04-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "19.0.1",
+  "version": "19.0.3",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "20.0.0",
+    "gatsby-core-theme": "20.0.1",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/atoms/cards/article-card/template-one/article-card.module.scss

@@ -28,99 +28,57 @@
     }
   }
 }
-.cardMeta {
-  @include flex-direction(row);
+
+.image {
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 1.2rem;
+  }
+}
+
+.showAuthorOnOneLine {
   @include flex-align(center, space-between);
+  font-size: 14px;
+  line-height: 22px;
   width: 100%;
+  gap: .2rem;
 
-  > div {
-    display: grid;
-    grid-template-columns: auto 1fr;
+  img {
+    border-radius: 10rem;
   }
 
-  > div > div {
-    white-space: normal !important;
-    > a {
-      display: block !important;
-      color: #165af8 !important;
-      font-size: 1.4rem;
-      line-height: 21px;
-      font-weight: 700 !important;
-    }
-    > img {
-      position: absolute;
-      left: -0.6rem;
-      max-width: 2.4rem;
-      max-height: 2.4rem;
-    }
-    > span {
-      font-size: 1.4rem;
-      line-height: 2.2rem;
-      color: #3e3c47 !important;
-      font-weight: 500;
-    }
-    > p {
-      padding-left: 2.8rem;
-      span {
-        font-size: 1.4rem;
-        color: #3e3c47;
-        font-weight: 400;
-        line-height: 22px;
-        text-transform: capitalize;
-        white-space: nowrap;
-      }
+  > div {
+    @include flex-align(flex-start, flex-start);
+    gap: .2rem;
+    flex-grow: 1;
+    >span {
+      flex-grow: 1;
+      @include flex-align(flex-end, flex-end);
     }
   }
 }
-.cardBanner {
-  a {
-    width: 100%;
-    img {
-      height: 24rem;
-      object-fit: cover;
-      width: 100%;
-      border: var(--cards-border);
-      border-radius: 1.2rem;
-      box-sizing: content-box;
-    }
+
+.showAuthorBlock {
+  @include flex-align(center, flex-start);
+  font-size: 14px;
+  line-height: 22px;
+  width: 100%;
+  gap: .5rem;
+
+  img {
+    border-radius: 10rem;
   }
-}
 
-.showAuthorOnOneLine {
-  position: relative;
   > div {
-    @include flex-direction(column);
-    @include flex-align(flex-start, center);
-    > div {
-      padding-left: 5.6rem;
-      a {
-        &::before {
-          padding: 0 !important;
-        }
-      }
-      > span {
-        color: #6b6a72 !important;
-      }
-      img {
-        min-width: 4.8rem;
-        min-height: 4.8rem;
-        bottom: 0;
-        margin: 0 auto;
-        object-fit: cover;
-        top: -0.25rem;
-      }
-      p {
-        padding-left: 0;
-        span {
-          display: none;
-        }
-      }
-    }
-  } 
+    @include flex-align(flex-start, flex-start);
+    gap: .2rem;
+    flex-direction: column;
 
-  &.hideDate {
-    a {
-      margin: 1.3rem 0;
+    >span {
+      flex-grow: 1;
+      @include flex-align(flex-end, flex-end);
     }
   }
 }

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

@@ -1,62 +1,72 @@
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable camelcase */
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import Link from 'gatsby-core-theme/src/hooks/link';
-import { imagePrettyUrl, getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
+import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import LazyPicture from 'gatsby-core-theme/src/hooks/lazy-picture';
-import Author from 'gatsby-core-theme/src/components/atoms/author';
-
+import { formatDate } from '~helpers/date-time';
+import { Context } from '~context/MainProvider';
 import styles from './article-card.module.scss';
 
-const ArticleCard = ({ showAuthorOnOneLine = false, item, width, height, showDate = true }) => {
+const ArticleCard = ({
+  showAuthorOnOneLine = false,
+  showAuthorAsLink = false,
+  item,
+  width = 360,
+  height = 240,
+  showDate = true,
+}) => {
   const { author, title, path, banner } = item;
-  const pictureSource = {
-    webp: '../../../../../../../images/default-article.webp',
-    fallback: '../../../../../../../images/default-article.jpg',
-  };
-  const cardBackgroundImage = getSectionExtraField(null, item, 'card_background_image');
-  const featured = !!cardBackgroundImage;
+  const { translations } = useContext(Context) || {};
+  const imgSize = showAuthorOnOneLine ? 30 : 48;
+  const date = item?.updated_at || item?.created_at;
+  const formatedDate = date && formatDate(date, 'DD.MM.YYYY', '/', 'en-GB');
 
   return (
     <div className={styles.article}>
-      {!featured && (
-        <div className={styles.cardBanner}>
-          <Link to={path} className="article-card-gtm" aria-label={`${title} Link`}>
-            {banner ? (
-              <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
-            ) : (
-              <LazyPicture
-                webp={pictureSource.webp}
-                fallback={pictureSource.fallback}
-                alt={title}
-              />
-            )}
-          </Link>
-        </div>
+      {banner && (
+        <Link to={path} className={`${styles.image} article-card-gtm`} aria-label={`${title} Link`}>
+          <LazyImage
+            width={width}
+            height={height}
+            src={imagePrettyUrl(banner, width, height)}
+            alt={title}
+          />
+        </Link>
       )}
-      <div className={`${styles.cardContent} ${featured && styles.featured}`}>
+      <div className={`${styles.cardContent}`}>
         <Link to={path} className="article-card-gtm">
           <span className={styles.cardTitle}>{title}</span>
         </Link>
+
         {typeof author === 'object' && (
           <div
-            className={`${styles.cardMeta} ${showAuthorOnOneLine && styles.showAuthorOnOneLine} ${
-              !showDate ? styles.hideDate : ''
-            }`}
+            className={`${
+              showAuthorOnOneLine ? styles.showAuthorOnOneLine : styles.showAuthorBlock
+            } `}
           >
-            <Author
-              prefix="by"
-              name={author?.name}
-              splitDateFormat="/"
-              isCardsAuthor
-              authorImg={author?.image}
-              date={showDate ? item?.updated_at || item?.created_at : null}
-              link={author?.profile_page_path}
-              authorImageHeight={showAuthorOnOneLine ? 48 : 30}
-              authorImageWidth={showAuthorOnOneLine ? 48 : 30}
+            <LazyImage
+              alt={author?.name}
+              width={imgSize}
+              height={imgSize}
+              src={imagePrettyUrl(author?.image, imgSize, imgSize)}
             />
+            <div>
+              {showAuthorOnOneLine && (
+                <p>
+                  <span>{translate(translations, 'by', 'By')}</span>
+                </p>
+              )}
+              {showAuthorAsLink ? (
+                <Link to={author?.profile_page_path} title={author?.name}>
+                  {author?.name}
+                </Link>
+              ) : (
+                <span>{author?.name}</span>
+              )}
+              {showDate && <span className={styles.noLink}>{formatedDate}</span>}
+            </div>
           </div>
         )}
       </div>
@@ -82,6 +92,7 @@ ArticleCard.propTypes = {
   height: PropTypes.number,
   showAuthorOnOneLine: PropTypes.bool,
   showDate: PropTypes.bool,
+  showAuthorAsLink: PropTypes.bool,
 };
 
 export default ArticleCard;

package/src/components/atoms/cards/article-card/template-one/template-one.test.js

@@ -18,28 +18,33 @@ const item = {
 
 describe('ArticleCard', () => {
   it('render Article Card', () => {
-    const { getByLabelText, getByText } = render(
+    const { getByText } = render(
       <ArticleCard item={item} width={200} height={200} showAuthorOnOneLine={false} />
     );
-    expect(getByLabelText('Sample Article Link')).toBeInTheDocument();
+
     expect(getByText('Sample Article')).toBeInTheDocument();
     expect(getByText('John Doe')).toBeInTheDocument();
+    expect(getByText('01/02/2022')).toBeInTheDocument();
   });
 
   it('should render the article card with author on one line', () => {
-    const { getByLabelText, getByText } = render(
+    const { getByText } = render(
       <ArticleCard item={item} width={200} height={200} showAuthorOnOneLine />
     );
-    expect(getByLabelText('Sample Article Link')).toBeInTheDocument();
+    expect(getByText('By')).toBeInTheDocument();
+    expect(getByText('John Doe')).toBeInTheDocument();
+    expect(getByText('01/02/2022')).toBeInTheDocument();
     expect(getByText('Sample Article')).toBeInTheDocument();
   });
 
   it('without a banner image', () => {
     const itemWithoutBanner = { ...item, banner: null };
-    const { getByLabelText, getByText } = render(
+    const { getByText } = render(
       <ArticleCard item={itemWithoutBanner} width={200} height={200} showAuthorOnOneLine={false} />
     );
-    expect(getByLabelText('Sample Article Link')).toBeInTheDocument();
+
+    expect(getByText('John Doe')).toBeInTheDocument();
+    expect(getByText('01/02/2022')).toBeInTheDocument();
     expect(getByText('Sample Article')).toBeInTheDocument();
   });
 

package/src/components/molecules/operator-exclusive/index.js

@@ -2,7 +2,7 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-nested-ternary */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import Link from 'gatsby-core-theme/src/hooks/link';
@@ -13,7 +13,6 @@ import { imagePrettyUrl, translate, getAltText } from '~helpers/getters';
 import styles from './oeprator-exlusive.module.scss';
 
 const Banner = ({ bonus, template }) => {
-  const [showTracker, setShowTracker] = useState('');
   const { value, module_title } = bonus;
   const [, reviewPath] = value.review_link.split('.co.za/');
   const splitBy = module_title?.includes('OR') ? 'OR' : module_title?.includes('+') ? '+' : '&';
@@ -22,16 +21,7 @@ const Banner = ({ bonus, template }) => {
     : bonus?.value?.one_liners?.main?.one_liner.split('+');
   const { translations } = useContext(Context) || {};
   const imageObject = value?.standardised_logo_url_object || value?.logo_url_object;
-
-  const isMobile = isMobileDevice();
-
-  useEffect(() => {
-    if (isMobile) {
-      setShowTracker('mobbanner');
-    } else {
-      setShowTracker('banner');
-    }
-  }, [isMobile]);
+  const tracker = isMobileDevice() ? 'mobbanner' : 'banner';
 
   return (
     <div className={`${styles.wrapper}`}>
@@ -68,7 +58,7 @@ const Banner = ({ bonus, template }) => {
                 inactive: { translationKey: 'inactive', defaultValue: 'Not Accepting New Players' },
                 blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
               }}
-              tracker={showTracker}
+              tracker={tracker}
               gtmClass="banner-operator-cta-gtm"
               pageTemplate={template}
             />

package/src/components/molecules/small-welcome-bonus/index.js

@@ -12,7 +12,7 @@ import {
 } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
-import { isMobileDevice } from '../../../helpers/mobile-detect';
+import { isMobileDevice } from 'gatsby-core-theme/src/helpers/device-detect';
 
 import styles from './small-welcome-bonus.module.scss';
 
@@ -20,12 +20,11 @@ const Index = ({ page }) => {
   const operator = page?.extra_fields?.game_review_summary_operator;
   const { logo_url, status } = operator;
   const { translations } = useContext(Context) || {};
-  const isMobile = isMobileDevice();
   const prettyLink = prettyTracker(operator, 'main', false, page.template);
   let playNow = translate(translations, 'play_now', 'Play now');
   const bonus = getBonus('main', operator);
   const logUrlObject = operator?.logo_url_object;
-  if (isMobile) {
+  if (isMobileDevice()) {
     playNow = `> ${translate(translations, 'play_for_real_at', 'Play for real at')} @ ${
       operator.name
     }`;

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

@@ -11,10 +11,10 @@ import PropTypes from 'prop-types';
 import { MdClose } from '@react-icons/all-files/md/MdClose';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { isMobileDevice } from 'gatsby-core-theme/src/helpers/device-detect';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import PopupCard from '../../atoms/cards/popup-card';
 import { setIdleTimeout } from '../../../helpers/popup';
-import { isMobileDevice } from '../../../helpers/mobile-detect';
 import months from '../../../constants/months';
 
 import styles from './popup.module.scss';

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

@@ -59,7 +59,11 @@ const Modules = ({ module, page, pageContext, index, exclOperator }) => {
       case 'spotlights':
         return loadable(() => import('gatsby-core-theme/src/components/atoms/spotlights'));
       case 'faq':
-        return loadable(() => import('../../../../components/molecules/faq'));
+        // eslint-disable-next-line react/destructuring-assignment
+        if (moduleItem?.display_front_end === '1') {
+          return loadable(() => import('../../../../components/molecules/faq'));
+        }
+        return null;
       // Template blocks
       case 'horse_racing_calculator':
         return loadable(() => import('../../../../components/molecules/horse-calculator'));

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

@@ -10,7 +10,6 @@ import Slide from '../../../../components/molecules/carousel/screenshot-slide';
 import styles from './carousel.module.scss';
 
 const Carousel = ({ page = {}, module = {}, settings = {}, gtmClass = '' }) => {
-  const isMobile = isMobileDevice();
   // render one item per slide
   const renderOne = (items) => {
     const arr = [];
@@ -53,7 +52,7 @@ const Carousel = ({ page = {}, module = {}, settings = {}, gtmClass = '' }) => {
     return arr;
   };
 
-  const renderedItems = isMobile ? renderOne(module.items) : renderTwo(module.items);
+  const renderedItems = isMobileDevice() ? renderOne(module.items) : renderTwo(module.items);
 
   return (
     <div className={styles.carouselContainer}>