Skip to content

Commit

Permalink
fix(Sidebar): add props for page level nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@pauljeter
Ben Biggs authored and pauljeter committed Apr 1, 2019
1 parent 7cee1cf commit 6b8a229
Show file tree
Hide file tree
Showing 10 changed files with 135 additions and 64 deletions.
126 changes: 75 additions & 51 deletions core/scss/components/sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,20 @@
* @category layout
* @component sidebar
*/
@import '../settings/core';
@import '../settings/colors';
@import '../settings/fonts';
@import '../settings/top-bar';
@import '../settings/z-index';

@import '../tools/mixins/flex';
@import '../tools/mixins/list-item';

@include exports('cui-sidebar') {
.#{$prefix}-sidebar {
width: rem-calc(200);
$parent: &;
min-width: rem-calc(200);
max-width: rem-calc(240);
height: 100%;
background-color: $white;
z-index: $zindex-sidebar;
Expand Down Expand Up @@ -38,13 +46,13 @@
position: fixed;
}

&--indented {
&--global {
background-color: $black-08;
.#{$prefix}-sidebar {
#{$parent} {
&-nav {
&__group {
&--primary {
.cui-list-item {
.#{$list-item__class} {
height: rem-calc(40);
font-size: rem-calc(14);

Expand All @@ -65,10 +73,8 @@
);
}

.#{$prefix}-sidebar-nav__group--secondary {
.cui-list-item {
padding-left: rem-calc(56);

#{$parent}-nav__group--secondary {
.#{$list-item__class} {
@include list-item-color(
$active-bgrd-color: $black-08,
$active-color: $black,
Expand All @@ -81,53 +87,71 @@
$section-right-color: $gray-1
);
}
}
}
}
}
}

.#{$prefix}-sidebar-nav__group--tertiary {
.cui-list-item {
padding-left: rem-calc(68);
&#{$parent}--nested {
#{$parent} {
&-nav {
&__group {
&--primary {
.#{$list-item__class} {
height: rem-calc(44);
padding: 0 rem-calc(20);
font-size: rem-calc(16);

&__left {
font-size: rem-calc(20);
}

@include list-item-color(
$active-bgrd-color: $black-08,
$active-color: $black,
$background-color: transparent,
$color: $gray-1,
$focus-color: $black-04,
$hover-bgrd-color: $black-04,
$includeFocus: false,
$section-left-color: $gray-1,
$section-right-color: $gray-1,
);
}
}
}
}
}
}
}

&--nested {
width: rem-calc(240);

.#{$prefix}-sidebar {
&-nav {
&__group {
&--primary {
.cui-list-item {
height: rem-calc(44);
padding: 0 rem-calc(20);
font-size: rem-calc(16);

&__left {
font-size: rem-calc(20);
&#{$parent}--indented {
#{$parent} {
&-nav {
&__group {
&--primary {
#{$parent}-nav__group--secondary {
.#{$list-item__class} {
padding-left: rem-calc(56);
}

#{$parent}-nav__group--tertiary {
.#{$list-item__class} {
padding-left: rem-calc(68);
}
}
}

@include list-item-color(
$active-bgrd-color: $black-08,
$active-color: $black,
$background-color: transparent,
$color: $gray-1,
$focus-color: $black-04,
$hover-bgrd-color: $black-04,
$includeFocus: false,
$section-left-color: $gray-1,
$section-right-color: $gray-1,
);
}
}
}
}
}
}

&--nested {
width: rem-calc(240);
}

&--topbar {
padding-top: $top-bar__height--desktop;
}
Expand All @@ -139,7 +163,7 @@
width: 100%;
}

