gatsby-matrix-theme 7.2.3 → 7.2.4-beta.2

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## [7.2.4-beta.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.2.4-beta.1...v7.2.4-beta.2) (2022-10-19)
+
+
+### Bug Fixes
+
+* es6 fixes ([9a5a550](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9a5a5501140079d4ad0948b3b58869900010dc7c))
+* removed es6 package ([d0cc1fe](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d0cc1fe85186290697ea2b1614d0768ba9ab4421))
+
+
+* Merge branch 'tm-3076-head-api' into 'beta' ([090bac3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/090bac3b4b067cf3418112b624b26ccc19e4bcd7))
+
+## [7.2.4-beta.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.2.3...v7.2.4-beta.1) (2022-10-17)
+
+
+### Bug Fixes
+
+* added test for tooltip component ([1c98dc9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1c98dc9ed453eef7102027b69e1617dee89ced78))
+* horse calculator fixes ([db5fc7d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/db5fc7d2e65e638349291fbeca3e6eaf1912ac29))
+* horse racing calculator fixes ([e98a030](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e98a0309c701607080b680c54c688d5ff6af9e7b))
+* updated to latest core version ([1a10a89](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1a10a8997762c8e1364911314131d74fdb1a02f1))
+
+
+* Merge branch 'tm-3076-head-api' into 'beta' ([ae207e4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae207e4d6ea26c353d46cd1699e6b7e7ddfaeacb))
+* Merge branch 'tm-2958-horse-calculator-fixes' into 'master' ([766deb5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/766deb5bc19af39f98f2cf2f13851ef6c397cbf5))
+
 ## [7.2.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.2.2...v7.2.3) (2022-10-13)
 
 

package/gatsby-config.js

@@ -19,6 +19,12 @@ module.exports = {
         preconnectLinks: [process.env.IMAGE_CDN_URL],
       },
     },
