update ParallaxBanner stories

Author: jscottsmith

stories/ParallaxBanner/ParallaxBanner.stories.js

@@ -12,11 +12,8 @@ import styles from './ParallaxBanner.scss';
 import '../styles.scss';
 
 storiesOf('<ParallaxBanner>', module)
-    .add('with a full page background', () => (
+    .add('with a single background', () => (
         <ParallaxBanner
-            style={{
-                height: '100vh',
-            }}
             className={styles.bannerBg}
             layers={[
                 {
@@ -28,8 +25,11 @@ storiesOf('<ParallaxBanner>', module)
             ]}
         />
     ))
-    .add('with a single background', () => (
+    .add('with a full page background', () => (
         <ParallaxBanner
+            style={{
+                height: '100vh',
+            }}
             className={styles.bannerBg}
             layers={[
                 {
@@ -58,53 +58,17 @@ storiesOf('<ParallaxBanner>', module)
             </div>
         </ParallaxBanner>
     ))
-    .add('with parallax disabled', () => (
-        <ParallaxBanner
-            className={styles.bannerBg}
-            disabled
-            layers={[
-                {
-                    image:
-                        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
-                    amount: 0.2,
-                    slowerScrollRate: false,
-                },
-            ]}
-        >
-            <div className={styles.parallaxChildren}>
-                <h1>Disabled Parallax</h1>
-            </div>
-        </ParallaxBanner>
-    ))
     .add('with multiple backgrounds', () => {
         const layers = [
             {
                 image:
-                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-1.png',
-                amount: 0,
-                slowerScrollRate: false,
-            },
-            {
-                image:
-                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-2.png',
-                amount: 0.1,
-                slowerScrollRate: false,
-            },
-            {
-                image:
-                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-3.png',
+                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-background.jpg',
                 amount: 0.2,
                 slowerScrollRate: false,
             },
             {
                 image:
-                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-4.png',
-                amount: 0.3,
-                slowerScrollRate: false,
-            },
-            {
-                image:
-                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/parallax-background-5.png',
+                    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png',
                 amount: 0.4,
                 slowerScrollRate: false,
             },
@@ -113,7 +77,25 @@ storiesOf('<ParallaxBanner>', module)
             <ParallaxBanner
                 className={styles.bannerBg}
                 layers={layers}
-                style={{ height: '50vh' }}
+                style={{ height: '75vh' }}
             />
         );
-    });
+    })
+    .add('with parallax disabled', () => (
+        <ParallaxBanner
+            className={styles.bannerBg}
+            disabled
+            layers={[
+                {
+                    image:
+                        'https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner.jpg',
+                    amount: 0.2,
+                    slowerScrollRate: false,
+                },
+            ]}
+        >
+            <div className={styles.parallaxChildren}>
+                <h1>Disabled Parallax</h1>
+            </div>
+        </ParallaxBanner>
+    ));