- Deleted /stylesheets folder
- Removed sass build from gulpfile
- Changed gov links to usa links
- Changed other govuk styles, like breadcrumbs
- Changed name of uk_components file to us_components
- Fixed a few tests that broke on account of the changes
The page_header macro includes an optional back link. Since the
page_header is always used inside `<main>`, where the back link should
not be, this stops setting the back link in the page header and instead
sets it in the new `backLink` block.
When we converted textboxes on Notify to govuk-frontend design system
style with @tombye , we did not remove the imports.
This work is now done in this commit.
Some things that will still stay in our repo for now:
textbox macro in our components folder and associated css
textboxes which are really textarea fields (🤷 how do they work)
textboxes on the styleguide page
We should revisit this when we convert textarea fields
to govuk-frontend.
Converts them directly in the following forms:
- LoginForm
- ConfirmPasswordForm
Changes the password function to return
GovukPasswordField instead of PasswordField which
effects the following forms:
- RegisterUserForm
- RegisterUserFromInviteForm
- RegisterUserFromOrgInviteForm
- NewPasswordForm
- ChangePasswordForm
It also updates StringField on RegisterUserFromOrgInviteForm
to GovukTextInputField
Also includes changes to templates that use this
form and associated tests.
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`
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.
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
Did most of this work in:
https://github.com/alphagov/notifications-admin/pull/1118
> 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.
Pages that don’t have navigation shouldn’t extend the top-level admin
template directly.
They should extend `withoutnav_template.html` instead, because then they
get a wrapping `<main>` element, which is good semantically and for
accessibility, and also defaults the font size to `19px`.
This commit adds an extra page or field for confirming your current password
when making important changes
Name | Email address | Mobile number | Password
---------------------|-------------------|-------------------|------------
No password required | As second page | As second page | On same page as new password
