gatsby-matrix-theme 3.0.10 → 3.2.0

package/CHANGELOG.md

@@ -1,3 +1,94 @@
+# [3.2.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.1.2...v3.2.0) (2022-01-03)
+
+
+### Bug Fixes
+
+* add storybook and fix some style issue ([40db75b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/40db75b3d61109ab835053ff8ca9fa52a9625cbc))
+* added scss vars for comparison table and minor fixes ([fe23268](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fe23268f258709c0f43742261fb152d506e7a48e))
+* fixed name and style also added the deposit method ([b075d1e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b075d1ed2ffcfafc27860a6cdde653866ac24929))
+* second line fix ([ede14f5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ede14f52526d6d09ae415c164d7fa0c0fc13e4f6))
+
+
+### Config
+
+* updated core version ([bfbdce6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bfbdce6a196a09cd5ee6befccb3fd36900306a41))
+
+
+* Merge branch 'STK-2585-Casino-comparison-module' into 'master' ([9376eb2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9376eb220a8b99a175667ea4f1308c498ae0a2e6))
+* Merge branch 'master' into STK-2585-Casino-comparison-module ([b3c2149](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b3c2149636ae1e46bb96b6843ea2ea7333b90d6c))
+
+
+### Features
+
+* add the comparison table ([7decb55](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7decb557e543b7307dad0edc78677158bdfb7ced))
+
+## [3.1.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.1.1...v3.1.2) (2021-12-23)
+
+
+### Bug Fixes
+
+*  operator bonus added dividor ([98538a9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/98538a94160ef27a2a4d33334f8534aa6baff32e))
+* fixed parsing metadescription ([f3f7568](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f3f75682e88341ebc90f3f532594e4a816605fc9))
+* new testimonials styling ([7f16177](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f1617700a339d7e0edd183769b040fb9a419255))
+* removed an useless line ([6320358](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/63203585e3ee6362f1250033b0b41a1180f61ad2))
+* tests ([0d2794f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d2794feb4f5a93eb08f40c1776330a25aed0850))
+
+
+### Config
+
+* updated core theme version ([8ead1a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8ead1a7c4fec1a4f30acced891b9eaa262d2c104))
+
+
+* Merge branch 'tm-2629-spotlight-testimonials' into 'master' ([52f20ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/52f20abf60df594d49e7eac3c4a5a099e7c2842a))
+* Merge branch 'tm-2610-operator-bonus' into 'master' ([8c80938](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8c80938101df09f25d6458c423f4eaf09e8da5ca))
+* Merge branch 'fix-parse-metadescription' into 'master' ([fbed07c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fbed07cb84ba1d34a296ebc5cbf059eadfecdd72))
+
+## [3.1.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.1.0...v3.1.1) (2021-12-17)
+
+
+### Config
+
+* updated theme version ([d35a8d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d35a8d258252b7376968683cd5fc65af089923eb))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([ec89a34](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec89a340a0c73ed3261f0b5d9eff2b33254dc35c))
+
+# [3.1.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.10...v3.1.0) (2021-12-17)
+
+
+### Bug Fixes
+
+* add default copyright_disclaimer ([f0c330f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f0c330fc779e79be0e6a7bab17cd54989e3e93de))
+* carousel slides ([ae7dea9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ae7dea9a0025daca522572efbd6ce27b5c7d3a0a))
+* casino table ([2d0b8ec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2d0b8ec4cd2e18fc9a21d1b17dcf1c529ac03aab))
+* fixed bonus issue and loadable condition ([7f1f1a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7f1f1a7d6e467da005b60a8806056280fad671e7))
+* fixed copyrightDisclaimer ([1a606d2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1a606d2990c3883e2a3f0541d369e52dd93457f4))
+* merge ([14a32ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/14a32ab72c7c430e3619755433d5a92a79fe742c))
+* merged master ([5a983ab](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5a983ab64013fe9029d99eea3223ecb2c4145a1b))
+* progress made ([55c3175](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/55c3175b5e827a2d1c3d1b33cb44ff3ca3b23379))
+* remove re-declared copyrightDisclaimer ([598ac18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/598ac182d54e7a62e638ccfe42cda809f899ffc7))
+* small fix ([9d8c24d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9d8c24dc18245c6b07c658afce398ddf55802cec))
+* small fix ([a9341ad](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a9341ad547865d2a154c98d55d12c78bd09f5982))
+* spotlight images ([8daaf46](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8daaf460f49bafdda908899ae37fe8ff992befe2))
+* spotlight images ([fa886b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fa886b6cbe2aa31992a415828f21f2927d5d8c97))
+* style issues ([2881939](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/28819392bbfec1ffa64739b42cb9dfc367ef7f82))
+* updated core theme version and fixed disclaimer text bug ([3ce75e2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3ce75e2c58812fef1ee3177c200a5268a5763f78))
+
+
+### Code Refactoring
+
+* check the data ([dd25ece](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dd25ece863cd5956663ab47a34dde6eca5ded85a))
+
+
+* Merge branch 'tm-2613-carousel-fix' into 'master' ([bdf02e8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bdf02e8b330e9923437ae8a1c68568ce19c2c181))
+* Merge branch 'tm-2597-casino-table' into 'master' ([6861c37](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6861c37c160aab7426288b8b4f40b3b8eabad3cf))
+* Update index.js ([056c9bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/056c9bddb0d7e63d0fbe8538968933c4d69d99b8))
+
+
+### Features
+
+* twitter graph ([dfdf8bf](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dfdf8bfe5e9ff07a20b25f2c5f659126767dcffb))
+
 ## [3.0.10](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v3.0.9...v3.0.10) (2021-12-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.0.10",
