Site updates (#150)

Added: - a get started section - a contribution section - a what's new section - main navigation
nhsuk · Oct 8, 2024 · 02dc468 · 02dc468
1 parent 0f1158a
commit 02dc468
Show file tree

Hide file tree

Showing 33 changed files with 524 additions and 167 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -35,6 +35,11 @@ export default function (eleventyConfig) {
   // Add images to docs
   eleventyConfig.addPassthroughCopy('docs/assets/images')
 
+  // Add NHSUK frontend JS components to docs
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/nhsuk-frontend/packages': 'nhsuk-frontend'
+  })
+
   // Add syntax highlighting to code blocks
   eleventyConfig.addPlugin(syntaxHighlight)
 

diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
@@ -1,7 +1,7 @@
-{%- from 'header/macro.njk' import header -%}
-{%- from 'footer/macro.njk' import footer -%}
+{% from 'header/macro.njk' import header %}
+{% from 'footer/macro.njk' import footer %}
 {% from 'breadcrumb/macro.njk' import breadcrumb %}
-{%- from 'skip-link/macro.njk' import skipLink -%}
+{% from 'skip-link/macro.njk' import skipLink %}
 
 <!DOCTYPE html>
 <html lang="en">
@@ -18,6 +18,9 @@
     {% block head %}{% endblock %}
   </head>
   <body>
