Skip to content

Commit

Permalink
Merge pull request #114 from ooHmartY/spotlight-underlay
Browse files Browse the repository at this point in the history 
fix(Header): Underlay supports spotlight gradient
  • Loading branch information
@ooHmartY
ooHmartY authored Aug 28, 2018
2 parents 4c010de + 7340736 commit 1ec1676
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 1 deletion.
23 changes: 23 additions & 0 deletions catalog/pages/header/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,3 +147,26 @@ responsive: true
<div>Some other content</div>
</React.Fragment>
```

### Image Header with Underlaid Image Background

```react
responsive: true
---
<React.Fragment>
<HeaderWithImage
withUnderlay={true}
withSpotLight={true}
backgroundImage="https://beta.tmol.co/s3images/City/losangeles_889.jpg"
>
<Column medium={7} large={8}>
<Heading level={1}>
<Heading.Strong>City</Heading.Strong>
{" "}
<Heading.Span>Header</Heading.Span>
</Heading>
</Column>
</HeaderWithImage>
<div>Some other content</div>
</React.Fragment>
```
36 changes: 36 additions & 0 deletions src/components/Gradient/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ exports[`Gradient renders default 1`] = `
position: absolute;
}
.c0.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(76deg,#026cdf,#3ac7ff);
}
.c0:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -47,6 +53,18 @@ exports[`Gradient renders default 1`] = `
}
}
@media screen and (min-width:768px) {
.c0.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(80deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:1024px) {
.c0.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(81deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:768px) {
.c0:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down Expand Up @@ -111,6 +129,12 @@ exports[`Gradient renders with spotlight elements 1`] = `
position: absolute;
}
.c0.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(256deg,rgb(0,45,161),rgba(2,108,223,1) 55%,rgb(0,45,161));
}
.c0:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -150,6 +174,18 @@ exports[`Gradient renders with spotlight elements 1`] = `
}
}
@media screen and (min-width:768px) {
.c0.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(260deg,rgb(0,45,161),rgba(2,108,223,1) 55%,rgb(0,45,161));
}
}
@media screen and (min-width:1024px) {
.c0.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(262deg,rgb(0,45,161),rgba(2,108,223,1) 55%,rgb(0,45,161));
}
}
@media screen and (min-width:768px) {
.c0:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down
14 changes: 14 additions & 0 deletions src/components/Gradient/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,20 @@ const GradientStyles = styled.span`
${largeAndUp`box-shadow: inset 0 1px 40px 10px rgba(0, 0, 0, 0.15);`};
}
&.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: ${props =>
`linear-gradient(${props.deg.small}, ${props.stops.join(",")})`};
${mediumAndUp`
background-image: ${props =>
`linear-gradient(${props.deg.medium}, ${props.stops.join(",")})`};
`} ${largeAndUp`
background-image: ${props =>
`linear-gradient(${props.deg.large}, ${props.stops.join(",")})`};
`};
}
&:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down
3 changes: 2 additions & 1 deletion src/components/Header/WithImage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ const ImageHeader = ({
{...otherBackgroundImageProps}
className={classNames({
"gradient--overlay": !withSpotLight && withOverlay,
"gradient--underlay": !withSpotLight && withUnderlay
"gradient--underlay": withUnderlay,
"gradient--spotlight": withSpotLight
})}
aria-hidden
/>
Expand Down
72 changes: 72 additions & 0 deletions src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ exports[`WithImage renders header background image 1`] = `
position: absolute;
}
.c2.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(76deg,#026cdf,#3ac7ff);
}
.c2:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -124,6 +130,18 @@ exports[`WithImage renders header background image 1`] = `
}
}
@media screen and (min-width:768px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(80deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:1024px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(81deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:768px) {
.c2:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down Expand Up @@ -258,6 +276,12 @@ exports[`WithImage renders header background image correctly when a withOverlay
position: absolute;
}
.c2.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(76deg,#026cdf,#3ac7ff);
}
.c2:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -365,6 +389,18 @@ exports[`WithImage renders header background image correctly when a withOverlay
}
}
@media screen and (min-width:768px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(80deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:1024px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(81deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:768px) {
.c2:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down Expand Up @@ -499,6 +535,12 @@ exports[`WithImage renders header background image correctly when a withUnderlay
position: absolute;
}
.c2.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(76deg,#026cdf,#3ac7ff);
}
.c2:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -606,6 +648,18 @@ exports[`WithImage renders header background image correctly when a withUnderlay
}
}
@media screen and (min-width:768px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(80deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:1024px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(81deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:768px) {
.c2:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down Expand Up @@ -740,6 +794,12 @@ exports[`WithImage renders header with image 1`] = `
position: absolute;
}
.c2.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(76deg,#026cdf,#3ac7ff);
}
.c2:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -845,6 +905,18 @@ exports[`WithImage renders header with image 1`] = `
}
}
@media screen and (min-width:768px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(80deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:1024px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(81deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:768px) {
.c2:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down
54 changes: 54 additions & 0 deletions src/components/Header/__tests__/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ exports[`Header renders with custom level 1`] = `
position: absolute;
}
.c2.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(76deg,#026cdf,#3ac7ff);
}
.c2:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -124,6 +130,18 @@ exports[`Header renders with custom level 1`] = `
}
}
@media screen and (min-width:768px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(80deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:1024px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(81deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:768px) {
.c2:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down Expand Up @@ -247,6 +265,12 @@ exports[`Header renders with default 1`] = `
position: absolute;
}
.c2.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(76deg,#026cdf,#3ac7ff);
}
.c2:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -354,6 +378,18 @@ exports[`Header renders with default 1`] = `
}
}
@media screen and (min-width:768px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(80deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:1024px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(81deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:768px) {
.c2:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down Expand Up @@ -476,6 +512,12 @@ exports[`Header renders withOverlay 1`] = `
position: absolute;
}
.c2.gradient--underlay.gradient--spotlight:after {
z-index: -1;
opacity: 0.8;
background-image: linear-gradient(76deg,#026cdf,#3ac7ff);
}
.c2:not(.gradient--spotlight).gradient--overlay:after {
z-index: 2;
opacity: 0.4;
Expand Down Expand Up @@ -583,6 +625,18 @@ exports[`Header renders withOverlay 1`] = `
}
}
@media screen and (min-width:768px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(80deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:1024px) {
.c2.gradient--underlay.gradient--spotlight:after {
background-image: linear-gradient(81deg,#026cdf,#3ac7ff);
}
}
@media screen and (min-width:768px) {
.c2:not(.gradient--spotlight).gradient--overlay:after {
background-image: linear-gradient(82deg,rgba(0,0,0,0),#000000);
Expand Down

0 comments on commit 1ec1676

Please sign in to comment.