gatsby-matrix-theme 34.0.25 → 35.0.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+# [35.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.26...v35.0.0) (2023-11-01)
+
+
+### Bug Fixes
+
+* added sposonred and nofollow with all pretty links ([0ae586c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0ae586ca6c9406318a2b2d500c1d893c38116c59))
+
+
+### Code Refactoring
+
+* changes to code review ([cb728ff](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cb728ff47ba405b7f3901660e8e16231f3e90a02))
+* changes to partnership toplist ([aa5ae18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa5ae18c78ec36db9f960847d4d45b9974599cbb))
+* changes to ribbon ([9ae2276](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9ae2276d15aa0771f64b04d3784fcb69dfe82985))
+* changes to tablet view ([30c3e86](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/30c3e86a6fcc6fb63e63b09af06080e6080160e4))
+* clean up classes ([5cbcc0f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5cbcc0f6d2e8d309ba87fe5cdf4396645feccbf4))
+* correction to selling points ([5ad7033](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5ad70335e7b0bb297ac6b1d3bad7fe2b72155861))
+* remove unnecessary markup and styles ([e17e9da](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e17e9da08664af0522db07dc269a92822b7301b7))
+* removed unused code ([bd56c46](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bd56c46785a89b5366b9f1241eab065049319f6d))
+
+
+* Merge branch 'tm-3724-affiliate-links-sponspored' into 'master' ([151aa25](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/151aa25994031ed7e76d5ddb4e442d0ab6cfafb3))
+* Merge branch 'tm-3690-toplist' into 'master' ([ec8577c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec8577cada8fec754b1abb3cc8a3b90cb5c13ea8))
+* Merge branch 'master' into tm-3690-toplist ([4e2bb46](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4e2bb46b459d67e44ceb7efbdfcaba0e2868b453))
+* Merge branch 'master' into tm-3690-toplist ([c097dc4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c097dc4371d2fd56dc0622b75e6c7fac1b9a8552))
+
+
+### Tests
+
+* correction to test ([44ff3fa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/44ff3fa574c6b6f96bb1f2192aa9fbe1b581c22f))
+
+## [34.0.26](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.25...v34.0.26) (2023-10-26)
+
+
+### Bug Fixes
+
+* target ([273cbd8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/273cbd8f35e132d8975102661a7cde1e0b614a63))
+
+
+* Merge branch 'operator-details' into 'master' ([cb3d763](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cb3d76320b64c8e443484e3edf0c13339944e341))
+
 ## [34.0.25](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v34.0.24...v34.0.25) (2023-10-26)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "34.0.25",
+  "version": "35.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.0.9",
+    "gatsby-core-theme": "30.0.10",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

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

