gatsby-core-theme 2.0.5 → 2.0.9

package/CHANGELOG.md

@@ -1,3 +1,70 @@
+## [2.0.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.8...v2.0.9) (2022-01-03)
+
+
+### Bug Fixes
+
+* added translatable text in author ([8a3c5e5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8a3c5e5491f45077f7e97e869097cadbd30c719b))
+
+
+### Tests
+
+* added sample data ([6d930cf](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6d930cfa577cd58a583594f64e7658a77ad4d6af))
+
+## [2.0.8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.7...v2.0.8) (2022-01-03)
+
+
+### Bug Fixes
+
+* add the deposit on the JSON for comparison tabel ([ba91365](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ba9136579c612069001b7db3ad776085d0f54b3a))
+* configured author name to use span insstead of h3 ([a09a058](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a09a058d13a047e496ddad7f4b6c06d016ff3614))
+* spotlight test ([26c38dc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/26c38dc9bdffa194bc7514b94245cdd0d9dd2be3))
+
+
+### Code Refactoring
+
+* add index.html for demo site ([d409824](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d409824e054551ba933208e331062f068294eb0d))
+* fix tests for head meta tags ([3c05e95](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/3c05e956143f726615da87d2653a7248f65fba48))
+* gray out stars of closed operators ([dc6a38c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/dc6a38c1d4015e4a056db28a77247facf34c62b2))
+* remove head charset meta tag ([c45f173](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c45f173ac56fca34cb294ebfd800d3a0730f8737))
+* update conditional empty classes ([06b681d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/06b681d9cb0418dbab43016a777cc641a6f685b0))
+* update conditional height/width on LazyLoad ([7ca4e13](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7ca4e138fd1bc572dcfbe2ca153450f2525c2a87))
+* update lazyLoad render component class for test ([fc2cac7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fc2cac7569a02979c2992fe6ee4950c5bace707b))
+* update lazyLoad render component for test ([d442df1](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d442df1dfff6f698f942e2e3b064935ee519f037))
+* update lazyLoad render component to span for test ([64ddc5c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/64ddc5caadb0ae9301cab0b348a20e090c3cbced))
+* update meta tags attributes in main html for demo ([aa1486b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/aa1486b4aa9f08da78d44788e831cf9591c20c8f))
+* update search close icon to span ([cc0d1b4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cc0d1b4b553fff7ed03aa7dd598e6455b851a074))
+* update slider container interact ([da08a28](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/da08a28a63ed389d3640fd5c8a72d3d2de4ab14d))
+
+
+* Merge branch 'TM-2585-casino-comparison-module' into 'master' ([1fd52cc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1fd52cce08e66040dd84080a295230fee395dc86))
+* Merge branch 'tm-2567-update-theme-for-w3-validator' into 'master' ([a6c9a9c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a6c9a9c85c56aff852b6feeb4d271848b5af7c72))
+* Merge branch 'master' into TM-2585-casino-comparison-module ([fd0749b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fd0749b3a601eddb8946890f38d463bc02c7474d))
+* Merge branch 'tm-2633-author-name' into 'master' ([2acc151](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2acc151fadc9c34723660d2e349b890b72b08c30))
+* Merge branch 'grayout-star-rating' into 'master' ([09920fa](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/09920fa9bd32b315e7b15cdf9843c0999a47e80f))
+* Merge branch 'master' into tm-2567-update-theme-for-w3-validator ([33adc57](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/33adc57a13a9bfc33e3ee1b27360f11f41691550))
+* Merge branch 'master' into tm-2633-author-name ([712e1c9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/712e1c9662d27c77ae4618d3f703c203e4821af9))
+* Merge branch 'master' into tm-2633-author-name ([db8c180](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/db8c1805d4d2e25640214caad97a22d5d78fc4a0))
+* Merge branch 'master' into tm-2567-update-theme-for-w3-validator ([fb3a0fa](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fb3a0fa2a3edec0de8bb58b21e758b8c1c82dd01))
+* Merge branch 'master' into tm-2567-update-theme-for-w3-validator ([1e94ede](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1e94ede9bc51c2c6c43bb2d0ed55f08e37812523))
+
+## [2.0.7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.6...v2.0.7) (2021-12-23)
+
+
+### Bug Fixes
+
+* spotlight ([07c238b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/07c238b0003de01cd6adf2c2c16080f734dc2029))
+* spotlight test ([e649604](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e649604c45d6064d29ba022ac59f71f04ad0ed4b))
+
+## [2.0.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.5...v2.0.6) (2021-12-22)
+
+
+### Bug Fixes
+
+* spotlights component ([04bb5db](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/04bb5dbb2fd3ce69c511a99b16e7747dcdc7c3f6))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([c7653a6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c7653a6da041061559855106cd6dfa7f9581a2c7))
+
 ## [2.0.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.4...v2.0.5) (2021-12-22)
 
 

