+
# HM Land Registry Design System
This repository contains the code for the GOV.UK Design System website. To find the code we provide for reuse by services, go to the [govuk-frontend repository](https://github.com/alphagov/govuk-frontend).
@@ -13,7 +15,7 @@ If you're an external contributor make sure to [fork this project first](https:/
### Clone repository
```
-git clone git@github.com:LandRegistry/hmlr-design-system-2.git # or clone your own fork
+git clone git@github.com:LandRegistry/hmlr-design-system.git # or clone your own fork
cd govuk-design-system
```
@@ -54,9 +56,9 @@ npm run lint
[stylelint]: https://github.com/stylelint/stylelint
-## GOV.UK Frontend packages
+## Frontend packages
-Design System consumes the [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) package via [NPM](https://www.npmjs.com/).
+Design System consumes the [GOV.UK Frontend](https://github.com/alphagov/govuk-frontend) and the [HMLR Frontend](https://github.com/LandRegistry/hmlr-frontend) packages via [NPM](https://www.npmjs.com/).
This is defined in the [package.json](package.json) file.
--------------------
@@ -72,7 +74,7 @@ When changes are pushed to GitHub, [Github Actions][github-actions] will:
If any of these fail, this will be reported in the GitHub status checks
interface.
-[github-actions]: https://github.com/LandRegistry/hmlr-design-system-2/actions
+[github-actions]: https://github.com/LandRegistry/hmlr-design-system/actions
## Deployment
@@ -83,7 +85,7 @@ interface.
GDS is an advocate of responsible vulnerability disclosure. If you’ve found a vulnerability, we would like to know so we can fix it.
-To learn how to report a security vulnerability, [see our security policy](https://github.com/LandRegistry/hmlr-design-system-2/security/policy).
+To learn how to report a security vulnerability, [see our security policy](https://github.com/LandRegistry/hmlr-design-system/security/policy).
## Contributing
diff --git a/config/paths.json b/config/paths.json
index 6fd592cad2..4705d6b186 100644
--- a/config/paths.json
+++ b/config/paths.json
@@ -5,6 +5,8 @@
"nodemodules": "node_modules/",
"govukfrontend": "node_modules/govuk-frontend/",
"govukfrontendcomponents": "node_modules/govuk-frontend/govuk/components/",
+ "hmlrfrontend": "node_modules/@hmlr/frontend/",
+ "hmlrfrontendcomponents": "node_modules/@hmlr/frontend/hmlr/components/",
"iframeresizer": "node_modules/iframe-resizer/",
"clipboard": "node_modules/clipboard/dist/",
"source": "src/",
diff --git a/docs/deployment/production.md b/docs/deployment/production.md
index 5514c11ce0..db04bec6b1 100644
--- a/docs/deployment/production.md
+++ b/docs/deployment/production.md
@@ -122,7 +122,7 @@ trailing-slashed URLs, but decided against it because:
- other parts of GOV.UK's infrastructure (such as their mirroring) make
assumptions based on the lack of a trailing slash and relative URLs.
-[github-actions]: https://github.com/LandRegistry/hmlr-design-system-2/actions
+[github-actions]: https://github.com/LandRegistry/hmlr-design-system/actions
[paas]: https://www.cloud.service.gov.uk/
[nginx-bp]: https://github.com/cloudfoundry/nginx-buildpack
[govuk-dns-config]: https://github.com/alphagov/govuk-dns-config/blob/master/service.gov.uk.yaml
diff --git a/docs/deployment/redirects.md b/docs/deployment/redirects.md
index 5c74b910c3..a8f7ede830 100644
--- a/docs/deployment/redirects.md
+++ b/docs/deployment/redirects.md
@@ -14,4 +14,4 @@ buildpack to redirects any requests to the service domain.
This app was deployed manually using the CloudFoundry command line tools.
-[app]: https://github.com/LandRegistry/hmlr-design-system-2-redirect
+[app]: https://github.com/LandRegistry/hmlr-design-system-redirect
diff --git a/docs/logs.md b/docs/logs.md
index 40de3255ee..620f7ef357 100644
--- a/docs/logs.md
+++ b/docs/logs.md
@@ -23,7 +23,7 @@ You'll then need to ask the technical lead on the GOV.UK Design System team to g
## How we transform logs with Logstash Filters
-The configuration is based on the [GOV.UK PaaS setup instructions](https://docs.cloud.service.gov.uk/monitoring_apps.html#configure-logstash-filters), see [git history for updates](https://github.com/LandRegistry/hmlr-design-system-2/commits/main/docs/logs.md).
+The configuration is based on the [GOV.UK PaaS setup instructions](https://docs.cloud.service.gov.uk/monitoring_apps.html#configure-logstash-filters), see [git history for updates](https://github.com/LandRegistry/hmlr-design-system/commits/main/docs/logs.md).
**We use this file as version control for the Logit Filters for our stack. Please make sure to update the below code snippet in this file whenever changing Filters. We recommend pairing on updating filters as they are easy to break.**
diff --git a/lib/get-macro-options/index.js b/lib/get-macro-options/index.js
index 54cea5c7ad..652ec8aa6a 100644
--- a/lib/get-macro-options/index.js
+++ b/lib/get-macro-options/index.js
@@ -11,7 +11,10 @@ renderer.paragraph = text => text
function getMacroOptionsJson (componentName) {
try {
- let optionsFilePath = path.join(paths.govukfrontendcomponents, componentName, 'macro-options.json')
+ let optionsFilePath = path.join(paths.hmlrfrontendcomponents, componentName, 'macro-options.json')
+ if (!fs.existsSync(optionsFilePath)) {
+ optionsFilePath = path.join(paths.govukfrontendcomponents, componentName, 'macro-options.json')
+ }
return JSON.parse(fs.readFileSync(optionsFilePath, 'utf8'))
} catch (err) {
console.error(err)
diff --git a/lib/metalsmith.js b/lib/metalsmith.js
index 8f33d98b53..7074d907f2 100644
--- a/lib/metalsmith.js
+++ b/lib/metalsmith.js
@@ -39,7 +39,8 @@ const views = [
paths.layouts,
paths.partials,
paths.components,
- paths.govukfrontend
+ paths.govukfrontend,
+ paths.hmlrfrontend
]
// static site generator
@@ -70,7 +71,7 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
// convert *.scss files to *.css
.use(sass({
quietDeps: true,
- loadPaths: ['node_modules', 'src/stylesheets'] // an array of paths that sass can look in when attempt to resolve @import declarations
+ loadPaths: ['', 'node_modules', 'src/stylesheets'] // an array of paths that sass can look in when attempt to resolve @import declarations
}))
.use(postcss({
@@ -85,9 +86,9 @@ module.exports = metalsmith(__dirname) // __dirname defined by node.js: name of
destination: 'assets'
}))
- // copy HMLR-specific assets from assets
+ // copy static assets from node_modules/@hmlr/frontend
.use(assets({
- source: '../assets/',
+ source: path.join('../', paths.hmlrfrontend, 'hmlr/assets/'),
destination: 'assets'
}))
diff --git a/package-lock.json b/package-lock.json
index bd281901ae..0d750f14c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
+ "@hmlr/frontend": "1.0.0-rc1",
"@metalsmith/postcss": "^5.0.0",
"acorn": "^6.4.1",
"autoprefixer": "^10.4.7",
@@ -1180,6 +1181,17 @@
"postcss-selector-parser": "^6.0.10"
}
},
+ "node_modules/@hmlr/frontend": {
+ "version": "1.0.0-rc1",
+ "resolved": "https://registry.npmjs.org/@hmlr/frontend/-/frontend-1.0.0-rc1.tgz",
+ "integrity": "sha512-qGtU7tXVYeFxQ6AowGHt2jOEROZzsJFTl2VQjzdPyY75FJdd0PXrMYjZ5IGfMteOrQHG1T7JIJXgeurbwOF56g==",
+ "dependencies": {
+ "govuk-frontend": "4.3.1"
+ },
+ "engines": {
+ "node": "16.16.0"
+ }
+ },
"node_modules/@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -16684,6 +16696,14 @@
"dev": true,
"requires": {}
},
+ "@hmlr/frontend": {
+ "version": "1.0.0-rc1",
+ "resolved": "https://registry.npmjs.org/@hmlr/frontend/-/frontend-1.0.0-rc1.tgz",
+ "integrity": "sha512-qGtU7tXVYeFxQ6AowGHt2jOEROZzsJFTl2VQjzdPyY75FJdd0PXrMYjZ5IGfMteOrQHG1T7JIJXgeurbwOF56g==",
+ "requires": {
+ "govuk-frontend": "4.3.1"
+ }
+ },
"@istanbuljs/load-nyc-config": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
diff --git a/package.json b/package.json
index 3900de4ee7..725d943c22 100644
--- a/package.json
+++ b/package.json
@@ -4,14 +4,14 @@
"description": "HM Land Registry Design System",
"repository": {
"type": "git",
- "url": "git+https://github.com/landregistry/hmlr-design-system-2.git"
+ "url": "git+https://github.com/landregistry/hmlr-design-system.git"
},
"author": "HM Land Registry Design System team",
"license": "MIT",
"bugs": {
- "url": "https://github.com/landregistry/hmlr-design-system-2/issues"
+ "url": "https://github.com/landregistry/hmlr-design-system/issues"
},
- "homepage": "https://github.com/landregistry/hmlr-design-system-2#readme",
+ "homepage": "https://github.com/landregistry/hmlr-design-system#readme",
"scripts": {
"preinstall": "node bin/check-nvmrc.js",
"prestart": "node bin/check-nvmrc.js",
@@ -28,6 +28,7 @@
]
},
"dependencies": {
+ "@hmlr/frontend": "1.0.0-rc1",
"@metalsmith/postcss": "^5.0.0",
"acorn": "^6.4.1",
"autoprefixer": "^10.4.7",
@@ -76,9 +77,6 @@
"request": "^2.88.0",
"rollup-plugin-commonjs": "^9.3.4",
"rollup-plugin-node-resolve": "^4.2.3",
- "stylelint": "^14.6.1",
- "stylelint-config-gds": "^0.2.0",
- "stylelint-order": "^5.0.0",
"sitemap": "^2.1.0",
"standard": "^12.0.1",
"stylelint": "^14.6.1",
diff --git a/src/accessibility-statement.md.njk b/src/accessibility-statement.md.njk
index 49cd1c7207..7f66f954b9 100644
--- a/src/accessibility-statement.md.njk
+++ b/src/accessibility-statement.md.njk
@@ -6,7 +6,9 @@ layout: layout-single-page-prose.njk
# Accessibility
-The HM Land Registry Design System website and the codebase it uses, GOV.UK Frontend, is maintained by a team at the HM Land Registry (HMLR).
+The HM Land Registry Design System website and the codebase it uses, HM Land Registry Frontend, is maintained by a team at the HM Land Registry (HMLR).
+
+The HM Land Registry Design System also uses the GOV.UK Frontend codebase and mirrors the code from the GOV.UK Design System, both of which are maintained by a team at the Government Digital Service (GDS).
This page explains how the team works to ensure the Design System and Frontend are accessible.
@@ -48,20 +50,22 @@ The GOV.UK Frontend documentation website at [http://frontend.design-system.serv
### How this website has been tested for accessibility
-The Design System website was last tested on 7 October 2019. The test was carried out by the [Digital Accessibility Centre (DAC)](https://digitalaccessibilitycentre.org/).
+# [TODO]
+
+{# The Design System website was last tested on 7 October 2019. The test was carried out by the [Digital Accessibility Centre (DAC)](https://digitalaccessibilitycentre.org/). #}
-DAC tested a sample of pages to cover the different content types in the HM Land Registry Design System website. They were:
+{# DAC tested a sample of pages to cover the different content types in the HM Land Registry Design System website. They were: #}
-- [the homepage](https://hmlr-design-system-staging.herokuapp.com/)
-- [a short content page](https://hmlr-design-system-staging.herokuapp.com/community/design-system-working-group/)
-- [an overview page](https://hmlr-design-system-staging.herokuapp.com/community/)
-- [a styles page](https://hmlr-design-system-staging.herokuapp.com/styles/typography/)
-{# - [a component page](https://hmlr-design-system-staging.herokuapp.com/components/radios/)
-- [a pattern page](https://hmlr-design-system-staging.herokuapp.com/patterns/question-pages/) #}
+{# - [the homepage](https://hmlr-design-system-staging.herokuapp.com/) #}
+{# - [a short content page](https://hmlr-design-system-staging.herokuapp.com/community/design-system-working-group/) #}
+{# - [an overview page](https://hmlr-design-system-staging.herokuapp.com/community/) #}
+{# - [a styles page](https://hmlr-design-system-staging.herokuapp.com/styles/typography/) #}
+{# - [a component page](https://hmlr-design-system-staging.herokuapp.com/components/radios/) #}
+{# - [a pattern page](https://hmlr-design-system-staging.herokuapp.com/patterns/question-pages/) #}
-They also tested the global search functionality that appears in the header of every page in the Design System.
+{# They also tested the global search functionality that appears in the header of every page in the Design System. #}
-The [GOV.UK Frontend documentation website](http://frontend.design-system.service.gov.uk/) was last tested for accessibility issues in March 2021.
+{# The [GOV.UK Frontend documentation website](http://frontend.design-system.service.gov.uk/) was last tested for accessibility issues in March 2021. #}
### How the HM Land Registry Design System team makes this website accessible
@@ -87,16 +91,4 @@ You must research styles, components and patterns as part of your service to ens
Find out what you need to do to [make your service accessible](https://www.gov.uk/service-manual/helping-people-to-use-your-service/making-your-service-accessible-an-introduction) in the GOV.UK Service Manual.
-## If you are not using the Design System and Frontend
-
-The Design System and Frontend were introduced in June 2018 to replace the following deprecated codebases:
-
-- GOV.UK Elements
-- GOV.UK Frontend Toolkit
-- GOV.UK Template
-
-The HM Land Registry Design System team no longer supports these products and will not be making updates to help them meet level AA of WCAG 2.1.
-
-If you're using these products, you should start updating your service to use the Design System and Frontend.
-
If you have any questions or need help, [contact the HM Land Registry Design System team](/get-in-touch/).
diff --git a/src/accessibility/assisted-digital/index.md.njk b/src/accessibility/assisted-digital/index.md.njk
index 5d710c3957..619b168637 100644
--- a/src/accessibility/assisted-digital/index.md.njk
+++ b/src/accessibility/assisted-digital/index.md.njk
@@ -7,11 +7,11 @@ layout: layout-pane.njk
order: 2
---
-If you're building a digital service in a central government department, you must provide assisted digital support.
+If you’re building a digital service in a central government department, you must provide assisted digital support.
This means offering help for people who:
-- need to use the digital service but can't access it or
-- don't have the skills to use the digital service on their own.
+- need to use the digital service but can’t access it or
+- don’t have the skills to use the digital service on their own.
Any user may need assisted digital support, if they lack:
diff --git a/src/accessibility/images/index.md.njk b/src/accessibility/images/index.md.njk
index 4e9218f8ca..647923502e 100644
--- a/src/accessibility/images/index.md.njk
+++ b/src/accessibility/images/index.md.njk
@@ -7,14 +7,14 @@ layout: layout-pane.njk
order: 8
---
-Not everyone reading your document will be able to see an image or screenshot so you must always add '[alternative text](https://design-system.service.gov.uk/styles/images/#alternative-text)' or 'alt text'.
+Not everyone reading your document will be able to see an image or screenshot so you must always add "[alternative text](https://design-system.service.gov.uk/styles/images/#alternative-text)" or "alt text".
This means people using screen readers can read or hear a description of the image.
-If the image is purely decorative then you can mark it as 'decorative only'.
+If the image is purely decorative then you can mark it as "decorative only".
But if this is the case, you might want to think about whether you need to include the image at all. [Images, Describing images, Graphs and charts, Diagrams, Infographics, Image copyright standard](https://www.gov.uk/guidance/content-design/images).
-You can usually add 'alt text' by using your right-hand mouse function on an image, or when you run an accessibility check you'll be guided to add any missing 'alt text'.
+You can usually add "alt text" by using your right-hand mouse function on an image, or when you run an accessibility check you will be guided to add any missing "alt text".
If you decide you want to keep the image, [you can mark the image so they can be ignored by assistive technology](https://www.w3.org/TR/WCAG20-TECHS/H67.html#H67-description).
\ No newline at end of file
diff --git a/src/accessibility/links/index.md.njk b/src/accessibility/links/index.md.njk
index c8eb45c1b0..624a9adef7 100644
--- a/src/accessibility/links/index.md.njk
+++ b/src/accessibility/links/index.md.njk
@@ -11,9 +11,9 @@ Always make your [links](https://www.gov.uk/guidance/content-design/links) descr
Links are blue and underlined by default.
-Never leave the full link visible or use the words 'click' or 'click here' as some people do not use a mouse.
+Never leave the full link visible or use the words "click" or "click here" as some people do not use a mouse.
-Use ‘select’ and make sure the link is meaningful, for example:
+Use "select" and make sure the link is meaningful, for example:
Good: [guidance on GDS standards](https://www.gov.uk/service-manual/service-standard)
diff --git a/src/accessibility/readability/index.md.njk b/src/accessibility/readability/index.md.njk
index cce75d4a4c..f180710077 100644
--- a/src/accessibility/readability/index.md.njk
+++ b/src/accessibility/readability/index.md.njk
@@ -19,7 +19,7 @@ If you use Word to write your content you can then run the Flesch reading scale
If your score is lower than 70, then take a look at your sentence length and word length. The shorter the sentences and words, the easier it will be read.
-To set this up in Word (see below for Macbook), Open Word, go to File then Options. Select Proofing then make sure 'check grammar with spelling' and 'show readability statistics' are both selected. Now you have enabled this feature, when you run a spell check Word will display information about the reading level of your document as well.
+To set this up in Word (see below for Macbook), Open Word, go to File then Options. Select Proofing then make sure "Check grammar with spelling" and "Show readability statistics" are both selected. Now you have enabled this feature, when you run a spell check Word will display information about the reading level of your document as well.
If you are working on a Macbook: Open word, go to the Word drop down menu, select Preferences, Select Spelling and Grammar, Check Show readability statistics and click OK. Now when you use the spell check tool, it will automatically tell you the Flesch-Kincaid grade level equivalency.
diff --git a/src/components/footer/default/index.njk b/src/components/footer/default/index.njk
new file mode 100644
index 0000000000..1948f8b0b3
--- /dev/null
+++ b/src/components/footer/default/index.njk
@@ -0,0 +1,7 @@
+---
+title: Footer
+layout: layout-example.njk
+---
+{% from "hmlr/components/footer/macro.njk" import hmlrFooter %}
+
+{{ hmlrFooter() }}
\ No newline at end of file
diff --git a/src/components/footer/index.md.njk b/src/components/footer/index.md.njk
new file mode 100644
index 0000000000..b171076101
--- /dev/null
+++ b/src/components/footer/index.md.njk
@@ -0,0 +1,61 @@
+---
+title: Footer
+description: The footer provides copyright, licensing and other information about your service and department
+section: Components
+aliases: privacy notice, accessibility statement, terms and conditions
+layout: layout-pane.njk
+---
+
+{% from "_example.njk" import example %}
+
+The footer provides copyright, licensing and other information about your service.
+
+If you use the page template, you'll also get the footer without having to add it, as it's included by default.
+
+The Land Registry footer is complementary to the GOV.UK footer so that users are reassured they are working with a Government department, and can use the familiar conventions they have learnt from interacting with the UK Government.
+
+{{ example({group: "components", item: "footer", example: "default", html: true, nunjucks: true, open: false}) }}
+
+## When to use this component
+
+### GOV.UK footer
+
+You must use the GOV.UK footer at the bottom of every page if your service is being hosted on one of these domains:
+
+- gov.uk/myservice
+- myservice.service.gov.uk
+- myblog.blog.gov.uk
+
+### Land Registry footer
+
+You must use the Land Registry Government footer at the bottom of every page if your service is being provided:
+
+- as a public or professional user service, but is not hosted on a gov domain
+- is for staff
+
+## How it works
+
+The Land Registry footer works exactly the same as the GOV.UK footer, but replaces the GOV.UK specific content. The Crown copyright coat of arms and link, and the Open Government License, are removed. The Crown copyright coat of arms is replaced by the HM Land Registry logo.
+
+This is the first version of the Land Registry footer. It's a simpler version than the GOV.UK footer.
+
+If you need to extend its use, you should extend it in the same was as the GOV.UK footer is used.
+
+
+## Adding links
+
+You can add links to:
+- [privacy notice](https://www.gov.uk/service-manual/design/collecting-personal-information-from-users
+)
+- [accessibility statement](https://www.gov.uk/service-manual/helping-people-to-use-your-service/publishing-information-about-your-services-accessibility)
+- [cookies page](https://design-system.service.gov.uk/patterns/cookies-page/)
+- terms and conditions
+- other language options
+
+Use ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text.
+
+## Adding secondary navigation
+
+Only add secondary GOV.UK navigation if you’re creating a GOV.UK service, and you want users to be able to navigate away from the service to somewhere else on the GOV.UK website. For example, you probably don’t want to encourage a user to navigate away from a linear, form-type service.
+
+{{ example({group: "components", item: "footer", example: "populated", html: true, nunjucks: true, open: false}) }}
diff --git a/src/components/footer/populated/index.njk b/src/components/footer/populated/index.njk
new file mode 100644
index 0000000000..86f5ef2597
--- /dev/null
+++ b/src/components/footer/populated/index.njk
@@ -0,0 +1,78 @@
+---
+title: Populated footer
+layout: layout-example.njk
+---
+{% from "hmlr/components/footer/macro.njk" import hmlrFooter %}
+
+{{ hmlrFooter({
+ meta: {
+ visuallyHiddenTitle: "Other links",
+ html: "Meta HTML",
+ text: "Meta text",
+ items: [
+ {
+ text: "Meta item 1",
+ href: "#"
+ },
+ {
+ text: "Meta item 2",
+ href: "#"
+ },
+ {
+ text: "Meta item 3",
+ href: "#"
+ }
+ ]
+ },
+ navigation: [
+ {
+ title: "Navigation 1",
+ width: "one-third",
+ items: [
+ {
+ text: "Item 1.1",
+ href: "#"
+ },
+ {
+ text: "Item 1.2",
+ href: "#"
+ },
+ {
+ text: "Item 1.3",
+ href: "#"
+ }
+ ]
+ },
+ {
+ title: "Navigation 2",
+ width: "two-thirds",
+ columns: 2,
+ items: [
+ {
+ text: "Item 2.1",
+ href: "#"
+ },
+ {
+ text: "Item 2.2",
+ href: "#"
+ },
+ {
+ text: "Item 2.3",
+ href: "#"
+ },
+ {
+ text: "Item 2.4",
+ href: "#"
+ },
+ {
+ text: "Item 2.5",
+ href: "#"
+ },
+ {
+ text: "Item 2.6",
+ href: "#"
+ }
+ ]
+ }
+ ]
+}) }}
\ No newline at end of file
diff --git a/src/components/header/default/index.njk b/src/components/header/default/index.njk
new file mode 100644
index 0000000000..5133bef92a
--- /dev/null
+++ b/src/components/header/default/index.njk
@@ -0,0 +1,10 @@
+---
+title: Header
+layout: layout-example.njk
+---
+{% from "hmlr/components/header/macro.njk" import hmlrHeader %}
+
+{{ hmlrHeader({
+ serviceName: "Service name",
+ serviceUrl: "#"
+}) }}
\ No newline at end of file
diff --git a/src/components/header/full-width/index.njk b/src/components/header/full-width/index.njk
new file mode 100644
index 0000000000..82675ddfd5
--- /dev/null
+++ b/src/components/header/full-width/index.njk
@@ -0,0 +1,10 @@
+---
+title: Full width header
+layout: layout-example.njk
+---
+{% from "hmlr/components/header/macro.njk" import hmlrHeader %}
+
+{{ hmlrHeader({
+ serviceName: "Service name",
+ containerClasses: "govuk-header__container--full-width"
+}) }}
\ No newline at end of file
diff --git a/src/components/header/index.md.njk b/src/components/header/index.md.njk
new file mode 100644
index 0000000000..5de521b456
--- /dev/null
+++ b/src/components/header/index.md.njk
@@ -0,0 +1,61 @@
+---
+title: Header
+description: The header shows users that they are using a government service
+section: Components
+layout: layout-pane.njk
+---
+
+{% from "_example.njk" import example %}
+
+The header shows users:
+
+- that they are using a Government service or product
+- which domain they are on, GOV.UK, a Land Registry external service, or a staff system
+- which service or product they are using
+
+If you use the page template, you'll also get the header without having to add it, as it's included by default.
+
+The Land Registry header is complementary to the GOV.UK header so that users are reassured they are working with a Government department, and can use the familiar conventions they have learnt from interacting with the UK Government.
+
+{{ example({group: "components", item: "header", example: "default", html: true, nunjucks: true, open: false}) }}
+
+## When to use this component
+
+### GOV.UK header
+
+You must use the GOV.UK header at the top of every page if your service is being hosted on one of these domains:
+
+- gov.uk/myservice
+- myservice.service.gov.uk
+- myblog.blog.gov.uk
+
+### Land Registry header
+
+You must use the Land Registry Government header at the top of every page if your service is being provided:
+
+- as a public or professional user service, but is not hosted on a gov domain
+- is for staff
+
+The header can expand to the full width of the page.
+
+{{ example({group: "components", item: "header", example: "full-width", html: true, nunjucks: true, open: false}) }}
+
+## How it works
+
+The Land Registry header works exactly the same as the GOV.UK header, but replaces the GOV.UK specific content. The Crown, Transport font and GOV.UK border colour are replaced.
+
+This is the first version of the Land Registry header. It's a simpler version than the GOV.UK header.
+
+If you need to extend its use, you should extend it in the same was as the GOV.UK header is used.
+
+{# ### Default header #}
+
+{# Use the default header if your service has 5 pages or fewer. #}
+
+{# ### Header with service name #}
+
+{# Use the header with a service name if your service is more than 5 pages long - this can help users understand which service they are using. #}
+
+{# ### Header with service name and navigation #}
+
+{# Use the header with navigation if you need to include basic navigation, contact or account management links. #}
diff --git a/src/components.md.njk b/src/components/index.md.njk
similarity index 98%
rename from src/components.md.njk
rename to src/components/index.md.njk
index 2429dfdc38..af7709da52 100644
--- a/src/components.md.njk
+++ b/src/components/index.md.njk
@@ -1,6 +1,6 @@
---
title: Components
-layout: layout-pane-no-nav.njk
+layout: layout-pane.njk
---
Components are reusable parts of the user interface. You can use the individual components in different patterns and contexts.
diff --git a/src/content/checking-content/index.md.njk b/src/content/checking-content/index.md.njk
index 4ec2bae1fa..0598baf31f 100644
--- a/src/content/checking-content/index.md.njk
+++ b/src/content/checking-content/index.md.njk
@@ -10,7 +10,7 @@ show_page_nav: false
The [Hemingway app](https://hemingwayapp.com/) highlights lengthy, complex sentences, common errors and helps you write in the active voice.
-A design critique (or ‘crit’) is where a designer can share a piece of work in progress with others to get feedback and iterate on it.
+A design critique (or "crit") is where a designer can share a piece of work in progress with others to get feedback and iterate on it.
Get another designer to check your work because it’s hard to spot your own mistakes.
diff --git a/src/get-started/index.md.njk b/src/get-started/index.md.njk
index 9fc2698fb0..cc30ad5cad 100644
--- a/src/get-started/index.md.njk
+++ b/src/get-started/index.md.njk
@@ -5,14 +5,14 @@ description: The following introductory guides will help you to get set up
show_subnav: true
---
-The HM Land Registry Design System extends the GOV.UK Design System and Service Manual, to include items that don't exist there, or for situations unique to Land Registry.
+The HM Land Registry Design System extends the GOV.UK Design System and Service Manual, to include items that don’t exist there, or for situations unique to Land Registry.
## New services and improving existing services
You should:
- follow the [GOV.UK Design System](https://design-system.service.gov.uk), and [Service Manual design guidance](https://www.gov.uk/service-manual/design) first
-- check this design system and in the design practice for guidance that does not exist elsewhere in government, for example because it's unique to us
+- check this design system and in the design practice for guidance that does not exist elsewhere in government, for example because it’s unique to us
- diverge only when you can demonstrate that existing government and practice guidance does not work in your context
- be documenting and sharing your new learning with the community
diff --git a/src/get-started/previous-design-system/index.md.njk b/src/get-started/previous-design-system/index.md.njk
index b1bd2b5a63..f372b68edc 100644
--- a/src/get-started/previous-design-system/index.md.njk
+++ b/src/get-started/previous-design-system/index.md.njk
@@ -7,4 +7,6 @@ order: 6
description: The predecessor to this design system
---
-The [previous iteration of the HM Land Registry Design System](https://hmlr-design-system.herokuapp.com/) was a collection of Jinja and React components specific to Land Registry. The [old design system](https://github.com/LandRegistry/hmlr-design-system) is still available on GitHub.
+The previous iteration of the HM Land Registry Design System was a collection of Jinja and React components specific to Land Registry and is still available on GitHub.
+
+See the [legacy HM Land Registry design system on GitHub](https://github.com/LandRegistry/hmlr-design-system-legacy).
diff --git a/src/get-started/prototyping/index.md.njk b/src/get-started/prototyping/index.md.njk
index 9cca77eeae..5caf8de4e2 100644
--- a/src/get-started/prototyping/index.md.njk
+++ b/src/get-started/prototyping/index.md.njk
@@ -14,3 +14,15 @@ The GOV.UK guide explains how to create prototypes using the GOV.UK Design Syste
To make prototypes use the link below to navigate to the GOV.UK setup guide.
[GOV.UK Prototyping Setup Guide](https://design-system.service.gov.uk/get-started/prototyping/)
+
+## Using the HM Land Registry components
+
+Using the latest prototype kit as a base, install the HM Land Registry frontend styles and templates:
+
+```sh
+npm install @hmlr/frontend
+```
+
+You can now import and use the HM Land Registry components in your prototype just as you can with the GOV.UK ones.
+
+Example code can be found in the [components](/components/) section.
diff --git a/src/index.njk b/src/index.njk
index 09eeff7fab..303da04dfe 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -5,7 +5,7 @@ masthead: true
---
{% include "_masthead.njk" %}
-{% include "_whats-new.njk" %}
+{# {% include "_whats-new.njk" %} #}
Guidance for creating accessible prodcuts and services. Legal requirements and publishing accessibilty statments.
- This Design System is intended to be a community endeavour, bringing together the latest research, design and development from across the organisation and government to make sure it’s representative and relevant for its users.
+This Design System is intended to be a community endeavour, bringing together the latest research, design and development from across the organisation and government to make sure it’s representative and relevant for its users.
+diff --git a/src/styles/index.md.njk b/src/styles/index.md.njk index 8cecdf10e6..44880f8a22 100644 --- a/src/styles/index.md.njk +++ b/src/styles/index.md.njk @@ -6,22 +6,18 @@ show_subnav: true --- We style HM Land Registry (HMLR) services in different ways depending on: - - what domain they're in + - what domain they’re in - who the service is for - what kind of service it is ---- - ## Internal system styles Use internal design styles if your service is for staff. For example, a caseworking or admin system. You should: -- speak to designers working on casework systems for advice - they're developing reusable elements and advice +- speak to designers working on casework systems for advice - they’re developing reusable elements and advice - speak to senior front-end developers working on casework systems for skeleton applications, resuable code and advice ---- - ## GOV.UK design styles Use GOV.UK design styles if your service is all of the following: - public-facing diff --git a/src/stylesheets/components/_masthead.scss b/src/stylesheets/components/_masthead.scss index 41efb917d5..154b8a3d3e 100644 --- a/src/stylesheets/components/_masthead.scss +++ b/src/stylesheets/components/_masthead.scss @@ -1,13 +1,15 @@ .app-masthead { @include govuk-responsive-padding(6, "top"); @include govuk-responsive-padding(6, "bottom"); - border-bottom: 1px solid $govuk-brand-colour; - color: govuk-colour("white"); - background-color: $govuk-brand-colour; + // border-bottom: 1px solid $govuk-brand-colour; + border-bottom: 1px solid $govuk-border-colour; + // color: govuk-colour("white"); + // background-color: $govuk-brand-colour; + background-color: $app-light-grey; } .app-masthead__title { - color: govuk-colour("white"); + // color: govuk-colour("white"); @include govuk-responsive-margin(6, "bottom"); } diff --git a/src/stylesheets/hmlr/_header.scss b/src/stylesheets/hmlr/_header.scss index cf2b28508e..71cd7a43f8 100644 --- a/src/stylesheets/hmlr/_header.scss +++ b/src/stylesheets/hmlr/_header.scss @@ -1,3 +1,3 @@ -.hmlr-header { +.hmlr-design-system-header { border-bottom-color: $govuk-brand-colour; } diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss index f50f511bd8..dcc836f06a 100644 --- a/src/stylesheets/main.scss +++ b/src/stylesheets/main.scss @@ -1,9 +1,10 @@ $govuk-new-link-styles: true; -$govuk-brand-colour: #006637; +$govuk-brand-colour: #789904; $govuk-font-family: arial, sans-serif; @import "govuk-frontend/govuk/all"; +@import "@hmlr/frontend/hmlr/all"; // App-specific variables $app-light-grey: #f8f8f8; diff --git a/tasks/serve.js b/tasks/serve.js index 5252403f54..30afed398c 100644 --- a/tasks/serve.js +++ b/tasks/serve.js @@ -13,7 +13,8 @@ metalsmith.use(browsersync({ files: [ path.join(paths.source, '**/*'), path.join(paths.views, '**/*'), - path.normalize('node_modules/govuk-frontend/**/*') + path.normalize('node_modules/govuk-frontend/**/*'), + path.normalize('node_modules/@hmlr/frontend/**/*') ] // files to watch })) diff --git a/views/layouts/_generic.njk b/views/layouts/_generic.njk index 178831b220..1ba6e38c42 100644 --- a/views/layouts/_generic.njk +++ b/views/layouts/_generic.njk @@ -45,7 +45,7 @@ {% block header %}{% endblock %} {% block main %} - {% include "_header.njk" %} + {% include "hmlr/_header.njk" %} {% include "_navigation.njk" %} {% include "_banner.njk" %} {% block body %} diff --git a/views/layouts/layout-pane-no-nav.njk b/views/layouts/layout-pane-no-nav.njk index 6a766b3acd..f0da4e7158 100644 --- a/views/layouts/layout-pane-no-nav.njk +++ b/views/layouts/layout-pane-no-nav.njk @@ -66,5 +66,5 @@
- If you spot a problem with this guidance you can - propose a change. -
-- If you're not sure how to do this, read guidance on - how to propose changes in GitHub. -
- #} ++ If you spot a problem with this guidance you can + propose a change. +
++ If you're not sure how to do this, read guidance on + how to propose changes in GitHub. +
{% endif %} {% endif %} diff --git a/views/partials/_footer.njk b/views/partials/_footer.njk index 87210974cb..1fd3f55082 100644 --- a/views/partials/_footer.njk +++ b/views/partials/_footer.njk @@ -1,6 +1,6 @@ -{% from "govuk/components/footer/macro.njk" import govukFooter %} +{% from "hmlr/components/footer/macro.njk" import hmlrFooter %} -{{ govukFooter({ +{{ hmlrFooter({ "classes": "app-footer", "containerClasses" : "app-width-container", "navigation": [ @@ -22,7 +22,7 @@ "meta": { "items": [ { - "href": "/accessibility/", + "href": "/accessibility-statement/", "text": "Accessibility" }, { diff --git a/views/partials/_masthead.njk b/views/partials/_masthead.njk index 96d231a8c6..ee2d467e62 100644 --- a/views/partials/_masthead.njk +++ b/views/partials/_masthead.njk @@ -11,7 +11,7 @@ {{ govukButton({ "text": "Get started", "href": "/get-started/", - "classes": "app-button--inverted govuk-!-margin-top-6 govuk-!-margin-bottom-0", + "classes": "govuk-!-margin-top-6 govuk-!-margin-bottom-0", "isStartButton": "true" }) }} diff --git a/views/partials/hmlr/_footer.njk b/views/partials/hmlr/_footer.njk deleted file mode 100644 index dac897828f..0000000000 --- a/views/partials/hmlr/_footer.njk +++ /dev/null @@ -1,59 +0,0 @@ - diff --git a/views/partials/hmlr/_header.njk b/views/partials/hmlr/_header.njk index b2a59d0cf1..88e93a4596 100644 --- a/views/partials/hmlr/_header.njk +++ b/views/partials/hmlr/_header.njk @@ -1,4 +1,4 @@ -