Merge pull request #46 from comicrelief/feature/45_lazyload

Lazyload images
comicrelief · Jul 11, 2019 · 07a76ed · 07a76ed
2 parents 4d25f55 + 7181fc3
commit 07a76ed
Show file tree

Hide file tree

Showing 10 changed files with 257 additions and 246 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@babel/cli": "^7.4.4",
+    "lazysizes": "^5.1.0",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",

diff --git a/src/components/Atoms/Picture/Picture.js b/src/components/Atoms/Picture/Picture.js
@@ -18,47 +18,38 @@ const Image = styled.img`
 
 /** Responsive Picture */
 
-const Picture = ({ images, alt, theme, width, height, objectFit }) => {
-  const { breakpoint } = theme;
-
-  const isSingle = typeof images === 'object';
-
-  if (!isSingle) {
+const Picture = ({ images, image, alt, width, height, objectFit }) => {
+  if (!images) {
     return (
-      <picture>
-        <source srcSet={images} />
-        <Image
-          src={IMAGE_FALLBACK}
-          alt={alt}
-          height="400px"
-          width={width}
-          objectFit={objectFit}
-        />
-      </picture>
-    );
-  }
-
-  return (
-    <picture>
-      <source media={`${breakpoint('large')}`} srcSet={images.large} />
-      <source media={`${breakpoint('medium')}`} srcSet={images.medium} />
-      <source srcSet={images.small} />
       <Image
-        src={IMAGE_FALLBACK}
         alt={alt}
         height={height}
         width={width}
         objectFit={objectFit}
+        data-src={image}
+        className="lazyload"
       />
-    </picture>
+    );
+  }
+
+  return (
+    <Image
+      alt={alt}
+      height={height}
+      width={width}
+      objectFit={objectFit}
+      src={image}
+      srcSet={IMAGE_FALLBACK}
+      data-srcset={images}
+      data-sizes="auto"
+      className="lazyload"
+    />
   );
 };
 
 Picture.propTypes = {
-  images: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.shape({ picture: PropTypes.string })
-  ]).isRequired,
+  images: PropTypes.string,
+  image: PropTypes.string.isRequired,
   alt: PropTypes.string,
   objectFit: PropTypes.oneOf([
     'none',
@@ -68,13 +59,11 @@ Picture.propTypes = {
     'scale-down'
   ]),
   width: PropTypes.string,
-  height: PropTypes.string,
-  theme: PropTypes.shape({
-    breakpoint: PropTypes.func
-  }).isRequired
+  height: PropTypes.string
 };
 
 Picture.defaultProps = {
+  images: null,
   objectFit: 'none',
   width: '100%',
   height: 'auto',

diff --git a/src/components/Atoms/Picture/Picture.md b/src/components/Atoms/Picture/Picture.md
@@ -1,19 +1,21 @@
+Picture has depenciy of <a href="https://github.com/aFarkas/lazysizes#readme" style="color: blue; text-decoration: underline;">lazysizes</a> for lazyload
+
 Picture
 
 ```js
 const data = require('../../../styleguide/data/data').default;
 
-<Picture alt="test Image" images={data.pictures} />;
+<Picture alt="test Image" images={data.images} />;
 ```
 
 Custom value.
 
 ```js
 const data = require('../../../styleguide/data/data').default;
-
+console.log(data.images);
 <Picture
   alt="test Image"
-  images={data.pictures}
+  images={data.images}
   objectFit="cover"
   width="300px"
   height="200px"
@@ -24,5 +26,5 @@ Single image
 
 ```js
 const data = require('../../../styleguide/data/data').default;
-<Picture alt="test Image" images={data.pictures.small} />;
+<Picture alt="test Image" images={data.image} />;
 ```
diff --git a/src/components/Atoms/Picture/Picture.test.js b/src/components/Atoms/Picture/Picture.test.js
@@ -17,22 +17,32 @@ it('renders correctly', () => {
       object-fit: none;
     }
 
-    <picture>
-      <source
-        media="(min-width: 1440px)"
-      />
-      <source
-        media="(min-width: 1024px)"
-      />
-      <source />
-      <img
-        alt="Test images"
-        className="c0"
-        height="auto"
-        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-        width="100%"
-      />
-    </picture>
+    <img
+      alt="Test images"
+      className="lazyload c0"
+      data-sizes="auto"
+      data-srcset={
+        Object {
+          "ctaText": "Find out how",
+          "image": "//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w",
+          "images": "//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w",
+          "pictures": Object {
+            "large": "picture-3.jpg",
+            "medium": "picture-2.jpg",
+            "small": "picture-1.jpg",
+          },
+          "text": "When you donate to Comic Relief or Sport Relief, you’re supporting vulnerable people and communities in the UK and internationally.",
+          "title": "What your money does",
+        }
+      }
+      height="auto"
+      srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+      width="100%"
+    />
   `);
 });
 
@@ -55,21 +65,31 @@ it('renders correctly with custom props', () => {
       object-fit: cover;
     }
 
-    <picture>
-      <source
-        media="(min-width: 1440px)"
-      />
-      <source
-        media="(min-width: 1024px)"
-      />
-      <source />
-      <img
-        alt="Test images"
-        className="c0"
-        height="100px"
-        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-        width="200px"
-      />
-    </picture>
+    <img
+      alt="Test images"
+      className="lazyload c0"
+      data-sizes="auto"
+      data-srcset={
+        Object {
+          "ctaText": "Find out how",
+          "image": "//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w",
+          "images": "//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w",
+          "pictures": Object {
+            "large": "picture-3.jpg",
+            "medium": "picture-2.jpg",
+            "small": "picture-1.jpg",
+          },
+          "text": "When you donate to Comic Relief or Sport Relief, you’re supporting vulnerable people and communities in the UK and internationally.",
+          "title": "What your money does",
+        }
+      }
+      height="100px"
+      srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+      width="200px"
+    />
   `);
 });
diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
@@ -126,26 +126,21 @@ it('renders correctly', () => {
         <div
           className="c2"
         >
-          <picture>
-            <source
-              media="(min-width: 1440px)"
-              srcSet="picture-3.jpg"
-            />
-            <source
-              media="(min-width: 1024px)"
-              srcSet="picture-2.jpg"
-            />
-            <source
-              srcSet="picture-1.jpg"
-            />
-            <img
-              alt="Image's description"
-              className="c3"
-              height="auto"
-              src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-              width="100%"
-            />
-          </picture>
+          <img
+            alt="Image's description"
+            className="lazyload c3"
+            data-sizes="auto"
+            data-srcset={
+              Object {
+                "large": "picture-3.jpg",
+                "medium": "picture-2.jpg",
+                "small": "picture-1.jpg",
+              }
+            }
+            height="auto"
+            srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+            width="100%"
+          />
         </div>
         <div
           className="c4"

diff --git a/src/components/Molecules/SingleMessage/SingleMessage.md b/src/components/Molecules/SingleMessage/SingleMessage.md
@@ -7,7 +7,7 @@ import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.pictures}
+  imageSet={data.images}
   imageAltText=""
   copyFirst={false}
 >
@@ -32,7 +32,7 @@ import Link from '../../Atoms/Link/Link';
 
 <SingleMessage
   backgroundColor="purple"
-  imageSet={data.pictures}
+  imageSet={data.images}
   imageAltText=""
   copyFirst={false}
   fullImage={true}