gatsby-matrix-theme 7.1.14 → 7.1.15

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [7.1.15](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.14...v7.1.15) (2022-05-27)
+
+
+### Bug Fixes
+
+* add translate for toggle button ([0464483](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0464483c2ac776aee2b9d461a72c737b6d8fee6b))
+* fixed logic of anchor ([0c45039](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0c450393bfe8c9deb00569115773367efc48558d))
+* udpate variantone to expect prop ([bbac40d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bbac40d3f5242b1a5443a544248f3accf2da0c5c))
+* update showLaunchDate ([9eaf100](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9eaf1003e7ab4fb4d75e0be49c67df00c6117210))
+* update variant one and its style to match il and nsa ([b605272](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b605272235cfe5aacbcbfd133b853873f4179c87))
+
+
+* Merge branch 'tm-2062-change-toplist-logo' into 'master' ([fee0d3e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fee0d3e2962b5e834e3ec1468dd7e59c233b52a4))
+* Merge branch 'tm-2894-popup-design' into 'master' ([aa0d98c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa0d98c173162ad6c16893de006ea2770c3873b2))
+* Merge branch 'tm-2907-anchor' into 'master' ([720818e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/720818eec7ab3754550f881b3e0f7b6c23c9fcab))
+
 ## [7.1.14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.13...v7.1.14) (2022-05-26)
 
 

package/package.json

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

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