package/package.json

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

package/src/components/atoms/author-box/author-box.module.scss

@@ -16,7 +16,9 @@
         border-radius: 50%;
       }
       .name {
-        margin: 3rem 0 .5rem 0;
+        margin: 3rem 0 0.5rem 0;
+        font-weight: bold;
+        font-size: var(--h3-mobile-size);
       }
       .title {
         margin-bottom: 2rem;
@@ -34,7 +36,7 @@
           color: var(--text-link-color);
           order: 2;
           a {
-            padding: 0 .5rem;
+            padding: 0 0.5rem;
             line-height: 1.5rem;
             &:hover {
               text-decoration: underline;
@@ -47,7 +49,7 @@
         .socialIcons {
           order: 3;
           svg {
-            margin: 0 .3rem;
+            margin: 0 0.3rem;
           }
         }
         .biography {
@@ -59,9 +61,9 @@
       }
       .button {
         border: 2px solid var(--color-3);
-        padding: .8rem 3rem;
+        padding: 0.8rem 3rem;
         color: var(--color-3);
-        border-radius: .5rem;
+        border-radius: 0.5rem;
         font-weight: bold;
         margin-top: 2rem;
         &:hover {
@@ -89,4 +91,4 @@
       }
     }
   }
-}
+}

package/src/components/atoms/author-box/index.js