@@ -25,7 +25,6 @@ const TemplateFour = ({
   const { name, status } = relation;
   const reviewPath = path || relation.path;
   const isInactive = status === 'inactive';
-  // const prettyLink = prettyTracker(relation, 'main', false, page?.template);
 
   return (
     <div

package/src/components/atoms/cards/operators-table/index.js

@@ -59,7 +59,7 @@ const CasinosTable = ({ module, page }) => {
                     href={prettyTracker(item.relation, 'main', false, page?.template)}
                     className="table-operator-card-gtm btn-cta"
                     target="_blank"
-                    rel="noreferrer"
+                    rel="nofollow noreferrer sponsored"
                   >
                     {`${translate(translations, 'visit_table', 'Visit')} ${item?.relation?.name}`}
                   </a>

package/src/components/atoms/operator-bonuses/index.js

@@ -3,18 +3,17 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable camelcase */
 import React, { useContext } from 'react';
-import Button from 'gatsby-core-theme/src/components/atoms/button';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import PropTypes from 'prop-types';
 import styles from './operator-bonuses.module.scss';
 
-import { getBonus, prettyTracker, translate } from '~helpers/getters';
+import { getBonus, translate } from '~helpers/getters';
 
 const OperatorBonuses = ({ page, operator }) => {
   const onliner = getBonus('main', operator);
   const { min_deposit, currency } = operator?.bonus;
   const { deposit_wagering } = operator;
-  const prettyLink = prettyTracker(operator, 'main', false, page?.template);
   const status = operator?.status;
   const isPlaceholder = status === 'coming_soon' || page.extra_fields.operator_is_placeholder == 1;
   const isInoperative = status === 'inactive' || page.extra_fields.operator_is_inoperative == 1;
@@ -59,12 +58,22 @@ const OperatorBonuses = ({ page, operator }) => {
           </p>
         )}
         {!isPlaceholder && !isInoperative && (
-          <Button
-            to={prettyLink}
-            className="btnMain"
-            isInternalLink={false}
-            btnText={translate(translations, 'btn_bonus', 'Get your bonus now')}
-            gtmClass="bonus-cta btn-cta"
+          <OperatorCta
+            translationsObj={{
+              active: { translationKey: 'btn_bonus', defaultValue: 'Get your bonus now' },
+              not_recommended: {
+                translationKey: 'not_recommended',
+                defaultValue: 'Not Recommended',
+              },
+              coming_soon: { translationKey: 'coming_soon', defaultValue: 'Soon Available' },
+              inactive: {
+                translationKey: 'inactive',
+                defaultValue: 'Not Accepting New Players',
+              },
+              blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
+            }}
+            operator={operator}
+            tracker="main"
           />
         )}
       </div>

package/src/components/molecules/header/variants/operator/template-five/index.js

@@ -32,7 +32,12 @@ const TemplateFive = ({
   const { translations } = useContext(Context) || {};
 
   const logo = () => (
-    <a href={prettyLink} target="_blank" rel="noreferrer" className="header-gtm logo-cta ">
+    <a
+      href={prettyLink}
+      target="_blank"
+      rel="nofollow noreferrer sponsored"
+      className="header-gtm logo-cta "
+    >
       <LazyImage
         loading="eager"
         src={imagePrettyUrl(image?.filename, 208, 208)}

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

@@ -29,7 +29,12 @@ const TemplateFour = ({
   const ribbon = ribbons?.length > 0 ? ribbons[0] : null;
 
   const logo = () => (
-    <a href={prettyLink} target="_blank" rel="noreferrer" className="header-gtm logo-cta ">
+    <a
+      href={prettyLink}
+      target="_blank"
+      rel="nofollow noreferrer sponsored"
+      className="header-gtm logo-cta "
+    >
       <LazyImage
         loading="eager"
         src={imagePrettyUrl(image?.filename, 300, 300)}

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

@@ -32,7 +32,12 @@ const TemplateOneTwo = ({
   const ribbon = ribbons?.length > 0 ? ribbons[0] : null;
 
   const logo = () => (
-    <a href={prettyLink} target="_blank" rel="noreferrer" className="header-gtm logo-cta ">
+    <a
+      href={prettyLink}
+      target="_blank"
+      rel="nofollow noreferrer sponsored"
+      className="header-gtm logo-cta "
+    >
       <LazyImage
         loading="eager"
         src={imagePrettyUrl(image?.filename, 179, 179)}

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

@@ -22,7 +22,12 @@ const TemplateThree = ({
   const ribbon = ribbons?.length > 0 ? ribbons[0] : null;
 
   const logo = () => (
-    <a href={prettyLink} target="_blank" rel="noreferrer" className="header-gtm logo-cta ">
+    <a
+      href={prettyLink}
+      target="_blank"
+      rel="nofollow noreferrer sponsored"
+      className="header-gtm logo-cta "
+    >
       <LazyImage
         loading="eager"
         src={imagePrettyUrl(image?.filename, 179, 179)}

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

@@ -4,16 +4,22 @@ import loadable from '@loadable/component';
 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 { translate, imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
+import {
+  translate,
+  imagePrettyUrl,
+  getAltText,
+  prettyTracker,
+} from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from '~context/MainProvider';
 import styles from './operator-details.module.scss';
 
 const OperatorDetails = ({
   item,
-  link,
+  prettyLinkTracker = false,
   costumeStyle,
   template,
   ribbons,
+  tracker = 'main',
   showRating = true,
   showAuthor = true,
   showReviewLink = true,
@@ -32,6 +38,9 @@ const OperatorDetails = ({
 
   const itemName = item?.name || item?.relation?.name;
 
+  const trackerType = tracker.toLowerCase().replace(' ', '_');
+  const prettyLink = prettyTracker(item, trackerType, false, template);
+
   const image =
     item?.standardised_logo_url_object ||
     item?.logo_url_object ||
@@ -62,9 +71,27 @@ const OperatorDetails = ({
       ? loadable(() => import('../../atoms/author/template-two'))
       : null;
 
+  // eslint-disable-next-line react/prop-types
+  const Tag = ({ children, classStyle = '' }) =>
+    prettyLinkTracker ? (
+      <a
+        href={prettyLink}
+        aria-label={itemName}
+        target="_blank"
+        rel="nofollow noreferrer sponsored"
+        className={classStyle}
+      >
+        {children}
+      </a>
+    ) : (
+      <Link to={reviewPath} className={classStyle}>
+        {children}
+      </Link>
+    );
+
   return (
     <div className={`${styles.operatorDetails} ${costumeStyle}`}>
-      <Link to={link || reviewPath}>
+      <Tag classStyle="Logo cta">
         <LazyImage
           src={imagePrettyUrl(image?.filename, imageWidth, imageHeight)}
           alt={getAltText(image, itemName)}
@@ -78,7 +105,7 @@ const OperatorDetails = ({
           typeof ribbons !== 'undefined' &&
           ribbons &&
           ribbons?.length > 0 && <span className={styles.ribbon}>{ribbons[0]}</span>}
-      </Link>
+      </Tag>
 
       <div className={styles.details}>
         {showRibbon &&
@@ -91,9 +118,7 @@ const OperatorDetails = ({
             </span>
           )}
 
-        <Link to={link || reviewPath} className={styles.operatorName}>
-          {itemName}
-        </Link>
+        <Tag classStyle={`${styles.operatorName} name-cta `}>{itemName}</Tag>
 
         <div
           className={`${styles.ratingAuthor}
@@ -159,7 +184,8 @@ OperatorDetails.propTypes = {
     }),
   }),
   costumeStyle: PropTypes.string,
-  link: PropTypes.string,
+  prettyLinkTracker: PropTypes.bool,
+  tracker: PropTypes.string,
   showRating: PropTypes.bool,
   showAuthor: PropTypes.bool,
   showReviewLink: PropTypes.bool,

package/src/components/molecules/operator-details/operator-details.module.scss

@@ -4,7 +4,6 @@
 
   > a {
     flex: none;
-    position: relative;
   }
 }
 
@@ -17,19 +16,26 @@
 .ribbon {
   position: absolute;
   white-space: nowrap;
-  width: 100%;
-  bottom: 0px;
-  font-weight: 600;
-  font-size: 1rem;
-  line-height: 2.8rem;
-  text-transform: capitalize;
+  width: auto;
+  top: -1rem;
+  right: 2.4rem;
+  font-weight: 700;
+  font-size: 0.9rem;
+  line-height: normal;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #5545a9;
-  color: #fff;
+  background-color: #20cd77;
+  color: #1b1b1c;
   border-radius: 10rem;
-  height: 1.8rem;
+  padding: 0.4rem 0.8rem;
+
+  @include min (tablet) {
+    right: auto;
+    left: 2.4rem;
+  }
 }
 
 .contentRibbon {

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

@@ -39,7 +39,7 @@ const Index = ({ page }) => {
               href={prettyLink}
               title={operator.name}
               target="_blank"
-              rel="noreferrer"
+              rel="nofollow noreferrer sponsored"
               className="small-welcome-bonus-gtm logo-cta"
               aria-label={`${operator?.name} Link`}
             >
@@ -59,11 +59,10 @@ const Index = ({ page }) => {
               href={prettyLink}
               title={operator.name}
               target="_blank"
-              rel="noreferrer"
+              rel="nofollow noreferrer sponsored"
               className="small-welcome-bonus-gtm"
             >
-              {' '}
-              {playNow}{' '}
+              {playNow}
             </a>
           )}
         </div>

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

@@ -1,16 +1,11 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { prettyTracker, getExtraField, translate } from 'gatsby-core-theme/src/helpers/getters';
-import Label from 'gatsby-core-theme/src/components/atoms/label';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-one';
-import { Context } from 'gatsby-core-theme/src/context/MainProvider';
-import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
-import { getLaunchDate } from '../../../../helpers/strings';
 import CasinoDetails from '../../operator-details';
 import styles from './variant-one.module.scss';
 
@@ -19,38 +14,17 @@ export default function Row({
   tracker = 'main',
   oneliner = 'main',
   layout = 'list',
-  number = 1,
   index,
-  isPPC = false,
-  showLaunchDate = true,
-  showCtaReviewLink = false,
   className,
   itemRefs,
-  endLink = false,
   authorTemplateTwo = false,
   showAuthor,
   useOneStarRating,
   template,
 }) {
-  const itemName = item.name;
-  const reviewPath = item.review_link ? `/${item.review_link}` : item.path || null;
-  const pros = item.extra_fields?.pro_1 || item.extra_fields?.pro_2 || item.extra_fields?.pro_3;
-  const { translations } = useContext(Context) || {};
   const tandcEnabled = item?.extra_fields?.terms_and_conditions_text_enabled === '1';
-  let sellingPoints = item.selling_points;
-  if (pros) {
-    sellingPoints = [
-      item.extra_fields.pro_1,
-      item.extra_fields.pro_2,
-      item.extra_fields.pro_3,
-    ].filter(Boolean);
-  }
-  const trackerType = tracker.toLowerCase().replace(' ', '_');
-  const prettyLink = prettyTracker(item, trackerType, false, template);
+  const sellingPoints = item.selling_points;
   const { ribbons } = item;
-  const hasRibbon = ribbons && ribbons.length > 0;
-
-  const launchDate = getLaunchDate(item.founded);
 
   const addToRefs = (el, itemNum) => {
     if (el && itemRefs) {
@@ -61,102 +35,45 @@ export default function Row({
   return (
     <li
       className={`${className || ''} ${styles?.row || ''} ${
-        layout === 'grid' ? styles?.grid || '' : ''
-      } ${showLaunchDate ? styles?.launchDate || '' : ''} ${
         !tandcEnabled ? styles?.rowNoTandC || '' : ''
       }`}
       ref={(el) => addToRefs(el, index)}
     >
-      {layout === 'grid' && (
-        <div
-          className={`${styles?.numbers || ''} ${styles[`num_${number}`] || ''}`}
-          id={`num_${number}`}
-        >
-          {number}
-        </div>
-      )}
-      {hasRibbon && (
-        <div className={styles?.ribbon || ''}>
-          {ribbons.slice(0, 3).map((r) => (
-            <Label
-              title={r}
-              bgColor={
-                getExtraField(item.extra_fields, 'ribbon_color')
-                  ? getExtraField(item.extra_fields, 'ribbon_color')
-                  : '#0000'
-              }
-            />
-          ))}
-        </div>
-      )}
-
       <CasinoDetails
         item={item}
         tracker={tracker}
         template={template}
-        link={prettyLink}
+        prettyLinkTracker
         showAuthor={showAuthor}
         useOneStarRating={useOneStarRating}
         costumeStyle={styles.operatorDetails}
         authorTemplateTwo={authorTemplateTwo}
+        ribbons={ribbons}
+        showRibbon
       />
 
       <Bonus item={item} tracker={oneliner} />
 
       <SellingPoints sellingPoints={sellingPoints} limit={3} />
 
-      {showLaunchDate && (
-        <div className={styles?.launchDate || ''}>
-          {launchDate && (
-            <>
-              <p className={styles?.launchDateLabel || ''}>
-                {translate(translations, 'launch_date', 'Launch Date')}
-              </p>
-              <p>{launchDate}</p>
-            </>
-          )}
-        </div>
-      )}
-
-      <span className={styles?.ctaAndReview || ''}>
-        <OperatorCta
-          operator={item}
-          tracker={tracker}
-          gtmClass="toplist-operator-cta-gtm"
-          pageTemplate={template}
-        />
-        {!isPPC && showCtaReviewLink && reviewPath && (
-          <ReviewLink
-            className={`${styles?.reviewLink || ''} toplist-variant-one-gtm`}
-            template={template}
-            operatorName={itemName}
-            reviewPath={reviewPath}
-          />
-        )}
-      </span>
+      <OperatorCta
+        operator={item}
+        tracker={tracker}
+        gtmClass="toplist-operator-cta-gtm"
+        pageTemplate={template}
+      />
 
-      {!isPPC && endLink && reviewPath && (
-        <ReviewLink
-          className={`${styles?.reviewLinkEnd || ''}  toplist-variant-one-gtm`}
-          template={template}
-          operatorName={itemName}
-          reviewPath={reviewPath}
-        />
-      )}
       {tandcEnabled && <Tnc onlyMobile={layout === 'list'} operator={item} />}
     </li>
   );
 }
 
 Row.propTypes = {
-  showLaunchDate: PropTypes.bool,
   index: PropTypes.number,
   className: PropTypes.string,
   tracker: PropTypes.string,
   oneliner: PropTypes.string,
   layout: PropTypes.oneOf(['list', 'grid']),
-  showCtaReviewLink: PropTypes.bool,
-  endLink: PropTypes.bool,
   item: PropTypes.shape({
     path: PropTypes.string,
     authorName: PropTypes.string,
@@ -193,8 +110,6 @@ Row.propTypes = {
       logo_url: PropTypes.string,
     }),
   }).isRequired,
-  number: PropTypes.number,
-  isPPC: PropTypes.bool,
   showAuthor: PropTypes.bool,
   useOneStarRating: PropTypes.bool,
 };