Rename UnderlineNavLink

pages/components/docs/UnderlineNav.md

@@ -11,20 +11,20 @@ This ensures that the NavLink gets ```activeClassName='selected'```
 
 ```.jsx
 <ExampleHeading>
-  Using <Text fontFamily="mono">{'<UnderlineNavLink>'}</Text>
+  Using <Text fontFamily="mono">{'<UnderlineNav.Link>'}</Text>
 </ExampleHeading>
 <UnderlineNav>
-  <UnderlineNavLink href="#foo" selected>
+  <UnderlineNav.Link href="#foo" selected>
     Selected
-  </UnderlineNavLink>
-  <UnderlineNavLink href="#bar">Bar</UnderlineNavLink>
-  <UnderlineNavLink href="#baz">Baz</UnderlineNavLink>
+  </UnderlineNav.Link>
+  <UnderlineNav.Link href="#bar">Bar</UnderlineNav.Link>
+  <UnderlineNav.Link href="#baz">Baz</UnderlineNav.Link>
 </UnderlineNav>
 ```
 
 ## System props
 
-UnderlineNav and UnderlineNavLink components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
+UnderlineNav and UnderlineNav.Link components get `COMMON` system props. Read our [System Props](/components/docs/system-props) doc page for a full list of available props.
 
 
 ## Component props
@@ -37,7 +37,7 @@ UnderlineNav and UnderlineNavLink components get `COMMON` system props. Read our
 | full | Boolean | Used to make navigation fill the width of the container. |
 | label | String | Used to set the `aria-label` on the top level `<nav>` element. |
 
-### UnderlineNavLink
+### UnderlineNav.Link
 | Prop name | Type | Description |
 | :- | :- | :- |
 | is | String | sets the HTML tag for the component|

src/UnderlineNav.js

@@ -10,8 +10,8 @@ injectGlobal(sass`
   @import "primer-navigation/lib/underline-nav.scss";
 `)
 
-export const ITEM_CLASS = 'UnderlineNav-item no-underline'
-export const SELECTED_CLASS = 'selected'
+const ITEM_CLASS = 'UnderlineNav-item no-underline'
+const SELECTED_CLASS = 'selected'
 
 function UnderlineNav({actions, className, align, children, full, label}) {
   const classes = classnames(className, 'UnderlineNav', align && `UnderlineNav--${align}`, full && 'UnderlineNav--full')
@@ -23,9 +23,15 @@ function UnderlineNav({actions, className, align, children, full, label}) {
   )
 }
 
-// make it possible to destructure these from UnderlineNav:
-// const {ITEM_CLASS} = UnderlineNav
-Object.assign(UnderlineNav, {ITEM_CLASS, SELECTED_CLASS})
+const UnderlineNavLink = ({className, selected, is: Tag, ...rest}) => {
+  const classes = classnames(ITEM_CLASS, selected && SELECTED_CLASS, className)
+
+  if (typeof rest.to === 'string') {
+    rest.activeClassName = SELECTED_CLASS
+  }
+
+  return <Tag className={classes} {...rest} />
+}
 
 UnderlineNav.propTypes = {
   actions: PropTypes.node,
@@ -35,4 +41,15 @@ UnderlineNav.propTypes = {
   label: PropTypes.string
 }
 
+UnderlineNavLink.defaultProps = {
+  is: 'a'
+}
+
+UnderlineNavLink.propTypes = {
+  is: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  selected: PropTypes.bool
+}
+
+UnderlineNav.Link = withSystemProps(UnderlineNavLink, COMMON)
+
 export default withSystemProps(UnderlineNav, COMMON)

src/__tests__/UnderlineNavLink.js

@@ -1,29 +1,29 @@
 /* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
 import React from 'react'
-import UnderlineNavLink from '../UnderlineNavLink'
+import UnderlineNav from '../UnderlineNav'
 import {render} from '../utils/testing'
 
-describe('UnderlineNavLink', () => {
+describe('UnderlineNav.Link', () => {
   it('is a system component', () => {
-    expect(UnderlineNavLink.systemComponent).toEqual(true)
+    expect(UnderlineNav.Link.systemComponent).toEqual(true)
   })
 
   it('renders an <a> by default', () => {
-    expect(render(<UnderlineNavLink />).type).toEqual('a')
+    expect(render(<UnderlineNav.Link />).type).toEqual('a')
   })
 
   it('renders the given "is" prop', () => {
     const Type = props => <b {...props} />
-    expect(render(<UnderlineNavLink is={Type} />)).toMatchSnapshot()
+    expect(render(<UnderlineNav.Link is={Type} />)).toMatchSnapshot()
   })
 
   it('respects the "selected" prop', () => {
-    expect(render(<UnderlineNavLink selected />)).toMatchSnapshot()
+    expect(render(<UnderlineNav.Link selected />)).toMatchSnapshot()
   })
 
   it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
     const Mock = jest.fn(() => <div />)
-    render(<UnderlineNavLink is={Mock} to="#" />)
+    render(<UnderlineNav.Link is={Mock} to="#" />)
     expect(Mock.mock.calls[0][0].to).toEqual('#')
     expect(Mock.mock.calls[0][0].activeClassName).toEqual('selected')
   })

src/__tests__/__snapshots__/UnderlineNavLink.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`UnderlineNavLink renders the given "is" prop 1`] = `
+exports[`UnderlineNav.Link renders the given "is" prop 1`] = `
 <b
   blacklist={
     Array [
@@ -27,7 +27,7 @@ exports[`UnderlineNavLink renders the given "is" prop 1`] = `
 />
 `;
 
-exports[`UnderlineNavLink respects the "selected" prop 1`] = `
+exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
 <a
   blacklist={
     Array [

src/index.js

@@ -52,4 +52,3 @@ export {default as Flash} from './Flash'
 export {default as StateLabel} from './StateLabel'
 
 export {default as UnderlineNav} from './UnderlineNav'
-export {default as UnderlineNavLink} from './UnderlineNavLink'