All paragraphs should have class="govuk-body", or be otherwise
custom-styled. This commit adds some extra checks to our test fixture
that looks for paragraphs that don’t have any styling. Our test coverage
is pretty good, so this should check almost all pages, and prevent
regressions.
I’ve done this in such a way that it can be extended for other elements
(e.g. links) in the future.
This commit does two things:
- brings the ‘All organisations’ page back within the platform admin
part of the site (because it’s hard to find otherwise)
- makes the layouts of all the pages within platform admin a bit closer
to the service-specific pages in terms of heading sizes, spacing, etc
so that moving between them doesn’t feel so jumpy
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`
Includes:
- turning off :visited styles to match existing
design
- swapping heading classes used to make links bold
for the GOVUK Frontend bold override class
- adding visually hidden text to some links to
make them work when isolated from their context
We may need to revisit whether some links, such as
those for documentation and features, may benefit
from having some indication that their target has
been visited.
Includes:
- turning off :visited styles to match existing
design
- swapping heading classes used to make links bold
for the GOVUK Frontend bold override class
- adding visually hidden text to some links to
make them work when isolated from their context
We may need to revisit whether some links, such as
those for documentation and features, may benefit
from having some indication that their target has
been visited.
This replaces the buttons that aren't part of a macro and that we don't
need to write additional styles for with their govuk-frontend equivalent.
There were some links that were styled to look like buttons, so these
have also been replaced with the new govuk-frontend macro.
There was one button on the `choose-account.html` template that was in a
section of code that was never reached - this has been deleted.
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.
We’re deprecating storing the domain as text on a branding in favour of
a database relationship between branding and organisation.
We need to do this now in order to remove the validation on these fields
(which depends on the data in `domains.yml`)
This is a platform admin page which lists all letter brands and their
domain. Once the page to edit a letter brand has been created, each
brand will link to its edit page, but for now this is just a list of
brand names and domains.
it wouldn't show search if there were under a certain amount of letter
or email branding options - however we know there will always be more
than that amount so lets remove some complexity.
Also, rename the SearchTemplatesForm because it can search anything -
it just prompts you to search by name is all.
This introduces a validator to validate that the name field is not empty
on the ServiceUpdateEmailBranding form, but only if the form details are
being submitted. If a file is being uploaded, the name is allowed to be
empty.
The owner is often repetetive, eg
> *Hackney Council*
> Default for Hackney Council
Instead it’s more useful to reflect what the person setting up the brand
has entered – the domain.
This also adds an empty hint for non-default brands so that the page is
evenly spaced and nothing overlaps.
This will stop us repeatedly forgetting to add `novalidate` and
`autocomplete='off'` to our forms (which is how most of them are set
up).
It uses sensible defaults, based on how we most-commonly configure
forms:
- most of our forms are `post`ed (but this can be overridden)
- `autocomplete` should only be enabled where it makes sense, otherwise
it’s more annoying than useful (but this can be overriden)
- we should never be using HTML5 form validation because our own error
styles and messages are better
So that:
- we can see when a brand should be getting used as a default but isn’t
- we’re careful updating brands which will get auto-applied to new
services
Selecting a branding just takes you to a new page, it doesn’t change
any state.
Links are generally the way you go from one page to another on the web.
One of the most frequent tasks done on this page is adding a new
branding.
Current to do this you have to:
- scroll to the bottom
- scan for the ‘Create a new email branding’ option that visually looks
just like all the other brandings
- submit a form
This commit makes change it to one clearly differentiated button at the
top of the page. This is consistent for how we let users add templates
and team members.
This commit improves the code that previews a hex colour when setting up
or changing an email branding.
Specifically it:
- refactors the Javascript to conform to our patterns (module pattern,
preprocessed with Gulp)
- makes the code work when there are multiple colour previews on one
page
It also does some visual prettifying, because I couldn’t help myself…
