Commit Graph

8767 Commits

Author SHA1 Message Date
Tom Byers
e1dc6ddaef Clean up JS files created by modules build
Any files left over can effect future builds.
2019-11-27 14:15:32 +00:00
Tom Byers
21f9ecfcda Make use of JS Modules less confusing
It's not obvious how the code that includes JS
Modules in the frontend build works.

This adds lots of comments to explain the various
bits and flattens `modules/all.mjs` to just be a
single function that starts off the window.GOVUK
namespace.

Also removes `module/all.js` from the repo'. It's
an artefact used by the frontend build so
shouldn't be included as source code.
2019-11-27 14:15:32 +00:00
Tom Byers
8890b7c4de Fix footer on smaller screens 2019-11-27 14:15:32 +00:00
Tom Byers
204a825f0b Put id back on cookie message for JS to hook onto 2019-11-27 14:15:32 +00:00
Tom Byers
cd877fe0db Add JS modules support & use for GOVUKFrontend
The JS for GOVUKFrontend components is available
individually so you can only include what you
need:

https://github.com/alphagov/govuk-frontend/blob/v2.13.0/docs/installation/installing-with-npm.md#option-2-import-javascript

This uses the JS Modules syntax:

*[JS module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

Our JS is delivered as one file so we need to use
a bundler to convert the modules to a single file.

This adds a build step to transpile all modules
into a single file, which is then added to the
files combined into the one that get delivered.

Rollup is used as the simplest bundler to use for
this purpose. It also introduces the least
boilerplate JS.

Note: the CommonJS plugin is needed as GOV.UK
Frontend components are published as UMD modules.

In future, this work should let us work on this
story dependencies:

https://www.pivotaltracker.com/story/show/165380360
2019-11-27 14:15:32 +00:00
Tom Byers
f962ef9400 Put footer content back into prescribed columns 2019-11-27 14:15:32 +00:00
Tom Byers
ec72bcd00c Fix issues raised in pull request
Includes:
- replacing of conditional with statement that
  returns the same values
- making lins to GDS page actually go there
2019-11-27 14:15:32 +00:00
Tom Byers
ae27e94a35 Remove GOVUK Template files
Includes Sass that targeted GOV.UK Template HTML
and also moves some link styles to `globals.scss`.

Also removes bits of frontend build that copied
over GOVUK Template files.
2019-11-27 14:15:32 +00:00
Tom Byers
2ded09a8b9 Fix tests broken by GOV.UK Frontend template
Fix test broken by removal of GOV.UK logo image
- tests/app/main/views/test_notifications.py

Fix tests that ref GOV.UK template CSS files
- tests/app/main/views/test_index.py

Fix test broken by govuk-visually-hidden
- tests/app/main/views/test_send.py

Fix tests broken by header menu link -> button
- tests/app/main/views/test_service_settings.py
- tests/app/main/views/test_template_folders.py

Fix tests broken by removing div#content
- tests/app/main/views/accounts/test_choose_accounts.py
- tests/app/test_navigation.py

Remove references to GOV.UK CSS
- tests/app/main/views/test_index.py

Fix tests querying the header navigation
- tests/app/test_navigation.py
2019-11-27 14:15:32 +00:00
Tom Byers
c1b8fb7531 Replace all visually-hidden classes
These have been replaced:

https://design-system.service.gov.uk/get-started/updating-your-code/#helper-class-names
2019-11-27 14:15:32 +00:00
Tom Byers
c06c8c0e5c Put basic print stylesheet back in
Replicates the GOV.UK template one, adjusted for
the GOV.UK Frontend template HTML.
2019-11-27 14:15:32 +00:00
Tom Byers
ab4ec7197a Put cookies message back in
The cookie_message block was part of GOV.UK
template but is not included in the GOV.UK
Frontend template.

This adds it back in along with JS to set the
cookies from GOV.UK template and styles, taken
from the Design System's website (which I assume
has the right colour contrast).
2019-11-27 14:15:32 +00:00
Tom Byers
e1b7042ea3 Add js-hidden class to globals.scss
It's used by the conditional content pattern
from GOV.UK Elements (which uses JS from the
GOV.UK Frontend Toolkit).
2019-11-27 14:15:32 +00:00
Tom Byers
a2075ecdd2 Replace removed global GOV.UK Template styles
GOV.UK Template included styles targeting elements
by their tag name, so affected all elements of
that type. Removing these files removes certain
styles from the top of the cascade.

