gatsby-core-theme 30.0.16 → 30.0.18

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [30.0.18](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.17...v30.0.18) (2023-11-10)
+
+
+### Bug Fixes
+
+* refactor data for deposit method ([53b8e27](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/53b8e27a9a889095eaae78be5bd864416d0f84a8))
+
+
+* Merge branch 'refactor_deposit' into 'master' ([ec074cf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ec074cfd4f11c56152340933fcdcbbf5eef42734))
+
+## [30.0.17](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.16...v30.0.17) (2023-11-09)
+
+
+### Bug Fixes
+
+* buttons ([02b1f07](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/02b1f0747c73fb75692bfb4de5f54267ada509ff))
+* buttons and tests ([02647d7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/02647d7eaadfdf82f3b5e316610c74322d033d13))
+
+
+* Merge branch 'tm-3755-buttons' into 'master' ([9430439](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/943043902e6a1b11401e28688f87f6e09efd45fb))
+
 ## [30.0.16](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v30.0.15...v30.0.16) (2023-11-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "30.0.16",
+  "version": "30.0.18",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",

package/src/components/atoms/button/button.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Link from '~hooks/link';
+import styles from './button.module.scss';
+
+function Button({
+  to = null,
+  btnText = 'Play now',
+  targetBlank = false,
+  buttonType = 'primary',
+  buttonSize = 'm',
+  isInternalLink = true,
+  onClick = null,
+  icon = null,
+}) {
+  const classes = `${styles[buttonType] || ''} ${buttonSize ? styles[`${buttonSize}_size`] : ''} `;
+
+  const btnTitle = typeof btnText === 'string' ? btnText : '';
+
+  if (isInternalLink) {
+    return (
+      <Link className={`${classes}`} to={to} title={btnTitle} aria-label={btnTitle}>
+        {btnText}
+        {icon && icon}
+      </Link>
+    );
+  }
+
+  const linkAttr = to ? { href: to } : { onClick };
+
+  return (
+    <a
+      title={btnTitle}
+      aria-label={btnTitle}
+      target={targetBlank ? '_blank' : ''}
+      rel="nofollow noreferrer"
+      className={`${classes || ''}`}
+      {...linkAttr}
+    >
+      {btnText}
+      {icon && icon}
+    </a>
+  );
+}
+
+Button.propTypes = {
+  to: PropTypes.string,
+  icon: PropTypes.func,
+  btnText: PropTypes.oneOfType([PropTypes.string, PropTypes.any]),
+  targetBlank: PropTypes.bool,
+  isInternalLink: PropTypes.bool,
+  buttonType: PropTypes.string,
+  buttonSize: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default Button;

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

@@ -1,56 +1,155 @@
-@mixin secondaryBtn($color1, $color2) {
+.primary {
+  @include buttonsColor(
+    var(--primary-button-color, #6e33e5),
+    var(--primary-button-color-hover, #331079),
+    var(--primary-button-color-active, #998fcb),
+    var(--primary-button-color-text, #ffffff)
+  );
+  white-space: nowrap;
+  border-radius: 100px;
+
+  &.not_recommended,
+  &.coming_soon,
+  &.inactive {
+    white-space: normal;
+    background-color: #bbb5dd;
+    color: #776aba;
+  }
+}
+
+.secondary {
+  @include buttonsColor(
+    var(--secondary-button-color, #1c1a28),
+    var(--secondary-button-color-hover, #515156),
+    var(--secondary-button-color-active, #3e3c47),
+    var(--secondary-button-color-text, #ffffff)
+  );
+  white-space: nowrap;
+  border-radius: 100px;
+
+  &.not_recommended,
+  &.coming_soon,
+  &.inactive {
+    white-space: normal;
+    background-color: #6b6a72;
+    color: #3e3c47;
+  }
+}
+
+.tertiary {
+  border-width: 1.5px;
+  border-style: solid;
+  border-color: #1c1a28;
   background-color: transparent;
-  border: 0.2rem solid $color1;
-  color: $color1;
+  color: #1c1a28;
+  white-space: nowrap;
+  border-radius: 100px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 
   &:hover {
-    background-color: $color1;
-    border-color: $color1;
-    color: $color2;
+    background-color: #1c1a28;
+    color: white;
+    border-color: #1c1a28;
+  }
+
+  &:active {
+    background-color: #33313d;
+    color: white;
+    border-color: #33313d;
+  }
+
+  &.not_recommended,
+  &.coming_soon,
+  &.inactive {
+    white-space: normal;
+    border-color: #9c9ab0;
+    color: #9c9ab0;
   }
 }
 
-.ctaBtn:not(.noStyle) {
-  @include flex-align(center, center);
-  white-space: nowrap;
-  padding: 0.9rem 3rem;
+.not_recommended,
+.coming_soon,
+.inactive {
+  padding: 1rem;
+}
+
+.xs_size {
+  padding: 0.4rem 0.8rem;
   font-weight: 700;
-  font-size: 1.8rem;
-  border-radius: var(--border-radius);
-  text-align: center;
-  display: inline-block;
-  &.disabled,
-  &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
+  font-size: 1.1rem;
+  line-height: 1.6rem;
+  border-width: 1.5px;
+
+  > svg {
+    flex: none;
+    height: 0.8rem;
+    width: 0.8rem;
+    margin-left: 0.4rem;
   }
+}
 
-  &.primary {
-    color: white;
-    background-color: var(--primary-color);
-
-    &:hover {
-      background: linear-gradient(270deg, var(--color-27) 0.34%, var(--color-28) 86.37%);
-    }
-  }
-
-  &.secondary {
-    @include secondaryBtn(#ccc, #000);
-    padding: 0.7rem 3rem;
-
-    &.invertColors {
-      @include secondaryBtn(#000, #fff);
-    }
-    &.tertiary {
-      background-color: #ccc;
-      border: none;
-      color: #150e06;
-      font-size: 1.6rem;
-      padding: 0.9rem 3rem;
-      &:hover {
-        background-color: #150e06;
-        color: #ccc;
-      }
-    }
+.s_size {
+  padding: 0.4rem 1.6rem;
+  font-weight: 700;
+  font-size: 1.4rem;
+  line-height: 2rem;
+  border-width: 1.5px;
+
+  > svg {
+    flex: none;
+    height: 1.8rem;
+    width: 1.8rem;
+    margin-left: 1rem;
+    padding: 0.2rem;
+  }
+}
+
+.m_size {
+  font-weight: 700;
+  padding: 0.8rem 2.4rem;
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  border-width: 2px;
+
+  > svg {
+    flex: none;
+    height: 2.2rem;
+    width: 2.2rem;
+    margin-left: 11px;
+    padding: 0.2rem;
+  }
+}
+
+.l_size {
+  padding: 0.8rem 2.4rem;
+  font-weight: 700;
+  font-size: 2.2rem;
+  line-height: 3rem;
+  border-width: 2.5px;
+
+  > svg {
+    flex: none;
+    height: 3rem;
+    width: 3rem;
+    margin-left: 1.6rem;
+    padding: 0.2rem;
+  }
+}
+
+.xl_size {
+  padding: 1.6rem 3.2rem;
+  font-weight: 700;
+  font-size: 3.2rem;
+  line-height: 4rem;
+  border-width: 3px;
+
+  > svg {
+    flex: none;
+    height: 3.8rem;
+    width: 3.8rem;
+    margin-left: 1.8rem;
+    padding: 0.2rem;
   }
 }

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Context } from '~context/MainProvider';
 import { prettyTracker, translate } from '~helpers/getters';
 
-import styles from './operator-cta-button.module.scss';
+import styles from './button.module.scss';
 
 const OperatorCtaButton = ({
   operator,

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

@@ -9,10 +9,10 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { IoMdArrowRoundForward } from '@react-icons/all-files/io/IoMdArrowRoundForward';
 
-import OperatorCtaButton from '.';
+import OperatorCtaButton from './operator-cta';
 
 export default {
-  title: 'Theme/Atoms/Operator CTA Button',
+  title: 'Theme/Atoms/Button2',
   component: OperatorCtaButton,
   argTypes: {
     operator: {

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 
-import OperatorCtaButton from '.';
+import OperatorCtaButton from './operator-cta';
 
 const data = (activeStatus = 'active') => ({
   operator: {

package/src/components/atoms/search/autocomplete/operator.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl } from '~helpers/getters';
-import Button from '~atoms/button';
+import OperatorCta from '~atoms/button/operator-cta';
 import styles from './operator.module.scss';
 
 const Operator = ({ item = {} }) => {
@@ -14,7 +14,7 @@ const Operator = ({ item = {} }) => {
     <div className={styles.row || ''}>
       <LazyImage width={56} height={56} src={imagePrettyUrl(img, 56, 56)} alt={item.title} />
       <h3>{item.title}</h3>
-      <Button to="/#" primaryColor isInternalLink={false} gtmClass="operator-gtm btn-cta" />
+      <OperatorCta operator={relation} gtmClass="toplist-operator-cta-gtm" />
     </div>
   );
 };

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

@@ -4,7 +4,7 @@
 /* eslint-disable camelcase */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import Button from '~atoms/button';
+import Button from '~atoms/button/button';
 import imgSize from '~constants/spotlight-image-dimensions.js';
 import LazyImage from '~hooks/lazy-image';
 import keygen from '~helpers/keygen';
@@ -90,11 +90,8 @@ const Spotlights = ({ module, themeStyles = {} }) => {
                   {item?.text && <div dangerouslySetInnerHTML={{ __html: item.text }} />}
                   <Button
                     to={item.link.value}
-                    isAnchorLink
                     isInternalLink={!(item.link.type === 'external')}
-                    rel={item.link.type === 'external' ? 'noreferrer' : ''}
-                    invertColors
-                    primaryColor={false}
+                    buttonType="tertiary"
                     gtmClass="spotlights-gtm"
                     btnText={
                       item.link_text

package/src/components/molecules/bonus/template-one/index.js

@@ -5,7 +5,7 @@ import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 import BonusBox from '~molecules/bonus-box/template-four';
-import OperatorCta from '~atoms/operator-cta-button';
+import OperatorCta from '~atoms/button/operator-cta';
 import Rating from '~molecules/star-rating/one-star';
 import Tnc from '~molecules/tnc';
 import styles from './bonus.module.scss';

package/src/components/molecules/bonus/template-two/index.js

@@ -7,7 +7,7 @@ import { prettyTracker, imagePrettyUrl, translate } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 import isSticky from '~hooks/stickyOnScroll';
 import BonusBox from '~molecules/bonus-box/template-four';
-import OperatorCta from '~atoms/operator-cta-button';
+import OperatorCta from '~atoms/button/operator-cta';
 import Rating from '~molecules/star-rating/one-star';
 import Tnc from '~molecules/tnc';
 import { Context } from '~context/MainProvider';

package/src/components/molecules/bonus-box/template-three/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { translate, prettyTracker, getBonusData } from '~helpers/getters.mjs';
 import { Context } from '~context/MainProvider';
-import CtaButton from '../../../atoms/operator-cta-button';
+import CtaButton from '../../../atoms/button/operator-cta';
 import styles from './bonus-box.module.scss';
 import VariableComponent from '../variables';
 

package/src/components/molecules/bonus-box/template-two/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { prettyTracker, getBonusData } from '~helpers/getters.mjs';
-import CtaButton from '../../../atoms/operator-cta-button';
+import CtaButton from '../../../atoms/button/operator-cta';
 import styles from './bonus-box.module.scss';
 
 export default function BonusBox({

package/src/components/molecules/carousel/default-slide/index.js

@@ -5,16 +5,9 @@ import PropTypes from 'prop-types';
 
 import LazyImage from '~hooks/lazy-image';
 import { imagePrettyUrl, getAltText } from '~helpers/getters';
-import Button from '~atoms/button';
 import styles from './default-slide.module.scss';
 
-const Slide = ({
-  item = {},
-  primaryBtnText = '',
-  secondaryBtnText = '',
-  imageSizes = { width: null, height: 930 },
-  slideTitle = '',
-}) => {
+const Slide = ({ item = {}, imageSizes = { width: null, height: 930 }, slideTitle = '' }) => {
   return (
     <>
       {item.title && <span className={styles.title || ''}>{item.title}</span>}
@@ -26,26 +19,6 @@ const Slide = ({
         />
       )}
       {item.content && <p className={styles.content || ''}>{item.content}</p>}
-      {item.primary_action && (
-        <Button
-          className={styles.primaryBtn || ''}
-          to={item.primary_action}
-          btnText={primaryBtnText}
-          isInternalLink={false}
-          primaryColor
-          gtmClass="carousel-gtm btn-cta"
-        />
-      )}
-      {item.secondary_action && (
-        <Button
-          className={styles.secondaryBtn || ''}
-          to={item.primary_action}
-          btnText={secondaryBtnText}
-          isInternalLink={false}
-          primaryColor={false}
-          gtmClass="carousel-gtm btn-cta"
-        />
-      )}
       {item.label && <span className={styles.label}>{item.label}</span>}
     </>
   );

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Bonus from '~molecules/bonus-box/template-one';
 import SellingPoints from '~atoms/selling-points';
 import ReviewLink from '../../../atoms/review-link';
-import OperatorCta from '~atoms/operator-cta-button';
+import OperatorCta from '~atoms/button/operator-cta';
 import { prettyTracker, imagePrettyUrl, getAltText } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 

package/src/components/organisms/archive/archive.test.js

@@ -35,7 +35,6 @@ describe('archive component', () => {
         }}
       />
     );
-    expect(container.querySelectorAll('button')).toHaveLength(1);
     expect(getByText('Load More')).toBeTruthy();
 
     // click

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import Pagination from '~molecules/pagination';
 import Items from '~atoms/archive/items';
-import Button from '~atoms/button';
+import Button from '~atoms/button/button';
 import { translate } from '~helpers/getters';
 import { Context } from '~context/MainProvider';
 import styles from './archive.module.scss';
@@ -44,9 +44,10 @@ const Archive = ({ module, page, loadMore, gtmClass = '', anchorLabel }) => {
             <Button
               btnText={translate(translations, 'load_more', 'Load More')}
               onClick={loadMoreHandler}
-              isButton
-              primaryColor
+              buttonType="tertiary"
+              buttonSize="m"
               gtmClass="archive-gtm btn-cta"
+              isInternalLink={false}
             />
           </div>
         )

package/src/components/organisms/carousel/carousel.test.js

@@ -16,8 +16,6 @@ describe('Carousel Component', () => {
     expect(getAllByText('title 1')).toBeTruthy();
 
     expect(container.querySelectorAll('.sliderItem span.title')).toHaveLength(2);
-    expect(container.querySelectorAll('.sliderItem a.primary')).toHaveLength(1);
-    expect(container.querySelectorAll('.sliderItem a.secondary')).toHaveLength(1);
     expect(container.querySelectorAll('.sliderItem span.label')).toHaveLength(2);
   });
 });

package/src/components/organisms/cookie-consent/cookie-consent.test.js

@@ -43,8 +43,7 @@ describe('cookie consent component', () => {
     expect(navigate).toHaveBeenCalled();
   });
   test('Buttons', () => {
-    const { container, getByText } = renderComponent();
-    expect(container.querySelectorAll('button')).toHaveLength(2);
+    const { getByText } = renderComponent();
     expect(getByText('Accept Me')).toBeTruthy();
     expect(getByText('Decline Me')).toBeTruthy();
   });

package/src/components/organisms/cookie-consent/index.js

@@ -5,7 +5,7 @@ import { navigate } from 'gatsby';
 import Modal from 'gatsby-core-theme/src/hooks/modal';
 import { ModalContext } from 'gatsby-core-theme/src/hooks/modal/modalContext';
 import Sticky from '~molecules/sticky';
-import Button from '~atoms/button';
+import Button from '~atoms/button/button';
 import { translate } from '~helpers/getters';
 import { Context } from '~context/MainProvider';
 import { setCookie, getCookie } from '~helpers/cookies';
@@ -14,7 +14,7 @@ import styles from './cookie-consent.module.scss';
 const CookieConsent = ({
   acceptText = 'Accept',
   settingsCookie = false,
-  declineText,
+  declineText = 'Decline',
   declineURL = '#',
   location = 'bottom',
   children,
@@ -55,7 +55,8 @@ const CookieConsent = ({
                 <Button
                   btnText={translate(translations, 'cookie_setting_button', 'Cookie Setting')}
                   isInternalLink={false}
-                  isButton
+                  buttonType="terti"
+                  buttonSize="m"
                   gtmClass="cookie-consent-gtm btn-cta"
                 />
               </Modal>
@@ -65,7 +66,8 @@ const CookieConsent = ({
               onClick={() => handleAccept()}
               btnText={translate(translations, 'cookie_accept_button', acceptText)}
               isInternalLink={false}
-              isButton
+              buttonType="primary"
+              buttonSize="m"
               gtmClass="cookie-consent-gtm btn-cta"
             />
 
@@ -74,7 +76,8 @@ const CookieConsent = ({
                 onClick={() => handleDecline()}
                 btnText={translate(translations, 'cookie_decline_button', declineText)}
                 isInternalLink={false}
-                isButton
+                buttonType="secondary"
+                buttonSize="m"
                 gtmClass="cookie-consent-gtm btn-cta"
               />
             )}

package/src/components/organisms/form/form.test.js

@@ -22,7 +22,7 @@ describe('Form Component', () => {
     expect(container.querySelector('textarea')).toBeTruthy();
     expect(container.querySelector('label')).toBeTruthy();
     expect(container.querySelectorAll('label').length).toEqual(5);
-    expect(container.querySelector('button')).toBeTruthy();
+    expect(container.querySelector('.primary')).toBeTruthy();
   });
   test('render newsletter form ', () => {
     const { container } = render(
@@ -36,7 +36,7 @@ describe('Form Component', () => {
     expect(container.querySelector('input[type="text"]')).toBeTruthy();
     expect(container.querySelector('input[type="email"]')).toBeTruthy();
     expect(container.querySelector('textarea')).toBeFalsy();
-    expect(container.querySelector('button')).toBeTruthy();
+    expect(container.querySelector('.primary')).toBeTruthy();
   });
   test('render form without labels ', () => {
     const { container } = render(
@@ -86,7 +86,7 @@ describe('Form Component', () => {
         container
       );
     });
-    const button = container.querySelector('button');
+    const button = container.querySelector('.primary');
     const ApiCall = jest.fn();
     screen.postData = new ApiCall();
     act(() => {

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

@@ -5,7 +5,7 @@ import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import { contactUsForm } from '../../../constants/forms';
-import Button from '~atoms/button';
+import Button from '~atoms/button/button';
 import styles from './form.module.scss';
 
 const FormComponent = ({
@@ -22,6 +22,7 @@ const FormComponent = ({
 }) => {
   const { translations } = useContext(Context) || {};
   const recaptchaRef = useRef();
+  const formRef = useRef();
   const [state, setState] = useState({
     loading: false,
     success: false,
@@ -258,6 +259,7 @@ const FormComponent = ({
       )}
       {formOptions?.fields && (
         <form
+          ref={formRef}
           onSubmit={(e) => handleSubmit(e)}
           action={submitUrl}
           className={formOptions.twoCol ? styles.twoCol || '' : styles.singleCol || ''}
@@ -315,11 +317,11 @@ const FormComponent = ({
           {hasButton && (
             <div className={styles.formButton || ''}>
               <Button
-                isButton
+                buttonType="primary"
+                isInternalLink={false}
                 btnText={state.loading ? 'sending...' : buttonLabel}
-                disabled={state.loading}
                 gtmClass="form-gtm btn-cta"
-                primaryColor
+                onClick={(e) => handleSubmit(e)}
                 icon={
                   showButtonIcon ? (
                     <FaArrowRight fontSize={20} title="Right-pointing Arrow Icon" />

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

@@ -5,7 +5,7 @@ import keygen from '~helpers/keygen';
 import List from './list';
 import styles from './toplist.module.scss';
 
-const TopList = ({ module, toplistHeading, CustomRow, page }) => {
+const TopList = ({ module, toplistHeading, page }) => {
   const showTabs = module.items.length > 1;
   const content = module.items.map((toplist) => (
     <div
@@ -16,7 +16,6 @@ const TopList = ({ module, toplistHeading, CustomRow, page }) => {
       {toplistHeading}
       <List
         toplist={toplist}
-        CustomRow={CustomRow}
         hasLoadMoreButton={toplist.show_load_more}
         initItemsCount={toplist.num_items_initial_load}
         loadItemsCount={toplist.num_items_load_more}
@@ -38,7 +37,6 @@ TopList.propTypes = {
   // eslint-disable-next-line react/forbid-prop-types
   module: PropTypes.shape({ items: PropTypes.arrayOf(PropTypes.object) }),
   toplistHeading: PropTypes.element,
-  CustomRow: PropTypes.func,
   page: PropTypes.shape({ template: PropTypes.string }),
 };