refactor(icons): move to packages for split versions

config/styleguide.config.js

@@ -172,11 +172,11 @@ module.exports = {
         },
         {
           name: 'Icons',
-          content: path.resolve('src/components/Icons/icons.md'),
+          content: path.resolve('docs/icons.md'),
           components() {
             return [
-              path.resolve('src/components/Icons/DecorativeIcon/DecorativeIcon.jsx'),
-              path.resolve('src/components/Icons/StandaloneIcon/StandaloneIcon.jsx'),
+              path.resolve('packages/DecorativeIcon/DecorativeIcon.jsx'),
+              path.resolve('packages/StandaloneIcon/StandaloneIcon.jsx'),
             ]
           },
         },

packages/Checkbox/Checkbox.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import DecorativeIcon from '../../src/components/Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../DecorativeIcon/DecorativeIcon'
 import Choice from '../../shared/components/Choice/Choice'
 
 import styles from './Checkbox.modules.scss'

packages/Checkbox/__tests__/Checkbox.spec.jsx

@@ -3,7 +3,7 @@ import { mount, render } from 'enzyme'
 
 import Text from '../../../src/components/Typography/Text/Text'
 import Paragraph from '../../../src/components/Typography/Paragraph/Paragraph'
-import DecorativeIcon from '../../../src/components/Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../DecorativeIcon/DecorativeIcon'
 import Checkbox from '../Checkbox'
 import InputFeedback from '../../../src/components/InputFeedback/InputFeedback'
 import ColoredTextProvider from '../../../src/components/Typography/ColoredTextProvider/ColoredTextProvider'

