gatsby-matrix-theme 7.1.64 → 7.2.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.64",
+  "version": "7.2.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

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({});