gatsby-matrix-theme 7.1.63 → 7.2.0

package/CHANGELOG.md

@@ -1,3 +1,48 @@
+# [7.2.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.64...v7.2.0) (2022-10-10)
+
+
+### Bug Fixes
+
+* added test for select component ([5ad7757](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5ad7757ffda2c7c8bce84841df6fb79be979a463))
+* build error ([a55d86a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a55d86a8fa38261329d4f1d7a6354f8adb062b16))
+* popup and cookie ([7bfd947](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7bfd9478712babfff4c877aeb4580db5d6255f64))
+
+
+* Merge branch 'tm-2958-horse-racing-calculator' into 'master' ([807e5e2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/807e5e2d7447019a046ec7a2ab9fec5bc6ecf5af))
+
+
+### Features
+
+* new horse racing calculator template block ([430f17e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/430f17e2f2bab82a6644715414525ef9a17c1e2c))
+
+## [7.1.64](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.63...v7.1.64) (2022-10-07)
+
+
+### Bug Fixes
+
+* added newsletter layer ([e970a68](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e970a68b11a05ae9ee2617edc102198147e923d3))
+* added theme style from input style module ([bc9830d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bc9830d552aa427ac21e1bd7ce641eb100aac859))
+* deleted the unnecessary function ([79b4b0d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/79b4b0dddd3e0ea733e7ed9dbecfeb96f2de7fa4))
+* newsletter layout prop ([d602d4b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d602d4bff8c98cb9acf3d766f46d6793c6cb4bfe))
+* open modal for toplist nsa ([3352aa5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3352aa5c8f1c8ff76bed4c1be94aec4065fb3024))
+* remove schema matrix ([3013ef2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3013ef279224eee63f8da43a1b4a89fac0c183b5))
+* removed timeout on footer navigation ([dedcbab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dedcbab9caf8f9ec6dd9d601967909fe5d04758b))
+* updated to latest core version ([709f417](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/709f4175e2522e5d6ae157b511a35a3c2a3a480e))
+
+
+### Code Refactoring
+
+* update newsletter box positioning ([99b1bc5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/99b1bc5f48445cac234bf556fd8c030433bcfee2))
+* update newsletter form for prop ([eb47237](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/eb47237fce1b6ec75983c6b5ebe54e7f9e48a05a))
+* update newsletter override and main component ([54d2786](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/54d27860a63149ae8608af35ad299043b96ba8b2))
+
+
+* Merge branch 'tm-2999-update-newsletter-box' into 'master' ([f4a5ca1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f4a5ca1d0e972a7da2c5c1adad9c1020051a26de))
+* Merge branch 'tm-2833-schema-bible-matrix-remove' into 'master' ([de40677](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/de40677097a43e27d530559705c3461f78bc8a21))
+* Merge branch 'tm-3014-sign-up-layer' into 'master' ([ca39c10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ca39c101fb8fabd1860d204855addf2f199245b5))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([f9628d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f9628d0c3e64b48afd1d934341d6502ceb24614f))
+* Merge branch 'tm-3003-toplist-style-theme' into 'master' ([c1f13c8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c1f13c8191b1375be674ff28960e0ec2e4353ee8))
+
 ## [7.1.63](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.62...v7.1.63) (2022-09-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.63",
+  "version": "7.2.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "12.0.1",
+    "gatsby-core-theme": "12.0.2",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/atoms/newsletter/form/index.js

