fix: Typography classes (#21)

* fix: Typography classes

* dynamic extend class

* Update stories/grid.stories.js

Co-Authored-By: adamraider <adamjraider@gmail.com>

* update copy

* remove duplicate story

Author: adamraider

packages/ray/lib/_tabs.scss

@@ -5,7 +5,7 @@ $tabs-border-size: 1px;
   display: flex;
 
   &__item {
-    @extend .p3;
+    @extend .#{$prefix}p3;
     display: block;
     cursor: pointer;
     color: $color-blue50;

packages/ray/lib/global/_typography.scss

@@ -4,65 +4,65 @@ h3,
 h4,
 h5,
 h6,
-.#{$prefix}--h1,
-.#{$prefix}--h2,
-.#{$prefix}--h3,
-.#{$prefix}--h4,
-.#{$prefix}--h5,
-.#{$prefix}--h6 {
+.#{$prefix}h1,
+.#{$prefix}h2,
+.#{$prefix}h3,
+.#{$prefix}h4,
+.#{$prefix}h5,
+.#{$prefix}h6 {
   font-weight: bold;
   margin: 0;
 }
 
 .h1,
-.#{$prefix}--h1 {
+.#{$prefix}h1 {
   font-size: 4rem;
   line-height: 96px;
   margin-bottom: 1.5rem;
 }
 
 .h2,
-.#{$prefix}--h2 {
+.#{$prefix}h2 {
   font-size: 3rem;
   line-height: 72px;
   margin-bottom: 1rem;
 }
 
 .h3,
-.#{$prefix}--h3 {
+.#{$prefix}h3 {
   font-size: 2.5rem;
   line-height: 60px;
   margin-bottom: 1rem;
 }
 
 .h4,
-.#{$prefix}--h4 {
+.#{$prefix}h4 {
   font-size: 2rem;
   line-height: 56px;
   margin-bottom: 1rem;
 }
 
 .h5,
-.#{$prefix}--h5 {
+.#{$prefix}h5 {
   font-size: 1.5rem;
   line-height: 40px;
   margin-bottom: 0.5rem;
 }
 
 .h6,
-.#{$prefix}--h6 {
+.#{$prefix}h6 {
   font-size: 1.25rem;
   line-height: 40px;
   margin-bottom: 0.5rem;
 }
 
 p,
-.p1,
-.p2,
-.p3,
-.p4,
-.p5,
-.p6 {
+.#{$prefix}p1,
+.#{$prefix}p2,
+.#{$prefix}p3,
+.#{$prefix}p4,
+.#{$prefix}p5,
+.#{$prefix}p6 {
   font-weight: 400;
   margin: 0;
 }
@@ -73,32 +73,32 @@ p {
   }
 }
 
-.p1 {
+.#{$prefix}p1 {
   font-size: 2rem;
   line-height: 48px;
 }
 
-.p2 {
+.#{$prefix}p2 {
   font-size: 1.5rem;
   line-height: 40px;
 }
 
-.p3 {
+.#{$prefix}p3 {
   font-size: 1.25rem;
   line-height: 32px;
 }
 
-.p4 {
+.#{$prefix}p4 {
   font-size: 1rem;
   line-height: 28px;
 }
 
-.p5 {
+.#{$prefix}p5 {
   font-size: 0.875rem;
   line-height: 24px;
 }
 
-.p6 {
+.#{$prefix}p6 {
   font-size: 0.75rem;
   line-height: 12px;
 }

packages/ray/stories/grid.stories.js

@@ -2,27 +2,69 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { throttle, range } from 'lodash';
 import withPadding from './util/withPadding';
+import { relative } from 'upath';
 
-storiesOf('Grid', module).addWithJSX('default', () => (
-  <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
-    <div className="ray--grid">
-      <div
-        className="ray--grid__inner"
-        style={{ backgroundColor: 'hsl(0, 100%, 75%)' }}
-      >
-        {range(12).map(n => (
-          <div className="ray--grid__cell--span-1">
+storiesOf('Grid', module)
+  .addWithJSX('default', () => (
+    <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
+      <div className="ray--grid">
+        <div
+          className="ray--grid__inner"
+          style={{ backgroundColor: 'hsl(0, 100%, 75%)' }}
+        >
+          {range(12).map(n => (
+            <div className="ray--grid__cell--span-1">
+              <div
+                style={{
+                  minHeight: '4vh',
+                  backgroundColor: 'hsl(255, 100%, 75%)'
+                }}
+              >
+                {n + 1}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  ))
+  .addWithJSX('overlap', () => (
+    <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
+      <div className="ray--grid">
+        <div
+          className="ray--grid__inner"
+          style={{
+            alignItems: 'center'
+          }}
+        >
+          <div
+            className="ray--grid__cell--span-4"
+            style={{
+              zIndex: '1',
+              gridColumnStart: '1',
+              gridRow: '1'
+            }}
+          >
+            <div className="ray--h3">
+              Each element needs `grid-column-start` & `grid-row: 1` defined for
+              overlapping containers. :)
+            </div>
+          </div>
+          <div
+            className="ray--grid__cell--span-10"
+            style={{
+              gridColumnStart: '3',
+              gridRow: '1'
+            }}
+          >
             <div
+              className="Background--16by9"
               style={{
-                minHeight: '4vh',
-                backgroundColor: 'hsl(255, 100%, 75%)'
+                backgroundImage: `url(//cdn.wework.com/6vy33zo2mgy3/2C7F8u8yfW4kKAI6OUa0a2/aae67b57aa0e7a26fcc84c561e823ee8/1_Web_150DPI-20180717_WeWork_Constellation_-_Common_Areas_-_Internal_Staircase.jpg?auto=compress&faces=false&w=1000&fit=crop&dpr=2&h=)`
               }}
-            >
-              {n + 1}
-            </div>
+            />
           </div>
-        ))}
+        </div>
       </div>
     </div>
-  </div>
-));
+  ));