Skip to content

Commit

Permalink
fix(ImageCard): update overlay and caption styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@C0smicG @ooHmartY
C0smicG authored and ooHmartY committed Jun 19, 2018
1 parent 58a2698 commit 309f417
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 122 deletions.
119 changes: 26 additions & 93 deletions src/components/ImageCard/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
}
<div
className="c0"
>
Expand All @@ -213,21 +183,17 @@ exports[`ImageCard renders type = half 1`] = `
className="c2"
src="http://localhost/img.png"
/>
<div
className="c3"
/>
</div>
<div
className="c4"
color="rgba(0, 0, 15, 1)"
className="c3"
>
<span
className="c5"
className="c4"
>
Title
</span>
<span
className="c6"
className="c5"
>
Sub Title
</span>
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
}
}
<div
className="c0"
>
Expand All @@ -315,7 +271,6 @@ exports[`ImageCard renders with custom image 1`] = `
>
<div
className="c3"
color="rgba(255, 255, 255, 1)"
>
<span
className="c4"
Expand Down Expand Up @@ -358,8 +313,6 @@ exports[`ImageCard renders with title & subtitle 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;
Expand All @@ -372,12 +325,12 @@ exports[`ImageCard renders with title & subtitle 1`] = `
.c4 {
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;
}
.c5 {
Expand All @@ -403,14 +356,6 @@ exports[`ImageCard renders with title & subtitle 1`] = `
position: relative;
}
@media screen and (min-width:481px) {
.c4 {
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
}
}
<div
className="c0"
>
Expand All @@ -427,7 +372,6 @@ exports[`ImageCard renders with title & subtitle 1`] = `
>
<div
className="c4"
color="rgba(255, 255, 255, 1)"
>
<span
className="c5"
Expand Down Expand Up @@ -465,8 +409,6 @@ exports[`ImageCard renders with title & subtitle, extra content 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;
Expand All @@ -479,12 +421,12 @@ exports[`ImageCard renders with title & subtitle, extra content 1`] = `
.c4 {
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;
}
.c5 {
Expand All @@ -510,14 +452,6 @@ exports[`ImageCard renders with title & subtitle, extra content 1`] = `
position: relative;
}
@media screen and (min-width:481px) {
.c4 {
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
}
}
<div
className="c0"
>
Expand All @@ -534,7 +468,6 @@ exports[`ImageCard renders with title & subtitle, extra content 1`] = `
>
<div
className="c4"
color="rgba(255, 255, 255, 1)"
>
<span
className="c5"
Expand Down
43 changes: 14 additions & 29 deletions src/components/ImageCard/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,35 +13,25 @@ const Image = styled.img`
max-width: 100%;
`;

// come back
const Overlay = styled.div`
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.8;
background-image: ${props =>
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`
Expand All @@ -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 || <Image src={src} alt={alt} />;
if (type === "half") {
return (
<RowContainer>
<Card>
{img}
<Overlay withOverlay={withOverlay} />
</Card>
<CaptionContainer color={colors.onyx.base}>
<Card>{img}</Card>
<CaptionContainer>
{title}
{subTitle}
</CaptionContainer>
Expand All @@ -89,9 +76,9 @@ const ImageCard = ({ src, alt, children, type, withOverlay, ...props }) => {
<Card>
<Container>
{img}
<Overlay withOverlay={withOverlay}>
<Overlay>
{(title || subTitle) && (
<CaptionContainer color={colors.white.base}>
<CaptionContainer>
{title}
{subTitle}
</CaptionContainer>
Expand All @@ -108,17 +95,15 @@ ImageCard.propTypes = {
src: PropTypes.string,
alt: PropTypes.string,
children: PropTypes.node,
image: PropTypes.element,
withOverlay: PropTypes.bool
image: PropTypes.element
};

ImageCard.defaultProps = {
type: "full",
alt: "",
src: "",
children: null,
image: null,
withOverlay: true
image: null
};

ImageCard.Title = Title;
Expand Down

0 comments on commit 309f417

Please sign in to comment.