@@ -171,7 +171,9 @@ const NewsletterForm = ({
 
           <form ref={form} onSubmit={handelSubmit}>
             {formTextTranslated.textAboveName ? (
-              <p className={styles.textAboveInput}>{formTextTranslated.textAboveName}</p>
+              <label className={styles.textAboveInput} htmlFor="name">
+                {formTextTranslated.textAboveName}
+              </label>
             ) : null}
 
             <input
@@ -179,9 +181,12 @@ const NewsletterForm = ({
               placeholder={formTextTranslated.placeholderName}
               type="text"
               name="name"
+              id="name"
             />
             {formTextTranslated.textAboveEmail ? (
-              <p className={styles.textAboveInput}>{formTextTranslated.textAboveEmail}</p>
+              <label className={styles.textAboveInput} htmlFor="email">
+                {formTextTranslated.textAboveEmail}
+              </label>
             ) : null}
 
             <input
@@ -189,9 +194,12 @@ const NewsletterForm = ({
               placeholder={formTextTranslated.placeholderEmail}
               type="email"
               name="email"
+              id="email"
             />
             {formTextTranslated.textAbovePhoneNumber ? (
-              <p className={styles.textAboveInput}>{formTextTranslated.textAbovePhoneNumber}</p>
+              <label className={styles.textAboveInput} htmlFor="phone">
+                {formTextTranslated.textAbovePhoneNumber}
+              </label>
             ) : null}
 
             {formTextTranslated.placeholderPhoneNumber && (
@@ -200,6 +208,7 @@ const NewsletterForm = ({
                 placeholder={formTextTranslated.placeholderPhoneNumber}
                 type="tel"
                 name="phone"
+                id="phone"
               />
             )}
             <PrivacyandSuccess

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

@@ -0,0 +1,43 @@
+/* eslint-disable react/forbid-prop-types */
+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 { translate } from 'gatsby-core-theme/src/helpers/getters';
+
+import styles from './select.module.scss';
+
+export default function Select({ label = null, id, onChangeFunc = () => {}, options, ref, index }) {
+  const { translations } = useContext(Context) || {};
+
+  if (!label) {
+    return (
+      <div className={styles.dropdownStyling}>
+        <select ref={ref} onChange={(e) => onChangeFunc(e, index)} id={id}>
+          {options.map((option) => option)}
+        </select>
+      </div>
+    );
+  }
+
+  return (
+    <label htmlFor={id}>
+      {translate(translations, id, label)}
+      <div className={styles.dropdownStyling}>
+        <select ref={ref} onChange={(e) => onChangeFunc(e, index)} id={id}>
+          {options.map((option) => option)}
+        </select>
+      </div>
+    </label>
+  );
+}
+
+Select.propTypes = {
+  label: PropTypes.string,
+  id: PropTypes.string,
+  onChangeFunc: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.any),
+  ref: PropTypes.func,
+  index: PropTypes.number,
+};

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

@@ -0,0 +1,31 @@
+.dropdownStyling {
+  position: relative;
+  select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    color: #1a1c1f;
+    background: var(--horse-calc-input-background, #f3f2f2);
+    border-radius: var(--horse-calc-input-border-radius, .4rem);
+    font-weight: 400;
+    font-size: 16px;
+    padding: 1.6rem 1.5rem;
+    width: 100%;
+
+    @include min(tablet) {
+      padding: 1.6rem 2.4rem;
+    }
+  }
+
+  &:after {
+    @include arrow(var(--horse-calc-label-color, #1a1c1f), 0.8rem, down, false);
+    position: absolute;
+    right: 1.5rem;
+    top: 38%;
+
+    @include min(tablet) {
+      right: 2.4rem;
+    }
+  }
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Select from '.';
+
+describe('Select Component', () => {
+  test('render with label and Id', () => {
+    const { container, getByText } = render(
+      <Select
+        label="test label"
+        id="test_id"
+        options={[
+          <option key={1} value="Yes">
+            Yes
+          </option>,
+          <option key={2} value="No">
+            No
+          </option>,
+        ]}
+      />
+    );
+    expect(container).toBeTruthy();
+    expect(container.querySelectorAll('select')).toHaveLength(1);
+    expect(getByText('test label')).toBeTruthy();
+    expect(container.querySelector('select').getAttribute('id')).toEqual('test_id');
+  });
+
+  test('render with change functions', () => {
+    const handleChange = jest.fn();
+
+    const { container } = render(
+      <Select
+        id="test_id"
+        onChangeFunc={handleChange}
+        options={[
+          <option key={1} value="Yes">
+            Yes
+          </option>,
+          <option key={2} value="No">
+            No
+          </option>,
+        ]}
+      />
+    );
+
+    expect(container).toBeTruthy();
+    fireEvent.change(container.querySelector('select'), { target: { value: 2 } });
+    expect(handleChange).toHaveBeenCalled();
+  });
+});
+afterEach(() => {
+  cleanup();
+});

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

@@ -0,0 +1,204 @@
+.innerContainer {
+  background: #ffffff;
+  box-shadow: var(--horse-calc-shadow, 0px -3px 14px rgba(0, 0, 0, 0.09));
+  border-radius: var(--horse-calc-border-radius, 1.6rem);
+  border: 1px solid var(--horse-calc-border-color, transparent);
+  padding: 3.7rem 1rem;
+  color: var(--horse-calc-label-color, #150e06);
+  margin-top: 2rem;
+
+  @include min(tablet) {
+    padding: 3.7rem 2.4rem;
+  }
+
+  h2 {
+    margin-top: 0;
+  }
+
+  input {
+    background-color: #f3f2f2;
+    padding: 1.6rem 2.4rem;
+    width: 100%;
+    border-radius: 4px;
+  }
+
+  > div {
+    @include flex-direction(column);
+    gap: 2rem;
+    > div {
+      gap: 1rem;
+
+      @include min(tablet) {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      > label {
+        @include flex-direction(column);
+        flex-basis: 50%;
+        gap: 1rem;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 23px;
+
+        > div > select {
+          width: 100% !important;
+        }
+      }
+    }
+
+    table {
+      width: 100%;
+
+      th,
+      tr {
+        border: var(--horse-calc-outcome-table-header-border-width, 1.5px) solid var(--horse-calc-outcome-table-header-border-color, #dcd9d3);
+
+        &.deadHeatEnabled,
+        &.selectionNotesRow {
+          border-bottom: none;
+        }
+
+        &.deadHeatRow,
+        &.selectionNotesEnabled {
+          border-top: none;
+        }
+      }
+      th {
+        border-color: var(--table-head-background);
+      }
+
+      thead {
+        tr {
+          background: var(--table-head-background);
+          th {
+            padding: 1rem;
+            vertical-align: top;
+            padding-left: 1.4rem;
+            color: var(--horse-calc-label-color, #150e06);
+
+            font-weight: 700;
+
+            &:first-child {
+              width: 4rem;
+            }
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          td {
+            text-align: center;
+            padding: 1rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+.fullWidth {
+  display: flex !important;
+
+  label {
+    flex-basis: 100% !important;
+  }
+}
+
+.deadHeat {
+  @include flex-align(center, space-between);
+  gap: 1rem;
+
+  label:nth-child(2) {
+    flex-grow: 1;
+  }
+}
+
+.outcomeTable {
+  background: #f3f2f2;
+  border-spacing: 0 !important;
+  display: flex;
+
+  @include min(tablet) {
+    display: table;
+  }
+
+  thead,
+  tbody {
+    width: 50%;
+  }
+
+  tr {
+    width: 100%;
+    display: block;
+
+    @include min(tablet) {
+      width: auto;
+      display: table-row;
+    }
+  }
+
+  td,
+  th {
+    width: 100% !important;
+    display: block;
+
+    @include min(tablet) {
+      display: table-cell;
+      width: auto !important;
+    }
+  }
+
+  th,
+  tr {
+    border: none !important;
+  }
+
+  thead {
+    tr {
+      th {
+        background: var(--horse-calc-totals-table-header-background, #17d670) !important;
+
+        &:first-child {
+          width: auto !important;
+        }
+      }
+    }
+  }
+}
+
+.foldTable {
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      th {
+        &:first-child {
+          width: auto !important;
+        }
+      }
+    }
+  }
+}
+
+.ctaContainer {
+  margin-top: 2rem;
+  @include flex-align(center, center);
+}
+
+.currencyInput {
+  position: relative;
+
+  input {
+    padding-left: 4rem;
+  }
+
+  &:before {
+    content: attr(data-curr-symbol);
+    position: absolute;
+    left: 2rem;
+    top: 1.4rem;
+    font-weight: 500;
+  }
+}

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

@@ -0,0 +1,36 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+
+import HorseRacingCalculator from '.';
+
+export default {
+  title: 'Matrix-Theme/Molecules/HorseRacingCalculator',
+  component: HorseRacingCalculator,
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: 'Horse racing calculator component',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <HorseRacingCalculator {...args} />;
+
+export const Default = Template.bind({});