.cui-list-item {
.#{$list-item__class} {
&:focus {
box-shadow: none;
}
Expand Down Expand Up @@ -174,7 +198,7 @@
width: 100%;

&--primary {
.cui-list-item {
.#{$list-item__class} {
padding: 0 rem-calc(24);

@include list-item-color(
Expand All @@ -192,10 +216,10 @@
);
}

.#{$prefix}-sidebar-nav__group--secondary {
#{$parent}-nav__group--secondary {
padding-bottom: rem-calc(8);

.cui-list-item {
.#{$list-item__class} {
height: rem-calc(36);
font-size: rem-calc(14);

Expand All @@ -214,10 +238,10 @@
);
}

.#{$prefix}-sidebar-nav__group--tertiary {
#{$parent}-nav__group--tertiary {
padding-top: rem-calc(4);

.cui-list-item {
.#{$list-item__class} {
padding-left: rem-calc(36);
height: rem-calc(32);
font-size: rem-calc(12);
Expand Down Expand Up @@ -301,14 +325,14 @@
}
}

&--dark.#{$prefix}-sidebar {
&--dark#{$parent} {
background-color: $gray-1;
.#{$prefix}-sidebar {
#{$parent} {

&-nav {
&__group {
&--primary {
.cui-list-item {
.#{$list-item__class} {
@include list-item-color(
$active-bgrd-color: rgba(0, 115, 149, 0.56),
$active-color: $white,
Expand All @@ -327,8 +351,8 @@
);
}

& .#{$prefix}-sidebar-nav__group--secondary {
.cui-list-item {
& #{$parent}-nav__group--secondary {
.#{$list-item__class} {
@include list-item-color(
$active-bgrd-color: rgba(0, 115, 149, 0.56),
$active-color: $white,
Expand All @@ -347,8 +371,8 @@
);
}

& .#{$prefix}-sidebar-nav__group--tertiary {
.cui-list-item {
& #{$parent}-nav__group--tertiary {
.#{$list-item__class} {
@include list-item-color(
$active-bgrd-color: transparent,
$active-color: $blue-press,
Expand Down
9 changes: 6 additions & 3 deletions react/src/lib/Sidebar/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ ShallowWrapper {
expandable={true}
expanded={true}
isFixed={false}
isPageLevel={false}
theme=""
withIcons={true}
withTopbar={false}
Expand Down Expand Up @@ -38,7 +39,7 @@ ShallowWrapper {
>
<Unknown />
</Context.Provider>,
"className": "cui-sidebar cui-sidebar--indented cui-sidebar--expanded",
"className": "cui-sidebar cui-sidebar--global cui-sidebar--indented cui-sidebar--expanded",
},
"ref": null,
"rendered": Object {
Expand Down Expand Up @@ -105,7 +106,7 @@ ShallowWrapper {
>
<Unknown />
</Context.Provider>,
"className": "cui-sidebar cui-sidebar--indented cui-sidebar--expanded",
"className": "cui-sidebar cui-sidebar--global cui-sidebar--indented cui-sidebar--expanded",
},
"ref": null,
"rendered": Object {
Expand Down Expand Up @@ -167,7 +168,9 @@ ShallowWrapper {
"getChildContext": Object {
"calledByRenderer": false,
},
"getDerivedStateFromProps": true,
"getDerivedStateFromProps": Object {
"hasShouldComponentUpdateBug": false,
},
"getSnapshotBeforeUpdate": true,
"setState": Object {
"skipsComponentDidUpdateOnNullish": true,
Expand Down
9 changes: 7 additions & 2 deletions react/src/lib/Sidebar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ class Sidebar extends React.Component {
className,
expandable,
isFixed,
isPageLevel,
theme,
withIcons,
withTopbar,
Expand Down Expand Up @@ -81,9 +82,10 @@ class Sidebar extends React.Component {
'cui-sidebar' +
`${theme && ` cui-sidebar--${theme}` || ''}` +
`${isFixed && ` cui-sidebar--fixed` || ''}` +
`${withIcons && ` cui-sidebar--indented` || ''}` +
`${!isPageLevel && ` cui-sidebar--global` || ''}` +
`${withTopbar && ` cui-sidebar--topbar` || ''}` +
`${hasTiers() && withIcons && ` cui-sidebar--nested` || ''}` +
`${withIcons && !isPageLevel && ` cui-sidebar--indented` || '' }` +
`${hasTiers() && ` cui-sidebar--nested` || ''}` +
` cui-sidebar--${(!expandable || expanded) ? 'expanded' : 'collapsed'}` +
`${className && ` ${className}` || ''}`
}
Expand All @@ -110,6 +112,8 @@ Sidebar.propTypes = {
expanded: PropTypes.bool,
/** @prop Sets Sidebar to position fixed | false */
isFixed: PropTypes.bool,
/** @prop Sets Sidebar styling for page level | false */
isPageLevel: PropTypes.bool,
/** @prop Optional color theme | '' */
theme: PropTypes.string,
/** @prop Changes padding based on Icon nav | true */
Expand All @@ -124,6 +128,7 @@ Sidebar.defaultProps = {
expandable: true,
expanded: true,
isFixed: false,
isPageLevel: false,
theme: '',
withIcons: true,
withTopbar: false,
Expand Down
33 changes: 31 additions & 2 deletions react/src/lib/Sidebar/index.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React from 'react';
import { shallow } from 'enzyme';
import Sidebar from '@collab-ui/react/Sidebar';
import { shallow, mount } from 'enzyme';
import {
Sidebar,
SidebarNav,
SidebarNavItem,
} from '@collab-ui/react';

describe('<Sidebar />', () => {
it('should render a Sidebar', () => {
Expand Down Expand Up @@ -77,16 +81,41 @@ describe('<Sidebar />', () => {
expect(wrapper.find('.cui-sidebar--nested').exists()).toBeTruthy();
});

it('should not have global class with isPageLevel true', () => {
const wrapper = shallow(<Sidebar isPageLevel/>);

expect(wrapper.find('.cui-sidebar--global').exists()).toBeFalsy();
});

it('should add indented class if withIcons is true', () => {
const wrapper = shallow(<Sidebar withIcons/>);

expect(wrapper.find('.cui-sidebar--indented').exists()).toBeTruthy();
});

it('should add indented class if withIcons=(true), isPageLevel=(true)', () => {
const wrapper = shallow(<Sidebar withIcons isPageLevel/>);

expect(wrapper.find('.cui-sidebar--indented').exists()).toBeFalsy();
});

it('should add topbar class if withTopbar is true', () => {
const wrapper = shallow(<Sidebar withTopbar/>);

expect(wrapper.find('.cui-sidebar--topbar').exists()).toBeTruthy();
});

it('should have nested class if nested SidebarItems', () => {
const wrapper = mount(
<Sidebar>
<SidebarNav>
<SidebarNavItem>
<SidebarNavItem />
</SidebarNavItem>
</SidebarNav>
</Sidebar>
);

expect(wrapper.find('.cui-sidebar--nested').exists()).toBeTruthy();
});
});
4 changes: 3 additions & 1 deletion react/src/lib/SidebarBody/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,9 @@ ShallowWrapper {
"getChildContext": Object {
"calledByRenderer": false,
},
"getDerivedStateFromProps": true,
"getDerivedStateFromProps": Object {
"hasShouldComponentUpdateBug": false,
},
"getSnapshotBeforeUpdate": true,
"setState": Object {
"skipsComponentDidUpdateOnNullish": true,
Expand Down
4 changes: 3 additions & 1 deletion react/src/lib/SidebarFooter/__snapshots__/index.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ ShallowWrapper {
"getChildContext": Object {
"calledByRenderer": false,
},
"getDerivedStateFromProps": true,
"getDerivedStateFromProps": Object {
"hasShouldComponentUpdateBug": false,
},
"getSnapshotBeforeUpdate": true,
"setState": Object {
"skipsComponentDidUpdateOnNullish": true,
Expand Down
Loading

0 comments on commit 6b8a229

Please sign in to comment.