gatsby-matrix-theme 28.0.18 → 29.0.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [29.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v28.0.18...v29.0.0) (2023-08-17)
+
+
+### Bug Fixes
+
+* added section styles for footer component ([830e1e5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/830e1e55d21d68c8d8fec0d6a6f2756b8aa09ff8))
+* added section styles for footer component ([86e5031](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/86e5031fb636b26d903f5f57eb630e4413c1e8b6))
+* cleanup ratings components ([a192fa3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a192fa3d435488bb22559454389452d03d3a6f62))
+* convert title to span ([56a9d08](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/56a9d08ec3650862651e6c9ec71688ec403bb053))
+* get data from market if we dont have on site tab ([6ed5df1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6ed5df1817676bf84dd16021b3b127da3a57c626))
+
+
+### Code Refactoring
+
+* avoid displaying component if contents are empty ([9adfb6d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9adfb6d54d8d79b3b258415521078a946356da36))
+* change to fields when not available ([643b299](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/643b299d7a9cba6ff5160fd6b3a32f0c349d3a0d))
+* changes to email in case its not available on sites ([9b61e29](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9b61e295c749de9764e9071a0670d48c3c31ee76))
+* changes to site contacts ([7cb7add](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7cb7add6bb76120b11c0f441a6da7d1c79d2bc70))
+* minor css change for email container ([1ba39d3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1ba39d32ae3517c4d7b7890834519c77f4c2bf00))
+* move template block to correct position on storybook ([ec6e58a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ec6e58a560fb42b9036cd591249adbcd85849bf0))
+* new contact us ([f1e68d9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f1e68d9b2612cdb62ebd0c508955c9611e50aa55))
+* remove contact us page and fix tests for contact form ([c19081d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c19081df61ed5a4ed1c8a8c43f75bf20a43edc4c))
+
+
+### Config
+
+* update to latest core theme and use new form and contact us page ([3d7b793](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3d7b7935d323e27c7a7076d95ae4164c5e8e3868))
+
+
+* Merge branch 'tm-3420-section-styles' into 'master' ([25bc6e8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/25bc6e87eb178b00d7cfe5584477104b54803d59))
+* Merge branch 'tm-3634-ratings' into 'master' ([4b1ce5d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4b1ce5d144d7a51b5bcf4e1beb3d51d141830871))
+* Merge branch 'tm-3556-contact-us-page' into 'master' ([b21f17d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b21f17d989f3d88b6bb26580474a1c3461a9b197))
+* Merge branch 'master' into tm-3556-contact-us-page ([19c404c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/19c404ce9e03eeecc7bb394780e25cc62d024ed3))
+* Merge branch 'tm-3599-as-seen-on-title' into 'master' ([6d1b942](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6d1b9421ba6ef6a12dcfc8fe841719d25e7760bd))
+
 ## [28.0.18](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v28.0.17...v28.0.18) (2023-08-15)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "28.0.18",
+  "version": "29.0.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "25.0.14",
+    "gatsby-core-theme": "26.0.0",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

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

