fix: image types

comicrelief · Jul 12, 2019 · 846d722 · 846d722
1 parent 7488783
commit 846d722
Show file tree

Hide file tree

Showing 8 changed files with 176 additions and 220 deletions.
diff --git a/src/components/Atoms/Picture/Picture.md b/src/components/Atoms/Picture/Picture.md
@@ -5,7 +5,7 @@ Picture
 ```js
 const data = require('../../../styleguide/data/data').default;
 
-<Picture alt="test Image" images={data.images} />;
+<Picture alt="test Image" images={data.images} image={data.image} />;
 ```
 
 Custom value.
@@ -16,6 +16,7 @@ console.log(data.images);
 <Picture
   alt="test Image"
   images={data.images}
+  image={data.image}
   objectFit="cover"
   width="300px"
   height="200px"
@@ -26,5 +27,5 @@ Single image
 
 ```js
 const data = require('../../../styleguide/data/data').default;
-<Picture alt="test Image" images={data.image} />;
+<Picture alt="test Image" images={data.image} image={data.image} />;
 ```
diff --git a/src/components/Atoms/Picture/Picture.test.js b/src/components/Atoms/Picture/Picture.test.js
@@ -2,11 +2,11 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import Picture from './Picture';
-import images from '../../../styleguide/data/data';
+import data from '../../../styleguide/data/data';
 
 it('renders correctly', () => {
   const tree = renderWithTheme(
-    <Picture images={images} alt="Test images" />
+    <Picture images={data.images} image={data.image} alt="Test images" />
   ).toJSON();
 
   expect(tree).toMatchInlineSnapshot(`
@@ -21,25 +21,13 @@ it('renders correctly', () => {
       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,
+      data-srcset="//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",
-        }
-      }
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
       height="auto"
+      src="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w"
       srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
       width="100%"
     />
@@ -49,7 +37,8 @@ it('renders correctly', () => {
 it('renders correctly with custom props', () => {
   const tree = renderWithTheme(
     <Picture
-      images={images}
+      images={data.images}
+      image={data.image}
       objectFit="cover"
       width="200px"
       height="100px"
@@ -69,25 +58,13 @@ it('renders correctly with custom props', () => {
       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,
+      data-srcset="//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",
-        }
-      }
+    //images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
       height="100px"
+      src="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w"
       srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
       width="200px"
     />

diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.js
@@ -56,12 +56,12 @@ const CopyWrapper = styled.div`
 /**
  * Article teaser component
  */
-const ArticleTeaser = ({ date, href, images, alt, title }) => {
+const ArticleTeaser = ({ date, href, images, alt, title, image }) => {
   return (
     <Wrapper>
       <Link href={href} inline>
         <ImageWrapper>
-          <Picture images={images} alt={alt} objectFit="cover" />
+          <Picture images={images} image={image} alt={alt} objectFit="cover" />
         </ImageWrapper>
         <CopyWrapper>
           <Text size="xxs" weight="bold" uppercase>
@@ -77,8 +77,8 @@ const ArticleTeaser = ({ date, href, images, alt, title }) => {
 };
 
 ArticleTeaser.propTypes = {
-  // eslint-disable-next-line react/forbid-prop-types
-  images: PropTypes.object.isRequired,
+  images: PropTypes.string.isRequired,
+  image: PropTypes.string.isRequired,
   alt: PropTypes.string.isRequired,
   date: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,

diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.md b/src/components/Molecules/ArticleTeaser/ArticleTeaser.md
@@ -1,10 +1,11 @@
 # Article teaser
 
 ```js
-const images = require('../../../styleguide/data/data').default;
+const data = require('../../../styleguide/data/data').default;
 <ArticleTeaser
   href="/test"
-  images={images.pictures}
+  images={data.images}
+  image={data.image}
   date=" 01 July 2019"
   title="News article"
   alt="Image's description"

diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js
@@ -2,13 +2,14 @@ import React from 'react';
 import 'jest-styled-components';
 import renderWithTheme from '../../../hoc/shallowWithTheme';
 import ArticleTeaser from './ArticleTeaser';
-import images from '../../../styleguide/data/data';
+import data from '../../../styleguide/data/data';
 
 it('renders correctly', () => {
   const tree = renderWithTheme(
     <ArticleTeaser
       href="/test"
-      images={images.pictures}
+      images={data.images}
+      image={data.image}
       date=" 01 July 2019"
       title="News article"
       alt="Image's description"
@@ -130,14 +131,13 @@ it('renders correctly', () => {
             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",
-              }
-            }
+            data-srcset="//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"
             height="auto"
+            src="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w"
             srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
             width="100%"
           />

diff --git a/src/components/Molecules/SingleMessage/SingleMessage.js b/src/components/Molecules/SingleMessage/SingleMessage.js
@@ -61,6 +61,7 @@ const SingleMessage = ({
   backgroundColor,
   copyFirst,
   imageSet,
+  image,
   imageAltText,
   children,
   fullImage
@@ -69,11 +70,12 @@ const SingleMessage = ({
 
   return (
     <Container backgroundColor={backgroundColor} copyFirst={copyFirst}>
-      {imageSet ? (
+      {imageSet && image ? (
         <Image>
           <Picture
             alt={imageAltText}
             images={imageSet}
+            image={image}
             objectFit="cover"
             width="100%"
             height="100%"
@@ -91,8 +93,8 @@ SingleMessage.propTypes = {
   backgroundColor: PropTypes.string,
   copyFirst: PropTypes.bool,
   fullImage: PropTypes.bool,
-  // eslint-disable-next-line react/forbid-prop-types
-  imageSet: PropTypes.object,
+  imageSet: PropTypes.string,
+  image: PropTypes.string,
   imageAltText: PropTypes.string,
   children: PropTypes.node.isRequired
 };
@@ -102,6 +104,7 @@ SingleMessage.defaultProps = {
   copyFirst: false,
   fullImage: false,
   imageSet: null,
+  image: null,
   imageAltText: ''
 };
 

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