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: ['.'] diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk index 799e83b..e1f1d94 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..bbd021a --- /dev/null +++ b/docs/_includes/layouts/component.njk @@ -0,0 +1,46 @@ +{% extends "./base.njk" %} + +{%- from "./partials/side-navigation.njk" import appSideNavigation %} + +{% block content %} +
+
+
+ {{ appSideNavigation({ + currentPath: page.url | url, + classes: 'app-side-navigation--desktop nhsuk-u-padding-top-6', + sections: [ + { + heading: { + text: "Components" + }, + items: collections.component + } + ] + }) }} +
+
+
+

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

+ {{ content | safe }} + + {{ appSideNavigation({ + classes: 'app-side-navigation--mobile', + currentPath: page.url | url, + sections: [ + { + heading: { + text: "Components" + }, + items: collections.component + } + ] + }) }} +
+
+
+
+{% 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 new file mode 100644 index 0000000..0b31717 --- /dev/null +++ b/docs/_includes/layouts/partials/side-navigation.njk @@ -0,0 +1,22 @@ +{% macro appSideNavigation(params) %} + +{% endmacro %} diff --git a/docs/assets/css/app.scss b/docs/assets/css/app.scss index c07518b..486fb2d 100644 --- a/docs/assets/css/app.scss +++ b/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; +} diff --git a/docs/assets/css/components/_side-navigation.scss b/docs/assets/css/components/_side-navigation.scss new file mode 100644 index 0000000..e0ff3e2 --- /dev/null +++ b/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; + } +} diff --git a/docs/components/card-links.md b/docs/components/card-links.md index d49e916..dcfec3f 100644 --- a/docs/components/card-links.md +++ b/docs/components/card-links.md @@ -1,9 +1,11 @@ --- -layout: layouts/plain.njk +layout: layouts/component.njk title: Card links +tags: + - component --- -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 2bb24fc..d8259cc 100644 --- a/docs/components/index.md +++ b/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. 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 %}