gatsby-core-theme 35.1.2 → 35.1.4

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## [35.1.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v35.1.3...v35.1.4) (2024-08-07)
+
+
+### Bug Fixes
+
+* added check for empty toplist ([897ec1e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/897ec1e2a45300e0a2075df88dd2d5e781772e0e))
+* fix multiple contributor author reviews ([6cedeb2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6cedeb2b0b0344d102a0c55e74f2b0dd8ee37c31))
+* seperated notification bell from variable component ([3c45d81](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3c45d81867b0b485b5acd5eb2298144723529a83))
+* tests ([d1827fe](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d1827fe29e9cd595e2994867a69d9c3e758cf89d))
+* updated storybook + added notification component ([44f36e9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/44f36e90b61e0574661acf15d9fdb7abc4d43602))
+* updated storybook + added notification component ([8005ba6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8005ba6b106af7b95bc78ed4dafa50f4c354fe1d))
+* updated storybook iamges for toplists ([0fdf491](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0fdf4914191436ff3daa2c1ee0af1eaf83dc6051))
+
+
+* Merge branch 'tm-4654-multiple-contributors' into 'master' ([1f77002](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1f77002a79aa6dc421190234429274331ae5e274))
+* Merge branch 'tm-4631-notifications' into 'master' ([4b99dfc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4b99dfc3edc091a3f0409d22c19590f2ba3d9c6f))
+* Merge branch 'master' into tm-4631-notifications ([87e75a4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/87e75a46a43b0082a1819585eeb9861f7abde4a8))
+
+## [35.1.3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v35.1.2...v35.1.3) (2024-08-06)
+
+
+### Bug Fixes
+
+* add payout time ([7c0ba73](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7c0ba733207e119e9be70e1b2aa4a2b07e662e19))
+
+
+### Code Refactoring
+
+* add style ([3c5b7e5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3c5b7e54fba0fd69a2142556f64322b835a0b057))
+* change to ratings rtp value if 0 ([8b8eb92](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8b8eb92a51419c4c94206351dadb91bc75b0e5e2))
+
+
+* Merge branch 'tm-4666-ratings' into 'master' ([0362956](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0362956a9d525ffd394ac8b77832ec39dd40bc9f))
+
 ## [35.1.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v35.1.1...v35.1.2) (2024-08-05)
 
 

package/package.json

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

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-target-blank */
 /* eslint-disable no-unused-expressions */
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { globalHistory } from '@reach/router';
 import useTranslate from '~hooks/useTranslate/useTranslate';
@@ -33,14 +33,14 @@ const OperatorCtaButton = ({
   const trackerType = tracker?.toLowerCase()?.replace(' ', '_');
   const referer = typeof document !== 'undefined' && document?.referrer ? document.referrer : '';
   const prettyLink = `${prettyTracker(operator, trackerType, false, pageTemplate)}`;
-
+  const translateBtnTxt = useTranslate(
+    translationsObj[status]?.translationKey,
+    translationsObj[status]?.defaultValue || ''
+  );
   const translateBtn =
     status && translationsObj[status]
-      ? useTranslate(
-          translationsObj[status]?.translationKey,
-          translationsObj[status]?.defaultValue || ''
-        )
-      : '';
+      ? translateBtnTxt
+      : 'Claim';
 
   const onCTAClick = () => {
     process.env.IS_TRACKING_SSR &&

package/src/components/atoms/menu/mega-items/index.js

@@ -63,7 +63,7 @@ const Items = ({ item, gtmClass = "", level = 1, toplist }) => {
               ))}
             </ul>
 
-            <Toplist module={toplist} />
+            {toplist && <Toplist module={toplist} limit={4} />}
           </div>
         </div>
       )}

package/src/components/atoms/menu/mega-items/mega-item.module.scss

@@ -23,9 +23,13 @@
 
     @include min(desktop) {
       margin: 0 auto;
+
       @include flex-align(center, space-between);
+
       height: 35rem;
     }
