gatsby-matrix-theme 37.0.23 → 37.0.25

package/.storybook/main.js

@@ -7,7 +7,8 @@ module.exports = {
     '../src/**/**/**/**/*.stories.js',
     '../src/**/**/**/**/**/*.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/organisms/navigation/navigation.stories.js',
-    '../../node_modules/gatsby-core-theme/src/components/organisms/anchor/anchor.stories.js',
+    '../../node_modules/gatsby-core-theme/src/components/organisms/anchor/template-one/anchor.stories',
+    '../../node_modules/gatsby-core-theme/src/components/organisms/anchor/template-two/template-two.stories',
     '../../node_modules/gatsby-core-theme/src/components/molecules/bonus/template-one/bonus.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/bonus/template-two/bonus.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/content/text.stories.js',
@@ -18,6 +19,8 @@ module.exports = {
     '../../node_modules/gatsby-core-theme/src/components/molecules/content/table/table-one.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/content/table/table-two.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/pagination/pagination.stories.js',
+    '../../node_modules/gatsby-core-theme/src/components/organisms/carousel/template-one/template-one.stories',
+    '../../node_modules/gatsby-core-theme/src/components/organisms/carousel/template-two/template-two.stories',
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
   env: (config) => ({

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [37.0.25](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.24...v37.0.25) (2023-12-05)
+
+
+### Bug Fixes
+
+* added more props to the recommended casinos ([25b1141](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/25b1141f48c5279c6d6b14f4a3f3a8138944360b))
+* align matrix ([70ab63f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/70ab63f8f7dfbacf3b36e815d86533d48dc318ff))
+* remove import ([5b2a74c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5b2a74c0f756a639d776d0914898407e6e0fb212))
+* removed extra terms ([7c8b7ed](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7c8b7ed790d7b76d1379d6f5d487c8bb95b7535a))
+* turned off terms by default ([d94d556](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d94d5565ee79f08fd12708bd070a263e33391f4e))
+* update theme ([470fad0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/470fad064b4c917825deb796a6fa8e2d860f552a))
+
+
+* Merge branch 'align-matrix' into 'master' ([7dc4aa9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7dc4aa9065212d261a1429ce9a1ddcbaef3b06b6))
+* Merge branch 'tm-3828-wagering-calculator' into 'master' ([6ea0934](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6ea0934fc4d6310c158fa3cab0eec17341204ca6))
+
+## [37.0.24](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.23...v37.0.24) (2023-12-04)
+
+
+### Bug Fixes
+
+* fixed styling and added prop for grouping coupon and cta ([0710c0e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0710c0e83656ba070a6c89d5186e82b124084fba))
+
+
+* Merge branch 'tm-3828-wagering-calculator' into 'master' ([8ddc567](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8ddc56725740b520996873e82c30379b649d9428))
+
 ## [37.0.23](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.22...v37.0.23) (2023-12-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "37.0.23",
+  "version": "37.0.25",
   "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.28",
+    "gatsby-core-theme": "30.0.30",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

package/src/components/atoms/recommended-operators/index.js

@@ -5,12 +5,14 @@ import { prettyTracker, getExtraField } from 'gatsby-core-theme/src/helpers/gett
 
 import Bonus from 'gatsby-core-theme/src/components/molecules/bonus-box/template-four';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
+import TermsConditions from 'gatsby-core-theme/src/components/molecules/tnc';
 import OperatorDetails from '../../molecules/operator-details';
 import Coupon from '../coupon';
 import styles from './recommended-operators.module.scss';
 
 const RecommendedOperators = ({
   showCouponCode = false,
+  showTerms = false,
   showRating = false,
   showAuthor = false,
   title = 'Recommended Casinos:',
@@ -41,9 +43,17 @@ const RecommendedOperators = ({
           </a>
           <div className={styles.operatorBonus}>
             <Bonus item={operator} tracker="main" />
+            {showTerms && <TermsConditions operator={operator} hasCollapse={false} />}
           </div>
-          {showCouponCode && <Coupon code={couponCode} />}
-          <OperatorCta operator={operator} tracker="main" buttonType={buttonType} />
+          {showCouponCode && (
+            <div className={styles.couponCtaContainer}>
+              {showCouponCode && <Coupon code={couponCode} />}
+              <OperatorCta operator={operator} tracker="main" buttonType={buttonType} />
+            </div>
+          )}
+          {!showCouponCode && (
+            <OperatorCta operator={operator} tracker="main" buttonType={buttonType} />
+          )}
         </div>
       );
     })}
@@ -55,6 +65,7 @@ export default RecommendedOperators;
 RecommendedOperators.propTypes = {
   showCouponCode: PropTypes.bool,
   showRating: PropTypes.bool,
+  showTerms: PropTypes.bool,
   showAuthor: PropTypes.bool,
   title: PropTypes.string,
   buttonType: PropTypes.string,

package/src/components/atoms/recommended-operators/recommended-operators.module.scss

@@ -22,16 +22,17 @@
     > div {
       margin-bottom: 0.8rem;
       background: #f4f4f4;
-      display: flex;
-      align-items: center;
-      grid-template-columns: 4rem 1fr;
+      @include flex-align(center, space-between);
       row-gap: 0.8rem;
       border-radius: 1.6rem;
       color: #fff;
       padding: 0.8rem;
-      justify-content: space-between;
       column-gap: 0.8rem;
-      @include min(tablet) {
+      flex-wrap: wrap;
+
+
+      @include min(mobile) {
+        flex-wrap: nowrap;
         row-gap: 1.6rem;
         padding: 1.2rem;
       }
@@ -40,21 +41,12 @@
         margin-bottom: 0;
       }
   
-      a:first-child{
+      & > a:first-child{
         @include min(tablet){
-          flex-basis: 30%;
-        }
-        .Logo.cta{
-            height: 4rem;
-            width: 4rem;
-            @include min(tablet) {
-            height: 6.4rem;
-            width: auto;
-            }
+          flex-basis: 35%;
         }
       }
 
-  
       a:nth-child(2) {
         width: unset;
         > span{
@@ -72,32 +64,31 @@
         border-radius: 0.8rem;
         height: 100%;
       }
-      a:last-child {
+      a:nth-child(3){
         padding: 0.8rem 1.6rem;
         font-size: 1.4rem;
         font-weight: 700;
-        grid-column: 1/3;
+        width: 100%;
         @include min(mobile){
-            grid-column: auto;
+          width: unset;
         }
         @include min(tablet) {
             padding: 0.9rem 3rem;
             width: unset;
         }
-    }     
+      }     
   
       > div {
         &.operatorBonus{
-            // flex-grow: inherit;
             flex-grow: 1;
+            flex-basis: 50%;
             @include flex-align(flex-start, center);
             @include flex-direction(column);
+
             @include min(tablet) {
-              flex-basis: auto;
-              flex-grow: 1;
               @include flex-align(center, flex-start);
               background-color: #fff;
-              
+              padding: .8rem;
               min-height: 6.4rem;
               align-items: center;
               justify-content: center;
@@ -116,11 +107,31 @@
                 line-height: 2.2rem;
               }
             }
+
+            > div{
+              font-size: 1rem;
+              color: #515156;
+              font-weight: 400;
+              text-align: left;
+
+              @include min(mobile){
+                padding: 0.4rem 0;
+                text-align: center;
+                display: inline-block;
+              }
+            }
         }
-        &:not(.operatorBonus){
-          flex-basis: 20%;
+        &.couponCtaContainer{
+          > div{ width: 100%; }
+          @include min(mobile-s)
+          {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: .8rem;
+            flex-basis: 100%;
+          }
           @include min(tablet){
-            flex-basis: 15%;
+            flex-basis: 30%;
           }
           button{
             width: 100%;
@@ -131,7 +142,6 @@
 }
 
 .operatorDetails {
-    gap: .8rem;
     div{
         display: none;
         @include min(tablet){

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

@@ -39,18 +39,21 @@ const Modules = ({ module, pageContext, index, exclOperator }) => {
       case 'anchor':
         if (items && items.length > 0) {
           if (style === 'template_two') {
-            return loadable(() => import('../../../../components/organisms/anchor/template-two'));
+            return loadable(() =>
+              import('gatsby-core-theme/src/components/organisms/anchor/template-two')
+            );
           }
-          return loadable(() => import('gatsby-core-theme/src/components/organisms/anchor'));
+          return loadable(() =>
+            import('gatsby-core-theme/src/components/organisms/anchor/template-one')
+          );
         }
-
         return null;
       case 'carousel':
         if (
           items.length > 0 && // has items
           items.filter((item) => item.image === null).length === 0 // not filled with null items
         ) {
-          return loadable(() => import('../../organisms/carousel'));
+          return loadable(() => import('gatsby-core-theme/src/components/organisms/carousel'));
         }
         return null;
       case 'bonus':