src/components/Icons/DecorativeIcon/DecorativeIcon.jsx → packages/DecorativeIcon/DecorativeIcon.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Icon from '../Icon/Icon'
+import Icon from '../../shared/components/Icon/Icon'
 
 /**
  * An icon used for visual aesthetics only.

src/components/Icons/DecorativeIcon/__tests__/DecorativeIcon.spec.jsx → packages/DecorativeIcon/__tests__/DecorativeIcon.spec.jsx

@@ -1,12 +1,11 @@
 import React from 'react'
 import { shallow, render } from 'enzyme'
 
-
 import DecorativeIcon from '../DecorativeIcon'
 
 describe('DecorativeIcon', () => {
   const defaultProps = {
-    symbol: 'spyglass'
+    symbol: 'spyglass',
   }
   const doShallow = (props = {}) => shallow(<DecorativeIcon {...defaultProps} {...props} />)
 

packages/ExpandCollapse/PanelWrapper/PanelWrapper.jsx

@@ -4,7 +4,7 @@ import { childrenOfType } from 'airbnb-prop-types'
 
 import Box from '../../Box/Box'
 import Clickable from '../../../shared/components/Clickable/Clickable'
-import DecorativeIcon from '../../../src/components/Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../DecorativeIcon/DecorativeIcon'
 import Text from '../../../src/components/Typography/Text/Text'
 import HairlineDivider from '../../HairlineDivider/HairlineDivider'
 import DimpleDivider from '../../DimpleDivider/DimpleDivider'

packages/ExpandCollapse/__tests__/ExpandCollapse.spec.jsx

@@ -4,7 +4,7 @@ import { shallow, mount } from 'enzyme'
 import Reveal from '../../../shared/components/Animation/Reveal'
 import Translate from '../../../shared/components/Animation/Translate'
 import Text from '../../../src/components/Typography/Text/Text'
-import DecorativeIcon from '../../../src/components/Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../DecorativeIcon/DecorativeIcon'
 import HairlineDivider from '../../HairlineDivider/HairlineDivider'
 import ExpandCollapse from '../ExpandCollapse'
 

src/components/Icons/StandaloneIcon/StandaloneIcon.jsx → packages/StandaloneIcon/StandaloneIcon.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import safeRest from '../../../utils/safeRest'
+import safeRest from '../../src/utils/safeRest'
 
-import Icon from '../Icon/Icon'
-import Clickable from '../../../../shared/components/Clickable/Clickable'
+import Icon from '../../shared/components/Icon/Icon'
+import Clickable from '../../shared/components/Clickable/Clickable'
 
 const mobileDeviceTapArea = 32 // https://www.w3.org/TR/mobile-accessibility-mapping/#touch-target-size-and-spacing
 const touchAreaStyles = iconSize => {

src/components/Icons/StandaloneIcon/StandaloneIcon.md → packages/StandaloneIcon/StandaloneIcon.md

@@ -2,14 +2,14 @@
 
 Use the `onClick` prop to create an accessible interactive icon.
 
-Interactive icons will have a minimum click/tap area of about 32px, or 8-10mm, to ensure that they can be touched easily on 
-mobile devices. Take care not to place other elements too close to interactive icons, as the touch area could overlap. 
+Interactive icons will have a minimum click/tap area of about 32px, or 8-10mm, to ensure that they can be touched easily on
+mobile devices. Take care not to place other elements too close to interactive icons, as the touch area could overlap.
 
 ```
-<StandaloneIcon 
-  symbol="spyglass" 
+<StandaloneIcon
+  symbol="spyglass"
   size={24}
-  a11yText="Search this site." 
+  a11yText="Search this site."
   onClick={() => console.log("searching...")}
 />
 ```

shared/components/FormField/FeedbackIcon.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import Fade from '../Animation/Fade'
-import StandaloneIcon from '../../../src/components/Icons/StandaloneIcon/StandaloneIcon'
+import StandaloneIcon from '../../../packages/StandaloneIcon/StandaloneIcon'
 
-import iconWrapperStyles from '../../../src/components/Icons/IconWrapper.modules.scss'
+import iconWrapperStyles from '../../../src/components/IconWrapper.modules.scss'
 
 const FeedbackIcon = ({ showIcon, feedback }) => (
   <Fade timeout={100} in={showIcon} mountOnEnter={true} unmountOnExit={true}>

src/components/Icons/Icon/Icon.jsx → shared/components/Icon/Icon.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-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 './Icon.modules.scss'
 
@@ -14,9 +14,7 @@ const Icon = ({ symbol, variant, size, ...rest }) => {
     size && styles[`size${size}`]
   )
 
-  return (
-    <i {...safeRest(rest)} className={classes} />
-  )
+  return <i {...safeRest(rest)} className={classes} />
 }
 
 Icon.propTypes = {
@@ -34,20 +32,15 @@ Icon.propTypes = {
     'plus',
     'questionMarkCircle',
     'spyglass',
-    'times'
+    'times',
   ]).isRequired,
-  variant: PropTypes.oneOf([
-    'primary',
-    'secondary',
-    'inverted',
-    'error'
-  ]),
-  size: PropTypes.oneOf([16, 24, 48])
+  variant: PropTypes.oneOf(['primary', 'secondary', 'inverted', 'error']),
+  size: PropTypes.oneOf([16, 24, 48]),
 }
 
 Icon.defaultProps = {
   variant: undefined,
-  size: 24
+  size: 24,
 }
 
 export default Icon

src/components/Icons/Icon/Icon.modules.scss → shared/components/Icon/Icon.modules.scss

@@ -1,17 +1,4 @@
-@import '../../../scss/settings/colours';
-
-@mixin core-icon($name: null) {
-  font-family: 'TELUS Core Icons';
-  display: inline-block;
-  font-weight: normal;
-  font-style: normal;
-  speak: none;
-  text-decoration: inherit;
-  text-transform: none;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@import '../../../src/scss/settings/colours';
 
 .primary {
   color: $color-icon-primary;
@@ -42,7 +29,17 @@
 }
 
 .icon {
-  @include core-icon;
+  font-family: 'TELUS Core Icons';
+
+  display: inline-block;
+  font-weight: normal;
+  font-style: normal;
+  speak: none;
+  text-decoration: inherit;
+  text-transform: none;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 
   line-height: 1;
   vertical-align: middle;

src/components/Icons/Icon/__tests__/Icon.spec.jsx → shared/components/Icon/__tests__/Icon.spec.jsx

@@ -1,12 +1,11 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
-
 import Icon from '../Icon'
 
 describe('Icon', () => {
   const defaultProps = {
-    symbol: 'spyglass'
+    symbol: 'spyglass',
   }
   const doShallow = (props = {}) => shallow(<Icon {...defaultProps} {...props} />)
 

src/components/Input/__tests__/Input.spec.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { render, mount } from 'enzyme'
 
-import StandaloneIcon from '../../Icons/StandaloneIcon/StandaloneIcon'
+import StandaloneIcon from '../../../../packages/StandaloneIcon/StandaloneIcon'
 import Text from '../../Typography/Text/Text'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 import Fade from '../../../../shared/components/Animation/Fade'
 import Input from '../Input'
 import InputFeedback from '../../InputFeedback/InputFeedback'
-import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../../../packages/DecorativeIcon/DecorativeIcon'
 
 describe('Input', () => {
   const defaultProps = {

src/components/Link/ChevronLink/ChevronLink.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import DecorativeIcon from '../../../components/Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../../../packages/DecorativeIcon/DecorativeIcon'
 import safeRest from '../../../utils/safeRest'
 import { warn } from '../../../utils/warn'
 

src/components/Link/ChevronLink/__tests__/ChevronLink.spec.jsx

@@ -4,7 +4,7 @@ import { shallow, render } from 'enzyme'
 import { warn } from '../../../../utils/warn'
 
 import ChevronLink from '../ChevronLink'
-import DecorativeIcon from '../../../Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../../../../packages/DecorativeIcon/DecorativeIcon'
 
 jest.mock('../../../../utils/warn')
 

src/components/Notification/Notification.jsx

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

src/components/Notification/__tests__/Notification.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallow, render } from 'enzyme'
 
-import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../../../packages/DecorativeIcon/DecorativeIcon'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 
 import Notification from '../Notification'

src/components/Radio/__tests__/Radio.spec.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { mount, render } from 'enzyme'
 
 import Text from '../../Typography/Text/Text'
-import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../../../packages/DecorativeIcon/DecorativeIcon'
 import Radio from '../Radio'
 import InputFeedback from '../../InputFeedback/InputFeedback'
 import ColoredTextProvider from '../../Typography/ColoredTextProvider/ColoredTextProvider'

src/components/Select/Select.jsx

@@ -4,7 +4,7 @@ import { childrenOfType } from 'airbnb-prop-types'
 
 import joinClassNames from '../../utils/joinClassNames'
 
-import DecorativeIcon from '../Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../../packages/DecorativeIcon/DecorativeIcon'
 import Tooltip from '../Tooltip/Tooltip'
 import FormField from '../../../shared/components/FormField/FormField'
 import FeedbackIcon from '../../../shared/components/FormField/FeedbackIcon'
@@ -13,7 +13,7 @@ import Box from '../../../packages/Box/Box'
 import addRightPadding from '../../../shared/components/FormField/addRightPadding'
 
 import styles from './Select.modules.scss'
-import iconWrapperStyles from '../Icons/IconWrapper.modules.scss'
+import iconWrapperStyles from '../IconWrapper.modules.scss'
 
 /**
  * <span class="docs--badge__new">new</span> <span class="docs--badge__version">v0.33.0</span>

src/components/Select/__tests__/Select.spec.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { render, mount } from 'enzyme'
 
-import StandaloneIcon from '../../Icons/StandaloneIcon/StandaloneIcon'
+import StandaloneIcon from '../../../../packages/StandaloneIcon/StandaloneIcon'
 import Text from '../../Typography/Text/Text'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 import Fade from '../../../../shared/components/Animation/Fade'
 import Select from '../Select'
 import InputFeedback from '../../InputFeedback/InputFeedback'
-import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
+import DecorativeIcon from '../../../../packages/DecorativeIcon/DecorativeIcon'
 
 describe('Select', () => {
   const defaultProps = {

src/components/TextArea/__tests__/TextArea.spec.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { render, mount } from 'enzyme'
 
-import StandaloneIcon from '../../Icons/StandaloneIcon/StandaloneIcon'
-import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
+import StandaloneIcon from '../../../../packages/StandaloneIcon/StandaloneIcon'
+import DecorativeIcon from '../../../../packages/DecorativeIcon/DecorativeIcon'
 import Text from '../../Typography/Text/Text'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 import Fade from '../../../../shared/components/Animation/Fade'

src/components/Tooltip/Tooltip.jsx

@@ -5,12 +5,12 @@ import safeRest from '../../utils/safeRest'
 import generateId from '../../utils/generateId'
 import closest from './element-closest'
 
-import StandaloneIcon from '../Icons/StandaloneIcon/StandaloneIcon'
+import StandaloneIcon from '../../../packages/StandaloneIcon/StandaloneIcon'
 import Responsive from '../Responsive/Responsive'
 
 import Bubble from './Bubble'
 
-import iconWrapperStyles from '../Icons/IconWrapper.modules.scss'
+import iconWrapperStyles from '../IconWrapper.modules.scss'
 
 const getTriggerA11yText = connectedFieldLabel => {
   if (!connectedFieldLabel) {

src/components/Tooltip/__tests__/Tooltip.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallow, render, mount } from 'enzyme'
 
-import StandaloneIcon from '../../Icons/StandaloneIcon/StandaloneIcon'
+import StandaloneIcon from '../../../../packages/StandaloneIcon/StandaloneIcon'
 import Text from '../../Typography/Text/Text'
 
 import Input from '../../Input/Input'

src/index.js

@@ -7,7 +7,7 @@ export { default as ButtonLink } from './components/Link/ButtonLink/ButtonLink'
 export { default as Card } from '../packages/Card/Card'
 export { default as Checkbox } from '../packages/Checkbox/Checkbox'
 export { default as ChevronLink } from './components/Link/ChevronLink/ChevronLink'
-export { default as DecorativeIcon } from './components/Icons/DecorativeIcon/DecorativeIcon'
+export { default as DecorativeIcon } from '../packages/DecorativeIcon/DecorativeIcon'
 export { default as DimpleDivider } from '../packages/DimpleDivider/DimpleDivider'
 export { default as DisplayHeading } from './components/Typography/DisplayHeading/DisplayHeading'
 export { default as ExpandCollapse } from '../packages/ExpandCollapse/ExpandCollapse'
@@ -27,7 +27,7 @@ export { default as Select } from './components/Select/Select'
 export { default as SelectorCounter } from '../packages/SelectorCounter/SelectorCounter'
 export { default as Small } from './components/Typography/Small/Small'
 export { default as Spinner } from '../packages/Spinner/Spinner'
-export { default as StandaloneIcon } from './components/Icons/StandaloneIcon/StandaloneIcon'
+export { default as StandaloneIcon } from '../packages/StandaloneIcon/StandaloneIcon'
 export { default as Steps } from '../packages/StepTracker/Steps/Steps'
 export { default as Strong } from './components/Typography/Strong/Strong'
 export { default as Text } from './components/Typography/Text/Text'