@@ -28,13 +28,14 @@ export default function Row({
   layout = 'list',
   number = 1,
   isPPC = false,
+  showLaunchDate = true,
 }) {
   const itemName = item.name;
   const itemRating = item.rating;
   const reviewPath = item.review_link ? `/${item.review_link}` : item.path || '/';
-  const logoUrl = item.logo_url;
   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 = [
@@ -45,18 +46,24 @@ export default function Row({
   }
   const trackerType = tracker.toLowerCase().replace(' ', '_');
   const prettyLink = prettyTracker(item, trackerType);
+  const hasRibbon = getExtraField(item.extra_fields, 'ribbon_text');
+  const imageObject = item?.standardised_logo_url_object || item?.logo_url_object;
+
   const launchDate = getLaunchDate(item.founded);
-  const logUrlObject = item?.logo_url_object;
 
   return (
-    <div className={`${styles.row} ${layout === 'grid' ? styles.grid : ''}`}>
+    <div
+      className={`${styles.row} ${layout === 'grid' ? styles.grid : ''} ${
+        showLaunchDate ? styles.launchDate : ''
+      } ${!tandcEnabled ? styles.rowNoTandC : ''}`}
+    >
       {layout === 'grid' && (
         <div className={`${styles.numbers} ${styles[`num_${number}`]}`} id={`num_${number}`}>
           {number}
         </div>
       )}
-      <div className={styles.ribbon}>
-        {getExtraField(item.extra_fields, 'ribbon_text') && (
+      {hasRibbon && (
+        <div className={styles.ribbon}>
           <Link to={reviewPath} className="toplist-variant-one-gtm">
             <Label
               title={getExtraField(item.extra_fields, 'ribbon_text')}
@@ -67,8 +74,8 @@ export default function Row({
               }
             />
           </Link>
-        )}
-      </div>
+        </div>
+      )}
 
       <div className={styles.casinoDetails}>
         <a
@@ -79,10 +86,13 @@ export default function Row({
           className="toplist-variant-one-gtm logo-cta"
         >
           <LazyImage
-            alt={getAltText(logUrlObject, itemName)}
-            width={128}
-            height={40}
-            src={imagePrettyUrl(logoUrl, 128, 60)}
+            alt={getAltText(imageObject, item.name)}
+            src={imagePrettyUrl(imageObject?.filename || item?.logo_url, 80).replace(
+              'filters:format(webp)/',
+              ''
+            )}
+            width={80}
+            height={800}
           />
         </a>
         <div>
@@ -94,53 +104,53 @@ export default function Row({
           >
             {itemName}
           </a>
-          <StarRating numOfStars={5} rating={itemRating} />
+          <StarRating numOfStars={5} rating={itemRating} showLabel />
+          {!isPPC && (
+            <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
+              {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
+            </Link>
+          )}
         </div>
       </div>
-      <div className={styles.bonus}>
-        <a
-          href={prettyLink}
-          target="_blank"
-          rel="noreferrer"
-          className="toplist-variant-one-gtm bonus-cta"
-        >
-          <Bonus item={item} tracker={oneliner} />
-        </a>
-        {!isPPC && (
-          <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
-            {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
-          </Link>
-        )}
-      </div>
-      <div className={styles.pros}>
-        <SellingPoints icon={<MdCheck />} sellingPoints={sellingPoints} limit={3} />
-      </div>
-      <div className={styles.launchDate}>
-        {launchDate && (
-          <>
-            <p>{translate(translations, 'launch_date', 'Launch Date')}</p>
-            <p>{launchDate}</p>
-          </>
-        )}
-      </div>
-      <div className={styles.cta}>
-        <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
-        {!isPPC && (
-          <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={reviewPath}>
-            {`${itemName} ${translate(translations, 'read_review', 'Review')}`}
-          </Link>
-        )}
-      </div>
-      <div className={styles.tandc}>
-        {item?.extra_fields?.terms_and_conditions_text_enabled === '1' && (
-          <Tnc onlyMobile={layout === 'list'} operator={item} />
+
+      <a
+        href={prettyLink}
+        target="_blank"
+        rel="noreferrer"
+        className={`toplist-variant-one-gtm bonus-cta ${styles.bonus} ${
+          showLaunchDate ? styles.bonusLaunch : ''
+        } ${hasRibbon ? styles.withRibbon : ''}`}
+      >
+        <Bonus item={item} tracker={oneliner} />
+        {showLaunchDate && (
+          <span>
+            {translate(translations, 'launch_date', 'Launch Date')}: {launchDate}
+          </span>
         )}
-      </div>
+      </a>
+      <SellingPoints icon={<MdCheck />} 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>
+      )}
+      <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
+
+      {tandcEnabled && <Tnc onlyMobile={layout === 'list'} operator={item} />}
     </div>
   );
 }
 
 Row.propTypes = {
+  showLaunchDate: PropTypes.bool,
   tracker: PropTypes.string,
   oneliner: PropTypes.string,
   layout: PropTypes.oneOf(['list', 'grid']),
@@ -150,7 +160,6 @@ Row.propTypes = {
     name: PropTypes.string,
     logo_url: PropTypes.string,
     rating: PropTypes.string,
-    logo_url_object: PropTypes.shape({}),
     selling_points: PropTypes.arrayOf(PropTypes.string),
     review_link: PropTypes.string,
     one_liners: PropTypes.shape({
@@ -166,6 +175,11 @@ Row.propTypes = {
       pro_2: PropTypes.string,
       pro_3: PropTypes.string,
     }),
+    // eslint-disable-next-line react/forbid-prop-types
+    standardised_logo_url_object: PropTypes.object,
+    // eslint-disable-next-line react/forbid-prop-types
+    logo_url_object: PropTypes.object,
+
     bonus: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
     relation: PropTypes.shape({
       rating: PropTypes.string,

package/src/components/molecules/toplist/row/variant-one.module.scss

@@ -1,29 +1,42 @@
 .row {
-  background: var(--color-9);
+  background: #f3f2f2;
   border-radius: var(--border-radius);
   position: relative;
   text-align: center;
-  padding: 1rem 3rem;
+  justify-content: center;
+  align-items: center;
+  padding: 3.8rem 2.4rem 3.2rem 2.4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.7rem;
 
   @include min(tablet) {
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-columns: 1.5fr 1.5fr 1fr;
     column-gap: 1rem;
-    padding: 0 0 0 2.4rem;
+    padding: 0 0 0 2rem;
     text-align: inherit;
+    row-gap: 1.6rem;
   }
 
   @include min(laptop) {
-    grid-template-columns: 1fr 1.5fr 1.5fr 1fr 1fr;
-    padding: 1rem 0 0 2rem;
+    grid-template-columns: 2.5fr 2fr 2fr 0.5fr;
+    padding: 1.8rem 0 0 2rem;
   }
 
-  &:hover {
-    background: #ffffff;
-    box-shadow: 0 0 1.4rem 0.3rem #f0f0f0;
+  &.launchDate {
+    @include min(tablet) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
 
-    .tandc {
-      background: #ffffff;
+    @include min(laptop) {
+      grid-template-columns: 2.5fr 2fr 2fr 0.8fr 0.5fr;
+    }
+  }
+
+  .launchDateLabel {
+    @include min(tablet) {
+      display: none;
     }
   }
 
@@ -33,14 +46,16 @@
     top: 0.2rem;
 
     span {
-      padding: 0.5rem 1rem;
-      font-size: 1.4rem;
-      color: black;
+      padding: 0.8rem 1rem;
+      font-size: 1rem;
+      color: #08202e;
       font-weight: 700;
       text-transform: uppercase;
+      background-color: #ffc740 !important;
       border-radius: var(--border-radius) 0;
 
       @include min(tablet) {
+        padding: 0.5rem 1rem;
         font-size: 1rem;
       }
     }
@@ -57,179 +72,196 @@
   }
 
   .casinoDetails {
-    padding-left: 0;
+    width: 100%;
+    @include flex-align(center, flex-start);
+    flex-direction: row;
+    gap: 1.6rem;
 
     @include min(tablet) {
-      padding-left: 1rem;
-      @include flex-align(flex-start, space-between);
-      flex-direction: column;
+      padding-left: 1.6rem;
+      width: auto;
+      order: 2;
     }
 
-    img {
-      margin-top: 3rem;
-      width: auto;
-      height: 4rem;
+    @include min(desktop) {
+      padding-left: 2.4rem;
+      order: 1;
+    }
 
-      @include min(tablet) {
-        margin-top: 1rem;
-      }
+    > a {
+      display: flex;
+      flex: 0 0 8rem;
+    }
+
+    img {
+      width: 8rem;
+      height: 8rem;
+      border-radius: 0.8rem;
     }
 
     > div {
-      @include flex-align(center, space-between);
+      @include flex-align(flex-start, space-between);
+      flex-direction: column;
+      gap: 0.8rem;
 
-      @include min(tablet) {
-        width: 100%;
+      a:first-child {
+        @include link-color(#5a4e51);
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 22px;
       }
 
-      @include max(mobile) {
-        width: 80%;
-        margin: 0 auto;
+      > div {
+        border: 0;
       }
 
-      a {
-        @include link-color(#5a4e51);
-        font-size: 1.4rem;
-        font-weight: 400;
+      a:last-child {
+        font-weight: 700;
+        font-size: 13px;
+        line-height: 16px;
+      }
+    }
+  }
 
-        @include min(tablet) {
-          font-size: 1.1rem;
-        }
+  > a.bonus {
+    @include flex-direction(column);
+    gap: 0.8rem;
+    padding-top: 0;
+
+    p {
+      padding: 0;
+    }
+
+    span {
+      font-weight: 700;
+      font-size: 16px;
+      line-height: 23px;
+      color: #150e06;
+      display: none;
+
+      @include min(tablet) {
+        display: block;
       }
 
-      > div {
-        font-size: 1.6rem;
+      @include min(laptop) {
+        display: none;
       }
     }
-  }
 
-  .bonus {
-    @include flex-direction(column);
+    &.withRibbon {
+      @include min(tablet) {
+        padding-top: 2rem !important;
+      }
+
+      @include min(desktop) {
+        padding-top: 0 !important;
+      }
+    }
 
     @include min(tablet) {
-      grid-column: 1/6;
-      order: -1;
+      grid-column: 1/4;
+      order: 1;
       flex-direction: row;
       justify-content: center;
+      align-items: center;
       background-color: var(--color-7);
-      padding: 0.3rem 0;
-      border-top-right-radius: 0.6rem;
 
-      > * {
-        padding-right: 1rem;
+      &.bonusLaunch {
+        justify-content: space-between;
+        padding: 0 1rem;
       }
     }
 
     @include min(laptop) {
       background-color: transparent;
-      order: inherit;
+      order: 2;
       grid-column: auto;
       flex-direction: column;
+      align-items: flex-start;
+      padding-top: 0;
     }
+  }
 
-    a > div {
-      @include min(tablet) {
-        @include flex-direction(row);
-        > div {
-          @include flex-align(center, center);
-        }
-      }
-
-      @include min(laptop) {
-        @include flex-direction(column);
-        > div {
-          @include flex-align(center, flex-start);
-        }
-      }
-
-      div:first-child {
-        font-size: 2rem;
-        font-weight: 700;
-        color: var(--primary-color);
-        padding-right: 1rem;
-
-        @include min(tablet) {
-          font-size: 1.6rem;
-        }
-      }
-
-      div:nth-child(2) {
-        font-size: 1.6rem;
-        color: var(--color-22);
-        font-weight: 700;
-        padding: 0.5rem 0;
-
-        @include min(tablet) {
-          font-size: 1.3rem;
-        }
-      }
+  ul {
+    @include min(tablet) {
+      order: 3;
+      padding-left: 3rem;
     }
 
-    a.reviewLink {
-      font-size: 1.3rem;
-      display: none;
+    @include min(desktop) {
+      order: 3;
+    }
 
-      @include min(tablet) {
-        display: block;
-        @include flex-align(center, center);
-      }
+    li {
+      color: #150e06;
+      text-align: left;
 
-      @include min(laptop) {
-        margin-top: auto;
-        @include flex-align(center, flex-start);
+      &::before {
+        top: 0.5rem;
       }
     }
   }
 
-  .pros, .launchDate {
-    @include flex-align(center, flex-start);
-    margin: 1.5rem 0;
+  > ul,
+  .launchDate {
+    @include flex-align(center, center);
   }
 
   .launchDate {
-    flex-direction: column;
-    font-size: 1.4rem;
+    flex-direction: row;
+    gap: 1rem;
+    font-size: 2rem;
     font-weight: 700;
+    color: #150e06;
+    justify-content: center;
+
+    @include min(tablet) {
+      display: none;
+    }
+
+    @include min(desktop) {
+      display: flex;
+      order: 4;
+    }
   }
 
-  .cta {
+  > a:not(.bonus) {
     @include flex-align(center, center);
-    @include flex-direction(column);
-    a:first-child {
-      width: 90%;
+    width: 100%;
+    word-break: inherit;
 
-      @include min(tablet) {
-        width: auto;
-      }
+    @include min(tablet) {
+      margin-right: 2.4rem;
+      order: 4;
+      width: auto;
     }
 
-    a:nth-child(2) {
-      padding-top: 1.5rem;
-      @include min(tablet) {
-        display: none;
-      }
+    @include min(desktop) {
+      order: 4;
     }
   }
 
-  .tandc {
-    grid-column: 1/6;
+  > div:last-child {
     border-radius: 0 0 var(--border-radius) 0;
     color: var(--color-34);
     font-size: 0.8rem;
     padding: 0.6rem 1rem;
     text-align: center;
 
-    button {
-      font-size: 1.2rem;
-    }
-
     p {
       @include max(tablet) {
         margin-top: 1rem;
       }
     }
 
-    @include min(laptop) {
+    @include min(tablet) {
+      order: 5;
+      grid-column: 1/4;
+    }
+
+    @include min(desktop) {
+      grid-column: 1/6;
+      order: 5;
       background: var(--color-7);
     }
   }
@@ -327,3 +359,7 @@
     }
   }
 }
+
+.rowNoTandC {
+  padding-bottom: 1.8rem;
+}

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

@@ -1,3 +1,5 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-unused-expressions */
 /* eslint-disable react/button-has-type */
 /* eslint-disable react-hooks/exhaustive-deps */
@@ -27,11 +29,17 @@ const Popup = ({ module, isStorybook = false, toggle = false, icon = null, numbe
   const { translations } = useContext(Context) || {};
   const date = new Date();
   const month = months[date.getMonth()];
-  const title = translate(translations, 'popupTitle', 'Claim These Exclusive Bonuses').replace(
+  const title = translate(translations, 'popup_title', 'Claim These Exclusive Bonuses').replace(
     'month',
     month
   );
 
+  const toggleTitle = translate(
+    translations,
+    'popup_toggle_title',
+    'Claim These Exclusive Bonuses'
+  ).replace('month', month);
+
   const handelActive = (status) => {
     setShowModal(status);
   };
@@ -129,7 +137,7 @@ const Popup = ({ module, isStorybook = false, toggle = false, icon = null, numbe
                 }}
               >
                 {icon}
-                <p>{title}</p>
+                <p>{toggleTitle}</p>
               </div>
             )}
           </div>

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

@@ -6,6 +6,7 @@ import loadable from '@loadable/component';
 import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
 import { prettyTracker, getSectionExtraField } from 'gatsby-core-theme/src/helpers/getters';
 import ModuleTitle from 'gatsby-core-theme/src/components/atoms/module-title';
+import { removeSymbols } from '../../../../helpers/strings';
 
 import styles from './module.module.scss';
 
@@ -113,7 +114,7 @@ const Modules = ({ module, page, pageContext }) => {
   return (
     ModuleComponent && (
       <div
-        id={module.anchor_label && `${anchorLink(module.anchor_label)}`}
+        id={module.anchor_label && `${removeSymbols(anchorLink(module.anchor_label))}`}
         style={module.background_color && moduleBackgroundColor}
         className={`${styles[moduleClassName] !== undefined ? styles[moduleClassName] : ''} ${
           module.name

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import keygen from '~helpers/keygen';
 import { anchorLink } from '~helpers/strings';
+import { removeSymbols } from '../../../../helpers/strings';
 import styles from './anchor.module.scss';
 
 function Anchor({ module: { items }, headerOffset = 80, isFixed = false, icon = null }) {
@@ -20,14 +21,7 @@ function Anchor({ module: { items }, headerOffset = 80, isFixed = false, icon =
 
   const handleClick = (event) => {
     event.preventDefault();
-    const scrollToElementId =
-      process.env.GATSBY_SITE_NAME === 'irishluck.ie'
-        ? event.currentTarget
-            .getAttribute('href')
-            .replace(/ /g, '-')
-            .replace(/[!?@£#$%^&*():;"'|/.,~`]/g, '')
-            .toLowerCase()
-        : event.currentTarget.getAttribute('href').replace('#', '');
+    const scrollToElementId = event.currentTarget.getAttribute('href').replace('#', '');
 
     const targetEl = document.getElementById(scrollToElementId);
 
@@ -48,7 +42,9 @@ function Anchor({ module: { items }, headerOffset = 80, isFixed = false, icon =
             className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
             key={keygen()}
             onClick={handleClick}
-            href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}
+            href={`#${
+              anchor.label && removeSymbols(anchorLink(anchor?.label?.toLowerCase().trim()))
+            }`}
           >
             {anchor.label}
             {icon}