gatsby-core-theme 1.2.5 → 1.2.6

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [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)
 
 

package/package.json

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

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/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,
   },
 };