gatsby-matrix-theme 40.0.15 → 40.0.16

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [40.0.16](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v40.0.15...v40.0.16) (2024-04-23)
+
+
+### Code Refactoring
+
+* changes to pronoun on author header pages ([6c60a9d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c60a9d17b53491c471cb4ada7264747e110167f))
+* changes to review credits or author based on site name ([637cdd7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/637cdd729e9e6df2a2c9c14a9c767a8abf93e481))
+* correction to typo ([43699dd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/43699dd7364cd631ecbd83874602f90c9dffd6ca))
+
+
+* Merge branch 'review-credits' into 'master' ([3e0043e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3e0043e04defbb40a16243bf46fad23ea29c1875))
+* Merge branch 'tm-4272-author-info-grid' into 'master' ([e3d21cb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e3d21cbfb8fc239919aec88cf302274a47275397))
+
+
+### Tests
+
+* fix test ([5c17b33](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5c17b3313f5f8745952e18261ea187fc0266ee99))
+
 ## [40.0.15](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v40.0.14...v40.0.15) (2024-04-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "40.0.15",
+  "version": "40.0.16",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/components/atoms/info-grid/grid-item/item.module.scss

@@ -155,6 +155,8 @@
     }
 
     &:nth-of-type(2) {
+      @include flex-direction(row);
+      gap: 0.4rem;
       font-size: 1.8rem;
       line-height: 2.6rem;
       padding: 0;
@@ -166,6 +168,10 @@
         color: var(--info-grid-template-three-text-color);
         text-decoration: none;
       }
+
+      small {
+        font-size: 100%;
+      }
     }
   }
 

package/src/components/atoms/review-credits/index.js

