gatsby-core-theme 2.0.16 → 2.1.0

package/CHANGELOG.md

@@ -1,3 +1,64 @@
+# [2.1.0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.19...v2.1.0) (2022-01-13)
+
+
+### Bug Fixes
+
+* added dmca as component ([2aae7bc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2aae7bc3cf0d8ba1210154ad0f7aecd24221c92d))
+* added lazyload and image added as prop ([71b7ad7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/71b7ad70f0499a09eeada813fce007c273c99422))
+* test ([d103191](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d103191b379926afd7ae9effcd29f0cbe61d9c28))
+
+
+### Code Refactoring
+
+* update counter and counterItem for w3 validator ([9ebbcdc](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/9ebbcdcbe14f0a5adf8ca6acedfbe1c7c7b19ec3))
+* update css parser for w3 validator ([db7dd7d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/db7dd7d76f3d0404a19471bdf45e883bff635512))
+
+
+* Merge branch 'tm-2654-open-graph' into 'master' ([0e2a375](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/0e2a37579483adde033aa19e58b677fa80e75f3a))
+* Merge branch 'tm-2567-update-theme-for-w3-validator' into 'master' ([cb0ab99](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cb0ab990a56d26a7591bb089d2ed38f001b0cc74))
+* Merge branch 'tm-2625-dmca-implementation' into 'master' ([8cb7230](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8cb7230734fb97c2222ebb8207c646206ab9d92c))
+* Merge branch 'tm-2567-update-theme-for-w3-validator' into tm-2567-update-theme-for-w3-validator ([2a0701e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2a0701e35a71d0d00e86d303d82843b0897531fb))
+
+
+### Features
+
+* added new og properties ([2aba269](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2aba2697f9f80b1326e0118a8bf80f50f52e721f))
+
+## [2.0.19](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.18...v2.0.19) (2022-01-11)
+
+
+### Bug Fixes
+
+* bonus and selleing points extra divs ([892d6a4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/892d6a4542efeb16717136472b0422ca5e089ca8))
+* make key dynamic cta ([a7b883c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a7b883cfa2010d5e95d54137e1cb7f86a92115ac))
+
+
+* Merge branch 'tm-2473-lottery-fixes' into 'master' ([fbc331c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fbc331c1d3f8ff3276b56e518e6de3e359393fc2))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([86b2be9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/86b2be99241420c6fb77fb3bea3e22f69a1ddb98))
+
+## [2.0.18](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.17...v2.0.18) (2022-01-10)
+
+
+### Config
+
+* reverted gatsby upgrade ([4155578](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/415557860165a0e9fa5a327470cea2570d0d57ed))
+
+## [2.0.17](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.16...v2.0.17) (2022-01-10)
+
+
+### Bug Fixes
+
+* removing cards extra divs ([7096d88](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/7096d88b480a43d4d8bd5245cf403b07f194fae0))
+* updated html parser package ([332b237](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/332b237bc728bfe57766fab1bced598ad18ceeb6))
+
+
+### Config
+
+* updated gatsby packages ([cdfc9c3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/cdfc9c3681db2603061b0fcc1f4ef634ce12e7a1))
+
+
+* Merge branch 'upgrade' into 'master' ([e38a936](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/e38a936bc76221072c5d0e89c66fccd3df3cbad7))
+
 ## [2.0.16](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v2.0.15...v2.0.16) (2022-01-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "2.0.16",
+  "version": "2.1.0",
   "description": "Gatsby Theme NPM Package",
   "main": "index.js",
   "GATSBY_RECAPTCHA_SITEKEY": "6LfoyvMUAAAAAO4nl_MQnqHb4XdHxEiu5cXgIqeB",
@@ -45,7 +45,7 @@
     "gatsby-plugin-webfonts": "^2.1.0",
     "gatsby-source-filesystem": "^3.3.0",
     "gatsby-transformer-sharp": "^3.3.0",
-    "html-react-parser": "^1.2.5",
+    "html-react-parser": "^1.3.0",
     "js-search": "^2.0.0",
     "lodash": "^4.17.15",
     "node-sass": "5.0.0",

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

