Skip to content

Commit

Permalink
Add basic docs about side navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@bartaz
bartaz committed Mar 11, 2020
1 parent bb0458b commit a8dfd78
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 16 deletions.
2 changes: 1 addition & 1 deletion templates/_layouts/docs.html
View file
Expand Up @@ -88,7 +88,7 @@
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/media-object' %}is-active{% endif %}" href="/docs/patterns/media-object">Media object</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/modal' %}is-active{% endif %}" href="/docs/patterns/modal">Modal</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/muted-heading' %}is-active{% endif %}" href="/docs/patterns/muted-heading">Muted heading</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/navigation' %}is-active{% endif %}" href="/docs/patterns/navigation">Navigation</a><div class="p-label--updated u-float-right u-no-margin--bottom">Updated</div></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/navigation' %}is-active{% endif %}" href="/docs/patterns/navigation">Navigation</a><div class="p-label--new u-float-right u-no-margin--bottom">New</div></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/notification' %}is-active{% endif %}" href="/docs/patterns/notification">Notifications</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/pagination' %}is-active{% endif %}" href="/docs/patterns/pagination">Pagination</a></li>
<li class="p-sidebar-nav__item"><a class="p-link--soft {% if path == '/docs/patterns/pull-quote' %}is-active{% endif %}" href="/docs/patterns/pull-quote">Quotes</a></li>
Expand Down
35 changes: 21 additions & 14 deletions templates/docs/component-status.md
View file
Expand Up @@ -16,23 +16,17 @@ When we add, make significant updates, or deprecate a component we update their
<thead>
<tr>
<th style="width: 20%">Component</th>
<th style="width: 10%">Status</th>
<th style="width: 15%">Status</th>
<th style="width: 10%">Version</th>
<th style="width: 60%">Notes</th>
<th style="width: 55%">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<th><a href="/docs/patterns/navigation">Navigation</a></th>
<td><div class="p-label--updated">Updated</div></td>
<td>2.8.0</td>
<td>New navigation classes (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) were added to replace existing (<code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code>).</td>
</tr>
<tr>
<th><a href="/docs/patterns/navigation">Navigation</a></th>
<td><div class="p-label--deprecated">Deprecated</div></td>
<td>2.8.0</td>
<td>Navigation classes <code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code> are deprecated and will be removed in future release v3.0. Please use new class names (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) instead.</td>
<th><a href="/docs/patterns/navigation#side-navigation">Side navigation</a></th>
<td><div class="p-label--new">New</div></td>
<td>2.9.0</td>
<td>New side navigation component was added.</td>
</tr>
</tbody>
</table>
Expand All @@ -43,12 +37,25 @@ When we add, make significant updates, or deprecate a component we update their
<thead>
<tr>
<th style="width: 20%">Component</th>
<th style="width: 10%">Status</th>
<th style="width: 15%">Status</th>
<th style="width: 10%">Version</th>
<th style="width: 60%">Notes</th>
<th style="width: 55%">Notes</th>
</tr>
</thead>
<tbody>
<!-- 2.8.0 -->
<tr>
<th><a href="/docs/patterns/navigation">Navigation</a></th>
<td><div class="p-label--updated">Updated</div></td>
<td>2.8.0</td>
<td>New navigation classes (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) were added to replace existing (<code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code>).</td>
</tr>
<tr>
<th><a href="/docs/patterns/navigation">Navigation</a></th>
<td><div class="p-label--deprecated">Deprecated</div></td>
<td>2.8.0</td>
<td>Navigation classes <code>p-navigation__links</code>, <code>p-navigation__link</code>, and classless <code>&lt;a&gt;</code> are deprecated and will be removed in future release v3.0. Please use new class names (<code>p-navigation__items</code>, <code>p-navigation__item</code>, <code>p-navigation__link</code>) instead.</td>
</tr>
<!-- 2.7.0 -->
<tr>
<th><a href="/docs/patterns/contextual-menu#theming">Contextual menu</a></th>
Expand Down
26 changes: 25 additions & 1 deletion templates/docs/patterns/navigation.md
View file
Expand Up @@ -8,7 +8,7 @@ context:

<hr>

<span class="p-label--updated">Updated</span>
### Global navigation

Vanilla includes a simple navigation bar that you can add to the top of your
sites.
Expand Down Expand Up @@ -61,6 +61,23 @@ By default the sub-navigation menus are left-aligned with their parent, if you'd
View example of the sub-navigation pattern
</a>

### Side navigation

<span class="p-label--new">New</span>

Side navigation pattern can be used to provide more detailed navigation alongside your content.

It provides grouping of the links and nesting them up to three levels.

Current page in the side navigation should be highlighted by adding `is-active` class to
`p-side-navigation__link` element. If current active page is nested in the navigation
all relevant parent `p-side-navigation__link` or `p-side-navigation__text` elements
should be highlighted using `is-selected` class to give a better view on the hierarchy.

<a href="/docs/examples/patterns/side-navigation/docs" class="js-example">
View example of the side navigation pattern
</a>

### Import

To import just navigation or sub-navigation component into your project, copy snippets below and include it in your main Sass file.
Expand All @@ -74,6 +91,13 @@ To import just navigation or sub-navigation component into your project, copy sn
@include vf-p-subnav;
```

To import side navigation, copy snippet below:

```scss
@import 'patterns_side-navigation';
@include vf-p-side-navigation;
```

For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.

### Design
Expand Down

0 comments on commit a8dfd78

Please sign in to comment.