diff --git a/pages/components/docs/UnderlineNav.md b/pages/components/docs/UnderlineNav.md
index 6bc228e58c3..43ce7779ac2 100644
--- a/pages/components/docs/UnderlineNav.md
+++ b/pages/components/docs/UnderlineNav.md
@@ -11,20 +11,20 @@ This ensures that the NavLink gets ```activeClassName='selected'```
```.jsx
- Using {''}
+ Using {''}
-
+
Selected
-
- Bar
- Baz
+
+ Bar
+ Baz
```
## 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 `` element. |
-### UnderlineNavLink
+### UnderlineNav.Link
| Prop name | Type | Description |
| :- | :- | :- |
| is | String | sets the HTML tag for the component|
diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js
index a85e724d56e..74ee7d57fb9 100644
--- a/src/UnderlineNav.js
+++ b/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
+}
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)
diff --git a/src/UnderlineNavLink.js b/src/UnderlineNavLink.js
deleted file mode 100644
index 5622a95a164..00000000000
--- a/src/UnderlineNavLink.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classnames from 'classnames'
-import {ITEM_CLASS, SELECTED_CLASS} from './UnderlineNav'
-import {withSystemProps, COMMON} from './system-props'
-
-function 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
-}
-
-UnderlineNavLink.defaultProps = {
- is: 'a'
-}
-
-UnderlineNavLink.propTypes = {
- is: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
- selected: PropTypes.bool
-}
-
-export default withSystemProps(UnderlineNavLink, COMMON)
diff --git a/src/__tests__/UnderlineNavLink.js b/src/__tests__/UnderlineNavLink.js
index c1ae43c039d..0ed373a566f 100644
--- a/src/__tests__/UnderlineNavLink.js
+++ b/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 by default', () => {
- expect(render( ).type).toEqual('a')
+ expect(render( ).type).toEqual('a')
})
it('renders the given "is" prop', () => {
const Type = props =>
- expect(render( )).toMatchSnapshot()
+ expect(render( )).toMatchSnapshot()
})
it('respects the "selected" prop', () => {
- expect(render( )).toMatchSnapshot()
+ expect(render( )).toMatchSnapshot()
})
it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
const Mock = jest.fn(() =>
)
- render( )
+ render( )
expect(Mock.mock.calls[0][0].to).toEqual('#')
expect(Mock.mock.calls[0][0].activeClassName).toEqual('selected')
})
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap b/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
index f36aaa2218a..c64419e8b05 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.js.snap
+++ b/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`] = `
`;
-exports[`UnderlineNavLink respects the "selected" prop 1`] = `
+exports[`UnderlineNav.Link respects the "selected" prop 1`] = `