From 5531e551e86bfd585af96c336110a371e2890aa2 Mon Sep 17 00:00:00 2001
From: Adam Raider <adam.raider@wework.com>
Date: Thu, 24 Jan 2019 13:32:05 -0500
Subject: [PATCH] feat(typography): Adds first draft of all type styles

---
 packages/ray/lib/_typography.scss             | 127 +++++++++---------
 packages/ray/stories/buttons.stories.js       |  12 ++
 packages/ray/stories/card.stories.js          |  12 +-
 packages/ray/stories/forms.stories.js         |  47 +++++++
 packages/ray/stories/index.stories.js         | 117 ----------------
 .../ray/stories/{page => }/page.stories.js    |   6 +-
 .../ray/stories/{page => styles}/styles.scss  |   0
 packages/ray/stories/typography.stories.js    |  67 +++++++++
 packages/ray/stories/util/withPadding.js      |   7 +
 9 files changed, 202 insertions(+), 193 deletions(-)
 create mode 100644 packages/ray/stories/buttons.stories.js
 create mode 100644 packages/ray/stories/forms.stories.js
 delete mode 100644 packages/ray/stories/index.stories.js
 rename packages/ray/stories/{page => }/page.stories.js (88%)
 rename packages/ray/stories/{page => styles}/styles.scss (100%)
 create mode 100644 packages/ray/stories/typography.stories.js
 create mode 100644 packages/ray/stories/util/withPadding.js

diff --git a/packages/ray/lib/_typography.scss b/packages/ray/lib/_typography.scss
index 7f6959e5..da09516c 100644
--- a/packages/ray/lib/_typography.scss
+++ b/packages/ray/lib/_typography.scss
@@ -1,93 +1,94 @@
-p {
-  margin: 0 0 34px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: bold;
+  margin: 0;
 }
 
