fix(grid): Remove grid default attr

wework · Feb 27, 2019 · c2a64f6 · c2a64f6
1 parent f9e8bfb
commit c2a64f6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 43 deletions.
diff --git a/packages/ray/lib/global/_variables.scss b/packages/ray/lib/global/_variables.scss
@@ -106,19 +106,19 @@ $grid-breakpoints: (
  sm: 0px,
  md: 600px,
  lg: 1195px
-) !default;
+);
 
 $container-max-widths: (
  sm: 100%,
  md: 100%,
  lg: 1320px
-) !default;
+);
 
 $container-gutters: (
  sm: 1rem,
  md: 3rem,
  lg: 3.75rem
-) !default;
+);
 
 @include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
 @include _assert-starts-at-zero($grid-breakpoints);

diff --git a/packages/ray/stories/grid.stories.js b/packages/ray/stories/grid.stories.js
@@ -3,46 +3,29 @@ import { storiesOf } from '@storybook/react';
 import { throttle, range } from 'lodash';
 import withPadding from './util/withPadding';
 
-class PageWidth extends React.Component {
- state = {
- width: window.innerWidth
- };
-
- componentDidMount() {
- window.addEventListener(
- 'resize',
- throttle(() => {
- this.setState({ width: window.innerWidth });
- }, 100)
- );
- }
-
- render() {
- return this.state.width;
- }
-}
-
-storiesOf('Grid', module).addWithJSX('default', () => (
- <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
- <div className="ray--container">
- <div
- className="ray--row"
- style={{ backgroundColor: 'hsl(0, 100%, 75%)' }}
- >
- {range(12).map(n => (
- <div className="ray--col-1">
- <div
- style={{
- minHeight: '100vh',
- paddingBottom: '100%',
- backgroundColor: 'hsl(255, 100%, 75%)'
- }}
- >
- {n + 1}
+storiesOf('Grid', module)
+ .addWithJSX('default', () => (
+ <div style={{ backgroundColor: 'hsl(144, 100%, 75%)' }}>
+ <div className="ray--container">
+ <div
+ className="ray--row"
+ style={{ backgroundColor: 'hsl(0, 100%, 75%)' }}
+ >
+ {range(12).map(n => (
+ <div className="ray--col-1">
+ <div
+ style={{
+ minHeight: '100vh',
+ paddingBottom: '100%',
+ backgroundColor: 'hsl(255, 100%, 75%)'
+ }}
+ >
+ {n + 1}
+ </div>
  </div>
- </div>
- ))}
+ ))}
+ </div>
  </div>
  </div>
- </div>
-));
+ ))
+ .add('ray--container', () => <div className="ray--container">asdsads</div>);