Skip to content

Commit

Permalink
feat(community-side-navigation): update ui for sidenav
Browse files Browse the repository at this point in the history 
BREAKING CHANGE: remove active prop from SubMenu
  • Loading branch information
@Andrew-K-Lam @agorovyi
Andrew-K-Lam authored and agorovyi committed Sep 10, 2019
1 parent 0ce5f33 commit a8c6903
Show file tree
Hide file tree
Showing 8 changed files with 213 additions and 189 deletions.
18 changes: 7 additions & 11 deletions packages/SideNavigation/Link/Link.jsx
View file
Expand Up @@ -32,18 +32,18 @@ const BoxContainer = styled(Box)(props => ({
'&:hover': {
backgroundColor: `${colorWhiteLilac}`,
},
marginLeft: props.subMenuLink ? '1rem' : '0',
borderLeft: props.subMenuLink ? `4px solid ${colorWhiteLilac}` : 'none',
...(props.active && !props.subMenuLink ? activeContainer : undefined),
marginLeft: props.submenulink ? '1rem' : '0',
borderLeft: props.submenulink ? `4px solid ${colorWhiteLilac}` : 'none',
...(props.active && !props.submenulink ? activeContainer : undefined),
}))

const BoxWrapper = styled(Box)(props => ({
backgroundColor: props.active ? `${colorWhiteLilac}` : 'none',
}))

const BoxActive = styled(Box)(props => ({
borderLeft: props.active && props.subMenuLink ? `4px solid ${colorTelusPurple}` : 'none',
marginLeft: props.subMenuLink ? '-0.25rem' : '0px',
borderLeft: props.active && props.submenulink ? `4px solid ${colorTelusPurple}` : 'none',
marginLeft: props.submenulink ? '-0.25rem' : '0px',
}))

