feature/date input (#384)

* Create base files
* Initialise files
* Build date input component and remove json file
* Remove javascript functionality
* Update guidance

src/components/_all.scss

@@ -5,6 +5,7 @@
 @import 'callout/callout';
 @import 'card/card';
 @import 'content-block/content-block';
+@import 'date-input/date-input';
 @import 'dialog/dialog';
 @import 'file-upload/file-upload';
 @import 'filters/filters';

src/components/date-input/_date-input.hbs

@@ -0,0 +1,25 @@
+<fieldset class="nsw-form__date">
+  <legend>
+    <span class="nsw-form__label{{#if required}} nsw-form__required{{/if}}">{{label}}{{#if required}}<span class="sr-only"> (required)</span>{{/if}}</span>{{#if helper-text}}
+    <span id="{{id}}-helper-text" class="nsw-form__helper">{{helper-text}}</span>{{/if}}
+  </legend>
+  <div class="nsw-form__date-wrapper">
+    <div class="nsw-form__date-input">
+      <label for="{{id}}-day" class="nsw-form__label nsw-form__label--small">Day</label>
+      <input type="text" maxlength="2" id="{{id}}-day" name="{{id}}-day" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
+    </div>
+    <div class="nsw-form__date-input">
+      <label for="{{id}}-month" class="nsw-form__label nsw-form__label--small">Month</label>
+      <input type="text" maxlength="2" id="{{id}}-month" name="{{id}}-month" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
+    </div>
+    <div class="nsw-form__date-input nsw-form__date-input--large">
+      <label for="{{id}}-year" class="nsw-form__label nsw-form__label--small">Year</label>
+      <input type="text" maxlength="4" id="{{id}}-year" name="{{id}}-year" class="nsw-form__input"{{#if error-text}} aria-invalid="true"{{/if}}>
+    </div>
+  </div>
+</fieldset>
+{{#if error-text}}
+<span id="{{id}}-error-text" class="nsw-form__helper nsw-form__helper--error"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">cancel</span>{{error-text}}</span>
+{{/if}}{{#if valid-text}}
+<span id="{{id}}-valid-text" class="nsw-form__helper nsw-form__helper--valid"><span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">check_circle</span>{{valid-text}}</span>
+{{/if}}

src/components/date-input/_date-input.scss

@@ -0,0 +1,25 @@
+.nsw-form {
+  &__date {
+    padding: 0;
+    margin: 0;
+    border: 0;
+
+    &-wrapper {
+      display: flex;
+      width: 100%;
+      margin: 0 rem(-8px);
+
+      > div {
+        padding: 0 rem(8px);
+      }
+    }
+
+    &-input {
+      width: rem(74px);
+
+      &--large {
+        width: rem(116px);
+      }
+    }
+  }
+}

src/components/date-input/_guidance.hbs

@@ -0,0 +1,43 @@
+---
+title: Date input
+layout: blank-layout.hbs
+---
+
+<h2>Usage</h2>
+
+<p>Use the date input component to let users enter memorable dates, like dates of birth. The date input component consists of three fields grouped together, to let users enter a day, month and year.</p>
+
+<p>This approach is advised in most cases because it allows for precise input and reduces the chances of making mistakes.</p>
+
+<p>Do:</p>
+
+<ul>
+  <li>adjust the order of day, month, and year fields according to the regional format familiar to your users.</li>
+  <li>accept month names written out in full or abbreviated form (for example, ‘january’ or ‘jan’) as some users may enter months in this way.</li>
+  <li>ensure each field is clearly labeled ‘Day’, ‘Month’, ‘Year’</li>
+  <li>use a hint to show the expected date format, for example, ‘07 11 2022’</li>
+  <li>use a "text" vs "numeric" input type.</li>
+  <li>limit individual field character length.</li>
+  <li>require a four-digit year to avoid potential confusion.</li>
+</ul>
+
+<p>Do not:</p>
+
+<ul>
+  <li>auto-advance focus from one field to the next. This makes it difficult for keyboard-only users to navigate and correct mistakes.</li>
+  <li>use placeholder text as it disappears when the user starts typing and may not be accessible to all users.</li>
+  <li>use visual separators between fields.</li>
+  <li>disable copy and paste.</li>
+  <li>use in instances where only part of a date is needed, like a month or a year without a specific day.</li>
+</ul>
+
+<h2>How this component works</h2>
+
+<p>The three fields in the date input component are grouped together in a <code>fieldset</code> with a <code>legend</code> that describes them, as shown in the examples on this page. The legend is usually a question, such as 'What is your date of birth?'.</p>
+
+<p>Use the <code>autocomplete</code> attribute on the date input component when you're asking for a date of birth. This allows browsers to autofill the information on a user's behalf if they've entered it previously.</p>
+
+<p>The year input is set to accept only a four-digit number while the month and day inputs can accept up to a two-digit number.</p>
+
+<h2>Accessibility</h2>
+<p>All components are responsive and meet WCAG 2.1 AA accessibility guidelines.</p>

src/components/date-input/blank.hbs

@@ -0,0 +1,41 @@
+---
+title: Date input
+width: wide
+page: true
+---
+{{#>_layout-container}}
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date"
+      label="Date of birth"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-error"
+      label="Date of birth"
+      required=true
+      error-text="This field is required"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-success"
+      label="Date of birth"
+      valid-text="This field has been validated"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+
+{{/_layout-container}}

src/components/date-input/index.hbs

@@ -0,0 +1,52 @@
+---
+title: Date input
+width: wide
+tabs: true
+directory: date-input
+intro: 'A date input allows users to enter a date.'
+figma: 'URL'
+meta-description: 'A date input allows users to enter a date.'
+meta-index: true
+---
+
+<h4>Default</h4>
+{{#>_docs-example separated=true}}
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date"
+      label="Date of birth"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+{{/_docs-example}}
+
+<h4>Error</h4>
+{{#>_docs-example separated=true}}
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-error"
+      label="Date of birth"
+      required=true
+      error-text="This field is required"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+{{/_docs-example}}
+
+<h4>Success</h4>
+{{#>_docs-example separated=true}}
+<div class="nsw-form">
+  <div class="nsw-form__group">
+    {{>_date-input
+      id="date-success"
+      label="Date of birth"
+      valid-text="This field has been validated"
+      helper-text="For example 08 12 1990"
+    }}
+  </div>
+</div>
+{{/_docs-example}}

src/main.scss

@@ -9,6 +9,7 @@
 
 @import 'components/accordion/accordion';
 @import 'components/back-to-top/back-to-top';
+@import 'components/date-input/date-input';
 @import 'components/dialog/dialog';
 @import 'components/breadcrumbs/breadcrumbs';
 @import 'components/button/button';