gatsby-core-theme 18.0.13 → 18.0.15

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [18.0.15](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.14...v18.0.15) (2023-02-21)
+
+
+### Bug Fixes
+
+* added an incative type ([08bfa67](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/08bfa67e84a9d491ae1a425cf46d757fdb4d7830))
+* cta status ([0e70f42](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0e70f424be3b779fbfb980d610d3649737d0a420))
+* cta style ([dec87b7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/dec87b7be55f21f42c298f34b1b03cfeb588c061))
+* cta style ([e4d8dc1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e4d8dc15652ea98555dad3ed7fe8ac7bfb25ad65))
+* operator cta ([4b26527](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4b265276a0e7a9e2b6e362a650aca9aac38c1f44))
+
+
+* Merge branch 'tm-3297-operator-cta-core' into 'master' ([b53a207](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/b53a207147c177cd68d306ee1df5133d8c6528b6))
+
+## [18.0.14](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.13...v18.0.14) (2023-02-21)
+
+
+### Bug Fixes
+
+* sports data for operator type pages ([4c45f22](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4c45f22345481b7f48c4e6b72fbc0c7f967de363))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([58ef78c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/58ef78c0a0d40f9711fc6db294bc62071f4d7925))
+
 ## [18.0.13](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.12...v18.0.13) (2023-02-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "18.0.13",
+  "version": "18.0.15",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",

package/src/components/atoms/operator-cta-button/index.js

@@ -0,0 +1,88 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Context } from '~context/MainProvider';
+import { prettyTracker, translate } from '~helpers/getters';
+
+import styles from './operator-cta-button.module.scss';
+
+const OperatorCtaButton = ({
+  operator,
+  pageTemplate,
+  gtmClass = '',
+  buttonType = 'primary',
+  buttonSize = '',
+  tracker = 'main',
+  icon = null,
+  translationsObj = {
+    active: { translationKey: 'play_now', defaultValue: 'Visit' },
+    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' },
+  },
+}) => {
+  const { translations } = useContext(Context) || {};
+  const status = operator?.status || '';
+  const trackerType = tracker?.toLowerCase()?.replace(' ', '_');
+  const prettyLink = prettyTracker(operator, trackerType, false, pageTemplate);
+
+  const translateBtn =
+    status && translationsObj[status]
+      ? translate(
+          translations,
+          translationsObj[status]?.translationKey,
+          translationsObj[status]?.defaultValue || ''
+        )
+      : '';
+
+  const classes = `${styles[buttonType]} ${status && styles[status] ? styles[status] : ''} ${
+    buttonSize ? styles[`${buttonSize}_size`] : ''
+  } `;
+
+  return (
+    <a
+      {...(status === 'active' ? { href: prettyLink } : {})}
+      title={typeof translateBtn === 'string' ? translateBtn : ''}
+      aria-label={typeof translateBtn === 'string' ? translateBtn : ''}
+      className={`${classes} ${gtmClass}`}
+      {...(status === 'active' ? { target: '_blank' } : {})}
+      {...(status === 'active' ? { rel: 'nofollow noreferrer' } : {})}
+    >
+      {translateBtn}
+      {icon && icon}
+    </a>
+  );
+};
+
+OperatorCtaButton.propTypes = {
+  operator: PropTypes.shape({
+    name: PropTypes.string,
+    status: PropTypes.string,
+  }),
+  gtmClass: PropTypes.string,
+  pageTemplate: PropTypes.string,
+  buttonSize: PropTypes.string,
+  buttonType: PropTypes.string,
+  tracker: PropTypes.string,
+  translationsObj: PropTypes.shape({
+    active: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+    not_recommended: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+    coming_soon: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+    inactive: PropTypes.shape({
+      translationKey: PropTypes.string,
+      defaultValue: PropTypes.string,
+    }),
+  }),
+  icon: PropTypes.node,
+};
+
+export default OperatorCtaButton;

package/src/components/atoms/{operator-cta-two/operator-cta-two.module.scss → operator-cta-button/operator-cta-button.module.scss}

