gatsby-matrix-theme 41.0.5 → 42.0.0

package/.storybook/preview.js

@@ -73,6 +73,7 @@ export const parameters = {
             ],
           ],
           'Atoms',
+          ['Affiliate Disclaimer', 'Author', ['Template One', 'Template Two', 'Template Three']],
           'Molecules',
           'Organisms',
           'Pages',

package/CHANGELOG.md

@@ -1,3 +1,56 @@
+# [42.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v41.0.5...v42.0.0) (2024-05-16)
+
+
+### Bug Fixes
+
+* add bonus module on lotto pages ([a0e79fc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a0e79fccb3054a2ce4da7c57c184f92d47a2f9e0))
+* positioning and styling of banner ([fa32503](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa3250368acfbf4f1046087ba131bead7cdaa98b))
+
+
+### Code Refactoring
+
+* add titles per page path ([bdea324](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bdea324addcec04b629927712e31c229b6cd6aad))
+* changes to author info grid ([7ad6fc3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7ad6fc3337062fe33f5c13a918c12bdff2210f18))
+* changes to author name tag ([5529f3e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5529f3efd40b9f66d77b906b25db7814017ca503))
+* changes to multiple authors on author review credits ([5570a1a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5570a1a102ad4c129c3cb5fb6f81f5f42179b8fa))
+* changes to multiple contributors ([7be9504](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7be95041f7c2fa8f17f91d279b6fdbfa1db50aac))
+* changes to multiple contributors ([cf1c7b4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cf1c7b441c767abd2a6f7578eb936c1079c8ab21))
+* changes to template 4 ([a02b068](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a02b06868de378e55e2e150fb558c3cba3cc5d8b))
+* changes to template 4 ([af180a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/af180a73fe790c2b2081bda7e1ca09a28808b40d))
+* changes when author bio is empty ([e2e86de](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e2e86de6ed4fcc4aa896207d2074b380511a143d))
+* correction to title tags ([fb3ba03](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fb3ba0310883a9f6fe3d3a7ae437ad84cb46e1b9))
+* initial commit and name correction to author templates ([3f94ee9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3f94ee94332f5020bccec1efeeaac9aa6f84f5cd))
+* multiple contributors ([51e9743](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/51e9743ace04a41d668f29e4633fd3e92d9e0f28))
+* multiple contributors storybook ([e762254](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e762254be832e0b6a0c64be123ec255570c7238b))
+* remove temp ([7e45eec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7e45eec25637f269f75671f03025bf8098e9df1a))
+* storybook refactoring and correction to fact checker icon ([a63557f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a63557f08d0b3d396d2ca3ef60ec6db1bcda7bc1))
+* temp ([062fb84](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/062fb84ed52757b6a8ce6f49063c7a0f25db37b4))
+
+
+### Config
+
+* update theme ([ee2de80](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ee2de801f4510f3ba17614296563f8a7a060e80b))
+
+
+* Merge branch 'tm-4389-author-info-grid' into 'master' ([fe94330](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fe943302742301de66dfc77ec03acff39b825178))
+* Merge branch 'tm-4269-multiple-contributors' into 'master' ([ea11482](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ea1148223742569d36c1bc5603200afee0d117ac))
+* Merge branch 'tm-40438-spotlights' into 'master' ([ce757f9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ce757f9ff086dffd3c3592d399bcc2588188333e))
+* Merge branch 'tm-4245-bonus-module-lotto-pages' into 'master' ([1080a38](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1080a38aa6775178f44755c9415f54418e32eb79))
+* Merge branch 'master' into tm-4269-multiple-contributors ([7fe00a5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7fe00a5fe16a06c7d6ccfd71a386cc0295271b5a))
+* Merge branch 'master' into tm-40438-spotlights ([4cac87d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4cac87d0597214d6955a2e2703dc82e41242f6de))
+* Merge branch 'master' into tm-4269-multiple-contributors ([40e8374](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/40e8374c9b01f2936373275b35c8e1384e4fd5a5))
+* Merge branch 'master' into tm-4269-multiple-contributors ([ff9db93](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ff9db938e524d6443dd571aa315c4df7d54bde4d))
+* Merge branch 'master' into tm-4269-multiple-contributors ([fae36b9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fae36b96fde37362521e86b01e0aa2914b5f8d94))
+* Merge branch 'master' into tm-4269-multiple-contributors ([a752666](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a752666220f63fa61708c24fb75d2c1b2fb66eb1))
+* Merge branch 'master' into tm-4269-multiple-contributors ([134dfaa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/134dfaa9affe8e70067c4deeb22275916692d105))
+* Merge branch 'master' into tm-4269-multiple-contributors ([c55491b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c55491b8cb6ecd02c1d8df5dd5744baad147ba42))
+* Merge branch 'master' into tm-4269-multiple-contributors ([5f83588](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5f83588e36b7922400d7172152c862160c09e199))
+
+
+### Tests
+
+* test scripts ([bb0c235](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bb0c2359fffa298728d463bc2c711f5e83b5f0f9))
+
 ## [41.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v41.0.4...v41.0.5) (2024-05-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "41.0.5",
