feat(section): Adds section styles and story

Author: Adam Raider

packages/ray/lib/_section.scss

@@ -0,0 +1,6 @@
+.Section {
+  &--withPadding {
+    padding-top: $padding-5;
+    padding-bottom: $padding-5;
+  }
+}

packages/ray/lib/_variables.scss

@@ -70,3 +70,5 @@ $container-max-widths: (
 
 $grid-columns: 12;
 $grid-gutter-width: 24px;
+
+$padding-5: 5rem;

packages/ray/lib/application.scss

@@ -12,3 +12,4 @@
 @import 'image';
 @import 'buttons';
 @import 'table';
+@import 'section';

packages/ray/stories/page.stories.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import withPadding from './util/withPadding';
+
+storiesOf('Section', module).addWithJSX('stacked', () =>
+  withPadding(
+    <React.Fragment>
+      <div className="Section Section--withPadding">
+        <div className="container">
+          <div className="row">
+            <div className="offset-1 col-10">
+              <h2 className="h2">Make a life not just a living</h2>
+              <p className="p3">
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi
+                vero doloribus quis accusamus consequatur, voluptatem,
+                reprehenderit pariatur libero qui expedita placeat? Officia,
+                impedit libero. Rerum cumque assumenda ipsum molestias
+                explicabo!
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container">
+        <div className="row">
+          <div className="col-12">
+            <div
+              className="Section Section--withPadding"
+              style={{
+                backgroundColor: '#FFF7F5'
+              }}
+            >
+              <div className="row align-items-center">
+                <div className="offset-1 col-5">
+                  <h2 className="h3">
+                    Space for the world’s largest companies
+                  </h2>
+                  <p className="p3">
+                    The world’s most innovative companies are using WeWork to
+                    think differently about workspace.
+                  </p>
+                </div>
+                <div className="offset-1 col-4">
+                  <div
+                    className="Background--4by3"
+                    style={{
+                      backgroundImage: `url(https://source.unsplash.com/random/800x800)`
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="Section Section--withPadding">
+        <div className="container">
+          <div className="row">
+            <div className="offset-1 col-10">
+              <h2 className="h2">Space for the world’s largest companies</h2>
+              <p className="p3">
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi
+                vero doloribus quis accusamus consequatur, voluptatem,
+                reprehenderit pariatur libero qui expedita placeat? Officia,
+                impedit libero. Rerum cumque assumenda ipsum molestias
+                explicabo!
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </React.Fragment>
+  )
+);