diff --git a/.eleventy.js b/.eleventy.js index 4b29544..c0fed9b 100644 --- a/.eleventy.js +++ b/.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) diff --git a/docs/_includes/layouts/sidebar.njk b/docs/_includes/layouts/sidebar.njk index 15f6388..3dc27fb 100644 --- a/docs/_includes/layouts/sidebar.njk +++ b/docs/_includes/layouts/sidebar.njk @@ -12,7 +12,7 @@
-
+
{% block main %} {{ content | safe }} {% endblock main %} diff --git a/docs/assets/css/_content.scss b/docs/assets/css/_content.scss new file mode 100644 index 0000000..9697002 --- /dev/null +++ b/docs/assets/css/_content.scss @@ -0,0 +1,6 @@ +.app-content { + // So images do not break the container + img { + max-width: 100%; + } +} diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss index b592709..368a5d3 100644 --- a/docs/assets/css/app.scss +++ b/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"; diff --git a/docs/assets/images/bottom-nav-2.png b/docs/assets/images/bottom-nav-2.png new file mode 100644 index 0000000..ff31513 Binary files /dev/null and b/docs/assets/images/bottom-nav-2.png differ diff --git a/docs/assets/images/bottom-nav.png b/docs/assets/images/bottom-nav.png new file mode 100644 index 0000000..10bd422 Binary files /dev/null and b/docs/assets/images/bottom-nav.png differ diff --git a/docs/assets/images/top-nav-2.png b/docs/assets/images/top-nav-2.png new file mode 100644 index 0000000..9034f54 Binary files /dev/null and b/docs/assets/images/top-nav-2.png differ diff --git a/docs/assets/images/top-nav.png b/docs/assets/images/top-nav.png new file mode 100644 index 0000000..678ee6c Binary files /dev/null and b/docs/assets/images/top-nav.png differ diff --git a/docs/components/bottom-navigation.md b/docs/components/bottom-navigation.md new file mode 100644 index 0000000..e53d34e --- /dev/null +++ b/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. diff --git a/docs/components/top-navigation.md b/docs/components/top-navigation.md new file mode 100644 index 0000000..5c5d04c --- /dev/null +++ b/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.