@@ -1,10 +1,19 @@
 @mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {
     display: inline-flex;
-    width: fit-content;
     align-items: center;
     justify-content: center;
+    text-align: center;
     background-color: $color1;
     color: $textColor;
+    padding: 0.9rem 3rem;
+    font-weight: 700;
+    font-size: 1.8rem;
+    border-radius: var(--border-radius);
+
+    >svg {
+        flex: none;
+        margin-left: .8rem;
+    }
 
     &:hover {
         background-color: $color2;
@@ -19,10 +28,12 @@
 
 .primary {
     @include buttonsColor(var(--primary-button-color, #5545A9), var(--primary-button-color-hover, #776ABA), var(--primary-button-color-active, #998FCB), var(--primary-button-color-text, #FFFFFF));
+    white-space: nowrap;
 
     &.not_recommended,
     &.coming_soon,
     &.inactive {
+        white-space: normal;
         background-color: #BBB5DD;
         color: #776ABA;
     }
@@ -30,10 +41,12 @@
 
 .secondary {
     @include buttonsColor(var(--secondary-button-color, #1C1A28), var(--secondary-button-color-hover, #33313D), var(--secondary-button-color-active, #3E3C47), var(--secondary-button-color-text, #FFFFFF));
+    white-space: nowrap;
 
     &.not_recommended,
     &.coming_soon,
     &.inactive {
+        white-space: normal;
         background-color: #6B6A72;
         color: #3E3C47;
     }
@@ -46,6 +59,7 @@
     padding: 2.4rem 3.2rem;
     background-color: white;
     color: #1C1A28;
+    white-space: nowrap;
 
     &:hover {
         background-color: #1C1A28;
@@ -62,11 +76,18 @@
     &.not_recommended,
     &.coming_soon,
     &.inactive {
+        white-space: normal;
         border-color: #9C9AB0;
         color: #9C9AB0;
     }
 }
 
+.not_recommended,
+.coming_soon,
+.inactive{
+    padding: 1rem;
+} 
+
 .xs_size {
     padding: .4rem .8rem;
     border-radius: 4px;
@@ -76,6 +97,7 @@
     border-width: 1.5px;
 
     >svg {
+        flex: none;
         height: 0.8rem;
         width: 0.8rem;
         margin-left: .4rem;
@@ -91,6 +113,7 @@
     border-width: 1.5px;
 
     >svg {
+        flex: none;
         height: 1.2rem;
         width: 1.2rem;
         margin-left: 1rem;
@@ -106,6 +129,7 @@
     border-width: 2px;
 
     >svg {
+        flex: none;
         height: 1.4rem;
         width: 1.4rem;
         margin-left: 11px;
@@ -121,6 +145,7 @@
     border-width: 2.5px;
 
     >svg {
+        flex: none;
         height: 1.6rem;
         width: 1.6rem;
         margin-left: 1.6rem;
@@ -136,6 +161,7 @@
     border-width: 3px;
 
     >svg {
+        flex: none;
         height: 2rem;
         width: 2rem;
         margin-left: 1.8rem;

package/src/components/atoms/{operator-cta-two/operator-cta-two.stories.js → operator-cta-button/operator-cta-button.stories.js}

@@ -9,11 +9,11 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { IoMdArrowRoundForward } from '@react-icons/all-files/io/IoMdArrowRoundForward';
 
-import OperatorCtaTwo from '.';
+import OperatorCtaButton from '.';
 
 export default {
-  title: 'Gatsby-Theme/Atoms/Operator CTA Two',
-  component: OperatorCtaTwo,
+  title: 'Gatsby-Theme/Atoms/Operator CTA Button',
+  component: OperatorCtaButton,
   argTypes: {
     operator: {
       name: 'operator',
@@ -46,7 +46,7 @@ export default {
     },
     buttonSize: {
       name: 'buttonType',
-      options: ['xs', 's', 'm', 'l', 'xl'],
+      options: ['xs', 's', 'm', 'l', 'xl', 'noSize'],
       control: { type: 'radio' },
     },
     tracker: {
@@ -69,11 +69,11 @@ export default {
       name: 'translationsObj',
       type: { name: 'object' },
       defaultValue: {
-        active: 'Visit',
-        not_recommended: 'Not Recommended',
-        coming_soon: 'Soon Available',
-        inactive: 'Not Accepting New Players',
-        blacklisted: 'Blacklisted',
+        active: { translationKey: 'play_now', defaultValue: 'Visit' },
+        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' },
       },
     },
   },
@@ -94,7 +94,7 @@ export default {
   },
 };
 
-const Template = (args) => <OperatorCtaTwo {...args} />;
+const Template = (args) => <OperatorCtaButton {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {};

package/src/components/atoms/operator-cta-button/operator-cta-button.test.js

@@ -0,0 +1,50 @@
+/* eslint-disable no-lone-blocks */
+/* eslint-disable no-unused-expressions */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import OperatorCtaButton from '.';
+
+const data = (activeStatus = 'active') => ({
+  operator: {
+    status: activeStatus,
+  },
+  pageTemplate: 'default',
+  buttonType: 'primary',
+  buttonSize: 'm',
+  tracker: 'main',
+  translationsObj: {
+    active: { translationKey: 'play_now', defaultValue: 'Visit' },
+    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' },
+  },
+});
+
+describe('OperatorCtaButton Component', () => {
+  test('OperatorCtaButton with status active', () => {
+    const { getByText } = render(<OperatorCtaButton {...data()} />);
+    expect(getByText('Visit')).toBeTruthy();
+  });
+
+  test('OperatorCtaButton with status inactive', () => {
+    const { getByText } = render(<OperatorCtaButton {...data('inactive')} />);
+    expect(getByText('Not Accepting New Players')).toBeTruthy();
+  });
+
+  test('OperatorCtaButton with status not_recommended', () => {
+    const { getByText } = render(<OperatorCtaButton {...data('not_recommended')} />);
+    expect(getByText('Not Recommended')).toBeTruthy();
+  });
+
+  test('OperatorCtaButton with status coming_soon', () => {
+    const { getByText } = render(<OperatorCtaButton {...data('coming_soon')} />);
+    expect(getByText('Soon Available')).toBeTruthy();
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

package/src/components/molecules/operator-banner/index.js

@@ -5,7 +5,7 @@ import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 import isSticky from '~hooks/stickyOnScroll';
 import Bonus from '~atoms/bonus';
-import OperatorCta from '~atoms/operator-cta';
+import OperatorCta from '~atoms/operator-cta-button';
 import StarRating from '~molecules/star-rating';
 import Tnc from '~molecules/tnc';
 import { Context } from '~context/MainProvider';

package/src/components/molecules/operator-banner/operator-banner.module.scss

@@ -52,7 +52,7 @@
       text-align: center;
 
       @include min(tablet) {
-        grid-template-columns: 16rem 1fr 20rem;
+        grid-template-columns: 16rem 1fr 21rem;
       }
 
       > * {

package/src/components/molecules/toplist/default-row/index.js

@@ -6,7 +6,7 @@ import Bonus from '~atoms/bonus';
 import SellingPoints from '~atoms/selling-points';
 import StarRating from '~molecules/star-rating/one-star';
 import ReviewLink from '../../../atoms/review-link';
-import OperatorCta from '~atoms/operator-cta';
+import OperatorCta from '~atoms/operator-cta-button';
 import { prettyTracker, imagePrettyUrl, getAltText } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 

package/src/constants/settings.js

@@ -8,6 +8,7 @@ export default {
     'Irishluck.ie': ['cards', 'cards_v2'],
     'norskespilleautomater.com': ['cards', 'cards_v2'],
     'playcasino.co.za': ['cards', 'cards_v2'],
+    'sporttheme.com': ['cards', 'cards_v2'],
   },
   filter_cards_modules: {
     'irishluck.ie': ['inactive', 'blacklisted'],
@@ -15,6 +16,7 @@ export default {
     'playcasino.co.za': ['inactive', 'blacklisted'],
     'onlinegamblingsa.co.za': ['inactive', 'blacklisted'],
     'onlinegamblingsa.com': ['inactive', 'blacklisted'],
+    'sporttheme.com': ['inactive', 'blacklisted'],
   },
   keep_page_extra_fields: {
     operator: {

package/src/helpers/processor/index.js

@@ -311,7 +311,9 @@ export default {
           // add sports data
           if (rageSportType) {
             // should be able to check for site type here (type: sport)
-            page.relation = addSportsDataToPage(sportsData, page, themeType);
+            if (page.type !== 'operator') {
+              page.relation = addSportsDataToPage(sportsData, page, themeType);
+            }
 
             if (pageType === 'page' && page.relation.showcased_events) {
               const eventPages = Object.values(transformedPages[market].event);

package/src/components/atoms/operator-cta-two/index.js

@@ -1,70 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { Context } from '~context/MainProvider';
-import { prettyTracker, translate } from '~helpers/getters';
-
-import styles from './operator-cta-two.module.scss';
-
-const OperatorCtaTwo = ({
-  operator,
-  pageTemplate,
-  gtmClass = '',
-  buttonType = 'primary',
-  buttonSize = 'm',
-  tracker = 'main',
-  icon = null,
-  translationsObj = {
-    active: 'Visit',
-    not_recommended: 'Not Recommended',
-    coming_soon: 'Soon Available',
-    inactive: 'Not Accepting New Players',
-    blacklisted: 'Blacklisted',
-  },
-}) => {
-  const { translations } = useContext(Context) || {};
-  const status = operator?.status || '';
-  const trackerType = tracker?.toLowerCase()?.replace(' ', '_');
-  const prettyLink = prettyTracker(operator, trackerType, false, pageTemplate);
-  const textkey = `${status}_cta`;
-
-  const translateBtn = translate(translations, textkey, translationsObj[status] || '');
-
-  const classes = `${styles[buttonType]} ${styles[`${buttonSize}_size`]} ${styles[status]}`;
-
-  const inactive = ['coming_soon', 'inactive'].includes(status);
-
-  return (
-    <a
-      {...(!inactive ? { href: prettyLink } : {})}
-      title={typeof translateBtn === 'string' ? translateBtn : ''}
-      aria-label={typeof translateBtn === 'string' ? translateBtn : ''}
-      className={`${classes} ${gtmClass}`}
-      {...(!inactive ? { target: '_blank' } : {})}
-      {...(!inactive ? { rel: 'nofollow noreferrer' } : {})}
-    >
-      {translateBtn}
-      {icon && icon}
-    </a>
-  );
-};
-
-OperatorCtaTwo.propTypes = {
-  operator: PropTypes.shape({
-    name: PropTypes.string,
-    status: PropTypes.string,
-  }),
-  gtmClass: PropTypes.string,
-  pageTemplate: PropTypes.string,
-  buttonSize: PropTypes.string,
-  buttonType: PropTypes.string,
-  tracker: PropTypes.string,
-  translationsObj: PropTypes.shape({
-    active: PropTypes.string,
-    not_recommended: PropTypes.string,
-    coming_soon: PropTypes.string,
-    inactive: PropTypes.string,
-  }),
-  icon: PropTypes.node,
-};
-
-export default OperatorCtaTwo;

package/src/components/atoms/operator-cta-two/operator-cta-two.test.js

@@ -1,50 +0,0 @@
-/* eslint-disable no-lone-blocks */
-/* eslint-disable no-unused-expressions */
-import React from 'react';
-import { render, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import OperatorCtaTwo from '.';
-
-const data = (activeStatus = 'active') => ({
-  operator: {
-    status: activeStatus,
-  },
-  pageTemplate: 'default',
-  buttonType: 'primary',
-  buttonSize: 'm',
-  tracker: 'main',
-  translationsObj: {
-    active: 'Visit',
-    not_recommended: 'Not Recommended',
-    coming_soon: 'Soon Available',
-    inactive: 'Not Accepting New Players',
-    blacklisted: 'Blacklisted',
-  },
-});
-
-describe('OperatorCtaTwo Component', () => {
-  test('OperatorCtaTwo with status active', () => {
-    const { getByText } = render(<OperatorCtaTwo {...data()} />);
-    expect(getByText('Visit')).toBeTruthy();
-  });
-
-  test('OperatorCtaTwo with status inactive', () => {
-    const { getByText } = render(<OperatorCtaTwo {...data('inactive')} />);
-    expect(getByText('Not Accepting New Players')).toBeTruthy();
-  });
-
-  test('OperatorCtaTwo with status not_recommended', () => {
-    const { getByText } = render(<OperatorCtaTwo {...data('not_recommended')} />);
-    expect(getByText('Not Recommended')).toBeTruthy();
-  });
-
-  test('OperatorCtaTwo with status coming_soon', () => {
-    const { getByText } = render(<OperatorCtaTwo {...data('coming_soon')} />);
-    expect(getByText('Soon Available')).toBeTruthy();
-  });
-});
-
-afterEach(() => {
-  cleanup();
-});