gatsby-matrix-theme 48.0.0 → 48.0.1

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [48.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v48.0.0...v48.0.1) (2024-07-16)
+
+
+### Bug Fixes
+
+* fix tooltip width ([a8a0998](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a8a0998e816a21b9e7d5bc9eeb23b6c6e6457efc))
+* test ([aa217e8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aa217e806f13fd66c8a937328dd9e73e381229b5))
+* updated core version and tnc implementation ([c4ec339](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c4ec33977f4874a4b8f3a352cbad6d608e294c4e))
+
+
+### Code Refactoring
+
+* tooltip width ([ec2999d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec2999d64b3acdf639b762ca8f78d8b0394b3e30))
+
+
+### Config
+
+* update theme ([9f67ef7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9f67ef74664f2f45f2d161aa8cc3374698d80046))
+
+
+* Merge branch 'tm-4453-tnc-update' into 'master' ([bf02eeb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bf02eeb8e6793f2e0117c863e73100d2c05bb39f))
+* Merge branch 'master' into tm-4453-tnc-update ([2953193](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2953193702bc765448742e8235064f72dd18c1c2))
+* Merge branch 'tm-4544-horse-calculator' into 'master' ([6612289](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6612289d0cb08fb5848d423e81dc112df328564b))
+
 # [48.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v47.0.3...v48.0.0) (2024-07-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "48.0.0",
+  "version": "48.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": "34.0.5",
+    "gatsby-core-theme": "34.0.6",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "prop-types": "15.7.2",

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

@@ -143,7 +143,7 @@ const TemplateOne = ({
             </ul>
           )}
         </div>
-        <Tnc operator={item?.relation} />
+        <Tnc operator={item?.relation} isFixed />
       </div>
     </div>
   );

package/src/components/atoms/cards/operator-card/template-one/template-one.module.scss

@@ -57,24 +57,7 @@
     width: 100%;
   }
 
-  & > div:last-child:not(.cardFooter){
-    height: 45px;
-    overflow: auto;
-    padding-right: 1.6rem;
-
-    &::-webkit-scrollbar {
-      -webkit-appearance: none;
-      width: 0.4rem;
-    }
-    &::-webkit-scrollbar-thumb {
-      border-radius: 2px;
-      background-color: var(--color-57);
-    }
-    &::-webkit-scrollbar-track {
-      background: var(--color-52);
-      border-radius: 2px;
-    }
-
+  & > div:last-child:not(.cardFooter) {
     padding: 0.8rem 1.6rem;
     border-top: 1.5px solid var(--color-52);
     background: var(--color-56);
@@ -84,13 +67,32 @@
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5rem;
-
-    a {
-      font-size: 1rem;
-      font-weight: 400;
-      line-height: 1.5rem;
-      margin: 0;
-      width: auto;
+     
+    > div{
+      max-height: 45px;
+      overflow: auto;
+      padding-right: 1.6rem;
+  
+      &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 0.4rem;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        background-color: var(--color-57);
+      }
+      &::-webkit-scrollbar-track {
+        background: var(--color-52);
+        border-radius: 2px;
+      }
+  
+      a {
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5rem;
+        margin: 0;
+        width: auto;
+      }
     }
   }
 }

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

