Expands the API of the macro to allow nested
checkboxes to have a summary tracking the current
selection, the fieldset to expand/collapse and
buttons to be added to allow jumping between
states.
Includes making 'Done' button inline on mobile.
Helps differentiate it form the form submit.
For the upcoming user permissions enhancements we want to differentiate
between actions that take the user to a new page (eg changing a user’s
phone number or email address) and actions that reveal extra controls in
the current page (which will be changing the folders a team member can
see).
This change will be inconsistent with the interaction for scheduling a
job, which uses links to reveal other controls in the page.
This commit changes the scheduling interaction to use grey ‘secondary’
buttons for revealing extra controls in the page, for consistency with
the upcoming folder permissions work.
Since we added template folders the templates page has had a ‘medium’
sized heading, where other pages have stuck with a ‘large’ size.
This commit rationalises the decision around which pages have which
heading size:
- ‘navigation’ pages (eg templates, team members, email reply to
addresses) have medium sized headings
- transactional pages (ie ones which have a green button) keep the
larger heading size
We’ve stopped using them in favour of putting any ‘back’ link at the top
of the page. This commit removes them from the macro to make sure we
don’t accidentally reintroduce them.
The GOV.UK Design System back link component is sized (roughly) to the
contain the text and icon. Presumably this is so it’s safe to use in
various contexts.
Since we have control over the context is which it’s used, we can get
away with making the click area larger – in accordance with Fitt’s law –
without risking overlapping other page elements.
The Design System has standardised on back links being at the top of the
page, decorated with a small text-coloured arrow.
I think this makes more sense than having them at the bottom, because it
suggests, in some way, being able to go back before commiting to any of
the forms on the page. Whereas the things at the bottom of the page
should be performing actions on what’s in the page.
The reason for making this change now is that it de-clutters the area
around the green buttons. This was presenting a design challenge where
multiple levels of interaction were happening in the same form. Moving
these back links to the top of the page should mean that, in these
complicated forms, there’s one fewer thing to compete for the user’s
attention.
I’ve componentised this into a `page_header` macro so that the change is
easier to roll out and maintain.
The right aligned cells contain ‘Change’ links. These have a large
`border` to make the clickable area bigger. This commit removes the
`overflow: hidden` from these cells, so that the larger border remains
visible.
I think this is something we inherited from the Digital Marketplace
code. We only use this for organisation settings are the moment, but
the list markers are redundant because each item will never wrap onto a
new line; it will truncate instead. Still keeps a little sliver of
spacing just so it doesn’t look like a paragraph.
Most of the content of our ‘settings’ tables is in the value, not the
key. The value is in the middle column. So we should allocate the most
space to the value.
The previous layout was based on the premise that most pages divided the
grid like this:
```
_______ _______ _______ _______ _______ _______ _______ _______
| 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 |
| | | | |
| 2/8 | 2/8 | 2/8 | 2/8 |
| | | | |
|–Navigation––––|–Main column–––––––––––––––––––––––––––––––––––|
| | | |
| | 3/8 | 3/8 |
| | | |
| |–Label–––––––––––––––––|–Value––––––––––––Link–|
| | | |
|_______________|_______________________|_______________________|
```
This was because a lot of pages had a left column for emails, and a
right column for text messages, so it felt consistent for tables to
always default to 50% of the width of the main column.
This consistency has faded with time, especially as we added letters.
So this commit changes these tables to allocate more space to the
central column, but still sticking to the grid like this:
```
_______ _______ _______ _______ _______ _______ _______ _______
| 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 | 1/8 |
| | | | | | | | |
| 2/8 | 2/8 | 4/8 |
| | | |
|–Navigation––––|–Main column–––––––––––––––––––––––––––––––––––|
| | | | |
| | 2/8 | 3/8 | 1/8 |
| | | | |
| |–Label–––––––––|–Value–––––––––––––––––|–––Link|
|_______________|_______________|_______________________|_______|
```
Since there’s more space to display the value of a setting this commit
also truncates settings that are too long to fit in the width of the
column (for example a long email address) rather than the previous
behaviour of truncating them. This all just makes things look a bit
cleaner.
The gulp-base64 package has 11 dependencies with
vulnerabilities listed against them as of this
time. It also doesn't seem to be maintained any
more. The last commit was in 2015 and there are
issues and pull requests up to bump the
dependencies.
This replaces it with gulp-base64-inline.
gulp-base64-inline takes a single path, which it
prepends to any image paths it finds. Our image
paths are actually URLs, not filesystem paths so
we need to send it a relative path to repoint the
URL.
This commit includes changes that remove a few
`@import`s from one of our sass partials.
They aren't needed as those files are imported
further up the stack and `_typography.scss` has an
import in it that overwrites the new
`_url-helpers.scss` we added here.
The delete link was inheriting 1px of extra top padding meant to align
it when displayed alongside a button. In this case it’s not being
displayed alongside a button, so doesn’t need the extra padding.
When you’re entering numbers into a field we already add some extra
tracking to make it easier to read.
With this extra tracking the kerning looks a bit more even with the
tabular, not lining numbers. This makes sense because tabular numbers
are designed to be used where the content is numeric-only. Lining
numbers (the default) are more appropriate for numbers that are used in
passages of text.
Makes sure the tabindex we add for focusing is
removed.
Also removes the outer fieldset from the radios
for new templates. We don't wrap form buttons in
fieldsets anywhere else and it doesn't add any
useful semantics to the form.
Adds some extra styles so <fieldset>'s show as
focused when they are.
Also includes replacement of `overflow: hidden` on
sticky elements with a clearfix. hiding overflow
clips the outline and the clearfix can be used for
containing any floats instead. (I'm assuming that's
why it was set here.)
Bigger hit areas are generally better (cf Fitt’s law[1]), as long as
they’re not ambiguous.
This commit enlarges the hit area of the edit links (using a border) so
they fill the same vertical space as the smallest possible row (going
to the full height might look weird because some of these rows get very
tall).
Bigger hit areas are generally better (cf Fitt’s law[1]), as long as
they’re not ambiguous.
This commit enlarges the hit area of the edit links (using a border) so
they fill the same vertical space as the row they sit in.
We were removing the border to ‘unfold’ the corner of the page. This was
causing the size of the element to shrink.
This meant that it you hovered the bottom 1px of the element it would
cycle in and out of the hover state as fast as the browser could render
it.
This commit fixes that by making the border transparent, rather than
removing it.
Sometimes people print stuff under where we’re folding the letter. It’s
annoying to not be able to see it.
This commit adds a little detail where, once you’ve sent the letter
you can unfolds the corner to see what’s underneath.
It’s better that we do this for all letters for discoverability.
