simonwhatley/govuk-design-system-snippets-atom-package

This Atom package includes snippets to help build UK Government digital services.

GOV.UK Design System snippets for Nunjucks

This Atom package includes snippets to help build UK Government digital services.

Installation

Go to Atom > Preferences > Install and then search for govuk design system snippets under Packages.

After installing the package, you will need to restart Atom.

Available snippets

Styles

Layout

Name	Shortcut	Notes
Form group	govuk-form-group
Form section	govuk-form-section
Grid column full	govuk-grid-column-full
Grid column one-half	govuk-grid-column-one-half
Grid column one-quarter	govuk-grid-column-one-quarter
Grid column one-third	govuk-grid-column-one-third
Grid column two-thirds	govuk-grid-column-two-thirds
Grid column	govuk-grid-column
Grid row	govuk-grid-row
Layout one-third / two-thirds	govuk-layout-one-third-two-thirds
Layout two-thirds / one-third	govuk-layout-two-thirds-one-third

Typography

Name	Shortcut	Notes
Caption	govuk-caption
Font size override	govuk-font-size
Font weight override	govuk-font-weight
Heading	govuk-heading
Link item	govuk-link-item
Links	govuk-link
Lists	govuk-list
Lists – Bulleted	govuk-list-bulleted
Lists – Numbered	govuk-list-numbered
Paragraph body text	govuk-paragraph-body
Paragraph body text large	govuk-paragraph-body-lead
Paragraph body text small	govuk-paragraph-body-small
Section break	govuk-section-break
Visually hidden	govuk-visually-hidden	Creates a visually hidden span

Components

Form elements

Name	Shortcut	Notes
Addresses	govuk-address
Bank details	govuk-bank-details
Button	govuk-button
Character count	govuk-character-count
Checkboxes	govuk-checkboxes
Checkbox or radio option	govuk-option	Use in conjunction with the govuk-checkboxes and govuk-radios Nunjucks snippets.
Currency input	govuk-currency-input
Dates	govuk-date
Email address	govuk-email
Error summary	govuk-error-summary
Fieldset	govuk-fieldset
File upload	govuk-file
National Insurance Number (NINO)	govuk-nino
Radios	govuk-radios
Select	govuk-select
Select option	govuk-select-option	Use in conjunction with the govuk-select Nunjucks snippet.
Telephone number	govuk-telephone
Text input	govuk-input
Textarea	govuk-textarea

Content presentation

Name	Shortcut	Notes
Accordion	govuk-accordion
Details	govuk-details
Inset text	govuk-inset-text
Notification banner	govuk-notification-banner
Panels	govuk-panel
Phase banner	govuk-phase-banner
Summary list	govuk-summary-list
Tables	govuk-table
Tabs	govuk-tabs
Tab item HTML	govuk-tab-item	Use in conjunction with the govuk-tabs snippet. This snippet can be used to encapsulate a tab panel.
Tags	govuk-tag
Warning text	govuk-warning-text

Navigation

Name	Shortcut	Notes
Back link	govuk-back-link
Breadcrumbs	govuk-breadcrumbs
Footer	govuk-footer
Header	govuk-header
Pagination	govuk-pagination
Previous/next navigation	govuk-previous-next
Skip link	govuk-skip-link

Miscellaneous

Name	Shortcut	Notes
Cookie banner	govuk-cookie-banner

Dependencies

Using this package depends on the installation of the GOV.UK Frontend and Nunjucks into your project.

Support

This repository is maintained by Simon Whatley. If you’ve got a question or need support you can:

• Email [email protected] putting the repository name in the subject line.
• View known issues on GitHub.

Contributing

If you’ve got an idea or suggestion you can:

• Email [email protected] putting the repository name in the subject line.
• Create a GitHub issue.

Licence

Unless otherwise stated, this codebase is released under the MIT License. This covers both the codebase and any sample code in the documentation.

govuk-design-system-snippets-atom-package's Issues

govuk-paragraph-body snippet does not have a correctly closing </p> tag

Prerequisites

• [ X ] Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem
  • Followed all applicable steps in the debugging guide
  • Checked the FAQs on the message board for common solutions
  • Checked that your issue doesn't exist: https://github.com/simonwhatley/govuk-design-system-snippets-atom-package/issues
  • Checked that there is not already a package that provides the described functionality

Description

The govuk-paragraph-body snippet does not have a correctly closing </p> tag

Steps to Reproduce

1. Type govuk-paragraph-body to generate a paragraph body tag
2. Hit [Enter] to convert the snippet to HTML
3. See that the closing paragraph tag is <p> instead of </p>

Expected behaviour:

To produce a complete and correctly terminated <p> tag.
For example:

<p class="govuk-body">
  
</p>

Actual behaviour:

<p class="govuk-body">
  
<p>

Reproduces how often: 100%

Add email component

Add the email component
https://design-system.service.gov.uk/patterns/email-addresses/

Snippet name: govuk-email

Fieldset snippet should be a call block

When using the fieldset snippet, it currently renders as:

{{ govukFieldset({
  legend: {
    text: "Legend text",
    classes: "govuk-fieldset__legend--xl|l|m",
    isPageHeading: true|false
  }
}) }}