@@ -154,12 +154,12 @@ const ReviewCredits = ({
       {buttonIcon && (
         <LazyImage
           src={buttonIcon}
-          alt={translate(translations, 'contributers', 'contributers icon')}
+          alt={translate(translations, 'contributors', 'contributors icon')}
           width={18}
           height={14}
         />
       )}
-      {translate(translations, 'contributers', 'About This page')}
+      {translate(translations, 'contributors', 'About This page')}
     </>
   );
 

package/src/components/molecules/header/variants/author/assets/name/index.js

@@ -5,12 +5,15 @@ import { translate } from '~helpers/getters';
 import { Context } from '~context/MainProvider';
 import styles from './name.module.scss';
 
-export default function Name({ className = '', name, icon }) {
+export default function Name({ className = '', name, icon, pronouns = '' }) {
   const { translations } = useContext(Context) || {};
 
   return (
-    <h1 className={`${className || ''} ${styles?.name || ''}`}>
-      {name}
+    <div className={styles.title}>
+      <h1 className={`${className || ''} ${styles?.name || ''}`}>
+        {name}
+        {pronouns && <small>({pronouns})</small>}
+      </h1>
       <LazyImage
         className={styles.verify}
         src={icon || '../../../images/verify.svg'}
@@ -19,7 +22,7 @@ export default function Name({ className = '', name, icon }) {
         width={20}
         height={20}
       />
-    </h1>
+    </div>
   );
 }
 
@@ -27,4 +30,5 @@ Name.propTypes = {
   className: PropTypes.string,
   name: PropTypes.string,
   icon: PropTypes.string,
+  pronouns: PropTypes.string,
 };

package/src/components/molecules/header/variants/author/assets/name/name.module.scss

@@ -6,22 +6,41 @@
   font-weight: 700;
   text-transform: capitalize;
   color: #1c1a28;
+  @include flex-direction(column);
+
+  small {
+    font-size: 60%;
+    line-height: 2rem;
+  }
 
   @include min(tablet) {
     line-height: 4.2rem;
     font-size: 3.2rem;
   }
+
+  @include min(laptop) {
+    @include flex-direction(row);
+    @include flex-align(center, center);
+    gap: 0.4rem;
+  }
 }
 
 .verify {
-  margin-left: 0.4rem;
   height: 1.6rem;
   width: 1.6rem;
   vertical-align: top;
 
   @include min(tablet) {
-    margin-left: 0.8rem;
     height: 2.4rem;
     width: 2.4rem;
   }
 }
+
+.title {
+  @include flex-direction(row);
+  gap: 0.4rem;
+  
+  @include min(tablet) {
+    gap: 0.8rem;
+  }
+}

package/src/components/molecules/header/variants/author/template-four/index.js

@@ -10,7 +10,9 @@ import styles from './template-four.module.scss';
 import { translate } from '~helpers/getters';
 
 export default function TemplateFour({ author, icons, authorTitle }) {
-  const { translations } = useContext(Context);
+  const { translations } = useContext(Context) || {};
+  const { pages_count: pagesCount, author_title: jobTitle, name, pronouns } = author || null;
+
   return (
     <div className={styles?.container || ''}>
       <div>
@@ -19,17 +21,18 @@ export default function TemplateFour({ author, icons, authorTitle }) {
           <Ribbon
             className={styles?.posts || ''}
             author={author}
-            content={`${author.pages_count} ${translate(translations, 'posts', 'Posts')}`}
+            content={`${pagesCount} ${translate(translations, 'posts', 'Posts')}`}
           />
         </div>
 
         <div>
           <Name
             className={styles?.name || ''}
-            name={authorTitle || author.name}
+            name={authorTitle || name}
             icon={icons?.verify}
+            pronouns={pronouns || ''}
           />
-          <div className={styles?.title || ''}>{author.author_title}</div>
+          {jobTitle && <div className={styles?.title || ''}>{jobTitle}</div>}
           <Socials author={author} />
         </div>
       </div>

package/src/components/molecules/header/variants/author/template-four/template-four.test.js

@@ -1,10 +1,13 @@
 /* eslint-disable no-multi-assign */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import MainProvider from '~context/MainProvider';
 import '@testing-library/jest-dom/extend-expect';
+import getAuthorList from '../../../../../../../tests/factories/authors/author.factory';
 import TemplateFour from '.';
 
+const author = getAuthorList({})[1];
+
 describe('Author Header', () => {
   test('Template Four', () => {
     const { container, getByText } = render(
@@ -34,6 +37,14 @@ describe('Author Header', () => {
     expect(getByText('Online Casino Specialist')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(5);
   });
+  test('Test author pronoun', async () => {
+    const { container, getByText } = render(<TemplateFour author={author} />);
+
+    await waitFor(() => {
+      expect(getByText('(He/him/his)')).toBeTruthy();
+      expect(container.querySelector('small')).toHaveTextContent(author.pronouns);
+    });
+  });
 });
 
 afterEach(() => {

package/src/components/molecules/header/variants/author/template-one/index.js

@@ -11,31 +11,41 @@ import { translate } from '~helpers/getters';
 import styles from './template-one.module.scss';
 
 export default function TemplateOne({ author, icons, authorTitle }) {
-  const { translations } = useContext(Context);
+  const { translations } = useContext(Context) || {};
+  const {
+    pages_count: pagesCount,
+    author_title: jobTitle,
+    name,
+    biography,
+    expertise,
+    pronouns,
+  } = author || null;
+
   return (
     <div className={styles?.container || ''}>
       <Ribbon
         className={styles?.posts || ''}
         author={author}
-        content={`${author.pages_count} ${translate(translations, 'posts', 'Posts')}`}
+        content={`${pagesCount} ${translate(translations, 'posts', 'Posts')}`}
       />
       <Portrait className={styles?.portrait || ''} author={author} />
       <div>
-        <div className={styles?.title || ''}>{author.author_title}</div>
+        {jobTitle && <div className={styles?.title || ''}>{jobTitle}</div>}
         <Name
           className={styles?.name || ''}
-          name={authorTitle || author.name}
+          name={authorTitle || name}
           icon={icons?.verify}
+          pronouns={pronouns || ''}
         />
         <Socials className={styles?.socials || ''} author={author} />
-        {author.biography && (
+        {biography && (
           <div
             className={styles?.biography || ''}
             // eslint-disable-next-line react/no-danger
-            dangerouslySetInnerHTML={{ __html: author.biography }}
+            dangerouslySetInnerHTML={{ __html: biography }}
           />
         )}
-        <Expertise expertise={author.expertise} icon={icons?.expertise} />
+        <Expertise expertise={expertise} icon={icons?.expertise} />
       </div>
     </div>
   );

package/src/components/molecules/header/variants/author/template-one/template-one.test.js

@@ -1,14 +1,15 @@
 /* eslint-disable no-multi-assign */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import MainProvider from '~context/MainProvider';
 import '@testing-library/jest-dom/extend-expect';
-import getAuthorList from '~tests/factories/authors/author.factory';
+import getAuthorList from '../../../../../../../tests/factories/authors/author.factory';
 import TemplateOne from '.';
 
+const author = getAuthorList({})[1];
+
 describe('Author Header', () => {
   test('Template One', () => {
-    const author = getAuthorList({})[1];
     const { container, getByText } = render(
       <MainProvider value={{}}>
         <TemplateOne author={author} />
@@ -16,11 +17,19 @@ describe('Author Header', () => {
     );
     expect(getByText('Author 1 Name')).toBeTruthy();
     expect(getByText('Sports Betting')).toBeTruthy();
-    expect(getByText('Author 1 Biography')).toBeTruthy();
+    expect(container.querySelectorAll('.biography')).toBeTruthy();
     expect(container.querySelectorAll('a')).toHaveLength(6);
     expect(container.querySelectorAll('ul')).toHaveLength(1);
     expect(container.querySelectorAll('li')).toHaveLength(3);
   });
+  test('Test author pronoun', async () => {
+    const { container, getByText } = render(<TemplateOne author={author} />);
+
+    await waitFor(() => {
+      expect(getByText('(He/him/his)')).toBeTruthy();
+      expect(container.querySelector('small')).toHaveTextContent(author.pronouns);
+    });
+  });
 });
 
 afterEach(() => {

package/src/components/molecules/header/variants/author/template-three/index.js

@@ -11,13 +11,21 @@ import { translate } from '~helpers/getters';
 import styles from './template-three.module.scss';
 
 export default function TemplateThree({ author, icons, authorTitle }) {
-  const { translations } = useContext(Context);
+  const { translations } = useContext(Context) || {};
+  const {
+    pages_count: pagesCount,
+    author_title: jobTitle,
+    name,
+    expertise,
+    pronouns,
+  } = author || null;
+
   return (
     <div className={styles?.container || ''}>
       <Ribbon
         className={styles?.posts || ''}
         author={author}
-        content={`${author.pages_count} ${translate(translations, 'posts', 'Posts')}`}
+        content={`${pagesCount} ${translate(translations, 'posts', 'Posts')}`}
       />
       <div>
         <Portrait className={styles?.portrait || ''} author={author} />
@@ -25,11 +33,12 @@ export default function TemplateThree({ author, icons, authorTitle }) {
           <Socials className={styles?.socials || ''} author={author} />
           <Name
             className={styles?.name || ''}
-            name={authorTitle || author.name}
+            name={authorTitle || name}
             icon={icons?.verify}
+            pronouns={pronouns || ''}
           />
-          <div className={styles?.title || ''}>{author.author_title}</div>
-          <Expertise expertise={author.expertise} icon={icons?.expertise} />
+          {jobTitle && <div className={styles?.title || ''}>{jobTitle}</div>}
+          <Expertise expertise={expertise} icon={icons?.expertise} />
         </div>
       </div>
     </div>

package/src/components/molecules/header/variants/author/template-three/template-three.test.js

@@ -1,10 +1,13 @@
 /* eslint-disable no-multi-assign */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import MainProvider from '~context/MainProvider';
 import '@testing-library/jest-dom/extend-expect';
+import getAuthorList from '../../../../../../../tests/factories/authors/author.factory';
 import TemplateThree from '.';
 
+const author = getAuthorList({})[1];
+
 describe('Author Header', () => {
   test('Template Three', () => {
     const { container, getByText } = render(
@@ -37,6 +40,14 @@ describe('Author Header', () => {
     expect(container.querySelectorAll('ul')).toHaveLength(1);
     expect(container.querySelectorAll('li')).toHaveLength(2);
   });
+  test('Test author pronoun', async () => {
+    const { container, getByText } = render(<TemplateThree author={author} />);
+
+    await waitFor(() => {
+      expect(getByText('(He/him/his)')).toBeTruthy();
+      expect(container.querySelector('small')).toHaveTextContent(author.pronouns);
+    });
+  });
 });
 
 afterEach(() => {

package/src/components/molecules/header/variants/author/template-two/index.js

@@ -11,22 +11,25 @@ import { translate } from '~helpers/getters';
 import styles from './template-two.module.scss';
 
 export default function TemplateTwo({ author, icons, authorTitle }) {
-  const { translations } = useContext(Context);
+  const { translations } = useContext(Context) || {};
+  const { pages_count: pagesCount, author_title: jobTitle, name, pronouns } = author || null;
+
   return (
     <div className={styles?.container || ''}>
       <Ribbon
         className={styles?.posts || ''}
         author={author}
-        content={`${author.pages_count} ${translate(translations, 'posts', 'Posts')}`}
+        content={`${pagesCount} ${translate(translations, 'posts', 'Posts')}`}
       />
       <div>
         <Portrait className={styles?.portrait || ''} author={author} />
         <div>
-          <div className={styles?.title || ''}>{author.author_title}</div>
+          {jobTitle && <div className={styles?.title || ''}>{jobTitle}</div>}
           <Name
             className={styles?.name || ''}
-            name={authorTitle || author.name}
+            name={authorTitle || name}
             icon={icons?.verify}
+            pronouns={pronouns || ''}
           />
           <Socials className={styles?.socials || ''} author={author} />
           <Expertise expertise={author?.expertise || ''} icon={icons?.expertise} />

package/src/components/molecules/header/variants/author/template-two/template-two.test.js

@@ -1,10 +1,13 @@
 /* eslint-disable no-multi-assign */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import MainProvider from '~context/MainProvider';
 import '@testing-library/jest-dom/extend-expect';
+import getAuthorList from '../../../../../../../tests/factories/authors/author.factory';
 import TemplateTwo from '.';
 
+const author = getAuthorList({})[1];
+
 describe('Author Header', () => {
   test('Template Two', () => {
     const { container, getByText } = render(
@@ -37,6 +40,14 @@ describe('Author Header', () => {
     expect(container.querySelectorAll('ul')).toHaveLength(1);
     expect(container.querySelectorAll('li')).toHaveLength(2);
   });
+  test('Test author pronoun', async () => {
+    const { container, getByText } = render(<TemplateTwo author={author} />);
+
+    await waitFor(() => {
+      expect(getByText('(He/him/his)')).toBeTruthy();
+      expect(container.querySelector('small')).toHaveTextContent(author.pronouns);
+    });
+  });
 });
 
 afterEach(() => {

package/src/components/molecules/header/variants/operator/template-three/template-three.test.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-multi-assign */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import getOperatorData from '../../../../../../../tests/factories/pages/operator.factory';
 import TemplateThree from '.';
@@ -19,6 +19,13 @@ describe('Operator template three component', () => {
     expect(container.querySelectorAll('ul')).toHaveLength(1);
     expect(container.querySelectorAll('li')).toHaveLength(6);
   });
+  test('Template Three variable component', async () => {
+    const { container } = render(<TemplateThree {...data} hasVariableComponent />);
+
+    await waitFor(() => {
+      expect(container.querySelector('.variable')).toBeTruthy();
+    });
+  });
 });
 
 afterEach(() => {

package/src/components/molecules/header/variants/operator/variables/index.js

@@ -1,5 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const VariableComponent = () => <></>;
+const VariableComponent = ({ className }) => <div className={className || ''} />;
 
 export default VariableComponent;
+
+VariableComponent.propTypes = {
+  className: PropTypes.string,
+};

package/src/components/molecules/header/variants/payment/template-five/template-five.module.test.js

@@ -1,7 +1,8 @@
 /* eslint-disable no-multi-assign */
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
 import getPaymentData from '../../../../../../../tests/factories/pages/payment.factory';
 import TemplateOneThree from '.';
 
@@ -33,6 +34,30 @@ describe('Payment template one three component', () => {
     expect(container.getElementsByClassName('desc')).toBeTruthy();
     expect(container.querySelectorAll('li')).toHaveLength(4);
   });
+  test('Template five toggle read more button', async () => {
+    const { container } = render(<TemplateOneThree {...data} />);
+
+    await waitFor(() => {
+      expect(container.querySelector('.desc')).toBeTruthy();
+      expect(container.querySelector('.showReadMore')).toBeTruthy();
+      expect(container.querySelector('.showReadMore span')).toBeTruthy();
+      expect(container.querySelector('.desc')).toHaveTextContent(
+        `${textWordsLimit(data.description, 60)} Continue reading`
+      );
+      expect(container.querySelector('.showReadMore span')).toHaveTextContent('Continue reading');
+    });
+  });
+  test('Template five toggle read more button event', async () => {
+    const { container } = render(<TemplateOneThree {...data} />);
+    const button = container.querySelector('.showReadMore');
+
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      // test after click
+      expect(container.querySelector('.showReadMore span')).toBeFalsy();
+    });
+  });
 });
 
 afterEach(() => {

package/src/constants/info-grid.js

@@ -11,6 +11,7 @@ import {
   getCurrencies,
   getMaxWin,
   getMaxStake,
+  // getExperience, // Note: to be used later
 } from '../helpers/info-grid';
 
 export const defaultInfoGrid = {
@@ -72,6 +73,7 @@ export const defaultInfoGrid = {
     email_address: ['email_address', 'Email Address', (value) => generateLink(value)],
     lives_in: ['lives_in', 'Lives In'],
     articles_written: ['pages_count', 'Articles Written'],
+    // experience: ['experience', 'Experience', (value, props) => getExperience(value, { ...props, text: 'Years' })] // Note: Use this fn to get experience and pass custom text
   },
 };
 

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

@@ -62,6 +62,20 @@ const Main = ({
     showAuthor
       ? loadable(() => import('../../../../components/atoms/review-credits'))
       : null;
+  const Author =
+    page.path !== '/' &&
+    !isContactUsPage &&
+    page.path !== 'news' &&
+    page.path !== 'sitemap' &&
+    page.template !== 'ppc' &&
+    page.author &&
+    showAuthor
+      ? loadable(() => import('~atoms/author'))
+      : null;
+  const useReviewCredits =
+    process.env.GATSBY_SITE_NAME === 'irishluck.ie' ||
+    process.env.GATSBY_SITE_NAME === 'demosite' ||
+    process.env.GATSBY_SITE_NAME === 'playcasino.co.za';
   const Feedback =
     page?.sections?.main?.feedbackCounter &&
     !isContactUsPage &&
@@ -77,15 +91,29 @@ const Main = ({
     <main className={`${styles?.modulePage || ''} ${styles[page?.template] || ''}`}>
       {NotFound && <NotFound pageContext={pageContext} />}
       {HtmlSitemap && <HtmlSitemap pageContext={pageContext} />}
-      {ReviewCredits && (
-        <ReviewCredits
-          date={date}
-          author={page?.author_id && page?.author}
-          readingTime={page.reading_time}
-          reviewer={page.reviewer_id && page?.reviewer}
-          hasAuthorBox={Boolean(AuthorBox)}
-        />
-      )}
+      {useReviewCredits
+        ? ReviewCredits && (
+            <ReviewCredits
+              date={date}
+              author={page?.author_id && page?.author}
+              readingTime={page.reading_time}
+              reviewer={page.reviewer_id && page?.reviewer}
+              hasAuthorBox={Boolean(AuthorBox)}
+            />
+          )
+        : Author && (
+            <Author
+              name={page.author?.name}
+              date={date}
+              type={page?.template}
+              authorImg={page?.author?.image}
+              readingTime={page.reading_time}
+              link={page?.author?.profile_page_path}
+              reviewer={page.reviewer_id && page?.reviewer}
+              hasAuthorBox={Boolean(AuthorBox)}
+              headerOffset={174}
+            />
+          )}
       {section.modules &&
         section.modules.map((module, index) => (
           <Module

package/src/helpers/info-grid.js

@@ -211,3 +211,16 @@ export const generateLink = (value, props, addRel = false) => {
 export const getMaxWin = (value) => (value ? `${value}x innsatsen` : null);
 export const getMaxStake = (value) => (value ? `${value} kroner` : null);
 export const removeEmojis = (text) => text?.replace(/[^\p{L}\p{N}\p{P}\p{Z}^$\n]/gu, '');
+export const getExperience = (value, props) => {
+  if (value === null) return null;
+
+  const text = props?.text || '';
+  const translations = props?.translations || null;
+
+  return (
+    <>
+      {value.match(/\d+/)}
+      <small>{translate(translations, 'years', text)}</small>
+    </>
+  );
+};

package/storybook/public/625.4e46db89.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkgatsby_matrix_theme=self.webpackChunkgatsby_matrix_theme||[]).push([[625],{"./src/components/molecules/header/variants/operator/variables/index.js":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__);var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../node_modules/react/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__),VariableComponent=function VariableComponent(_ref){var className=_ref.className;return react__WEBPACK_IMPORTED_MODULE_0__.createElement("div",{className:className||""})};VariableComponent.displayName="VariableComponent",VariableComponent.__docgenInfo={description:"",methods:[],displayName:"VariableComponent",props:{className:{description:"",type:{name:"string"},required:!1}}},__webpack_exports__.default=VariableComponent,VariableComponent.propTypes={className:prop_types__WEBPACK_IMPORTED_MODULE_1___default().string},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/components/molecules/header/variants/operator/variables/index.js"]={name:"VariableComponent",docgenInfo:VariableComponent.__docgenInfo,path:"src/components/molecules/header/variants/operator/variables/index.js"})}}]);