const StyledTextProvider = styled(ColoredTextProvider)(props => ({
Expand All @@ -64,12 +64,8 @@ const Link = ({ reactRouterLinkComponent, children, active, subMenuLink, ...rest

const innerLink = (
<BoxWrapper active={active ? 1 : 0}>
<BoxContainer
vertical={subMenuLink ? 3 : 3}
subMenuLink={subMenuLink ? 1 : 0}
active={active ? 1 : 0}
>
<BoxActive active={active ? 1 : 0} horizontal={3} subMenuLink={subMenuLink ? 1 : 0}>
<BoxContainer vertical={3} submenulink={subMenuLink ? 1 : 0} active={active ? 1 : 0}>
<BoxActive active={active ? 1 : 0} horizontal={3} submenulink={subMenuLink ? 1 : 0}>
<StyledTextProvider active={active}>
<Text size={subMenuLink ? 'small' : 'medium'} bold={active}>
{children}
Expand Down
32 changes: 16 additions & 16 deletions packages/SideNavigation/Link/__tests__/__snapshots__/Link.spec.jsx.snap
View file
Expand Up @@ -116,7 +116,7 @@ exports[`SideNavigation.Link renders 1`] = `
>
<Link__BoxContainer
active={0}
subMenuLink={0}
submenulink={0}
vertical={3}
>
<StyledComponent
Expand Down Expand Up @@ -144,26 +144,26 @@ exports[`SideNavigation.Link renders 1`] = `
}
}
forwardedRef={null}
subMenuLink={0}
submenulink={0}
vertical={3}
>
<Box
active={0}
className="c2"
inline={false}
subMenuLink={0}
submenulink={0}
tag="div"
vertical={3}
>
<div
active={0}
className="TDS_Box-modules__verticalPadding-3___Fsv37 c2"
subMenuLink={0}
submenulink={0}
>
<Link__BoxActive
active={0}
horizontal={3}
subMenuLink={0}
submenulink={0}
>
<StyledComponent
active={0}
Expand Down Expand Up @@ -191,20 +191,20 @@ exports[`SideNavigation.Link renders 1`] = `
}
forwardedRef={null}
horizontal={3}
subMenuLink={0}
submenulink={0}
>
<Box
active={0}
className="c3"
horizontal={3}
inline={false}
subMenuLink={0}
submenulink={0}
tag="div"
>
<div
active={0}
className="TDS_Box-modules__horizontalPadding-3___2uoUp c3"
subMenuLink={0}
submenulink={0}
>
<Link__StyledTextProvider
active={false}
Expand Down Expand Up @@ -391,7 +391,7 @@ exports[`SideNavigation.Link renders with active styles 1`] = `
>
<Link__BoxContainer
active={1}
subMenuLink={0}
submenulink={0}
vertical={3}
>
<StyledComponent
Expand Down Expand Up @@ -419,26 +419,26 @@ exports[`SideNavigation.Link renders with active styles 1`] = `
}
}
forwardedRef={null}
subMenuLink={0}
submenulink={0}
vertical={3}
>
<Box
active={1}
className="c2"
inline={false}
subMenuLink={0}
submenulink={0}
tag="div"
vertical={3}
>
<div
active={1}
className="TDS_Box-modules__verticalPadding-3___Fsv37 c2"
subMenuLink={0}
submenulink={0}
>
<Link__BoxActive
active={1}
horizontal={3}
subMenuLink={0}
submenulink={0}
>
<StyledComponent
active={1}
Expand Down Expand Up @@ -466,20 +466,20 @@ exports[`SideNavigation.Link renders with active styles 1`] = `
}
forwardedRef={null}
horizontal={3}
subMenuLink={0}
submenulink={0}
>
<Box
active={1}
className="c3"
horizontal={3}
inline={false}
subMenuLink={0}
submenulink={0}
tag="div"
>
<div
active={1}
className="TDS_Box-modules__horizontalPadding-3___2uoUp c3"
subMenuLink={0}
submenulink={0}
>
<Link__StyledTextProvider
active={true}
Expand Down
1 change: 0 additions & 1 deletion packages/SideNavigation/SideNavigation.jsx
View file
Expand Up @@ -205,7 +205,6 @@ class SideNavigation extends Component {
options = {
handleToggleSubMenu: this.toggleSubMenu,
isOpen: this.checkAccordion(id),
active: child.props.active,
id,
}
}
Expand Down
6 changes: 3 additions & 3 deletions packages/SideNavigation/SideNavigation.md
View file
Expand Up @@ -12,12 +12,12 @@
<FlexGrid.Col xs={5}>
<SideNavigation accordion={true} verticalSpacing={3} category="Optional Category Title">
<SideNavigation.Link href="#">Top of the page</SideNavigation.Link>
<SideNavigation.SubMenu label="Overview" active>
<SideNavigation.SubMenu label="Overview">
<SideNavigation.Link href="#introduction" active>
Link 1
</SideNavigation.Link>
<SideNavigation.Link href="#introduction">Link 2</SideNavigation.Link>
<SideNavigation.Link href="#introduction">Link 3</SideNavigation.Link>
<SideNavigation.Link href="#linktwo">Link 2</SideNavigation.Link>
<SideNavigation.Link href="#linkthree">Link 3</SideNavigation.Link>
</SideNavigation.SubMenu>
<SideNavigation.SubMenu label="Reference Architecture">
<SideNavigation.Link href="#reference">Overview</SideNavigation.Link>
Expand Down
31 changes: 23 additions & 8 deletions packages/SideNavigation/SubMenu/SubMenu.jsx
View file
Expand Up @@ -52,6 +52,17 @@ class SubMenu extends React.Component {

state = {
subMenuHeight: 0,
active: undefined,
}

componentWillMount() {
this.checkActiveChildren()
}

componentDidMount() {
if (this.state.active) {
this.props.handleToggleSubMenu(this.props.id)
}
}

componentDidUpdate() {
Expand All @@ -71,25 +82,34 @@ class SubMenu extends React.Component {
}
}

checkActiveChildren = () => {
React.Children.map(this.props.children, child => {
if (child.props.active) {
this.setState({ active: true })
}
})
}

options = {
subMenuLink: true,
}

render() {
const { children, label, isOpen, active, ...rest } = this.props
const { children, label, isOpen, ...rest } = this.props

const activeChild = this.state.active
return (
<React.Fragment>
<ButtonSubMenu
{...safeRest(rest)}
onClick={this.handleClick}
active={active}
active={activeChild}
aria-expanded={isOpen}
isOpen={isOpen}
>
<SpaceBox vertical={3} inline horizontal={2}>
<ColoredTextProvider>
<Text size="medium" bold={active}>
<Text size="medium" bold={activeChild}>
{label}
</Text>
</ColoredTextProvider>
Expand Down Expand Up @@ -149,10 +169,6 @@ SubMenu.propTypes = {
* @ignore
*/
isOpen: PropTypes.bool,
/**
* State of whether user is in one of the links in the SubMenu.
*/
active: PropTypes.bool,
/**
* Click handler.
*
Expand All @@ -164,7 +180,6 @@ SubMenu.propTypes = {
SubMenu.defaultProps = {
handleToggleSubMenu: undefined,
isOpen: false,
active: false,
children: undefined,
id: undefined,
onClick: undefined,
Expand Down

0 comments on commit a8c6903

Please sign in to comment.