@@ -1,15 +1,12 @@
-.bonus {
-  @include flex-direction(column);
-  div:first-child {
-    font-size: 2rem;
-    font-weight: 700;
-    color: var(--primary-color);
-    padding-right: 1rem;
-  }
-  div:nth-child(2) {
-    font-size: 1.6rem;
-    color: var(--color-22);
-    font-weight: 700;
-    padding: 0.5rem 0;
-  }
+.title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--primary-color);
+  padding-right: 1rem;
+}
+.desc {
+  font-size: 1.6rem;
+  color: var(--color-22);
+  font-weight: 700;
+  padding: 0.5rem 0;
 }

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

@@ -8,10 +8,9 @@ import Bonus from '.';
 describe('Bonus Component', () => {
   test('render with props', () => {
     const item = getToplistItem();
-    const { container, getByText } = render(<Bonus item={item} tracker="main" />);
+    const { getByText } = render(<Bonus item={item} tracker="main" />);
     expect(getByText('€100 welcome bonus')).toBeTruthy();
     expect(getByText('€100 welcome bonus').getAttribute('class')).toEqual('title');
-    expect(container.querySelector('div.bonus')).toBeTruthy();
   });
   test('without oneLiner', () => {
     const { container } = render(

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

@@ -14,12 +14,10 @@ const Bonus = ({ item, tracker = 'main' }) => {
   const onelinerSplitted = oneLiner.one_liner.split('+');
 
   return (
-    <div className={styles.bonus}>
-      <div className={styles.title}>{onelinerSplitted[0]}</div>
-      {onelinerSplitted.length === 2 && (
-        <div className={styles.desc}>{`+${onelinerSplitted[1]}`}</div>
-      )}
-    </div>
+    <>
+      <p className={styles.title}>{onelinerSplitted[0]}</p>
+      {onelinerSplitted.length === 2 && <p className={styles.desc}>{`+${onelinerSplitted[1]}`}</p>}
+    </>
   );
 };
 

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+
+import '@testing-library/jest-dom/extend-expect';
+
+import Disclaimer from '.';
+
+const dmcaImg = (
+  <img
+    src="https://images.dmca.com/Badges/_dmca_premi_badge_1.png?ID=9e466e76-827d-4247-ac51-4eb75b227301"
+    alt="DMCA.com Protection Status"
+  />
+);
+
+describe('Disclaimer Component', () => {
+  test('render disclaimer badge', () => {
+    const { container } = render(<Disclaimer image={dmcaImg} />);
+    expect(container.querySelectorAll('.lazyload-placeholder')).toHaveLength(1);
+    expect(container.querySelector('div')).toBeTruthy();
+  });
+});
+afterEach(() => {
+  cleanup();
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import LazyLoad from 'react-lazyload';
+
+const Disclaimer = ({ image }) => (
+  <LazyLoad>
+    <a
+      href="//www.dmca.com/Protection/Status.aspx?ID=9e466e76-827d-4247-ac51-4eb75b227301"
+      title="DMCA.com Protection Status"
+      className="dmca-badge"
+      target="_blank"
+      rel="noreferrer"
+    >
+      {image}
+    </a>
+    <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script>
+  </LazyLoad>
+);
+
+export default Disclaimer;
+
+Disclaimer.propTypes = {
+  image: PropTypes.node,
+};

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

@@ -12,6 +12,7 @@ export default function OperatorCta({
   placeholderText = 'Coming Soon',
   closedCasinoText = 'This Casino has closed',
   playText = 'Visit',
+  translationKey = 'play_now',
   tracker = 'main',
   gtmClass = '',
 }) {
@@ -46,7 +47,7 @@ export default function OperatorCta({
 
     const trackerType = tracker.toLowerCase().replace(' ', '_');
     const prettyLink = prettyTracker(operator, trackerType);
-    const translateBtn = translate(translations, 'play_now', playText);
+    const translateBtn = translate(translations, translationKey, playText);
     return (
       <Button
         to={prettyLink}

package/src/components/atoms/selling-points/index.js

@@ -11,9 +11,8 @@ const SellingPoints = ({ sellingPoints, icon, limit = 3 }) => {
   return (
     <ul className={styles.sellingPoint}>
       {sellingPoints.slice(0, limit).map((item) => (
-        <li key={keygen()}>
-          <span className={`${icon && styles.tick}`}>{` `}</span>
-          <span>{item}</span>
+        <li className={`${icon && styles.tick}`} key={keygen()}>
+          {item}
         </li>
       ))}
     </ul>

package/src/components/atoms/selling-points/selling-points.module.scss

@@ -7,7 +7,7 @@
     font-size: 1.4rem;
     width: 100%;
 
-    .tick {
+    &.tick {
       position: relative;
       margin-left: 2rem;
       &::before {
@@ -16,7 +16,6 @@
         padding: 0px 0px .8rem .32rem;
         border-right-width: .18rem;
         border-bottom-width: .18rem;
-        bottom: -.3rem;
         left: -1.8rem;
       }
     }

package/src/components/molecules/counter/counter-item/counter-item.module.scss

@@ -1,19 +1,14 @@
-.counterItem {
-  @include flex-align(center, center);
-  flex-direction: column;
-
-  .title {
-    color: black;
-    font: {
-      size: var(--h2-size);
-      weight: bold;
-    }
+.title {
+  color: black;
+  font: {
+    size: var(--h2-size);
+    weight: bold;
   }
+}
 
-  .value {
-    font: {
-      weight: bold;
-      size: 10rem;
-    }
+.value {
+  font: {
+    weight: bold;
+    size: 10rem;
   }
 }

package/src/components/molecules/counter/counter-item/index.js

@@ -5,20 +5,18 @@ import LazyLoad from 'react-lazyload';
 import CountNumber from './count-number';
 import styles from './counter-item.module.scss';
 
-const CounterItem = ({ data, icon }) => {
-  return (
-    <li className={styles.counterItem}>
-      <div className={styles.title}>{data.title}</div>
-      <div className={styles.value}>
-        {icon && icon}
-        {/* run count up if the item is visible and has not counted up yet */}
-        <LazyLoad>
-          <CountNumber end={parseInt(data.value)} />
-        </LazyLoad>
-      </div>
-    </li>
-  );
-};
+const CounterItem = ({ data, icon }) => (
+  <>
+    <div className={styles.title}>{data.title}</div>
+    <div className={styles.value}>
+      {icon && icon}
+      {/* run count up if the item is visible and has not counted up yet */}
+      <LazyLoad>
+        <CountNumber end={parseInt(data.value)} />
+      </LazyLoad>
+    </div>
+  </>
+);
 
 CounterItem.propTypes = {
   data: PropTypes.shape({

package/src/components/molecules/counter/counter.module.scss

@@ -8,6 +8,8 @@
   }
 
   li {
+    @include flex-align(center, center);
+    flex-direction: column;
     width: 40rem;
     height: 20rem;
     background: white;

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

@@ -7,20 +7,22 @@ import CounterItem from './counter-item';
 import styles from './counter.module.scss';
 import keygen from '~helpers/keygen';
 
-const Counter = ({ module }) => {
-  return (
-    <>
-      {module.content && (
-        <p className={styles.counterContent} dangerouslySetInnerHTML={{ __html: module.content }} />
-      )}
-      <ul className={styles.counter}>
-        {module.items.map((item) => {
-          return <CounterItem data={item} key={keygen()} />;
-        })}
-      </ul>
-    </>
-  );
-};
+const Counter = ({ module }) => (
+  <>
+    {module.content && (
+      <p className={styles.counterContent} dangerouslySetInnerHTML={{ __html: module.content }} />
+    )}
+    <ul className={styles.counter}>
+      {module.items.map((item) => {
+        return (
+          <li>
+            <CounterItem data={item} key={keygen()} />;
+          </li>
+        );
+      })}
+    </ul>
+  </>
+);
 
 Counter.propTypes = {
   module: PropTypes.shape({

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

@@ -43,7 +43,14 @@ const Row = ({ item, oneliner = 'main', layout = 'list', tracker = 'main' }) =>
           height={40}
         />
       </a>
-      <Bonus item={item} tracker={oneliner} />
+      <a
+        href={prettyLink}
+        target="_blank"
+        rel="noreferrer"
+        className="toplist-variant-one-gtm bonus-cta"
+      >
+        <Bonus item={item} tracker={oneliner} />
+      </a>
       <StarRating numOfStars={5} rating={itemRating} />
       <SellingPoints icon={<MdCheck />} sellingPoints={item.selling_points} />
       <div>

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

@@ -12,6 +12,7 @@ const CardsGridStyles = ({
   mobileColumns = 2,
   tabletColumns = 3,
   desktopColumns = 4,
+  className = '',
 }) => {
   const divStyle = {
     '--cards-mob-column': `${
@@ -24,10 +25,15 @@ const CardsGridStyles = ({
       module.desktop_num_of_columns ? module.desktop_num_of_columns : desktopColumns
     }`,
   };
-  return <div style={divStyle}>{children}</div>;
+  return (
+    <div className={className} style={divStyle}>
+      {children}
+    </div>
+  );
 };
 
 CardsGridStyles.propTypes = {
+  className: PropTypes.string,
   module: PropTypes.shape({
     mobile_num_of_columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     tablet_num_of_columns: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -53,25 +59,23 @@ const Cards = ({
     desktopColumns={desktopColumns}
     tabletColumns={tabletColumns}
     mobileColumns={mobileColumns}
+    className={styles.cardsContainer}
   >
-    <div className={styles.cardsContainer}>
-      {module.items &&
-        module.items.map((item, index) => (
-          <div key={keygen()}>
-            {CustomCardComponent ? (
-              <CustomCardComponent
-                featured={module.style === 'featured'}
-                item={item}
-                type={item.type}
-                number={index + 1}
-                page={page}
-              />
-            ) : (
-              <Card item={item} />
-            )}
-          </div>
-        ))}
-    </div>
+    {module.items &&
+      module.items.map((item, index) =>
+        CustomCardComponent ? (
+          <CustomCardComponent
+            key={keygen()}
+            featured={module.style === 'featured'}
+            item={item}
+            type={item.type}
+            number={index + 1}
+            page={page}
+          />
+        ) : (
+          <Card key={keygen()} item={item} />
+        )
+      )}
   </CardsGridStyles>
 );
 

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

@@ -66,6 +66,10 @@ const Head = ({ page = {}, siteInfo }) => {
       <meta name="og:type" content={page.path === '/' ? 'website' : 'article'} />
       <meta name="og:image" content={pageImage} />
       <meta name="og:url" content={getUrl(page.path)} />
+      <meta
+        property="og:locale"
+        content={getLanguage(page.language) === 'en' ? 'en_GB' : getLanguage(page.language)}
+      />
 
       {schemaGenerator(page, pageImage).map(
         (schema) =>

package/src/helpers/css-parser.js

@@ -6,11 +6,13 @@ export function parseCss(css) {
   let token;
 
   while ((token = tokenizer.exec(cssFormat))) {
-    obj[
-      token[1].replace(/-([a-z])/g, function (g) {
-        return g[1].toUpperCase();
-      })
-    ] = token[2];
+    if (token[2] && token[2] !== 'null') {
+      obj[
+        token[1].replace(/-([a-z])/g, function (g) {
+          return g[1].toUpperCase();
+        })
+      ] = token[2];
+    }
   }
 
   return obj;

package/src/helpers/css-parser.test.js

@@ -5,7 +5,7 @@ describe('parseCss Helper', () => {
     expect(typeof parseCss('margin-left: 20px;')).toEqual('object');
   });
   test('output', () => {
-    expect(parseCss('margin-left: 20px; margin-bottom:40px')).toEqual({
+    expect(parseCss('margin-left: 20px; margin-bottom:40px; height: null')).toEqual({
       marginBottom: '40px',
       marginLeft: '20px',
     });