refactor(flex-grid): move to packages for split versioning

config/styleguide.config.js

@@ -91,9 +91,9 @@ module.exports = {
               name: 'Grid',
               components() {
                 return [
-                  path.resolve('src/components/FlexGrid/FlexGrid.jsx'),
-                  path.resolve('src/components/FlexGrid/Row/Row.jsx'),
-                  path.resolve('src/components/FlexGrid/Col/Col.jsx'),
+                  path.resolve('packages/FlexGrid/FlexGrid.jsx'),
+                  path.resolve('packages/FlexGrid/Row/Row.jsx'),
+                  path.resolve('packages/FlexGrid/Col/Col.jsx'),
                 ]
               },
             },

src/components/FlexGrid/Col/Col.jsx → packages/FlexGrid/Col/Col.jsx

@@ -4,8 +4,8 @@ import { Subscriber } from 'react-broadcast'
 
 import { Col as ReactFlexboxGridCol } from 'react-flexbox-grid'
 
-import joinClassNames from '../../../utils/joinClassNames'
-import safeRest from '../../../utils/safeRest'
+import joinClassNames from '../../../src/utils/joinClassNames'
+import safeRest from '../../../src/utils/safeRest'
 import styles from './Col.modules.scss'
 
 const removeProps = ({

src/components/FlexGrid/Col/Col.md → packages/FlexGrid/Col/Col.md

@@ -5,9 +5,15 @@ When not supplied a `span` prop, Col components automatically expand to fill the
 ```jsx
 <FlexGrid>
   <FlexGrid.Row>
-    <FlexGrid.Col span={3}><Text>3 column</Text></FlexGrid.Col>
-    <FlexGrid.Col span={3}><Text>3 columns</Text></FlexGrid.Col>
-    <FlexGrid.Col span={6}><Text>6 columns</Text></FlexGrid.Col>
+    <FlexGrid.Col span={3}>
+      <Text>3 column</Text>
+    </FlexGrid.Col>
+    <FlexGrid.Col span={3}>
+      <Text>3 columns</Text>
+    </FlexGrid.Col>
+    <FlexGrid.Col span={6}>
+      <Text>6 columns</Text>
+    </FlexGrid.Col>
   </FlexGrid.Row>
 </FlexGrid>
 ```
@@ -19,7 +25,9 @@ Supplying an `offset` prop will add a left margin to your Col.
 ```jsx
 <FlexGrid>
   <FlexGrid.Row>
-    <FlexGrid.Col offset={3}><Text>3 columns away</Text></FlexGrid.Col>
+    <FlexGrid.Col offset={3}>
+      <Text>3 columns away</Text>
+    </FlexGrid.Col>
   </FlexGrid.Row>
 </FlexGrid>
 ```

src/components/FlexGrid/FlexGrid.jsx → packages/FlexGrid/FlexGrid.jsx

@@ -6,8 +6,9 @@ import { Grid } from 'react-flexbox-grid'
 import Col from './Col/Col'
 import Row from './Row/Row'
 
-import safeRest from '../../utils/safeRest'
-import joinClassNames from '../../utils/joinClassNames'
+import safeRest from '../../src/utils/safeRest'
+import joinClassNames from '../../src/utils/joinClassNames'
+
 import styles from './FlexGrid.modules.scss'
 
 /**

src/components/FlexGrid/FlexGrid.md → packages/FlexGrid/FlexGrid.md

@@ -1,4 +1,4 @@
-The `FlexGrid` component is a wrapper over [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid). 
+The `FlexGrid` component is a wrapper over [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid).
 
 ### Basic usage
 

src/components/FlexGrid/FlexGrid.modules.scss → packages/FlexGrid/FlexGrid.modules.scss

@@ -1,6 +1,12 @@
-@import '../../scss/utility/responsive';
+@import '../../src/scss/utility/responsive';
 
-$max-widths: (xs: auto, small: 576px, medium: 768px, large: 992px, xl: 1200px);
+$max-widths: (
+  xs: auto,
+  small: 576px,
+  medium: 768px,
+  large: 992px,
+  xl: 1200px
+);
 
 .flexGrid {
   padding: 0;

src/components/FlexGrid/Row/Row.jsx → packages/FlexGrid/Row/Row.jsx

@@ -4,7 +4,7 @@ import { Subscriber } from 'react-broadcast'
 
 import { Row as ReactFlexboxGridRow } from 'react-flexbox-grid'
 
-import safeRest from '../../../utils/safeRest'
+import safeRest from '../../../src/utils/safeRest'
 
 /**
  * <span class="docs--badge__new">new</span> <span class="docs--badge__version">v0.34.0</span>

src/components/FlexGrid/__tests__/FlexGrid.spec.jsx → packages/FlexGrid/__tests__/FlexGrid.spec.jsx

@@ -4,7 +4,7 @@ import { Grid } from 'react-flexbox-grid'
 
 import FlexGrid from '../FlexGrid'
 
-import mockMatchMedia from '../../../__mocks__/matchMedia'
+import mockMatchMedia from '../../../src/__mocks__/matchMedia'
 
 describe('FlexGrid', () => {
   const doMount = (props = {}) => {

src/components/Notification/Notification.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import safeRest from '../../utils/safeRest'
 
-import FlexGrid from '../../components/FlexGrid/FlexGrid'
+import FlexGrid from '../../../packages/FlexGrid/FlexGrid'
 import DecorativeIcon from '../Icons/DecorativeIcon/DecorativeIcon'
 import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextProvider'
 import Paragraph from '../Typography/Paragraph/Paragraph'

src/index.js

@@ -11,7 +11,7 @@ export { default as DecorativeIcon } from './components/Icons/DecorativeIcon/Dec
 export { default as DimpleDivider } from '../packages/DimpleDivider/DimpleDivider'
 export { default as DisplayHeading } from './components/Typography/DisplayHeading/DisplayHeading'
 export { default as ExpandCollapse } from './components/ExpandCollapse/ExpandCollapse'
-export { default as FlexGrid } from './components/FlexGrid/FlexGrid'
+export { default as FlexGrid } from '../packages/FlexGrid/FlexGrid'
 export { default as HairlineDivider } from '../packages/HairlineDivider/HairlineDivider'
 export { default as Heading } from './components/Typography/Heading/Heading'
 export { default as Image } from './components/Image/Image'