Commit Graph

8720 Commits

Author SHA1 Message Date
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
Tom Byers
22896596ea Put footer content back into prescribed columns 2019-11-25 11:43:30 +00:00
Tom Byers
d695823d55 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-25 11:43:30 +00:00
Tom Byers
c8de91c161 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-25 11:43:30 +00:00
Tom Byers
9ac9c6d7d6 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-25 11:43:30 +00:00
Tom Byers
2bd7ce8cf6 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-25 11:43:30 +00:00
Tom Byers
d435301895 Put basic print stylesheet back in
Replicates the GOV.UK template one, adjusted for
the GOV.UK Frontend template HTML.
2019-11-25 11:43:30 +00:00
Tom Byers
b9c035fdab 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-25 11:43:30 +00:00
Tom Byers
3109f733ff 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-25 11:43:30 +00:00
Tom Byers
32eaebbe1e 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-25 11:43:30 +00:00
Tom Byers
5b11b63e07 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-25 11:43:30 +00:00
Tom Byers
9415a0bf3f 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-25 11:43:30 +00:00
Tom Byers
f692d876f3 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-25 11:43:30 +00:00
Tom Byers
496d5d1de1 Make theme colour (border below masthead) work
Ours is used to indicate the different
environments:
- local
- preview
- staging
- production
2019-11-25 11:43:30 +00:00
Tom Byers
9b89ce4853 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-25 11:43:30 +00:00
Tom Byers
fa92fa58bd 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-25 11:43:30 +00:00
Tom Byers
a2367bcab8 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-25 11:43:30 +00:00
Tom Byers
5ce63851e6 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-25 11:43:30 +00:00
Tom Byers
be2f246995 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-25 11:43:30 +00:00
Tom Byers
0d21d5124e 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-25 11:43:30 +00:00
Tom Byers
d26ef59182 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-25 11:43:30 +00:00
Tom Byers
47f1e90546 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-25 11:43:30 +00:00
Tom Byers
2a75f1ba22 Merge pull request #3194 from alphagov/revert-3158-replace-govuk-template-with-govuk-frontend-components
Revert "Replace govuk template with govuk frontend components"
2019-11-25 10:45:48 +00:00
Tom Byers
e02f94f238 Revert "Replace govuk template with govuk frontend components" 2019-11-25 10:37:35 +00:00
Tom Byers
db255c7cf3 Merge pull request #3158 from alphagov/replace-govuk-template-with-govuk-frontend-components
Replace govuk template with govuk frontend components
2019-11-25 10:21:33 +00:00
Tom Byers
c93acf2362 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-22 17:45:46 +00:00
Tom Byers
aff73293e4 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-22 17:45:45 +00:00
Tom Byers
3f420be0b7 Clean up JS files created by modules build
Any files left over can effect future builds.
2019-11-22 17:45:45 +00:00
Tom Byers
672d4cb6e9 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-22 17:45:45 +00:00
Tom Byers
e441e038ea Fix footer on smaller screens 2019-11-22 17:45:45 +00:00
Tom Byers
0c154ad604 Put id back on cookie message for JS to hook onto 2019-11-22 17:45:45 +00:00
Tom Byers
efe7e2f35e 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-22 17:45:45 +00:00
Tom Byers
3511f0b726 Put footer content back into prescribed columns 2019-11-22 17:45:45 +00:00
Tom Byers
aa9df17ef3 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-22 17:45:45 +00:00
Tom Byers
278a70ecc7 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-22 17:45:45 +00:00
Tom Byers
73f7292840 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-22 17:45:45 +00:00
Tom Byers
c3b2d3c521 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-22 17:45:45 +00:00
Tom Byers
faf2357ddf Put basic print stylesheet back in
Replicates the GOV.UK template one, adjusted for
the GOV.UK Frontend template HTML.
2019-11-22 17:44:17 +00:00
Tom Byers
7f0b207f0a 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-22 17:44:17 +00:00
Tom Byers
19823e8ac1 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-22 17:44:17 +00:00
Tom Byers
905dce2f49 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-22 17:44:17 +00:00
Tom Byers
6957a95121 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-22 17:44:17 +00:00
Tom Byers
b03b2f7502 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-22 17:44:17 +00:00
Tom Byers
e366bdadb0 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-22 17:44:17 +00:00
Tom Byers
5bb8e7654f Make theme colour (border below masthead) work
Ours is used to indicate the different
environments:
- local
- preview
- staging
- production
2019-11-22 17:44:17 +00:00