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.
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.
HighlightTags was bad because:
- we haven’t called placeholders ‘tags’ for a long time
- it also does resizing of the `<textarea>`, not just highlighting the
placeholders
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.
In pages specific to a service (e.g. dashboard and sub pages) the title
needs to distinguish which service it applies to. This is mainly to give
context to screen reader users who could be managing multiple services.
Implementing this uses template inheritance:
`page_title` includes `per_page_title` includes `service_page_title`
‘GOV.UK Notify’ is inserted into every page title.
Pages that set `service_page_title` get the service name inserted too.
We have a couple of places now where we want nice lists made from `list`s, eg
- ‘name’, ‘date’ and ‘phone number’
- ((firstname)) ((lastname)) or ((date))
This commit adds a more generic component for doing this, which can handle:
- 1, 2, and n items
- comma (or other character) separated lists
- a conjunction between the last and one-before-last item
- characters to be inserted before and after each item, eg an opening and
closing HTML tag
It also pulls the `list_of_placeholders` component from the breaking change
page, and makes it use the `formatted_list` component under the hood.
This commit refactors the `email_message` and `sms_message` UI components to
take fewer parameters.
`name`, `edit_link` and anything to do with versions are identical for both
text and email messages so I’ve moved them to the pages where you choose a
template or see the versions.
This commit also tidies up the wording and styling of the template history
stuff.
When a table is showing the contents of a CSV file, it should look
something like a spreadsheet.
The minimally skeuomorphic way to do this is by adding row numbers.
This commit doesn’t
- make the row numbers monospace (it’s barely noticeable and doesn’t
reflect what actual spreadsheets do)
- make the first column heading ‘Row’ (again, doesn’t reflect how actual
spreadsheets work, and takes up more valuable space)
The yes/no pattern didn’t work too well, because:
- it didn’t read naturally as a question and answer
- often users left them completely unclicked if they didn’t want to set
the permission (rather than clicking no)
This commit changes both the invite and edit user pages to use
checkboxes to set permissions. If also rewords these pages to read more
naturally, and explain what the permissions mean.
This meant changing some of the view logic around invites and
persmissions, and I ended up refactoring a bunch of it because I found
it hard to understand what was going on.
> Tabular numbers have numerals of a standard fixed width. As all numbers have
> the same width, sets of numbers may be more easily compared. We recommend
> using them where different numbers are likely to be compared, or where
> different numbers should line up with each other, eg in tables.
The big number pattern is good candidate for tabluar numbers, especially if
we ever have these numbers update dynamically (in that case tabular numbers
won’t jump around like lining ones would).
We’ve fiddled around with the banners quite a lot in the last few days. This
commit reviews some of the older examples and makes sure that they’re:
a) not broken
b) using the most appropriate banner for the context
This commit brings back the ‘link under the green button’ bit of the page footer
component.
Previous it had been changed to be a grey button. But there are use cases for
both, maybe even simultaneously.
- remove black border from banner
- make banners have internal columns
- make nav 2/3rd width, 19px text and more spaced out
- only show the ‘restricted mode’ banner where it’s needed
- rename ‘restricted mode’ to ‘trial mode’
Banners should always be the first thing on the page.
Because headers already have padding we don’t want to put padding on the
container.
So banners should also have top padding to distance then from the red bar.
They should also sit in the 3/4 column if the page has side navigation. This
commit adds a new template (`withoutnav_template.html`) which extends
`admin_template.html`. All views then extend one or the other, never the
`admin_template.html` directly. This means that `admin_template.html` doesn’t
have to make decisions about where the flash messages are displayed.
From the:
- dashboard
- activity page
This info will be confusing for users at the hack day, because it will say
they’ve already sent messages when they first sign up.
This involved changing the table macro to have a nice ‘no rows’ message.
This commit adds a component for showing an API key. Usage:
```jinja
{{ from 'components/api-key.html' import api_key }}
{{ api_key('e1b0751388f3cd0fc9982c701acdb3c2') }}
```
Depending on the user’s browser, it works in three different ways.
No Javascript
---
The API key is shown on the page.
Older browsers with Javascript
---
The API key is hidden, and users can click a button to reveal it.
Newer browsers that support copying to clipboard without Flash
---
As above, but when the key is shown there is a button which copies it to the
clipboard. This is acheived by using
[this polyfill](https://www.npmjs.com/package/query-command-supported)
to reliably detect browser support for the ‘copy’ command.
The styling of the component is a bit different to the initial sketch. I think
a grey button works better than green. Green feels like it’s going to take you
somewhere else.
This macro:
- accepts a WTForm form field as a parameter
- renders a form field which follows the GOV.UK Elements patterns, both visually
and in markup terms
It then changes any page which uses either:
- the old, non-WTForms macro or
- the old, WTFforms `render_field` macro
…to use this new macro and removes both of the old ones.
It also adds the option to display hint text above the textbox.
Message status was almost identical to banner, visually and semantically.
This consolidates the two into one component.
This means adding an extra parameter which controls whether or not the banner
has a tick (with and without a tick are the only two variations currently).
There are now quite a few frontend components in the app.
It’s good to have a reference for them to:
- document for developers what patterns are available and how they are used
- check for regressions
- when working on one variation of a pattern you can check that your changes
don’t break other variations of it
- when changing the arguments to a pattern you can check that this doesn’t
change the expected arguments already in use
This commit adds a single page (`/_styleguide`) which has examples of all the
patterns.