@@ -122,7 +122,7 @@ const TemplateTwo = ({
           reviewPath={reviewPath}
         />
       </div>
-      <Tnc operator={item?.relation} />
+      <Tnc operator={item?.relation} isFixed />
 
       {hasVariableComponent && (
         <VariableComponent item={item} page={page} featured={false} template="templateTwo" />

package/src/components/atoms/cards/operator-card/template-two/template-two.module.scss

@@ -62,25 +62,36 @@
   @include flex-direction(column);
 
   & > div:last-child:not(.cardContent){
-    height: 45px;
-    overflow: auto;
-    padding-right: 1.6rem;
-
-    &::-webkit-scrollbar {
-      -webkit-appearance: none;
-      width: 0.4rem;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      border-radius: 2px;
-      background-color: var(--color-57);
-    }
-
-    /* Track */
-    &::-webkit-scrollbar-track {
-      background: var(--color-52);
-      border-radius: 2px;
+    > div{
+      max-height: 45px;
+      overflow: auto;
+      padding-right: 1.6rem;
+
+      a {
+        font-size: 1rem;
+        font-weight: 400;
+        line-height: 1.5rem;
+        margin: 0;
+        width: auto;
+      }
+  
+      &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 0.4rem;
+      }
+  
+      &::-webkit-scrollbar-thumb {
+        border-radius: 2px;
+        background-color: var(--color-57);
+      }
+  
+      /* Track */
+      &::-webkit-scrollbar-track {
+        background: var(--color-52);
+        border-radius: 2px;
+      }
     }
+    
 
     padding: 0.8rem 1.6rem;
     border-top: 1.5px solid var(--color-52);
@@ -91,14 +102,6 @@
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5rem;
-
-    a {
-      font-size: 1rem;
-      font-weight: 400;
-      line-height: 1.5rem;
-      margin: 0;
-      width: auto;
-    }
   }
 }
 

package/src/components/atoms/cards/popup-card/index.js

@@ -20,6 +20,7 @@ const PopupCard = ({
   buttonType = 'primary',
   template,
   showRoundedRating = false,
+  tncFixed = true,
   width = '98',
   height = '98',
 }) => {
@@ -68,7 +69,7 @@ const PopupCard = ({
           />
         )}
       </div>
-      <Tnc operator={item} />
+      <Tnc operator={item} isFixed={tncFixed} />
     </div>
   );
 };
@@ -106,6 +107,7 @@ PopupCard.propTypes = {
   showReviewLink: PropTypes.bool,
   template: PropTypes.string,
   buttonSize: PropTypes.string,
+  tncFixed: PropTypes.bool,
   buttonType: PropTypes.string,
   showRoundedRating: PropTypes.bool,
   width: PropTypes.string,

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

@@ -12,12 +12,12 @@ import styles from './recommended-operators.module.scss';
 
 const RecommendedOperators = ({
   showCouponCode = false,
-  showTerms = false,
   showRating = false,
   showAuthor = false,
   title = 'Recommended Casinos:',
   buttonType = 'primary',
   operators,
+  tncFixed = false,
   operatorLogoWidth,
   operatorLogoHeight,
 }) => (
@@ -49,7 +49,7 @@ const RecommendedOperators = ({
               <Bonus item={operator} tracker="main" />
             </PrettyLink>
 
-            {showTerms && <TermsConditions operator={operator} hasCollapse={false} />}
+            <TermsConditions operator={operator} isFixed={tncFixed} />
           </div>
           {showCouponCode && (
             <div className={styles.couponCtaContainer}>
@@ -81,7 +81,7 @@ export default RecommendedOperators;
 RecommendedOperators.propTypes = {
   showCouponCode: PropTypes.bool,
   showRating: PropTypes.bool,
-  showTerms: PropTypes.bool,
+  tncFixed: PropTypes.bool,
   showAuthor: PropTypes.bool,
   title: PropTypes.string,
   buttonType: PropTypes.string,

package/src/components/atoms/select/index.js

@@ -16,6 +16,7 @@ export default function Select({
   refObj,
   index,
   tooltip = null,
+  tooltipMinWidth = 10,
 }) {
   if (!label) {
     return (
@@ -28,7 +29,7 @@ export default function Select({
           {options.map((option) => option)}
         </select>
         {tooltip && (
-          <Tooltip content={useTranslate(`${id}_tooltip`, tooltip)} minWidth={20}>
+          <Tooltip content={useTranslate(`${id}_tooltip`, tooltip)} minWidth={tooltipMinWidth}>
             <BsQuestionCircle size="2.6rem" title="Question Icon" />
           </Tooltip>
         )}
@@ -41,7 +42,7 @@ export default function Select({
       <div>
         {useTranslate(id, label)}
         {tooltip && (
-          <Tooltip content={useTranslate(`${id}_tooltip`, tooltip)} minWidth={20}>
+          <Tooltip content={useTranslate(`${id}_tooltip`, tooltip)} minWidth={tooltipMinWidth}>
             <BsQuestionCircle size="2.6rem" title="Question Icon" />
           </Tooltip>
         )}
@@ -67,4 +68,5 @@ Select.propTypes = {
   refObj: PropTypes.func,
   index: PropTypes.number,
   tooltip: PropTypes.string,
+  tooltipMinWidth: PropTypes.number,
 };

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

@@ -34,9 +34,7 @@ export default function TemplateTwo({ extraFields, imageObj }) {
             icon={<FaArrowRight title="Right-pointing Arrow Icon" />}
           />
         )}
-        <span className={styles.tnc}>
-          <Tnc operator={operator} />
-        </span>
+        <Tnc operator={operator} />
       </div>
       {imageObj && (
         <div className={styles.imgContainer}>

package/src/components/molecules/header/variants/default/template-two/template-two.test.js

@@ -79,7 +79,7 @@ describe('Show template two', () => {
   });
   test('show correct tcn', () => {
     const { container } = renderComponent(data);
-    expect(container.querySelector('.tnc div').innerHTML).toBe(
+    expect(container.querySelector('.tnc').innerHTML).toBe(
       '18+ New Players only. Play responsibly.'
     );
   });

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

@@ -49,7 +49,7 @@ const TemplateTwo = ({ page, image, width = '259', height = '259' }) => {
             operator={headerBonus?.value}
             template={page?.template}
           />
-          <Tnc operator={headerBonus?.value} hasCollapse={false} isFixed />
+          <Tnc operator={headerBonus?.value} isFixed />
         </>
       )}
     </div>

package/src/components/molecules/horse-calculator/index.js

@@ -4,7 +4,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable array-callback-return */
 /* eslint-disable no-return-assign */
-import React, { useRef, useState, useEffect, useCallback, useContext } from 'react';
+import React, { useRef, useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import useTranslate from '~hooks/useTranslate/useTranslate';
@@ -30,7 +30,7 @@ import {
 } from '../../../constants/horse-racing-calculator';
 import styles from './horse-calculator.module.scss';
 
-const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
+const HorseCalculator = ({ mainTitle = 'Bet Calculator', tooltipMinWidth = 20 }) => {
   const numSelection = 20;
 
   const outcomesTableRefs = useRef([]);
@@ -271,6 +271,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                   <option value={index}>{type.name}</option>
                 ))}
                 refObj={betTypeRef}
+                tooltipMinWidth={tooltipMinWidth}
               />
 
               <Select
@@ -284,6 +285,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                     {useTranslate('no', 'No')}
                   </option>,
                 ]}
+                tooltipMinWidth={tooltipMinWidth}
               />
 
               {eachWay === 'Yes' && activeBetType.multiple_options && (
@@ -306,6 +308,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                       )}
                     </option>,
                   ]}
+                  tooltipMinWidth={tooltipMinWidth}
                 />
               )}
 
@@ -319,6 +322,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                     <option value={i + 1}>{i + 1}</option>
                   ))}
                   refObj={numSelectionRef}
+                  tooltipMinWidth={tooltipMinWidth}
                 />
               )}
 
@@ -333,6 +337,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                     {useTranslate('no', 'No')}
                   </option>,
                 ]}
+                tooltipMinWidth={tooltipMinWidth}
               />
             </div>
             <div className={styles.stakeType}>
@@ -348,6 +353,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                     {useTranslate('horsecalc_staketype_totalcombinedstake', 'Total Combined Stake')}
                   </option>,
                 ]}
+                tooltipMinWidth={tooltipMinWidth}
               />
               {!(activeBetType.name === 'Accumulator' && foldOption === '2') && (
                 <label htmlFor="stake">
@@ -395,6 +401,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                             <option value={option.value}>{option.name}</option>
                           ))}
                           index={index}
