gatsby-core-theme 6.0.1 → 6.1.2

package/CHANGELOG.md

@@ -1,3 +1,66 @@
+## [6.1.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v6.1.1...v6.1.2) (2022-04-13)
+
+
+### Bug Fixes
+
+* add star ratings changes ([a7145f4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a7145f4ee6c6e8c73c879e3ea968ef1b5b3566f9))
+* replace h3 with p for heading sequence ([046fd25](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/046fd25173b6293285687c0da4545eb687cfe726))
+
+
+### Code Refactoring
+
+* seperate one star component ([77e38fc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/77e38fc9dfb1ec1b8be2a62bfbbad695ba9c46ca))
+
+
+* Merge branch 'tm-2813-heading-sequence' into 'master' ([1536f72](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1536f723f30ec5b794222db41fffcd398b3e0688))
+* Merge branch 'fix-star-ratings' into 'master' ([954ff3a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/954ff3ace386c2165421731ad280e6d8ecd60c94))
+
+
+### Tests
+
+* added test for onestar ([0f21ec6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0f21ec6ae1ae0133450ba1d15c442469c4abf18d))
+
+## [6.1.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v6.1.0...v6.1.1) (2022-04-06)
+
+
+### Code Refactoring
+
+* replace deprecated with calc in style ([411f685](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/411f685825d020414f76550399ddfeba47903073))
+
+
+* Merge branch 'tm-2812-fix-sasserrors' into 'master' ([7254b1e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7254b1e75029a73ebc2daa76df9e4afefb857428))
+
+# [6.1.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v6.0.1...v6.1.0) (2022-04-06)
+
+
+### Bug Fixes
+
+* make style ([3f83da5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3f83da5fd9160bd5e476d58a7bb378b9fcb42b98))
+* make style for submenus ([e4a8b91](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e4a8b919ceff29d866d2ea23d673d633d6373e82))
+
+
+### Code Refactoring
+
+* remove unnecessary id from generateArrayRandom ([8cf09e2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8cf09e2b0d9cd9c6b638c1ec8c53886f95121e6e))
+* update cards random sorting filter ([382222e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/382222eb67070b8e9dee33ef37d75eef198a881c))
+* update update cards random sorting filter with lodash ([a6b2093](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a6b209301b9a3493adce986edad6c8c6a10ccc6b))
+
+
+* Merge branch 'tm-2806-webp-images' into 'master' ([41269ae](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/41269aea2b48f5cf5d8b1bac2fa1b3d5b5f498f6))
+* Merge branch 'tm-2805-cards-random-filter' into 'master' ([9c14230](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9c1423082cf453b4af943181c567429631d08f37))
+* Merge branch 'tm-2840-menu-issue' into 'master' ([efb78f3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/efb78f3b00cf3a5b327c8d9d2c0005a1ad73ccac))
+
+
+### Features
+
+* added webp logic in lazy image component ([6cb2453](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6cb2453b60ad8355b1c39519e3c3fce732678a90))
+* added webp logic in lazy image component ([c70a893](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c70a893976aef767aaa7de2e7f3eb7907be48ce5))
+* added webp logic in lazy image component ([4fa73b5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4fa73b5ad5c65697f408bca4bb87bf8aae7a15d2))
+* added webp logic in lazy image component ([2cb84aa](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2cb84aa43f008a769292539a41102df8bb69174c))
+* added webp logic in lazy image component ([6c4bec0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6c4bec0e6421ff982bf4bdf94fc6249dd5d11d02))
+* added webp logic in lazy image component ([afa63c8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/afa63c8122cbbe62f90486c5fffd65255d6ad03f))
+* added webp logic in lazy image component ([d58e62d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d58e62d0912788d32ece115fe954e000bf172d6b))
+
 ## [6.0.1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v6.0.0...v6.0.1) (2022-04-04)
 
 

package/package.json

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

package/src/components/atoms/menu/items/item/index.js

@@ -101,7 +101,7 @@ export default function Item({
       ) : (
         <div className={styles.item}>{item.title}</div>
       )}
