gatsby-matrix-theme 17.1.3 → 18.0.0

package/.storybook/preview.js

@@ -41,7 +41,15 @@ export const parameters = {
             ['Template One', 'Template Two', 'Template Three'],
           ],
           'Modules',
-          ['Cards', ['Payments', ['Template One', 'Template Two', 'Template Three']]],
+          [
+            'Cards',
+            [
+              'Operator',
+              ['Template One', 'Template Two', 'Template Three', 'Template Four'],
+              'Payments',
+              ['Template One', 'Template Two', 'Template Three'],
+            ],
+          ],
           'Atoms',
           'Molecules',
           'Organisms',

package/CHANGELOG.md

@@ -1,3 +1,49 @@
+# [18.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.1.3...v18.0.0) (2023-04-04)
+
+
+### Code Refactoring
+
+* changes to casino text to align with nsa ([6cbb598](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6cbb598fd65ac43e1b377555964eaf4ce1e4dba7))
+* changes to ratings showLabel ([c7d6321](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c7d6321c96f743ce319c751057d8ccade79ed9d5))
+* changes to template cards to align with site level ([801a588](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/801a5886bb33db9c44be4e1db1aa9eaab69061c9))
+* changes to templates cards for sites ([878306f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/878306f560b36cb32849a19472513c592b92528f))
+* changes to tnc ([01bbef0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/01bbef0d2a61d79cffa57b08e7cd3a0185646f18))
+* changes to variable component ([5521c9e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5521c9e05d3365552932a33279bc123abbe84736))
+* code review changes ([a562787](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a5627876ac0162f80d832d5235bdb2d1e0c6c941))
+* extra component for additional details ([cd50bf2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cd50bf2fa5555b39598b829818e52fcc384cf6e1))
+* initial commit for operator cards ([a76c50b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a76c50b2b8b11cf4e1879d28ab4fa1f3057ee0d7))
+* minor css ([de689e0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/de689e0be4fe0d42df7b641be8244d10e9ffad2c))
+* operator cards templates ([907d72b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/907d72b237acaf96a968fcf6f340bde8c05ca34a))
+* remove duplicate translation ([58ecabe](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/58ecabec689f02126412c45b1a98265c9e612b1e))
+* storybook changes to operator cards ([51cdadd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/51cdadddd49d5cea0ec1d0c0066e1c00774a1b03))
+* template structure for operator cards ([7c6a48a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7c6a48a8c5982eba45963b93ad5406ccb0fcfdbf))
+* template two styles ([667e41a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/667e41a1d1e34721521dba8e9b192790692e7548))
+* typo fix ([f39c624](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f39c624fa976e8bdb12b89037799a65f90b487c8))
+
+
+### Config
+
+* update to latest core theme ([f5a7eef](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f5a7eef8048e4d403a995e1c1a60340ca2a0bc5d))
+
+
+* Merge branch 'tm-3309-operator-cards' into 'master' ([4944c65](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4944c65a44b55aa0b0bf89c893a15c90e6b2a564))
+* Merge branch 'master' into tm-3309-operator-cards ([e595093](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e595093307ea164c583597eb571c4f2b3881a7fe))
+* Merge branch 'master' into tm-3309-operator-cards ([a45a12e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a45a12e497a7682060637ba3c30ae80c7d712be9))
+* Merge branch 'master' into tm-3309-operator-cards ([bc506d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bc506d07f6aac0fa174418b351b92932030d716a))
+* Merge branch 'master' into tm-3309-operator-cards ([1f93124](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1f93124ecc24e9b3c9bbc8edd2489c6a6c637609))
+* Merge branch 'master' into tm-3309-operator-cards ([220aafb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/220aafbf3ae097092c7947cbee661ade83d315f0))
+* Merge branch 'master' into tm-3309-operator-cards ([a3b6793](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a3b6793644d49958d3cc540cbda821aa4039add1))
+* Merge branch 'master' into tm-3309-operator-cards ([1be999f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1be999fb992488416aa96bab3e1b4efbe2038a3b))
+* Merge branch 'master' into tm-3309-operator-cards ([e911a0b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e911a0b2dc1ac957c2d23e23f7df77b440bbf4fd))
+* Merge branch 'master' into tm-3309-operator-cards ([7583ef9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7583ef90ef11a6a9539c5cf25fe17205b0e2333f))
+* Merge branch 'master' into tm-3309-operator-cards ([a2fab7e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a2fab7e311fa1a40d168014fd28411bf913b3b59))
+* Merge branch 'master' into tm-3309-operator-cards ([2b1f007](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2b1f00789ac1b93c5ca952f065254f26f24f3e50))
+
+
+### Tests
+
+* test scripts for operator cards ([f3a4c79](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f3a4c79d83c501ad69d6e4e6fd0d4a9d54f03fed))
+
 ## [17.1.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v17.1.2...v17.1.3) (2023-04-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "17.1.3",
