From 77fd895b6c081a00be6da814cef3ccc97324c82c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?= <fabiommmoreira@Fabios-MBP.lan>
Date: Fri, 11 May 2018 17:38:50 +0100
Subject: [PATCH] feat(ui-toolkit): add parallax header after scroll

---
 .../ui-toolkit/src/styleguide/parallax.js     | 25 +++++++++++++++++--
 .../ui-toolkit/src/styleguide/renderer.js     |  2 +-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/ui-toolkit/src/styleguide/parallax.js b/packages/ui-toolkit/src/styleguide/parallax.js
index 54850055..8298402c 100644
--- a/packages/ui-toolkit/src/styleguide/parallax.js
+++ b/packages/ui-toolkit/src/styleguide/parallax.js
@@ -53,10 +53,19 @@ const Img = styled.img`
 const gutterWidth = 47 + 70;
 const windowWidth = (window || {}).outerWidth + 70;
 
+const isScrolledOutsideView = () => {
+  const elem = document.getElementById('parallaxWrapper');
+  const eleHeight = elem.clientHeight;
+  const scrollY = window.scrollY;
+
+  return scrollY > eleHeight;
+};
+
 export default class extends Component {
   state = {
     value: parseInt(windowWidth / gutterWidth, 10),
-    windowWidth
+    windowWidth,
+    show: true
   };
 
   render() {
@@ -67,13 +76,25 @@ export default class extends Component {
       });
     });
 
+    if (this.props.hideAfterScroll) {
+      window.addEventListener('scroll', () => {
+        if (this.state.show && isScrolledOutsideView()) {
+          this.setState({ show: false });
+        }
+      });
+    }
+
     const array = Array.apply(null, { length: this.state.value }).map(
       Number.call,
       Number
     );
 
+    if (!this.state.show) {
+      return null;
+    }
+
     return (
-      <Wrapper>
+      <Wrapper id="parallaxWrapper">
         {array.map((g, i) => (
           <Gutter key={g} style={{ left: gutterWidth * i }} />
         ))}
diff --git a/packages/ui-toolkit/src/styleguide/renderer.js b/packages/ui-toolkit/src/styleguide/renderer.js
index e8246f60..60655620 100644
--- a/packages/ui-toolkit/src/styleguide/renderer.js
+++ b/packages/ui-toolkit/src/styleguide/renderer.js
@@ -61,7 +61,7 @@ const StyleGuideRenderer = ({
     <ThemeProvider theme={fullTheme}>
       <ParallaxProvider>
         <Fragment>
-          {link === '/' ? <Parallax /> : null}
+          {link === '/' ? <Parallax hideAfterScroll="true" /> : null}
           <Header />
           <Grid style={{ marginLeft: 0, zIndex: 2, position: 'relative' }}>
             <Main>