From 309f417a3536af32282da1a40ec457b6cc052a0e Mon Sep 17 00:00:00 2001 From: gevorg gabrielyan Date: Mon, 18 Jun 2018 18:04:48 -0700 Subject: [PATCH] fix(ImageCard): update overlay and caption styles --- .../__snapshots__/index.spec.js.snap | 119 ++++-------------- src/components/ImageCard/index.js | 43 +++---- 2 files changed, 40 insertions(+), 122 deletions(-) diff --git a/src/components/ImageCard/__tests__/__snapshots__/index.spec.js.snap b/src/components/ImageCard/__tests__/__snapshots__/index.spec.js.snap index df18a1664..adf5332bd 100644 --- a/src/components/ImageCard/__tests__/__snapshots__/index.spec.js.snap +++ b/src/components/ImageCard/__tests__/__snapshots__/index.spec.js.snap @@ -20,8 +20,6 @@ exports[`ImageCard renders card without overlay 1`] = ` left: 0; right: 0; bottom: 0; - opacity: 0.8; - background-image: transparent; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -81,8 +79,6 @@ exports[`ImageCard renders standard card 1`] = ` left: 0; right: 0; bottom: 0; - opacity: 0.8; - background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.02) 9%,rgba(0,0,0,0.06) 19%,rgba(0,0,0,0.12) 28%,rgba(0,0,0,0.2) 38%,rgba(0,0,0,0.29) 48%,rgba(0,0,0,0.39) 57%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.61) 74%,rgba(0,0,0,0.71) 81%,rgba(0,0,0,0.8) 88%,rgba(0,0,0,0.88) 93%,rgba(0,0,0,0.95) 97%,rgba(0,0,0,0.98) 99%,#000000); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -137,41 +133,23 @@ exports[`ImageCard renders type = half 1`] = ` } .c3 { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0.8; - background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.02) 9%,rgba(0,0,0,0.06) 19%,rgba(0,0,0,0.12) 28%,rgba(0,0,0,0.2) 38%,rgba(0,0,0,0.29) 48%,rgba(0,0,0,0.39) 57%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.61) 74%,rgba(0,0,0,0.71) 81%,rgba(0,0,0,0.8) 88%,rgba(0,0,0,0.88) 93%,rgba(0,0,0,0.95) 97%,rgba(0,0,0,0.98) 99%,#000000); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-end; - -webkit-box-align: flex-end; - -ms-flex-align: flex-end; - align-items: flex-end; -} - -.c4 { position: relative; - width: 100%; - color: rgba(0,0,15,1); - padding-top: 0; - padding-bottom: 9px; - padding-left: 16px; - padding-right: 16px; + color: rgba(255,255,255,1); + background-color: rgba(31,38,45,0.8); + border-radius: 4px; + padding: 4px 8px; + margin-left: 8px; + margin-bottom: 8px; } -.c5 { +.c4 { display: block; width: 100%; font-size: 16px; font-weight: 600; } -.c6 { +.c5 { font-size: 14px; font-weight: 400; } @@ -194,14 +172,6 @@ exports[`ImageCard renders type = half 1`] = ` align-items: center; } -@media screen and (min-width:481px) { - .c4 { - padding-bottom: 9px; - padding-left: 12px; - padding-right: 12px; - } -} -
@@ -213,21 +183,17 @@ exports[`ImageCard renders type = half 1`] = ` className="c2" src="http://localhost/img.png" /> -
Title Sub Title @@ -250,8 +216,6 @@ exports[`ImageCard renders with custom image 1`] = ` left: 0; right: 0; bottom: 0; - opacity: 0.8; - background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.02) 9%,rgba(0,0,0,0.06) 19%,rgba(0,0,0,0.12) 28%,rgba(0,0,0,0.2) 38%,rgba(0,0,0,0.29) 48%,rgba(0,0,0,0.39) 57%,rgba(0,0,0,0.5) 66%,rgba(0,0,0,0.61) 74%,rgba(0,0,0,0.71) 81%,rgba(0,0,0,0.8) 88%,rgba(0,0,0,0.88) 93%,rgba(0,0,0,0.95) 97%,rgba(0,0,0,0.98) 99%,#000000); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -264,12 +228,12 @@ exports[`ImageCard renders with custom image 1`] = ` .c3 { position: relative; - width: 100%; color: rgba(255,255,255,1); - padding-top: 0; - padding-bottom: 9px; - padding-left: 16px; - padding-right: 16px; + background-color: rgba(31,38,45,0.8); + border-radius: 4px; + padding: 4px 8px; + margin-left: 8px; + margin-bottom: 8px; } .c4 { @@ -295,14 +259,6 @@ exports[`ImageCard renders with custom image 1`] = ` position: relative; } -@media screen and (min-width:481px) { - .c3 { - padding-bottom: 9px; - padding-left: 12px; - padding-right: 12px; - } -} -
@@ -315,7 +271,6 @@ exports[`ImageCard renders with custom image 1`] = ` >
@@ -427,7 +372,6 @@ exports[`ImageCard renders with title & subtitle 1`] = ` >
@@ -534,7 +468,6 @@ exports[`ImageCard renders with title & subtitle, extra content 1`] = ` >
- props.withOverlay - ? "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02) 9%, rgba(0, 0, 0, 0.06) 19%, rgba(0, 0, 0, 0.12) 28%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.29) 48%, rgba(0, 0, 0, 0.39) 57%, rgba(0, 0, 0, 0.5) 66%, rgba(0, 0, 0, 0.61) 74%, rgba(0, 0, 0, 0.71) 81%, rgba(0, 0, 0, 0.8) 88%, rgba(0, 0, 0, 0.88) 93%, rgba(0, 0, 0, 0.95) 97%, rgba(0, 0, 0, 0.98) 99%, #000000);" - : "transparent"}; display: flex; align-items: flex-end; `; const CaptionContainer = styled.div` position: relative; - width: 100%; - color: ${props => props.color}; - padding-top: 0; - padding-bottom: 9px; - padding-left: ${spacing.gutters.small}px; - padding-right: ${spacing.gutters.small}px; - - @media screen and ${constants.breakpoints.mediumAndUp} { - padding-bottom: 9px; - padding-left: ${spacing.gutters.mediumAndUp / 2}px; - padding-right: ${spacing.gutters.mediumAndUp / 2}px; - } + color: ${colors.white.base}; + background-color: rgba(31, 38, 45, 0.8); + border-radius: ${constants.borderRadius.large}; + padding: ${spacing.slim} ${spacing.cozy}; + margin-left: ${spacing.cozy}; + margin-bottom: ${spacing.cozy}; `; const Title = styled.span` @@ -67,17 +57,14 @@ const RowContainer = Container.extend` align-items: center; `; -const ImageCard = ({ src, alt, children, type, withOverlay, ...props }) => { +const ImageCard = ({ src, alt, children, type, ...props }) => { const [title, subTitle, ...rest] = Children.toArray(children || []); const img = props.image || {alt}; if (type === "half") { return ( - - {img} - - - + {img} + {title} {subTitle} @@ -89,9 +76,9 @@ const ImageCard = ({ src, alt, children, type, withOverlay, ...props }) => { {img} - + {(title || subTitle) && ( - + {title} {subTitle} @@ -108,8 +95,7 @@ ImageCard.propTypes = { src: PropTypes.string, alt: PropTypes.string, children: PropTypes.node, - image: PropTypes.element, - withOverlay: PropTypes.bool + image: PropTypes.element }; ImageCard.defaultProps = { @@ -117,8 +103,7 @@ ImageCard.defaultProps = { alt: "", src: "", children: null, - image: null, - withOverlay: true + image: null }; ImageCard.Title = Title;