Moving all components to GOV.UK Frontend (that are
possible) should fix this further down the
cascade. This adds them back to plug the gap in
the cascade until that work happens.
2019-11-27 14:15:32 +00:00
Tom Byers
bc8ebad421 Set vertical spacing for <main>
GOV.UK Frontend gives `<main>` different padding
on the top and bottom to us.

This adds our spacing to `<main>` for pages
without a side nav (except the product page which
is special) and to the row containing the `<main>`
and side nav sections on pages that have a side
nav.
2019-11-27 14:15:32 +00:00
Tom Byers
892ea01fad Update content area blocks in descendent pages
GOV.UK Frontend's template wraps all content in a
`<main>` tag and puts it in the main column.

Some of Notify's pages need to reach out of the
main column (product page).

Some have several blocks of navigation before the
main content area.

This adjusts the blocks in all the templates
where this is the case so those conditions can be
met.
2019-11-27 14:15:32 +00:00
Tom Byers
9441dd0b37 Make <main> section position: relative
The content of the GOV.UK Frontend header
component is `position: relative`. This changed
the [default z-index
stacking](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index_
so it was above `<main>`.

This aligns `<main>` with the header, meaning
`<main>` appears above it due to being below it in
the document.
2019-11-27 14:15:32 +00:00
Tom Byers
19f4faafd1 Make theme colour (border below masthead) work
Ours is used to indicate the different
environments:
- local
- preview
- staging
- production
2019-11-27 14:15:32 +00:00
Tom Byers
abbc0328d3 Update page title block name on signed out page
Now matches the block from the GOVUKFrontend
template.

This is the only page not suffixed by "GOV.UK
Notify" so has it's specific content for this
block.
2019-11-27 14:15:32 +00:00
Tom Byers
223f4a1ff3 Add GOV.UK Frontend JS
This includes the JS for all GOV.UK Frontend code.
If our frontend build includes a module bundler in
future, we should only include the JS for the
components we use, as with our Sass.
2019-11-27 14:15:32 +00:00
Tom Byers
f26ea5b3d8 Make header & footer components look like Notify
Notify has 4 columns of links in the footer and
its header navigation aligns to the right on
desktop.
2019-11-27 14:15:32 +00:00
Tom Byers
bf9b65f26b Add GOVUK Frontend footer component
Replaces the following blocks/variables with the
`footer` block filled by the `notify_footer`
macro:
- footer_top
- footer_support_links

Our current footer has a few differences
with the GOVUK Frontend one:
1. the columns of links and the meta links have no
  headings, visible or structural
2. the line of text saying GDS built this prefixes
  the meta links whereas theirs sits on a new
  link, after them
2019-11-27 14:15:31 +00:00
Tom Byers
2271ff3d56 Use header component for masthead
Replaces the following blocks/variables with the
`header` block filled by the `header` component:
- header_class
- proposition_header
- global_header_text
- homepage_url

Also rewrites code that selects header nav items

The original code inserts a class name to mark the
nav item as selected.

The GOVUK Frontend header just needs a boolean to
be passed to indicate an item is selected.

This uses the `header_navigation.is_selected`
method, as before, but changes its return value to
a boolean.
2019-11-27 14:15:31 +00:00
Tom Byers
af95b4b45a Add GOVUK Frontend version of govuk_template
`admin_template.html` is the base layout used by
all pages in the application.

This swaps out its dependance on govuk_template
for the version GOVUK Frontend provides.

Also renames blocks used in `admin_template.html`,
defined in both the old and new govuk_template
whose names have changed, as listed in:

https://design-system.service.gov.uk/styles/page-template/
2019-11-27 14:15:31 +00:00
Tom Byers
17808f5ac2 Add GOVUK Frontend to the frontend build
- copies across the images
- adds the Sass folder to the Sass include paths

JS is added file-by-file so will be added when
specific files are needed.
2019-11-27 14:15:31 +00:00
Tom Byers
6712327315 Add GOVUK Frontend Sass, configured for this app
Like:

https://github.com/alphagov/govuk-frontend/blob/v2.13.0/package/all.scss

...but specifying the components to include,
starting with the ones that make up the
govuk_template and setting any variables needed.
2019-11-27 14:15:31 +00:00
Chris Hill-Scott
5d4a0ee9ff Merge pull request #3199 from alphagov/show-recipient-trial-mode
Show who the recipient is even in trial mode
2019-11-27 13:48:19 +00:00
Chris Hill-Scott
0d202786d0 Show who the recipient is even in trial mode
Trial mode should let you preview the letter the same as live mode,
except for being able to actually end the letter.

Showing the recipient helps people understand how the feature works.
2019-11-27 12:11:32 +00:00
Chris Hill-Scott
4fc8f5b5d1 Merge pull request #3197 from alphagov/recipient-spacing-upload
Fix spacing of address on uploaded letter preview
2019-11-27 11:51:16 +00:00
Chris Hill-Scott
4220cc084d Merge pull request #3185 from alphagov/breaking-change-api-only
Only show the breaking change page to teams who use the API
2019-11-27 11:51:09 +00:00
Chris Hill-Scott
bf385486cf Update test with multiple placeholders added
It wasn’t possible to test for this before because the order of
placeholders was non-deterministic. The order has been made
deterministic in https://github.com/alphagov/notifications-utils/pull/674
2019-11-27 11:30:14 +00:00
Chris Hill-Scott
98edecbe29 Stop recipient address wrapping to multiple lines
Stops the sticky footer getting too tall. Added a title attribute so
people can hover and see the whole thing if they really need to.
2019-11-27 11:24:50 +00:00
Chris Hill-Scott
534be751dd Make developer instructions more explicit
The previous ‘you need to update your API calls’ text isn’t clear enough
now that the context of the spreadsheet has been removed.
2019-11-27 10:37:29 +00:00
Chris Hill-Scott
4c6822b037 Simplify HTML
Without the spreadsheet on the page we don’t need the wrapping elements
which were used to add extra spacing.
2019-11-27 10:37:29 +00:00
Chris Hill-Scott
fcadab3ce8 Remove spreadsheet example from breaking change
Since we’re only showing this page to team who are using the API we
don’t have to worry about explaining what’s going on in terms of the
spreadsheet any more.

This makes the page simpler.
2019-11-27 10:37:29 +00:00
Chris Hill-Scott
dbc85fcc1f Only show breaking change page to API users
We introduced the ‘breaking change’ page[1] partly to help teach people
about the relationship between the placeholders in their template and
the data they were providing. Data can be provided either by API or by
uploading a spreadsheet. The users who we struggled to communicate this
relationship to were the ones using the upload a spreadsheet feature.

We made two changes to the context of this feature:

1. Around the same time we introduced the interactive tour[2], which
   ultimately proved to be the thing that helped people understand the
   relationship between the data they were providing and the
   placeholders in the template.

2. We introduced a way for people to send one-off messages without
   using the API or uploading a spreadsheet[3]. So for this page to say
   that you’ll need to update a spreadsheet or change an API call if you
   change the placeholders in your template is no longer accurate.

Therefore I think it makes sense to only show this page to teams who are
using the API to send messages. The best proxy we have for that is to
look at whether they’ve created any API keys.

***

1. https://github.com/alphagov/notifications-admin/pull/631
2. https://github.com/alphagov/notifications-admin/pull/613
3. https://github.com/alphagov/notifications-admin/pull/1293
2019-11-27 10:37:28 +00:00
Rebecca Law
c51f6de1d6 Merge pull request #3138 from alphagov/get-zendesk-tickets
Rough little script to get Zendesk tickets for support analysis.
2019-11-27 10:29:30 +00:00
Chris Hill-Scott
9084dc8996 Fix spacing of address on uploaded letter preview
Just looks a bit more even/balanced with a bit less space above and
below than a normal paragraph.

Doing this using modifier classes so it will be easy to migrate to the
design system.
2019-11-26 14:32:39 +00:00
Tom Byers
da37ae4868 Merge pull request #3196 from alphagov/revert-3195-replace-govuk-template-with-govuk-frontend-components-rewrite
Revert "Replace govuk template with govuk frontend components - rewrite"
2019-11-26 12:24:17 +00:00
Tom Byers
e09d510ab8 Revert "Replace govuk template with govuk frontend components - rewrite" 2019-11-26 12:14:09 +00:00
Tom Byers
653ab5e512 Merge pull request #3195 from alphagov/replace-govuk-template-with-govuk-frontend-components-rewrite
Replace govuk template with govuk frontend components - rewrite
2019-11-26 11:16:00 +00:00
Tom Byers
9c5acd8756 Remove gitignore reference to govuk_template
This change was missing from the previous pull
request.
2019-11-26 11:01:15 +00:00
Tom Byers
73d846cc61 Move GOVUK Frontend templates from node_modules
`node_modules` isn't available in a live
environment so the `.njk` templates we're now
using from GOVUK Frontend need to go in the repo'
code.

Adds them in a new `app/templates/vendor` folder
to match how we do that in
`app/assets/stylesheets`.
2019-11-26 11:01:06 +00:00
Tom Byers
0ff6054dac Move global CSS to top of cascade
The global CSS we're keeping from the GOVUK
Template styles needs to go in the same position
as it was before, above GOVUK Elements.

This means we can't use any variables from GOVUK
Frontend in it so this changes the link colour
back to what it was (until all links get updated).
2019-11-25 11:43:30 +00:00
Tom Byers
0e10879ef2 Switch to using gulp-better-rollup
Means our rollup bundling doesn't leave any
artefact files lying around that we'd then have to
deal with.

Also includes:
- removal of some JSHint config' marking the
  artefacts as scripts to ignore
- use of streamqueue package to allow the same
  ordering of scripts as before
2019-11-25 11:43:30 +00:00
Tom Byers
e034f5b77a Clean up JS files created by modules build
Any files left over can effect future builds.
2019-11-25 11:43:30 +00:00
Tom Byers
549e167cc8 Make use of JS Modules less confusing
It's not obvious how the code that includes JS
Modules in the frontend build works.

This adds lots of comments to explain the various
bits and flattens `modules/all.mjs` to just be a
single function that starts off the window.GOVUK
namespace.

Also removes `module/all.js` from the repo'. It's
an artefact used by the frontend build so
shouldn't be included as source code.
2019-11-25 11:43:30 +00:00
Tom Byers
0aa7b7c3cd Fix footer on smaller screens 2019-11-25 11:43:30 +00:00
Tom Byers
633a30bcdf Put id back on cookie message for JS to hook onto 2019-11-25 11:43:30 +00:00
Tom Byers
85f0543b11 Add JS modules support & use for GOVUKFrontend
The JS for GOVUKFrontend components is available
individually so you can only include what you
need:

https://github.com/alphagov/govuk-frontend/blob/v2.13.0/docs/installation/installing-with-npm.md#option-2-import-javascript

This uses the JS Modules syntax:

*[JS module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

Our JS is delivered as one file so we need to use
a bundler to convert the modules to a single file.

This adds a build step to transpile all modules
into a single file, which is then added to the
files combined into the one that get delivered.

Rollup is used as the simplest bundler to use for
this purpose. It also introduces the least
boilerplate JS.

Note: the CommonJS plugin is needed as GOV.UK
Frontend components are published as UMD modules.

In future, this work should let us work on this
story dependencies:

https://www.pivotaltracker.com/story/show/165380360
2019-11-25 11:43:30 +00:00