Add side navigation

.eleventy.js

@@ -1,3 +1,4 @@
+import path from 'path'
 import nunjucks from 'nunjucks'
 import sass from 'sass'
 import { EleventyHtmlBasePlugin } from '@11ty/eleventy'
@@ -23,7 +24,11 @@ export default function (eleventyConfig) {
   eleventyConfig.addTemplateFormats('scss')
   eleventyConfig.addExtension('scss', {
     outputFileExtension: 'css',
-    compile: async function (inputContent) {
+    compile: async function (inputContent, inputPath) {
+      let parsed = path.parse(inputPath)
+      if (parsed.name.startsWith('_')) {
+        return
+      }
       let result = sass.compileString(inputContent, {
         // Allow us to import scss files relative to the project root
         loadPaths: ['.']
@@ -34,6 +39,32 @@ export default function (eleventyConfig) {
     }
   })
 
+  eleventyConfig.addFilter(
+    'addActiveAttribute',
+    function (config, filePathStem) {
+      if (config.items) {
+        return {
+          ...config,
+          items: config.items.map((item) => ({
+            ...item,
+            active: filePathStem.indexOf(item.href) > -1
+          }))
+        }
+      } else if (config.sections) {
+        return {
+          ...config,
+          sections: config.sections.map((section) => ({
+            ...section,
+            items: section.items.map((item) => ({
+              ...item,
+              active: filePathStem.indexOf(item.href) > -1
+            }))
+          }))
+        }
+      }
+    }
+  )
+
   // We need this HtmlBase plugin for serving our docs on github pages at a subdirectory
   // https://www.11ty.dev/docs/plugins/html-base/
   eleventyConfig.addPlugin(EleventyHtmlBasePlugin)

docs/_includes/layouts/base.njk

@@ -28,11 +28,11 @@
     {% endblock %}
 
     {% block body %}
-      <div id="maincontent" class="nhsuk-width-container">
-        <main class="nhsuk-main-wrapper">
-          {% block content %}{% endblock %}
+      {% block content %}
+        <main class="app-prose-scope" role="main">
+          {{ content | safe }}
         </main>
-      </div>
+      {% endblock %}
     {% endblock body %}
     {% block footer %}{% endblock %}
   </body>

docs/_includes/layouts/component.njk

@@ -0,0 +1,60 @@
+{% extends "./base.njk" %}
+
+{%- from "./partials/side-navigation.njk" import appSideNavigation %}
+
+{% macro sideNavigation(config) %}
+  {% set config = config|addActiveAttribute(page.filePathStem | url) %}
+
+  {{ appSideNavigation(config) }}
+{% endmacro %}
+
+{% block content %}
+  <div class="nhsuk-width-container">
+    <div class="nhsuk-grid-row">
+      <div class="nhsuk-grid-column-one-third">    
+        {{ appSideNavigation({
+          classes: 'app-side-navigation--desktop nhsuk-u-padding-top-6',
+          sections: [
+            {
+              heading: {
+                text: "Components"
+              },
+              items: [
+              {
+                text: 'Card links',
+                href: ('/components/card-links' | url)
+              }
+              ]
+            }
+          ]
+        }) }}
+      </div>
+      <div class="nhsuk-grid-column-two-thirds">
+        <main id="main-content" class="nhsuk-main-wrapper" role="main">
+          <h1 class="nhsuk-heading-xl">
+            {% if not isIndex %}<span class="nhsuk-caption-xl">Components</span>{% endif %}
+            {{ title }}
+          </h1>
+          {{ content | safe }}
+
+          {{ appSideNavigation({
+            classes: 'app-side-navigation--mobile',
+            sections: [
+              {
+                heading: {
+                  text: "Components"
+                },
+                items: [
+                {
+                  text: 'Card links',
+                  href: ('/components/card-links' | url)
+                }
+                ]
+              }
+            ]
+          }) }}
+        </main>
+      </div>
+    </div>
+  </div>
+{% endblock %}

docs/_includes/layouts/partials/side-navigation.njk

@@ -0,0 +1,30 @@
+{% macro appSideNavigation(params) %}
+  <nav class="app-side-navigation {{- ' ' + params.classes if params.classes }}" {%- if (params.label) %} aria-label="{{ params.label }}"{% endif %} {% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {%- if params.sections %}
+      {%- for section in params.sections %}
+        <h{{ section.heading.headingLevel | default(4) }} class="app-side-navigation__title {{- ' ' + section.heading.classes if section.heading.classes }}"{% for attribute, value in section.heading.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+          {{- section.heading.html | safe if section.heading.html else section.heading.text -}}
+        </h{{ section.heading.headingLevel | default(4) }}>
+        <ul class="app-side-navigation__list">
+          {%- for item in section.items %}
+            <li class="app-side-navigation__item{% if item.active %} app-side-navigation__item--active{% endif %}"{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+              <a href="{{ item.href }}"{% if item.active %} aria-current="location"{% endif %}>
+                {{- item.html | safe if item.html else item.text -}}
+              </a>
+            </li>
+          {% endfor -%}
+        </ul>
+      {% endfor -%}
+    {% else %}
+      <ul class="app-side-navigation__list">
+        {%- for item in params.items %}
+          <li class="app-side-navigation__item{% if item.active %} app-side-navigation__item--active{% endif %}"{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+            <a href="{{ item.href }}"{% if item.active %} aria-current="location"{% endif %}>
+              {{- item.html | safe if item.html else item.text -}}
+            </a>
+          </li>
+        {% endfor -%}
+      </ul>
+    {% endif -%}
+  </nav>
+{% endmacro %}

docs/assets/css/app.scss

@@ -8,3 +8,25 @@
 
 // Import all styles from the NHS App frontend library
 @import "src/all.scss";
+
+// Import all styles specific for the design system docs
+@import "docs/assets/css/components/side-navigation";
+
+/**
+ * Custom style for the homepage
+ */
+
+.app-section {
+  @include nhsuk-responsive-padding(6, "bottom");
+  @include nhsuk-responsive-padding(6, "top");
+
+  @include mq($until: desktop) {
+    .nhsuk-grid-column-one-half:last-child {
+      padding-top: nhsuk-spacing(3);
+    }
+  }
+}
+
+.app-section--white {
+  background-color: $color_nhsuk-white;
+}

docs/assets/css/components/_side-navigation.scss

@@ -0,0 +1,85 @@
+/* ==========================================================================
+   #SIDE NAVIGATION
+   ========================================================================== */
+
+.app-side-navigation {
+  @include nhsuk-font($size: 16);
+
+  display: block;
+  margin-left: - nhsuk-spacing(2);
+  padding: nhsuk-spacing(4) 0 0;
+}
+
+.app-side-navigation__title {
+  @include nhsuk-font($size: 19);
+  color: $color_nhsuk-grey-2;
+  font-weight: normal;
+  margin: 0;
+  padding: nhsuk-spacing(2);
+  padding-left: nhsuk-spacing(2) + 4px;
+}
+
+.app-side-navigation__list {
+  list-style: none;
+  margin: 0 0 nhsuk-spacing(4);
+  padding: 0;
+}
+
+.app-side-navigation__item {
+  @include nhsuk-font($size: 16);
+
+  a,
+  a:link,
+  a:visited {
+    border-left: 4px solid transparent;
+    color: $nhsuk-link-color;
+    display: block;
+    padding: nhsuk-spacing(1) nhsuk-spacing(2);
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: $nhsuk-link-hover-color;
+  }
+
+  a:focus {
+    background-color: $nhsuk-focus-color;
+    border-color: $nhsuk-focus-text-color;
+    box-shadow: none;
+    color: $nhsuk-focus-text-color;
+    position: relative;
+  }
+}
+
+.app-side-navigation__item--active {
+  a:link,
+  a:visited {
+    border-color: $nhsuk-link-color;
+    color: $nhsuk-link-color;
+    font-weight: bold;
+  }
+
+  a:hover {
+    border-color: $nhsuk-link-hover-color;
+    color: $nhsuk-link-hover-color;
+  }
+
+  a:focus {
+    background-color: $nhsuk-focus-color;
+    border-color: $nhsuk-focus-text-color;
+    box-shadow: none;
+    color: $nhsuk-focus-text-color;
+  }
+}
+
+.app-side-navigation--desktop {
+  @include mq($until: desktop) {
+    display: none;
+  }
+}
+
+.app-side-navigation--mobile {
+  @include mq($from: desktop) {
+    display: none;
+  }
+}

docs/components/card-links.md

@@ -1,9 +1,9 @@
 ---
-layout: layouts/plain.njk
+layout: layouts/component.njk
 title: Card links
 ---
 
-Use card links to help users reach the next stage of their NHS App journey.
+<p class="nhsuk-body-l">Use card links to help users reach the next stage of their NHS App journey.</p>
 
 ## When to use
 

docs/components/index.md

@@ -1,7 +1,9 @@
 ---
-layout: layouts/plain.njk
+layout: layouts/component.njk
 isIndex: true
 title: Components
 ---
 
-[Card links](./card-links)
+Components are reusable elements of the user interface.
+
+Individual components can be used in multiple different pages, patterns and context.

docs/index.njk

@@ -1,6 +1,6 @@
 {% extends "layouts/base.njk" %}
 
-{% set title = "NHS App frontend" %}
+{% set title = "NHS App design system" %}
 
 {%- from 'hero/macro.njk' import hero -%}
 {%- from 'card/macro.njk' import card -%}
@@ -15,8 +15,16 @@
 {% endblock %}
 
 {% block content %}
-  {{ card({
-    title: "Components",
-    href: "./components/"
-  }) }}
+  <div class="app-section">
+    <div class="nhsuk-width-container">
+      <div class="nhsuk-grid-row">
+        <div class="nhsuk-grid-column-full">
+          {{ card({
+            title: "Components",
+            href: "./components/"
+          }) }}
+        </div>
+      </div>
+    </div>
+  </div>
 {% endblock %}