gatsby-matrix-theme 10.0.9 → 10.0.11

package/.ci.yml

@@ -26,7 +26,7 @@ Matrix Theme Test:
     - if: '$CI_PIPELINE_SOURCE == "push" && ($CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "master" || $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "beta") && $PIPELINE == "automated"'
 
 Theme Publish:
-  image: git.ilcd.rocks:4567/team-floyd/themes/gatsby-themes:node14
+  image: node:18.0.0
   stage: publish
   tags:
     - floyd-runner-test

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+## [10.0.11](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.10...v10.0.11) (2023-01-10)
+
+
+### Bug Fixes
+
+* comparison table irl border ([45cd7b5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/45cd7b549754808c97f72699b754beaf4ffc5f6c))
+* remove content, we will get it from core ([404b329](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/404b32971e264ae5cd8a1df8d2306e16ab1c1085))
+* remove story books ([f9ca6a1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f9ca6a17cd5fa9823b566b6d739e4d7745140254))
+
+
+### Code Refactoring
+
+* add spotlights style override ([785a936](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/785a936aa47b63a39515de0e29015231662b792c))
+* update spotlights ol numbering ([27d9985](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/27d9985cb365c576d010794076af330b51669bb0))
+* update strings.test.js with 2023 year ([bfe88ca](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bfe88ca25d856b95302c99b2be6e5d8c55366d1b))
+
+
+### Config
+
+* update core theme and publish node versions ([aa07249](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa072495e01fa9774fe57003ba8693a89c683b5b))
+* update core theme version ([c3cdd03](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c3cdd033fe44539ed090c9de942feb5e0fcbb143))
+* update publish node version to 18 ([fa31294](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa31294a5514b190648ef643f964f898b4411365))
+
+
+* Merge branch 'update-publish-node-version' into 'master' ([461f08c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/461f08c5a95222c2f9a336d33b367ad53eba7ab1))
+* Merge branch 'tm-3247-update-spotlights-ol-numbering' into 'master' ([b7400ae](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b7400ae5f33f0facb8f1df3f72ede1410ef001c1))
+* Merge branch 'master' into 'tm-3247-update-spotlights-ol-numbering' ([e88cdb4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e88cdb4a116ef0e84d7e17b36be75ebd6895fd56))
+* Merge branch 'tm-3255-content-module-show-more' into 'master' ([370a937](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/370a937359b925cbd881698bdd1d30c5b6e7a942))
+* Merge branch 'tm-3099-comparison-table' into 'master' ([5d464dc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5d464dc7eac1e1cb1e4b753dd156f35f6faa7c79))
+
+## [10.0.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.9...v10.0.10) (2023-01-02)
+
+
+### Bug Fixes
+
+* comparison table ([ce828af](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ce828afcd759c3de602dfd9d2f1bd9429c4c064f))
+* comparison table ([b5d67df](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b5d67df8231c55694c568ff8cbffa6de4dc52f70))
+* comparison table ([433a63c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/433a63c8cd38b816e253270934c021cd34bfb21c))
+* jest error ([c4f84ce](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c4f84ce52010e16fe0869212bf4b8db4f8bd4370))
+* tests ([37f57d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/37f57d0012099a62ade1f6171a7786f81b1a1e63))
+* updated to latest core version ([3cf1c9c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3cf1c9c8c32810ee4aab6df4dac29ee4ff90507c))
+* using star-rating/one-star ([7335207](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/73352079d3e9ca2c197ac198cab98bdce7008192))
+
+
+* Merge branch 'tm-3099-comparison-table-matrix' into 'master' ([dfe7057](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dfe705776f4bed45f338495ef805b95fb4ca73cd))
+
 ## [10.0.9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v10.0.8...v10.0.9) (2022-12-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "10.0.9",
