From ade56c7898072662656b25c4a1a680420b6be8f3 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 10:35:07 +0100 Subject: [PATCH 01/14] add side navigation partial and css --- .../layouts/partials/side-navigation.njk | 28 ++++ docs/assets/css/app.scss | 4 + .../css/components/_side-navigation.scss | 125 ++++++++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 docs/_includes/layouts/partials/side-navigation.njk create mode 100644 docs/assets/css/components/_side-navigation.scss diff --git a/docs/_includes/layouts/partials/side-navigation.njk b/docs/_includes/layouts/partials/side-navigation.njk new file mode 100644 index 0000000..0808a56 --- /dev/null +++ b/docs/_includes/layouts/partials/side-navigation.njk @@ -0,0 +1,28 @@ + \ No newline at end of file diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss index c07518b..37def5d 100644 --- a/docs/assets/css/app.scss +++ b/docs/assets/css/app.scss @@ -8,3 +8,7 @@ // 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'; diff --git a/docs/assets/css/components/_side-navigation.scss b/docs/assets/css/components/_side-navigation.scss new file mode 100644 index 0000000..f2142d0 --- /dev/null +++ b/docs/assets/css/components/_side-navigation.scss @@ -0,0 +1,125 @@ +/* ========================================================================== + #SIDE NAVIGATION + ========================================================================== */ + + .app-side-navigation { + @include nhsuk-font($size: 16); + + @include mq($until: tablet) { + display: flex; + overflow-x: scroll; + } + + @include mq($from: tablet) { + display: block; + 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; + + @include mq($until: tablet) { + display: none; + } + + } + + .app-side-navigation__list { + list-style: none; + margin: 0; + padding: 0; + + @include mq($until: tablet) { + display: flex; + margin: 0; + white-space: nowrap; + } + + @include mq($from: tablet) { + margin-bottom: nhsuk-spacing(4); + } + } + + .app-side-navigation__item { + + @include mq($until: tablet) { + display: flex; + } + + a, + a:link, + a:visited { + background-color: inherit; + color: $nhsuk-link-color; + display: block; + text-decoration: none; + + @include mq($until: tablet) { + border-bottom: 4px solid transparent; + padding: nhsuk-spacing(3); + padding-bottom: nhsuk-spacing(3) - 4px; // Compensate for 4px border + } + + @include mq($from: tablet) { + background-color: inherit; + border-left: 4px solid transparent; + padding: nhsuk-spacing(2); + } + + + } + + a:hover { + color: $nhsuk-link-hover-color; + } + + a:focus { + color: $nhsuk-focus-text-color; + background-color: $nhsuk-focus-color; + border-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 { + color: $nhsuk-link-hover-color; + border-color: $nhsuk-link-hover-color; + } + + a:focus { + color: $nhsuk-focus-text-color; + background-color: $nhsuk-focus-color; + border-color: $nhsuk-focus-text-color; + } + + @include mq($from: tablet) { + a:link, + a:visited { + background-color: $color_nhsuk-grey-4; + } + + a:focus { + color: $nhsuk-focus-text-color; + background-color: $nhsuk-focus-color; + } + } + + + } \ No newline at end of file From 84dab63edbab75459afd16547694450d7eea7be6 Mon Sep 17 00:00:00 2001 From: Mike Monteith Date: Wed, 24 Apr 2024 10:57:52 +0100 Subject: [PATCH 02/14] Do not compile sass files that start with an underscore --- .eleventy.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/.eleventy.js b/.eleventy.js index 35e3dd1..1e08e46 100644 --- a/.eleventy.js +++ b/.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: ['.'] From e05af71ebefa1b92a5edf215d9067b230cd81953 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 10:35:07 +0100 Subject: [PATCH 03/14] add side navigation partial and css --- .../layouts/partials/side-navigation.njk | 28 ++++ docs/assets/css/app.scss | 4 + .../css/components/_side-navigation.scss | 125 ++++++++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 docs/_includes/layouts/partials/side-navigation.njk create mode 100644 docs/assets/css/components/_side-navigation.scss diff --git a/docs/_includes/layouts/partials/side-navigation.njk b/docs/_includes/layouts/partials/side-navigation.njk new file mode 100644 index 0000000..0808a56 --- /dev/null +++ b/docs/_includes/layouts/partials/side-navigation.njk @@ -0,0 +1,28 @@ + \ No newline at end of file diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss index c07518b..37def5d 100644 --- a/docs/assets/css/app.scss +++ b/docs/assets/css/app.scss @@ -8,3 +8,7 @@ // 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'; diff --git a/docs/assets/css/components/_side-navigation.scss b/docs/assets/css/components/_side-navigation.scss new file mode 100644 index 0000000..f2142d0 --- /dev/null +++ b/docs/assets/css/components/_side-navigation.scss @@ -0,0 +1,125 @@ +/* ========================================================================== + #SIDE NAVIGATION + ========================================================================== */ + + .app-side-navigation { + @include nhsuk-font($size: 16); + + @include mq($until: tablet) { + display: flex; + overflow-x: scroll; + } + + @include mq($from: tablet) { + display: block; + 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; + + @include mq($until: tablet) { + display: none; + } + + } + + .app-side-navigation__list { + list-style: none; + margin: 0; + padding: 0; + + @include mq($until: tablet) { + display: flex; + margin: 0; + white-space: nowrap; + } + + @include mq($from: tablet) { + margin-bottom: nhsuk-spacing(4); + } + } + + .app-side-navigation__item { + + @include mq($until: tablet) { + display: flex; + } + + a, + a:link, + a:visited { + background-color: inherit; + color: $nhsuk-link-color; + display: block; + text-decoration: none; + + @include mq($until: tablet) { + border-bottom: 4px solid transparent; + padding: nhsuk-spacing(3); + padding-bottom: nhsuk-spacing(3) - 4px; // Compensate for 4px border + } + + @include mq($from: tablet) { + background-color: inherit; + border-left: 4px solid transparent; + padding: nhsuk-spacing(2); + } + + + } + + a:hover { + color: $nhsuk-link-hover-color; + } + + a:focus { + color: $nhsuk-focus-text-color; + background-color: $nhsuk-focus-color; + border-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 { + color: $nhsuk-link-hover-color; + border-color: $nhsuk-link-hover-color; + } + + a:focus { + color: $nhsuk-focus-text-color; + background-color: $nhsuk-focus-color; + border-color: $nhsuk-focus-text-color; + } + + @include mq($from: tablet) { + a:link, + a:visited { + background-color: $color_nhsuk-grey-4; + } + + a:focus { + color: $nhsuk-focus-text-color; + background-color: $nhsuk-focus-color; + } + } + + + } \ No newline at end of file From 632260ca19c35060b9a4717187642ab4228c356f Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 11:44:48 +0100 Subject: [PATCH 04/14] create component page template and add side navigation macro --- docs/_includes/layouts/base.njk | 8 +-- docs/_includes/layouts/component.njk | 52 +++++++++++++++++++ docs/_includes/layouts/home.njk | 0 .../layouts/partials/side-navigation.njk | 42 ++++++++------- docs/assets/css/app.scss | 21 ++++++++ .../css/components/_side-navigation.scss | 16 +++--- docs/components/card-links.md | 2 +- docs/components/index.md | 2 +- docs/index.njk | 18 +++++-- 9 files changed, 120 insertions(+), 41 deletions(-) create mode 100644 docs/_includes/layouts/component.njk create mode 100644 docs/_includes/layouts/home.njk diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk index 799e83b..da5dec9 100644 --- a/docs/_includes/layouts/base.njk +++ b/docs/_includes/layouts/base.njk @@ -28,11 +28,11 @@ {% endblock %} {% block body %} -
-
- {% block content %}{% endblock %} + {% block content %} +
+ {{ content | safe }}
-
+ {% endblock %} {% endblock body %} {% block footer %}{% endblock %} diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk new file mode 100644 index 0000000..f959da7 --- /dev/null +++ b/docs/_includes/layouts/component.njk @@ -0,0 +1,52 @@ +{% extends "./base.njk" %} + +{%- from "./partials/side-navigation.njk" import appSideNavigation %} + +{% block content %} +
+
+
+ {{ appSideNavigation({ + classes: 'nhsuk-u-padding-top-6', + sections: [ + { + heading: { + text: "Components" + }, + items: [ + { + text: 'Card links', + href: ('/components/card-links' | url) + }, + { + text: 'Card links', + href: ('/components/card-links' | url) + }, + { + text: 'Card links', + href: ('/components/card-links' | url) + }, + { + text: 'Card links', + href: ('/components/card-links' | url) + } + ] + } + ] + }) }} + +
+ +
+
+

