gatsby-core-theme 1.2.2 → 1.2.6

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+## [1.2.6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.2.5...v1.2.6) (2021-10-12)
+
+
+### Code Refactoring
+
+* add once property to lazy images ([8487472](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/84874723d6f43816b2791f93ef75709f8bff393c))
+* add once property to link-list to be passed to lazyload images ([2bbe3a0](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2bbe3a0ede23f2eb49f6e293b7e247ded6b695fe))
+
+
+* Merge branch 'tm-2496-once-lazy-images' into 'master' ([dea0f3c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/dea0f3cb167bd8163c373990988613648c088508))
+
+## [1.2.5](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.2.4...v1.2.5) (2021-10-11)
+
+
+### Config
+
+* settings update for playcasino ([49d215c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/49d215cc6517706caac472f237d66b73e0ddd3b5))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([87cbf84](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/87cbf843f04d6d4d14743d7cefc17fe1f1310d53))
+
+## [1.2.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.2.3...v1.2.4) (2021-10-11)
+
+
+### Config
+
+* settings update for playcasino ([c258327](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c2583274f107254c9089cae2adc4f1807bc5787b))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/gatsby-themes ([2e516a2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2e516a23c2b2b177aeb3c03accf732c7c1c4bd48))
+
+## [1.2.3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.2.2...v1.2.3) (2021-10-08)
+
+
+### Code Refactoring
+
+* removing all style/css props in components ([a99ca6d](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a99ca6dd8637fbec5edcf68924c33c300ce13106))
+
+
+* Merge branch 'tm-1222-style-prop-fix' into 'master' ([a3b5323](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a3b5323a1e99ed86d6b4cf79bed0cd7de28049ee))
+
 ## [1.2.2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v1.2.1...v1.2.2) (2021-10-07)
 
 

package/package.json

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

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

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 
 import LazyImage from '~hooks/lazy-image';
 import keygen from '~helpers/keygen';
-import Css from './content-box.module.scss';
+import styles from './content-box.module.scss';
 
-const ContentBox = ({ data = [], styles = Css }) => (
+const ContentBox = ({ data = [] }) => (
   <div className={styles.contentBoxContainer}>
     <ul className={styles.contentBoxList}>
       {data.map((item) => (

package/src/components/molecules/content-and-custom-module/index.js

@@ -3,14 +3,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import parse from 'html-react-parser';
 
-import Css from './content-and-custom-module.module.scss';
+import styles from './content-and-custom-module.module.scss';
 
-const ContentAndCustomModule = ({
-  content = '',
-  CustomComponent,
-  customComponentProps,
-  styles = Css,
-}) => (
+const ContentAndCustomModule = ({ content = '', CustomComponent, customComponentProps }) => (
   <>
     <div className={styles.contentAndCustomModuleContainer}>
       {content && <div className={styles.contentBox}>{parse(content)}</div>}

package/src/components/molecules/link-list/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable no-nested-ternary */
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -16,6 +18,9 @@ const LinkList = ({
   listIcon = <></>,
   multiIcon = false,
   classes,
+  once = false,
+  height,
+  width,
 }) => {
   function renderLinkContent(item, index) {
     const icon = listIcon[index];
@@ -25,10 +30,26 @@ const LinkList = ({
           <>
             {multiIcon ? icon : listIcon}
             <span>{item.title}</span>
-            {item.image && <LazyImage src={imagePrettyUrl(item.image)} alt={item.title} />}
+            {item.image && (
+              <LazyImage
+                src={imagePrettyUrl(item.image)}
+                alt={item.title}
+                once={once}
+                width={width}
+                height={height}
+              />
+            )}
           </>
         )}
-        {item.image && imageOnly && <LazyImage src={imagePrettyUrl(item.image)} alt={item.title} />}
+        {item.image && imageOnly && (
+          <LazyImage
+            src={imagePrettyUrl(item.image)}
+            alt={item.title}
+            once={once}
+            width={width}
+            height={height}
+          />
+        )}
       </>
     );
   }
@@ -102,6 +123,9 @@ LinkList.propTypes = {
   listIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.any, PropTypes.node]),
   multiIcon: PropTypes.bool,
   classes: PropTypes.string,
+  once: PropTypes.bool,
+  width: PropTypes.number,
+  height: PropTypes.number,
 };
 
 export default LinkList;

package/src/components/molecules/link-list/link-list.stories.js

@@ -1,10 +1,12 @@
 import React from 'react';
+
 import {
   Title,
   Description,
   Primary,
   PRIMARY_STORY,
   ArgsTable,
+  // eslint-disable-next-line import/no-extraneous-dependencies
 } from '@storybook/addon-docs/blocks';
 import { FaChevronRight } from 'react-icons/fa';
 
@@ -68,6 +70,38 @@ export default {
         type: null,
       },
     },
+    once: {
+      name: 'once',
+      type: { name: 'boolean', required: false },
+      defaultValue: '',
+      description:
+        'When set to True, once this component is loaded, LazyLoad will not care about it anymore',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    height: {
+      name: 'height',
+      type: { name: 'number', required: false },
+      defaultValue: '',
+      description:
+        'Lazy loading images is supported out of box, no extra config needed, set `height` for better experience',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '' },
+      },
+    },
+    width: {
+      name: 'width',
+      type: { name: 'number', required: false },
+      defaultValue: '',
+      description: 'set width to the image',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '' },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -133,4 +167,6 @@ Default.args = {
       },
     ],
   },
+  height: 30,
+  width: 40,
 };

