feat(link): Un-namespace ButtonLink and ChevronLink from Link as they…

… are only related, not coupled.

config/styleguide.config.js

@@ -33,11 +33,6 @@ module.exports = {
       name = 'ExpandCollapse'
     }
 
-    // Link component has name-space sub-components
-    if (path.dirname(componentPath).includes('Link')) {
-      name = 'Link'
-    }
-
     return `import { ${name} } from '@telusdigital/tds';`
   },
 

src/components/Link/ButtonLink/ButtonLink.jsx

@@ -73,6 +73,5 @@ ButtonLink.defaultProps = {
   to: null,
   href: null
 }
-ButtonLink.displayName = 'Link.Button'
 
 export default ButtonLink

src/components/Link/ButtonLink/ButtonLink.md

@@ -5,7 +5,7 @@ A Button Link is a navigational element that styles itself as a button. Clicking
 By default, Buttons will be displayed in the `primary` variant. Use primary buttons for the main call to action on a page.
 
 ```
-<Link.Button href="http://www.telus.com">Find out how</Link.Button>
+<ButtonLink href="http://www.telus.com">Find out how</ButtonLink>
 ```
 
 ### Using Button Links
@@ -27,6 +27,6 @@ is too low, including the hover state.
 const Hero = require('../../__docs__/Hero').default;
 
 <Hero>
-  <Link.Button variant="outlined" invert>Advanced solutions</Link.Button>
+  <ButtonLink variant="outlined" invert>Advanced solutions</ButtonLink>
 </Hero>
 ```

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

@@ -3,15 +3,15 @@ import { shallow } from 'enzyme'
 
 import { warn } from '../../../../warn'
 
-import Link from '../../Link'
+import ButtonLink from '../ButtonLink'
 
 jest.mock('../../../../warn', () => (
   { warn: jest.fn() }
 ))
 
-describe('Link.Button', () => {
+describe('ButtonLink', () => {
   const doShallow = (overrides = {}) => shallow(
-    <Link.Button {...overrides}>Go home</Link.Button>
+    <ButtonLink {...overrides}>Go home</ButtonLink>
   )
 
   afterEach(() => {

src/components/Link/ChevronLink/ChevronLink.jsx

@@ -88,6 +88,5 @@ ChevronLink.defaultProps = {
   to: null,
   href: null
 }
-ChevronLink.displayName = 'Link.Chevron'
 
 export default ChevronLink

src/components/Link/ChevronLink/ChevronLink.md

@@ -5,7 +5,7 @@ A Chevron Link is a navigational element that should only be used as a standalon
 By default, Chevron Links will be displayed in the `primary` variant.
 
 ```
-<Link.Chevron href="http://tds.telus.com">Go to Telus.com</Link.Chevron>
+<ChevronLink href="http://tds.telus.com">Go to Telus.com</ChevronLink>
 ```
 
 ### Usage criteria
@@ -19,7 +19,7 @@ By default, Chevron Links will be displayed in the `primary` variant.
 Specify the variant to create a button for secondary actions.
 
 ```
-<Link.Chevron href="http://tds.telus.com" variant="secondary">Get great deals</Link.Chevron>
+<ChevronLink href="http://tds.telus.com" variant="secondary">Get great deals</ChevronLink>
 ```
 
 ### Placing Chevron Links on solid colours
@@ -30,7 +30,7 @@ Use the inverted Chevron Link on top of the solid TELUS purple.
 const PurpleBlock = require('../../__docs__/PurpleBlock').default;
 
 <PurpleBlock>
-  <Link.Chevron href="http://tds.telus.com" variant="inverted">Find out how</Link.Chevron>
+  <ChevronLink href="http://tds.telus.com" variant="inverted">Find out how</ChevronLink>
 </PurpleBlock>
 ```
 
@@ -39,5 +39,5 @@ const PurpleBlock = require('../../__docs__/PurpleBlock').default;
 Chevron Link can be used as a "back" button by specifying the `direction`. These are not suitable for breadcrumb navigation due to the chevron's hover animation.
 
 ```
-<Link.Chevron href="http://tds.telus.com" direction="left">Plans</Link.Chevron>
+<ChevronLink href="http://tds.telus.com" direction="left">Plans</ChevronLink>
 ```

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

@@ -2,16 +2,16 @@ import React from 'react'
 import { shallow } from 'enzyme'
 import { warn } from '../../../../warn'
 
-import Link from '../../Link'
+import ChevronLink from '../ChevronLink'
 import Icon from '../../../../old-components/Icon/Icon'
 
 jest.mock('../../../../warn', () => (
   { warn: jest.fn() }
 ))
 
-describe('Link.Chevron', () => {
+describe('ChevronLink', () => {
   const doShallow = (overrides = {}) => shallow(
-    <Link.Chevron {...overrides}>Go home</Link.Chevron>
+    <ChevronLink {...overrides}>Go home</ChevronLink>
   )
 
   afterEach(() => {

src/components/Link/Link.jsx

@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import ChevronLink from './ChevronLink/ChevronLink'
-import ButtonLink from './ButtonLink/ButtonLink'
 import safeRest from '../../safeRest'
 import { warn } from '../../warn'
 
@@ -68,7 +66,4 @@ Link.contextTypes = {
   inheritColor: PropTypes.bool
 }
 
-Link.Chevron = ChevronLink
-Link.Button = ButtonLink
-
 export default Link