gatsby-core-theme 18.0.9 → 18.0.11

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [18.0.11](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.10...v18.0.11) (2023-02-14)
+
+
+### Bug Fixes
+
+* cta replace ([f66776c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/f66776c673fb08e468e050825f6ce2663de6aa55))
+* cta storybook ([5af20c4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5af20c4c48fc03c7d8e05437482747065c4893b2))
+* operator button ([5ced63a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5ced63a4c89bff7b5ecd10eaf83297e2eb0f4d92))
+* operator cta ([c1024f8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c1024f8fba1153abfaeba8d8fcd7d07ce8832a24))
+* operator cta ([5701788](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5701788ab8b644920d848d7000e40dd1d6b0503d))
+* operator cta ([ebaa006](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ebaa006e4a2a055b70cee10f0a5a4e8f17e8225d))
+* operator cta two ([551e42c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/551e42ca4ad2bf1fff06d94c8f4ea3e20babc667))
+* storybook ([4931cd3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4931cd3d291c4cd0254b8cd50308dd14aadd5284))
+* style and test ([62bc6a6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/62bc6a6cac74dfc14121d8441490bdc49e2d00aa))
+* typo ([976e665](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/976e6654cbdde92d0d6912d1860c619bc9e80cf2))
+
+
+### Code Refactoring
+
+* move sticky on scroll handler in use effect ([21c91c5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/21c91c5bb2e59dc674ff2a7647c45e671b65eba5))
+
+
+* Merge branch 'tm-3294-operator-cta' into 'master' ([daa438d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/daa438da27ac641ee5ac7f021e82c08c28b2ccc5))
+
+## [18.0.10](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.9...v18.0.10) (2023-02-07)
+
+
+### Code Refactoring
+
+* update general scroll hook ([8527035](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/852703570a5cae67fde1bb24fc7dd76906000580))
+* update general scroll hook debounceTime ([18fe029](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/18fe029b590e434642611ea5e5392f7ef42daaaa))
+
+
+* Merge branch 'tm-3097-update-general-scroll-hook' into 'master' ([fd1ad08](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fd1ad0860b9543667caeda6963b3f33f8085e296))
+
 ## [18.0.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v18.0.8...v18.0.9) (2023-02-06)
 
 

package/package.json

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

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

@@ -0,0 +1,70 @@
+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.module.scss

@@ -0,0 +1,143 @@
+@mixin buttonsColor($color1, $color2, $color3, $textColor: 'white') {
+    display: inline-flex;
+    width: fit-content;
+    align-items: center;
+    justify-content: center;
+    background-color: $color1;
+    color: $textColor;
+
+    &:hover {
+        background-color: $color2;
+        color: $textColor;
+    }
+
+    &:active {
+        background-color: $color3;
+        color: $textColor;
+    }
+}
+
+.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));
+
+    &.not_recommended,
+    &.coming_soon,
+    &.inactive {
+        background-color: #BBB5DD;
+        color: #776ABA;
+    }
+}
+
+.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));
+
+    &.not_recommended,
+    &.coming_soon,
+    &.inactive {
+        background-color: #6B6A72;
+        color: #3E3C47;
+    }
+}
+
+.tertiary {
+    border-width: 1.5px;
+    border-style: solid;
+    border-color: #1C1A28;
+    padding: 2.4rem 3.2rem;
+    background-color: white;
+    color: #1C1A28;
+
+    &:hover {
+        background-color: #1C1A28;
+        color: white;
+        border-color: #1C1A28;
+    }
+
+    &:active {
+        background-color: #33313D;
+        color: white;
+        border-color: #33313D;
+    }
+
+    &.not_recommended,
+    &.coming_soon,
+    &.inactive {
+        border-color: #9C9AB0;
+        color: #9C9AB0;
+    }
+}
+
+.xs_size {
+    padding: .4rem .8rem;
+    border-radius: 4px;
+    font-weight: 700;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    border-width: 1.5px;
+
+    >svg {
+        height: 0.8rem;
+        width: 0.8rem;
+        margin-left: .4rem;
+    }
+}
+
+.s_size {
+    padding: 1.1rem 1.6rem;
+    border-radius: 8px;
+    font-weight: 700;
+    font-size: 1.4rem;
+    line-height: 1.8rem;
+    border-width: 1.5px;
+
+    >svg {
+        height: 1.2rem;
+        width: 1.2rem;
+        margin-left: 1rem;
+    }
+}
+
+.m_size {
+    font-weight: 700;
+    border-radius: 1.2rem;
+    padding: 2.1rem 2.4rem;
+    font-size: 1.8rem;
+    line-height: 2rem;
+    border-width: 2px;
+
+    >svg {
+        height: 1.4rem;
+        width: 1.4rem;
+        margin-left: 11px;
+    }
+}
+
+.l_size {
+    border-radius: 1.6rem;
+    padding: 2.5rem 2.4rem;
+    font-weight: 700;
+    font-size: 2.4rem;
+    line-height: 3rem;
+    border-width: 2.5px;
+
+    >svg {
+        height: 1.6rem;
+        width: 1.6rem;
+        margin-left: 1.6rem;
+    }
+}
+
+.xl_size {
+    padding: 2.4rem 3.2rem;
+    font-weight: 700;
+    font-size: 3.2rem;
+    line-height: 4rem;
+    border-radius: 1.6rem;
+    border-width: 3px;
+
+    >svg {
+        height: 2rem;
+        width: 2rem;
+        margin-left: 1.8rem;
+    }
+}

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

