Skip to content

Commit

Permalink
feat(ui-shell): add platform nav (#1082)
Browse files Browse the repository at this point in the history
* feat(ui-shell): add platform nav

* feat(platform-nav): add support for category expansion

* chore: update visibility to inherit value
  • Loading branch information
joshblack authored Sep 18, 2018
1 parent 78ee39a commit a3e82dc
Show file tree
Hide file tree
Showing 7 changed files with 307 additions and 17 deletions.
3 changes: 3 additions & 0 deletions src/components/ui-shell/_platform-header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,13 @@
background-color: $shell-ui-02;
}

.#{$prefix}--platform-header__action--active,
.#{$prefix}--platform-header__action--active:hover,
.#{$prefix}--platform-header__action:active {
background-color: $shell-brand-01;
}

.#{$prefix}--platform-header__action--active,
.#{$prefix}--platform-header__action:focus {
border-color: $shell-brand-01;
outline: none;
Expand Down
146 changes: 146 additions & 0 deletions src/components/ui-shell/_platform-nav.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
@import '../../globals/scss/colors';
@import '../../globals/scss/css--helpers';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vars';
@import 'functions';

@mixin platform-nav {
//----------------------------------------------------------------------------
// Platform Navigation
//----------------------------------------------------------------------------
.#{$prefix}--platform__nav {
position: absolute;
top: get-fixed-size(6);
bottom: 0;
left: 0;
background-color: $ibm-colors__gray--90;
width: get-fixed-size(32);
z-index: 1000;
box-shadow: 0 get-fixed-size(1) get-fixed-size(2) 0 rgba(0, 0, 0, 0.25);
color: $ibm-colors__gray--10;
}

.#{$prefix}--platform__nav svg {
fill: $ibm-colors__gray--10;
}

//----------------------------------------------------------------------------
// Platform Nav Section
//----------------------------------------------------------------------------
.#{$prefix}--platform__nav-section:not(:last-child)::after {
display: block;
content: '';
height: 1px;
background-color: $ibm-colors__gray--80;
margin: 0 get-fixed-size(2);
}

//----------------------------------------------------------------------------
// Platform Nav Item
//----------------------------------------------------------------------------
.#{$prefix}--platform__nav-item {
display: flex;
align-items: center;
}

//----------------------------------------------------------------------------
// Platform Nav Link
//----------------------------------------------------------------------------
a.#{$prefix}--platform__nav-link {
display: flex;
align-items: center;
color: $ibm-colors__gray--10;
text-decoration: none;
font-size: rem(14px);
font-weight: 400;
width: 100%;
}

a.#{$prefix}--platform__nav-link:hover {
background-color: $ibm-colors__gray--80;
color: $ibm-colors__gray--10;
}

a.#{$prefix}--platform__nav-link:focus {
outline: get-fixed-size(0.5) solid $ibm-colors__blue--60;
outline-offset: get-fixed-size(-0.5);
}

//----------------------------------------------------------------------------
// Platform Nav Category
//----------------------------------------------------------------------------
.#{$prefix}--platform__category {
width: 100%;
}

.#{$prefix}--platform__category-toggle {
@include button-reset($width: true);

display: flex;
align-items: center;
}

.#{$prefix}--platform__category-toggle:hover {
background-color: $ibm-colors__gray--80;
}

.#{$prefix}--platform__category-toggle:focus {
outline: get-fixed-size(0.5) solid $ibm-colors__blue--60;
outline-offset: get-fixed-size(-0.5);
}

.#{$prefix}--platform__category-title {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: get-fixed-size(2);
width: 100%;
color: $ibm-colors__gray--10;
font-size: rem(14px);
font-weight: 400;
}

.#{$prefix}--platform__category-items {
display: none;
visibility: hidden;
}

.#{$prefix}--platform__category-item > a.#{$prefix}--platform__nav-link {
display: flex;
align-items: center;
min-height: get-fixed-size(5);
padding-left: get-fixed-size(7);
}

.#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-title {
font-weight: 600;
}

.#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-title > svg {
transform: rotate(180deg);
}

.#{$prefix}--platform__category--expanded .#{$prefix}--platform__category-items {
display: block;
visibility: inherit;
}

//----------------------------------------------------------------------------
// Platform Nav Icon
//----------------------------------------------------------------------------
.#{$prefix}--platform__nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: get-fixed-size(6);
min-width: get-fixed-size(6);
height: get-fixed-size(5);
margin-right: get-fixed-size(1);
}
}