+  "version": "18.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "18.0.28",
+    "gatsby-core-theme": "19.0.1",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/atoms/cards/base-card/base-card.module.scss

@@ -4,7 +4,7 @@
   overflow: hidden;
   background: #fff;
   border-radius: var(--border-radius);
-  border: 1px solid #f1f1f1;
+  border: var(--cards-border);
   position: relative;
   a{
     span{
@@ -24,6 +24,7 @@
     min-height: 27rem;
     height: auto;
     display: flex;
+    flex-direction: column;
 
     .cardWrapper {
       display: flex;

package/src/components/atoms/cards/operator-card/template-four/index.js

@@ -0,0 +1,182 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import { BiLike } from '@react-icons/all-files/bi/BiLike';
+import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
+import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
+import {
+  getAltText,
+  imagePrettyUrl,
+  translate,
+  prettyTracker,
+} from 'gatsby-core-theme/src/helpers/getters';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import Bonus from 'gatsby-core-theme/src/components/atoms/bonus';
+import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
+import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta-button';
+import Rating from '../../../rating';
+import styles from './template-four.module.scss';
+
+const TemplateFour = ({
+  item,
+  useOneStarRating = true,
+  page,
+  showHalfStars = false,
+  showBonusAsLink = false,
+  showAuthor = true,
+  verifyIcon = '../../../images/verify.svg',
+}) => {
+  const { relation, path } = item;
+  const { name, status } = relation;
+  const reviewPath = path || relation.path;
+  const isInactive = status === 'inactive';
+  const prettyLink = prettyTracker(relation, 'main', false, page?.template);
+  const { translations } = useContext(Context) || {};
+  const StarRating = useOneStarRating
+    ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
+    : loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating'));
+
+  return (
+    <div className={styles.operatorCard}>
+      <div className={styles.cardHeader}>
+        <Link to={reviewPath} title={name} className={`${styles.casinoLogo} operator-card-gtm`}>
+          <LazyImage
+            width={88}
+            height={88}
+            src={imagePrettyUrl(relation?.standardised_logo_url_object?.filename, 88, 88)}
+            alt={getAltText(relation?.standardised_logo_url_object, name)}
+          />
+        </Link>
+        <Link to={reviewPath} title={name} className="operator-card-gtm">
+          {name}
+        </Link>
+        <div className={styles.headerDetails}>
+          <StarRating numOfStars={5} halfStars={showHalfStars} rating={relation.rating} />
+          {showAuthor && item?.author && (
+            <div className={styles.authorData}>
+              <LazyImage
+                alt={item?.author?.name}
+                loading="eager"
+                width={20}
+                height={20}
+                src={imagePrettyUrl(item?.author?.image, 20, 20)}
+              />
+              <span>
+                <LazyImage
+                  src={verifyIcon}
+                  alt={translate(translations, 'verified', 'Verified')}
+                  width={10}
+                  height={10}
+                />
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={styles.cardContent}>
+        <Rating item={relation} type="operatorCards" />
+        <div className={styles.cardContentContainer}>
+          {!isInactive && (
+            <div className={styles.casinoText}>
+              {showBonusAsLink ? (
+                <a
+                  href={prettyLink}
+                  target="_blank"
+                  rel="noreferrer"
+                  className={`${styles.text} toplist-gtm bonus-cta`}
+                >
+                  <Bonus item={relation} tracker="main" />
+                </a>
+              ) : (
+                <Bonus item={relation} tracker="main" />
+              )}
+            </div>
+          )}
+          <div className={styles.cardFooter}>
+            {relation?.status !== 'not_recommended' && (
+              <OperatorCta
+                tracker="main"
+                operator={relation}
+                translationsObj={{
+                  active: { translationKey: 'play_now', defaultValue: 'Play Now' },
+                  not_recommended: {
+                    translationKey: 'not_recommended',
+                    defaultValue: 'Not Recommended',
+                  },
+                  coming_soon: { translationKey: 'coming_soon', defaultValue: 'Soon Available' },
+                  inactive: {
+                    translationKey: 'inactive',
+                    defaultValue: 'Not Accepting New Players',
+                  },
+                  blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
+                }}
+                gtmClass="operator-card-gtm btn-cta"
+                pageTemplate={page?.template}
+                icon={<FaArrowRight />}
+              />
+            )}
+          </div>
+        </div>
+        <div className={styles.feedback}>
+          {(page?.true_votes || page?.false_votes) && (
+            <div className={styles.feedbackCounter}>
+              {page?.true_votes && (
+                <div className={styles.likes}>
+                  <BiLike color="#3E3C47" />
+                  {page?.true_votes}
+                </div>
+              )}
+              {page?.false_votes && (
+                <div className={styles.dislikes}>
+                  <BiDislike color="#3E3C47" />
+                  {page?.false_votes}
+                </div>
+              )}
+            </div>
+          )}
+          <ReviewLink
+            className={`${styles.reviewLink} operator-card-gtm`}
+            template={page?.template}
+            operatorName={name}
+            reviewPath={reviewPath}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+TemplateFour.propTypes = {
+  item: PropTypes.shape({
+    relation: PropTypes.shape({
+      rating: PropTypes.string,
+      name: PropTypes.string,
+      path: PropTypes.string,
+      status: PropTypes.string,
+      standardised_logo_url_object: PropTypes.shape({
+        filename: PropTypes.string,
+      }),
+    }),
+    path: PropTypes.string,
+    author: PropTypes.shape({
+      name: PropTypes.string,
+      image: PropTypes.string,
+    }),
+  }).isRequired,
+  useOneStarRating: PropTypes.bool,
+  page: PropTypes.shape({
+    template: PropTypes.string,
+    true_votes: PropTypes.number,
+    false_votes: PropTypes.number,
+    type: PropTypes.string,
+  }),
+  showHalfStars: PropTypes.bool,
+  showBonusAsLink: PropTypes.bool,
+  showAuthor: PropTypes.bool,
+  verifyIcon: PropTypes.string,
+};
+
+export default TemplateFour;

package/src/components/atoms/cards/operator-card/template-four/template-four.module.scss

@@ -0,0 +1,262 @@
+.operatorCard{
+  width: 100%;
+  background: #fff;
+  border-radius: var(--border-radius);
+  border: var(--cards-border);
+  position: relative;
+  min-height: 27rem;
+  @include flex-direction(column);
+}
+
+.cardContent {
+    @include flex-direction(column);
+    @include flex-align(stretch, space-between);
+    width: 100%;
+    height: 100%;
+    color: var(--color-44);
+    gap: 1.6rem;
+
+    a {
+      letter-spacing: 0.002em;
+      text-align: center;
+      width: 100%;
+    }
+
+    ul {
+      padding: 0 1.6rem;
+      grid-template-columns: 1fr 1fr 1fr;
+      overflow: inherit;
+      justify-content: center;
+
+      li {
+        min-height: 4rem;
+        min-width: 4rem;
+        padding: 1.2rem 0.8rem;
+
+        p {
+          > div {
+            margin: 0;
+
+            @include min(laptop) {
+            }
+          }
+          @include min(laptop) {
+            > div,
+            > div > span:last-child {
+              font-weight: 700;
+              font-size: 12px;
+              line-height: 20px;
+            }
+          }
+        }
+      }
+    }
+}
+
+.casinoText {
+  @include flex-align(flex-start, space-between);
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+
+  span {
+    width: 100%;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 1.6rem;
+    line-height: 2.7rem;
+    @include flex-align(center, center);
+    text-align: center;
+    text-transform: capitalize;
+    color: var(--color-50);
+    padding: 0;
+  }
+}
+
+.cardFooter {
+    width: 100%;
+    color: var(--color-44);
+  
+    @include min(tablet) {
+      @include flex-direction(column);
+    }
+  
+    @include min(laptop) {
+      margin-top: 0;
+    }
+  
+    a {
+      width: 100%;
+      height: 5.6rem;
+      font-weight: 700;
+      text-transform: capitalize;      
+      color: var(--color-4);
+      font-size: 1.8rem;
+      line-height: 2rem;
+      gap: 0.4rem;
+      text-decoration: none;
+  
+      @include flex-align(center, center);
+    }
+  
+    a:last-of-type {
+      align-self: center;
+      width: 100%;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  
+    @include max(tablet) {
+      a[class*='button'] {
+        width: 100%;
+        margin-bottom: 0.5rem;
+      }
+    }
+}
+
+.reviewLink {
+  color: var(--color-53);
+  font-size: 1.6rem;
+  font-weight: bold;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  text-decoration-line: underline;
+}
+  
+.cardHeader {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  border-radius: var(--cards-border-radius) var(--cards-border-radius) 0 0;
+  padding: 1.6rem;
+  gap: 0.4rem 1.6rem;
+
+  .casinoLogo {
+    display: flex;
+    border-radius: var(--cards-border-radius);
+    text-align: center;
+    grid-row: 1/3;
+    grid-column: 1/2;
+    border: var(--cards-border);
+    border-radius: 16px;
+
+    img {
+      width: 8.8rem;
+      height: 8.8rem;
+      object-fit: contain;
+      border-radius: var(--cards-border-radius);
+    }
+  }
+  
+  a {
+    @include flex-direction(column);
+    @include flex-align(flex-start, flex-end);
+    color: #161005;
+    font-weight: 700;
+    font-size: 1.8rem;
+    line-height: 2.8rem;
+  }
+}
+
+.headerDetails {
+  @include flex-align(flex-start, flex-start);
+  gap: 0.8rem;
+
+  > div {
+    border: none;
+    background: transparent;
+    margin: 0;
+    font-size: 1.4rem;
+    line-height: 2.2rem;
+    font-weight: 700;
+    justify-content: flex-start;
+    min-width: auto;
+
+    > span:last-child {
+      font-size: 1.2rem;
+      line-height: 2rem;
+      font-weight: 700;
+    }
+  }
+}
+
+.authorData {
+  position: relative;
+
+  > img {
+    border: var(--cards-image-border);
+    border-radius: 50%;
+  }
+
+  > span {
+    position: absolute;
+    width: 10px;
+    height: 20px;
+    bottom: -1.7px;
+    right: -1.7px;
+  }
+}
+
+.cardContentContainer {
+  padding: 1.6rem;
+  @include flex-direction(column);
+  @include flex-align(flex-start, space-between);
+  border: 1.5px dashed var(--color-55);
+  border-radius: 1.2rem;
+  background: var(--color-54);
+  margin: 0 1.6rem 0.8rem;
+  gap: 1.6rem;
+}
+
+.feedback {
+  @include flex-align(center, space-between);
+  padding: 0.8rem 1.6rem 1.2rem;
+  gap: 2.4rem;
+  border-top: 1.5px solid var(--color-52);
+
+  a {
+    font-weight: 700;
+    font-size: 1.2rem;
+    line-height: 1.8rem;
+    text-align: right;
+    text-decoration-line: underline;
+    color: var(--color-53);
+    margin: 0;
+    width: auto;
+  }
+}
+
+.feedbackCounter {
+  @include flex-align(center, space-between);
+  gap: 1.6rem;
+}
+
+.likes,
+.dislikes {
+  @include flex-align(center, space-between);
+  gap: 0.4rem;
+  font-weight: 700;
+  font-size: 1.2rem;
+  line-height: 2rem;
+  color: var(--color-57);
+}
+
+.storybook {
+  .operatorCard {
+    max-width: 34.3rem;
+    margin: 0 auto,
+  }
+
+  .cardContent {
+    li p { 
+      @include min(laptop) {
+        > div,
+        > div > span:last-child {
+          font-weight: 700;
+          font-size: inherit;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}

package/src/components/atoms/cards/operator-card/template-four/template-four.stories.js

@@ -0,0 +1,87 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
+import verifyIcon from '../../../../../../storybook-images/verify.svg';
+import TemplateFour from '.';
+import styles from './template-four.module.scss';
+
+const operatorData = getSampleOperatorCards();
+
+export default {
+  title: 'Matrix-Theme/Modules/Cards/Operator/Template Four',
+  component: TemplateFour,
+  argTypes: {
+    item: {
+      name: 'item',
+      type: { name: 'object', required: true },
+      defaultValue: operatorData.items[0],
+      description: 'item',
+    },
+    verifyIcon: {
+      name: 'verifyIcon',
+      type: { name: 'string', required: false },
+      defaultValue: verifyIcon,
+      description: 'verify icon',
+    },
+    page: {
+      name: 'page',
+      type: { name: 'object', required: false },
+      defaultValue: { template: 'operator_review', true_votes: 134, false_votes: 20 },
+      description: 'page template',
+    },
+    useOneStarRating: {
+      name: 'useOneStarRating',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'useOneStarRating',
+    },
+    showHalfStars: {
+      name: 'showHalfStars',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'show Half Stars? Will only work if useOneStarRating is set to false',
+    },
+    showBonusAsLink: {
+      name: 'showBonusAsLink',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'show Bonus as a Link?',
+    },
+    showAuthor: {
+      name: 'showAuthor',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'show author?',
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A Default Footer Component - Template One',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => (
+  <div className={styles.storybook}>
+    <TemplateFour {...args} />
+  </div>
+);
+export const Default = Template.bind({});
+Default.args = {};