gatsby-core-theme 17.0.7 → 17.0.9

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [17.0.9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v17.0.8...v17.0.9) (2023-01-05)
+
+
+### Bug Fixes
+
+* add show more content ([61b3f28](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/61b3f2831d1f43f010cd96ec8289a75b0bcfd24f))
+* added more tests and removed unused functions ([03bea87](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/03bea87f083f3d4a4af089961fc5918616618f6f))
+* content component test ([82aec7a](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/82aec7ac480f8f6ba16825071617a090228a7581))
+* provide atuogenerate data to pages ([49753f9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/49753f96fbdaacadbb7735d3d54c10d0dbb15547))
+* update tests ([1330c9c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/1330c9cde3a5d4439d7dc9f84be039e4917c9fd3))
+
+
+* Merge branch 'tm-3249-autogenerated' into 'master' ([5fbdd05](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/5fbdd058e7b24eecd5ef239241650fb236ec7ba6))
+* Merge branch 'tm-3255-content-module-show-more' into 'master' ([4f16893](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/4f1689358055cac22ecc114383050aa499e1578c))
+
+## [17.0.8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v17.0.7...v17.0.8) (2023-01-02)
+
+
+### Bug Fixes
+
+* added animation to tracker progress bar ([6df067e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6df067e8ab6ae525621434abc94ca5e9d409b6bc))
+* card filter inactive ([2de397d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2de397d09495d4affea10261997b2d79a2dc212c))
+
 ## [17.0.7](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v17.0.6...v17.0.7) (2022-12-28)
 
 

package/gatsby-node.esm.js

@@ -244,11 +244,14 @@ exports.createPages = async ({ actions: { createPage } }, themeOptions) => {
           return;
         }
 
