From 63827bc866d1342253cf9b7c1ffde7638293a5c5 Mon Sep 17 00:00:00 2001
From: Josh Miles <jmiles77@ford.com>
Date: Thu, 3 Oct 2019 10:48:06 -0400
Subject: [PATCH] Add background-position-y as an option for the background
 image

Signed-off-by: Drew Cobb <acobb6@ford.com>
---
 src/LazyHero.js               | 10 +++++++++-
 website/src/components/App.js |  5 +++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/LazyHero.js b/src/LazyHero.js
index 7696f6c..5e6d5fb 100644
--- a/src/LazyHero.js
+++ b/src/LazyHero.js
@@ -159,7 +159,13 @@ class LazyHero extends Component {
                     imageHeight={backgroundDimensions && backgroundDimensions.height}
                     imageSrc={this.props.imageSrc}
                     imageWidth={backgroundDimensions && backgroundDimensions.width}
-                    style={{ backgroundPositionY }}
+                    style={{
+                        backgroundPositionY: (
+                            this.props.backgroundPositionY
+                                ? this.props.backgroundPositionY
+                                : backgroundPositionY
+                        ),
+                    }}
                     transitionDuration={this.props.transitionDuration}
                     transitionTimingFunction={this.props.transitionTimingFunction}
                 />
@@ -176,6 +182,7 @@ class LazyHero extends Component {
 }
 
 LazyHero.defaultProps = {
+    backgroundPositionY: undefined,
     children: undefined,
     className: undefined,
     color: '#fff',
@@ -191,6 +198,7 @@ LazyHero.defaultProps = {
 };
 
 LazyHero.propTypes = {
+    backgroundPositionY: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     color: PropTypes.string,
diff --git a/website/src/components/App.js b/website/src/components/App.js
index 4855843..7343ef3 100644
--- a/website/src/components/App.js
+++ b/website/src/components/App.js
@@ -15,6 +15,7 @@ function App(props) {
     return (
         <div className="App">
             <LazyHero
+                backgroundPositionY={props.knobs.backgroundPositionY.current}
                 className={props.knobs.className.current}
                 color={props.knobs.color.current}
                 imageSrc={props.knobs.imageSrc.current}
@@ -54,6 +55,10 @@ const enhance = compose(
     pure,
     withState('id', 'setId', 0),
     withState('knobs', 'setKnobs', {
+        backgroundPositionY: {
+            description: 'backgroundPositionY property on the image. Will override parallax effect.',
+            type: 'string',
+        },
         children: {
             current: '<Logo />',
             description: 'Child components',