+  "version": "3.2.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -31,7 +31,7 @@
     "cross-env": "^7.0.2",
     "dotenv": "8.2.0",
     "gatsby": "^3.3.1",
-    "gatsby-core-theme": "^1.6.22",
+    "gatsby-core-theme": "^2.0.10",
     "gatsby-image": "^3.3.0",
     "gatsby-plugin-image": "^1.3.1",
     "gatsby-plugin-postcss": "^4.3.0",

package/src/components/atoms/cards/comparison-table/comparison-table.module.scss

@@ -0,0 +1,27 @@
+.comparisonTable {
+  
+  .contentTable {
+    border-right: 1px solid var(--body-border-color);
+    overflow-x: scroll;
+    cursor: grabbing;
+    &::-webkit-scrollbar {
+      height: 5px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: rgb(216, 216, 216);
+      border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgb(187, 187, 187);
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
+
+import ComparisonTable from '.';
+
+export default {
+  title: 'Matrix-Theme/Atoms/Comparison Table',
+  component: ComparisonTable,
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays a single Popup Card',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <ComparisonTable {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  module: getSampleOperatorCards(),
+};

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

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './comparison-table.module.scss';
+import Table from './table';
+
+export default function ComparisonTable({ module }) {
+  const ele = useRef('');
+
+  let pos = { top: 0, left: 0, x: 0, y: 0 };
+
+  const mouseMoveHandler = (e) => {
+    const dx = e.clientX - pos.x;
+    ele.current.scrollLeft = pos.left - dx;
+  };
+
+  const mouseLeftHandler = () => {
+    ele.current.style.cursor = 'grab';
+    ele.current.style.removeProperty('user-select');
+
+    document.removeEventListener('mousemove', mouseMoveHandler);
+    document.removeEventListener('mouseup', mouseLeftHandler);
+  };
+
+  const mouseRightHandler = (e) => {
+    ele.current.style.cursor = 'grabbing';
+    ele.current.style.userSelect = 'none';
+
+    pos = {
+      left: ele.current.scrollLeft,
+      x: e.clientX,
+    };
+
+    document.addEventListener('mousemove', mouseMoveHandler);
+    document.addEventListener('mouseup', mouseLeftHandler);
+  };
+
+  useEffect(() => {
+    ele.current.style.cursor = 'grab';
+    ele.current.addEventListener('mousedown', mouseRightHandler);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className={styles.comparisonTable}>
+      <div ref={ele} className={styles.contentTable}>
+        <Table items={module?.items} />
+      </div>
+    </div>
+  );
+}
+
+ComparisonTable.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.shape({}),
+  }),
+};

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

@@ -0,0 +1,196 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { AiOutlineCheckCircle } from 'react-icons/ai';
+import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImg from 'gatsby-core-theme/src/hooks/lazy-image';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';
+import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+
+import styles from './table.module.scss';
+
+export default function ComparisonTable({ items }) {
+  const { translations } = useContext(Context) || {};
+
+  const tabelInfo = [
+    {
+      defaultValue: 'Casino name',
+      key: 'casino_name',
+    },
+    {
+      defaultValue: 'Rating',
+      key: 'rating',
+    },
+    {
+      defaultValue: 'Bonus',
+      key: 'bonus',
+    },
+    {
+      defaultValue: 'Top Features',
+      key: 'top_features',
+    },
+    {
+      defaultValue: 'Payment Methods',
+      key: 'payment_methods',
+    },
+    {
+      defaultValue: 'Banking',
+      key: 'banking',
+    },
+    {
+      defaultValue: 'Currencies',
+      key: 'currencies',
+    },
+    {
+      defaultValue: 'Licenses',
+      key: 'licenses',
+    },
+  ];
+
+  const cell = (heading, item, index) => {
+    switch (heading) {
+      case 'casino_name':
+        return (
+          <td key={index} className={styles.casinoName}>
+            <LazyImg
+              src={imagePrettyUrl(item?.relation?.logo_url)}
+              height={89}
+              width={89}
+              alt={item.title}
+            />
+            <div>
+              <span>{item.title}</span>
+              <OperatorCta
+                tracker="main"
+                operator={item?.relation}
+                playText={translate(translations, 'play_now', 'Play Now')}
+                gtmClass="operator-card-gtm btn-cta"
+              />
+            </div>
+          </td>
+        );
+      case 'rating':
+        return (
+          <td key={index} className={styles.raiting}>
+            <StarRating numOfStars={5} rating={item?.relation?.rating} />
+            <Link to={item.path}> {translate(translations, 'review', 'Read Review')} </Link>
+          </td>
+        );
+      case 'bonus':
+        return (
+          <td key={index}>
+            <Bonus tracker="main" item={item?.relation} />
+          </td>
+        );
+      case 'top_features':
+        return (
+          <td key={index} className={styles.topFeatures}>
+            {item?.relation?.selling_points &&
+              item?.relation?.selling_points.map((sellingPoint) => (
+                <span key={sellingPoint}>
+                  <AiOutlineCheckCircle size={27} color="#FF893F" /> {sellingPoint}
+                </span>
+              ))}
+          </td>
+        );
+      case 'payment_methods':
+        return (
+          <td key={index} className={styles.paymentMethods}>
+            {item?.relation?.bonus?.deposit_methods &&
+              item?.relation?.bonus?.deposit_methods.slice(0, 5).map((deposit) => (
+                <span key={deposit.name}>
+                  <LazyImg
+                    src={imagePrettyUrl(deposit?.logo_filename)}
+                    width={72}
+                    height={72}
+                    alt={deposit.name}
+                  />
+                </span>
+              ))}
+            {item?.relation?.bonus?.deposit_methods?.length > 5 && (
+              <span>+{item?.relation?.bonus?.deposit_methods.length - 5}</span>
+            )}
+          </td>
+        );
+      case 'banking':
+        return (
+          <td key={index} className={styles.banking}>
+            <p>
+              {translate(translations, 'min_deposit', 'Min Deposit')}
+              <span>{item?.relation?.bonus?.min_deposit}</span>
+            </p>
+            <p>
+              {translate(translations, 'max_withdrawal', 'Max Withdrawal')}
+              <span>{item?.relation?.bonus?.max_withdrawal}</span>
+            </p>
+            <p>
+              {translate(translations, 'currency_support', 'Currency Support')}
+              <span>
+                {item?.relation?.bonus?.currencies &&
+                  item?.relation?.bonus?.currencies
+                    .slice(0, 3)
+                    .map((currencies) => currencies.iso_code)}
+              </span>
+            </p>
+          </td>
+        );
+      case 'currencies':
+        return (
+          <td key={index} className={styles.currencies}>
+            {item?.relation?.bonus?.currencies &&
+              item?.relation?.bonus?.currencies.map((currencies) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <span key={currencies.iso_code}>{currencies.iso_code} </span>
+              ))}
+          </td>
+        );
+      case 'licenses':
+        return (
+          <td key={index} className={styles.licenses}>
+            {item?.relation?.bonus?.license_objects &&
+              item?.relation?.bonus?.license_objects.map((license) => (
+                <LazyImg
+                  src={imagePrettyUrl(license?.logo_filename)}
+                  height={32}
+                  alt={license.name}
+                />
+              ))}
+          </td>
+        );
+      default:
+        return '';
+    }
+  };
+
+  const table = () => {
+    const row = [];
+    tabelInfo.forEach((heading) => {
+      const cells = [];
+
+      items.forEach((item, index) => {
+        cells.push(cell(heading.key, item, `${heading}-${index}`));
+      });
+
+      row.push(
+        <tr>
+          <th>{translate(translations, heading.key, heading.defaultValue)}</th>
+          {cells}
+        </tr>
+      );
+    });
+
+    return (
+      <table>
+        <tbody>{row}</tbody>
+      </table>
+    );
+  };
+
+  return table();
+}
+
+ComparisonTable.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.object),
+};

