gatsby-core-theme 1.6.19 → 2.0.0

package/src/components/molecules/slider/slider.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup, fireEvent, act } from '@testing-library/react';
+import { render, cleanup, fireEvent, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import keygen from '~helpers/keygen';
 import Slider from '.';
@@ -12,9 +12,9 @@ describe('Slider Component', () => {
     act(() => {
       const { container } = render(
         <Slider useArrows={false} usePagination={false} settings={{ numberOfSlides: 0 }}>
-          {list.map((element) => {
-            return <div key={keygen()}>{element}</div>;
-          })}
+          {list.map((element) => (
+            <div key={keygen()}>{element}</div>
+          ))}
         </Slider>
       );
 
@@ -30,9 +30,9 @@ describe('Slider Component', () => {
     const list = ['Summer', 'Autumn', 'Winter', 'Spring'];
     const { container } = render(
       <Slider useArrows={false} usePagination={false} settings={{ numberOfSlides: 0 }}>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
@@ -51,20 +51,24 @@ describe('Slider Component', () => {
     const list = ['Summer', 'Autumn', 'Winter', 'Spring'];
     const { container } = render(
       <Slider>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
     const prev = container.querySelector('button.left');
     const next = container.querySelector('button.right');
-    const dots = container.querySelector('div.pagination');
+
+    await waitFor(() => {
+      const dots = container.querySelector('div.pagination');
+      expect(dots).toBeTruthy();
+    });
+
     const content = container.querySelector('div.sliderContent');
 
     expect(prev).toBeTruthy();
     expect(next).toBeTruthy();
-    expect(dots).toBeTruthy();
     expect(content).toBeTruthy();
     expect(content.querySelector('.active>div').innerHTML).toBe('Summer');
   });
@@ -74,15 +78,15 @@ describe('Slider Component', () => {
 
     const { container } = render(
       <Slider>
-        {list.map((element) => {
-          return <div key={keygen()}>{element}</div>;
-        })}
+        {list.map((element) => (
+          <div key={keygen()}>{element}</div>
+        ))}
       </Slider>
     );
 
     const prev = container.querySelector('button.left');
     const next = container.querySelector('button.right');
-    const dots = container.querySelector('div.pagination');
+
     const content = container.querySelector('div.sliderContent');
 
     fireEvent.click(next);
@@ -91,10 +95,13 @@ describe('Slider Component', () => {
     fireEvent.click(prev);
     expect(content.querySelector('.active>div').innerHTML).toBe('Summer');
 
-    const dot = dots.querySelectorAll('button');
-    expect(dot.length).toEqual(4);
-    fireEvent.click(dot[1]);
-    expect(content.querySelector('.active>div').innerHTML).toBe('Autumn');
+    await waitFor(() => {
+      const dots = container.querySelector('div.pagination');
+      const dot = dots.querySelectorAll('button');
+      expect(dot.length).toEqual(4);
+      fireEvent.click(dot[1]);
+      expect(content.querySelector('.active>div').innerHTML).toBe('Autumn');
+    });
   });
 
   test('Swipe Slides', async () => {
@@ -102,9 +109,9 @@ describe('Slider Component', () => {
     act(() => {
       const { container } = render(
         <Slider>
-          {list.map((element) => {
-            return <div key={keygen()}>{element}</div>;
-          })}
+          {list.map((element) => (
+            <div key={keygen()}>{element}</div>
+          ))}
         </Slider>
       );
 

package/src/components/molecules/star-rating/index.js

@@ -1,20 +1,11 @@
 import React from 'react';
-import { FaStar, FaStarHalfAlt, FaRegStar } from 'react-icons/fa';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
 
 import styles from './star-rating.module.scss';
 import keygen from '~helpers/keygen';
 import { getRating } from '~helpers/rating';
 
-const StarRating = ({
-  numOfStars,
-  iconEmpty = <FaRegStar />,
-  iconHalf = <FaStarHalfAlt />,
-  iconFull = <FaStar />,
-  rating,
-  halfStars = true,
-}) => {
+const StarRating = ({ numOfStars, rating, halfStars = true }) => {
   const renderFarm = () => {
     const output = [];
     const rate = getRating(rating);
@@ -22,38 +13,31 @@ const StarRating = ({
     for (let i = 1; i < numOfStars + 1; i += 1) {
       if (i <= rate) {
         output.push(
-          <span className={`${styles.starItem} ${styles.starFull}`} key={keygen()}>
-            {iconFull}
+          <span className={styles.fullStar} key={keygen()}>
+            {' '}
           </span>
         );
       } else if (halfStars && i - 0.5 === rate) {
         output.push(
-          <span className={`${styles.starItem} ${styles.starHalf}`} key={keygen()}>
-            {iconHalf}
+          <span className={styles.halfStar} key={keygen()}>
+            {' '}
           </span>
         );
       } else {
         output.push(
-          <span className={`${styles.starItem} ${styles.starEmpty}`} key={keygen()}>
-            {iconEmpty}
+          <span className={styles.emptyStar} key={keygen()}>
+            {' '}
           </span>
         );
       }
     }
     return output;
   };
-  return (
-    <LazyLoad once>
-      <div className={styles.starRatingContainer}>{renderFarm()}</div>
-    </LazyLoad>
-  );
+  return <div className={styles.starRatingContainer}>{renderFarm()}</div>;
 };
 
 StarRating.propTypes = {
   numOfStars: PropTypes.oneOf([5, 10]).isRequired,
-  iconEmpty: PropTypes.element,
-  iconHalf: PropTypes.element,
-  iconFull: PropTypes.element,
   rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
   halfStars: PropTypes.bool,
 };

package/src/components/molecules/star-rating/star-rating.module.scss

@@ -7,4 +7,16 @@
       fill: var(--star-rating-color);
     }
   }
-}
+
+  .fullStar{
+    @include star(var(--full-star-fill-color), var(--full-star-border-color))
+  }
+
+  .halfStar{
+    @include half-star(var(--half-star-border-color),  var(--halfFull-star-fill-color), var(--halfEmpty-star-fill-color))
+  }
+
+  .emptyStar{
+    @include star(var(--empty-star-border-color), var(--empty-star-fill-color))
+  }
+}

package/src/components/molecules/star-rating/star-rating.test.js

@@ -7,8 +7,10 @@ import StarRating from '.';
 describe('StarRating Component', () => {
   test('render container with lazyload', () => {
     const { container } = render(<StarRating numOfStars={10} rating={6.5} />);
-    expect(container).toBeTruthy();
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
+
+    expect(container.querySelectorAll('.fullStar')).toHaveLength(6);
+    expect(container.querySelectorAll('.halfStar')).toHaveLength(1);
+    expect(container.querySelectorAll('.emptyStar')).toHaveLength(3);
   });
 });
 afterEach(() => {

package/src/components/molecules/tnc/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyLoad from 'react-lazyload';
 
 import Collapse from '~atoms/collapse';
 
@@ -13,7 +12,7 @@ const Tnc = ({
   initOpen = false,
   operator,
 }) => (
-  <LazyLoad once>
+  <>
     {hasCollapse ? (
       <Collapse
         onlyMobile={onlyMobile}
@@ -26,7 +25,7 @@ const Tnc = ({
     ) : (
       contentText
     )}
-  </LazyLoad>
+  </>
 );
 
 Tnc.propTypes = {

package/src/components/molecules/tnc/tnc.test.js

@@ -8,7 +8,6 @@ describe('Tnc Component', () => {
   test('render component', () => {
     const { container } = render(<Tnc />);
     expect(container).toBeTruthy();
-    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
   });
 });
 afterEach(() => {

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

@@ -1,18 +1,21 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MdCheck } from 'react-icons/md';
-
-import Button from '~atoms/button';
 import Bonus from '~atoms/bonus';
+import { Context } from '~context/TranslationsProvider';
 import SellingPoints from '~atoms/selling-points';
-
-import { prettyTracker, imagePrettyUrl } from '~helpers/getters';
+import StarRating from '~molecules/star-rating';
+import Link from '~hooks/link';
+import OperatorCta from '~atoms/operator-cta';
+import { prettyTracker, imagePrettyUrl, translate } from '~helpers/getters';
 import LazyImage from '~hooks/lazy-image';
 
 import styles from './default-row.module.scss';
 
-const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
+const Row = ({ item, oneliner = 'main', layout = 'list', tracker = 'main' }) => {
   const prettyLink = prettyTracker(item);
+  const itemRating = item.rating;
+  const { translations } = useContext(Context) || {};
 
   return (
     <div className={`${styles.row} ${styles[layout]}`}>
@@ -33,26 +36,23 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
         rel="noreferrer"
         aria-label={`${item.name} Link`}
       >
-        <LazyImage alt={item.name} src={imagePrettyUrl(item.logo_url, 100)} />
+        <LazyImage
+          alt={item.name}
+          src={imagePrettyUrl(item.logo_url, 100)}
+          width={150}
+          height={40}
+        />
       </a>
       <Bonus item={item} tracker={oneliner} />
+      <StarRating numOfStars={5} rating={itemRating} />
       <SellingPoints icon={<MdCheck />} sellingPoints={item.selling_points} />
       <div>
-        <Button
-          to={`/${item.review_link}`}
-          primaryColor={false}
-          gtmClass="casinos-top-list-gtm btn-cta"
-          btnText="Omtale"
-        />
+        <Link className={`${styles.reviewLink} toplist-variant-one-gtm`} to={item.review_link}>
+          {`${translate(translations, 'read_review', 'Review')}`}
+        </Link>
       </div>
       <div>
-        <Button
-          to={prettyLink}
-          btnText="Spill nå!"
-          gtmClass="casinos-top-list-gtm btn-cta"
-          primaryColor
-          isInternalLink={false}
-        />
+        <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
       </div>
     </div>
   );
@@ -61,11 +61,13 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
 Row.propTypes = {
   oneliner: PropTypes.string,
   layout: PropTypes.string,
+  tracker: PropTypes.string,
   item: PropTypes.shape({
     name: PropTypes.string,
     logo_url: PropTypes.string,
     selling_points: PropTypes.arrayOf(PropTypes.string),
     review_link: PropTypes.string,
+    rating: PropTypes.string,
     one_liners: PropTypes.shape({
       main: PropTypes.shape({
         one_liner: PropTypes.string,

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

@@ -33,6 +33,7 @@ const Navigation = ({
   },
   sticky = true,
   template,
+  customStyles,
 }) => {
   const navRef = useRef(React.createRef());
   const showMenu = template !== 'ppc';
@@ -72,7 +73,13 @@ const Navigation = ({
           </Link>
           {showMenu && (
             <>
-              <Menu section={section} menu={menu} options={options} gtmClass="main-menu-gtm" />
+              <Menu
+                section={section}
+                menu={menu}
+                options={options}
+                customStyles={customStyles}
+                gtmClass="main-menu-gtm"
+              />
               {hasSearch && <Search className={styles.search} searchIcon={searchIcon} />}
             </>
           )}
@@ -116,6 +123,7 @@ Navigation.propTypes = {
     }),
   }),
   sticky: PropTypes.bool,
+  customStyles: PropTypes.string,
 };
 
 export default Navigation;

package/src/components/pages/search/index.js

@@ -1,12 +1,13 @@
 /* eslint-disable arrow-body-style */
 import React from 'react';
 import PropTypes from 'prop-types';
-
-import Search from '~molecules/search';
+import loadable from '@loadable/component';
 import Card from '~atoms/cards/default-card';
 import { translate } from '~helpers/getters';
 
 const SearchContent = ({ page }) => {
+  const Search = loadable(() => import('~molecules/search'));
+
   return (
     <Search
       pageSearchOptions={{

package/src/helpers/device-detect.js

@@ -14,12 +14,11 @@ export function isMobileDevice() {
   const isIos = () => Boolean(userAgent.match(/iPhone|iPad|iPod/i));
   const isOpera = () => Boolean(userAgent.match(/Opera Mini/i));
   const isWindows = () => Boolean(userAgent.match(/IEMobile/i));
-  const isIos13 = () =>
-    Boolean(
-        platform === 'MacIntel' &&
-        maxTouchPoints &&
-        maxTouchPoints === 5
-    );
+  const isIos13 = () => Boolean(platform === 'MacIntel' && maxTouchPoints && maxTouchPoints === 5);
 
   return Boolean(isAndroid() || isIos() || isOpera() || isWindows() || isIos13());
 }
+
+export function isNativeImageLazyLoadingSupported() {
+  return typeof HTMLImageElement !== 'undefined' && 'loading' in HTMLImageElement.prototype;
+}

package/src/helpers/events.js

@@ -0,0 +1,91 @@
+/* eslint-disable camelcase */
+/* eslint-disable import/prefer-default-export */
+import { zeroPadding } from './schedule';
+
+function isValidDate(d) {
+  return d instanceof Date && !Number.isNaN(d);
+}
+
+export function convertTimeZone(event) {
+  if (!event || !event.date || !event.date.time) {
+    return event;
+  }
+  const timeArr = event.date.time.split(':');
+
+  // ecmascript has month ranges between 0 - 11, that's why we do -1 to month_number
+  const currentTimeZoneDate = new Date(
+    Date.UTC(
+      event.date.year_number,
+      zeroPadding(event.date.month_number - 1, 2),
+      zeroPadding(event.date.day_number, 2),
+      timeArr[0],
+      timeArr[1]
+    )
+  );
+
+  if (!isValidDate(currentTimeZoneDate)) return event;
+
+  const time = `${zeroPadding(currentTimeZoneDate.getHours(), 2)}:${zeroPadding(
+    currentTimeZoneDate.getMinutes(),
+    2
+  )}`;
+
+  // in case the utc is 23:00, but user's timezone can get 00:00 so update the date object.
+  const day_number = zeroPadding(currentTimeZoneDate.getDate(), 2);
+  const month_number = zeroPadding(currentTimeZoneDate.getMonth() + 1, 2);
+  const date = `${day_number}-${month_number}-${zeroPadding(currentTimeZoneDate.getFullYear(), 2)}`;
+
+  const dateAttrs = {
+    date: {
+      ...event.date,
+      time,
+      month_number,
+      day_number,
+      date,
+    },
+  };
+
+  return { ...event, ...dateAttrs };
+}
+
+export function updateAllTimezones(relation) {
+  const relationSchedule = relation?.schedule;
+  const relationFeaturedEvents = relation?.featured_events;
+  const relationShowcasedEvents = relation?.showcased_events;
+
+  // formated timezone schedule
+  const schedule = relationSchedule
+    ? Object.keys(relationSchedule).reduce((acc, dateKey) => {
+        const { tournaments } = relationSchedule[dateKey] || {};
+
+        const formattedTournaments = Object.keys(tournaments).reduce(
+          (tournamentAcc, currentTournamentKey) => {
+            const league = tournaments[currentTournamentKey];
+            const formattedEvents = league.events.map((event) => convertTimeZone(event));
+            tournamentAcc[currentTournamentKey] = { ...league, events: formattedEvents };
+            return tournamentAcc;
+          },
+          {}
+        );
+
+        acc[dateKey] = { ...relation.schedule[dateKey], tournaments: formattedTournaments };
+        return acc;
+      }, {})
+    : {};
+
+  // formated timezone featured events
+  const featured_events = relationFeaturedEvents?.map((event) => convertTimeZone(event)) || [];
+
+  // formated timezone showcased events
+  const showcased_events = relationShowcasedEvents?.map((event) => convertTimeZone(event)) || [];
+
+  // format timezone for relation.event
+  const event = convertTimeZone(relation?.event);
+
+  const updatedObject = { ...relation, schedule, featured_events, showcased_events };
+  if (event) {
+    updatedObject.event = event;
+  }
+
+  return updatedObject;
+}

package/src/helpers/generators.js

@@ -21,17 +21,25 @@ export function generateTrackerLink(operator, trackerType) {
   }
 }
 
-export function generateMetaTitle(metaTitle, translations) {
+export function generateMetaString(metaString, translations, props) {
   const date = new Date();
+  const day = date.getDate();
   const month = months[date.getMonth()];
   const year = date.getFullYear();
+  const regex =
+    /\[MONTH\]|\[YEAR\]|\[currentyear\]|\[sitename\]|\[currentmonth\]|\[title\]|\[currentdate\]/gi;
 
-  return metaTitle.replace(
-    /\[MONTH\]|\[YEAR\]/gi,
+  return metaString.replace(
+    regex,
     (match) =>
       ({
         '[MONTH]': (translations && translations[month]) || month,
         '[YEAR]': year,
+        '[currentdate]': `${(translations && translations[month]) || month} ${day}, ${year}`,
+        '[currentmonth]': (translations && translations[month]) || month,
+        '[currentyear]': year,
+        '[sitename]': (props && props.siteName) || '',
+        '[title]': (props && props.siteTitle) || '',
       }[match])
   );
 }

package/src/helpers/generators.test.js

@@ -1,4 +1,4 @@
-import { generateTrackerLink, generateMetaTitle } from './generators';
+import { generateTrackerLink, generateMetaString } from './generators';
 import { months } from '~constants/common';
 
 describe('Generate Tracker Link Helper', () => {
@@ -17,24 +17,46 @@ describe('Generate Tracker Link Helper', () => {
 });
 
 describe('Generate Meta Title Helper', () => {
-  test('generateMetaTitle main', () => {
-    const metaTitle = generateMetaTitle('meta title [MONTH] [YEAR]');
+  test('generateMetaString uppercase', () => {
+    const metaString = generateMetaString('meta title [MONTH] [YEAR]');
     const date = new Date();
-    expect(metaTitle).not.toContain('[MONTH]');
-    expect(metaTitle).not.toContain('[YEAR]');
-    expect(metaTitle).toContain(date.getFullYear());
-    expect(metaTitle).toContain(months[date.getMonth()]);
+
+    expect(metaString).not.toContain('[MONTH]');
+    expect(metaString).not.toContain('[YEAR]');
+    expect(metaString).toContain(date.getFullYear());
+    expect(metaString).toContain(months[date.getMonth()]);
+  });
+  test('generateMetaString lowercase', () => {
+    const metaString = generateMetaString(
+      'meta title [currentdate] [currentmonth] [currentyear] [sitename] [title]',
+      null,
+      {
+        siteName: 'Site Name',
+        siteTitle: 'Site Title',
+      }
+    );
+    const date = new Date();
+
+    expect(metaString).not.toContain('[currentdate]');
+    expect(metaString).not.toContain('[currentmonth]');
+    expect(metaString).not.toContain('[currentyear]');
+    expect(metaString).not.toContain('[sitename]');
+    expect(metaString).not.toContain('[title]');
+    expect(metaString).toContain(date.getDate());
+    expect(metaString).toContain(months[date.getMonth()]);
+    expect(metaString).toContain(date.getFullYear());
+    expect(metaString).toContain('Site Name');
+    expect(metaString).toContain('Site Title');
   });
-  test('generateMetaTitle translated', () => {
+  test('generateMetaString translated', () => {
     const translateMonths = months.reduce(
       (translated, month) => ({ ...translated, [month]: `translate${month.substring(0, 1)}` }),
       {}
     );
-    const metaTitle = generateMetaTitle('meta title [MONTH] [YEAR]', translateMonths);
+    const metaString = generateMetaString('meta title [MONTH]', translateMonths);
     const date = new Date();
 
-    expect(metaTitle).not.toContain('[MONTH]');
-    expect(metaTitle).not.toContain('[YEAR]');
-    expect(metaTitle).toContain(translateMonths[months[date.getMonth()]]);
+    expect(metaString).not.toContain('[MONTH]');
+    expect(metaString).toContain(translateMonths[months[date.getMonth()]]);
   });
 });

package/src/helpers/processor/sports.js

@@ -6,11 +6,9 @@ import {
   filterEvents,
   findTournaments,
   getSortedEvents,
-  formatEvents,
 } from '../schedule';
 
 export function prepareSportsData(sportsData) {
-  sportsData.events = formatEvents(sportsData.events);
   Object.keys(sportsData.tournaments).forEach((key) => {
     if (sportsData.tournaments[key].events) {
       sportsData.tournaments[key].events = filterEvents(

package/src/helpers/rating.js

@@ -1,3 +1,5 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable no-unused-expressions */
 export const roundHalf = (num) => {
   return Math.round(num * 2) / 2;
 };

package/src/helpers/schedule.js

@@ -120,39 +120,3 @@ export function filterEvents(tournamentEvents, events) {
 
   return futureEvents;
 }
-
-export function changeEventHour(event, hour = 1) {
-  if (!event || !event.date || !event.date.time) {
-    return event;
-  }
-
-  const timeArr = event.date.time.split(':');
-  timeArr[0] = Number(timeArr[0]) - hour;
-  event.date.time = timeArr.join(':');
-
-  return event;
-}
-
-export function formatEvents(events) {
-  const eventsArr = Object.values(events);
-  const siteName = process.env.GATSBY_SITE_NAME;
-  let prefix = '0';
-
-  switch (siteName) {
-    case 'sefodbold.dk':
-    case 'sesport.dk':
-    case 'watchfooty.co.uk':
-    case 'bekijksport.nl':
-    case 'livestreamsvoetbal.nl':
-      prefix = 1;
-      break;
-    default:
-      prefix = 0;
-  }
-
-  return eventsArr.reduce((acc, current) => {
-    const event = changeEventHour(current, prefix);
-    acc[event.id] = event;
-    return acc;
-  }, {});
-}