package/src/components/molecules/pros-cons/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Css from './pros-cons.module.scss';
+import styles from './pros-cons.module.scss';
 import keygen from '~helpers/keygen';
 
-const ProsCons = ({ module = {}, pros = 'Pros', cons = 'Cons', icons, styles = Css }) => (
+const ProsCons = ({ module = {}, pros = 'Pros', cons = 'Cons', icons }) => (
   <div className={styles.prosCons}>
     <div className={styles.pros}>
       {icons && <span className={styles.icon}>{icons[0]}</span>}

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

@@ -5,7 +5,7 @@ import { FaSearch } from 'react-icons/fa';
 
 import LazyImage from '~hooks/lazy-image';
 import ConditionalWrapper from '~atoms/conditional-wrapper';
-import Css from './search.module.scss';
+import styles from './search.module.scss';
 import Tabs from '~hooks/tabs';
 import { getURLParam } from '~helpers/getters';
 import keygen from '~helpers/keygen';
@@ -29,7 +29,6 @@ const Search = ({
   pageSearchOptions = null,
   inputPlaceholder = '',
   children,
-  styles = Css,
 }) => {
   const { setShowSearch } = useContext(NavigationContext);
   const pageSearchOptionsCopy = pageSearchOptions;
@@ -59,18 +58,14 @@ const Search = ({
   // FUNCTIONS
 
   // Get the types of children provided
-  const getChildrenTypes = useCallback(() => {
-    return children(sampleChildRef.current).props.children.map((child) => {
-      return child.props.type;
-    });
-  }, [children]);
+  const getChildrenTypes = useCallback(
+    () => children(sampleChildRef.current).props.children.map((child) => child.props.type),
+    [children]
+  );
 
   // Get the child by the given type - a data object is required
-  const getChildType = (item, type) => {
-    return children(item).props.children.find((child) => {
-      return child.props.type === type;
-    });
-  };
+  const getChildType = (item, type) =>
+    children(item).props.children.find((child) => child.props.type === type);
 
   // Prepare search result for auto complete
   const loadAutoComplete = useCallback(() => {
@@ -331,9 +326,7 @@ const Search = ({
                 ) {
                   items = searchResultsRef.current
                     .filter((item) => item.type === type)
-                    .map((item) => {
-                      return getChildType(item, type);
-                    });
+                    .map((item) => getChildType(item, type));
                 } else if (items.length) {
                   items = {
                     items,

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

@@ -2,12 +2,12 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import Css from './accordion.module.scss';
+import styles from './accordion.module.scss';
 import keygen from '~helpers/keygen';
 
 /* eslint-disable react/no-danger */
 
-const Accordion = ({ module, openAll = false, openItem, closeOthers = false, styles = Css }) => {
+const Accordion = ({ module, openAll = false, openItem, closeOthers = false }) => {
   const { items } = module;
   const itemRefs = useRef([]);
   const btnRefs = useRef([]);

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

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import Slider from '~molecules/slider';
 import keygen from '~helpers/keygen';
 import { anchorLink } from '~helpers/strings';
-import Css from './anchor.module.scss';
+import styles from './anchor.module.scss';
 
-function Anchor({ module: { items }, headerOffset = 80, sliderGap = 0, styles = Css }) {
+function Anchor({ module: { items }, headerOffset = 80, sliderGap = 0 }) {
   const handleClick = (event) => {
     event.preventDefault();
     const scrollToElementId = event.currentTarget.getAttribute('href').replace('#', '');

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

@@ -5,7 +5,7 @@ import Button from '~atoms/button';
 import LazyImage from '~hooks/lazy-image';
 import { prettyTracker } from '~helpers/getters';
 import { isMobileDevice } from '~helpers/device-detect';
-import Css from './tracker.module.scss';
+import styles from './tracker.module.scss';
 
 const Tracker = ({
   pageContext,
@@ -19,7 +19,6 @@ const Tracker = ({
   logo = '../../../../../images/logo.svg',
   counter = false,
   isStory = false,
-  styles = Css,
 }) => {
   const { operator } = pageContext;
 

package/src/constants/settings.js

@@ -2,24 +2,28 @@ export default {
   delete_operator_software: {
     'Irishluck.ie': true,
     'norskespilleautomater.com': true,
+    'playcasino.co.za': true,
   },
   keep_page_extra_fields: {
     operator: {
       'Irishluck.ie': true, // needed for card background image
       'norskespilleautomater.com': true, // needed for inoperative / placeholder fields
+      'playcasino.co.za': true,
     },
     article: {
       'Irishluck.ie': true, // needed for card background image
       'norskespilleautomater.com': true,
+      'playcasino.co.za': true,
     },
     game: {
       'Irishluck.ie': true, // needed for card background image
       'norskespilleautomater.com': true,
+      'playcasino.co.za': true,
     },
   },
   keep_sections: {
-    software_provider: { 'norskespilleautomater.com': ['header'] },
-    payment_method: { 'norskespilleautomater.com': ['header'] },
+    software_provider: { 'norskespilleautomater.com': ['header'], 'playcasino.co.za': ['header'] },
+    payment_method: { 'norskespilleautomater.com': ['header'], 'playcasino.co.za': ['header'] },
     operator: { 'Irishluck.ie': ['main'] },
     article: { 'Irishluck.ie': ['main'] },
   },

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import LazyLoad from 'react-lazyload';
 import PropTypes from 'prop-types';
 
@@ -16,6 +17,7 @@ export default function LazyImage({
   alt = '',
   sizes,
   defaultImg,
+  once = false,
 }) {
   const [errorImage, setErrorImage] = useState(false);
 
@@ -24,7 +26,7 @@ export default function LazyImage({
   }
 
   return (
-    <LazyLoad height={`${height}px`} width={`${width}px`} offset={offset} debounce={0}>
+    <LazyLoad height={`${height}px`} width={`${width}px`} offset={offset} debounce={0} once={once}>
       <img
         src={src}
         className={className}
@@ -51,4 +53,5 @@ LazyImage.propTypes = {
   sizes: PropTypes.string,
   srcSet: PropTypes.string,
   defaultImg: PropTypes.element,
+  once: PropTypes.bool,
 };

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

@@ -7,6 +7,7 @@ import {
   Stories,
   PRIMARY_STORY,
   ArgsTable,
+  // eslint-disable-next-line import/no-extraneous-dependencies
 } from '@storybook/addon-docs/blocks';
 import { FaRegFrownOpen } from 'react-icons/fa';
 
@@ -122,6 +123,17 @@ export default {
         type: null,
       },
     },
+    once: {
+      name: 'once',
+      type: { name: 'boolean', required: false },
+      defaultValue: '',
+      description:
+        'When set to True, once this component is loaded, LazyLoad will not care about it anymore',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -172,5 +184,6 @@ BrokenURL.story = {
     srcSet: '',
     alt: 'This image has a broken URL',
     defaultImg: <FaRegFrownOpen size={250} />,
+    once: false,
   },
 };