gatsby-matrix-theme 45.0.2 → 45.0.4

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [45.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v45.0.3...v45.0.4) (2024-06-25)
+
+
+### Bug Fixes
+
+* search refactoring ([909d273](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/909d273084b4e1f185dd6bb4dab3087127060139))
+* updated with latest version ([4ab185c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4ab185c55aa17bf563d4f50d91260e0467639b25))
+
+## [45.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v45.0.2...v45.0.3) (2024-06-25)
+
+
+### Code Refactoring
+
+* button popup ([6629bb2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6629bb2c8c2283f4b129c37fab5143bf1addeb56))
+* changes to aria buttons ([0037730](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0037730a4f2d90124416f8cbb55596ac677c3ba0))
+* changes to aria labels buttons ([94064b9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/94064b991fb3f39f6c058de582fd6599785daa09))
+
+
+### Config
+
+* update theme ([87ebae8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/87ebae8eb1c9750bb58c64f220346b257d26f635))
+
+
+* Merge branch 'tm-4505-aria-buttons' into 'master' ([3992f84](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3992f84034384559c0737d84e6887cb4cf885be5))
+
 ## [45.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v45.0.1...v45.0.2) (2024-06-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "45.0.2",
+  "version": "45.0.4",
   "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": "33.1.0",
+    "gatsby-core-theme": "33.1.3",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "prop-types": "15.7.2",

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

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable jsx-a11y/click-events-have-key-events */

package/src/components/atoms/table/column/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable react/forbid-prop-types */
 /* eslint-disable camelcase */
 import React from 'react';