+    <script>
+      document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+    </script>
     {% block body %}
       {% block skiplink %}
         {{ skipLink({
@@ -28,15 +31,29 @@
 
       {% block header %}
         {{ header({
-        "service": {
-            "name": "App design resources"
+          service: {
+            name: "App design system"
           },
-          "showNav": "false",
-          "showSearch": "false",
-          "homeHref": baseUrl,
-          "classes": "app-header",
-          "ariaLabel": "NHS App design resources homepage"
-        }) }}
+          showNav: "true",
+          showSearch: "false",
+          homeHref: baseUrl,
+          classes: "app-header",
+          primaryLinks: [
+              {
+                url  : "/get-started/",
+                label : "Get started"
+              },
+              {
+                url : '/components/',
+                label : 'Components'
+              },
+              {
+                url  : '/community/',
+                label : 'Community'
+              }
+            ]
+          })
+        }}
       {% endblock %}
 
       {% block breadcrumb %}
@@ -55,19 +72,24 @@
       {% block footer %}
 
       {{ footer({
-        "links": [
+        links: [
           {
-            "URL": "/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"
           }
         ]
       })}}
       {% endblock %}
 
     {% endblock body %}
+    <script type="module">
+      import initHeader from '/nhsuk-frontend/components/header/header.js'
+
+      initHeader()
+    </script>
   </body>
 </html>
diff --git a/docs/_includes/layouts/community.njk b/docs/_includes/layouts/community.njk
@@ -0,0 +1,52 @@
+{% extends "./sidebar.njk" %}
+
+{%- from "./partials/side-navigation.njk" import appSideNavigation %}
+
+{% block breadcrumb %}
+  {% if title === "Community" %}
+    {{ breadcrumb({
+      href: "/",
+      text: "Home"
+    }) }}
+  {% else %}
+    {{ breadcrumb({
+      items: [
+        {
+          href: "/",
+          text: "Home"
+        }
+      ],
+      href: "/community",
+      text: "Community"
+    }) }}
+  {% endif %}
+{% endblock %}
+
+{% set sidebar %}
+  {{ appSideNavigation({
+    label: 'Contributing and support',
+    currentPath: page.url,
+    sections: [
+      {
+        heading: {
+          text: 'Contributing'
+        },
+        items: collections.contribution | sort(attribute="data.title")
+      },
+      {
+        heading: {
+          text: 'Support'
+        },
+        items: collections.community | sort(attribute="data.title")
+      }
+    ]
+  }) }}
+{% endset %}
+
+{% block main %}
+  <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-5">
+    {{ title }}
+  </h1>
+  <p class="nhsuk-u-margin-bottom-5">{{ description }}</p>
+  {{ content | safe }}
+{% endblock %}
diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk
@@ -3,7 +3,7 @@
 {%- from "./partials/side-navigation.njk" import appSideNavigation %}
 
 {% block breadcrumb %}
-  {% if title === "NHS App design components" %}
+  {% if title === "Components" %}
     {{ breadcrumb({
       href: "/",
       text: "Home"
@@ -24,24 +24,28 @@
 
 {% set sidebar %}
   {{ appSideNavigation({
+    label: 'Components',
     currentPath: page.url,
-    items: collections.component | sort(attribute="data.title")
-  }) }}
-  {{ appSideNavigation({
-    currentPath: page.url,
-    items: collections.componentGuidance | sort(attribute="data.title"),
-    classes: 'app-side-navigation--section'
+    sections: [
+      {
+        heading: {
+          text: 'Components'
+        },
+        items: collections.component | sort(attribute="data.title")
+      }
+    ]
   }) }}
 {% endset %}
 
 {% block main %}
   <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 "./partials/feedback-section.njk" %}
+    {% include "layouts/partials/feedback-section.njk" %}
   {% else %}
   {% endif %}
+
 {% endblock %}
diff --git a/docs/_includes/layouts/get-started.njk b/docs/_includes/layouts/get-started.njk
@@ -0,0 +1,45 @@
+{% extends "./sidebar.njk" %}
+
+{%- from "./partials/side-navigation.njk" import appSideNavigation %}
+
+{% block breadcrumb %}
+  {% if title === "Get started" %}
+    {{ breadcrumb({
+      href: "/",
+      text: "Home"
+    }) }}
+  {% else %}
+    {{ breadcrumb({
+      items: [
+        {
+          href: "/",
+          text: "Home"
+        }
+      ],
+      href: "/get-started",
+      text: "Get started"
+    }) }}
+  {% endif %}
+{% endblock %}
+
+{% set sidebar %}
+  {{ appSideNavigation({
+    label: 'How we work',
+    currentPath: page.url,
+    sections: [
+      {
+        heading: {
+          text: 'How we work'
+        },
+        items: collections.getStarted
+      }
+    ]
+  }) }}
+{% endset %}
+
+{% block main %}
+  <h1 class="nhsuk-heading-xl nhsuk-u-margin-bottom-7">
+    {{ title }}
+  </h1>
+  {{ content | safe }}
+{% endblock %}
diff --git a/docs/_includes/layouts/partials/feedback-section.njk b/docs/_includes/layouts/partials/feedback-section.njk
@@ -1,4 +1,4 @@
 <h2>Help improve this component</h2>
 <p>If you have used or researched this component, please let us know what you found so we can make it better for everyone.</p> 
 <p><a href="https://github.com/nhsuk/nhsapp-frontend/issues/{{ backlogID }}">Discuss '{{ title }}'  on GitHub</a> where you can share anything you think might be useful.</p>
-<p>You can also <a href="/help-and-feedback/">share feedback with us on Slack</a>.</p>
+<p>You can also <a href="/community/help-and-feedback/">share feedback with us on Slack</a>.</p>
diff --git a/docs/_includes/layouts/partials/get-help.njk b/docs/_includes/layouts/partials/get-help.njk
@@ -0,0 +1,6 @@
+<div class="app-callout">
+  <div class="app-callout__content">
+    <h2 class="nhsuk-heading-m">Get help</h2>
+    <p>The NHS App design system team provides support for users of the NHS App design system. <a href="/community/help-and-feedback/">Contact us</a> to ask for help.</p>
+  </div>
+</div>
diff --git a/docs/_includes/layouts/sidebar.njk b/docs/_includes/layouts/sidebar.njk
@@ -24,6 +24,13 @@
             {{ sidebar | safe }}
           </div>
         {% endblock %}
+
+        {% if title === "Help and feedback" %}
+        {% else %}
+          <hr class="nhsuk-u-margin-top-0">
+          {% include "layouts/partials/get-help.njk" %}
+          <div class="nhsuk-u-padding-top-3"></div>
+        {% endif %}
       </div>
     </div>
   </div>

diff --git a/docs/assets/css/_content.scss b/docs/assets/css/_content.scss
@@ -1,6 +1,6 @@
 .app-content {
-  // So images do not break the container
   img {
-    max-width: 100%;
+    border: nhsuk-spacing(1) solid $app-img-border-color;
+    max-width: 100%; // So images do not break the container
   }
 }
diff --git a/docs/assets/css/_example.scss b/docs/assets/css/_example.scss
@@ -88,3 +88,11 @@ pre[class*="language-"] {
     color: $nhsuk-focus-text-color;
   }
 }
+
+code:not([class*="language-"]) {
+  padding: 0 4px;
+  color: #c62950;
+  background-color: white;
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss
@@ -5,6 +5,7 @@
 @import "node_modules/nhsuk-frontend/packages/components/breadcrumb/breadcrumb";
 @import "node_modules/nhsuk-frontend/packages/components/skip-link/skip-link";
 @import "node_modules/nhsuk-frontend/packages/components/header/header";
+@import "node_modules/nhsuk-frontend/packages/components/header/header-service";
 @import "node_modules/nhsuk-frontend/packages/components/footer/footer";
 @import "node_modules/nhsuk-frontend/packages/components/hero/hero";
 @import "node_modules/nhsuk-frontend/packages/components/tabs/tabs";
@@ -16,10 +17,15 @@
 // Import all styles from the NHS App frontend library
 @import "src/all";
 
+// Colours
+$app-brand-color: $color_nhsuk-blue;
+$app-img-border-color: #d7e5ef;
+
 // Import all styles specific for the design system docs
 @import "docs/assets/css/components/header";
 @import "docs/assets/css/components/hero";
 @import "docs/assets/css/components/side-navigation";
+@import "docs/assets/css/components/callout";
 @import "docs/assets/css/tabs";
 @import "docs/assets/css/content";
 @import "docs/assets/css/example";
@@ -28,7 +34,8 @@
 // Add correct spacing around code highlighter and content
 pre {
   + p,
-  + li {
+  + ol,
+  + ul {
     @include nhsuk-responsive-padding(4, "top");
   }
 
@@ -48,3 +55,37 @@ pre {
     word-break: break-word;
   }
 }
+
+// Frontend button colour overrides
+.nhsuk-button--reverse {
+  color: $color_nhsuk-black;
+
+  &:visited {
+    color: $color_nhsuk-black;
+  }
+}
+
+// Home page section
+.app-section {
+  :last-child {
+    margin-bottom: 0;
+  }
+
+  &--white {
+    background-color: white;
+  }
+
+  &--with-bottom-border {
+    border-bottom: 2px solid $color_nhsuk-grey-4;
+  }
+}
+
+.app-section-break {
+  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
@@ -0,0 +1,15 @@
+// Custom component for the NHS App deign system documentation
+.app-callout {
+  @include nhsuk-responsive-margin(5, "bottom");
+  @include nhsuk-responsive-padding(4);
+
+  border: nhsuk-spacing(1) solid $app-brand-color;
+
+  &__content {
+    @include reading-width();
+
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+}