-.h4 {
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 26px;
-  margin-bottom: 5px;
+.h1 {
+  font-size: 4rem;
+  line-height: 96px;
+  margin-bottom: 1.5rem;
+}
 
-  @include tablet {
-    font-size: 20px;
-    line-height: 32px;
-  }
+.h2 {
+  font-size: 3rem;
+  line-height: 72px;
+  margin-bottom: 1rem;
 }
 
 .h3 {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 28px;
-  margin-bottom: 10px;
-
-  @include tablet {
-    font-size: 40px;
-    line-height: 56px;
-  }
+  font-size: 2.5rem;
+  line-height: 60px;
+  margin-bottom: 1rem;
 }
 
-.h2 {
-  font-size: 40px;
-  font-weight: 600;
+.h4 {
+  font-size: 2rem;
   line-height: 56px;
-  margin-bottom: 10px;
-
-  @include tablet {
-    font-size: 48px;
-    line-height: 72px;
-  }
+  margin-bottom: 1rem;
 }
 
-.h1 {
-  font-size: 48px;
-  font-weight: 600;
-  line-height: 72px;
-  margin-bottom: 20px;
+.h5 {
+  font-size: 1.5rem;
+  line-height: 40px;
+  margin-bottom: 0.5rem;
+}
 
-  @include tablet {
-    font-size: 56px;
-    line-height: 80px;
-  }
+.h6 {
+  font-size: 1.25rem;
+  line-height: 40px;
+  margin-bottom: 0.5rem;
 }
 
-.h0 {
-  font-size: 56px;
+p,
+.p1,
+.p2,
+.p3,
+.p4,
+.p5,
+.p6 {
   font-weight: 400;
-  line-height: 80px;
-  margin-bottom: 20px;
-
-  @include tablet {
-    font-size: 64px;
-    line-height: 96px;
-  }
+  margin: 0;
 }
 
 .p1 {
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 32px;
+  font-size: 2rem;
+  line-height: 48px;
 }
 
 .p2 {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 28px;
+  font-size: 1.5rem;
+  line-height: 40px;
 }
 
 .p3 {
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: 1.25rem;
+  line-height: 32px;
 }
 
 .p4 {
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 1rem;
+  line-height: 28px;
+}
+
+.p5 {
+  font-size: 0.875rem;
+  line-height: 24px;
+}
+
+.p6 {
+  font-size: 0.75rem;
+  line-height: 12px;
 }
 
 .label {
diff --git a/packages/ray/stories/buttons.stories.js b/packages/ray/stories/buttons.stories.js
new file mode 100644
index 00000000..5224b524
--- /dev/null
+++ b/packages/ray/stories/buttons.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import withPadding from './util/withPadding';
+
+storiesOf('Buttons', module)
+  .addWithJSX('primary', () => (
+    <button className="btn--primary">Hello World</button>
+  ))
+  .addWithJSX('secondary', () => (
+    <button className="btn--secondary">Hello World</button>
+  ));
diff --git a/packages/ray/stories/card.stories.js b/packages/ray/stories/card.stories.js
index a01ca6c2..d1fd1c66 100644
--- a/packages/ray/stories/card.stories.js
+++ b/packages/ray/stories/card.stories.js
@@ -5,7 +5,7 @@ storiesOf('Card', module).addWithJSX('All', () => (
   <div
     style={{
       padding: '1rem',
-      maxWidth: '600px'
+      maxWidth: '400px'
     }}
   >
     <div className="card">
@@ -15,14 +15,10 @@ storiesOf('Card', module).addWithJSX('All', () => (
       />
 
       <div className="card__content">
-        <h2 className="h3" style={{ marginTop: 0 }}>
-          Spacetravel guidelines
-        </h2>
-        <p className="copy2">
+        <h2 className="h5">Spacetravel guidelines</h2>
+        <p className="copy5">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
-          atque minima itaque sint! Doloremque odio quia saepe unde sunt neque
-          quam quibusdam in, nihil beatae, consequatur cumque? Cupiditate, quia
-          facilis.
+          atque minima itaque sint! Doloremque odio quia saepe.
         </p>
       </div>
     </div>
diff --git a/packages/ray/stories/forms.stories.js b/packages/ray/stories/forms.stories.js
new file mode 100644
index 00000000..da6df8db
--- /dev/null
+++ b/packages/ray/stories/forms.stories.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import withPadding from './util/withPadding';
+
+storiesOf('Forms', module)
+  .addWithJSX('single field', () =>
+    withPadding(
+      <div className="field">
+        <input id="email" type="text" placeholder="arya.stark@winterfell.com" />
+        <label for="email">Email address</label>
+      </div>
+    )
+  )
+  .addWithJSX('example form', () =>
+    withPadding(
+      <React.Fragment>
+        <h2 className="h3">Sign up</h2>
+        <p className="p3" style={{ marginBottom: '1.5rem' }}>
+          You have the opportunity to try new things, but also to make mistakes
+          and fail without the pressure of being judged.
+        </p>
+        <div className="field">
+          <input id="name" type="text" placeholder="Arya Stark" />
+          <label for="name">Name</label>
+        </div>
+        <div className="field">
+          <input
+            id="email"
+            type="text"
+            placeholder="arya.stark@winterfell.com"
+          />
+          <label for="email">Email address</label>
+        </div>
+        <div className="field">
+          <input
+            id="password"
+            type="password"
+            placeholder="the.north.remembers"
+          />
+          <label for="password">Password</label>
+        </div>
+
+        <button className="btn--primary">Submit</button>
+      </React.Fragment>
+    )
+  );
diff --git a/packages/ray/stories/index.stories.js b/packages/ray/stories/index.stories.js
deleted file mode 100644
index 097b9493..00000000
--- a/packages/ray/stories/index.stories.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-const Image = props => {
-  return <img {...props} style={{ width: '100%' }} />;
-};
-
-const withContainer = html => (
-  <div className="container" style={{ margin: '100px auto' }}>
-    <div className="col-12">{html}</div>
-  </div>
-);
-storiesOf('Typography', module)
-  .addWithJSX('All', () =>
-    withContainer(
-      ['p1', 'p2', 'p3', 'h1', 'h2', 'h3', 'h4'].map(type => {
-        const Tag = type[0] === 'h' ? type : 'p';
-        return (
-          <React.Fragment>
-            <h4 className="label">className: .{type}</h4>
-            <Tag className={type}>
-              You have the opportunity to try new things, but also to make
-              mistakes and fail without the pressure of being judged.
-            </Tag>
-            <hr style={{ opacity: 0.5, margin: '20px 0' }} />
-          </React.Fragment>
-        );
-      })
-    )
-  )
-  .addWithJSX('h1 + p1', () =>
-    withContainer(
-      <React.Fragment>
-        <h1 className="h1">Hello World</h1>
-        <p className="p1">
-          Lorem ipsum dolor amet williamsburg poke migas raw denim, 8-bit jean
-          shorts gentrify. Jianbing craft beer lo-fi man bun everyday carry
-          flexitarian. Humblebrag jean shorts intelligentsia, freegan everyday
-          carry shaman bespoke. Fam hashtag keffiyeh helvetica squid bitters
-          humblebrag hell of vaporware celiac glossier chillwave.
-        </p>
-      </React.Fragment>
-    )
-  )
-  .addWithJSX('h2 + p2', () =>
-    withContainer(
-      <React.Fragment>
-        <h1 className="h2">Hello World</h1>
-        <p className="p2">
-          Lorem ipsum dolor amet williamsburg poke migas raw denim, 8-bit jean
-          shorts gentrify. Jianbing craft beer lo-fi man bun everyday carry
-          flexitarian. Humblebrag jean shorts intelligentsia, freegan everyday
-          carry shaman bespoke. Fam hashtag keffiyeh helvetica squid bitters
-          humblebrag hell of vaporware celiac glossier chillwave.
-        </p>
-      </React.Fragment>
-    )
-  );
-
-storiesOf('Buttons', module)
-  .addWithJSX('primary', () => (
-    <button className="btn--primary">Hello World</button>
-  ))
-  .addWithJSX('secondary', () => (
-    <button className="btn--secondary">Hello World</button>
-  ));
-
-storiesOf('Grid', module).addWithJSX('example', () => (
-  <div className="container container--visual" style={{ minHeight: '100vh' }}>
-    <div className="col-6">
-      <Image src="/hero1.png" />
-    </div>
-  </div>
-));
-
-storiesOf('Forms', module)
-  .addWithJSX('single field', () =>
-    withContainer(
-      <div className="field">
-        <input id="email" type="text" placeholder="arya.stark@winterfell.com" />
-        <label for="email">Email address</label>
-      </div>
-    )
-  )
-  .addWithJSX('example form', () =>
-    withContainer(
-      <React.Fragment>
-        <h2 className="h2">Sign up</h2>
-        <p>
-          You have the opportunity to try new things, but also to make mistakes
-          and fail without the pressure of being judged.
-        </p>
-        <div className="field">
-          <input id="name" type="text" placeholder="Arya Stark" />
-          <label for="name">Name</label>
-        </div>
-        <div className="field">
-          <input
-            id="email"
-            type="text"
-            placeholder="arya.stark@winterfell.com"
-          />
-          <label for="email">Email address</label>
-        </div>
-        <div className="field">
-          <input
-            id="password"
-            type="password"
-            placeholder="the.north.remembers"
-          />
-          <label for="password">Password</label>
-        </div>
-
-        <button className="btn--primary">Submit</button>
-      </React.Fragment>
-    )
-  );
diff --git a/packages/ray/stories/page/page.stories.js b/packages/ray/stories/page.stories.js
similarity index 88%
rename from packages/ray/stories/page/page.stories.js
rename to packages/ray/stories/page.stories.js
index fe033036..7c4b9619 100644
--- a/packages/ray/stories/page/page.stories.js
+++ b/packages/ray/stories/page.stories.js
@@ -1,11 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import './styles.scss';
-
-const Image = props => {
-  return <img {...props} style={{ width: '100%' }} />;
-};
+import './styles/styles.scss';
 
 storiesOf('Page', module).addWithJSX('example', () => (
   <div className="container" style={{ padding: '4rem 0', minHeight: '100vh' }}>
diff --git a/packages/ray/stories/page/styles.scss b/packages/ray/stories/styles/styles.scss
similarity index 100%
rename from packages/ray/stories/page/styles.scss
rename to packages/ray/stories/styles/styles.scss
diff --git a/packages/ray/stories/typography.stories.js b/packages/ray/stories/typography.stories.js
new file mode 100644
index 00000000..68090807
--- /dev/null
+++ b/packages/ray/stories/typography.stories.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import withPadding from './util/withPadding';
+
+storiesOf('Typography', module)
+  .addWithJSX('All', () =>
+    withPadding(
+      [
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'p1',
+        'p2',
+        'p3',
+        'p4',
+        'p5',
+        'p6'
+      ].map(type => {
+        const Tag = type[0] === 'h' ? type : 'p';
+        return (
+          <React.Fragment>
+            <Tag className={type}>{type}</Tag>
+          </React.Fragment>
+        );
+      })
+    )
+  )
+  .addWithJSX('h1 + p1', () =>
+    withPadding(
+      <React.Fragment>
+        <h1 className="h1">Keeping It Fresh</h1>
+        <p className="p1">
+          This is a living system that needs to be maintained, so we’re focusing
+          on ease of use and keeping things up-to-date. Feel free to leave us
+          feedback too!
+        </p>
+      </React.Fragment>
+    )
+  )
+  .addWithJSX('h2 + p2', () =>
+    withPadding(
+      <React.Fragment>
+        <h1 className="h2">Keeping It Fresh</h1>
+        <p className="p2">
+          This is a living system that needs to be maintained, so we’re focusing
+          on ease of use and keeping things up-to-date. Feel free to leave us
+          feedback too!
+        </p>
+      </React.Fragment>
+    )
+  )
+  .addWithJSX('h3 + p3', () =>
+    withPadding(
+      <React.Fragment>
+        <h1 className="h3">Keeping It Fresh</h1>
+        <p className="p3">
+          This is a living system that needs to be maintained, so we’re focusing
+          on ease of use and keeping things up-to-date. Feel free to leave us
+          feedback too!
+        </p>
+      </React.Fragment>
+    )
+  );
diff --git a/packages/ray/stories/util/withPadding.js b/packages/ray/stories/util/withPadding.js
new file mode 100644
index 00000000..34ba8c35
--- /dev/null
+++ b/packages/ray/stories/util/withPadding.js
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const withPadding = children => (
+  <div style={{ padding: '1.5rem' }}>{children}</div>
+);
+
+export default withPadding;