@@ -82,7 +81,7 @@ const Index = ({
           </td>
         </tr>
         <tr style={{ height: rating }} id="rating">
-          <td>
+          <td aria-label="rating">
             <div className={styles?.rating || ''}>
               <StarRating
                 numOfStars={5}
@@ -113,7 +112,7 @@ const Index = ({
           </td>
         </tr>
         <tr style={{ height: topFeatures, display: hideRow ? 'none' : null }} id="topFeatures">
-          <td>
+          <td aria-label="top features">
             <div className={styles?.features || ''}>
               <SellingPoints
                 icon={<FaCheck size={35} color="#17182F" title="Check Icon" />}
@@ -124,7 +123,7 @@ const Index = ({
           </td>
         </tr>
         <tr style={{ height: banking, display: hideRow ? 'none' : null }} id="banking">
-          <td>
+          <td aria-label="banking">
             <div className={styles?.banking || ''}>
               <Banking
                 min_deposit={min_deposit}

package/src/components/molecules/cookie-modal/index.js

@@ -1,5 +1,4 @@
 /* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable jsx-a11y/control-has-associated-label */
 /* eslint-disable jsx-a11y/no-redundant-roles */
 import React, { useContext, useState, useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -99,7 +98,12 @@ const CookieModal = ({
             </span>
           )}
 
-          <button role="button" type="button" onClick={() => closeModal()}>
+          <button
+            role="button"
+            aria-label="close cookie"
+            type="button"
+            onClick={() => closeModal()}
+          >
             <MdClose title="Close Icon" />
           </button>
         </div>

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

@@ -4,7 +4,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable array-callback-return */
 /* eslint-disable no-return-assign */
-/* eslint-disable jsx-a11y/control-has-associated-label */
 import React, { useRef, useState, useEffect, useCallback, useContext } from 'react';
 import Button from 'gatsby-core-theme/src/components/atoms/button/button';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
@@ -374,7 +373,7 @@ const HorseCalculator = () => {
                       ref={(el) => (outcomesTableRefs.current[index] = el)}
                     >
                       {addNotes === 'No' && <td>{index + 1}</td>}
-                      <td className={`${styles.outComing} ${styles.cells}`}>
+                      <td aria-label="outcome" className={`${styles.outComing} ${styles.cells}`}>
                         <Select
                           // label="Outcome:"
                           id={`outcome-${index}`}
@@ -386,6 +385,7 @@ const HorseCalculator = () => {
                         />
                       </td>
                       <td
+                        aria-label="odds"
                         className={`${styles.cells} ${styles.odds}${
                           outcomeSelection[index] === 'lost' || outcomeSelection[index] === 'void'
                             ? styles.displayNone || ''
@@ -407,7 +407,10 @@ const HorseCalculator = () => {
                         </label>
                       </td>
                       {eachWay === 'Yes' && (
-                        <td className={`${styles?.placeOdds} ${styles.cells} ${styles.placeOdds}`}>
+                        <td
+                          aria-label="place odds"
+                          className={`${styles?.placeOdds} ${styles.cells} ${styles.placeOdds}`}
+                        >
                           <Select
                             id="place_odds"
                             onChangeFunc={calculateTotalBet}
@@ -418,7 +421,7 @@ const HorseCalculator = () => {
                         </td>
                       )}
                       {ruleFour === 'Yes' && (
-                        <td className={`${styles.cells} ${styles.ruleFour}`}>
+                        <td aria-label="rule four" className={`${styles.cells} ${styles.ruleFour}`}>
                           <Select
                             id="rule_four"
                             onChangeFunc={calculateTotalBet}
@@ -437,7 +440,7 @@ const HorseCalculator = () => {
                     >
                       {outcomeSelection[index] === 'dead_heat' && (
                         <>
-                          <td />
+                          <td aria-label="hidden" />
                           <td colSpan={getColspan()}>
                             <div className={styles?.deadHeat || ''}>
                               <Select
@@ -505,7 +508,7 @@ const HorseCalculator = () => {
                       {foldTableRows.map((row, index) => (
                         <tr ref={(el) => (foldTableRefs.current[index] = el)}>
                           <td>{row.name}</td>
-                          <td>
+                          <td aria-label={row.name}>
                             <input
                               type="number"
                               onChange={calculateTotalBet}

package/src/components/organisms/cards/template-two/buttons/index.js

@@ -12,6 +12,7 @@ const Buttons = ({ scrollX, noModuleIntro, scrollEnd, scroll }) => (
       }`}
       onClick={() => scroll(-200)}
       type="button"
+      aria-label="carouselBtnLeft"
     >
       <IoIosArrowBack />
     </button>
@@ -21,6 +22,7 @@ const Buttons = ({ scrollX, noModuleIntro, scrollEnd, scroll }) => (
       }`}
       onClick={() => scroll(200)}
       type="button"
+      aria-label="carouselBtnRight"
     >
       <IoIosArrowForward />
     </button>

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

@@ -1,7 +1,6 @@
 /* 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 */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -129,8 +128,10 @@ const Popup = ({
               <div className={styles?.modalTitle || ''}>
                 <p>{title}</p>
                 <button
+                  type="button"
                   className={`${styles?.closeIcon || ''} popup-gtm btn-cta`}
                   onClick={() => handelActive(false)}
+                  aria-label="close"
                 >
                   <MdClose title="Close Icon" />
                 </button>

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

@@ -148,7 +148,7 @@ const Main = ({
         ))}
       {SearchPage && (
         <Suspense fallback={<></>}>
-          <SearchPage page={page} />
+          <SearchPage page={page} serverData={serverData} allMarkets={pageContext.allMarkets} />
         </Suspense>
       )}
       {showAuthorBox && (

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

@@ -1,39 +1,25 @@
-.form {
-  width: 50%;
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 10%;
-  left: 50%;
-  transform: translateX(-50%);
+.container {
+  form {
+    position: relative;
+    margin-bottom: 2.4rem;
 
-  input {
-    width: 100%;
-    padding: 3rem 2rem;
-  }
+    input {
+      width: 100%;
+      background-color: #ececec;
+      border-radius: .8rem;
+      padding: 2.4rem;
 
-  .searchButton {
-    position: absolute;
-    right: 0;
-    top: 0.6rem;
-    padding: 2rem;
+      
+    }
 
-    svg {
-      font-size: 3rem;
+    button {
+      position: absolute;
+      right: 3rem;
+      top: calc(50% - .8rem); 
     }
   }
 }
 
-.searchGrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.loading {
-  width: 150px;
-  height: 20px;
-  display: block;
-}
-.selectwrapper {
-  position: relative;
-}
+.results {
+  
+}

package/src/gatsby-core-theme/components/pages/search/index.js

@@ -9,13 +9,15 @@ import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import Search from 'gatsby-core-theme/src/components/molecules/search';
 import styles from './search.module.scss';
 
-const SearchContent = ({ page }) => {
+const SearchContent = ({ page, serverData, allMarkets }) => {
   const { translations } = useContext(Context) || {};
   const searchURLPageName = page.path;
   return (
     <div className={`${styles.searchPage} ${moduleStyles.module} module`}>
       {page.path && <Breadcrumbs page={page} />}
       <Search
+        serverData={serverData}
+        allMarkets={allMarkets}
         searchURLPageName={searchURLPageName}
         page={page}
         searchIcon="../../../../../../images/search.svg"
@@ -87,6 +89,8 @@ const SearchContent = ({ page }) => {
 };
 
 SearchContent.propTypes = {
+  serverData: PropTypes.shape({}),
+  allMarkets: PropTypes.shape({}),
   page: PropTypes.shape({
     template: PropTypes.string,
     path: PropTypes.string,

package/src/gatsby-core-theme/components/pages/search/search.module.scss

@@ -1,44 +1,5 @@
 .searchPage {
-  margin-top: 6rem;
-  @include min(tablet){
-    div {
-      div{
-        div{
-          button{
-            margin-top: 2rem;
-          }
-          ol{
-            button{
-              margin-top: 0rem;
-            }
-          }
-        }
-      }
+  margin-top: var(--nav-height);
+
     
-    }
-  }
-  @include min(laptop){
-    div{
-        button{
-          margin-top: 2rem;
-        }
-        ol{
-          display: block !important;
-          li{
-            margin-bottom: 1rem;
-            display: inline-block;
-            button{
-              margin: 0;
-            }
-          }
-        }
-    }
-    div:nth-child(2){
-      ol{
-        li{
-          margin-bottom: 0rem;
-        }
-      }
-    }
-  }
 }

package/src/gatsby-core-theme/helpers/server-data.js

@@ -1,17 +1,42 @@
+/* eslint-disable no-prototype-builtins */
+/* eslint-disable no-nested-ternary */
 /* eslint-disable import/prefer-default-export */
 import { getApiQueryParams } from './sportstake';
 import { getApiBasedNames } from './lotto';
 import { getFixtures, getLatestResults, getAvailableDrawDays } from './services';
-
-export async function getAPIData(page) {
-  let responseFixtures = {};
-  let responseResults = {};
-  let responseLotto = {};
+import loadSource from '~helpers/search-source';
+import { deparam } from '~helpers/strings';
+
+export async function getAPIData(page, url) {
+  if (page.path.endsWith('/s') || page.path === 's') {
+    const results = await loadSource(page.market);
+    let urlParams = null;
+    if (url && url.split('?').length === 2) {
+      urlParams = deparam(`${url.split('?')[1]}`);
+    }
+
+    const searchData = urlParams
+      ? urlParams.hasOwnProperty('s')
+        ? results.filter((item) => item.title.toLowerCase().includes(urlParams.s.toLowerCase()))
+        : null
+      : null;
+
+    return {
+      props: {
+        data: searchData,
+        searchParam: urlParams ? urlParams.s : null,
+      },
+    };
+  }
 
   const containsFixtures = page.categories.filter((category) => category.short_name === 'fixtures');
   const containsResults = page.categories.filter((category) => category.short_name === 'results');
   const containsLotto = page.categories.filter((category) => category.short_name === 'lotto');
 
+  let responseFixtures = {};
+  let responseResults = {};
+  let responseLotto = {};
+
   if (containsFixtures.length >= 1) {
     const filteredArray = page?.sections?.main?.modules.filter(
       (x) => x.value_type === 'template_block'

package/src/gatsby-core-theme/hooks/tabs/tabs.module.scss

@@ -6,7 +6,7 @@
     margin-bottom: 2rem;
   }
   @include min(tablet) {
-    grid-template-columns: 1fr 0.4fr;
+    grid-template-columns: 1fr 1fr;
     &.tabsonly {
       grid-template-columns: 1fr;
     }