gatsby-matrix-theme 3.1.2 → 3.2.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "3.1.2",
+  "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": "^2.0.7",
+    "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

@@ -14,8 +14,11 @@ const CasinosTable = ({ module }) => {
     const [firstLine, secondLine] = one_liner.split('+');
     return (
       <>
-        <span className={styles.firstLine}>{firstLine}<br /></span>
-        <span className={styles.secondLine}>{`+${secondLine}`}</span>
+        <span className={styles.firstLine}>
+          {firstLine}
+          <br />
+        </span>
+        {secondLine && <span className={styles.secondLine}>{`+${secondLine}`}</span>}
       </>
     );
   };

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

@@ -1,25 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import loadable from '@loadable/component';
 import keygen from '~helpers/keygen';
 import List from './list';
 import Tabs from '~hooks/tabs';
 import Row from '../../molecules/toplist/row/variant-one';
 
+// eslint-disable-next-line no-unused-vars
 const TopList = ({ module, toplistHeading, CustomRow, page }) => {
   const template = page?.template;
-  const ComparisonTable =
-    module?.style === 'comparison_table' ? loadable(() => import('./comparison-table')) : null;
 
-  return ComparisonTable ? (
-    <ComparisonTable
-      module={module}
-      toplistHeading={toplistHeading}
-      CustomRow={CustomRow}
-      page={page}
-    />
-  ) : (
+  return (
     <Tabs title={module.title} module={module} tabsAlign="right" gtmClass="toplist-tabs-menu-gtm">
       {module.items.map((toplist) => (
         <div label={toplist.title} key={keygen()}>

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

@@ -27,6 +27,10 @@ const Modules = ({ module, page, pageContext }) => {
         if (moduleItem.style === 'stack_table' && moduleItem.cards_page_type === 'operator') {
           return loadable(() => import('../../../../components/atoms/cards/operators-table'));
         }
+        if (moduleItem.style === 'comparison_table' && moduleItem.cards_page_type === 'operator') {
+          return loadable(() => import('../../../../components/atoms/cards/comparison-table'));
+        }
+
         return loadable(() => import('../../organisms/cards'));
       case 'pros_and_cons':
         return loadable(() => import('gatsby-core-theme/src/components/molecules/pros-cons'));

package/src/gatsby-core-theme/styles/utils/variables/_main.scss

@@ -73,5 +73,11 @@
   --page-number-color: #fff;
   --sitemap-background-color: #fff;
 
+  // Comparison Table
+  --header-border-color: #D0C0AD;
+  --header-text-color: #171F49;
+  --header-background-color: #F9F6F3;
+  --body-border-color: #F3F2F2;
+  --body-background-color: #ffffff;
 
 }