refactor(card): move to packages for split versioning

config/styleguide.config.js

@@ -103,7 +103,7 @@ module.exports = {
           name: 'Content',
           components() {
             return compact([
-              path.resolve('src/components/Card/Card.jsx'),
+              path.resolve('packages/Card/Card.jsx'),
               path.resolve('src/components/Image/Image.jsx'),
             ])
           },

src/components/Card/Card.jsx → packages/Card/Card.jsx

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

src/components/Card/Card.md → packages/Card/Card.md

@@ -6,7 +6,8 @@ Cards will stretch to fill their container. Wrap the card in another element to
     <Box between={3}>
       <Heading level="h2">Need a hand?</Heading>
       <Paragraph>
-        Ready to order? Have a question? We'll get back to you, with volume discounts available to larger accounts.
+        Ready to order? Have a question? We'll get back to you, with volume discounts available to
+        larger accounts.
       </Paragraph>
     </Box>
 
@@ -24,18 +25,24 @@ Card also supports a 'grey' or 'lavender' `variant`. These appear flat, while th
   <Card variant="lavender">
     <Box between={3} dangerouslyAddClassName="docs_align-flex-start">
       <Heading level="h4">Holiday deal</Heading>
-      
-      <Paragraph size="medium">Get a new smartphone for $0<br/>on a 2-year plan.</Paragraph>
+
+      <Paragraph size="medium">
+        Get a new smartphone for $0<br />on a 2-year plan.
+      </Paragraph>
     </Box>
   </Card>
-  
+
   <Card variant="grey">
     <Box between={3} dangerouslyAddClassName="docs_align-flex-start">
       <Heading level="h4">Find the right gift</Heading>
-    
-      <Paragraph>Find something they'll love from our<br/>selection of great devices.</Paragraph>
-
-      <ChevronLink variant="primary" href="#">Explore latest devices</ChevronLink>
+
+      <Paragraph>
+        Find something they'll love from our<br />selection of great devices.
+      </Paragraph>
+
+      <ChevronLink variant="primary" href="#">
+        Explore latest devices
+      </ChevronLink>
     </Box>
   </Card>
 </Box>

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

@@ -1,7 +1,7 @@
-@import '../../scss/settings/colours.scss';
+@import '../../src/scss/settings/colours';
 
 .card {
-  composes: none rounded from '../Borders.modules.scss';
+  composes: none rounded from '../../src/components/Borders.modules.scss';
 }
 
 .white {

src/index.js

@@ -4,7 +4,7 @@ export { default as Accordion } from './components/ExpandCollapse/Accordion/Acco
 export { default as Box } from '../packages/Box/Box'
 export { default as Button } from '../packages/Button/Button'
 export { default as ButtonLink } from './components/Link/ButtonLink/ButtonLink'
-export { default as Card } from './components/Card/Card'
+export { default as Card } from '../packages/Card/Card'
 export { default as Checkbox } from './components/Checkbox/Checkbox'
 export { default as ChevronLink } from './components/Link/ChevronLink/ChevronLink'
 export { default as DecorativeIcon } from './components/Icons/DecorativeIcon/DecorativeIcon'