Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GDS-519 - sidenav #67

Merged
merged 2 commits into from
Mar 25, 2020
Merged

GDS-519 - sidenav #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45c4869
feat: Created new side nav component, with 3 variation of the compone…
Mar 25, 2020
db97ab9
- removed javascript file for sidenav as its not used
Mar 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 48 additions & 3 deletions src/components/side-navigation/_side-navigation.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,48 @@
<div class="nsw-wysiwyg-content nsw-container">
<h1>Side navigation</h1>
</div>
<nav class="nsw-sidenav" aria-labelledby="{{parentID}} side navigation">
<div class="nsw-sidenav__header">
<h2 id="{{parentID}}" class="nsw-sidenav__heading">
<a href="{{parent-url}}" class="nsw-sidenav__heading-link">{{parent-text}}</a></h2>
</div>
<ul class="nsw-sidenav__list nsw-sidenav__list--level-1">
{{#each navitems}}
<li class="nsw-sidenav__list-item {{#if navitems}}has-active-children{{/if}}">
<a href="{{url}}" class="nsw-sidenav__link {{#if currentPage}}is-current{{/if}}" {{#if currentPage}}aria-current="page"{{/if}}>
{{text}}
</a>
{{#if navitems}}
<ul class="nsw-sidenav__list nsw-sidenav__list--level-2">
{{#each navitems}}
<li class="nsw-sidenav__list-item {{#if navitems}}has-active-children{{/if}}">
<a href="{{url}}" class="nsw-sidenav__link {{#if currentPage}}is-current{{/if}}" {{#if currentPage}}aria-current="page"{{/if}}>
{{text}}
</a>
{{#if navitems}}
<ul class="nsw-sidenav__list nsw-sidenav__list--level-3">
{{#each navitems}}
<li class="nsw-sidenav__list-item {{#if navitems}}has-active-children{{/if}}">
<a href="{{url}}" class="nsw-sidenav__link {{#if currentPage}}is-current{{/if}}" {{#if currentPage}}aria-current="page"{{/if}}>
{{text}}
</a>
{{#if navitems}}
<ul class="nsw-sidenav__list nsw-sidenav__list--level-4">
{{#each navitems}}
<li class="nsw-sidenav__list-item {{#if navitems}}has-active-children{{/if}}">
<a href="{{url}}" class="nsw-sidenav__link {{#if currentPage}}is-current{{/if}}" {{#if currentPage}}aria-current="page"{{/if}}>
{{text}}
</a>
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</li>
{{/each}}
</ul>
</nav>
66 changes: 66 additions & 0 deletions src/components/side-navigation/_side-navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
.nsw-sidenav {
&__header {
border-bottom: solid 2px $nsw-primary-blue;
}

&__heading {
@include nsw-spacing(margin, none);
@include font-stack('heading');
@include font-size('sm');
}

&__list {
@include nsw-spacing(margin, none);
@include nsw-spacing(padding-left, none);
list-style: none;
}

&__list-item {
@include font-stack;
border-top: solid 1px $light20;
}

&__heading-link,
&__link {
@include nsw-spacing(padding, md);
display: block;
color: $dark80;
text-decoration: none;
background-color: $white;

&:hover {
@include nsw-hover;
}

&:focus {
@include nsw-focus($offset: false);
}
}

&__link {
.has-active-children > &,
&.is-current {
@include font-stack('heading');
background-color: $light10;
}

.nsw-sidenav__list--level-2 & {
@include nsw-spacing(padding-left, lg);
}

.nsw-sidenav__list--level-3 & {
@include nsw-spacing(padding-left, xl);
}

.nsw-sidenav__list--level-4 & {
@include nsw-spacing(padding-left, xxl);
}
}

.nsw-sidenav__list--level-1 {
> .has-active-children {
border-left: solid 2px $nsw-primary-highlight;
}
}

}
22 changes: 20 additions & 2 deletions src/components/side-navigation/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,22 @@
---
title: Side navigation [INCOMPLETE]
title: Side navigation
model:
singlelevel: side-navigation.json
secondlevel: side-navigation-level2.json
fourthlevel: side-navigation-level4.json
---
{{>_side-navigation}}

<div style="max-width: 300px; float: left; padding: 2rem;">
<h1>Level 2 no child pages</h1>
{{>_side-navigation model.singlelevel}}
</div>

<div style="max-width: 300px; float: left; padding: 2rem;">
<h1>Level 2 with child pages</h1>
{{>_side-navigation model.secondlevel}}
</div>

<div style="max-width: 300px; float: left; padding: 2rem;">
<h1>Level 4 with child pages</h1>
{{>_side-navigation model.fourthlevel}}
</div>
49 changes: 49 additions & 0 deletions src/components/side-navigation/side-navigation-level2.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{
"parent-text": "About DPC",
"parent-url": "#",
"parentID": "sksm7kis26ns",
"navitems": [
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": true,
"navitems": [
{
"text": "Level 3",
"url": "#",
"currentPage": false
},
{
"text": "Level 3",
"url": "#",
"currentPage": false
},
{
"text": "Level 3",
"url": "#",
"currentPage": false
}
]
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
}
]
}
83 changes: 83 additions & 0 deletions src/components/side-navigation/side-navigation-level4.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
{
"parent-text": "About DPC",
"parent-url": "#",
"parentID": "sksm7sss26ns",
"navitems": [
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false,
"navitems": [
{
"text": "Level 3",
"url": "#",
"currentPage": false
},
{
"text": "Level 3",
"url": "#",
"currentPage": false,
"navitems": [
{
"text": "Level 4",
"url": "#",
"currentPage": false
},
{
"text": "Level 4",
"url": "#",
"currentPage": false
},
{
"text": "Level 4",
"url": "#",
"currentPage": true,
"navitems": [
{
"text": "Level 5",
"url": "#",
"currentPage": false
},
{
"text": "Level 5",
"url": "#",
"currentPage": false
},
{
"text": "Level 5",
"url": "#",
"currentPage": false
}
]
}
]
},
{
"text": "Level 3",
"url": "#",
"currentPage": false
}
]
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
}
]
}
Empty file removed src/components/side-navigation/side-navigation.js
View file
Open in desktop
Empty file.
52 changes: 52 additions & 0 deletions src/components/side-navigation/side-navigation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{
"parent-text": "About DPC",
"parent-url": "#",
"parentID": "sksm726ns",
"navitems": [
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": true
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
},
{
"text": "Level 2",
"url": "#",
"currentPage": false
}
]
}
2 changes: 0 additions & 2 deletions src/global/scss/settings/_settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
// sass-lint:disable no-color-hex

// Base font size
$base-font-size: 16px;

Expand Down