@@ -17,7 +17,7 @@ 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 Rating from '../../../ratings';
 import styles from './template-four.module.scss';
 
 const TemplateFour = ({

package/src/components/atoms/footer/as-seen-on/as-seen-on.module.scss

@@ -12,7 +12,7 @@
     padding: 48px 0px;
   }
 
-  > h5,
+  > span,
   > ul {
     @include min(tablet) {
       margin: 0 auto;
@@ -20,8 +20,10 @@
     }
   }
 
-  > h5 {
+  > span {
+    font-size: var(--h5-size);
     margin-top: 0;
+    font-weight: 700;
     margin-bottom: 0;
     color: var(--footer-asSeenOn-text-color, var(--color-49));
   }
@@ -63,7 +65,7 @@
   @include flex-align(flex-start, flex-start);
   padding: 0;
 
-  > h5,
+  > span,
   > ul {
     margin: 0;
   }

package/src/components/atoms/footer/as-seen-on/index.js

@@ -9,7 +9,7 @@ const AsSeenOn = ({ asSeenOn, template }) => (
       template && styles[template] ? styles[template] || '' : ''
     }`}
   >
-    <h5>As Seen On:</h5>
+    <span>As Seen On:</span>
     <LinkList
       showListTitle={false}
       imageOnly

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

@@ -1,54 +1,94 @@
+/* eslint-disable camelcase */
+/* eslint-disable no-nested-ternary */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-
-import { FaStar } from '@react-icons/all-files/fa/FaStar';
-import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
+import { translate, getObjectValue } from 'gatsby-core-theme/src/helpers/getters';
+import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import operatorRatings from '../../../constants/ratings-constant';
+
 import styles from './ratings.module.scss';
 
-const Ratings = ({ averageRating, ratings, relation }) => {
+export default function Ratings({ item, type, numOfStars = 5, currency = '€' }) {
   const { translations } = useContext(Context) || {};
-  const votalityValue = relation?.volatility ? relation?.volatility : 0;
-  const rangeText = { 0: 'Low', 1: 'Medium', 2: 'High' }[votalityValue] || '0%';
+
+  const ratings = operatorRatings[type] || [];
+  const rangeText = { 0: 'Low', 1: 'Medium', 2: 'High' };
+
+  // (item?.bonus || item) for the games we don't have ratings in market
+  const ratingsData = operatorRatings.ratingProperties.some((prop) => item[prop])
+    ? item
+    : item?.bonus || item;
+
+  if (!ratings.length) {
+    return null;
+  }
 
   return (
-    <ul className={styles?.ratings || ''}>
-      <li key="Overall">
-        <p>{translate(translations, 'overall', 'Overall')}</p>
-        <div>
-          <FaStar />
-          <p data-testid="overall-rating">{averageRating}/</p>
-          <p>5</p>
-        </div>
-      </li>
-      {ratings?.map((rating) => (
-        <li key={rating[rating?.field_name]}>
-          <p>{rating?.field_label}</p>
-          {rating?.field_name === 'rtp' ? (
-            <p>{relation[rating?.field_name]}%</p>
-          ) : (
-            <div>
-              <FaStar />
-              <p>{relation[rating?.field_name]}/</p>
-              <p>5</p>
-            </div>
-          )}
-        </li>
-      ))}
-      <li>
-        <p>{translate(translations, 'volatility', 'Volatility')}</p>
-        <div className={styles?.bar || ''}>{rangeText}</div>
-      </li>
+    <ul className={`${styles?.ratingList || ''}`}>
+      {ratings?.map((rating) => {
+        const { fieldValue, translationKey, fieldLabel, componentToUse } = rating || {};
+        let valueDiplayed;
+        const value = getObjectValue(ratingsData, fieldValue);
+        const component = componentToUse ? componentToUse(numOfStars, value, currency) : false;
+
+        if (component && value) {
+          valueDiplayed = component || '-';
+        } else if (fieldValue.includes('volatility')) {
+          valueDiplayed = rangeText[getObjectValue(ratingsData, fieldValue)] || '-';
+        } else {
+          valueDiplayed = value || '-';
+        }
+
+        if (['coming_soon', 'inactive'].includes(item?.status)) {
+          valueDiplayed = 'TBA';
+        }
+
+        return (
+          <li
+            key={keygen()}
+            className={`${styles?.item || ''} ${
+              rating?.showOnlyMobile ? styles?.showOnlyMobile || '' : ''
+            }`}
+          >
+            <p className={styles?.label || ''}>
+              {translate(translations, translationKey, fieldLabel)}
+            </p>
+
+            {valueDiplayed === 'TBA' ? (
+              <p className={`${styles?.value || ''} ${styles?.tbaValue}`}>
+                {translate(translations, 'tba', 'TBA')}
+              </p>
+            ) : (
+              <>
+                {valueDiplayed}
+                {fieldValue === 'rtp' && '%'}
+              </>
+            )}
+          </li>
+        );
+      })}
     </ul>
   );
-};
+}
 
 Ratings.propTypes = {
-  averageRating: PropTypes.string,
-  // eslint-disable-next-line react/forbid-prop-types
-  ratings: PropTypes.array,
-  relation: PropTypes.shape({
-    volatility: PropTypes.string,
+  item: PropTypes.shape({
+    name: PropTypes.string,
+    bonus: PropTypes.shape({}),
+    rating: PropTypes.string,
+    status: PropTypes.string,
+    rating_bonuses: PropTypes.string,
+    rating_casino: PropTypes.string,
+    rating_customer: PropTypes.string,
+    rating_games: PropTypes.string,
+    rating_payout: PropTypes.string,
+    first_rating: PropTypes.string,
+    second_rating: PropTypes.string,
+    third_rating: PropTypes.string,
+    fourth_rating: PropTypes.string,
   }),
+  type: PropTypes.string,
+  numOfStars: PropTypes.string,
+  currency: PropTypes.string,
 };
-export default Ratings;

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

@@ -1,67 +1,116 @@
-.ratings {
-  display: flex;
-  margin: 0rem;
-  height: 100%;
-  gap: 0.8rem;
+.ratingList {
+  @include flex-direction(row);
   overflow-x: scroll;
+  gap: 0.8rem;
+
+  &::-webkit-scrollbar {
+    width: 3px;
+    height: 3px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 100px;
+    background: #929292;
+  }
+
   @include min(tablet) {
+    display: flex;
+    flex-wrap: nowrap;
     overflow: hidden;
-    gap: 1.6rem;
-    > :first-child {
-      display: none;
-    }
   }
-  > li,
-  > div {
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  font-weight: 700;
+  font-size: 1.4rem;
+  background-color: #fbfbfb;
+  border: 1px solid #e9e9e9;
+  border-radius: 8px;
+  padding: 16px 8px;
+  min-height: 9.6rem;
+  min-width: 10.4rem;
+
+  @include min(tablet) {
     margin-bottom: inherit;
-    width: 100%;
-    background: #fbfbfb;
-    padding: 16px 8px;
-    min-width: 10.4rem;
-    height: 9.6rem;
-    box-shadow: 4px 4px 30px rgb(0 0 0 / 3%);
-    font-weight: bold;
-    font-size: 1.4rem;
-    border-radius: 8px;
-    border: 1px solid #e9e9e9;
-    @include flex-direction(column);
-    @include flex-align(center, space-evenly);
-    color: #1c1a28;
-    > p {
+    width: -webkit-fill-available;
+  }
+
+  // Star rating
+  >div {
+    display: inline-flex;
+    align-items: center;
+    font-weight: 800;
+    font-size: 18px;
+    line-height: 28px;
+    border: none;
+    background-color: #fbfbfb;
+
+    >svg {
+      width: 18.35px;
+      height: 17.49px;
+      color: var(--rating-star-color, #ffdb20);
+      margin-right: 5.82px;
+    }
+
+    >span:last-child {
+      font-size: 16px;
+      line-height: 27px;
       font-weight: 700;
-      font-size: 1.2rem;
-      line-height: 2rem;
-      color: #1c1a28;
+
       @include min(tablet) {
-        font-size: 14px;
-        line-height: 22px;
-      }
-    }
-    > div {
-      display: flex;
-      align-items: center;
-      > svg {
-        color: #ffdb20;
-        height: 1.8rem;
-        width: 1.8rem;
-        margin-right: 6px;
-      }
-      > p {
-        color: #1c1a28;
         font-weight: 800;
         font-size: 18px;
         line-height: 28px;
       }
-      @include max(mobile) {
-        > :last-child {
-          font-size: 1.6rem;
-          line-height: 2.7rem;
-          margin-top: 1px;
-        }
-      }
-    }
-    @include min(tablet) {
-      height: 11.2rem;
     }
   }
 }
+
+.label {
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 20px;
+  color: #1c1a28;
+  padding-bottom: 0.8rem;
+  text-align: center;
+
+  @include min(tablet) {
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.value {
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 28px;
+  color: #1c1a28;
+  display: flex;
+
+  >svg {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  @include min(tablet) {
+    font-weight: 800;
+  }
+}
+
+.tbaValue {
+  color: #33313d;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.showOnlyMobile {
+  @include min(tablet) {
+    display: none;
+  }
+}

package/src/components/atoms/site-contacts/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import styles from './site-contacts.module.scss';
+
+const SiteContacts = ({ page }) => {
+  const { siteSchema } = page || {};
+  const email = siteSchema?.email || null;
+
+  if (!email) return;
+
+  return (
+    <div className={styles.siteContacts}>
+      <ul className={styles?.generalContacts || ''}>
+        {email?.map((item) => (
+          <li key={keygen()}>
+            <p>{item.contact_type}</p>
+            <a href={`mailto:${item.email}`}>{item.email}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default SiteContacts;
+
+SiteContacts.propTypes = {
+  page: PropTypes.shape({
+    siteSchema: PropTypes.shape({}),
+  }).isRequired,
+};

package/src/components/atoms/site-contacts/site-contacts.module.scss

@@ -0,0 +1,29 @@
+.generalContacts {
+  @include flex-direction(column);
+  gap: 1.6rem;
+  
+  @include min(tablet) {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  li {
+    border-radius: 0.8rem;
+    flex-grow: 1;
+    padding: 2.4rem;
+    background-color: white;
+    box-shadow: 0 4px 16px rgba(8,32,46,.1);
+    
+    > p {
+      color: var(--color-3);
+      font-size: 1.6rem;
+      font-weight: 400;
+    }
+
+    > a {
+      font-size: 1.4rem;
+      font-weight: 700;
+      text-decoration: underline;
+    }
+  }
+}

package/src/components/atoms/site-contacts/site-contacts.stories.js

@@ -0,0 +1,57 @@
+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 { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+import ContactForm from '.';
+
+const page = {};
+siteSchema.email = [
+  { email: 'sales@irishluck.ie', contact_type: 'Sales Team' },
+  { email: 'support@irishluck.ie', contact_type: 'Support Team' },
+  { email: 'contact@irishluck.ie', contact_type: ' General Info' },
+];
+page.siteSchema = { ...siteSchema };
+
+export default {
+  title: 'Theme/Modules/Template Blocks/Site Contacts',
+  component: ContactForm,
+  argTypes: {
+    page: {
+      name: 'page',
+      type: { name: 'object', required: true },
+      defaultValue: '',
+      description: 'page object. Get emails list from site schema',
+      siteSchema: {
+        type: { summary: 'object' },
+        defaultValue: { summary: '' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that displays authors cards',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <ContactForm {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  page,
+};

package/src/components/atoms/site-contacts/site-contacts.test.js

@@ -0,0 +1,43 @@
+/* eslint-disable camelcase */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { siteSchema } from 'gatsby-core-theme/tests/factories/modules/site-schema.factory';
+import SiteContacts from '.';
+
+const page = {};
+
+beforeEach(() => {
+  siteSchema.email = [
+    { email: 'sales@irishluck.ie', contact_type: 'Sales Team' },
+    { email: 'support@irishluck.ie', contact_type: 'Support Team' },
+    { email: 'contact@irishluck.ie', contact_type: ' General Info' },
+  ];
+  page.siteSchema = { ...siteSchema };
+});
+describe('Site Contacts Component', () => {
+  test('render site contacts', () => {
+    const { container } = render(<SiteContacts page={page} />);
+    const { email } = siteSchema;
+
+    expect(container).toBeTruthy();
+    expect(container.querySelector('.generalContacts')).toBeTruthy();
+    expect(container.querySelectorAll('.generalContacts li')).toHaveLength(email.length);
+    expect(container.querySelector('.generalContacts li p')).toHaveTextContent(
+      email[0].contact_type
+    );
+    expect(container.querySelectorAll('.generalContacts li p')[1]).toHaveTextContent(
+      email[1].contact_type
+    );
+    expect(container.querySelectorAll('.generalContacts li a')[2]).toHaveAttribute(
+      'href',
+      `mailto:${email[2].email}`
+    );
+    expect(container.querySelectorAll('.generalContacts li a')[0]).toHaveTextContent(
+      email[0].email
+    );
+  });
+});
+afterEach(() => {
+  cleanup();
+});

package/src/components/atoms/social-icons/social-icons.module.scss

@@ -1,33 +1,38 @@
 .container {
   width: 100%;
   @include flex-direction(column);
-  .title{
-    padding-bottom: 1.6rem;
-      font-weight: 600;
-      font-size: 1.6rem;
-      line-height: 2.4rem;    
-      color: var(--color-33);
-      @include min(tablet){
-        font-weight: bold;
-        font-size: 3.6rem;
-        line-height: 4.6rem;
-    }
+}
+
+.title{
+  padding-bottom: 1.6rem;
+  font-weight: 600;
+  font-size: 2.4rem;
+  line-height: 3.2rem;
+  color: #1b1b1c;
+  
+  @include min(tablet){
+    font-weight: bold;
+    font-size: 3.2rem;
+    line-height: 4rem;
   }
-  .socialIcons{
-    display: inline-flex;
-    a {
-      display: inline-block;
-      width: 4rem;
-      height: 4rem;
-      line-height: 4.7rem;
-      border-radius: 50%;
-      background: var(--color-52);
-      margin: 0 1.6rem 0 0;
-      text-align: center;
-      font-size: 2rem;
-      svg{
-          color: #000;
-      }
+}
+
+.socialIcons{
+  display: inline-flex;
+
+  a {
+    display: inline-block;
+    width: 4rem;
+    height: 4rem;
+    line-height: 4.7rem;
+    border-radius: 50%;
+    background: var(--color-52);
+    margin: 0 1.6rem 0 0;
+    text-align: center;
+    font-size: 2rem;
+
+    svg{
+        color: #000;
     }
   }
-}
+}

package/src/components/molecules/header/variants/operator/template-four/index.js

@@ -10,7 +10,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
-import Rating from '../../../../../atoms/rating';
+import Rating from '../../../../../atoms/ratings';
 import OperatorBanner from '../../../../../atoms/header-operator-bannner';
 import styles from './template-four.module.scss';
 

package/src/components/molecules/header/variants/operator/template-one-two/index.js

@@ -10,7 +10,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating/one-star';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
-import Rating from '../../../../../atoms/rating';
+import Rating from '../../../../../atoms/ratings';
 import OperatorBanner from '../../../../../atoms/header-operator-bannner';
 
 import styles from './template-one-two.module.scss';

package/src/components/molecules/header/variants/operator/template-three/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { prettyTracker, imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
-import Rating from '../../../../../atoms/rating';
+import Rating from '../../../../../atoms/ratings';
 import OperatorBanner from '../../../../../atoms/header-operator-bannner';
 
 import styles from './template-three.module.scss';