Add email component (#14)

Author: simonwhatley

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.8.0
+
+Added email component snippet
+
+## 0.7.0
+
 ## 0.6.0
 
 Added bank details component snippet

README.md

@@ -59,6 +59,7 @@ After installing the package, you will need to restart Atom.
 |[Checkboxes](https://design-system.service.gov.uk/components/checkboxes/)|`govuk-checkboxes`||
 |Checkbox or radio option|`govuk-option`|Use in conjunction with the `govuk-checkboxes` and `govuk-radios` Nunjucks snippets.|
 |[Dates](https://design-system.service.gov.uk/components/date-input/)|`govuk-date`||
+|[Email address](https://design-system.service.gov.uk/patterns/email-addresses/)|`govuk-email`||
 |[Error summary](https://design-system.service.gov.uk/components/error-summary/)|`govuk-error-summary`||
 |[Fieldset](https://design-system.service.gov.uk/components/fieldset/)|`govuk-fieldset`||
 |[File upload](https://design-system.service.gov.uk/components/file-upload/)|`govuk-file`||

snippets/form-elements.cson

@@ -233,6 +233,26 @@
       ]
     }) }}$6
     """
+  'Email address':
+    'leftLabel': 'GOV.UK'
+    'description': 'Email address – GOV.UK Design System'
+    'descriptionMoreURL': 'https://design-system.service.gov.uk/patterns/email-addresses/'
+    'prefix': 'govuk-email'
+    'body': """
+    {{ govukInput({
+      id: "${1:email}",
+      name: "${1:email}",
+      label: {
+        text: "${2:Email address}"
+      },
+      hint: {
+        text: "${3:Hint text}"
+      },
+      type: "email",
+      autocomplete: "email",
+      spellcheck: false
+    }) }}$3
+    """
   'Error summary':
     'leftLabel': 'GOV.UK'
     'description': 'Error summary – GOV.UK Design System'