From 734073600c5918324269346503fb68dc08e69700 Mon Sep 17 00:00:00 2001
From: Oscar Martinez <oscar.martinez@ticketmaster.com>
Date: Tue, 28 Aug 2018 07:18:29 -0700
Subject: [PATCH] fix(Header): Underlay supports spotlight gradient

---
 catalog/pages/header/index.md                 | 23 ++++++
 .../__snapshots__/index.spec.js.snap          | 36 ++++++++++
 src/components/Gradient/index.js              | 14 ++++
 src/components/Header/WithImage.js            |  3 +-
 .../__snapshots__/WithImage.spec.js.snap      | 72 +++++++++++++++++++
 .../__snapshots__/index.spec.js.snap          | 54 ++++++++++++++
 6 files changed, 201 insertions(+), 1 deletion(-)

diff --git a/catalog/pages/header/index.md b/catalog/pages/header/index.md
index 8fdd164de..cdf8ddbfe 100644
--- a/catalog/pages/header/index.md
+++ b/catalog/pages/header/index.md
@@ -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>
+```
diff --git a/src/components/Gradient/__tests__/__snapshots__/index.spec.js.snap b/src/components/Gradient/__tests__/__snapshots__/index.spec.js.snap
index ba69cb5d3..dc665be2d 100644
--- a/src/components/Gradient/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/components/Gradient/__tests__/__snapshots__/index.spec.js.snap
@@ -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;
@@ -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);
@@ -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;
@@ -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);
diff --git a/src/components/Gradient/index.js b/src/components/Gradient/index.js
index 0cce20063..fa1a6f9f9 100644
--- a/src/components/Gradient/index.js
+++ b/src/components/Gradient/index.js
@@ -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;
diff --git a/src/components/Header/WithImage.js b/src/components/Header/WithImage.js
index 6ecd875b4..69e61c393 100644
--- a/src/components/Header/WithImage.js
+++ b/src/components/Header/WithImage.js
@@ -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
         />
diff --git a/src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap b/src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap
index cd6c30557..a3b879b8a 100644
--- a/src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap
+++ b/src/components/Header/__tests__/__snapshots__/WithImage.spec.js.snap
@@ -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;
@@ -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);
@@ -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;
@@ -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);
@@ -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;
@@ -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);
@@ -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;
@@ -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);
diff --git a/src/components/Header/__tests__/__snapshots__/index.spec.js.snap b/src/components/Header/__tests__/__snapshots__/index.spec.js.snap
index 2128d86f9..668a9ccbd 100644
--- a/src/components/Header/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/components/Header/__tests__/__snapshots__/index.spec.js.snap
@@ -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;
@@ -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);
@@ -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;
@@ -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);
@@ -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;
@@ -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);