gatsby-matrix-theme 34.0.0 → 34.0.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [34.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.0...v34.0.1) (2023-09-27)
+
+
+### Bug Fixes
+
+* author test ([923a49c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/923a49c713f62d6b53c642b78bbdbc1a6ebeeade))
+* cards props ([a3a94de](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a3a94de9768c6f92f736ea24a1e55271ab66f4ad))
+* changes for operator banner ([1fb6cd1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1fb6cd1cc29a716d80980e183999b071c5827014))
+* conficts ([3b8fca8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3b8fca8865d76c5104a02c2be40f88903d845b3b))
+* conflict ([3b2e0df](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3b2e0df3cd2433eb50b905a6f5c8c6a2c7f00776))
+* operator details ([fe13484](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fe13484a7674fea6d908fd0079e6123f3a4ff57c))
+* remove uneccesay css ([49802e9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/49802e9814d8e0c69b37c244c4d2095c57635723))
+* small fix ([8c67ea5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8c67ea5c1c1e7434913d7f9705de3b29064cccb7))
+* small toplist props ([9c575d7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9c575d7dbecf6ec0767ede34d7884eb23b095593))
+* storybook text ([359a3ce](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/359a3ce60d36b6fdac7d0c7ca2099f05532fe24c))
+* update theme ([a1b2654](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a1b2654875a68e405ece0790b3e0a944ca408ad8))
+
+
+* Merge branch 'tm-3658-operator-details' into 'master' ([b9e3539](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b9e353946bd93beadfa053b0c724192242fca4ea))
+* Merge branch 'tm-3658-operator-details' into 'master' ([6a198a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6a198a7252ba6f020da131996e7f6a3ae077475b))
+
 # [34.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v33.0.2...v34.0.0) (2023-09-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "34.0.0",
+  "version": "34.0.1",
   "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.0.1",
+    "gatsby-core-theme": "30.0.2",
     "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/author-TemplateOne.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import AuthorTemplateOne from '.';
