We use a hack to extend the focus style of single
links in template list items (those not part of a
path of links).
This extended the 'focus box' downwards so it
covered the hint text below the link by the height
of the link (which is block-level).
Problems happen if the link wraps to multiple
lines. The hint is always on one line so the focus
looks over-extended.
These changes guard against those problems by
using the line-height instead of the block-height.
They include adding a Sass function to reference
the line-heights in GOVUK Frontend's Sass API:
https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-typography-scale
ListEntry component uses FieldList field to group
textboxes. Textboxes can be text inputs, email fields
or international phone number fields. This converts
all field-lists to use:
- GovukTextInputField
- GovukEmailField
- InternationalPhoneNumber
Affects these forms:
- OrganisationDomainsForm
- GuestList
Also changes to related Javascript:
Update list-entry JS tests to match new HTML
Updates the HTML the JS operates on in the test
(a fixture representing the HTML in the page on
load) to match the new GOVUK Frontend we are
generating.
Make list-entry JS work with GOVUK Frontend HTML
The existing list-entry JS did a few things that
clashed with how the new HTML works:
- added a 'input-' prefix to the id attributes
of all text-inputs
- did not make its name and id attributes values
match
The new HTML has id and name attributes that
match so these changes remove the prefix for id
attributes and makes them match the name
attribute.
To understand these changes, it is useful to
know how the values for id and name attributes are
generated:
1. the id attribute for the component element is
stored
2. the 'list-entry-' prefix is removed and the
remainder is used to generate ids
For example, if the component's id is
'list-entry-domains', the id will be 'domains-1',
where the text-input is the first one.
This also adds some logic to the HoganJS template
to make the value attribute optional, so it is
only added if it has a non-null value. This
matches the behaviour of the text-input component
used in the new list-entry component.
Also change whitelist references to guestlist in tests
- we forgot to do it earlier, when we moved from calling this
feature whitelist to calling it guestlist.
We had 7 classes in _grids.scss named `.column-...` which were being
used to give a certain column width. These worked by using `@include
grid column()`, which is now deprecated.
`.column-whole` and `.column-three-quarters` can be removed and replaced
with `govuk-grid-column-full` and `govuk-grid-column-three-quarters`
respectively. The other column classes don't have a direct replacment in
GOV.UK Frontend. To get round this, we overwrite the `$govuk-grid-width`
SASS map in `extensions.scss` to add in extra widths, then use this with
the `govuk-grid-column` mixin to create new classes in for our custom
widths in `_grids.scss`
This colour is used in a few places so worth
making into its own block and classes.
Note: this establishes a
`app/assets/stylesheets/local` folder for any Sass
files whose names clash with files from vendored
libraries.
`_typography.scss` already exists in GOV.UK
Elements Sass.
This will no longer be needed when GOV.UK Elements
is gone and GOV.UK Frontend is at version 3, where
all its folders are in a `govuk` folder.
This colour is used in a few places so worth
making into its own block and classes.
Note: this establishes a
`app/assets/stylesheets/local` folder for any Sass
files whose names clash with files from vendored
libraries.
`_typography.scss` already exists in GOV.UK
Elements Sass.
This will no longer be needed when GOV.UK Elements
is gone and GOV.UK Frontend is at version 3, where
all its folders are in a `govuk` folder.