+                          tooltipMinWidth={tooltipMinWidth}
                         />
                       </td>
                       <td
@@ -430,6 +437,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                             options={placeOddsoptions.map((option) => (
                               <option value={option}>{option}</option>
                             ))}
+                            tooltipMinWidth={tooltipMinWidth}
                           />
                         </td>
                       )}
@@ -441,6 +449,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                             options={ruleFourOptions.map((option) => (
                               <option value={option}>{option}</option>
                             ))}
+                            tooltipMinWidth={tooltipMinWidth}
                           />
                         </td>
                       )}
@@ -463,6 +472,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                                 options={[...Array(16)].map((e, i) => (
                                   <option value={i + 1}>{i + 1}</option>
                                 ))}
+                                tooltipMinWidth={tooltipMinWidth}
                               />
                               <Select
                                 id="deadheatrunners"
@@ -471,6 +481,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                                 options={[...Array(16)].map((e, i) => (
                                   <option value={i + 1}>{i + 1}</option>
                                 ))}
+                                tooltipMinWidth={tooltipMinWidth}
                               />
                               <Select
                                 id="placesoffered"
@@ -479,6 +490,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                                 options={[...Array(16)].map((e, i) => (
                                   <option value={i + 1}>{i + 1}</option>
                                 ))}
+                                tooltipMinWidth={tooltipMinWidth}
                               />
                             </div>
                           </td>
@@ -503,6 +515,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                     <option value="1">{useTranslate('disabled', 'Disabled')}</option>,
                     <option value="2">{useTranslate('enabled', 'Enabled')}</option>,
                   ]}
+                  tooltipMinWidth={tooltipMinWidth}
                 />
               </div>
               {foldOption === '2' && (
@@ -577,6 +590,7 @@ const HorseCalculator = ({ mainTitle = 'Bet Calculator' }) => {
                         {useTranslate('horsecalc_quintuple_odds', 'Quintuple Odds')}
                       </option>,
                     ]}
+                    tooltipMinWidth={tooltipMinWidth}
                   />
                 </div>
               )}
@@ -617,4 +631,5 @@ export default HorseCalculator;
 
 HorseCalculator.propTypes = {
   mainTitle: PropTypes.string,
+  tooltipMinWidth: PropTypes.number,
 };

package/src/components/molecules/operator-summary/template-two/index.js

@@ -88,7 +88,7 @@ const TemplateTwo = ({
         operator={operatorData}
         template={page?.template}
       />
-      <Tnc operator={operatorData} />
+      <Tnc operator={operatorData} isFixed />
     </div>
   );
 };

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

@@ -1,4 +1,4 @@
-.isFixed {
+.isFixed > div {
   max-height: 45px;
   overflow-y: auto;
   padding-right: 1.6rem;