@include exports('platform-nav') {
@if feature-flag-enabled('ui-shell') {
@include platform-nav;
}
}
1 change: 1 addition & 0 deletions src/components/ui-shell/_ui-shell.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@
@import 'functions';
@import 'platform-header';
@import 'platform-side-nav';
@import 'platform-nav';
9 changes: 6 additions & 3 deletions src/components/ui-shell/platform-header.hbs
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<header class="bx--platform-header">
{{#if nav.state.expanded}}
<button class="bx--platform-header__menu-trigger bx--platform-header__action bx--platform-header__action--active" title="Close menu">
<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M17.414 16L24 9.414 22.586 8 16 14.586 9.414 8 8 9.414 14.586 16 8 22.586 9.414 24 16 17.414 22.586 24 24 22.586 17.414 16z"/></svg>
{{else}}
<button class="bx--platform-header__menu-trigger bx--platform-header__action" title="Open menu">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M4 6h24v2H4zm0 18h24v2H4zm0-9h24v2H4z"/></svg>
{{/if}}
</button>
<a class="bx--platform-header__name" href="#" title="{{header.name}}">
{{header.name}}
Expand Down
55 changes: 55 additions & 0 deletions src/components/ui-shell/platform-nav.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{{#if nav.state.expanded}}
<div class="bx--platform__nav">
{{#each nav.sections}}
<div class="bx--platform__nav-section">
<ul class="bx--platform__nav-items">
{{#each this.items}}
<li class="bx--platform__nav-item">
{{#eq this.type "link"}}
<a class="bx--platform__nav-link" href="{{ this.href }}">
<div class="bx--platform__nav-icon">
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
{{ this.title }}
</a>
{{/eq}}
{{#eq this.type "category"}}
{{#if ../../nav.state.category}}
<div class="bx--platform__category bx--platform__category--expanded">
{{else}}
<div class="bx--platform__category">
{{/if}}
<button class="bx--platform__category-toggle" aria-haspopup="true" aria-expanded="true" aria-controls="category-1-menu">
<div class="bx--platform__nav-icon">

<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
<div class="bx--platform__category-title">
{{ this.title }}
<svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z"/>
</svg>
</div>
</button>
<ul id="category-1-menu" class="bx--platform__category-items" role="menu">
{{#each this.links}}
<li class="bx--platform__category-item">
<a class="bx--platform__nav-link" href="{{ this.href }}" role="menuitem">
{{ this.title }}
</a>
</li>
{{/each}}
</ul>
</div>
{{/eq}}
</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{/if}}
109 changes: 95 additions & 14 deletions src/components/ui-shell/ui-shell.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,6 @@ const header = {
],
};

function createSidebarLinks(count, activeIndex) {
return Array.from({ length: count }, (_, i) => {
const link = {
title: 'L3 link',
href: '/component/ui-shell--default',
};
if (i === activeIndex) {
link.active = true;
}
return link;
});
}

const sidenav = {
state: {
expanded: false,
Expand All @@ -73,18 +60,78 @@ const sidenav = {
],
};

const nav = {
state: {
expanded: false,
},
sections: [
{
items: [
{
type: 'link',
title: 'L1 link',
href: '/component/ui-shell--platform-navigation-expanded',
},
{
type: 'link',
title: 'L1 link',
href: '/component/ui-shell--platform-navigation-expanded',
},
],
},
{
items: [
{
type: 'link',
title: 'L1 link',
href: '/component/ui-shell--platform-navigation-expanded',
},
{
type: 'link',
title: 'L1 link',
href: '/component/ui-shell--platform-navigation-expanded',
},
{
type: 'link',
title: 'L1 link',
href: '/component/ui-shell--platform-navigation-expanded',
},
{
type: 'category',
title: 'L1 category',
links: [
{
title: 'L2 link',
href: '/component/ui-shell--platform-navigation-expanded',
},
{
title: 'L2 link',
href: '/component/ui-shell--platform-navigation-expanded',
},
{
title: 'L2 link',
href: '/component/ui-shell--platform-navigation-expanded',
},
],
},
],
},
],
};

module.exports = {
preview: 'ui-shell-preview',
meta: {
xVersionOnly: true,
},
context: {
header,
nav,
sidenav,
},
variants: [
{
name: 'expanded',
name: 'Side-nav expanded',
context: {
sidenav: {
state: {
Expand All @@ -93,5 +140,39 @@ module.exports = {
},
},
},
{
name: 'Platform nav expanded',
context: {
nav: {
state: {
expanded: true,
},
},
},
},
{
name: 'Platform nav category expanded',
context: {
nav: {
state: {
expanded: true,
category: true,
},
},
},
},
],
};

function createSidebarLinks(count, activeIndex) {
return Array.from({ length: count }, (_, i) => {
const link = {
title: 'L3 link',
href: '/component/ui-shell--default',
};
if (i === activeIndex) {
link.active = true;
}
return link;
});
}
1 change: 1 addition & 0 deletions src/components/ui-shell/ui-shell.hbs
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
{{> platform-header }}
{{> platform-side-nav }}
{{> platform-nav }}

0 comments on commit a3e82dc

Please sign in to comment.