fix(grid): add some utils (#77)

* fix(grid): add some utils * make story prettier * docs(button): better examples
wework · Mar 25, 2019 · 9749b68 · 9749b68
1 parent 175a640
commit 9749b68
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 43 deletions.
diff --git a/docs/components/grid.md b/docs/components/grid.md
@@ -16,6 +16,9 @@ Ray features three primary breakpoints: desktop, tablet, and mobile. Our grid sy
   <div class="ray-grid__inner">
     <div class="ray-grid__cell">I'm a cell</div>
     <div class="ray-grid__cell--span-4">I'm another cell that is 4 columns</div>
+    <div class="ray-grid__cell--span-full">
+      I'm another cell that will always span full width
+    </div>
   </div>
 </div>
 ```
@@ -24,7 +27,9 @@ Ray features three primary breakpoints: desktop, tablet, and mobile. Our grid sy
 | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
 | ray-grid                                                    | Mandatory, for the layout grid element                                                                |
 | ray-grid--align-<left\|right>                               | Optional, align the grid to the left or right side of the container (default: center)                 |
+| ray-grid--justify-<left\|center\|right>                     | Optional, align the cells of the grid (default: left, does not affect nested grids                    |
 | ray-grid\_\_inner                                           | Mandatory, for wrapping grid cells (_must_ be child of `.ray-grid`)                                   |
 | ray-grid\_\_cell                                            | Mandatory, for the layout grid cell                                                                   |
 | ray-grid\_\_cell--align-<top\|middle\|bottom>               | Optional, align the cell to the top, middle, or center of the containing grid                         |
 | ray-grid\_\_cell--span-<NUMBER_OF_COLUMNS>-<TYPE_OF_DEVICE> | Optional, specifies the number of columns the cell spans on a type of device (desktop, tablet, phone) |
+| ray-grid\_\_cell--span-full                                 | Optional, specify that the cell should span the full width of the grid                                |
diff --git a/packages/core/src/global/material-grid/mdc-layout-grid.scss b/packages/core/src/global/material-grid/mdc-layout-grid.scss
@@ -77,6 +77,12 @@
           $gutter
         );
 
+        &--span-full {
+          $max-columns: map-get($mdc-layout-grid-columns, $size);
+
+          @include mdc-layout-grid-cell($size, $max-columns, $gutter);
+        }
+
         @for $span
           from 1
           through map-get($mdc-layout-grid-columns, $upper-breakpoint)
@@ -123,5 +129,23 @@
     margin-right: 0;
     margin-left: auto;
   }
+
+  .#{$mdc-prefix}grid--justify-left {
+    > .#{$mdc-prefix}grid__inner {
+      justify-content: left;
+    }
+  }
+
+  .#{$mdc-prefix}grid--justify-center {
+    > .#{$mdc-prefix}grid__inner {
+      justify-content: center;
+    }
+  }
+
+  .#{$mdc-prefix}grid--justify-right {
+    > .#{$mdc-prefix}grid__inner {
+      justify-content: right;
+    }
+  }
   // postcss-bem-linter: end
 }
diff --git a/packages/core/stories/grid.stories.js b/packages/core/stories/grid.stories.js
@@ -2,39 +2,58 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { range } from 'lodash';
 
+/* eslint-disable react/prop-types */
+
+function SampleContent(props) {
+  return (
+    <div
+      {...props}
+      style={{
+        minHeight: '4vh',
+        backgroundColor: 'hsl(255, 100%, 75%)'
+      }}
+    />
+  );
+}
+
+function RayGridInnerWithBackground(props) {
+  return (
+    <div
+      {...props}
+      className="ray-grid__inner"
+      style={{ backgroundColor: 'hsl(0, 100%, 75%)', ...props.style }}
+    />
+  );
+}
+
 storiesOf('Grid', module)
   .add('default', () => (
     <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
       <div className="ray-grid">
-        <div
-          className="ray-grid__inner"
-          style={{ backgroundColor: 'hsl(0, 100%, 75%)' }}
-        >
+        <RayGridInnerWithBackground>
           {range(12).map(n => (
-            <div className="ray-grid__cell--span-1" key={n}>
-              <div
-                style={{
-                  minHeight: '4vh',
-                  backgroundColor: 'hsl(255, 100%, 75%)'
-                }}
-              >
-                {n + 1}
-              </div>
+            <div className="ray-grid__cell" key={n}>
+              <SampleContent>{n + 1}</SampleContent>
             </div>
           ))}
-        </div>
+          <div className="ray-grid__cell">
+            <div
+              style={{
+                minHeight: '4vh',
+                backgroundColor: 'hsl(255, 100%, 75%)'
+              }}
+            >
+              yo
+            </div>
+          </div>
+        </RayGridInnerWithBackground>
       </div>
     </div>
   ))
   .add('overlap', () => (
     <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
       <div className="ray-grid">
-        <div
-          className="ray-grid__inner"
-          style={{
-            position: 'relative'
-          }}
-        >
+        <RayGridInnerWithBackground>
           <div
             className="ray-grid__cell--span-4"
             style={{
@@ -49,7 +68,8 @@ storiesOf('Grid', module)
             <div
               style={{
                 backgroundColor: '#fff',
-                padding: '1rem'
+                padding: '1rem',
+                width: '100%'
               }}
             >
               <pre
@@ -85,7 +105,24 @@ storiesOf('Grid', module)
               }}
             />
           </div>
-        </div>
+        </RayGridInnerWithBackground>
+      </div>
+    </div>
+  ))
+  .add('sample utils', () => (
+    <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
+      <div className="ray-grid ray-grid--justify-center">
+        <RayGridInnerWithBackground>
+          <div className="ray-grid__cell">
+            <SampleContent />
+          </div>
+          <div className="ray-grid__cell--span-full">
+            <SampleContent />
+          </div>
+          <div className="ray-grid__cell">
+            <SampleContent />
+          </div>
+        </RayGridInnerWithBackground>
       </div>
     </div>
   ));
diff --git a/packages/docs-app/src/components/GridDocumentation/index.js b/packages/docs-app/src/components/GridDocumentation/index.js
@@ -24,37 +24,46 @@ function GridDocumentation() {
   );
 }
 
+function SampleContent(props) {
+  return (
+    <div
+      {...props}
+      style={{
+        minHeight: '4vh',
+        backgroundColor: 'hsl(255, 100%, 75%)'
+      }}
+    />
+  );
+}
+
+function RayGridInnerWithBackground(props) {
+  return (
+    <div
+      {...props}
+      className="ray-grid__inner"
+      style={{ backgroundColor: 'hsl(0, 100%, 75%)', ...props.style }}
+    />
+  );
+}
 function GridExample() {
   return (
     <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
       <div className="ray-grid">
-        <div
-          className="ray-grid__inner"
-          style={{ backgroundColor: 'hsl(0, 100%, 75%)' }}
-        >
+        <RayGridInnerWithBackground>
           {range(12).map(n => (
             <div className="ray-grid__cell--span-1" key={n}>
-              <div
-                style={{
-                  minHeight: '4vh',
-                  backgroundColor: 'hsl(255, 100%, 75%)'
-                }}
-              >
-                span-1
-              </div>
+              <SampleContent>cell</SampleContent>
             </div>
           ))}
           <div className="ray-grid__cell">
-            <div
-              style={{
-                minHeight: '4vh',
-                backgroundColor: 'hsl(255, 100%, 75%)'
-              }}
-            >
-              span
-            </div>
+            <SampleContent>cell</SampleContent>
+          </div>
+          <div className="ray-grid__cell--span-full">
+            <SampleContent>
+              {"I'm a cell that will always span full width"}
+            </SampleContent>
           </div>
-        </div>
+        </RayGridInnerWithBackground>
       </div>
     </div>
   );