@@ -25,7 +25,7 @@ export default function AuthorBox({ author }) {
             width={author.image_object?.width}
             height={author.image_object?.height}
           />
-          <h3 className={styles.name}>{author.name}</h3>
+          <span className={styles.name}>{author.name}</span>
           <p className={styles.title}>{author.author_title}</p>
         </div>
         <div className={styles.description}>
@@ -38,7 +38,7 @@ export default function AuthorBox({ author }) {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  Email
+                  {translate(translations, 'email', 'Email')}
                 </a>
               )}
               {author.personal_website && (
@@ -48,7 +48,7 @@ export default function AuthorBox({ author }) {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  Website
+                  {translate(translations, 'website', 'Website')}
                 </a>
               )}
               {author.additional_url && (
@@ -58,7 +58,7 @@ export default function AuthorBox({ author }) {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  Contact
+                  {translate(translations, 'contact', 'Contact')}
                 </a>
               )}
             </p>

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

@@ -18,7 +18,12 @@ const Spotlights = ({ module }) => {
     return (
       <>
         <span className={styles.itemImage}>
-          <LazyImage alt={item.label || item?.link_text} src={imagePrettyUrl(img)} />
+          <LazyImage
+            width={100}
+            height={50}
+            alt={item.label || item?.link_text}
+            src={imagePrettyUrl(img)}
+          />
         </span>
         <div className={styles.content}>
           <span className={styles.label}>{item.label}</span>
@@ -29,7 +34,7 @@ const Spotlights = ({ module }) => {
   };
 
   return (
-    <div className={styles.spotlightsContainer}>
+    <div className={`${styles.spotlightsContainer} ${module.style ? styles[module.style] : ''}`}>
       {show_read_more === '1' && (
         <div
           className={styles.spotlightstext}
@@ -63,7 +68,7 @@ const Spotlights = ({ module }) => {
 
             {mode === 'image_text' && (
               <div className={styles.body}>
-                <p className={styles.text} dangerouslySetInnerHTML={{ __html: item.text }} />
+                <div className={styles.text} dangerouslySetInnerHTML={{ __html: item.text }} />
                 {item.link.value && item.link.type === 'external' ? (
                   <a
                     href={item.link.value}
@@ -81,6 +86,7 @@ const Spotlights = ({ module }) => {
                       <Button
                         btnText={item.link_text ? item.link_text : 'Read More'}
                         invertColors
+                        className={styles.readMore}
                         isAnchorLink
                         isInternalLink={item.link.type !== 'external'}
                         targetBlank={item.link.type === 'external'}
@@ -101,6 +107,7 @@ const Spotlights = ({ module }) => {
 };
 Spotlights.propTypes = {
   module: PropTypes.shape({
+    style: PropTypes.string,
     mode: PropTypes.oneOf(['image', 'icon', 'image_text']).isRequired,
     items: PropTypes.arrayOf(
       PropTypes.shape({

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

@@ -29,6 +29,7 @@
         width: 100%;
         height: 15rem;
         img {
+          width: auto;
           height: 100%;
           object-fit: cover;
         }

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

@@ -12,7 +12,7 @@ describe('Spotlights Component', () => {
     expect(container.querySelector('div.spotlightstext')).toBeTruthy();
     expect(container.querySelector('ul.image_text')).toBeTruthy();
     expect(container.querySelectorAll('li.spotlightItem')).toHaveLength(4);
-    expect(container.querySelectorAll('p.text')).toHaveLength(4);
+    expect(container.querySelectorAll('div.text')).toHaveLength(4);
     expect(container.querySelectorAll('.readMore')).toHaveLength(4);
     expect(container.querySelectorAll('.label')).toHaveLength(4);
     expect(container.querySelectorAll('.itemImage')).toHaveLength(4);

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

@@ -198,14 +198,7 @@ function Slider({
             onKeyDown: () => arrowHandler('next'),
             disabled: Math.abs(state.slideIndex) === state.length - 1 && true,
           })}
-        <div
-          tabIndex="0"
-          role="button"
-          className={`${styles.sliderContent}`}
-          style={style}
-          ref={sliderContentRef}
-          aria-label="Slider Content Button"
-        >
+        <div className={`${styles.sliderContent}`} style={style} ref={sliderContentRef}>
           {children.map((slide, index) => (
             <div
               // eslint-disable-next-line react/no-array-index-key

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

@@ -5,7 +5,7 @@ import styles from './star-rating.module.scss';
 import keygen from '~helpers/keygen';
 import { getRating } from '~helpers/rating';
 
-const StarRating = ({ numOfStars, rating, halfStars = true }) => {
+const StarRating = ({ numOfStars, rating, halfStars = true, active = true }) => {
   const renderFarm = () => {
     const output = [];
     const rate = getRating(rating);
@@ -35,7 +35,9 @@ const StarRating = ({ numOfStars, rating, halfStars = true }) => {
   };
   return (
     <LazyLoad>
-      <div className={styles.starRatingContainer}>{renderFarm()}</div>
+      <div className={`${styles.starRatingContainer} ${!active && styles.inactive}`}>
+        {renderFarm()}
+      </div>
     </LazyLoad>
   );
 };
@@ -44,6 +46,7 @@ StarRating.propTypes = {
   numOfStars: PropTypes.oneOf([5, 10]).isRequired,
   rating: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]).isRequired,
   halfStars: PropTypes.bool,
+  active: PropTypes.bool,
 };
 
 export default StarRating;

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

@@ -19,4 +19,14 @@
   .emptyStar{
     @include star(var(--empty-star-border-color), var(--empty-star-fill-color))
   }
+
+  &.inactive {
+    .fullStar{
+      @include star(var(--empty-star-border-color), var(--empty-star-border-color))
+    }
+  
+    .halfStar{
+      @include half-star(var(--empty-star-border-color),  var(--empty-star-border-color), var(--halfEmpty-star-fill-color))
+    }
+  }
 }

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

@@ -51,7 +51,7 @@ const Sticky = ({
         !isScrolled && showOnScroll ? styles.notScrolled : ''
       } ${className}`}
     >
-      <div className={!fullWidth ? styles.container : ''}>{children}</div>
+      <div className={!fullWidth ? styles.container : null}>{children}</div>
     </div>
   );
 };

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

@@ -58,10 +58,10 @@ describe('Head Component', () => {
       expect(document.title).toEqual('my meta title');
       expect(document.documentElement.lang).toEqual('en');
       expect(document.querySelectorAll('link[rel=preconnect]')).toHaveLength(3);
-      expect(document.getElementsByTagName('meta')[1].getAttribute('content')).toEqual(
+      expect(document.getElementsByTagName('meta')[0].getAttribute('content')).toEqual(
         'my meta description'
       );
-      expect(document.getElementsByTagName('meta')[2].getAttribute('content')).toEqual(
+      expect(document.getElementsByTagName('meta')[1].getAttribute('content')).toEqual(
         'one,two,three'
       );
 

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

@@ -42,7 +42,6 @@ const Head = ({ page = {}, siteInfo }) => {
   // When google re-indexes dev NSA and IRL, remove lines 28, 41, 42, 43 and process.env.GATSBY_ACTIVE_ENV !== 'development' from lines 24, 25, 27, 29, 43
   return (
     <Helmet>
-      <meta charSet="utf-8" />
       <title>{page.meta_title}</title>
       <html lang={getLanguage(page.language)} />
       <meta name="description" content={page.meta_description} />

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

@@ -52,7 +52,7 @@ const SearchForm = ({ className, searchIcon, iconWidth = 24, iconHeight = 24 })
         ) : (
           <img alt="search" src={searchIcon} width={iconWidth} height={iconHeight} />
         )}
-        <div className={styles.close} />
+        {styles.close && <span className={styles.close} />}
       </button>
       {showSearch && (
         <div

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

@@ -43,7 +43,7 @@ export default function List({
       <ul className={styles.list} key={keygen()}>
         {toplist.items.map((item, index) => (
           <li
-            className={index + 1 <= initLoadItems ? styles.show : ''}
+            className={index + 1 <= initLoadItems ? styles.show : null}
             key={keygen()}
             ref={(el) => (elRefs.current[index] = el)}
           >

package/src/helpers/processor/common.js

@@ -23,14 +23,13 @@ export function groupBy(list, keyName = 'author_id', single = false) {
   return newObj;
 }
 
-export function clonePageForCards(item) {
+export function clonePageForCards(item, style) {
   const siteName = process.env.GATSBY_SITE_NAME;
   if (item.type === 'operator') {
     if (settings.delete_operator_software[siteName]) {
       delete item.relation.software;
     }
   }
-
   // remove unwanted sections
   if (settings.keep_sections[item.type] && settings.keep_sections[item.type][siteName]) {
     const keepSections = settings.keep_sections[item.type][siteName];
@@ -69,7 +68,7 @@ export function clonePageForCards(item) {
 
   const object = pick(item, pickPageKeys);
   object.relation = pick(item.relation, pickRelationKeys[item.type]);
-  if (item.type === 'operator') {
+  if (item.type === 'operator' && style !== 'comparison_table') {
     delete object.relation.bonus.deposit_methods;
   }
 

package/src/helpers/processor/modules.js

@@ -179,7 +179,7 @@ export function processCardsV2(module, pagesCloned, pagesMappedById) {
     }
   }
   // modify page so it doesn't have too much data
-  module.items = module.items.map((item) => clonePageForCards(cloneDeep(item)));
+  module.items = module.items.map((item) => clonePageForCards(cloneDeep(item), module.style));
 }
 
 export function processBonus(module, relations) {

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

@@ -23,7 +23,12 @@ export default function LazyImage({
   if (!isNativeImageLazyLoadingSupported()) {
     const LazyLoad = loadable(() => import(`react-lazyload`));
     return (
-      <LazyLoad height={`${height}px`} width={`${width}px`} debounce={0}>
+      <LazyLoad
+        height={height ? `${height}px` : null}
+        width={width ? `${width}px` : null}
+        placeholder={<span className="lazyload-placeholder" />}
+        debounce={0}
+      >
         <img
           src={src}
           className={className}

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

@@ -183,6 +183,32 @@ export function getSampleOperatorCards(type) {
             'Great website and app design',
             'Wager-free free spins',
           ],
+          bonus: {
+            deposit_methods: [
+              {
+                logo_filename: 'apple.png',
+              },
+              {
+                logo_filename: 'visapng339205421f-original.png',
+              },
+              {
+                logo_filename: 'mastercard-logo.png',
+              },
+            ],
+            license_objects: [
+              {
+                logo_filename: 'mga-6.png',
+              },
+            ],
+            currencies: [
+              {
+                iso_code: 'ZAR',
+              },
+              {
+                iso_code: 'EUR',
+              },
+            ],
+          },
         },
         extra_fields: {
           card_background_image: '2831afbf54038c1266f8c7fbcff20857.png',
@@ -203,6 +229,26 @@ export function getSampleOperatorCards(type) {
             ribbon_color: '#FFC740',
             ribbon_text: 'Exclusive Bonus',
           },
+          bonus: {
+            deposit_methods: [
+              {
+                logo_filename: 'visapng339205421f-original.png',
+              },
+              {
+                logo_filename: 'mastercard-logo.png',
+              },
+            ],
+            license_objects: [
+              {
+                logo_filename: 'curacao-casino-license.png',
+              },
+            ],
+            currencies: [
+              {
+                iso_code: 'EUR',
+              },
+            ],
+          },
           selling_points: ['Over 1000 games', 'Loyalty Programme', 'Wager-free free spins'],
         },
       },
@@ -217,6 +263,32 @@ export function getSampleOperatorCards(type) {
               one_liner: '100% up to €500 + 400 spins',
             },
           },
+          bonus: {
+            deposit_methods: [
+              {
+                logo_filename: 'apple.png',
+              },
+              {
+                logo_filename: 'visapng339205421f-original.png',
+              },
+            ],
+            license_objects: [
+              {
+                logo_filename: 'mga-6.png',
+              },
+              {
+                logo_filename: 'curacao-casino-license.png',
+              },
+            ],
+            currencies: [
+              {
+                iso_code: 'GBP',
+              },
+              {
+                iso_code: 'EUR',
+              },
+            ],
+          },
           selling_points: ['Over 1000 games', 'Slick, modern interface'],
         },
       },