-      {options.mobile.subMenuDropDownButton && isMobile && hasChildren && (
+      {options.mobile.subMenuDropDownButton && hasChildren && (
         <button
           aria-label={`${item?.title} Dropdown`}
           type="button"

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

@@ -1,9 +1,9 @@
-.itemWrapper.dropDownButton {
+.itemWrapper {
   display: flex;
   justify-content: space-between;
 
   .item {
-    width: 80%;
+    width: 100%;
   }
 }
 
@@ -33,23 +33,32 @@
   }
 }
 
-.dropDownButton button {
-  width: 20%;
-  max-width: 75px;
-  position: relative;
-  background-color: var(--primary-hover-color);
-
-  &.active {
-    @include arrow-rotate(0);
+.itemWrapper {
+  @include max(laptop) {
+    button {
+      width: 20%;
+      max-width: 75px;
+      position: relative;
+      background-color: var(--primary-hover-color);
+  
+      &.active {
+        @include arrow-rotate(0);
+      }
+  
+      &:after {
+        transition: 0.2s;
+        @include arrow(var(--nav-icon-color), 1rem, down, false);
+  
+        position: absolute;
+        top: calc(50% - 0.4rem);
+        left: calc(50% - 1.2rem);
+        margin-left: 1rem;
+      }
+    }
   }
-
-  &:after {
-    transition: 0.2s;
-    @include arrow(var(--nav-icon-color), 1rem, down, false);
-
-    position: absolute;
-    top: calc(50% - 0.4rem);
-    left: calc(50% - 1.2rem);
-    margin-left: 1rem;
+  @include min(desktop) {
+    button {
+      display: none;
+    }
   }
 }

package/src/components/atoms/menu/items/items.module.scss

@@ -5,7 +5,7 @@
     color: var(--primary-text-color);
   }
 
-  @include min(laptop) {
+  @include min(desktop) {
     @include hover-device() {
       > ul {
         max-height: 1000px;

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

@@ -52,8 +52,8 @@ export default function OperatorBanner({
                 <LazyImage alt={operator?.name} src={imagePrettyUrl(logo)} />
               </a>
             ) : (
-              <div>
-                <h3>
+              <div className={styles.nameTitle}>
+                <p>
                   <a
                     href={prettyLink}
                     title={operator?.name}
@@ -63,7 +63,7 @@ export default function OperatorBanner({
                   >
                     {operator?.name}
                   </a>
-                </h3>
+                </p>
                 {!isPlaceholder && hasStars && (
                   <StarRating numOfStars={5} rating={operator.rating} />
                 )}

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

@@ -33,7 +33,7 @@
   }
 
   > div:first-child {
-    h3 a {
+    .nameTitle a {
       @include link-color(var(--color-18));
     }
 

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getRating } from '~helpers/rating';
+
+import styles from './one-star.module.scss';
+
+const OneStar = ({ numOfStars, rating, active = true }) => (
+  <div className={`${styles.starRatingContainer} ${!active && styles.inactive}`}>
+    <span className={styles.fullStar} />
+    <span className={styles.rateNr}>{`${getRating(rating)}/${numOfStars}`}</span>
+  </div>
+);
+
+OneStar.propTypes = {
+  numOfStars: PropTypes.oneOf([5, 10]).isRequired,
+  rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
+  active: PropTypes.bool,
+};
+
+export default OneStar;

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

@@ -0,0 +1,26 @@
+.starRatingContainer {
+  @include flex-direction(row);
+  @include flex-align(center, center);
+  background-color: #ffffff;
+  min-width: 6.5rem;
+  min-height: 2.1rem;
+  border-radius: 0.4rem;
+  border: 1px solid var(--main-star-wrapper-color);
+
+  .fullStar {
+    @include star(var(--full-star-fill-color), var(--full-star-border-color));
+  }
+
+  .rateNr {
+    color: #17182f;
+    font-weight: 700;
+    font-size: 1.3rem;
+    margin-left: 0.33rem;
+  }
+
+  &.inactive {
+    .fullStar {
+      @include star(var(--empty-star-border-color), var(--empty-star-border-color));
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import OneStar from './one-star';
+
+describe('OneStar Component', () => {
+  test('render container with correct rating', async () => {
+    const { container } = render(<OneStar numOfStars={5} rating={3} />);
+
+    expect(container.querySelectorAll('span')).toHaveLength(2);
+    expect(container.querySelectorAll('span')[1].innerHTML).toBe('3/5');
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});

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

@@ -29,4 +29,4 @@
       @include half-star(var(--empty-star-border-color),  var(--empty-star-border-color), var(--halfEmpty-star-fill-color))
     }
   }
-}
+}

package/src/constants/settings.js

@@ -9,6 +9,11 @@ export default {
     'norskespilleautomater.com': ['cards', 'cards_v2'],
     'playcasino.co.za': ['cards', 'cards_v2'],
   },
+  filter_cards_modules: {
+    'irishluck.ie': ['inactive', 'blacklisted'],
+    'norskespilleautomater.com': ['inactive', 'blacklisted'],
+    'playcasino.co.za': ['inactive', 'blacklisted'],
+  },
   keep_page_extra_fields: {
     operator: {
       'norskespilleautomater.com': true, // needed for inoperative / placeholder fields

package/src/helpers/getters.js

@@ -103,6 +103,28 @@ export function getImageExtension(filename) {
   return filename && filename.split('.').pop();
 }
 
+export function isBrowserWebpCompatable(feature, callback) {
+  const kTestImages = {
+    lossy: 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
+    lossless: 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==',
+    alpha:
+      'UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==',
+    animation:
+      'UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA',
+  };
+  const img = new Image();
+  // eslint-disable-next-line func-names
+  img.onload = function () {
+    const result = img.width > 0 && img.height > 0;
+    callback(feature, result);
+  };
+  // eslint-disable-next-line func-names
+  img.onerror = function () {
+    callback(feature, false);
+  };
+  img.src = `data:image/webp;base64,${kTestImages[feature]}`;
+}
+
 export function imagePrettyUrl(filename = 'image.png', width = null, height = null) {
   const cdnURL =
     (getImageExtension(filename) === 'gif'

package/src/helpers/processor/index.js

@@ -77,6 +77,7 @@ export function transform(response) {
 
 const savedModules = {};
 export function processSections(sections, skipPost = false, page) {
+  const siteName = page && page.siteInfo && page.siteInfo.site_name;
   let minutes = 0;
   let seconds = 0;
 
@@ -89,10 +90,7 @@ export function processSections(sections, skipPost = false, page) {
     }
     if (sections[sectionKey] && sections[sectionKey].modules) {
       sections[sectionKey].modules.forEach((module, key) => {
-        if (
-          shouldSavePrefilled(module, page && page.siteInfo && page.siteInfo.site_name) &&
-          savedModules[module.module_value_id]
-        ) {
+        if (shouldSavePrefilled(module, siteName) && savedModules[module.module_value_id]) {
           module = savedModules[module.module_value_id];
         } else {
           sections[sectionKey].modules[module[key]] = processModule(
@@ -105,7 +103,7 @@ export function processSections(sections, skipPost = false, page) {
             previewMode
           );
 
-          if (shouldSavePrefilled(module, page && page.siteInfo && page.siteInfo.site_name)) {
+          if (shouldSavePrefilled(module, siteName)) {
             savedModules[module.module_value_id] = module;
           }
         }

package/src/helpers/processor/modules.js

@@ -16,9 +16,12 @@ export function processCardsModule(module, pages, pagesCloned, pagesMappedById)
 
   if (displayInput === 'automatic' && pages[modelType]) {
     const numOfItems =
-      Math.sign(module.num_of_items) === 0 ? pages[modelType].length : module.num_of_items;
+      Math.sign(module.num_of_items) === 0 ? pages[modelType].length : Number(module.num_of_items);
     if (sortBy === 'random') {
-      module.items = sampleSize(pagesCloned[modelType], numOfItems);
+      const samplePages = pagesCloned[modelType].filter(
+        (page) => !settings.filter_cards_modules[process.env.GATSBY_SITE_NAME].includes(page.status)
+      );
+      module.items = sampleSize(samplePages, numOfItems);
     } else {
       module.items = pagesCloned[modelType].slice(0, numOfItems);
     }
@@ -177,7 +180,11 @@ export function processCardsV2(module, pagesCloned, pagesMappedById) {
 
       // Applying sorting
       if (sortType === 'random') {
-        module.items = sampleSize(uniquePages, itemLimit);
+        const samplePages = uniquePages.filter(
+          (page) =>
+            !settings.filter_cards_modules[process.env.GATSBY_SITE_NAME].includes(page.status)
+        );
+        module.items = sampleSize(samplePages, itemLimit);
       } else if (sortType === 'latest') {
         if (uniquePages.length > 0) {
           uniquePages.sort((a, b) => (a.created_at > b.created_at ? -1 : 1));
@@ -216,9 +223,12 @@ export function processTopListModule(module, relations) {
 }
 
 export function shouldSavePrefilled(module = {}, siteName) {
-  return module.value_type === ModuleValue.VALUE_TYPE_PREFILLED_MODULE_MARKET &&
-    ((settings.dynamic_prefilled_modules[siteName] && !settings.dynamic_prefilled_modules[siteName].includes(module.name)) ||
-      module.sort_by !== 'random');
+  return (
+    module.value_type === ModuleValue.VALUE_TYPE_PREFILLED_MODULE_MARKET &&
+    ((settings.dynamic_prefilled_modules[siteName] &&
+      !settings.dynamic_prefilled_modules[siteName].includes(module.name)) ||
+      module.sort_by !== 'random')
+  );
 }
 
 export function processModule(

package/src/helpers/processor/modules.test.js

@@ -39,6 +39,25 @@ describe('Modules Helper', () => {
     expect(moduleData.items).toHaveLength(4);
   });
 
+  test('Cards V2 FIltered inactive', () => {
+    process.env.GATSBY_SITE_NAME = 'irishluck.ie';
+    const pagesNum = 10;
+    const moduleData = getSampleCardsV2Filtered(false, 'Game');
+    moduleData.cards_selector_filters_sort_by = 'random';
+    moduleData.cards_selector_filters_limit = '3';
+    const pageList = getPageDataList(pagesNum).map((page, i) =>
+      i % 2
+        ? { ...page, type: 'game', status: 'inactive' }
+        : { ...page, type: 'game', status: 'active' }
+    );
+    processCardsV2(moduleData, groupBy(pageList, 'type'));
+
+    expect(moduleData.items).toHaveLength(3);
+    moduleData.items.forEach((item) => {
+      expect(item.id % 2).toEqual(0);
+    });
+  });
+
   test('filterPages function', () => {
     const pages = getPageDataList(3);
     pages[0].author_id = 1;

package/src/hooks/lazy-image/index.js

@@ -3,6 +3,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import LazyLoad from 'react-lazyload';
 import { isNativeImageLazyLoadingSupported } from '~helpers/device-detect';
+import { isBrowserWebpCompatable } from '~helpers/getters';
 
 export default function LazyImage({
   height,
@@ -16,10 +17,16 @@ export default function LazyImage({
 }) {
   const [errorImage, setErrorImage] = useState(false);
   const [nonNativeLazyLoaded, setNonNativeLazyLoaded] = useState(false);
+  const [imageSrc, setImageSrc] = useState(src);
 
   useEffect(() => {
     setNonNativeLazyLoaded(!isNativeImageLazyLoadingSupported());
-  }, []);
+    isBrowserWebpCompatable('lossy', (_feature, isSupported) => {
+      if (!isSupported && src) {
+        setImageSrc(src.replace('filters:format(webp)/', ''));
+      }
+    });
+  }, [src]);
 
   if ((defaultImg && !src) || errorImage === true) {
     return defaultImg;
@@ -27,7 +34,7 @@ export default function LazyImage({
 
   return !nonNativeLazyLoaded ? (
     <img
-      src={src}
+      src={imageSrc}
       loading={loading}
       className={className}
       height={height}
@@ -45,7 +52,7 @@ export default function LazyImage({
         debounce={0}
       >
         <img
-          src={src}
+          src={imageSrc}
           className={className}
           height={height}
           width={width}
@@ -55,7 +62,7 @@ export default function LazyImage({
       </LazyLoad>
       <noscript>
         <img
-          src={src}
+          src={imageSrc}
           className={className}
           height={height}
           width={width}

package/src/styles/utils/_mixins.scss

@@ -65,9 +65,9 @@
     pointer-events: none;
     border-color: rgba(0, 0, 0, 0);
     border-top: $height solid $color;
-    border-right: $width/2 solid transparent;
-    border-left: $width/2 solid transparent;
-    margin-left: -$width/2;
+    border-right: calc($width / 2) solid transparent;
+    border-left: calc($width / 2) solid transparent;
+    margin-left: - calc($width / 2);
   }
 }
 
@@ -103,8 +103,7 @@
   }
 }
 
-
-@mixin half-star($border-color: #fba62f, $half-empty-color: #fba62f , $half-full-color: white) {
+@mixin half-star($border-color: #fba62f, $half-empty-color: #fba62f, $half-full-color: white) {
   line-height: 2rem;
   width: 16px;
   font-weight: normal;

package/src/styles/utils/variables/_main.scss

@@ -16,6 +16,7 @@
   --half-star-border-color: #fba62f;
   --empty-star-fill-color: white;
   --empty-star-border-color: grey;
+  --main-star-wrapper-color: #a5bcf0;
 
   // Font
   --main-font: Nunito;

package/tests/factories/modules/card.factory.js

@@ -326,12 +326,12 @@ export function getSampleCardsV2ModuleManual() {
   return sampleOperatorCards;
 }
 
-export function getSampleCardsV2Filtered(empty = false) {
+export function getSampleCardsV2Filtered(empty = false, type = 'Operator') {
   const sampleOperatorCards = {
-    cards_page_type: 'operator',
+    cards_page_type: type.toLocaleLowerCase(),
     cards_page_type_id: 5,
     cards_selector: 'use_filters',
-    module_title: `Operator Cards`,
+    module_title: `${type} Cards`,
     link_label: 'View more',
     link_value: '/sample',
     cards_selector_filters_limit: '4',