+  "version": "10.0.11",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "17.0.7",
+    "gatsby-core-theme": "17.0.10",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -3,13 +3,13 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { AiOutlineCheckCircle } from '@react-icons/all-files/ai/AiOutlineCheckCircle';
 import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImg from 'gatsby-core-theme/src/hooks/lazy-image';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
-import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
+import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
@@ -67,11 +67,7 @@ export default function ComparisonTable({
   tempate,
 }) {
   const { translations } = useContext(Context) || {};
-  const [showAllPayment, setShowAllPayment] = useState([]);
 
-  const showAllPayments = (index) => {
-    setShowAllPayment([...showAllPayment, index]);
-  };
   const cell = (heading, item, key, index) => {
     const rowData = tabelInfo.find((m) => m.key === heading);
     if (rowData && rowData.customComponent) {
@@ -80,7 +76,7 @@ export default function ComparisonTable({
     }
     const imageObject =
       item?.relation.standardised_logo_url_object || item?.relation.logo_url_object;
-    const itemName = item?.relation.name;
+    const itemName = item?.relation?.name;
 
     switch (heading) {
       case 'casino_name':
@@ -118,8 +114,13 @@ export default function ComparisonTable({
         return (
           <td key={key} className={styles.raiting}>
             <StarRating numOfStars={5} rating={item?.relation?.rating} />
+
             {type === 'operator' && index === 0 ? null : (
-              <Link to={item.path}>{translate(translations, 'review', 'Review')}</Link>
+              <Link to={item.path}>{`${itemName} ${translate(
+                translations,
+                'review',
+                'Review'
+              )}`}</Link>
             )}
           </td>
         );
@@ -144,38 +145,26 @@ export default function ComparisonTable({
       case 'payment_methods':
         return (
           <td key={key} className={styles.paymentMethods}>
-            <div>
+            <div key={key}>
               {item?.relation?.bonus?.deposit_methods &&
                 // eslint-disable-next-line array-callback-return
-                item?.relation?.bonus?.deposit_methods.map((deposit, i, list) => {
-                  let itemsLength = list.length === 6 ? 6 : 5;
-                  if (i < (showAllPayment.includes(index) ? list.length : itemsLength)) {
-                    if (deposit?.logo_filename) {
-                      return (
-                        <Link to={deposit?.path}>
-                          <LazyImg
-                            key={`${key}-${deposit.name}`}
-                            src={imagePrettyUrl(deposit?.logo_filename, 72, 72)}
-                            width={72}
-                            height={72}
-                            alt={deposit.name}
-                          />
-                        </Link>
-                      );
-                    }
-                    itemsLength -= 1;
-                  }
-                })}
-              {item?.relation?.bonus?.deposit_methods?.length > 6 &&
-                !showAllPayment.includes(index) && (
-                  <a
-                    onClick={() => {
-                      showAllPayments(index);
-                    }}
-                  >
-                    +{item?.relation?.bonus?.deposit_methods.length - 5}
-                  </a>
-                )}
+                item?.relation?.bonus?.deposit_methods?.slice(0, 5)?.map((deposit) => (
+                  <Link to={deposit?.path}>
+                    <LazyImg
+                      key={`${key}-${deposit.name}`}
+                      src={imagePrettyUrl(
+                        deposit?.standardised_logo_filename_object?.filename ||
+                          deposit?.standardised_logo_filename ||
+                          deposit?.logo_filename,
+                        72,
+                        32
+                      )}
+                      width={72}
+                      height={32}
+                      alt={deposit.name}
+                    />
+                  </Link>
+                ))}
             </div>
           </td>
         );
@@ -184,13 +173,13 @@ export default function ComparisonTable({
           <td key={key} className={styles.banking}>
             {item?.relation?.bonus?.min_deposit && (
               <p>
-                {translate(translations, 'min_deposit', 'Min Deposit')}
+                {translate(translations, 'min_deposit', 'Min Deposit:')}
                 <span>{item.relation.bonus.min_deposit}</span>
               </p>
             )}
             {item?.relation?.bonus?.max_withdrawal && (
               <p>
-                {translate(translations, 'max_withdrawal', 'Max Withdrawal')}
+                {translate(translations, 'max_withdrawal', 'Max Withdrawal:')}
                 <span>{item.relation.bonus.max_withdrawal}</span>
               </p>
             )}
@@ -241,7 +230,7 @@ export default function ComparisonTable({
       });
 
       row.push(
-        <tr key={heading.key}>
+        <tr key={heading.key} className={`${styles[heading.key]}_tr`}>
           <th>{translate(translations, heading.key, heading.defaultValue)}</th>
           {cells}
         </tr>

package/src/components/atoms/cards/comparison-table/table/table.module.scss

@@ -1,8 +1,10 @@
 .table {
+  position: relative;
+  z-index: 0;
   cursor: grabbing;
   tr {
-    grid-template-columns: 15.2rem 30rem;
-    grid-auto-columns: 30rem;
+    grid-template-columns: var(--comparison-template-columns-mobile, 9.6rem 27rem);
+    grid-auto-columns: var(--comparison-columns-mobile, 27rem);
     grid-auto-flow: column;
     display: grid;
 
@@ -22,13 +24,16 @@
     th {
       @include flex-align(center, center);
       padding: 2rem 2rem;
-      background-color: var(--comparison-header-background-color);
+      background-color: var(--comparison-header-background-color, #f9f6f3);
       border: 1px solid var(--comparison-header-border-color);
       border-bottom: none;
       box-sizing: border-box;
-      color: var(--comparison-header-text-color);
+      color: var(--comparison-header-text-color, #171f49);
       text-transform: var(--comparison-header-text-transform);
-      font-size: 1.4rem;
+      font-size: var(--comparison-th-font-size, 1.4rem);
+      font-weight: var(--comparison-th-font-weight, 600);
+      line-height: var(--comparison-th-line-height, 2.1rem);
+      z-index: 1;
 
       @include min(laptop) {
         position: sticky;
@@ -46,7 +51,7 @@
       @include flex-align(center, flex-start);
       padding: 1.6rem;
       img {
-        border: 1px solid var(--color-9);
+        border: 1px solid var(--comparison-img-border-color, #f3f2f2);
         box-sizing: border-box;
         margin-right: 1.6rem;
         border-radius: 0.6rem;
@@ -54,12 +59,21 @@
       > div {
         height: 100%;
         @include flex-direction(column);
-        @include flex-align(flex-start, space-between);
+        @include flex-align(flex-start, space-evenly);
         span {
           font-weight: bold;
           font-size: 18px;
           line-height: 25px;
-          color: black;
+          font-weight: 700;
+          color: #000000;
+          word-break: break-word;
+        }
+
+        a {
+          width: 100%;
+          color: var(--comparison-button-color, white) !important;
+          font-size: var(--comparison-button-font-size, 1.8rem) !important;
+          font-weight: var(--comparison-button-font-weight, 700) !important;
         }
       }
     }
@@ -67,27 +81,39 @@
     .bonus {
       @include flex-direction(column);
       @include flex-align(flex-start, column);
-      p:first-child {
+      span:first-child {
         font-size: 1.6rem;
+        line-height: 22px;
         font-weight: bold;
+        color: var(--comparison-first-bonus-color, #17d670);
       }
-      p:nth-child(2) {
-        font-size: 1.4rem;
+      span:nth-child(2) {
         font-weight: bold;
+        font-size: 1.4rem;
+        font-weight: 700;
+        line-height: 21px;
+        color: var(--comparison-second-bonus-color, #0f0c28);
       }
     }
 
     .raiting {
       @include flex-align(center, space-between);
 
-      > div >div >span {
+      > div {
+        justify-content: left;
+        border: none;
+      }
+
+      > div > div > span {
         position: inherit;
       }
 
       a {
-        font-weight: bold;
+        text-align: right;
         font-size: 1.6rem;
-        color: var(--text-link-color);
+        line-height: 24px;
+        font-weight: 700;
+        color: var(--comparison-text-link-color, #4790fe);
       }
     }
     .topFeatures {
@@ -98,11 +124,14 @@
         @include flex-align(center, center);
         margin-bottom: 0.4rem;
         margin-top: 0.4rem;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+
         svg {
-          color: var(--comparison-top-features-icon-color);
-          margin-right: 0.93rem;
-          min-width: 2.5rem;
-          height: 2rem;
+          color: var(--comparison-top-features-icon-color, #ff893f);
+          margin-right: 0.25rem;
+          height: 14px;
         }
       }
     }
@@ -112,14 +141,14 @@
       p {
         width: 100%;
         @include flex-align(center, space-between);
-        font-weight: 500;
-        font-size: 1.4rem;
-        line-height: 2.4rem;
-        margin-bottom: 1rem;
-        color: black;
-        a {
-          font-weight: bold;
-          text-decoration: none;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 36px;
+
+        color: #000000;
+        span {
+          font-weight: 700;
+          font-size: var(--comparison-banking-values, 16px);
         }
       }
     }
@@ -129,33 +158,27 @@
       span {
         text-align: center;
         margin-left: 0.4rem;
-        background: var(--comparison-currencies-background-color);
-        color: var(--comparison-currencies-text-color);
+        background-color: var(--comparison-currencies-background-color, #f3f2f2);
+        color: var(--comparison-currencies-text-color, #17182f);
         border-radius: 2px;
-        padding: 0.3rem 0.79rem;
+        padding: 0.3rem 0.8em;
         font-weight: bold;
         font-size: 12px;
         line-height: 18px;
         width: 4.2rem;
         height: 2.4rem;
-        padding: 0.499rem 0.8rem;
         display: inline-block;
       }
     }
     .paymentMethods {
-      height: 12.8rem;
-      overflow-y: scroll;
-      &::-webkit-scrollbar {
-        width: 3px;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: darkgrey;
-      }
-      >div{
+      padding: 1.3rem 1.6rem;
+      > div {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-gap: 1rem;
-        span, a {
+        grid-column-gap: 1rem;
+        grid-row-gap: 0.8rem;
+        span,
+        a {
           @include flex-direction(row);
           @include flex-align(center, center);
           font-weight: bold;
@@ -163,14 +186,15 @@
           line-height: 18px;
           object-fit: contain;
           color: black;
-          margin-top: 0.5rem;
           background-color: white;
           width: 100%;
-          img {
-            width: 7.2rem;
-            height: 3.2rem;
-            object-fit: contain;
-          }
+        }
+        img {
+          width: 7.2rem;
+          height: 3.2rem;
+          border-radius: 4px;
+          object-fit: contain;
+          background-color: white;
         }
       }
     }
@@ -187,5 +211,9 @@
         margin-bottom: 0.5rem;
       }
     }
+
+    @include min(tablet) {
+      grid-template-columns: var(--comparison-template-columns-desktop, 15.2rem 27rem);
+    }
   }
 }

package/src/components/atoms/cards/comparison-table/table/table.test.js

@@ -67,7 +67,7 @@ describe('Comparison table test component', () => {
       />
     );
     const paymentMethods = container.querySelector('.paymentMethods');
-    expect(paymentMethods.querySelectorAll('span').length).toEqual(6);
+    expect(paymentMethods.querySelectorAll('span').length).toEqual(5);
   });
 });
 afterEach(() => {

package/src/gatsby-core-theme/components/atoms/spotlights/spotlights-theme.module.scss

@@ -4,6 +4,20 @@
     border-radius: var(--spotlight-testimonials-border-radius);
     background-color: var(--spotlight-testimonials-background-color);
 
+    ol {
+      counter-reset: LI_ITEM;
+
+      li {
+        flex-direction: row;
+      }
+
+      li::before {
+        margin-right: 0.4rem;
+        content: counter(LI_ITEM) '.';
+        counter-increment: LI_ITEM;
+      }
+    }
+
     img {
       border-radius: 8rem;
       width: 15rem !important;
@@ -62,6 +76,20 @@
     justify-content: center;
     width: calc(100% - 4.5rem);
 
+    ol {
+      counter-reset: LI_ITEM;
+
+      li {
+        flex-direction: row;
+      }
+
+      li::before {
+        margin-right: 0.4rem;
+        content: counter(LI_ITEM) '.';
+        counter-increment: LI_ITEM;
+      }
+    }
+
     > a > img,
     > img {
       position: absolute;

package/src/gatsby-core-theme/components/atoms/spotlights/spotlights.module.scss

@@ -0,0 +1,70 @@
+.spotlightsContainer {
+  margin: 0 auto;
+  width: 100%;
+  max-width: var(--main-container-max);
+
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  column-gap: 1rem;
+  @include min(tablet) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include min(desktop) {
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 1.6rem;
+  }
+  li {
+    text-align: center;
+    background-color: var(--color-9);
+    border: none;
+    margin-bottom: 1rem;
+    padding: 1.5rem;
+
+    @include min(desktop) {
+      margin-bottom: 1.6rem;
+    }
+
+    @include flex-direction(column);
+
+    ol {
+      counter-reset: LI_ITEM;
+
+      li {
+        flex-direction: row;
+      }
+
+      li::before {
+        margin-right: 0.4rem;
+        content: counter(LI_ITEM) '.';
+        counter-increment: LI_ITEM;
+      }
+    }
+
+    img {
+      margin: 0 auto;
+      margin-bottom: 1rem;
+    }
+
+    > div > a {
+      @include flex-direction(column);
+      color: #000;
+      font-size: 2rem;
+      font-weight: 700;
+      margin-top: 1rem;
+      width: 100%;
+
+      label {
+        cursor: pointer;
+      }
+    }
+
+    span {
+      display: block;
+    }
+
+    svg {
+      display: none;
+    }
+  }
+}

package/src/gatsby-core-theme/components/molecules/content/content.module.scss

@@ -141,11 +141,10 @@
     }
   }
 
-  @include max(mobile) {
+
     &.showMore {
       max-height: 17.8rem;
       overflow: hidden;
-      position: relative;
 
       &::before {
         content: '';
@@ -158,7 +157,7 @@
         background-image: linear-gradient(to bottom, rgba(209, 209, 209, 0), #ffffff);
       }
     }
-  }
+
 }
 
 .firstTable {
@@ -312,9 +311,7 @@
   font-size: 1.8rem;
   line-height: 3rem;
   color: #171f49;
-  @include min(tablet) {
-    display: none;
-  }
+
 }
 
 .floatLeft {

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

@@ -16,7 +16,7 @@ const Modules = ({ module, page, pageContext, index, exclOperator }) => {
     switch (name) {
       // Modules
       case 'content':
-        return loadable(() => import('../content'));
+        return loadable(() => import('gatsby-core-theme/src/components/molecules/content'));
       case 'top_list':
         return loadable(() => import('gatsby-core-theme/src/components/organisms/toplist'));
       case 'archive':

package/src/helpers/strings.test.js

@@ -44,7 +44,7 @@ describe('String helper component', () => {
         '[OPERATOR_REVIEW_META_TITLE]',
         'operator'
       )
-    ).toBe('Slotum 2022 90% Bonus + 50 free spins');
+    ).toBe('Slotum 2023 90% Bonus + 50 free spins');
   });
   test('Meta title operator', () => {
     expect(transformMetaTitle(singleToplistData.items[0].items[0], 'Casino', 'operator')).toBe(