rework styling and add image stories

Author: jscottsmith

.storybook/webpack.config.js

@@ -10,28 +10,31 @@ const path = require('path');
 const SRC = path.resolve('./src');
 const STORIES = path.resolve('./stories');
 
-module.exports = {
-    resolve: {
-        alias: {
-            'react-scroll-parallax': SRC,
-            components: path.resolve(SRC + 'components'),
-        },
-    },
+// Export a function. Accept the base config as the only param.
+module.exports = async ({ config, mode }) => {
+    // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
 
-    module: {
-        rules: [
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+        test: /\.scss|.css$/,
+        use: [
+            'style-loader',
             {
-                test: /\.scss|.css$/,
-                use: [
-                    'style-loader',
-                    {
-                        loader: 'css-loader',
-                        options: { importLoaders: 1, modules: true },
-                    },
-                    'sass-loader',
-                ],
-                include: STORIES,
+                loader: 'css-loader',
+                options: { importLoaders: 1, modules: true },
             },
+            'sass-loader',
         ],
-    },
+        include: STORIES,
+    });
+
+    config.resolve.alias = {
+        'react-scroll-parallax': SRC,
+        components: path.resolve(SRC + 'components'),
+    };
+
+    // Return the altered config
+    return config;
 };

stories/Container.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ParallaxProvider } from 'react-scroll-parallax';
 
-const Container = ({ children, scrollAxis }) => (
+const Container = ({ children, scrollAxis, className }) => (
     <ParallaxProvider scrollAxis={scrollAxis}>
         <div className={scrollAxis}>
-            <div className="elements">{children}</div>
+            <div className={className}>{children}</div>
         </div>
     </ParallaxProvider>
 );

stories/Element/Element.scss

@@ -16,6 +16,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    background: slateblue;
 }
 
 .box {

stories/Image/Image.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withController } from 'react-scroll-parallax';
+import style from './Image.scss';
+
+class Image extends Component {
+    static propTypes = {
+        parallaxController: PropTypes.object.isRequired,
+        src: PropTypes.string.isRequired,
+    };
+
+    handleLoad = () => {
+        // updates cached values after image dimensions have loaded
+        this.props.parallaxController.update();
+    };
+
+    render() {
+        return (
+            <div className={style.image}>
+                <img src={this.props.src} onLoad={this.handleLoad} />
+            </div>
+        );
+    }
+}
+
+export default withController(Image);

stories/Image/Image.scss

@@ -0,0 +1,27 @@
+.images {
+    padding: 20% 10%;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-content: center;
+}
+
+.parallaxImage {
+    margin: 10% 0;
+    width: 45%;
+    background: none;
+}
+
+.parallaxImage2 {
+    margin: 10% auto 10%;
+    width: 65%;
+    background: none;
+}
+
+.image {
+    img {
+        display: block;
+        width: 100%;
+        height: auto;
+    }
+}