+ {% if not isIndex %}Components{% endif %} + {{ title }} +

+ {{ content | safe }} +
+ +
+
+
+{% endblock %} \ No newline at end of file diff --git a/docs/_includes/layouts/home.njk b/docs/_includes/layouts/home.njk new file mode 100644 index 0000000..e69de29 diff --git a/docs/_includes/layouts/partials/side-navigation.njk b/docs/_includes/layouts/partials/side-navigation.njk index 0808a56..0875ea0 100644 --- a/docs/_includes/layouts/partials/side-navigation.njk +++ b/docs/_includes/layouts/partials/side-navigation.njk @@ -1,11 +1,23 @@ - +{% endmacro %} \ No newline at end of file diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss index 37def5d..132e9ff 100644 --- a/docs/assets/css/app.scss +++ b/docs/assets/css/app.scss @@ -12,3 +12,24 @@ // 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; +} \ No newline at end of file diff --git a/docs/assets/css/components/_side-navigation.scss b/docs/assets/css/components/_side-navigation.scss index f2142d0..d91d202 100644 --- a/docs/assets/css/components/_side-navigation.scss +++ b/docs/assets/css/components/_side-navigation.scss @@ -48,6 +48,7 @@ } .app-side-navigation__item { + @include nhsuk-font($size: 16); @include mq($until: tablet) { display: flex; @@ -56,21 +57,19 @@ a, a:link, a:visited { - background-color: inherit; color: $nhsuk-link-color; display: block; text-decoration: none; @include mq($until: tablet) { border-bottom: 4px solid transparent; - padding: nhsuk-spacing(3); - padding-bottom: nhsuk-spacing(3) - 4px; // Compensate for 4px border + padding: nhsuk-spacing(2); + padding-bottom: nhsuk-spacing(2) - 4px; // Compensate for 4px border } @include mq($from: tablet) { - background-color: inherit; border-left: 4px solid transparent; - padding: nhsuk-spacing(2); + padding: nhsuk-spacing(1) nhsuk-spacing(2); } @@ -84,6 +83,7 @@ color: $nhsuk-focus-text-color; background-color: $nhsuk-focus-color; border-color: $nhsuk-focus-text-color; + box-shadow: none; position: relative; } @@ -107,13 +107,10 @@ color: $nhsuk-focus-text-color; background-color: $nhsuk-focus-color; border-color: $nhsuk-focus-text-color; + box-shadow: none; } @include mq($from: tablet) { - a:link, - a:visited { - background-color: $color_nhsuk-grey-4; - } a:focus { color: $nhsuk-focus-text-color; @@ -121,5 +118,4 @@ } } - } \ No newline at end of file diff --git a/docs/components/card-links.md b/docs/components/card-links.md index d49e916..46ea75b 100644 --- a/docs/components/card-links.md +++ b/docs/components/card-links.md @@ -1,5 +1,5 @@ --- -layout: layouts/plain.njk +layout: layouts/component.njk title: Card links --- diff --git a/docs/components/index.md b/docs/components/index.md index 2bb24fc..9d99215 100644 --- a/docs/components/index.md +++ b/docs/components/index.md @@ -1,5 +1,5 @@ --- -layout: layouts/plain.njk +layout: layouts/component.njk isIndex: true title: Components --- diff --git a/docs/index.njk b/docs/index.njk index 767722b..14e046d 100644 --- a/docs/index.njk +++ b/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/" - }) }} +
+
+
+
+ {{ card({ + title: "Components", + href: "./components/" + }) }} +
+
+
+
{% endblock %} From 6c8ee449b4463eb89cb8c932ff9e3bc0a79cc44f Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 11:57:28 +0100 Subject: [PATCH 05/14] add content to component index page --- docs/_includes/layouts/component.njk | 12 ------------ docs/components/card-links.md | 2 +- docs/components/index.md | 4 +++- 3 files changed, 4 insertions(+), 14 deletions(-) diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk index f959da7..4aaa48c 100644 --- a/docs/_includes/layouts/component.njk +++ b/docs/_includes/layouts/component.njk @@ -14,18 +14,6 @@ text: "Components" }, items: [ - { - text: 'Card links', - href: ('/components/card-links' | url) - }, - { - text: 'Card links', - href: ('/components/card-links' | url) - }, - { - text: 'Card links', - href: ('/components/card-links' | url) - }, { text: 'Card links', href: ('/components/card-links' | url) diff --git a/docs/components/card-links.md b/docs/components/card-links.md index 46ea75b..9c4e44b 100644 --- a/docs/components/card-links.md +++ b/docs/components/card-links.md @@ -3,7 +3,7 @@ layout: layouts/component.njk title: Card links --- -Use card links to help users reach the next stage of their NHS App journey. +

Use card links to help users reach the next stage of their NHS App journey.

## When to use diff --git a/docs/components/index.md b/docs/components/index.md index 9d99215..01af829 100644 --- a/docs/components/index.md +++ b/docs/components/index.md @@ -4,4 +4,6 @@ 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. \ No newline at end of file From 12561ef4c3c271a390dfda83b005815a3cfa72a8 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 12:03:32 +0100 Subject: [PATCH 06/14] add config for side navigation --- docs/_includes/layouts/component.njk | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk index 4aaa48c..ec4b2f8 100644 --- a/docs/_includes/layouts/component.njk +++ b/docs/_includes/layouts/component.njk @@ -2,6 +2,12 @@ {%- from "./partials/side-navigation.njk" import appSideNavigation %} +{% macro sideNavigation(config) %} + {% set config = config|addActiveAttribute(page.filePathStem | url) %} + + {{ appSideNavigation(config) }} +{% endmacro %} + {% block content %}
From 0013f3aada893276e2ba68a74b49f1810b009d55 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 12:21:41 +0100 Subject: [PATCH 07/14] adjust side navigation styling for mobile --- docs/_includes/layouts/component.njk | 68 +++--- .../css/components/_side-navigation.scss | 197 ++++++++---------- 2 files changed, 125 insertions(+), 140 deletions(-) diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk index ec4b2f8..7ea1255 100644 --- a/docs/_includes/layouts/component.njk +++ b/docs/_includes/layouts/component.njk @@ -11,36 +11,50 @@ {% block content %}
-
- {{ appSideNavigation({ - classes: 'nhsuk-u-padding-top-6', - sections: [ - { - heading: { - text: "Components" - }, - items: [ +
+ {{ appSideNavigation({ + classes: 'app-side-navigation--desktop nhsuk-u-padding-top-6', + sections: [ { - text: 'Card links', - href: ('/components/card-links' | url) + heading: { + text: "Components" + }, + items: [ + { + text: 'Card links', + href: ('/components/card-links' | url) + } + ] } - ] - } - ] - }) }} - -
+ ] + }) }} +
+
+
+

+ {% if not isIndex %}Components{% endif %} + {{ title }} +

+ {{ content | safe }} -
-
-

- {% if not isIndex %}Components{% endif %} - {{ title }} -

- {{ content | safe }} -
- -
+ {{ appSideNavigation({ + classes: 'app-side-navigation--mobile', + sections: [ + { + heading: { + text: "Components" + }, + items: [ + { + text: 'Card links', + href: ('/components/card-links' | url) + } + ] + } + ] + }) }} +
+
{% endblock %} \ No newline at end of file diff --git a/docs/assets/css/components/_side-navigation.scss b/docs/assets/css/components/_side-navigation.scss index d91d202..d78e7da 100644 --- a/docs/assets/css/components/_side-navigation.scss +++ b/docs/assets/css/components/_side-navigation.scss @@ -2,120 +2,91 @@ #SIDE NAVIGATION ========================================================================== */ - .app-side-navigation { - @include nhsuk-font($size: 16); - - @include mq($until: tablet) { - display: flex; - overflow-x: scroll; - } - - @include mq($from: tablet) { - display: block; - padding: nhsuk-spacing(4) 0 0; - } - +.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; + + @include mq($until: tablet) { + display: none; } - - .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; - - @include mq($until: tablet) { - display: none; - } - +} + +.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; } - - .app-side-navigation__list { - list-style: none; - margin: 0; - padding: 0; - - @include mq($until: tablet) { - display: flex; - margin: 0; - white-space: nowrap; - } - - @include mq($from: tablet) { - margin-bottom: nhsuk-spacing(4); - } + + 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 { - @include nhsuk-font($size: 16); - - @include mq($until: tablet) { - display: flex; - } - - a, - a:link, - a:visited { - color: $nhsuk-link-color; - display: block; - text-decoration: none; - - @include mq($until: tablet) { - border-bottom: 4px solid transparent; - padding: nhsuk-spacing(2); - padding-bottom: nhsuk-spacing(2) - 4px; // Compensate for 4px border - } - - @include mq($from: tablet) { - border-left: 4px solid transparent; - padding: nhsuk-spacing(1) nhsuk-spacing(2); - } - - - } - - a:hover { - color: $nhsuk-link-hover-color; - } - - a:focus { - color: $nhsuk-focus-text-color; - background-color: $nhsuk-focus-color; - border-color: $nhsuk-focus-text-color; - box-shadow: none; - 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: tablet) { + display: none; + } +} + +.app-side-navigation--mobile { + @include mq($from: tablet) { + display: none; } - - .app-side-navigation__item--active { - - a:link, - a:visited { - border-color: $nhsuk-link-color; - color: $nhsuk-link-color; - font-weight: bold; - } - - a:hover { - color: $nhsuk-link-hover-color; - border-color: $nhsuk-link-hover-color; - } - - a:focus { - color: $nhsuk-focus-text-color; - background-color: $nhsuk-focus-color; - border-color: $nhsuk-focus-text-color; - box-shadow: none; - } - - @include mq($from: tablet) { - - a:focus { - color: $nhsuk-focus-text-color; - background-color: $nhsuk-focus-color; - } - } - - } \ No newline at end of file +} \ No newline at end of file From 210cfe70c4f92dadd40d0d4ac6526e898a935cb8 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 12:35:14 +0100 Subject: [PATCH 08/14] update side nav to change on desktop breakpoint --- docs/assets/css/components/_side-navigation.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/docs/assets/css/components/_side-navigation.scss b/docs/assets/css/components/_side-navigation.scss index d78e7da..1218852 100644 --- a/docs/assets/css/components/_side-navigation.scss +++ b/docs/assets/css/components/_side-navigation.scss @@ -17,10 +17,6 @@ margin: 0; padding: nhsuk-spacing(2); padding-left: nhsuk-spacing(2) + 4px; - - @include mq($until: tablet) { - display: none; - } } .app-side-navigation__list { @@ -80,13 +76,13 @@ } .app-side-navigation--desktop { - @include mq($until: tablet) { + @include mq($until: desktop) { display: none; } } .app-side-navigation--mobile { - @include mq($from: tablet) { + @include mq($from: desktop) { display: none; } } \ No newline at end of file From 410a6f6378815c4b5097ae104bd233b64135dd08 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 13:17:13 +0100 Subject: [PATCH 09/14] lint code --- docs/assets/css/app.scss | 13 +++++-------- docs/assets/css/components/_side-navigation.scss | 7 ++----- docs/components/index.md | 4 ++-- 3 files changed, 9 insertions(+), 15 deletions(-) diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss index 132e9ff..486fb2d 100644 --- a/docs/assets/css/app.scss +++ b/docs/assets/css/app.scss @@ -9,27 +9,24 @@ // 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'; +@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'); +.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; -} \ No newline at end of file +} diff --git a/docs/assets/css/components/_side-navigation.scss b/docs/assets/css/components/_side-navigation.scss index 1218852..e0ff3e2 100644 --- a/docs/assets/css/components/_side-navigation.scss +++ b/docs/assets/css/components/_side-navigation.scss @@ -22,7 +22,7 @@ .app-side-navigation__list { list-style: none; margin: 0 0 nhsuk-spacing(4); - padding: 0; + padding: 0; } .app-side-navigation__item { @@ -49,11 +49,9 @@ color: $nhsuk-focus-text-color; position: relative; } - } .app-side-navigation__item--active { - a:link, a:visited { border-color: $nhsuk-link-color; @@ -72,7 +70,6 @@ box-shadow: none; color: $nhsuk-focus-text-color; } - } .app-side-navigation--desktop { @@ -85,4 +82,4 @@ @include mq($from: desktop) { display: none; } -} \ No newline at end of file +} diff --git a/docs/components/index.md b/docs/components/index.md index 01af829..d8259cc 100644 --- a/docs/components/index.md +++ b/docs/components/index.md @@ -4,6 +4,6 @@ isIndex: true title: Components --- -Components are reusable elements of the user interface. +Components are reusable elements of the user interface. -Individual components can be used in multiple different pages, patterns and context. \ No newline at end of file +Individual components can be used in multiple different pages, patterns and context. From 87d213742dd3897d7dddbc657adcfcd08a8b26e2 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 13:24:26 +0100 Subject: [PATCH 10/14] add eleventy config to add active class to nav items --- .eleventy.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/.eleventy.js b/.eleventy.js index 1e08e46..aebb822 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -39,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) From eced23dff84462ea30ab7f04f43e04c83871cec9 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 13:25:46 +0100 Subject: [PATCH 11/14] lint code --- .eleventy.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index aebb822..12a53d8 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -40,16 +40,16 @@ export default function (eleventyConfig) { }) eleventyConfig.addFilter( - "addActiveAttribute", + 'addActiveAttribute', function (config, filePathStem) { if (config.items) { return { ...config, items: config.items.map((item) => ({ ...item, - active: filePathStem.indexOf(item.href) > -1, - })), - }; + active: filePathStem.indexOf(item.href) > -1 + })) + } } else if (config.sections) { return { ...config, @@ -57,13 +57,13 @@ export default function (eleventyConfig) { ...section, items: section.items.map((item) => ({ ...item, - active: filePathStem.indexOf(item.href) > -1, - })), - })), - }; + 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/ From bf19f6505a5a6a1d34c1affda57f7bb1f521a4b0 Mon Sep 17 00:00:00 2001 From: Dave Hunter Date: Wed, 24 Apr 2024 13:48:43 +0100 Subject: [PATCH 12/14] remove home layout --- docs/_includes/layouts/home.njk | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 docs/_includes/layouts/home.njk diff --git a/docs/_includes/layouts/home.njk b/docs/_includes/layouts/home.njk deleted file mode 100644 index e69de29..0000000 From 3d54c54f8c9928bfb232089ef3fcd1879a95dc3b Mon Sep 17 00:00:00 2001 From: Mike Monteith Date: Mon, 29 Apr 2024 11:05:23 +0100 Subject: [PATCH 13/14] Use eleventy collections for sidebar nav Instead of manually creating a list of pages for the sidebar navigation, we can use elevent'y collection feature. Any page with the "component" tag will show up in the component sidebar nav Also some refactoring to simplify the "active" logic. --- .eleventy.js | 26 ------------------- docs/_includes/layouts/component.njk | 26 +++++-------------- .../layouts/partials/side-navigation-item.njk | 7 +++++ .../layouts/partials/side-navigation.njk | 14 +++------- docs/components/card-links.md | 2 ++ 5 files changed, 18 insertions(+), 57 deletions(-) create mode 100644 docs/_includes/layouts/partials/side-navigation-item.njk diff --git a/.eleventy.js b/.eleventy.js index 12a53d8..1e08e46 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -39,32 +39,6 @@ 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) diff --git a/docs/_includes/layouts/component.njk b/docs/_includes/layouts/component.njk index 7ea1255..bbd021a 100644 --- a/docs/_includes/layouts/component.njk +++ b/docs/_includes/layouts/component.njk @@ -2,29 +2,19 @@ {%- from "./partials/side-navigation.njk" import appSideNavigation %} -{% macro sideNavigation(config) %} - {% set config = config|addActiveAttribute(page.filePathStem | url) %} - - {{ appSideNavigation(config) }} -{% endmacro %} - {% block content %}
-
+
{{ appSideNavigation({ + currentPath: page.url | url, classes: 'app-side-navigation--desktop nhsuk-u-padding-top-6', sections: [ { heading: { text: "Components" }, - items: [ - { - text: 'Card links', - href: ('/components/card-links' | url) - } - ] + items: collections.component } ] }) }} @@ -39,17 +29,13 @@ {{ appSideNavigation({ classes: 'app-side-navigation--mobile', + currentPath: page.url | url, sections: [ { heading: { text: "Components" }, - items: [ - { - text: 'Card links', - href: ('/components/card-links' | url) - } - ] + items: collections.component } ] }) }} @@ -57,4 +43,4 @@
-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/docs/_includes/layouts/partials/side-navigation-item.njk b/docs/_includes/layouts/partials/side-navigation-item.njk new file mode 100644 index 0000000..2040875 --- /dev/null +++ b/docs/_includes/layouts/partials/side-navigation-item.njk @@ -0,0 +1,7 @@ +{% set active = item.url === params.currentPath %} + +
  • + + {{- item.data.title -}} + +
    • diff --git a/docs/_includes/layouts/partials/side-navigation.njk b/docs/_includes/layouts/partials/side-navigation.njk index 0875ea0..0b31717 100644 --- a/docs/_includes/layouts/partials/side-navigation.njk +++ b/docs/_includes/layouts/partials/side-navigation.njk @@ -7,24 +7,16 @@ {% endfor -%} {% else %} {% endif -%} -{% endmacro %} \ No newline at end of file +{% endmacro %} diff --git a/docs/components/card-links.md b/docs/components/card-links.md index 9c4e44b..dcfec3f 100644 --- a/docs/components/card-links.md +++ b/docs/components/card-links.md @@ -1,6 +1,8 @@ --- layout: layouts/component.njk title: Card links +tags: + - component ---

    Use card links to help users reach the next stage of their NHS App journey.

    From bfe04e937b9cf6977ecbd50e8e0a2b1441f4b05b Mon Sep 17 00:00:00 2001 From: Mike Monteith Date: Mon, 29 Apr 2024 11:34:52 +0100 Subject: [PATCH 14/14] Remove unused app-prose-scope class --- docs/_includes/layouts/base.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk index da5dec9..e1f1d94 100644 --- a/docs/_includes/layouts/base.njk +++ b/docs/_includes/layouts/base.njk @@ -29,7 +29,7 @@ {% block body %} {% block content %} -
    +
    {{ content | safe }}
    {% endblock %}