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

View Code? Open in Web Editor NEW

3.0 3.0 1.0 230 KB

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

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

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

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]

Add bank details component

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

Snippet name: govuk-bank-details

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 summary list component

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

Snippet name: govuk-summary-list

Add character count component

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

Snippet name: govuk-character-count

Add exit this page component

Add exit this page component.

Reorganise documentation

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

Add errorMessage attribute

Add the errorMessage attribute to the following snippets:

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.

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 visually hidden snippet

Add a visually hidden snippet

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

Snippet name: govuk-visually-hidden

Add notification banner component

The design system now includes a Notification Banner component.

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:

Add accordion component

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

Snippet name: govuk-accordion

Add currency component

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

Add cookie banner component

Add the cookie banner component.

Add selected attribute

Add the selected attribute to the following snippets:

govuk-select
govuk-select-option

Add pagination component

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

Add variations for:

pagination
previous/next

Add telephone component

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

Snippet name: govuk-telephone

Add email component

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

Snippet name: govuk-email

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 checked attribute

Add the checked attribute to the following snippets:

govuk-checkboxes
govuk-radios
govuk-option

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 visually hidden snippet to README docs

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

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

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

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

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