Skip to content

Commit

Permalink
Update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
alex-ju committed Jul 4, 2018
1 parent d22973b commit 5b676ca
Show file tree
Hide file tree
Showing 2 changed files with 267 additions and 51 deletions.
170 changes: 125 additions & 45 deletions src/components/date-input/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,33 +29,33 @@ Find out when to use the date input component in your service in the [GOV.UK Des

<div class="govuk-date-input" id="dob">

<div class="govuk-date-input__item govuk-date-input__item--day">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day">
Day
</label>

<input class="govuk-input govuk-date-input__input" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--month">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month">
Month
</label>

<input class="govuk-input govuk-date-input__input" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--year">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year">
Year
</label>

<input class="govuk-input govuk-date-input__input" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
</div>
</div>

Expand All @@ -81,13 +81,16 @@ Find out when to use the date input component in your service in the [GOV.UK Des
},
"items": [
{
"name": "day"
"name": "day",
"classes": "govuk-input--width-2"
},
{
"name": "month"
"name": "month",
"classes": "govuk-input--width-2"
},
{
"name": "year"
"name": "year",
"classes": "govuk-input--width-4"
}
]
}) }}
Expand Down Expand Up @@ -115,33 +118,33 @@ Find out when to use the date input component in your service in the [GOV.UK Des

<div class="govuk-date-input" id="dob-errors">

<div class="govuk-date-input__item govuk-date-input__item--day">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-errors-day">
Day
</label>

<input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-errors-day" name="undefined-day" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-errors-day" name="day" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--month">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-errors-month">
Month
</label>

<input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-errors-month" name="undefined-month" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-errors-month" name="month" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--year">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-errors-year">
Year
</label>

<input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-errors-year" name="undefined-year" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4 govuk-input--error" id="dob-errors-year" name="year" type="number" pattern="[0-9]*">
</div>
</div>

Expand Down Expand Up @@ -170,15 +173,15 @@ Find out when to use the date input component in your service in the [GOV.UK Des
"items": [
{
"name": "day",
"classes": "govuk-input--error"
"classes": "govuk-input--width-2 govuk-input--error"
},
{
"name": "month",
"classes": "govuk-input--error"
"classes": "govuk-input--width-2 govuk-input--error"
},
{
"name": "year",
"classes": "govuk-input--error"
"classes": "govuk-input--width-4 govuk-input--error"
}
]
}) }}
Expand Down Expand Up @@ -206,33 +209,33 @@ Find out when to use the date input component in your service in the [GOV.UK Des

<div class="govuk-date-input" id="dob-day-error">

<div class="govuk-date-input__item govuk-date-input__item--day">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day-error-day">
Day
</label>

<input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-day-error-day" name="dob-day-error-day" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--month">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day-error-month">
Month
</label>

<input class="govuk-input govuk-date-input__input" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day-error-month" name="dob-day-error-month" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--year">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day-error-year">
Year
</label>

<input class="govuk-input govuk-date-input__input" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-day-error-year" name="dob-day-error-year" type="number" pattern="[0-9]*">
</div>
</div>

Expand Down Expand Up @@ -262,13 +265,15 @@ Find out when to use the date input component in your service in the [GOV.UK Des
"items": [
{
"name": "day",
"classes": "govuk-input--error"
"classes": "govuk-input--width-2 govuk-input--error"
},
{
"name": "month"
"name": "month",
"classes": "govuk-input--width-2"
},
{
"name": "year"
"name": "year",
"classes": "govuk-input--width-4"
}
]
}) }}
Expand Down Expand Up @@ -296,33 +301,33 @@ Find out when to use the date input component in your service in the [GOV.UK Des

<div class="govuk-date-input" id="dob-month-error">

<div class="govuk-date-input__item govuk-date-input__item--day">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month-error-day">
Day
</label>

<input class="govuk-input govuk-date-input__input" id="dob-month-error-day" name="dob-month-error-day" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month-error-day" name="dob-month-error-day" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--month">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month-error-month">
Month
</label>

<input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2 govuk-input--error" id="dob-month-error-month" name="dob-month-error-month" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--year">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month-error-year">
Year
</label>

<input class="govuk-input govuk-date-input__input" id="dob-month-error-year" name="dob-month-error-year" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-month-error-year" name="dob-month-error-year" type="number" pattern="[0-9]*">
</div>
</div>

Expand Down Expand Up @@ -351,14 +356,16 @@ Find out when to use the date input component in your service in the [GOV.UK Des
},
"items": [
{
"name": "day"
"name": "day",
"classes": "govuk-input--width-2"
},
{
"name": "month",
"classes": "govuk-input--error"
"classes": "govuk-input--width-2 govuk-input--error"
},
{
"name": "year"
"name": "year",
"classes": "govuk-input--width-4"
}
]
}) }}
Expand Down Expand Up @@ -386,33 +393,33 @@ Find out when to use the date input component in your service in the [GOV.UK Des

<div class="govuk-date-input" id="dob-year-error">

<div class="govuk-date-input__item govuk-date-input__item--day">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year-error-day">
Day
</label>

<input class="govuk-input govuk-date-input__input" id="dob-year-error-day" name="dob-year-error-day" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-year-error-day" name="dob-year-error-day" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--month">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year-error-month">
Month
</label>

<input class="govuk-input govuk-date-input__input" id="dob-year-error-month" name="dob-year-error-month" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-year-error-month" name="dob-year-error-month" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item govuk-date-input__item--year">
<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year-error-year">
Year
</label>

<input class="govuk-input govuk-date-input__input govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="number" pattern="[0-9]*">
<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4 govuk-input--error" id="dob-year-error-year" name="dob-year-error-year" type="number" pattern="[0-9]*">
</div>
</div>

Expand Down Expand Up @@ -441,18 +448,91 @@ Find out when to use the date input component in your service in the [GOV.UK Des
},
"items": [
{
"name": "day"
"name": "day",
"classes": "govuk-input--width-2"
},
{
"name": "month"
"name": "month",
"classes": "govuk-input--width-2"
},
{
"name": "year",
"classes": "govuk-input--error"
"classes": "govuk-input--width-4 govuk-input--error"
}
]
}) }}

### Date input with default items

[Preview the Date input with default items example](http://govuk-frontend-review.herokuapp.com/components/date-input/with-default-items/preview)

#### Markup

<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="dob-hint" role="group">

<legend class="govuk-fieldset__legend">
What is your date of birth?
</legend>

<span id="dob-hint" class="govuk-hint">
For example, 31 3 1980
</span>

<div class="govuk-date-input" id="dob">

<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-day">
Day
</label>

<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-day" name="dob-day" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-month">
Month
</label>

<input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--width-2" id="dob-month" name="dob-month" type="number" pattern="[0-9]*">
</div>
</div>

<div class="govuk-date-input__item">
<div class="govuk-form-group">
<label class="govuk-label govuk-date-input__label" for="dob-year">
Year
</label>

<input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--width-4" id="dob-year" name="dob-year" type="number" pattern="[0-9]*">
</div>
</div>

</div>
</fieldset>

</div>

#### Macro

{% from "date-input/macro.njk" import govukDateInput %}

{{ govukDateInput({
"id": "dob",
"name": "dob",
"fieldset": {
"legend": {
"text": "What is your date of birth?"
}
},
"hint": {
"text": "For example, 31 3 1980"
}
}) }}

## Requirements

### Build tool configuration
Expand Down
Loading

0 comments on commit 5b676ca

Please sign in to comment.