Add hub page pattern guidance

.eleventy.js

@@ -88,7 +88,8 @@ export default function (eleventyConfig) {
       figmaLink: data.figmaLink,
       vueLink: data.vueLink,
       mobile: data.mobile,
-      mobileHeader: data.mobileHeader
+      mobileHeader: data.mobileHeader,
+      hub: data.hub
     }
     return nunjucksEnv.render('example.njk', templateData)
   })

docs/_includes/layouts/partials/bottom-nav-native.njk

@@ -4,26 +4,50 @@
       <ul class="app-bottom-nav-native__list">
         <li class="app-bottom-nav-native__item">
           <a class="app-bottom-nav-native__link" href="#">
-            {{ nhsappIcon('home') }}
-            <span class="app-bottom-nav-native__label ">Home</span>
+            {% if hub === "Home" %}
+              {{ nhsappIcon('homeFilled') }}
+            {% else %}
+              {{ nhsappIcon('home') }}
+            {% endif %}
+            <span class="app-bottom-nav-native__label{% if hub === 'Home' %} app-bottom-nav-native__label--active{% endif %}">Home</span>
           </a>
         </li>
         <li class="app-bottom-nav-native__item">
           <a class="app-bottom-nav-native__link" href="#">
-            {{ nhsappIcon('crossFilled') }}    
-            <span class="app-bottom-nav-native__label app-bottom-nav-native__label--active">Services</span>
+            {% if hub === "Services" %}
+              {{ nhsappIcon('crossFilled') }}
+            {% else %}
+              {{ nhsappIcon('cross') }}
+            {% endif %}        
+            <span class="app-bottom-nav-native__label{% if hub === 'Services' %} app-bottom-nav-native__label--active{% endif %}">Services</span>
           </a>
         </li>
         <li class="app-bottom-nav-native__item">
           <a class="app-bottom-nav-native__link" href="#">
-            {{ nhsappIcon('heart') }}
-            <span class="app-bottom-nav-native__label ">Your health</span>
+            {% if hub === "Your health" %}
+              {{ nhsappIcon('heartFilled') }}
+            {% else %}
+              {{ nhsappIcon('heart') }}
+            {% endif %} 
+            <span class="app-bottom-nav-native__label{% if hub === 'Your health' %} app-bottom-nav-native__label--active{% endif %}">Your health</span>
           </a>
         </li>
         <li class="app-bottom-nav-native__item">
           <a class="app-bottom-nav-native__link" href="#">
-            {{ nhsappIcon('messages') }}
-            <span class="app-bottom-nav-native__label ">Messages</span>
+            {% if hub === "Messages" %}
+              {% if data['messages'] > 0 %}
+                {{ nhsappIcon('messagesUnreadFilled') }}
+              {% else %}
+                {{ nhsappIcon('messagesFilled') }}
+              {% endif %}
+            {% else %}
+              {% if data['messages'] > 0 %}
+                {{ nhsappIcon('messagesUnread') }}
+              {% else %}
+                {{ nhsappIcon('messages') }}
+              {% endif %}
+            {% endif %}
+            <span class="app-bottom-nav-native__label{% if hub === 'Messages' %} app-bottom-nav-native__label--active{% endif %}">Messages</span>
           </a>
         </li>
       </ul>

docs/examples/error-pages/problem-with-service.njk

@@ -1,6 +1,7 @@
 ---
 layout: layouts/example-full-page-mobile.njk
 mobile: true
+hub: Services
 title: Problem with services
 figmaLink: 
 vueLink: 

docs/examples/hub-pages/services.njk