It should render as a call block:

{% call govukFieldset({
  legend: {
    text: "Legend text",
    classes: "govuk-fieldset__legend--xl|l|m",
    isPageHeading: true|false
  }
}) %}

{% endcall %}

Update the address pattern snippet

The address pattern has been updated to improve and display all labels.

Current pattern snippet

{% call govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}) %}

  {{ govukInput({
    id: "address-line-1",
    name: "address-line-1",
    label: {
      html: 'Building and street <span class="govuk-visually-hidden">line 1 of 2</span>'
    },
    autocomplete: "address-line1"
  }) }}

  {{ govukInput({
    id: "address-line-2",
    name: "address-line-2",
    label: {
      html: '<span class="govuk-visually-hidden">Building and street line 2 of 2</span>'
    },
    autocomplete: "address-line1"
  }) }}

  {{ govukInput({
    id: "address-town",
    name: "address-town",
    label: {
      text: "Town or city"
    },
    classes: "govuk-!-width-two-thirds",
    autocomplete: "address-level2"
  }) }}

  {{ govukInput({
    id: "address-county",
    name: "address-county",
    label: {
      text: "County"
    },
    classes: "govuk-!-width-two-thirds"
  }) }}

  {{ govukInput({
    id: "address-postcode",
    name: "address-postcode",
    label: {
      text: "Postcode"
    },
    classes: "govuk-input--width-10",
    autocomplete: "postal-code"
  }) }}

{% endcall %}

Proposed pattern snippet

{% call govukFieldset({
  legend: {
    text: "What is your address?",
    classes: "govuk-fieldset__legend--xl",
    isPageHeading: true
  }
}) %}

  {{ govukInput({
    id: "address-line-1",
    name: "address-line-1",
    label: {
      text: "Address line 1"
    },
    autocomplete: "address-line1"
  }) }}

  {{ govukInput({
    id: "address-line-2",
    name: "address-line-2",
    label: {
      text: "Address line 2 (optional)"
    },
    autocomplete: "address-line1"
  }) }}

  {{ govukInput({
    id: "address-town",
    name: "address-town",
    label: {
      text: "Town or city"
    },
    classes: "govuk-!-width-two-thirds",
    autocomplete: "address-level2"
  }) }}

  {{ govukInput({
    id: "address-county",
    name: "address-county",
    label: {
      text: "County (optional)"
    },
    classes: "govuk-!-width-two-thirds"
  }) }}

  {{ govukInput({
    id: "address-postcode",
    name: "address-postcode",
    label: {
      text: "Postcode"
    },
    classes: "govuk-input--width-10",
    autocomplete: "postal-code"
  }) }}

{% endcall %}

Add currency component

The design system text input component now supports prefixes and suffixes. A common use of a prefix is currency.

Add telephone component

Add the telephone component
https://design-system.service.gov.uk/patterns/telephone-numbers/

Snippet name: govuk-telephone

Add character count to docs

The character count component is not in the docs.

Update date snippet to include classes and label

The current date snippet doesn't include label or class attributes.

Adding a label to the component snippet allows us to provide a unique name for the field.

Adding classes to the fields will mean they are correctly displayed when rendered.

Current component snippet

{{ govukDateInput({
  id: "date",
  namePrefix: "date",
  fieldset: {
  legend: {
    text: "When was your passport issued?",
    isPageHeading: true,
    classes: "govuk-fieldset__legend--xl"
  }
  },
  hint: {
    text: "For example, 31 1 2012"
  },
  items: [
    {
      name: "day",
      value: "31"
    },
    {
      name: "month",
      value: "1"
    },
    {
      name: "year",
      value: "2012"
    }
  ]
}) }}

Expected component snippet

{{ govukDateInput({
  id: "date",
  namePrefix: "date",
  fieldset: {
  legend: {
    text: "When was your passport issued?",
    isPageHeading: true,
    classes: "govuk-fieldset__legend--xl"
  }
  },
  hint: {
    text: "For example, 31 1 2012"
  },
  items: [
    {
      name: "day",
      label: "day",
      value: "31",
      classes: "govuk-input--width-2"
    },
    {
      name: "month",
      label: "month",
      value: "1",
      classes: "govuk-input--width-2"
    },
    {
      name: "year",
      label: "year",
      value: "2012",
      classes: "govuk-input--width-4"
    }
  ]
}) }}

Add notification banner component

The design system now includes a Notification Banner component.

Add summary list component

Add the summary list component
https://design-system.service.gov.uk/components/summary-list/

Snippet name: govuk-summary-list

Rename default branch to 'main'

See https://github.com/github/renaming

Add pagination component

The GOV.UK Design System has added a pagination component.

Add variations for:

• pagination
• previous/next

Add accordion component

Add the accordion component
https://design-system.service.gov.uk/components/accordion/

Snippet name: govuk-accordion

Add cookie banner component

Add the cookie banner component.

Add bank details component

Add the bank details component
https://design-system.service.gov.uk/patterns/bank-details/

Snippet name: govuk-bank-details

Add character count component

Add the character count component
https://design-system.service.gov.uk/components/character-count/

Snippet name: govuk-character-count