+  "version": "42.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "30.1.3",
+    "gatsby-core-theme": "31.0.0",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/atoms/author/template-one/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Link from 'gatsby-core-theme/src/hooks/link';
-import styles from './author-template.module.scss';
+import styles from './template-one.module.scss';
 
 const AuthorTemplateOne = ({
   label = '',

package/src/components/atoms/author/template-three/index.js

@@ -0,0 +1,98 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { Context } from '~context/MainProvider';
+import FactCheckIcon from '../../../../images/icons/fact-check';
+import styles from './template-three.module.scss';
+
+const AuthorTemplateThree = ({
+  authorImage,
+  authorImageHeight = 48,
+  authorImageWidth = 48,
+  authorName,
+  authorPath,
+  authorTitle,
+  customStyles,
+  isReviewer = false,
+  prefix,
+  showLinks = true,
+  showPrefix = false,
+  showTitle = true,
+  showVerification = true,
+  type,
+  verify = <FactCheckIcon width={15} height={15} />,
+}) => {
+  const { translations } = useContext(Context) || {};
+
+  const getPrefixBasedOnPage = type?.includes('review')
+    ? translate(translations, 'reviewed_by', 'Review by')
+    : translate(translations, 'written_by', 'Written by');
+
+  const getAuthorTitle = <span className={styles.authorTitle}>{authorTitle}</span>;
+
+  return (
+    <>
+      {showPrefix && (
+        <span className={styles.prefix || ''}>
+          {isReviewer
+            ? translate(translations, 'fact_checked_by', 'Fact checked by')
+            : translate(translations, prefix, prefix) || getPrefixBasedOnPage}
+        </span>
+      )}
+      <div className={`${styles.authorContainer || ''} ${customStyles || ''}`}>
+        {authorImage && (
+          <LazyImage
+            alt={authorName}
+            loading="eager"
+            width={authorImageWidth}
+            height={authorImageHeight}
+            src={imagePrettyUrl(authorImage, authorImageWidth, authorImageHeight)}
+          />
+        )}
+        <div className={styles.authorDataContainer || ''}>
+          {showLinks ? (
+            <Link to={authorPath} title={authorName} className={styles.authorName}>
+              {authorName}
+            </Link>
+          ) : (
+            <p>{authorName}</p>
+          )}
+
+          {showTitle && !isReviewer && getAuthorTitle}
+          {isReviewer &&
+            (showTitle ? (
+              getAuthorTitle
+            ) : (
+              // eslint-disable-next-line jsx-a11y/label-has-associated-control
+              <label className={styles.reviewerTitle}>
+                {showVerification && verify}
+                {translate(translations, 'fact_checker', 'Fact-checker')}
+              </label>
+            ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+AuthorTemplateThree.propTypes = {
+  authorImage: PropTypes.string,
+  authorImageHeight: PropTypes.bool,
+  authorImageWidth: PropTypes.bool,
+  authorName: PropTypes.string,
+  authorPath: PropTypes.string,
+  authorTitle: PropTypes.string,
+  customStyles: PropTypes.string,
+  prefix: PropTypes.string,
+  isReviewer: PropTypes.bool,
+  showLinks: PropTypes.bool,
+  showPrefix: PropTypes.bool,
+  showTitle: PropTypes.bool,
+  showVerification: PropTypes.bool,
+  type: PropTypes.string,
+  verify: PropTypes.element,
+};
+
+export default AuthorTemplateThree;

package/src/components/atoms/author/template-three/template-three.module.scss

@@ -0,0 +1,58 @@
+.authorContainer {
+    @include flex-direction(row);
+    @include flex-align(center, center);
+    display: grid;
+    grid-template-columns: 4.8rem 1fr;
+    gap: 0.8rem;
+
+    > img {
+        border-radius: var(--author-template-three-image-border-radius,  10rem);
+        border: var(--author-template-three-author-image-border, 1px solid #ececec);
+    }
+}
+
+.authorName {
+    font-size: var(--author-template-three-author-name-font-size, 1.6rem);
+    font-weight: var(--author-template-three-author-name-font-weight, 700);
+    line-height: var(--author-template-three-author-name-line-height, 2.2rem);
+    color: var(--author-template-three-author-name-font-color, #1b1b1c);
+}
+
+.authorDataContainer {
+    @include flex-direction(column);
+    @include flex-align(flex-start, space-between);
+    gap: 0.4rem;
+}
+
+.prefix {
+    color: var(--author-template-three-prefix-text-color, #64646d);
+    text-decoration: none;
+    font-size: var(--author-template-three-reviewer-title-font-size, 1.4rem);
+    font-weight: var(--author-template-three-reviewer-title-font-weight, 500);
+    line-height: var(--author-template-three-reviewer-title-line-height, 2.2rem);
+}
+
+.authorTitle {
+    font-size: var(--author-template-three-author-title-font-size, 0.9rem);
+    font-weight: var(--author-template-three-author-title-font-weight, 700);
+    line-height: var(--author-template-three-author-title-line-height, 1.2rem);
+    letter-spacing: var(--author-template-three-author-title-letter-spacing, 0.5px);
+    text-align: center;
+    padding: 0.4rem 0.8rem;
+    gap: 1rem;
+    border-radius: var(--author-template-three-author-title-border-radius, 10rem);
+    background: var(--author-template-three-author-title-background-color, #6e33e5);
+    color: var(--author-template-three-author-title-color, #ffffff);
+    text-transform: uppercase;
+}
+
+.reviewerTitle {
+    @include flex-direction(row);
+    @include flex-align(center, center);
+    gap: 0.4rem;
+    color: var(--author-template-three-revierwer-title-text-color, #64646d);
+    text-decoration: none;
+    font-size: var(--author-template-three-reviewer-title-font-size, 1.4rem);
+    font-weight: var(--author-template-three-reviewer-title-font-weight, 500);
+    line-height: var(--author-template-three-reviewer-title-line-height, 2.2rem);
+}

package/src/components/atoms/author/template-three/template-three.stories.js

@@ -0,0 +1,155 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  ArgsTable,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs/blocks';
+import FactCheckIcon from '../../../../../storybook-images/icons/fact-check';
+import AuthorTemplateOne from '.';
+
+export default {
+  title: 'Theme/Atoms/Author/Template Three',
+  component: AuthorTemplateOne,
+  argTypes: {
+    authorImageWidth: {
+      name: 'authorImageWidth',
+      type: { name: 'number', required: false },
+      defaultValue: 48,
+      description: 'Author/Reviewer image width',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 48 },
+      },
+    },
+    authorTitle: {
+      name: 'authorTitle',
+      type: { name: 'string', required: false },
+      defaultValue: 'Casino Export',
+      description: 'Author job title',
+    },
+    authorImageHeight: {
+      name: 'authorImageHeight',
+      type: { name: 'number', required: false },
+      defaultValue: 48,
+      description: 'Author/Reviewer image height',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 48 },
+      },
+    },
+    authorName: {
+      control: 'text',
+      defaultValue: 'John Doe',
+    },
+    authorPath: {
+      control: 'text',
+      defaultValue: 'https://example.com',
+    },
+    authorImage: {
+      control: 'text',
+      defaultValue: '1675685947/ellipse-1.png',
+    },
+    verify: {
+      name: 'verify',
+      type: { name: 'element', required: false },
+      defaultValue: <FactCheckIcon width={15} height={15} />,
+      description: 'Icon for verify badge',
+      table: {
+        type: { summary: 'element' },
+        defaultValue: { summary: <FactCheckIcon width={15} height={15} /> },
+      },
+    },
+    showVerification: {
+      name: 'showVerification',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/Hide verification badge for reviewer only',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    isReviewer: {
+      name: 'isReviewer',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Indicate if its a Reviewer',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    prefix: {
+      name: 'prefix',
+      type: { name: 'string', required: false },
+      defaultValue: '',
+      description: 'Author Prefix',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+    showLinks: {
+      name: 'showLinks',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/Hide links',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    showPrefix: {
+      name: 'showPrefix',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show/Hide author/reviewer prefix',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    showTitle: {
+      name: 'showTitle',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/Hide links',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    type: {
+      name: 'type',
+      type: { name: 'string', required: false },
+      defaultValue: 'default',
+      description: 'Page template - change prefix based on this',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'AuthorTemplateOne component',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <AuthorTemplateOne {...args} />;
+
+export const Default = Template.bind({});

package/src/components/atoms/author/template-three/template-three.test.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import TemplateThree from '.';
+
+describe('AuthorTemplateOne Component', () => {
+  it('renders author name in desired format when authorTemplateTwo is false', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="John Doe"
+        authorPath="/path-to-author"
+        authorTitle="casino expert"
+      />
+    );
+
+    expect(container.querySelectorAll('a')).toHaveLength(1);
+    expect(container.querySelector('a')).toHaveAttribute('href', '/path-to-author');
+  });
+  test('Show Author data', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="John Author"
+        authorPath="/john-author"
+        authorTitle="casino expert"
+      />
+    );
+
+    expect(container.querySelector('.authorContainer')).toBeTruthy();
+    expect(container.querySelector('.authorContainer a')).toHaveTextContent('John Author');
+    expect(container.querySelector('.authorContainer a')).toHaveAttribute('href', '/john-author');
+  });
+  test('Show Author without as a link', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="John Author"
+        authorPath="/john-author"
+        authorTitle="casino expert"
+        showLinks={false}
+      />
+    );
+
+    expect(container.querySelector('.authorContainer')).toBeTruthy();
+    expect(container.querySelector('.authorContainer p')).toHaveTextContent('John Author');
+    expect(container.querySelector('.authorContainer')).not.toHaveAttribute('href', '/john-author');
+  });
+  test('Show Author title', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="John Author"
+        authorPath="/john-author"
+        authorTitle="casino expert"
+      />
+    );
+
+    expect(container.querySelector('.authorContainer')).toBeTruthy();
+    expect(container.querySelector('.authorContainer a')).toHaveTextContent('John Author');
+    expect(container.querySelector('.authorTitle')).toBeTruthy();
+    expect(container.querySelector('.authorTitle')).toHaveTextContent('casino expert');
+  });
+  test('Hide Author title', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="John Author"
+        authorPath="/john-author"
+        authorTitle="casino expert"
+        showTitle={false}
+      />
+    );
+
+    expect(container.querySelector('.authorContainer')).toBeTruthy();
+    expect(container.querySelector('.authorContainer a')).toHaveTextContent('John Author');
+    expect(container.querySelector('.authorTitle')).toBeFalsy();
+  });
+  test('Show Reviewer data', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="Jane Reviewer"
+        authorPath="/jane-reviewer"
+        authorTitle="casino expert"
+        isReviewer
+      />
+    );
+
+    expect(container.querySelector('.authorContainer')).toBeTruthy();
+    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
+    expect(container.querySelector('.authorContainer a')).toHaveAttribute('href', '/jane-reviewer');
+  });
+  test('Show Reviewer title', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="Jane Reviewer"
+        authorPath="/jane-reviewer"
+        authorTitle="casino expert"
+        isReviewer
+        showTitle={false}
+      />
+    );
+
+    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
+    expect(container.querySelector('.reviewerTitle')).toBeTruthy();
+    expect(container.querySelector('.reviewerTitle')).toHaveTextContent('Fact-checker');
+  });
+  test('Hide Reviewer title', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="Jane Reviewer"
+        authorPath="/jane-reviewer"
+        authorTitle="casino expert"
+        isReviewer
+      />
+    );
+
+    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
+    expect(container.querySelector('.reviewerTitle')).toBeFalsy();
+  });
+  test('Show Reviewer verification icon', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="Jane Reviewer"
+        authorPath="/jane-reviewer"
+        authorTitle="casino expert"
+        isReviewer
+        showTitle={false}
+      />
+    );
+    const verificationIcon = expect(container.querySelector('.reviewerTitle svg'));
+
+    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
+    expect(container.querySelector('.reviewerTitle')).toBeTruthy();
+    expect(container.querySelector('.reviewerTitle')).toHaveTextContent('Fact-checker');
+
+    verificationIcon.toBeTruthy();
+  });
+  test('Hide Reviewer verification icon', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="Jane Reviewer"
+        authorPath="/jane-reviewer"
+        authorTitle="casino expert"
+        isReviewer
+        showVerification={false}
+        showTitle={false}
+      />
+    );
+
+    expect(container.querySelector('.authorContainer a')).toHaveTextContent('Jane Reviewer');
+    expect(container.querySelector('.reviewerTitle')).toBeTruthy();
+    expect(container.querySelector('.reviewerTitle')).toHaveTextContent('Fact-checker');
+    expect(container.querySelector('.reviewerTitle svg')).toBeFalsy();
+  });
+  test('Show Reviewer without as a link', () => {
+    const { container } = render(
+      <TemplateThree
+        authorName="Jane Reviewer"
+        authorPath="/jane-reviewer"
+        authorTitle="casino expert"
+        showLinks={false}
+        isReviewer
+      />
+    );
+
+    expect(container.querySelector('.authorContainer')).toBeTruthy();
+    expect(container.querySelector('.authorContainer p')).toHaveTextContent('Jane Reviewer');
+    expect(container.querySelector('.authorContainer')).not.toHaveAttribute(
+      'href',
+      '/jane-reviewer'
+    );
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/author/template-two/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Link from 'gatsby-core-theme/src/hooks/link';
-import styles from './author-template.module.scss';
+import styles from './template-two.module.scss';
 
 const AuthorTemplateTwo = ({
   authorName,

package/src/components/atoms/author/template-two/{author-template.module.scss → template-two.module.scss}

@@ -1,5 +1,3 @@
-
-
 .authorImage {
   position: relative;
 

package/src/components/atoms/disclaimer/affiliate-disclaimer/affiliate-disclaimer.stories.js

@@ -21,7 +21,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: 'AuthorTemplateOne component',
+        component: 'AffiliateDiscalimer component',
       },
       page: () => (
         <>

package/src/components/atoms/info-grid/grid-item/index.js

@@ -25,19 +25,22 @@ const InfoGridItem = ({
     showAll: showMore,
     setShowMore,
   });
+  const showGrid = (templateThree && value) || !templateThree; // hide entire cell if empty on author info grid only
 
   return (
-    <div
-      className={`${templateTwo ? styles.columnItem || '' : styles.gridItem || ''} ${
-        templateThree ? styles.templateThree || '' : ''
-      }`}
-    >
-      <span>
-        {showEmojis ? title : removeEmojis(title)}
-        {showHyphen && ':'}
-      </span>
-      <span>{value || '-'}</span>
-    </div>
+    showGrid && (
+      <div
+        className={`${templateTwo ? styles.columnItem || '' : styles.gridItem || ''} ${
+          templateThree ? styles.templateThree || '' : ''
+        }`}
+      >
+        <span>
+          {showEmojis ? title : removeEmojis(title)}
+          {showHyphen && ':'}
+        </span>
+        <span>{value || '-'}</span>
+      </div>
+    )
   );
 };