From 35de15778dfff4cd4c2eb1d4706166def4be9840 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 11 Oct 2018 11:44:35 -0700 Subject: [PATCH 1/6] rename UnderlineNavLink to UnderlineNav.Link --- src/UnderlineNav.js | 28 +++++++++++++++++++++++----- src/UnderlineNavLink.js | 26 -------------------------- 2 files changed, 23 insertions(+), 31 deletions(-) delete mode 100644 src/UnderlineNavLink.js diff --git a/src/UnderlineNav.js b/src/UnderlineNav.js index a85e724d56e..ab808b95b37 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,16 @@ 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) From ed2e7650752e59286d9fa4a953509072916fd4c2 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 11 Oct 2018 11:44:41 -0700 Subject: [PATCH 2/6] update index --- src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.js b/src/index.js index 0dca744241c..d8b5623c166 100644 --- a/src/index.js +++ b/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' From 74e497916b335eed96aa7f85af6a215acf8fca35 Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 11 Oct 2018 11:44:46 -0700 Subject: [PATCH 3/6] update tests --- src/__tests__/UnderlineNavLink.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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') }) From a251752d84a1f500c5952f08f1b69883d386893f Mon Sep 17 00:00:00 2001 From: Emily Date: Thu, 11 Oct 2018 11:44:50 -0700 Subject: [PATCH 4/6] update docs --- pages/components/docs/UnderlineNav.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 `