@@ -0,0 +1,100 @@
+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 { IoMdArrowRoundForward } from '@react-icons/all-files/io/IoMdArrowRoundForward';
+
+import OperatorCtaTwo from '.';
+
+export default {
+  title: 'Gatsby-Theme/Atoms/Operator CTA Two',
+  component: OperatorCtaTwo,
+  argTypes: {
+    operator: {
+      name: 'operator',
+      type: { name: 'object', required: true },
+      defaultValue: {
+        status: 'active',
+        links: {
+          main: 'https://icepromo.info/l/6231e62994b436028e219a05',
+          operator_review: 'https://icepromo.info/l/6231e62994b436028e219a05',
+        },
+      },
+      description: 'The operator data object.',
+    },
+    pageTemplate: {
+      name: 'PageTemplate',
+      type: { name: 'string' },
+      defaultValue: 'operator_review',
+      description: 'Page Template',
+    },
+    gtmClass: {
+      name: 'gtmClass',
+      type: { name: 'string' },
+      defaultValue: '',
+      description: 'Gtm class',
+    },
+    buttonType: {
+      name: 'buttonType',
+      options: ['primary', 'secondary', 'tertiary'],
+      control: { type: 'radio' },
+    },
+    buttonSize: {
+      name: 'buttonType',
+      options: ['xs', 's', 'm', 'l', 'xl'],
+      control: { type: 'radio' },
+    },
+    tracker: {
+      name: 'tracker',
+      type: { name: 'string' },
+      defaultValue: 'main',
+      description: 'Tracker',
+    },
+    disable: {
+      name: 'disable',
+      type: { name: 'string' },
+      defaultValue: '',
+      description: 'disable button style',
+    },
+    icon: {
+      name: 'Icon',
+      defaultValue: <IoMdArrowRoundForward />,
+    },
+    translationsObj: {
+      name: 'translationsObj',
+      type: { name: 'object' },
+      defaultValue: {
+        active: 'Visit',
+        not_recommended: 'Not Recommended',
+        coming_soon: 'Soon Available',
+        inactive: 'Not Accepting New Players',
+        blacklisted: 'Blacklisted',
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component that accepts the operator data and returns a CTA button.',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <OperatorCtaTwo {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/atoms/operator-cta-two/operator-cta-two.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 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();
+});

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

@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useRef, useContext } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
 
 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-two';
 import StarRating from '~molecules/star-rating';
 import Tnc from '~molecules/tnc';
 import { Context } from '~context/MainProvider';

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-two';
 import { prettyTracker, imagePrettyUrl, getAltText } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 

package/src/hooks/stickyOnScroll/index.js

@@ -3,25 +3,28 @@
 import { useEffect, useState } from 'react';
 import { debounce } from '~helpers/scroll';
 
-export default function StickyOnScroll(stickyOffset = 0, callback, elementRef) {
+export default function StickyOnScroll(stickyOffset = 0, callback, elementRef, debounceTime = 50) {
   const [sticky, setSticky] = useState(false);
 
-  const handler = debounce(() => {
-    if (typeof window !== 'undefined' && typeof stickyOffset === 'number') {
-      const offset =
-        elementRef?.current?.getBoundingClientRect()?.top + window.pageYOffset || 0 + stickyOffset;
-      const isSticky = window.pageYOffset > offset;
-      sticky !== isSticky && setSticky(isSticky);
-      callback && callback(isSticky);
-    }
-  }, 200);
-
   useEffect(() => {
+    const handler = debounce(() => {
+      if (typeof window !== 'undefined' && typeof stickyOffset === 'number') {
+        const offset =
+          elementRef?.current?.getBoundingClientRect()?.top + window.pageYOffset ||
+          0 + stickyOffset;
+        const isSticky = window.pageYOffset > offset;
+        setSticky(isSticky);
+        callback?.(isSticky);
+      }
+    }, debounceTime);
+
+    handler();
+
     window.addEventListener('scroll', handler);
     return () => {
       window.removeEventListener('scroll', handler);
     };
-  }, [sticky, stickyOffset]);
+  }, []);
 
   return sticky;
 }