@@ -0,0 +1,83 @@
+---
+layout: layouts/example-full-page-mobile.njk
+mobile: true
+hub: Services
+title: Services
+figmaLink: 
+vueLink: 
+---
+
+{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
+{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
+{% from "nhsapp/styles/section-heading/macro.njk" import nhsappSectionHeading %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-full">
+
+    <h1 class="nhsuk-u-margin-bottom-3">Services</h1>
+    <p class="nhsuk-u-margin-bottom-5">Get care and support to help you stay well.</p>
+
+    {{ nhsappSectionHeading({
+      headingText: "Your GP services"
+    }) }}
+
+    {{ nhsappCardGroup({
+      stacked: true,
+      cards: [
+        {
+          title: 'Request medicines',
+          href: '#'
+        },
+        {
+          title: 'Contact your GP surgery for a document or update',
+          href: '#'
+        },
+        {
+          title: 'Check for available GP appointments',
+          href: '#'
+        }
+      ]
+    }) }}
+
+    {{ nhsappSectionHeading({
+      headingText: "Other NHS services"
+    }) }}
+
+    {{ nhsappCardGroup({
+      stacked: true,
+      cards: [
+        {
+          title: 'Check if you need urgent medical help using 111 online',
+          href: '#'
+        },
+        {
+          title: 'Find NHS services near you',
+          href: '#'
+        }
+      ]
+    }) }}
+
+    {{ nhsappSectionHeading({
+      headingText: "Find health information"
+    }) }}
+
+    {{ nhsappCardGroup({
+        stacked: true,
+        cards: [
+          {
+            title: "Browse NHS health information",
+            href: "#"
+          },
+          {
+            title: "Browse NHS medicines information",
+            href: "#"
+          },
+          {
+            title: "Find COVID-19 guidance",
+            href: "#"
+          }
+        ]
+      })}}
+
+  </div>
+</div>

docs/examples/hub-pages/your-health.njk

@@ -0,0 +1,59 @@
+---
+layout: layouts/example-full-page-mobile.njk
+mobile: true
+hub: Your health
+title: Your health
+figmaLink: 
+vueLink: 
+---
+
+{% from "nhsapp/components/card/macro.njk" import nhsappCardGroup %}
+{% from "nhsapp/components/card/macro.njk" import nhsappCard %}
+{% from "nhsapp/styles/section-heading/macro.njk" import nhsappSectionHeading %}
+
+<div class="nhsuk-grid-row">
+  <div class="nhsuk-grid-column-full">
+
+    <h1 class="nhsuk-u-margin-bottom-3">Your health</h1>
+    <p class="nhsuk-u-margin-bottom-5">View your personal records and choices.</p>
+
+    {{ nhsappCardGroup({
+        stacked: true,
+        cards: [
+          {
+            title: "GP health record",
+            href: "#"
+          },
+          {
+            title: "View and manage prescriptions",
+            href: "/pages/your-health/prescriptions-p9"
+          },
+          {
+            title: "Upcoming and past appointments",
+            href: "/pages/your-health/upcoming-and-past-appointments-p9"
+          },
+          {
+            title: "Test results and imaging",
+            href: "#"
+          },
+          {
+            title: "COVID-19 vaccine record",
+            href: "#"
+          },
+          {
+            title: "NHS COVID Pass",
+            href: "#"
+          },
+          {
+            title: "Your health choices",
+            href: "/pages/your-health/your-health-choices-p9"
+          },
+          {
+            title: "Care plans",
+            href: "/pages/your-health/care-plans-p9"
+          }
+        ]
+      })}}
+
+  </div>
+</div>

docs/patterns/hub-page.md

@@ -0,0 +1,52 @@
+---
+layout: layouts/pattern.njk
+title: Hub page
+description: Hubs pages are the main menu pages in the NHS App. Each hub is a grouping of related links. From a hub, users can follow links to start particular journeys or move deeper into the app to lower menu pages (sub-hubs).
+backlogID: 69
+tags:
+  - pattern
+---
+
+{% example "hub-pages/your-health.njk" %}
+
+## How to use hub pages
+
+Hub pages are used at the highest level of the NHS App structure. They should always be accessible from the header or footer bar (the global navigation).
+
+### The structure of a hub page
+
+{% example "hub-pages/services.njk" %}
+
+#### Page heading
+
+This page heading is the name of the hub.
+
+#### Page description
+
+This short description is placed below the main heading. It gives users context about what each hub contains. On main hubs this text should be as concise as possible and fit into one line.
+
+#### Card links
+
+Use [card links](/components/card-links) takes users to a sub-hub or to the start of a specific journey.
+
+If a hub page includes a long list of card links (more than 5 is a good guide) you should consider using [section heading](/components/section-heading) to group card links together.
+
+This can help to divide and organise a page. It makes the page easier to scan and reduces the cognitive load on users. Research shows that users can be overwhelmed by long lists on NHS App pages.
+
+#### Back buttons
+
+Back buttons are not used on hub pages, as they are the starting point for different journeys. All journeys or sub-hubs accessed from a hub page will have a back button.
+
+## Adding journeys to hub pages
+
+The Navigation and Onboarding Team maintains and updates the hub pages. For help with adding journeys to hub pages, please contact the team.
+
+## Research
+
+In our research into hub labelling, users correctly understood that ‘Services’ relates to future care and support. ‘Your health’ was correctly associated with ongoing healthcare, health records and personal choices. Iterative adjustments were made to the hub labels throughout the research, including the transition from 'Medical Support' to 'Services’ based on user feedback.
+
+### Hub icons
+
+The hub icons on the header and footer bars were well recognised. The 'Your Health,' 'Messages,' 'Home,' and 'Account and Settings' icons were universally associated correctly by 100% of participants.
+
+However, the 'Services' icon displayed varied associations, with 60% linking it to 'Your Health,' 20% directly to 'Services,' 13% to 'Help and Support,' and 7% to 'Switch Profiles.'