refactor(box): move to packages for split versioning

config/styleguide.config.js

@@ -82,7 +82,7 @@ module.exports = {
           name: 'Layout',
           components() {
             return [
-              path.resolve('src/components/Box/Box.jsx'),
+              path.resolve('packages/Box/Box.jsx'),
               path.resolve('src/components/Responsive/Responsive.jsx'),
             ]
           },

docs/components/Logo/Logo.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { version } from '../../../package.json'
 import logo from './Logo.svg'
 
-import Box from '../../../src/components/Box/Box'
+import Box from '../../../packages/Box/Box'
 import Text from '../../../src/components/Typography/Text/Text'
 import ChevronLink from '../../../src/components/Link/ChevronLink/ChevronLink'
 

docs/components/MarkdownHeading/MarkdownHeading.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Box from '../../../src/components/Box/Box'
+import Box from '../../../packages/Box/Box'
 import Heading from '../../../src/components/Typography/Heading/Heading'
 
-const MarkdownHeading = ({level, children}) => (
+const MarkdownHeading = ({ level, children }) => (
   <Box below={3}>
     <Heading level={level}>{children}</Heading>
   </Box>

docs/components/MarkdownOrderedList/MarkdownOrderedList.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Box from '../../../src/components/Box/Box'
+import Box from '../../../packages/Box/Box'
 import OrderedList from '../../../src/components/Lists/OrderedList/OrderedList'
 import Text from '../../../src/components/Typography/Text/Text'
 
-const MarkdownOrderedList = ({children}) => (
+const MarkdownOrderedList = ({ children }) => (
   <Box below={3}>
     <Text block size="medium">
       <OrderedList>

docs/components/MarkdownParagraph/MarkdownParagraph.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Box from '../../../src/components/Box/Box'
+import Box from '../../../packages/Box/Box'
 import Paragraph from '../../../src/components/Typography/Paragraph/Paragraph'
 
-const MarkdownParagraph = ({small, children}) => (
+const MarkdownParagraph = ({ small, children }) => (
   <Box below={3}>
     <Paragraph size={small ? 'small' : 'medium'}>{children}</Paragraph>
   </Box>

docs/components/MarkdownUnorderedList/MarkdownUnorderedList.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Box from '../../../src/components/Box/Box'
+import Box from '../../../packages/Box/Box'
 import UnorderedList from '../../../src/components/Lists/UnorderedList/UnorderedList'
 import Text from '../../../src/components/Typography/Text/Text'
 

docs/components/SectionHeading/SectionHeadingRenderer.jsx

@@ -3,11 +3,11 @@ import PropTypes from 'prop-types'
 
 import Heading from '../../../src/components/Typography/Heading/Heading'
 import Flexbox from '../../../src/components/Flexbox/Flexbox'
-import Box from '../../../src/components/Box/Box'
+import Box from '../../../packages/Box/Box'
 
 import styles from './SectionHeadingRenderer.modules.scss'
 
-const SectionHeadingRenderer = ({id, depth, toolbar, children}) => {
+const SectionHeadingRenderer = ({ id, depth, toolbar, children }) => {
   const level = Math.min(depth, 4)
 
   return (

docs/components/TableOfContents/TableOfContentsRenderer.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Box from '../../../src/components/Box/Box'
+import Box from '../../../packages/Box/Box'
 import Input from '../../../src/components/Input/Input'
 
 const TableOfContentsRenderer = ({ children, searchTerm, onSearchTermChange }) => {

src/components/Box/Box.jsx → packages/Box/Box.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Responsive from '../Responsive/Responsive'
+import Responsive from '../../src/components/Responsive/Responsive'
 
-import safeRest from '../../utils/safeRest'
-import joinClassNames from '../../utils/joinClassNames'
-import capitalize from '../../utils/capitalize'
+import safeRest from '../../src/utils/safeRest'
+import joinClassNames from '../../src/utils/joinClassNames'
+import capitalize from '../../src/utils/capitalize'
 
 import styles from './Box.modules.scss'
 

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

@@ -3,7 +3,7 @@ import { mount } from 'enzyme'
 
 import Box from '../Box'
 
-import mockMatchMedia from '../../../__mocks__/matchMedia'
+import mockMatchMedia from '../../../src/__mocks__/matchMedia'
 
 describe('Box', () => {
   const defaultProps = { between: 3 }

src/components/Card/Card.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Box from '../Box/Box'
+import Box from '../../../packages/Box/Box'
 import safeRest from '../../utils/safeRest'
 
 import styles from './Card.modules.scss'

src/components/Choice/Choice.jsx

@@ -7,7 +7,7 @@ import generateId from '../../utils/generateId'
 
 import Text from '../Typography/Text/Text'
 import Paragraph from '../Typography/Paragraph/Paragraph'
-import Box from '../Box/Box'
+import Box from '../../../packages/Box/Box'
 import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextProvider'
 import Flexbox from '../Flexbox/Flexbox'
 import InputFeedback from '../InputFeedback/InputFeedback'

src/components/ExpandCollapse/PanelWrapper/PanelWrapper.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { childrenOfType } from 'airbnb-prop-types'
 
-import Box from '../../Box/Box'
+import Box from '../../../../packages/Box/Box'
 import Clickable from '../../Clickable/Clickable'
 import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
 import Text from '../../Typography/Text/Text'

src/components/FormField/FormField.jsx

@@ -5,7 +5,7 @@ import { childrenOfType } from 'airbnb-prop-types'
 import safeRest from '../../utils/safeRest'
 import generateId from '../../utils/generateId'
 
-import Box from '../Box/Box'
+import Box from '../../../packages/Box/Box'
 import Flexbox from '../Flexbox/Flexbox'
 import Text from '../Typography/Text/Text'
 import Paragraph from '../Typography/Paragraph/Paragraph'

src/components/FormField/FormField.modules.scss

@@ -16,7 +16,7 @@
 
   margin: 0;
   // This vertical padding fixes an IE11 bug that was causing the input value to jump slightly and get cut off.
-  composes: verticalPadding-2 horizontalPadding-3 from '../Box/Box.modules.scss';
+  composes: verticalPadding-2 horizontalPadding-3 from '../../../packages/Box/Box.modules.scss';
 
   composes: thin rounded from '../Borders.modules.scss';
 

src/components/InputFeedback/InputFeedback.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Box from '../Box/Box'
+import Box from '../../../packages/Box/Box'
 
 import safeRest from '../../utils/safeRest'
 

src/components/Link/ChevronLink/ChevronLink.jsx

@@ -5,7 +5,7 @@ import DecorativeIcon from '../../../components/Icons/DecorativeIcon/DecorativeI
 import safeRest from '../../../utils/safeRest'
 import { warn } from '../../../utils/warn'
 
-import Box from '../../Box/Box'
+import Box from '../../../../packages/Box/Box'
 
 import styles from './ChevronLink.modules.scss'
 

src/components/Lists/OrderedList/OrderedList.jsx

@@ -5,7 +5,7 @@ import { childrenOfType } from 'airbnb-prop-types'
 import safeRest from '../../../utils/safeRest'
 
 import OrderedItem from './OrderedItem'
-import Box from '../../Box/Box'
+import Box from '../../../../packages/Box/Box'
 
 import styles from './OrderedList.modules.scss'
 

src/components/Lists/UnorderedList/UnorderedList.jsx

@@ -5,7 +5,7 @@ import { childrenOfType } from 'airbnb-prop-types'
 import safeRest from '../../../utils/safeRest'
 
 import UnorderedItem from './UnorderedItem/UnorderedItem'
-import Box from '../../Box/Box'
+import Box from '../../../../packages/Box/Box'
 
 import styles from '../List.modules.scss'
 

src/components/Notification/Notification.jsx

@@ -7,7 +7,7 @@ import FlexGrid from '../../components/FlexGrid/FlexGrid'
 import DecorativeIcon from '../Icons/DecorativeIcon/DecorativeIcon'
 import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextProvider'
 import Paragraph from '../Typography/Paragraph/Paragraph'
-import Box from '../Box/Box'
+import Box from '../../../packages/Box/Box'
 
 import messagingStyles from '../Messaging.modules.scss'
 import styles from './Notification.modules.scss'

src/components/Select/Select.jsx

@@ -8,7 +8,7 @@ import DecorativeIcon from '../Icons/DecorativeIcon/DecorativeIcon'
 import Tooltip from '../Tooltip/Tooltip'
 import FormField from '../FormField/FormField'
 import FeedbackIcon from '../FormField/FeedbackIcon'
-import Box from '../Box/Box'
+import Box from '../../../packages/Box/Box'
 
 import addRightPadding from '../FormField/addRightPadding'
 

src/components/Tooltip/Bubble.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import joinClassNames from '../../utils/joinClassNames'
 
 import Text from '../Typography/Text/Text'
-import Box from '../Box/Box'
+import Box from '../../../packages/Box/Box'
 
 import styles from './Tooltip.modules.scss'
 import displayStyles from '../Display.modules.scss'

src/index.js

@@ -1,7 +1,7 @@
 import './scss/global.scss'
 
 export { default as Accordion } from './components/ExpandCollapse/Accordion/Accordion'
-export { default as Box } from './components/Box/Box'
+export { default as Box } from '../packages/Box/Box'
 export { default as Button } from './components/Button/Button'
 export { default as ButtonLink } from './components/Link/ButtonLink/ButtonLink'
 export { default as Card } from './components/Card/Card'