From 157d025646c52f91959c02971ee6e4c7dadd8d0f Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Tue, 9 Jul 2019 16:52:10 +0100 Subject: [PATCH 1/4] feat: add lazyload update picture compo --- package.json | 1 + src/components/Atoms/Picture/Picture.js | 57 ++++++++----------- src/components/Atoms/Picture/Picture.md | 10 ++-- .../Molecules/SingleMessage/SingleMessage.md | 4 +- src/styleguide/ThemeWrapper.js | 2 + src/styleguide/data/data.js | 6 +- yarn.lock | 5 ++ 7 files changed, 44 insertions(+), 41 deletions(-) diff --git a/package.json b/package.json index f097495ea..af1004119 100644 --- 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 index a05229129..f45ee2e85 100644 --- 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 ( - - - {alt} - - ); - } - - return ( - - - - {alt} - + ); + } + + return ( + {alt} ); }; 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 index 285d1133e..771999cb4 100644 --- a/src/components/Atoms/Picture/Picture.md +++ b/src/components/Atoms/Picture/Picture.md @@ -1,19 +1,21 @@ +Picture has depenciy of lazysizes for lazyload + Picture ```js const data = require('../../../styleguide/data/data').default; -; +; ``` Custom value. ```js const data = require('../../../styleguide/data/data').default; - +console.log(data.images); ; +; ``` diff --git a/src/components/Molecules/SingleMessage/SingleMessage.md b/src/components/Molecules/SingleMessage/SingleMessage.md index 52bad0fed..afc611916 100644 --- a/src/components/Molecules/SingleMessage/SingleMessage.md +++ b/src/components/Molecules/SingleMessage/SingleMessage.md @@ -7,7 +7,7 @@ import Link from '../../Atoms/Link/Link'; @@ -32,7 +32,7 @@ import Link from '../../Atoms/Link/Link'; Date: Tue, 9 Jul 2019 16:53:31 +0100 Subject: [PATCH 2/4] update snaps --- src/components/Atoms/Picture/Picture.test.js | 86 +++-- .../ArticleTeaser/ArticleTeaser.test.js | 36 +-- .../SingleMessage/SingleMessage.test.js | 296 +++++++++--------- 3 files changed, 215 insertions(+), 203 deletions(-) diff --git a/src/components/Atoms/Picture/Picture.test.js b/src/components/Atoms/Picture/Picture.test.js index 13ba2f106..bb4c9fb55 100644 --- a/src/components/Atoms/Picture/Picture.test.js +++ b/src/components/Atoms/Picture/Picture.test.js @@ -17,22 +17,33 @@ it('renders correctly', () => { object-fit: none; } - - - - - Test images - + Test images `); }); @@ -55,21 +66,32 @@ it('renders correctly with custom props', () => { object-fit: cover; } - - - - - Test images - + Test images `); }); diff --git a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js index e0bf11bf7..6261bf373 100644 --- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js +++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js @@ -126,26 +126,22 @@ it('renders correctly', () => {
- - - - - Image's description - + Image's description
{ const tree = renderWithTheme( @@ -115,26 +115,20 @@ it('renders correctly', () => {
- - - - - - +
{ ).toJSON(); expect(tree).toMatchInlineSnapshot(` - .c2 { - color: #FFFFFF; - text-transform: inherit; - } + .c2 { + color: #FFFFFF; + text-transform: inherit; + } - .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background: #7d2ca9; - } + .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + background: #7d2ca9; + } - .c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - padding: 20px; - -webkit-flex: 0 0 60%; - -ms-flex: 0 0 60%; - flex: 0 0 60%; - margin: auto; - padding: 100px 20px; - } + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + padding: 20px; + -webkit-flex: 0 0 60%; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + margin: auto; + padding: 100px 20px; + } - @media (min-width:740px) { - .c0 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - } + @media (min-width:740px) { + .c0 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + } -
-
-

- description -

-
-
- `); +
+

+ description +

+
+
+ `); }); it('renders fullWidth Single Message correctly', () => { @@ -259,74 +253,74 @@ it('renders fullWidth Single Message correctly', () => { ).toJSON(); expect(tree).toMatchInlineSnapshot(` - .c2 { - color: #FFFFFF; - text-transform: inherit; - } + .c2 { + color: #FFFFFF; + text-transform: inherit; + } - .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background: #7d2ca9; - } + .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + background: #7d2ca9; + } - .c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - padding: 20px; - -webkit-flex: 0 0 60%; - -ms-flex: 0 0 60%; - flex: 0 0 60%; - margin: auto; - padding: 100px 20px; - } + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + padding: 20px; + -webkit-flex: 0 0 60%; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + margin: auto; + padding: 100px 20px; + } - @media (min-width:740px) { - .c0 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - } + @media (min-width:740px) { + .c0 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + } -
-
-

- description -

-
-
- `); +
+

+ description +

+
+
+ `); }); From e8cdffc149e505b9fbb2ba644afc8493b63cf28f Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Tue, 9 Jul 2019 17:21:40 +0100 Subject: [PATCH 3/4] fix backup pic --- src/components/Atoms/Picture/Picture.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Atoms/Picture/Picture.js b/src/components/Atoms/Picture/Picture.js index f45ee2e85..f7a280f5b 100644 --- a/src/components/Atoms/Picture/Picture.js +++ b/src/components/Atoms/Picture/Picture.js @@ -38,7 +38,7 @@ const Picture = ({ images, image, alt, width, height, objectFit }) => { height={height} width={width} objectFit={objectFit} - src="image3.jpg" + src={image} srcSet={IMAGE_FALLBACK} data-srcset={images} data-sizes="auto" From 7181fc361cffc223546cfa178ce99803e8caa850 Mon Sep 17 00:00:00 2001 From: Gustavo Liedke Date: Tue, 9 Jul 2019 17:22:12 +0100 Subject: [PATCH 4/4] update snaps --- src/components/Atoms/Picture/Picture.test.js | 2 - .../ArticleTeaser/ArticleTeaser.test.js | 1 - .../SingleMessage/SingleMessage.test.js | 261 +++++++++--------- 3 files changed, 130 insertions(+), 134 deletions(-) diff --git a/src/components/Atoms/Picture/Picture.test.js b/src/components/Atoms/Picture/Picture.test.js index bb4c9fb55..347d8945e 100644 --- a/src/components/Atoms/Picture/Picture.test.js +++ b/src/components/Atoms/Picture/Picture.test.js @@ -40,7 +40,6 @@ it('renders correctly', () => { } } height="auto" - src="image3.jpg" srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100%" /> @@ -89,7 +88,6 @@ it('renders correctly with custom props', () => { } } height="100px" - src="image3.jpg" 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 index 6261bf373..1363ab234 100644 --- a/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js +++ b/src/components/Molecules/ArticleTeaser/ArticleTeaser.test.js @@ -138,7 +138,6 @@ it('renders correctly', () => { } } height="auto" - src="image3.jpg" srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100%" /> diff --git a/src/components/Molecules/SingleMessage/SingleMessage.test.js b/src/components/Molecules/SingleMessage/SingleMessage.test.js index 69b3454a1..1ca96d958 100644 --- a/src/components/Molecules/SingleMessage/SingleMessage.test.js +++ b/src/components/Molecules/SingleMessage/SingleMessage.test.js @@ -125,7 +125,6 @@ it('renders correctly', () => { //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="100%" - src="image3.jpg" srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100%" /> @@ -171,76 +170,76 @@ it('renders Single Message with no Image correctly', () => { ).toJSON(); expect(tree).toMatchInlineSnapshot(` - .c2 { - color: #FFFFFF; - text-transform: inherit; - } + .c2 { + color: #FFFFFF; + text-transform: inherit; + } - .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background: #7d2ca9; - } + .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + background: #7d2ca9; + } - .c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - padding: 20px; - -webkit-flex: 0 0 60%; - -ms-flex: 0 0 60%; - flex: 0 0 60%; - margin: auto; - padding: 100px 20px; - } + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + padding: 20px; + -webkit-flex: 0 0 60%; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + margin: auto; + padding: 100px 20px; + } - @media (min-width:740px) { - .c0 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - } + @media (min-width:740px) { + .c0 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + } -
-
-

- description -

-
-
- `); +
+

+ description +

+
+ + `); }); it('renders fullWidth Single Message correctly', () => { @@ -253,74 +252,74 @@ it('renders fullWidth Single Message correctly', () => { ).toJSON(); expect(tree).toMatchInlineSnapshot(` - .c2 { - color: #FFFFFF; - text-transform: inherit; - } + .c2 { + color: #FFFFFF; + text-transform: inherit; + } - .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: relative; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - background: #7d2ca9; - } + .c0 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + background: #7d2ca9; + } - .c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-flex-basis: 50%; - -ms-flex-preferred-size: 50%; - flex-basis: 50%; - padding: 20px; - -webkit-flex: 0 0 60%; - -ms-flex: 0 0 60%; - flex: 0 0 60%; - margin: auto; - padding: 100px 20px; - } + .c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + padding: 20px; + -webkit-flex: 0 0 60%; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + margin: auto; + padding: 100px 20px; + } - @media (min-width:740px) { - .c0 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - } + @media (min-width:740px) { + .c0 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } + } -
-
-

- description -

-
-
- `); +
+

+ description +

+
+ + `); });