From a8dfd787e47678d8dc45437e002726c650eb9573 Mon Sep 17 00:00:00 2001 From: Bartek Szopka Date: Wed, 11 Mar 2020 16:56:19 +0100 Subject: [PATCH] Add basic docs about side navigation --- templates/_layouts/docs.html | 2 +- templates/docs/component-status.md | 35 ++++++++++++++++----------- templates/docs/patterns/navigation.md | 26 +++++++++++++++++++- 3 files changed, 47 insertions(+), 16 deletions(-) diff --git a/templates/_layouts/docs.html b/templates/_layouts/docs.html index eed399edac..8393d4594e 100644 --- a/templates/_layouts/docs.html +++ b/templates/_layouts/docs.html @@ -88,7 +88,7 @@
  • Media object
  • Modal
  • Muted heading
    • -
  • Navigation
    Updated
    • +
  • Navigation
    New
  • Notifications
  • Pagination
  • Quotes
    • diff --git a/templates/docs/component-status.md b/templates/docs/component-status.md index 34e325926d..919edfd44b 100644 --- a/templates/docs/component-status.md +++ b/templates/docs/component-status.md @@ -16,23 +16,17 @@ When we add, make significant updates, or deprecate a component we update their Component - Status + Status Version - Notes + Notes - Navigation -
    Updated
    - 2.8.0 - New navigation classes (p-navigation__items, p-navigation__item, p-navigation__link) were added to replace existing (p-navigation__links, p-navigation__link, and classless <a>). - - - Navigation -
    Deprecated
    - 2.8.0 - Navigation classes p-navigation__links, p-navigation__link, and classless <a> are deprecated and will be removed in future release v3.0. Please use new class names (p-navigation__items, p-navigation__item, p-navigation__link) instead. + Side navigation +
    New
    + 2.9.0 + New side navigation component was added. @@ -43,12 +37,25 @@ When we add, make significant updates, or deprecate a component we update their Component - Status + Status Version - Notes + Notes + + + Navigation +
    Updated
    + 2.8.0 + New navigation classes (p-navigation__items, p-navigation__item, p-navigation__link) were added to replace existing (p-navigation__links, p-navigation__link, and classless <a>). + + + Navigation +
    Deprecated
    + 2.8.0 + Navigation classes p-navigation__links, p-navigation__link, and classless <a> are deprecated and will be removed in future release v3.0. Please use new class names (p-navigation__items, p-navigation__item, p-navigation__link) instead. + Contextual menu diff --git a/templates/docs/patterns/navigation.md b/templates/docs/patterns/navigation.md index a58c176547..168ceea28a 100644 --- a/templates/docs/patterns/navigation.md +++ b/templates/docs/patterns/navigation.md @@ -8,7 +8,7 @@ context:
    -Updated +### Global navigation Vanilla includes a simple navigation bar that you can add to the top of your sites. @@ -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 +### Side navigation + +New + +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. + + +View example of the side navigation pattern + + ### Import To import just navigation or sub-navigation component into your project, copy snippets below and include it in your main Sass file. @@ -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