refactor(button): move button to packages for split versioning

also create the shared folder, put BaseButton there

config/jest.config.js

@@ -2,7 +2,12 @@ const path = require('path')
 
 module.exports = {
   rootDir: path.resolve('src'),
-  roots: ['<rootDir>', path.resolve('docs/components'), path.resolve('packages')],
+  roots: [
+    '<rootDir>',
+    path.resolve('docs/components'),
+    path.resolve('packages'),
+    path.resolve('shared'),
+  ],
   moduleNameMapper: {
     '\\.modules.scss$': 'identity-obj-proxy',
     '^.+\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',

config/styleguide.config.js

@@ -194,7 +194,7 @@ module.exports = {
           name: 'Forms',
           components() {
             return compact([
-              path.resolve('src/components/Button/Button.jsx'),
+              path.resolve('packages/Button/Button.jsx'),
               path.resolve('src/components/Input/Input.jsx'),
               path.resolve('src/components/Checkbox/Checkbox.jsx'),
               path.resolve('src/components/Radio/Radio.jsx'),

package.json

@@ -20,9 +20,9 @@
     "gitbook": "gitbook serve guide",
     "gitbook:install": "gitbook install guide",
     "lint:js":
-      "eslint packages src config docs scripts --ext '.js,.jsx' --config config/.eslintrc.json --max-warnings 0 --fix",
+      "eslint packages shared src config docs scripts --ext '.js,.jsx' --config config/.eslintrc.json --max-warnings 0 --fix",
     "lint:scss":
-      "stylelint '{src/components,packages}/**/*.scss' --config config/.stylelintrc.json",
+      "stylelint '{src/components,packages,shared}/**/*.scss' --config config/.stylelintrc.json",
     "lint:ec": "echint",
     "lint": "yarn lint:js && yarn lint:scss && yarn lint:ec",
     "packup": "yarn build-package && yarn pack",

src/components/Button/Button.jsx → packages/Button/Button.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { warn } from '../../utils/warn'
-import safeRest from '../../utils/safeRest'
+import { warn } from '../../src/utils/warn'
+import safeRest from '../../src/utils/safeRest'
 
-import BaseButton from './BaseButton/BaseButton'
+import BaseButton from '../../shared/BaseButton/BaseButton'
 
 const preventDisabling = ({ disabled, ...props }) => {
   if (disabled) {

src/components/Button/Button.md → packages/Button/Button.md

@@ -26,15 +26,14 @@ Specify the `variant` to create a button for secondary actions.
 
 ### Sizes
 
-All buttons are inline, with a minimum width of 180px for screens larger than 768px. They will occupy 100% width of their 
+All buttons are inline, with a minimum width of 180px for screens larger than 768px. They will occupy 100% width of their
 parent's width at the small viewport and below. Resize your browser window to see this behaviour.
 
-
 ### Placing buttons on dark backgrounds
 
 Use the `inverted` button on top of a dark background (TELUS approved colours or images).
 
-Use this variant with caution. There will be accessibility issues if the colour contrast of the image and the button 
+Use this variant with caution. There will be accessibility issues if the colour contrast of the image and the button
 text is too low in the hover state.
 
 ```jsx { "props": { "className": "docs_purple-block" } }

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

@@ -1,13 +1,13 @@
 import React from 'react'
 import { render, mount } from 'enzyme'
 
-import { warn } from '../../../utils/warn'
+import { warn } from '../../../src/utils/warn'
 
 import Button from '../Button'
 
-import mockMatchMedia from '../../../__mocks__/matchMedia'
+import mockMatchMedia from '../../../src/__mocks__/matchMedia'
 
-jest.mock('../../../utils/warn')
+jest.mock('../../../src/utils/warn')
 
 describe('Button', () => {
   const doMount = (overrides = {}) => {

src/components/Button/BaseButton/BaseButton.jsx → shared/BaseButton/BaseButton.jsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import safeRest from '../../../utils/safeRest'
-import joinClassNames from '../../../utils/joinClassNames'
+import safeRest from '../../src/utils/safeRest'
+import joinClassNames from '../../src/utils/joinClassNames'
 
-import FlexBox from '../../Flexbox/Flexbox'
-import Responsive from '../../Responsive/Responsive'
+import FlexBox from '../../src/components/Flexbox/Flexbox'
+import Responsive from '../../src/components/Responsive/Responsive'
 
 import styles from './BaseButton.modules.scss'
 

src/components/Button/BaseButton/BaseButton.modules.scss → shared/BaseButton/BaseButton.modules.scss

@@ -1,5 +1,5 @@
-@import '../../../scss/settings/colours';
-@import '../../../scss/utility/responsive';
+@import '../../src/scss/settings/colours';
+@import '../../src/scss/utility/responsive';
 
 $primary-bg-color: $color-primary;
 $secondary-bg-color: $color-secondary;
@@ -12,9 +12,9 @@ $button-text-color: $color-white;
 }
 
 .base {
-  composes: none rounded from '../../Borders.modules.scss';
-  composes: medium boldFont from '../../Typography/Text/Text.modules.scss';
-  composes: height font from '../../Forms.modules.scss';
+  composes: none rounded from '../../src/components/Borders.modules.scss';
+  composes: medium boldFont from '../../src/components/Typography/Text/Text.modules.scss';
+  composes: height font from '../../src/components/Forms.modules.scss';
 
   margin: 0;
   padding: 0 2rem;
@@ -83,7 +83,7 @@ $button-text-color: $color-white;
 }
 
 .centered {
-  composes: rounded from '../../Borders.modules.scss';
+  composes: rounded from '../../src/components/Borders.modules.scss';
 
   width: 100%;
   height: 100%;

src/components/Link/ButtonLink/ButtonLink.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { warn } from '../../../utils/warn'
 import safeRest from '../../../utils/safeRest'
 
-import BaseButton from '../../Button/BaseButton/BaseButton'
+import BaseButton from '../../../../shared/BaseButton/BaseButton'
 
 import styles from './ButtonLink.modules.scss'
 

src/index.js

@@ -2,7 +2,7 @@ import './scss/global.scss'
 
 export { default as Accordion } from './components/ExpandCollapse/Accordion/Accordion'
 export { default as Box } from '../packages/Box/Box'
-export { default as Button } from './components/Button/Button'
+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 Checkbox } from './components/Checkbox/Checkbox'