+
+    background-color: transparent;
   }
 
   .megaItems {
@@ -63,6 +67,8 @@
   
     @include min(desktop) {
       background-color: var(--levelTwo-bg-color, var(--nav-background-color));
+      backdrop-filter: blur(50px);
+      opacity: .5;
       position: absolute;
       top: calc(100% + 1px);
       right: 0;
@@ -70,8 +76,8 @@
       perspective: 1000px;
       z-index: -1;
       transform-origin: top center;
-      animation: rotateX 900ms 200ms ease-in-out forwards;
-      border-top: none;
+      animation: rotate-x 900ms 200ms ease-in-out forwards;
+      border-top: 0;
   
       &.show {
         display: none;
@@ -82,42 +88,15 @@
   .level1 {
     @include flex-direction(column);
     @include flex-align(stretch, center);
+
     background-color: var(--levelOne-btn-bg-color, var(--levelOne-bg-color));
     
-    &.hasChildren > span {
-      position: relative;
-      &:after {
-        transition: 0.2s;
-        @include arrow(var(--menu-text-color), 0.7rem, down, false);
-        position: absolute;
-        top: 2.4rem;
-        right: 2.6rem;
-      }
-    }
-  
-    > a,
-    > span {
-      color: var(--levelOne-text-color, var(--menu-text-color));
-      background-color: var(--levelOne-bg-color, var(--nav-background-color));
-    }
-  
-    @include min(desktop) {
-      border: none;
+    @include min(tablet) {
+      border: 0;
       border-top: 3px solid transparent;
       border-bottom: 3px solid transparent;
       background-color: var(--levelOne-desktop-bg-color, var(--levelOne-bg-color));
-  
-      &.hasChildren {
-        &:hover {
-          @include arrow-rotate(0);
-        }
-  
-        &:after {
-          top: calc(50% - 0.3rem);
-          right: 2.2rem;
-        }
-      }
-    
+      
       &:hover {
         background-color: var(--levelOne-hover-bg-color, var(--nav-background-color));
     
@@ -127,9 +106,14 @@
           background-color: var(--levelOne-hover-bg-color, var(--nav-background-color));
         }
       }
-  
-      > a,
-      > span {
+    }
+
+    > a,
+    > span {
+      color: var(--levelOne-text-color, var(--menu-text-color));
+      background-color: var(--levelOne-bg-color, var(--nav-background-color));
+
+      @include min(desktop) {
         background-color: var(--levelOne-desktop-bg-color, var(--nav-background-color));
       }
     }
@@ -138,16 +122,6 @@
   .level2 {  
     background-color: var(--levelTwo-btn-bg-color, var(--levelTwo-bg-color));
   
-    &.hasChildren {
-      &:after {
-        transition: 0.2s;
-        @include arrow(var(--menu-text-color), 0.7rem, right, false);
-        position: absolute;
-        top: 2.4rem;
-        right: 2.6rem;
-      }
-    }
-  
     > a,
     > span {
       background-color: var(--levelTwo-bg-color, var(--nav-background-color));
@@ -157,13 +131,6 @@
     @include min(desktop) {
       background-color: var(--levelTwo-desktop-bg-color, var(--levelTwo-bg-color));
   
-      &.hasChildren {
-        &:after {
-          top: calc(50% - 0.3rem);
-          right: 2.4rem;
-        }
-      }
-  
       > a,
       > span {
         background-color: var(--levelTwo-desktop-bg-color, var(--levelTwo-bg-color));
@@ -181,14 +148,36 @@
     }
   }
 
-  @keyframes rotateX {
+  .hasChildren {
+    > a, > span {
+      position: relative;
+
+      &:hover {
+        @include arrow-rotate(0);
+      }
+
+      &::after {
+        transition: 0.2s;
+
+        @include arrow(var(--menu-text-color), 0.7rem, down, false);
+
+        position: absolute;
+        top: 2.4rem;
+        right: 2.6rem;
+      }
+    }
+  }
+
+  @keyframes rotate-x {
     0% {
       opacity: 0;
       transform: rotateX(-90deg);
     }
+
     50% {
       transform: rotateX(-20deg);
     }
+
     100% {
       opacity: 1;
       transform: rotateX(0deg);

package/src/components/atoms/menu/variables/index.js

@@ -1,25 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyImage from '~hooks/lazy-image';
 import styles from './variable.module.scss';
-import NotificationBubble from '../../../../../static/images/notification-bubble.svg';
-import Bell from '../../../../../static/images/bell.svg';
+import Newsletter from '../../../molecules/newsletter';
 
-const VariableComponent = ({ pageContext, section }) => (
-  <div className={styles?.variableContainer || ''}>
-    <LazyImage
-      alt="Notification bubble"
-      width={16}
-      height={16}
-      src={NotificationBubble}
-      disableLazyLoad
-    />
-    <LazyImage alt="Notification bell" width={24} height={24} src={Bell} disableLazyLoad />
+const VariableComponent = ({ pageContext }) => (
+  <div className={styles?.variableContainer || ''} >
+    <Newsletter page={pageContext?.page} openBtnText="Toggle Newsletter" footer={false} isSticky />
   </div>
 );
 VariableComponent.propTypes = {
-  pageContext: PropTypes.shape({}),
-  section: PropTypes.shape({}),
+  pageContext: PropTypes.shape({
+    page: PropTypes.shape({})
+  }),
 };
 
 export default VariableComponent;

package/src/components/atoms/menu/variables/variable.module.scss

@@ -0,0 +1,3 @@
+.variableContainer{
+    margin: 0 !important;
+}

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

@@ -0,0 +1,80 @@
+import React, { useState, useContext, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { toggleScroll } from 'gatsby-core-theme/src/helpers/scroll';
+import { NavigationContext } from 'gatsby-core-theme/src/components/organisms/navigation/navigationContext';
+import NotificationItems from './notification-items';
+import styles from './notifications.module.scss';
+
+const Notifications = ({ section }) => {
+  const { setShowSearch, setShowMenu, showMenu, showSearch } = useContext(NavigationContext);
+  const notificationRef = useRef(null);
+  const [newNotification, setNewNotification] = useState(true);
+  const [openNotification, setOpenNotification] = useState(false);
+
+  const { modules } = section || {};
+  const getNotifications = () => modules?.find((module) => module?.name === 'spotlights') || {};
+
+  const notificationActions = () => {
+    setNewNotification(false);
+    setOpenNotification(!openNotification);
+
+    if (showSearch) {
+      toggleScroll('search');
+      setShowSearch(!showSearch);
+    }
+    if (showMenu) {
+      toggleScroll('menu');
+      setShowMenu(!showMenu);
+    }
+
+  };
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (notificationRef.current && !notificationRef.current.contains(event.target)) {
+        setOpenNotification(false);
+      }
+    }
+
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [notificationRef]);
+
+  return (
+    <div ref={notificationRef} className={styles?.notificationOuter || ''}>
+      <div
+        className={`${styles.notificationIcon || ''} ${
+          newNotification ? styles.newNotification || '' : ''
+        } notification-bell-gtm`}
+        onKeyDown={() => notificationActions()}
+        onClick={() => notificationActions()}
+        role="button"
+        aria-label="Notification Bell Icon"
+        tabIndex={0}
+      >
+        <LazyImage
+          alt="Notification Bell"
+          width={26}
+          height={26}
+          src="/images/bell.svg"
+        />
+      </div>
+      {openNotification && (
+        <NotificationItems module={getNotifications()} onClose={() => notificationActions()} />
+      )}
+    </div>
+  );
+};
+
+Notifications.propTypes = {
+  pageContext: PropTypes.shape({}),
+  section: PropTypes.shape({}),
+};
+
+export default Notifications;

package/src/components/atoms/notifications/market-dropdown.stories.js

@@ -0,0 +1,114 @@
+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 Notifications from ".";
+
+export default {
+  title: "Theme/Layout/Navigation/Notifications",
+  component: Notifications,
+  argTypes: {
+    section: {
+      name: "section",
+      type: { name: "object", required: true },
+      defaultValue: "",
+      description: "The section object for the current page.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A component that renders a market dropdown for multimarket sites",
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => (
+  <div style={{ width: "62px", position: "relative", margin: "0 auto" }}>
+    <Notifications {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  section: {
+    modules: [
+      {
+          "mode": "image_text",
+          "name": "spotlights",
+          "items": [
+            {
+              "label": "Title Text",
+              "title": "Title Text",
+              "title_tag": "H2",
+              "subtitle": "Subtitle Text, Other Content",
+              "text": "<p>content text</p>",
+              "content": "<p>content text</p>",
+              "link": {
+                "type": "page",
+                "value": "/reviews/ice-casino-clone-1722429892393",
+                "title": null
+              },
+              "icon": null,
+              "icon_object": null,
+              "link_text": "Link Test Page",
+              "image": "1721908995/instagram2.svg",
+              "image_object": {
+                "width": "28",
+                "height": "28",
+                "url": "https://assets-srv.s3.eu-west-1.amazonaws.com/1721908995/instagram2.svg",
+                "title": "Instagram2",
+                "alt": null,
+                "filename": "1721908995/instagram2.svg"
+              }
+            },
+            {
+              "label": "Title Text",
+              "title": "Title Text",
+              "title_tag": "H2",
+              "subtitle": "Subtitle Text, Other Content",
+              "text": "<p>content text</p>",
+              "content": "<p>content text</p>",
+              "link": {
+                "type": "external",
+                "value": "/reviews/ice-casino-clone-1722429892393",
+                "title": null
+              },
+              "icon": null,
+              "icon_object": null,
+              "link_text": "Link Test Page",
+              "image": "1721908995/instagram2.svg",
+              "image_object": {
+                "width": "28",
+                "height": "28",
+                "url": "https://assets-srv.s3.eu-west-1.amazonaws.com/1721908995/instagram2.svg",
+                "title": "Instagram2",
+                "alt": null,
+                "filename": "1721908995/instagram2.svg"
+              }
+            }
+          ]
+      }
+  ]
+  },
+};

package/src/components/atoms/notifications/notification-items/index.js

@@ -0,0 +1,111 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { imagePrettyUrl, getImageFilename, getAltText } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import keygen from 'gatsby-core-theme/src/helpers/keygen';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from './notification-items.module.scss';
+
+const NotificationItems = ({ module, onClose }) => {
+    const { items } = module;
+    const noNewUpdates = useTranslate('noNewUpdates', 'No new items')
+    const content = (item) => {
+        const img = item?.image;
+        const imageSrc = imagePrettyUrl(img, 40, 40);
+        const fileName = getImageFilename(imageSrc);
+        const TitleTag = item?.title_tag || 'label';
+        const ribbon = item?.subtitle?.split(',')[0].replace('[null]', '');
+        const otherText = item?.subtitle?.split(',').slice(1);
+
+        return (
+            <div className={styles.notificationContent}>
+                {img && (
+                <LazyImage
+                    width={40}
+                    height={40}
+                    alt={getAltText(item?.image_object, item?.label || item?.link_text || fileName)}
+                    src={imageSrc}
+                />
+                )}
+                {item?.label && <TitleTag>{item?.label}</TitleTag>}
+                {item?.text && (
+                <div className={styles.subtitle} dangerouslySetInnerHTML={{ __html: item?.text }} />
+                )}
+                {item?.subtitle && (
+                <div className={styles.ribbonAndTime}>
+                    {ribbon && <span className={styles.ribbon}>{ribbon}</span>}
+                    <span className={styles.extraContent}>{otherText}</span>
+                </div>
+                )}
+            </div>
+        );
+    };
+    return (
+        <div className={styles.container || ''}>
+            <div className={styles.notificationsContainer || ''}>
+                <span>
+                    {useTranslate('latestUpdates', 'Latest Updates')}
+                    <button type='button' onClick={onClose} className={styles.close || ''}>
+                        <LazyImage
+                        alt="Notification Bell"
+                        width={16}
+                        height={16}
+                        src="/images/close.svg"
+                        />
+                    </button>
+                </span>
+                {items?.length ? (
+                <ul className={styles.notifications || ''}>
+                    {items.map((item) => (
+                    <li className={`${styles.notification} notification-item-gtm`} key={keygen()}>
+                        {item?.link &&
+                        (item?.link?.type === 'external' ? (
+                            <a
+                            href={item?.link?.value}
+                            className="spotlights-gtm"
+                            title={item?.label}
+                            target="_blank"
+                            rel="noreferrer"
+                            aria-label={`${item?.label || item?.link_text} Link`}
+                            >
+                            {content(item)}
+                            </a>
+                        ) : (
+                            <Link
+                            to={item?.link?.value}
+                            title={item?.label}
+                            className="spotlights-gtm"
+                            aria-label={`${item?.label || item?.link_text} Link`}
+                            >
+                            {content(item)}
+                            </Link>
+                        ))}
+                    </li>
+                    ))}
+                </ul>
+                ) : (
+                <>{noNewUpdates}</>
+                )}
+            </div>
+            <div className={styles.triangle} />
+            <div 
+                className={styles.overlay} 
+                onKeyDown={onClose}
+                onClick={onClose}
+                role="button"
+                aria-label="Notification Bell Icon"
+                tabIndex={0}
+            />
+        </div>
+    );
+};
+
+NotificationItems.propTypes = {
+    module: PropTypes.shape({
+        items: PropTypes.arrayOf(PropTypes.shape({}))
+    }),
+    onClose: PropTypes.func
+};
+
+export default NotificationItems;