GithubHelp home page GithubHelp logo

simonwhatley / govuk-design-system-snippets-atom-package Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 0.0 55 KB

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

Home Page: https://atom.io/packages/govuk-design-system-snippets

License: MIT License

package atom atom-package govuk snippets nunjucks design design-system

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

Stargazers

avatar avatar

Watchers

avatar

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

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

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:

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%

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.