+    {
+      resolve: `gatsby-plugin-compile-es6-packages`,
+      options: {
+        modules: [`gatsby-core-theme`],
+      },
+    },
     {
       resolve: `gatsby-plugin-sitemap`,
       options: {
@@ -46,11 +52,5 @@ module.exports = {
     `gatsby-plugin-image`,
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
-    {
-      resolve: `gatsby-plugin-compile-es6-packages`,
-      options: {
-        modules: [`gatsby-core-theme`],
-      },
-    },
   ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.2.3",
+  "version": "7.2.4-beta.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "12.0.4",
+    "gatsby-core-theme": "13.0.1-beta.3",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",
@@ -56,10 +56,10 @@
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-preset-gatsby": "^1.3.0",
-    "gatsby-plugin-compile-es6-packages": "^2.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
-    "sass-resources-loader": "^2.1.0"
+    "sass-resources-loader": "^2.1.0",
+    "gatsby-plugin-compile-es6-packages": "^2.1.0"
   },
   "jest": {
     "verbose": true,

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

@@ -3,20 +3,33 @@ import React, { useContext } from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
-
+import { BsQuestionCircle } from '@react-icons/all-files/bs/BsQuestionCircle';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
-
+import Tooltip from '../tooltip';
 import styles from './select.module.scss';
 
-export default function Select({ label = null, id, onChangeFunc = () => {}, options, ref, index }) {
+export default function Select({
+  label = null,
+  id,
+  onChangeFunc = () => {},
+  options,
+  refObj,
+  index,
+  tooltip = null,
+}) {
   const { translations } = useContext(Context) || {};
 
   if (!label) {
     return (
-      <div className={styles.dropdownStyling}>
-        <select ref={ref} onChange={(e) => onChangeFunc(e, index)} id={id}>
+      <div className={`${styles.dropdownStyling} ${tooltip ? styles.tooltip : styles.fullWidth}`}>
+        <select ref={refObj} onChange={(e) => onChangeFunc(e, index)} id={id}>
           {options.map((option) => option)}
         </select>
+        {tooltip && (
+          <Tooltip content={translate(translations, `${id}_tooltip`, tooltip)}>
+            <BsQuestionCircle size="3rem" />
+          </Tooltip>
+        )}
       </div>
     );
   }
@@ -24,10 +37,15 @@ export default function Select({ label = null, id, onChangeFunc = () => {}, opti
   return (
     <label htmlFor={id}>
       {translate(translations, id, label)}
-      <div className={styles.dropdownStyling}>
-        <select ref={ref} onChange={(e) => onChangeFunc(e, index)} id={id}>
+      <div className={`${styles.dropdownStyling} ${tooltip ? styles.tooltip : styles.fullWidth}`}>
+        <select ref={refObj} onChange={(e) => onChangeFunc(e, index)} id={id}>
           {options.map((option) => option)}
         </select>
+        {tooltip && (
+          <Tooltip content={tooltip}>
+            <BsQuestionCircle size="3rem" />
+          </Tooltip>
+        )}
       </div>
     </label>
   );
@@ -38,6 +56,7 @@ Select.propTypes = {
   id: PropTypes.string,
   onChangeFunc: PropTypes.func,
   options: PropTypes.arrayOf(PropTypes.any),
-  ref: PropTypes.func,
+  refObj: PropTypes.func,
   index: PropTypes.number,
+  tooltip: PropTypes.string,
 };

package/src/components/atoms/select/select.module.scss

@@ -1,5 +1,12 @@
 .dropdownStyling {
   position: relative;
+
+  &.fullWidth {
+    > select {
+      width: 100%;
+    }
+  }
+
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -7,11 +14,10 @@
     border: none;
     color: #1a1c1f;
     background: var(--horse-calc-input-background, #f3f2f2);
-    border-radius: var(--horse-calc-input-border-radius, .4rem);
+    border-radius: var(--horse-calc-input-border-radius, 0.4rem);
     font-weight: 400;
     font-size: 16px;
     padding: 1.6rem 1.5rem;
-    width: 100%;
 
     @include min(tablet) {
       padding: 1.6rem 2.4rem;
@@ -28,4 +34,18 @@
       right: 2.4rem;
     }
   }
+
+
 }
+
+.tooltip {
+  @include flex-align(center, space-between);
+  > select {
+    width: 90%;
+  }
+
+  &:after {
+    left: 83%;
+    right: auto;
+  }
+}

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

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import styles from './tooltip.module.scss';
+
+const Tooltip = ({ content, delay, children, direction }) => {
+  let timeout;
+  const [active, setActive] = useState(false);
+
+  const showTip = () => {
+    timeout = setTimeout(() => {
+      setActive(true);
+    }, delay || 400);
+  };
+
+  const hideTip = () => {
+    clearInterval(timeout);
+    setActive(false);
+  };
+
+  return (
+    <div className={styles.wrapper} onMouseEnter={showTip} onMouseLeave={hideTip}>
+      {children}
+      {active && <div className={`${styles.tooltip} ${direction || styles.top}`}>{content}</div>}
+    </div>
+  );
+};
+
+export default Tooltip;
+
+Tooltip.propTypes = {
+  delay: PropTypes.number,
+  direction: PropTypes.string,
+  content: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+};

package/src/components/atoms/tooltip/tooltip.module.scss

@@ -0,0 +1,80 @@
+
+  .wrapper {
+    @include flex-align(center, center);
+    position: relative;
+  }
+
+  .tooltip {
+    position: absolute;
+    border-radius: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 6px;
+    color: var(--tooltip-text-color);
+    background: var(--tooltip-background-color);
+    font-size: 1rem;
+    z-index: 100;
+    white-space: nowrap;
+  }
+  
+  .tooltip::before {
+    content: " ";
+    left: 50%;
+    border: solid transparent;
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-width: var(--tooltip-arrow-size);
+    margin-left: calc(var(--tooltip-arrow-size) * -1);
+  }
+
+  .tooltip.top {
+    top: calc(var(--tooltip-margin) * -1);
+  }
+
+  .tooltip.top::before {
+    top: 100%;
+    border-top-color: var(--tooltip-background-color);
+  }
+  
+
+  .tooltip.right {
+    left: calc(100% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+  
+  .tooltip.right::before {
+    left: calc(var(--tooltip-arrow-size) * -1);
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+    border-right-color: var(--tooltip-background-color);
+  }
+  
+  /* Absolute positioning */
+  .tooltip.bottom {
+    bottom: calc(var(--tooltip-margin) * -1);
+  }
+  /* CSS border triangles */
+  .tooltip.bottom::before {
+    bottom: 100%;
+    border-bottom-color: var(--tooltip-background-color);
+  }
+  
+  /* Absolute positioning */
+  .tooltip.left {
+    left: auto;
+    right: calc(100% + var(--tooltip-margin));
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+  }
+  /* CSS border triangles */
+  .tooltip.left::before {
+    left: auto;
+    right: calc(var(--tooltip-arrow-size) * -2);
+    top: 50%;
+    transform: translateX(0) translateY(-50%);
+    border-left-color: var(--tooltip-background-color);
+  }
+  

package/src/components/atoms/tooltip/tooltip.test.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Tooltip from '.';
+
+describe('Tooltip Component', () => {
+  test('render tooltip', async () => {
+    const { container, getByText } = render(
+      <Tooltip content="test content" direction="top" delay={0}>
+        Test Children
+      </Tooltip>
+    );
+    expect(container).toBeTruthy();
+
+    expect(getByText('Test Children')).toBeTruthy();
+
+    fireEvent.mouseEnter(screen.getByText('Test Children'));
+    await waitFor(() => screen.getByText('test content'));
+  });
+});

package/src/components/molecules/horse-calculator/horse-calculator.module.scss

@@ -40,10 +40,6 @@
         font-weight: 700;
         font-size: 16px;
         line-height: 23px;
-
-        > div > select {
-          width: 100% !important;
-        }
       }
     }
 
@@ -202,3 +198,7 @@
     font-weight: 500;
   }
 }
+
+.displayNone {
+  display: none;
+}

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-globals */
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable array-callback-return */
 /* eslint-disable no-return-assign */
@@ -41,6 +42,7 @@ const HorseCalculator = () => {
   const totalReturnRef = useRef(null);
   const totalProfitRef = useRef(null);
   const numSelectionRef = useRef(null);
+  const betTypeRef = useRef(null);
 
   const [activeBetType, setBetType] = useState(betType[0]);
   const [eachWay, setEachWay] = useState('No');
@@ -113,7 +115,11 @@ const HorseCalculator = () => {
   };
 
   const resetCalculation = () => {
-    setBetType(betType[0]);
+    handleBetTypeChange({ target: { value: 0 } });
+
+    if (betTypeRef.current) {
+      betTypeRef.current.value = 0;
+    }
   };
 
   const getColspan = () => {
@@ -128,9 +134,9 @@ const HorseCalculator = () => {
 
   const updateTotals = (totals) => {
     const [outlay, totReturn, profit] = totals;
-    totalOutlayRef.current.innerText = outlay;
-    totalReturnRef.current.innerText = totReturn;
-    totalProfitRef.current.innerText = profit;
+    totalOutlayRef.current.innerText = !isNaN(totReturn) ? outlay : '-';
+    totalReturnRef.current.innerText = !isNaN(totReturn) ? totReturn : '-';
+    totalProfitRef.current.innerText = !isNaN(totReturn) ? profit : '-';
   };
 
   const updateFoldTotals = (totals) => {
@@ -254,15 +260,18 @@ const HorseCalculator = () => {
             <Select
               id="bettype"
               label="Bet type:"
+              tooltip="Accumulator - A Single Bet on up to 20 Selections"
               onChangeFunc={handleBetTypeChange}
               options={betType.map((type, index) => (
                 <option value={index}>{type.name}</option>
               ))}
+              refObj={betTypeRef}
             />
 
             <Select
               id="eachway"
               label="Each way?"
+              tooltip="Whether you are calculating an each way bet. Two individual bets of equal amount, one placed on the selection to win and the other on the same selection to place."
               onChangeFunc={handleEachWayChange}
               options={[
                 <option value="Yes">Yes</option>,
@@ -272,10 +281,11 @@ const HorseCalculator = () => {
               ]}
             />
 
-            {eachWay === 'Yes' && (
+            {eachWay === 'Yes' && activeBetType.multiple_options && (
               <Select
                 id="multiple_options"
                 label="Multiple Options:"
+                tooltip="Test"
                 onChangeFunc={handleMultipleOption}
                 options={[
                   <option value="1">Default - Win-to-Win, Place-to-Place</option>,
@@ -288,17 +298,19 @@ const HorseCalculator = () => {
               <Select
                 id="num_of_selection"
                 label="Number of selections:"
+                tooltip="Pick how many horses you want to track below!"
                 onChangeFunc={handleNumSelectionChange}
                 options={[...Array(numSelection)].map((e, i) => (
                   <option value={i + 1}>{i + 1}</option>
                 ))}
-                ref={numSelectionRef}
+                refObj={numSelectionRef}
               />
             )}
 
             <Select
               id="rulefour"
               label="Show rule 4?"
+              tooltip="Used in horse racing to adjust winnings when runners are withdrawn before the race."
               onChangeFunc={handleRuleFourChange}
               options={[
                 <option value="Yes">Yes</option>,
@@ -311,6 +323,7 @@ const HorseCalculator = () => {
             <Select
               id="addNotes"
               label="Add Selection Notes?"
+              tooltip="Keep some personalized notes on your picks."
               onChangeFunc={handleAddNotesChange}
               options={[
                 <option value="Yes">Yes</option>,
@@ -366,12 +379,22 @@ const HorseCalculator = () => {
                         />
                       </td>
                       <td>
-                        <input onChange={calculateTotalBet} type="number" placeholder={2} />
+                        <input
+                          onChange={calculateTotalBet}
+                          className={
+                            outcomeSelection[index] === 'lost' || outcomeSelection[index] === 'void'
+                              ? styles.displayNone
+                              : ''
+                          }
+                          type="number"
+                          placeholder={2}
+                        />
                       </td>
                       {eachWay === 'Yes' && (
                         <td>
                           <Select
                             id="place_odds"
+                            onChangeFunc={calculateTotalBet}
                             options={placeOddsoptions.map((option) => (
                               <option value={option}>{option}</option>
                             ))}
@@ -382,6 +405,7 @@ const HorseCalculator = () => {
                         <td>
                           <Select
                             id="rule_four"
+                            onChangeFunc={calculateTotalBet}
                             options={ruleFourOptions.map((option) => (
                               <option value={option}>{option}</option>
                             ))}
@@ -401,12 +425,14 @@ const HorseCalculator = () => {
                               <Select
                                 id="tiedposition"
                                 label="Tied position"
+                                onChangeFunc={calculateTotalBet}
                                 options={[...Array(16)].map((e, i) => (
                                   <option value={i + 1}>{i + 1}</option>
                                 ))}
                               />
                               <Select
                                 id="deadheatrunners"
+                                onChangeFunc={calculateTotalBet}
                                 label="Number of runnners in dead heat:"
                                 options={[...Array(16)].map((e, i) => (
                                   <option value={i + 1}>{i + 1}</option>
@@ -415,6 +441,7 @@ const HorseCalculator = () => {
                               <Select
                                 id="placesoffered"
                                 label="Places Offered"
+                                onChangeFunc={calculateTotalBet}
                                 options={[...Array(16)].map((e, i) => (
                                   <option value={i + 1}>{i + 1}</option>
                                 ))}
@@ -434,7 +461,8 @@ const HorseCalculator = () => {
                 <Select
                   id="fold_option"
                   label="Fold options:"
-                  ref={foldOptionRef}
+                  refObj={foldOptionRef}
+                  tooltip="Accumulator - A Single Bet on up to 20 Selections"
                   onChangeFunc={handleFoldOption}
                   options={[
                     <option value="1">Disabled</option>,
@@ -493,7 +521,7 @@ const HorseCalculator = () => {
                   <Select
                     id="one_winner_consolation"
                     label="One Winner Consolation:"
-                    ref={oneWinnerConsolationRef}
+                    refObj={oneWinnerConsolationRef}
                     onChangeFunc={handleFoldOption}
                     options={[
                       <option value="0" selected="">
@@ -513,7 +541,7 @@ const HorseCalculator = () => {
             <Select
               id="stake_type"
               label="Stake Type:"
-              ref={stakeTypeRef}
+              refObj={stakeTypeRef}
               options={[
                 <option value="1" selected>
                   Stake per Bet
@@ -552,6 +580,7 @@ const HorseCalculator = () => {
         </div>
         <div className={styles.ctaContainer}>
           <Button
+            isButton
             primaryColor={false}
             btnText={translate(translations, 'reset-calculation', 'Reset Calculation')}
             invertColors