Merge pull request #138 from Kamahl19/use-flexboxgrid2

Use evgenyrodionov/flexboxgrid2 instead of roylee0704/react-flexbox-grid

Author: roylee0704

doc/app/components/hero/index.jsx

@@ -11,7 +11,7 @@ const Hero = () => {
         <h1 className={style.headline}>React-FlexBox-Grid</h1>
       </Row>
       <Row className={style.description} center="xs">
-        <code>React(CSS-Modules(flexboxgrid.css));</code>
+        <code>React(CSS-Modules(flexboxgrid2.css));</code>
       </Row>
       <Row center="xs">
         <Button url="https://github.com/roylee0704/react-flexbox-grid">Github</Button>

doc/app/components/home/index.jsx

@@ -26,7 +26,7 @@ const Home = () => (
     <Grid fluid className={home.wrap}>
       <Section
         title="Responsive"
-        description="Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.">
+        description="Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md, lg & xl viewport widths.">
         <Row>
           <Box type="row" xs={12} sm={3} md={2} lg={1} />
           <Box type="row" xs={6} sm={6} md={8} lg={10} />

package.json

@@ -23,7 +23,7 @@
     "react-component"
   ],
   "dependencies": {
-    "flexboxgrid": "^6.3.0",
+    "flexboxgrid2": "^7.0.0-alpha7",
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
@@ -48,7 +48,6 @@
     "expect": "^1.13.0",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",
-    "flexboxgrid": "^6.3.0",
     "isparta": "^4.0.0",
     "jsdom": "^7.0.2",
     "karma": "^1.6.0",

react-flexbox-grid.d.ts

@@ -6,7 +6,7 @@
 import {Component} from 'react';
 
 declare namespace __ReactFlexboxGrid {
-  type ViewportSizeType = 'xs' | 'sm' | 'md' | 'lg';
+  type ViewportSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   type ColumnSizeType = number | boolean;
 
   export interface GridProps {
@@ -34,10 +34,12 @@ declare namespace __ReactFlexboxGrid {
     readonly sm?: ColumnSizeType,
     readonly md?: ColumnSizeType,
     readonly lg?: ColumnSizeType,
+    readonly xl?: ColumnSizeType,
     readonly xsOffset?: number,
     readonly smOffset?: number,
     readonly mdOffset?: number,
     readonly lgOffset?: number,
+    readonly xlOffset?: number,
     readonly first?: ViewportSizeType,
     readonly last?: ViewportSizeType,
     readonly className?: string,

src/classNames.js

@@ -1,4 +1,4 @@
-import styles from 'flexboxgrid/dist/flexboxgrid.css';
+import styles from 'flexboxgrid2/flexboxgrid2.css';
 
 export default function getClass(className) {
   return (styles && styles[className]) ? styles[className] : className;

src/components/Col.js

@@ -9,10 +9,12 @@ const propTypes = {
   sm: ColumnSizeType,
   md: ColumnSizeType,
   lg: ColumnSizeType,
+  xl: ColumnSizeType,
   xsOffset: PropTypes.number,
   smOffset: PropTypes.number,
   mdOffset: PropTypes.number,
   lgOffset: PropTypes.number,
+  xlOffset: PropTypes.number,
   first: ViewportSizeType,
   last: ViewportSizeType,
   className: PropTypes.string,
@@ -25,10 +27,12 @@ const classMap = {
   sm: 'col-sm',
   md: 'col-md',
   lg: 'col-lg',
+  xl: 'col-xl',
   xsOffset: 'col-xs-offset',
   smOffset: 'col-sm-offset',
   mdOffset: 'col-md-offset',
-  lgOffset: 'col-lg-offset'
+  lgOffset: 'col-lg-offset',
+  xlOffset: 'col-xl-offset'
 };
 
 function isInteger(value) {

src/types.js

@@ -1,4 +1,4 @@
 import PropTypes from 'prop-types';
 
 export const ColumnSizeType = PropTypes.oneOfType([PropTypes.number, PropTypes.bool]);
-export const ViewportSizeType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg']);
+export const ViewportSizeType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']);

test/classNames.spec.js

@@ -1,5 +1,5 @@
 import expect from 'expect';
-import style from 'flexboxgrid';
+import style from 'flexboxgrid2';
 import getClass from '../src/classNames';
 
 describe('classNames lookups', () => {

test/components/Col.spec.js

@@ -2,19 +2,20 @@ import expect from 'expect';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import Col, { getColumnProps } from '../../src/components/Col';
-import style from 'flexboxgrid';
+import style from 'flexboxgrid2';
 
 const renderer = TestUtils.createRenderer();
 
 describe('Col', () => {
   it('Should add classes equals to props', () => {
-    renderer.render(<Col xs={12} sm={8} md={6} lg={4} />);
+    renderer.render(<Col xs={12} sm={8} md={6} lg={4} xl={2} />);
     const { type, props: { className } } = renderer.getRenderOutput();
     expect(type).toBe('div');
     expect(className).toContain(style['col-xs-12']);
     expect(className).toContain(style['col-sm-8']);
     expect(className).toContain(style['col-md-6']);
     expect(className).toContain(style['col-lg-4']);
+    expect(className).toContain(style['col-xl-2']);
   });
 
   it('Computes the column properties', () => {
@@ -38,16 +39,17 @@ describe('Col', () => {
   });
 
   it('Should support auto-width', () => {
-    renderer.render(<Col xs sm md lg />);
+    renderer.render(<Col xs sm md lg xl />);
     const { className } = renderer.getRenderOutput().props;
     expect(className).toContain(style['col-xs']);
     expect(className).toContain(style['col-sm']);
     expect(className).toContain(style['col-md']);
     expect(className).toContain(style['col-lg']);
+    expect(className).toContain(style['col-xl']);
   });
 
   it('Should support custom tag name', () => {
-    renderer.render(<Col xs sm md lg tagName="li" />);
+    renderer.render(<Col xs sm md lg xl tagName="li" />);
 
     expect(renderer.getRenderOutput().type).toBe('li');
   });

test/components/Grid.spec.js

@@ -2,7 +2,7 @@ import expect from 'expect';
 import React from 'react';
 import TestUtils from 'react-addons-test-utils';
 import Grid from '../../src/components/Grid';
-import style from 'flexboxgrid';
+import style from 'flexboxgrid2';
 
 const renderer = TestUtils.createRenderer();