add nav and update homepage content

nhsuk · Sep 17, 2024 · 02231e9 · 02231e9
1 parent bb4f495
commit 02231e9
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 16 deletions.
diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -27,7 +27,7 @@
       {% endblock skiplink %}
 
       {% block header %}
-        {{ header({
+        <!--{{ header({
           service: {
             name: "App design system"
           },
@@ -36,7 +36,30 @@
           homeHref: baseUrl,
           classes: "app-header",
           ariaLabel: "NHS App design system homepage"
-        }) }}
+        }) }}-->
+        {{ header({
+          service: {
+            name: "App design system"
+          },
+          showNav: "true",
+          showSearch: "false",
+          classes: "app-header nhsuk-header--white-nav",
+          primaryLinks: [
+              {
+                url  : "/get-started/",
+                label : "Get started"
+              },
+              {
+                url : '/components/',
+                label : 'Components'
+              },
+              {
+                url  : '/community/',
+                label : 'Community'
+              }
+            ]
+          })
+        }}
       {% endblock %}
 
       {% block breadcrumb %}
@@ -55,14 +78,14 @@
       {% block footer %}
 
       {{ footer({
-        "links": [
+        links: [
           {
-            "URL": "/community/help-and-feedback/",
-            "label": "Help and feedback"
+            URL: "/community/help-and-feedback/",
+            label: "Help and feedback"
           },
           {
-            "URL": "https://github.com/nhsuk/nhsapp-frontend",
-            "label": "Code on Github"
+            URL: "https://github.com/nhsuk/nhsapp-frontend",
+            label: "Code on Github"
           }
         ]
       })}}

diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk
@@ -33,7 +33,7 @@
   <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-5">
     {{ title }}
   </h1>
-  <p class="nhsuk-body-l nhsuk-u-margin-bottom-7">{{ description }}</p>
+  <p class="nhsuk-u-margin-bottom-5">{{ description }}</p>
   {{ content | safe }}
   {% if tags and "component" in tags %}
     {% include "layouts/partials/feedback-section.njk" %}

diff --git a/docs/_includes/layouts/sidebar.njk b/docs/_includes/layouts/sidebar.njk
@@ -29,7 +29,7 @@
         {% else %}
           <hr class="nhsuk-u-margin-top-0">
           {% include "layouts/partials/get-help.njk" %}
-          <div class="nhsuk-u-padding-top-6"></div>
+          <div class="nhsuk-u-padding-top-3"></div>
         {% endif %}
       </div>
     </div>

diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss
@@ -16,6 +16,9 @@
 // Import all styles from the NHS App frontend library
 @import "src/all";
 
+// Brand colour
+$app-brand-color: #003087;
+
 // Import all styles specific for the design system docs
 @import "docs/assets/css/components/header";
 @import "docs/assets/css/components/hero";
@@ -78,3 +81,8 @@ pre {
   border-width: 2px;
   border-color: $color_nhsuk-grey-4;
 }
+
+// Footer border colour
+.nhsuk-footer-container {
+  border-color: $app-brand-color;
+}
diff --git a/docs/assets/css/components/_callout.scss b/docs/assets/css/components/_callout.scss
@@ -3,7 +3,7 @@
   @include nhsuk-responsive-margin(5, "bottom");
   @include nhsuk-responsive-padding(4);
 
-  border: nhsuk-spacing(1) solid $color_nhsuk-blue;
+  border: nhsuk-spacing(1) solid $app-brand-color;
 
   &__content {
     @include reading-width();

diff --git a/docs/assets/css/components/_header.scss b/docs/assets/css/components/_header.scss
@@ -1,6 +1,8 @@
 // Header overrides
 // Fixes service name placement and style
 .app-header {
+  background-color: $app-brand-color;
+
   .nhsuk-header__logo {
     max-width: 100%;
   }
@@ -39,6 +41,15 @@
       padding-left: 0;
     }
   }
+
+  .nhsuk-header__navigation-list {
+    gap: 32px;
+  }
+
+  .nhsuk-header__navigation-link {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 // Bump the border-bottom size up from 4px to 6px
@@ -58,4 +69,4 @@
 // Hide home nav link
 .nhsuk-header__navigation-item--home {
   display: none;
-}
+}
diff --git a/docs/assets/css/components/_hero.scss b/docs/assets/css/components/_hero.scss
@@ -1,6 +1,8 @@
 // Hero overrides
 // Reduces spacing on mobile screens
 .app-hero {
+  background-color: $app-brand-color;
+
   .nhsuk-hero__wrapper {
     @include mq($until: tablet) {
       padding-bottom: nhsuk-spacing(5);

diff --git a/docs/get-started/prototyping.md b/docs/get-started/prototyping.md
@@ -5,7 +5,7 @@ tags:
   - getStarted
 ---
 
-This guide explains how to create prototypes using the NHS App design system and [NHS prototype kit](https://nhsuk-prototype-kit.azurewebsites.net/docs).
+This guide explains how to create prototypes using the NHS App design system with the [NHS prototype kit](https://nhsuk-prototype-kit.azurewebsites.net/docs).
 
 You must follow the [NHS prototype kit setup guide](https://nhsuk-prototype-kit.azurewebsites.net/docs) first.
 

diff --git a/docs/index.njk b/docs/index.njk
@@ -11,10 +11,10 @@
   <section class="nhsuk-hero app-hero">
     <div class="nhsuk-width-container nhsuk-hero--border">
       <div class="nhsuk-grid-row">
-        <div class="nhsuk-grid-column-two-thirds">
+        <div class="nhsuk-grid-column-three-quarters">
           <div class="nhsuk-hero__wrapper">
-            <h1 class="nhsuk-u-margin-bottom-3">NHS App design system</h1>
-            <p class="nhsuk-body-l">Design, build, and deliver accessible and consistent services for the NHS App</p>
+            <h1 class="nhsuk-u-margin-bottom-3">Design and build accessible and consistent services</h1>
+            <p>Use the NHS App design system to learn from the work and experiences of others, contribute back into the design system to share your knowledge, and reuse as much as possible to avoid repeating what has already been done.</p>
             <a href="/get-started/" class="nhsuk-button nhsuk-button--reverse nhsapp-button nhsuk-u-margin-bottom-0">Get started</a>
           </div>
         </div>
@@ -46,7 +46,9 @@
               <h2>Components</h2>
               <p>Save time with reusable, accessible components.</p>
               <p><a href="/components/" class="nhsuk-link--no-visited-state">Browse components</a></p>
-              <hr class="nhsuk-section-break nhsuk-section-break--xl nhsuk-section-break--visible app-section-break">
+            </div>
+            <hr class="nhsuk-section-break nhsuk-section-break--xl nhsuk-section-break--visible app-section-break">
+            <div class="nhsuk-u-reading-width">
               <h2>Contributing</h2>
               <p>Anyone can contribute to the NHS App design system by proposing a new style, component, or pattern.</p>
               <p><a href="/community/" class="nhsuk-link--no-visited-state">How to contribute</a></p>