Merge pull request #79 from nhsuk/native-component-guidance

Add top navigation and bottom navigation (native) components

.eleventy.js

@@ -28,6 +28,9 @@ export default function (eleventyConfig) {
   eleventyConfig.addWatchTarget('./src/')
   eleventyConfig.addWatchTarget('./docs/assets/')
 
+  // Add images to docs
+  eleventyConfig.addPassthroughCopy('docs/assets/images')
+
   // Add syntax highlighting to code blocks
   eleventyConfig.addPlugin(syntaxHighlight)
 

docs/_includes/layouts/sidebar.njk

@@ -12,7 +12,7 @@
       </div>
 
       <div class="nhsuk-grid-column-three-quarters">
-        <main role="main" id="maincontent" class="nhsuk-main-wrapper">
+        <main role="main" id="maincontent" class="nhsuk-main-wrapper app-content">
           {% block main %}
             {{ content | safe }}
           {% endblock main %}

docs/assets/css/_content.scss

@@ -0,0 +1,6 @@
+.app-content {
+  // So images do not break the container
+  img {
+    max-width: 100%;
+  }
+}

docs/assets/css/app.scss

@@ -15,5 +15,6 @@
 // Import all styles specific for the design system docs
 @import "docs/assets/css/components/side-navigation";
 @import "docs/assets/css/tabs.scss";
+@import "docs/assets/css/content.scss";
 @import "docs/assets/css/example.scss";
 @import "docs/assets/css/utilities.scss";

docs/components/bottom-navigation.md

@@ -0,0 +1,36 @@
+---
+layout: layouts/component.njk
+title: Bottom navigation
+description: The bottom navigation helps users return to the homepage or move to a hub page.
+backlogID: 518
+tags:
+  - component
+---
+
+![The bottom navigation menu. It contains four icons with text labels: Home, Services, Your health and Messages.](/assets/images/bottom-nav.png)
+
+## When to use
+
+The bottom navigation is visible at the bottom of most pages in the NHS App. The exception is when external pages open in a web browser overlay.
+
+The top navigation remains fixed in position as users scroll.
+
+## When not to use
+
+The bottom navigation is not part of the web browser version of the NHS App. The same links are contained within an NHS.UK header instead. The bottom navigation is also not visible when external content is opened in a browser overlay within the NHS App, for example if a user navigates to the help and support pages hosted on the NHS website.
+
+## How to use
+
+Each hub is represented by a text label and an icon. The text labels match the main heading on the respective hub page.
+
+![Details of the bottom navigation menu. Icons become highlighted when selected. An unread indicator can be placed over icons.](/assets/images/bottom-nav-2.png)
+
+## Accessibility
+
+Bear in mind that the bottom navigation can be easier for users to reach than the top navigation. This lends itself to links that users may need more frequently.
+
+## Research
+
+The ‘Home’ link was previously placed on the top navigation of the NHS App. In usability testing, participants found it easier to use the link when it was placed on the bottom navigation. They also noticed that this placement was more consistent with other popular apps.
+
+We also tested recognition of the hub page icons. The icons were well recognised. The use of text labels was needed to help users differentiate the ‘Services’ and ‘Your health’ icons.

docs/components/top-navigation.md

@@ -0,0 +1,36 @@
+---
+layout: layouts/component.njk
+title: Top navigation
+description: Use the top navigation to help users access ‘Help’ and ‘Account and settings’ links from anywhere in the app.   
+backlogID: 524
+tags:
+  - component
+---
+
+![The top navigation menu. There are two right-aligned icons: one is a question mark and the other is shaped like a person.](/assets/images/top-nav.png)
+
+## When to use
+
+The top navigation is visible at the top almost every screen within the main app journey. The exception is when external pages open in a web browser overlay.
+
+The top navigation remains fixed in position as users scroll.
+
+## When not to use
+
+On the web browser version of the NHS App, we use an [NHS.UK header](https://service-manual.nhs.uk/design-system/components/header) with text links, instead of the top navigation with icons.
+
+## How to use
+
+The top navigation includes a link to the NHS App help and support pages hosted on NHS.UK. This is a contextual link that takes users to a page relevant to their location in the app. For example, if a user is on a prescription screen, the help link will open a help page about prescriptions.
+
+The top also includes an ’Account and settings’ link. This opens the respective hub page.
+
+![Details of the top navigation menu. The question mark icon links to Help and Support. The person icon links to Account.](/assets/images/top-nav-2.png)
+
+## Accessibility
+
+The top navigation icons do not have text labels. They have aria labels which are announced by screen readers.
+
+## Research
+
+In our research, people recognised the meaning of the icons without the need for text labels.