Code blocks

1. Check if you have Git installed

Open a terminal, type git --version and press Enter.

If git is installed, you will see the version installed, something similar to this:

MacBook-Pro:~ florence$ git --version
git version 2.39.5
MacBook-Pro:~ florence$ █

You can now set a username and password.

If git is not installed you will see git: command not found, something similar to this:

MacBook-Pro:~ florence$ git --version
zsh: git: command not found
MacBook-Pro:~ florence$ █

You will need to install Git before continuing.

2. Set a username and password

Once Git is installed, you should set your user name and email address.

git config --global user.name "YOUR NAME"
git config --global user.email "YOUR EMAIL ADDRESS"

For example, git config --global user.name "Kevin Francis".

If you have a GitHub account, use the same email address for both.

Unreleased

Reversed link style for action link

You can now use the action link component on dark backgrounds by using the .nhsuk-action-link--reverse class.

This was added in pull request #1542: Add reverse action link modifiers and styles.

Sass colour palette nhsuk-colour function

The Sass colour palette variables (e.g. $color_nhsuk-blue) have been moved into a new single $nhsuk-colours map. The previous names are deprecated and will be removed in a future release.

If you need to reference a colour within your application you should use the new nhsuk-colour function:

  .nhsuk-example {
-   color: $color_nhsuk-blue;
+   color: nhsuk-colour("blue");
  }

New file upload component

We've added a new file upload component which:

• makes the file inputs easier to use for drag and drop
• allows the text of the component to be translated
• fixes accessibility issues for users of Dragon, a speech recognition software

To use the fileUpload Nunjucks macro in your service:

{{ fileUpload({
  label: {
    text: "Upload your photo"
  },
  id: "file-upload",
  name: "photo"
}) }}

If you are not using Nunjucks macros, use the following HTML:

<div class="nhsuk-form-group nhsuk-file-upload" data-module="nhsuk-file-upload">
  <label class="nhsuk-label" for="file-upload">
    Upload your photo
  </label>
  <input class="nhsuk-file-upload__input" id="file-upload" name="photo" type="file">
</div>

If you're importing components individually in your JavaScript, which we recommend for better performance, you'll then need to import and initialise the new FileUpload component.

import { createAll, FileUpload } from 'nhsuk-frontend'

createAll(FileUpload)

This change was introduced in pull request #1556: Uplift GOV.UK Frontend file upload component.