feat(HeaderWithImage): Allow background image

ticketmaster · Jun 14, 2018 · 1259f3c · 1259f3c
1 parent 65c2602
commit 1259f3c
Show file tree

Hide file tree

Showing 10 changed files with 515 additions and 257 deletions.
diff --git a/catalog/pages/header/index.js b/catalog/pages/header/index.js
@@ -5,6 +5,7 @@ import Heading from "../../../src/components/Header/Heading";
 import HeaderWithImage from "../../../src/components/Header/WithImage";
 import ImageCard from "../../../src/components/ImageCard";
 import Breadcrumb from "../../../src/components/Breadcrumbs";
+import Spacing from "../../../src/components/Spacing";
 import { Column, Row } from "../../../src/components/Grid";
 import { RatingBadge } from "../../../src/components/Button";
 import { StarIcon } from "../../../src/components/Icons";
@@ -24,6 +25,7 @@ export default {
     Column,
     Row,
     ImageCard,
+    Spacing,
     RatingBadge,
     StarIcon,
     Breadcrumb,

diff --git a/catalog/pages/header/index.md b/catalog/pages/header/index.md
@@ -15,6 +15,10 @@ rows:
     Type: string
     Default:
     Notes: Ending gradient color
+  - Prop: backgroundImage
+    Type: string
+    Default:
+    Notes: Uses an image as background instead of a gradient.
 ```
 
 ### Heading Props
@@ -45,29 +49,71 @@ responsive: true
 ```react
 responsive: true
 ---
-<HeaderWithImage>
-  <Column medium={8}>
-    <Row>
-    <Breadcrumb style={breadcrumbStyles}>
-      <Breadcrumb.Item position="1" href="/home" style={breadcrumbStyles}>Home</Breadcrumb.Item>
-      <Breadcrumb.Item position="2" href="/concerts" style={breadcrumbStyles}>Concert Tickets</Breadcrumb.Item>
-      <Breadcrumb.Item position="3" style={breadcrumbStyles}>Rock</Breadcrumb.Item>
-    </Breadcrumb>
-    <RatingBadge variant="transparent" ratingValue="4.8" bestRating="5" ratingCount="20" style={ratingBadgeStyles}>
-        <StarIcon size={12} color={colors.white.base} style={starIconStyles} />
-        4.8
-    </RatingBadge>
-    </Row>
-    <Heading level={1}>
-        <Heading.Strong>Generic</Heading.Strong>
-        {" "}
-        <Heading.Span>Header</Heading.Span>
-    </Heading>
-  </Column>
-  <Column medium={4}>
-    <HeaderWithImage.ImageWrapper>
-      <ImageCard src="https://placekitten.com/g/400/242" />
-    </HeaderWithImage.ImageWrapper>
-  </Column>
-</HeaderWithImage>
+<React.Fragment>
+  <HeaderWithImage>
+    <Column medium={7} large={8}>
+      <Row>
+        <Breadcrumb style={breadcrumbStyles}>
+          <Breadcrumb.Item position="1" href="/home" style={breadcrumbStyles}>Home</Breadcrumb.Item>
+          <Breadcrumb.Item position="2" href="/concerts" style={breadcrumbStyles}>Concert Tickets</Breadcrumb.Item>
+          <Breadcrumb.Item position="3" style={breadcrumbStyles}>Rock</Breadcrumb.Item>
+        </Breadcrumb>
+        <RatingBadge variant="transparent" ratingValue="4.8" bestRating="5" ratingCount="20" style={ratingBadgeStyles}>
+            4.8
+        </RatingBadge>
+      </Row>
+      <Heading level={1}>
+          <Heading.Strong>Generic</Heading.Strong>
+          {" "}
+          <Heading.Span>Header</Heading.Span>
+      </Heading>
+    </Column>
+    <Column medium={5} large={4}>
+      <HeaderWithImage.ImageWrapper>
+        <ImageCard src="https://placekitten.com/g/400/242" />
+      </HeaderWithImage.ImageWrapper>
+    </Column>
+  </HeaderWithImage>
+  <div>Some other content</div>
+</React.Fragment>
+```
+
+### Image Header with Image Background
+
+```react
+responsive: true
+---
+<React.Fragment>
+  <HeaderWithImage
+    withOverlay
+    backgroundImage="https://www.ticketmaster.com/new/compressedimages/dam/a/03e/154a8956-41a7-4508-a320-95f43764a03e_690051_TABLET_LANDSCAPE_16_9.jpg?width=2&height=1&fit=crop"
+  >
+    <Column medium={7} large={8}>
+      <Row>
+        <Breadcrumb style={breadcrumbStyles}>
+          <Breadcrumb.Item position="1" href="/home" style={breadcrumbStyles}>Home</Breadcrumb.Item>
+          <Breadcrumb.Item position="2" href="/concerts" style={breadcrumbStyles}>Concert Tickets</Breadcrumb.Item>
+          <Breadcrumb.Item position="3" style={breadcrumbStyles}>Rock</Breadcrumb.Item>
+        </Breadcrumb>
+        <RatingBadge variant="transparent" ratingValue="4.8" bestRating="5" ratingCount="20" style={ratingBadgeStyles}>
+            4.8
+        </RatingBadge>
+      </Row>
+      <Heading level={1}>
+          <Heading.Strong>Generic</Heading.Strong>
+          {" "}
+          <Heading.Span>Header</Heading.Span>
+      </Heading>
+    </Column>
+    <Column medium={5} large={4}>
+      <HeaderWithImage.ImageWrapper>
+        <ImageCard
+          src="https://www.ticketmaster.com/new/compressedimages/dam/a/03e/154a8956-41a7-4508-a320-95f43764a03e_690051_TABLET_LANDSCAPE_16_9.jpg?width=448&height=252&fit=crop"
+          withOverlay={false}
+        />
+      </HeaderWithImage.ImageWrapper>
+    </Column>
+  </HeaderWithImage>
+  <div>Some other content</div>
+</React.Fragment>
 ```
diff --git a/src/components/Gradient.js b/src/components/Gradient.js
@@ -14,6 +14,23 @@ const Gradient = styled.span`
     background-image: ${props =>
       `linear-gradient(${props.deg.large}, ${props.from}, ${props.to})`};
   `};
+
+  &.gradient--overlay:after {
+    content: "";
+    opacity: 0.4;
+    top: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    background-image: linear-gradient(77deg, rgba(0, 0, 0, 0), #000000);
+    ${mediumAndUp`
+        background-image: linear-gradient(82deg, rgba(0, 0, 0, 0), #000000);
+      `};
+
+    ${largeAndUp`
+      background-image: linear-gradient(86deg, rgba(0, 0, 0, 0), #000000);
+      `};
+  }
 `;
 
 Gradient.propTypes = {

diff --git a/src/components/Header/Heading.js b/src/components/Header/Heading.js
@@ -4,19 +4,10 @@ import styled from "styled-components";
 import colors from "../../theme/colors";
 import typography from "../../theme/typography";
 import { mediumAndUp, largeAndUp } from "../../theme/mediaQueries";
+import spacing from "../../theme/spacing";
 
 const Span = styled.span`
-  color: ${colors.white.base};
   font-weight: ${typography.weight.light};
-  font-size: ${typography.size.tera};
-
-  ${mediumAndUp`
-    font-size: ${typography.size.zetta};
-  `};
-
-  ${largeAndUp`
-    font-size: ${typography.size.bronto};
-  `};
 `;
 
 const Strong = Span.extend`
@@ -26,6 +17,18 @@ const Strong = Span.extend`
 const margins = styled.span`
   margin-top: 0;
   margin-bottom: 0;
+  padding-bottom: ${spacing.cozy};
+  line-height: 1.25;
+  color: ${p => (p.color ? p.color : colors.white.base)};
+  font-size: ${typography.size.tera};
+
+  ${mediumAndUp`
+    font-size: ${typography.size.zetta};
+  `};
+
+  ${largeAndUp`
+    font-size: ${typography.size.bronto};
+  `};
 `;
 
 const levels = [
@@ -36,9 +39,9 @@ const levels = [
   margins.withComponent("h5")
 ];
 
-const Heading = ({ level, children }) => {
+const Heading = ({ level, children, ...props }) => {
   const H = levels[level - 1];
-  return <H>{children}</H>;
+  return <H {...props}>{children}</H>;
 };
 
 Heading.propTypes = {

diff --git a/src/components/Header/WithImage.js b/src/components/Header/WithImage.js
@@ -1,60 +1,89 @@
 import React from "react";
+import PropTypes from "prop-types";
 import styled from "styled-components";
+import classNames from "classnames";
 
 import Gradient from "../Gradient";
 import Container from "../Grid/Container";
 import Row from "../Grid/Row";
-import { mediumAndUp, largeAndUp, xLargeAndUp } from "../../theme/mediaQueries";
+import { mediumAndUp } from "../../theme/mediaQueries";
 
-const Background = styled(Gradient)`
+const GradientBackground = styled(Gradient)`
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  min-height: 218px;
-  max-height: 278px;
   z-index: 1;
+  min-height: 218px;
+  max-height: 218px;
 `;
 
-const Wrapper = styled.section`
-  position: relative;
+const ImageBackground = styled(GradientBackground)`
+  background-size: cover;
+  background-repeat: no-repeat;
+`;
+
+const Wrapper = styled.header`
   width: 100%;
+  position: relative;
 `;
 
 const ContainerWrapper = styled(Container)`
+  padding-top: 60px;
   z-index: 2;
-  position: relative;
-  min-height: 218px;
-  max-height: 278px;
 `;
 
 const ContainerRow = styled(Row)`
-  align-items: flex-end;
-  height: 158px;
+  align-items: center;
   position: relative;
+  z-index: 2;
 `;
 
 const ImageWrapper = styled.div`
   ${mediumAndUp`
-    position: absolute;
-    top: 50%;
-  `};
-
-  ${largeAndUp`top: 30%;`};
-  ${xLargeAndUp`top: 20%;`};
+      padding-top: 60px;
+    `};
 `;
 
-const ImageHeader = ({ children, from, to, deg, style }) => (
-  <Wrapper style={style}>
-    <Background from={from} to={to} deg={deg} />
+const ImageHeader = ({
+  children,
+  from,
+  to,
+  deg,
+  backgroundImage,
+  withOverlay,
+  ...props
+}) => (
+  <Wrapper {...props}>
+    {backgroundImage ? (
+      <ImageBackground
+        style={{ backgroundImage: `url(${backgroundImage})` }}
+        className={classNames({ "gradient--overlay": withOverlay })}
+        aria-hidden
+      />
+    ) : (
+      <GradientBackground
+        from={from}
+        to={to}
+        deg={deg}
+        className={classNames({ "gradient--overlay": withOverlay })}
+      />
+    )}
     <ContainerWrapper>
       <ContainerRow>{children}</ContainerRow>
     </ContainerWrapper>
   </Wrapper>
 );
 
 ImageHeader.propTypes = {
-  ...Gradient.propTypes
+  ...Gradient.propTypes,
+  backgroundImage: PropTypes.string,
+  withOverlay: PropTypes.bool
+};
+
+ImageHeader.defaultProps = {
+  backgroundImage: null,
+  withOverlay: false
 };
 
 ImageHeader.ImageWrapper = ImageWrapper;

diff --git a/src/components/Header/__tests__/WithImage.spec.js b/src/components/Header/__tests__/WithImage.spec.js
@@ -2,7 +2,6 @@ import React from "react";
 import renderer from "react-test-renderer";
 
 import HeaderWithImage from "../WithImage";
-import Heading from "../Heading";
 import Column from "../../Grid/Column";
 
 describe("WithImage", () => {
@@ -11,13 +10,25 @@ describe("WithImage", () => {
       renderer
         .create(
           <HeaderWithImage>
-            <Column medium={8}>
-              <Heading level={1}>
-                <Heading.Strong>Generic</Heading.Strong>{" "}
-                <Heading.Span>Header</Heading.Span>
-              </Heading>
+            <Column>
+              <HeaderWithImage.ImageWrapper>
+                <img
+                  src="https://placekitten.com/g/400/242"
+                  alt="place holder"
+                />
+              </HeaderWithImage.ImageWrapper>
             </Column>
-            <Column medium={4}>
+          </HeaderWithImage>
+        )
+        .toJSON()
+    ).toMatchSnapshot());
+
+  it("renders header background image", () =>
+    expect(
+      renderer
+        .create(
+          <HeaderWithImage backgroundImage="https://placekitten.com/g/2/2">
+            <Column>
               <HeaderWithImage.ImageWrapper>
                 <img
                   src="https://placekitten.com/g/400/242"