+
+describe('AuthorTemplateOne Component', () => {
+  it('renders author name in desired format when authorTemplateTwo is false', () => {
+    const { getByText } = render(
+      <AuthorTemplateOne
+        label="Written by"
+        authorName="John Doe"
+        authorPath="/path-to-author"
+        verify="../../../../images/verifiedAuthor.svgs"
+      />
+    );
+
+    expect(getByText('Written by John D.')).toBeInTheDocument();
+    expect(getByText('Written by John D.')).toHaveAttribute('href', '/path-to-author');
+    const link = getByText('Written by John D.');
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/path-to-author');
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

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

@@ -0,0 +1,15 @@
+.authorTemplate {
+  > a {
+    color: #3c3c40 !important;
+    font-size: 1.4rem;
+    font-weight: 500;
+    line-height: 2.2rem;
+    white-space: nowrap;
+
+    > img {
+      width: 1.4rem;
+      height: 1.4rem;
+    }
+  }
+}
+

package/src/components/atoms/author/template-one/author-templateOne.stories.js

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  ArgsTable,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs/blocks';
+import verifyIcon from '../../../../../storybook-images/verifiedAuthor.svg';
+import AuthorTemplateOne from '.';
+
+export default {
+  title: 'Theme/Atoms/Author/Template One',
+  component: AuthorTemplateOne,
+  argTypes: {
+    label: {
+      control: 'text',
+      defaultValue: 'By',
+    },
+    authorName: {
+      control: 'text',
+      defaultValue: 'John Doe',
+    },
+    authorPath: {
+      control: 'text',
+      defaultValue: 'https://example.com',
+    },
+    showIconMobile: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+    verify: {
+      control: 'text',
+      defaultValue: verifyIcon,
+    },
+  },
+  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-one/index.js

@@ -0,0 +1,34 @@
+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';
+
+const AuthorTemplateOne = ({
+  label = '',
+  authorName,
+  authorPath,
+  verify = '../../../../images/verifiedAuthor.svg',
+}) => {
+  const author = authorName?.split(/\s+/);
+
+  return (
+    author.length > 0 && (
+      <span className={styles.authorTemplate}>
+        <Link to={authorPath}>
+          {`${label} ${`${author[0]} ${author[1]?.slice(0, 1)}.`}`}
+          <LazyImage src={verify} alt="verify" width={14} height={14} />
+        </Link>
+      </span>
+    )
+  );
+};
+
+AuthorTemplateOne.propTypes = {
+  label: PropTypes.string,
+  authorName: PropTypes.string,
+  authorPath: PropTypes.string,
+  verify: PropTypes.string,
+};
+
+export default AuthorTemplateOne;

package/src/components/atoms/author/template-two/author-TemplateTwo.test.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import AuthorTemplateTwo from '.';
+
+describe('AuthorTemplateOne Component', () => {
+  it('renders author name in desired format when authorTemplateTwo is false', () => {
+    const { container } = render(
+      <AuthorTemplateTwo
+        label="Written by"
+        authorName="John Doe"
+        authorPath="/path-to-author"
+        verify="../../../../images/verifiedAuthor.svgs"
+      />
+    );
+
+    expect(container.querySelectorAll('span'));
+    expect(container.querySelectorAll('span')).toHaveLength(1);
+    expect(container.querySelectorAll('a')).toHaveLength(1);
+    expect(container.querySelector('a')).toHaveAttribute('href', '/path-to-author');
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

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

@@ -0,0 +1,29 @@
+
+
+.authorImage {
+  position: relative;
+
+  > img:first-child {
+    border-radius: 10rem;
+    border: 1px solid #ececec;
+    min-width: 2.1rem;
+  }
+  > img:nth-child(2) {
+    position: absolute;
+    bottom: 4px;
+    right: -1px;
+  }
+
+  > a {
+    > img:first-child {
+      border-radius: 10rem;
+      border: 1px solid #ececec;
+      min-width: 2.1rem;
+    }
+    > img:nth-child(2) {
+      position: absolute;
+      bottom: 4px;
+      right: -1px;
+    }
+  }
+}

package/src/components/atoms/author/template-two/author-templateTwo.stories.js

@@ -0,0 +1,54 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  ArgsTable,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs/blocks';
+import verifyIcon from '../../../../../storybook-images/verifiedAuthor.svg';
+import AuthorTemplateOne from '.';
+
+export default {
+  title: 'Theme/Atoms/Author/Template Two',
+  component: AuthorTemplateOne,
+  argTypes: {
+    authorName: {
+      control: 'text',
+      defaultValue: 'John Doe',
+    },
+    authorPath: {
+      control: 'text',
+      defaultValue: 'https://example.com',
+    },
+    authorImage: {
+      control: 'text',
+      defaultValue: '1675685947/ellipse-1.png',
+    },
+
+    verify: {
+      control: 'text',
+      defaultValue: verifyIcon,
+    },
+  },
+  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-two/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+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';
+
+const AuthorTemplateTwo = ({
+  authorName,
+  authorPath,
+  authorImage,
+  verify = '../../../../images/verifiedAuthor.svg',
+}) => (
+  <span className={styles.authorImage}>
+    <Link to={authorPath}>
+      <LazyImage
+        src={imagePrettyUrl(authorImage, 21, 21)}
+        width={21}
+        height={21}
+        alt={authorName}
+      />
+      <LazyImage src={verify} alt="verify" width={10} height={10} />
+    </Link>
+  </span>
+);
+
+AuthorTemplateTwo.propTypes = {
+  authorName: PropTypes.string,
+  authorPath: PropTypes.string,
+  authorImage: PropTypes.string,
+  verify: PropTypes.string,
+};
+
+export default AuthorTemplateTwo;

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

@@ -1,27 +1,23 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import loadable from '@loadable/component';
 import { BiLike } from '@react-icons/all-files/bi/BiLike';
 import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
-import { getAltText, 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/molecules/bonus-box/template-three';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
-import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import Rating from '../../../ratings';
+import OperatorDetails from '../../../../molecules/operator-details';
 import styles from './template-four.module.scss';
 
 const TemplateFour = ({
   item,
   useOneStarRating = true,
   page,
-  showHalfStars = false,
   showRibbon = false,
   showAuthor = true,
   showRatingLabel = false,
   showRatingDecimal = false,
+  authorTemplateTwo = true,
   verifyIcon = '../../../images/verify.svg',
 }) => {
   const { ribbons } = item?.relation;
@@ -29,65 +25,26 @@ const TemplateFour = ({
   const { name, status } = relation;
   const reviewPath = path || relation.path;
   const isInactive = status === 'inactive';
-  const { translations } = useContext(Context) || {};
-  const StarRating = useOneStarRating
-    ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
-    : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
+  // const prettyLink = prettyTracker(relation, 'main', false, page?.template);
 
   return (
     <div className={styles?.operatorCard || ''}>
-      <div className={styles?.cardHeader || ''}>
-        <Link
-          to={reviewPath}
-          title={name}
-          className={`${styles?.casinoLogo || ''} operator-card-gtm`}
-        >
-          <LazyImage
-            width={88}
-            height={88}
-            src={imagePrettyUrl(relation?.standardised_logo_url_object?.filename, 88, 88)}
-            alt={getAltText(relation?.standardised_logo_url_object, name)}
-          />
-          {showRibbon && ribbons && ribbons.length > 0 && (
-            <span className={styles.ribbon}>{ribbons[0]}</span>
-          )}
-        </Link>
-        <Link to={reviewPath} title={name} className="operator-card-gtm">
-          {name}
-        </Link>
-        <div
-          className={`${styles?.headerDetails || ''} ${
-            showRatingLabel ? styles?.showRatingLabel || '' : ''
-          }`}
-        >
-          <StarRating
-            numOfStars={5}
-            halfStars={showHalfStars}
-            rating={relation.rating}
-            showLabel={showRatingLabel}
-            showDecimal={showRatingDecimal}
-          />
-          {showAuthor && item?.author && (
-            <div className={styles?.authorData || ''}>
-              <LazyImage
-                alt={item?.author?.name}
-                loading="eager"
-                width={80}
-                height={80}
-                src={imagePrettyUrl(item?.author?.image, 80, 80)}
-              />
-              <span>
-                <LazyImage
-                  src={verifyIcon}
-                  alt={translate(translations, 'verified', 'Verified')}
-                  width={10}
-                  height={10}
-                />
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
+      <OperatorDetails
+        item={item}
+        showReviewLink={false}
+        costumeStyle={styles.operatorDetails}
+        imageWidth={88}
+        imageHeight={88}
+        ribbons={ribbons}
+        showRibbon={showRibbon}
+        icon={verifyIcon}
+        template={page?.template}
+        showAuthor={showAuthor}
+        authorTemplateTwo={authorTemplateTwo}
+        useOneStarRating={useOneStarRating}
+        showRatingLabel={showRatingLabel}
+        showRatingDecimal={showRatingDecimal}
+      />
       <div className={styles?.cardContent || ''}>
         <Rating item={relation} type="operatorCards" />
         {!isInactive && <Bonus welcomeBonus={false} item={relation} ctaBtn tracker="main" />}
@@ -135,17 +92,19 @@ TemplateFour.propTypes = {
     true_votes: PropTypes.number,
     false_votes: PropTypes.number,
   }).isRequired,
-  useOneStarRating: PropTypes.bool,
+
   page: PropTypes.shape({
     template: PropTypes.string,
     type: PropTypes.string,
   }),
-  showHalfStars: PropTypes.bool,
+  authorTemplateTwo: PropTypes.bool,
   showAuthor: PropTypes.bool,
-  showRatingLabel: PropTypes.bool,
-  showRatingDecimal: PropTypes.bool,
+
   verifyIcon: PropTypes.string,
   showRibbon: PropTypes.bool,
+  useOneStarRating: PropTypes.bool,
+  showRatingLabel: PropTypes.bool,
+  showRatingDecimal: PropTypes.bool,
 };
 
 export default TemplateFour;