From 54f7f4dc0872c2b74522f930afa108ccb9ddd06f Mon Sep 17 00:00:00 2001 From: Inna Atanasova Date: Fri, 18 Oct 2019 19:15:53 -0400 Subject: [PATCH 01/13] add new component Nested List, refactor Side Nav --- docs/_data/components.yml | 3 + .../sidebars/left-navigation-sidebar.yml | 4 + docs/pages/components/nested-list.md | 748 ++++++++++++++++++ docs/pages/components/side-navigation.md | 705 +++++++++++------ src/fundamental-styles.scss | 1 + src/nested-list.scss | 292 +++++++ src/side-nav.scss | 198 ++--- test/templates/index.njk | 2 +- test/templates/nested-list/index.njk | 0 9 files changed, 1558 insertions(+), 395 deletions(-) create mode 100644 docs/pages/components/nested-list.md create mode 100644 src/nested-list.scss create mode 100644 test/templates/nested-list/index.njk diff --git a/docs/_data/components.yml b/docs/_data/components.yml index d86a9c9ecc..f376d31aed 100644 --- a/docs/_data/components.yml +++ b/docs/_data/components.yml @@ -45,6 +45,9 @@ - title: Modal meta: modal + - title: Nested List + meta: nested-list + - title: Notification meta: notification diff --git a/docs/_data/sidebars/left-navigation-sidebar.yml b/docs/_data/sidebars/left-navigation-sidebar.yml index 32c0e0c07f..a1af57e3f8 100755 --- a/docs/_data/sidebars/left-navigation-sidebar.yml +++ b/docs/_data/sidebars/left-navigation-sidebar.yml @@ -172,6 +172,10 @@ entries: url: /components/multi-input.html output: web + - title: Nested List + url: /components/nested-list.html + output: web + - title: Notification url: /components/notification.html output: web diff --git a/docs/pages/components/nested-list.md b/docs/pages/components/nested-list.md new file mode 100644 index 0000000000..a66131f249 --- /dev/null +++ b/docs/pages/components/nested-list.md @@ -0,0 +1,748 @@ +--- +title: Nested List +id: nested-list +keywords: nested-list, nested, list +sidebar: left-navigation-sidebar +toc: false +permalink: components/nested-list.html +folder: components +summary: +--- + +{: .docs-intro} +Nested List represents a nested structure with up to 10 levels. + +# Nested List Without Icons +{% capture example-1 %} + +{% endcapture %} +{% include display-component.html component=example-1 %} + +

+ +# Nested List With Icons +{% capture example-2 %} + +{% endcapture %} +{% include display-component.html component=example-2 %} + +

+ +# Nested List With Icons Only in First-Level Items +{% capture example-3 %} + +{% endcapture %} +{% include display-component.html component=example-3 %} + +

+ +# Nested List With Group Headers +{% capture example-4 %} + +{% endcapture %} +{% include display-component.html component=example-4 %} + +

+ +# Nested List With Group Headers Compact Mode +{% capture example-5 %} + +{% endcapture %} +{% include display-component.html component=example-5 %} + +

+ +# Nested List Without Links +{% capture example-6 %} + +{% endcapture %} +{% include display-component.html component=example-6 %} + +

+ +# Right To Left Support +{% capture example-7 %} + +{% endcapture %} +{% include display-component.html component=example-7 %} \ No newline at end of file diff --git a/docs/pages/components/side-navigation.md b/docs/pages/components/side-navigation.md index 2f72d1d070..937c0cd55d 100644 --- a/docs/pages/components/side-navigation.md +++ b/docs/pages/components/side-navigation.md @@ -9,113 +9,178 @@ folder: components summary: --- -The left navigation can always display or expand/collapse using the menu icon within the global navigation. +The left navigation area can be used to display navigation structures with links that change the content in the main area. + +The side navigation consists of two container section: the Main Navigation Section (top-aligned) with links used to navigate within the user’s current work context, and Utility Section (bottom-aligned) that contains links to additional information. + {: .docs-intro} > {{ site.data.strings.headerDisclaimer }} -## Side Navigation with one level +## Side Navigation with one level - text-only, cozy mode +There is only one level of navigation; all further navigation is shown in the content area. + {% capture default %} {% endcapture %} {% include display-component.html component=default %}
-## Side navigation with titles -Use this to group navigation. Titles are not clickable. +## Side Navigation with one level - with icons, cozy mode {% capture default %} +{% endcapture %} +{% include display-component.html component=default %} + +
+ +## Side navigation with multiple levels - cozy mode +Use this when there is more than one level of hierarchy in the left navigation. The entries on the first level are just group headers(don't trigger navigation themselves). It's recommended to use up to two levels of navigation. For more levels of navigation, use the content area. + +{% capture default %} +