package/src/components/atoms/cards/comparison-table/table/table.module.scss

@@ -0,0 +1,114 @@
+table {
+  cursor: grabbing;
+  tr {
+    grid-template-columns: 15.2rem 27rem;
+    grid-auto-columns: 27rem;
+    grid-auto-flow: column;
+    display: grid;
+
+    &:first-child {
+      th {
+        border-top-left-radius: 0.8rem;
+      }
+    }
+
+    &:last-child {
+      th {
+        border-bottom-left-radius: 0.8rem;
+      }
+    }
+
+    th {
+      @include flex-align(center, center);
+      background-color: var(--header-background-color);
+      border: 1px solid var(--header-border-color);
+      box-sizing: border-box;
+      color: var(--header-text-color);
+
+      @include min(laptop) {
+        position: sticky;
+        z-index: 1;
+        left: 0;
+      }
+    }
+    td {
+      border: 1px solid var(--body-border-color);
+      background-color: var(--body-background-color);
+      box-sizing: border-box;
+      padding: 1.6rem;
+    }
+    .casinoName {
+      @include flex-direction(row);
+      @include flex-align(center, center);
+      padding: 1.6rem;
+      img {
+        border: 1px solid var(--color-9);
+        box-sizing: border-box;
+        margin-right: 1.6rem;
+      }
+      span {
+        font-weight: bold;
+        font-size: 18px;
+        line-height: 25px;
+      }
+    }
+    .raiting {
+      @include flex-align(center, space-between);
+    }
+    .topFeatures {
+      @include flex-direction(column);
+      @include flex-align(flex-start, center);
+      span {
+        @include flex-direction(row);
+        @include flex-align(center, center);
+        margin-bottom: 0.8rem;
+        svg {
+          margin-right: 0.93rem;
+        }
+      }
+    }
+    .banking {
+      @include flex-direction(column);
+      @include flex-align(center, center);
+      p {
+        width: 100%;
+        @include flex-align(center, space-between);
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 24px;
+        margin-bottom: 1rem;
+        span {
+          font-weight: bold;
+        }
+      }
+    }
+    .currencies {
+      span {
+        margin-left: 0.4rem;
+        background: var(--color-9);
+        border-radius: 2px;
+        padding: 0.3rem 0.79rem;
+        font-weight: bold;
+        font-size: 12px;
+        line-height: 18px;
+      }
+    }
+    .paymentMethods {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      span {
+        @include flex-direction(row);
+        @include flex-align(center, center);
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 18px;
+      }
+    }
+
+    .licenses {
+      img {
+        max-height: 3.2rem;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,22 @@
+/* eslint-disable array-callback-return */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
+
+import ComparisonTable from '.';
+
+const module = getSampleOperatorCards();
+
+describe('Comparison table test component', () => {
+  test('render', () => {
+    const { getByText } = render(<ComparisonTable items={module.items} />);
+
+    module.items.map((item) => {
+      expect(getByText(item.title));
+    });
+  });
+});
+afterEach(() => {
+  cleanup();
+});

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

@@ -0,0 +1,61 @@
+/* eslint-disable camelcase */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
+import { translate, getBonus } from 'gatsby-core-theme/src/helpers/getters';
+import styles from './table.module.scss';
+
+const CasinosTable = ({ module }) => {
+  const { translations } = useContext(Context);
+  const { items } = module || {};
+
+  const oneLiner = ({ one_liner }) => {
+    const [firstLine, secondLine] = one_liner.split('+');
+    return (
+      <>
+        <span className={styles.firstLine}>
+          {firstLine}
+          <br />
+        </span>
+        {secondLine && <span className={styles.secondLine}>{`+${secondLine}`}</span>}
+      </>
+    );
+  };
+
+  return (
+    <div className={styles.container}>
+      <table>
+        <thead>
+          <tr>
+            <th>{`${translate(translations, 'casino', 'Casino')}`}</th>
+            <th>{`${translate(translations, 'bonus', 'Bonus')}`}</th>
+            <th>{`${translate(translations, 'visit_casino', 'Visit casino')}`}</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items &&
+            items.map((item) => (
+              <tr>
+                <td>{item.title}</td>
+                <td>{oneLiner(getBonus('main', item?.relation))}</td>
+                <td>
+                  <Link to={item?.path} name={item?.relation?.name}>
+                    {`${item?.relation?.name} ${translate(translations, 'read_review', 'Review')}`}
+                  </Link>
+                </td>
+              </tr>
+            ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default CasinosTable;
+
+CasinosTable.propTypes = {
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf({}),
+  }).isRequired,
+};