This extension for Visual Studio Code includes snippets to help build UK Government digital services.

Home Page: https://marketplace.visualstudio.com/items?itemName=simonwhatley.govuk-design-system-snippets

License: MIT License

extension visual-studio-code vscode vscode-extension govuk snippets nunjucks design-system design

govuk-visual-studio-code-extension's Introduction

About the GOV.UK Visual Studio Code extension

This extension for Visual Studio Code includes snippets to help in the building of UK Government digital services.

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`
Exit this page	`govuk-exit-page`
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 extension 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-visual-studio-code-extension's People

Contributors

Stargazers

Watchers

Forkers

westleyknight

govuk-visual-studio-code-extension's Issues

Add autocomplete attributes to address snippet

The address snippet is missing the autocomplete attributes for the address compound component.

See here: https://design-system.service.gov.uk/patterns/addresses/

{% from "govuk/components/input/macro.njk" import govukInput %}
{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}

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

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

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

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

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

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

{% endcall %}

Rename default branch to 'main'

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

Add exit this page component

Add exit this page component.

Add summary list component

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

Snippet name: govuk-summary-list

Make link snippet inline

Currently, when using the govuk-link snippet, it renders the code as follows:

<a href="#" class="govuk-link">
  
</a>

This should be changed to simply:

<a href="#" class="govuk-link"></a>

It is likely anchors are used within a paragraph of text.

Add notification banner component

The design system now includes a Notification Banner component.

Add selected attribute

Add the selected attribute to the following snippets:

govuk-select
govuk-select-option

Remove 'form' from snippet name

Remove form- from snippet name. For example: govuk-form-input becomes govuk-input.

Add value attribute

Add the value attribute to the following snippets:

govuk-paragraph-body snippet does not have a correctly closing 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-visual-studio-code-extension/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  tag

Steps to Reproduce

Type govuk-paragraph-body to generate paragraph body tag
Hit [Enter] to convert the snippet to HTML
See that the closing paragraph tag is  instead of

Expected behaviour: [What you expect to happen]
To produce a complete and correctly terminated  tag.
For example:

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

Actual behaviour: [What happens]

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

Reproduces how often: 100%

Versions

v1.7.0
OS: Windows 10
Browser: Chrome Version 96.0.4664.45 (Official Build) (64-bit).

Add errorMessage attribute

Add the errorMessage attribute to the following snippets:

Add character count component

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

Snippet name: govuk-character-count

Add accordion component

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

Snippet name: govuk-accordion

Add visually hidden snippet

Add a visually hidden snippet

<span class="govuk-visually-hidden"></span>

Snippet name: govuk-visually-hidden

Reorganise documentation

Separate snippet documentation into logical groups, rather than simply alphabetical order.

Add visually hidden snippet to README docs

The govuk-visually-hidden snippet is missing from the README docs.

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

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 %}

Add email component

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

Snippet name: govuk-email

Add currency component

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

Add checked attribute

Add the checked attribute to the following snippets:

govuk-checkboxes
govuk-radios
govuk-option

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"
    }
  ]
}) }}

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 %}

Change the radio button snippet

Reported by @adamsilver

Remove hint text attribute
Remove the checked attribute from the item
Add value attribute and default to data.[radio buttons name]
Decouple idPrefix and name attributes from the tab order

Change the date snippet

Reported by @adamsilver

Remove the namePrefix attribute
Add the ability to name each date section, e.g. "mydate[day]", "mydate[month]" and "mydate[year]”, where ‘mydate’ is typed at the same time
Default the value to data.[date part]

Change the checkboxes snippet

Reported by @adamsilver

Default hint text to 'Select all that apply'
Remove the checked attribute from the item
Add values attribute and default to data.[checkboxes name]
Decouple idPrefix and name attributes from the tab order

Add telephone component

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

Snippet name: govuk-telephone

Add pagination component

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

Add variations for:

pagination
previous/next

simonwhatley / govuk-visual-studio-code-extension Goto Github PK

govuk-visual-studio-code-extension's Introduction

About the GOV.UK Visual Studio Code extension

Available snippets

Styles

Layout

Typography

Components

Form elements

Content presentation

Navigation

Miscellaneous

Dependencies

Support

Contributing

Licence

govuk-visual-studio-code-extension's People

Contributors

Stargazers

Watchers

Forkers

govuk-visual-studio-code-extension's Issues

Prerequisites

Description

Steps to Reproduce

Versions

Recommend Projects

Recommend Topics

Recommend Org