+        const template = templates[page.template_id];
+        const autogenerated = template && template.autogenerated_content;
         const contextData = {
           page,
           marketSections,
           prefilledModules,
           siteInfo,
+          autogenerated,
           siteSchema,
           translations,
           authors,

package/package.json

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

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-
 import { getSingleContentData } from '~tests/factories/modules/content.factory';
 import Content from '.';
 
@@ -10,7 +9,7 @@ describe('Content Component', () => {
     const correctData = getSingleContentData('h4');
     const { container } = render(<Content module={correctData} />);
     expect(container).toBeTruthy();
-    expect(container.querySelectorAll('div.grid')).toHaveLength(1);
+    expect(container.querySelectorAll('div.content')).toHaveLength(1);
 
     // HTML parse
     expect(container.querySelectorAll('p')).toHaveLength(1);
@@ -147,6 +146,60 @@ describe('Content Component', () => {
     expect(container.querySelectorAll('iframe')).toBeTruthy();
     expect(container.querySelectorAll('noscript').length).toEqual(5);
   });
+
+  test('test Show more content', () => {
+    const iframeModule = {
+      anchor_label: 'Slot tips',
+      anchor_slug: 'slot-tips',
+      anchored: 1,
+      background_color: null,
+      extra_anchors: null,
+      module_title: 'Tips when Choosing Slot Machines',
+      module_title_tag: 'h2',
+      module_value_id: 208480,
+      name: 'content',
+      see_more_link: null,
+      show_more_content: `
+        <p>More COntent test</p>
+      `,
+      show_more_enabled: '1',
+      show_more_label: 'show more test',
+      style: 'content_frame_style',
+      style_id: 41,
+      tag: 'h2',
+      title: 'Tips when Choosing Slot Machines',
+      value: `
+      <p>
+         <p>
+            <strong>
+            5. Reviews on Payment Methods:
+            </strong> Payment methods form the backbone for the secure transfer of funds into and from your
+            <a data-page-id="99253" href="/zar-online-casinos-south-africa">
+            &nbsp;ZAR-friendly casino accounts
+            </a> which is why we only recommend trusted and proven banking methods that are safe, easy and convenient for South Africans to use.
+            </p>
+          </p>
+          <p>
+            <strong>
+              6. Guides:&nbsp;
+            </strong> 
+            From 
+            <a data-page-id="99185" href="/online-casino-gambling">
+              beginner guides and how-to-play guides
+            </a>
+              to more intermediate and advanced strategies and tips, we cover everything players need to know whether they are new or experienced.
+          </p>
+          
+      `,
+    };
+    const { container, getByText } = render(<Content module={iframeModule} />);
+    expect(getByText('show more test')).toBeTruthy();
+
+    const showMorebutton = container.querySelector('button');
+    fireEvent.click(showMorebutton);
+
+    expect(getByText('More COntent test')).toBeTruthy();
+  });
 });
 afterEach(() => {
   cleanup();

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

@@ -1,16 +1,18 @@
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable react/no-danger */
-import React from 'react';
-import PropTypes from 'prop-types';
+/* eslint-disable camelcase */
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useState } from 'react';
 import parse from 'html-react-parser';
-
+import PropTypes from 'prop-types';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { parseCss } from 'gatsby-core-theme/src/helpers/css-parser';
 import loadable from '@loadable/component';
-import LazyImage from '~hooks/lazy-image';
-import { parseCss } from '~helpers/css-parser';
-import { parseContentImageUrl } from '~helpers/strings';
+import { parseContentImageUrl } from 'gatsby-core-theme/src/helpers/strings';
 import styles from './content.module.scss';
 
-const Content = ({ module, pageContext = null }) => {
+const Content = ({ module, isHomepageFirstModule = false, isModuleIntroduction = '' }) => {
+  const { show_more_label, show_more_enabled } = module || {};
+  const [showMore, setShowMore] = useState(show_more_enabled === '1');
+
   const replaceMedia = (node) => {
     if (node.name === 'iframe') {
       const Iframe = loadable(() => import('gatsby-core-theme/src/components/atoms/iframe'));
@@ -31,7 +33,6 @@ const Content = ({ module, pageContext = null }) => {
       } else if (classes?.includes('content-image--align-right')) {
         stylesClass = 'alignRight';
       }
-
       const lazyProps = {
         src: parseContentImageUrl(node.attribs.src),
         width: node.attribs.width && node.attribs.width.replace('px', ''),
@@ -40,32 +41,80 @@ const Content = ({ module, pageContext = null }) => {
         alt: node.attribs.alt ? node.attribs.alt : 'missing alt',
         className: styles[stylesClass],
       };
+
       return <LazyImage {...lazyProps} />;
     }
+
+    if (node.name === 'p' && module.style === 'horizontal_image_scroll_mobile') {
+      const hasChildImg = node?.children.find((child) => child?.name === 'img');
+
+      if (hasChildImg && node.nodeType === 1) {
+        node.attribs.style = 'overflow-x: scroll';
+        return node;
+      }
+    }
+
     return null;
   };
-  const template = pageContext?.page?.template;
-  const type = pageContext?.page?.type;
+  const switchStyle = (style) => {
+    switch (style) {
+      case 'table_1':
+        return `${styles.tableResponsive} ${styles.firstTable}`;
+      case 'table_2':
+        return `${styles.tableResponsive} ${styles.secondTable}`;
+      case 'stack_table':
+        return `${styles.stackTable}`;
+      case 'default_table':
+        return `${styles.tableResponsive}`;
+      case 'content_frame_style':
+        return `${styles.tableResponsive} ${styles.contentFrame}`;
+      case 'horizontal_image_scroll_mobile':
+        return `${styles.horizontalScrollImage}`;
+      default:
+        return null;
+    }
+  };
+
+  const handleChange = () => {
+    setShowMore(!showMore);
+  };
+
+  const conditionalContent = showMore ? module.value : module.value + module.show_more_content;
 
   return (
     <>
-      <div className={`${styles.grid} ${styles[type]} ${styles[template]}`}>
+      <div
+        className={`${styles.content} ${showMore && styles.showMore} ${switchStyle(module.style)} ${
+          isHomepageFirstModule && styles.homepageFirstModuleContent
+        } ${isModuleIntroduction && styles.moduleIntroMargin}`}
+      >
         {module.value &&
-          parse(module.value, {
+          parse(conditionalContent, {
             replace: replaceMedia,
           })}
       </div>
+      {showMore && (
+        <button type="button" className={styles.showMoreButton} onClick={handleChange}>
+          {show_more_label}
+        </button>
+      )}
     </>
   );
 };
 
 Content.propTypes = {
-  pageContext: PropTypes.object,
   module: PropTypes.shape({
     anchor_label: PropTypes.string,
     name: PropTypes.string,
+    module_title: PropTypes.string,
     value: PropTypes.string,
+    style: PropTypes.string,
+    show_more_content: PropTypes.string,
   }),
+  isHomepageFirstModule: PropTypes.bool,
+  isModuleIntroduction: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  styles: PropTypes.object,
 };
 
 export default Content;

package/src/components/pages/tracker/tracker.module.scss

@@ -11,6 +11,11 @@
     object-fit: cover;
   }
 
+  @keyframes load {
+    0% { width: 0; }
+    100% { width: 100%; }
+  }
+
   .content {
     width: 90%;
     background: var(--color-16);
@@ -70,10 +75,11 @@
       &:before {
         content: ' ';
         height: 0.8rem;
-        width: 70%;
+        width: 0;
         background: linear-gradient(270deg, #17d6cc 0.34%, #17d68a 86.37%);
         border-radius: 10rem;
         display: block;
+        animation: load 5s normal forwards;
       }
     }
 

package/src/helpers/getters.js

@@ -7,12 +7,6 @@ export function getURLParam(param) {
   return urlParams.get(param);
 }
 
-export function getSiteName() {
-  const siteName =
-    parseInt(process.env.GATSBY_SITE_ID) === 1 ? 'Irishluck' : 'Norske Spilleautomater';
-  return siteName;
-}
-
 export function getPageTitle(page) {
   const searchquery = typeof window !== 'undefined' ? getURLParam('s') : '';
   if (page.path === 's') {
@@ -354,10 +348,6 @@ export function translate(translations, key, defaultValue = '') {
   return defaultValue;
 }
 
-export function getAws(imageName) {
-  return `https://assets-srv.s3.eu-west-1.amazonaws.com/${imageName}`;
-}
-
 // This part of the code, help us to add operator related to the page as the first item in the comparison table automatically
 // example: if we are on the operator review page(Rizk) that should be first in the comparison table
 // First, we check if we have that item in the array, if that item is in the array, we check its position

package/src/helpers/getters.test.js

@@ -24,7 +24,18 @@ describe('Getters Helper', () => {
     expect(Getters.getPageTitle({ path: 's' })).toEqual('You searched for hello - irishluck.ie');
   });
 
+  test('getPageTitle() non search page', () => {
+    window.location.search = 's=hello';
+    expect(Getters.getPageTitle({ meta_title: 'test meta title', path: '/' })).toEqual(
+      'test meta title'
+    );
+  });
+
   test('getExtraField()', () => {
+    expect(Getters.getExtraField({}, 'k')).toEqual(null);
+  });
+
+  test('getExtraField() non existent', () => {
     expect(Getters.getExtraField({}, 'k', 'def')).toEqual('def');
     expect(Getters.getExtraField({ name: 'foo' }, 'name', 'def')).toEqual('foo');
   });
@@ -58,6 +69,7 @@ describe('Getters Helper', () => {
     const text = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
     expect(Getters.textWordsLimit(text, 5)).toEqual('Lorem Ipsum is simply dummy...');
     expect(Getters.textWordsLimit(text, 2)).toEqual('Lorem Ipsum...');
+    expect(Getters.textWordsLimit(1, 2)).toEqual(null);
   });
 
   test('filterImgSrc()', () => {

package/src/helpers/processor/modules.js

@@ -87,12 +87,15 @@ export function filterGames(pages, selectedCategories, selectedProviders) {
 }
 
 export function filterInactiveOperators(items) {
-  return items.filter(
-    (page) =>
-      !settings.filter_cards_modules[process.env.GATSBY_SITE_NAME].includes(
-        page.relation && page.relation.status
-      )
-  );
+  return items.filter((page) => {
+    if (!settings.filter_cards_modules[process.env.GATSBY_SITE_NAME]) {
+      return false;
+    }
+
+    return !settings.filter_cards_modules[process.env.GATSBY_SITE_NAME].includes(
+      page.relation && page.relation.status
+    );
+  });
 }
 
 export function filterOperators(pages, selectedProviders, selectedTypes) {