Update to GOV.UK Frontend #512

NickColley · 2018-06-25T14:46:44Z

This is an attempt to do a cleaner merge of the changes from the https://github.com/alphagov/govuk-prototype-kit-private-beta.

Includes:

Removal of Elements, Template, Toolkit
Migration of all code
Updates to guidance relating to Elements, Template, Toolkit
New cookie banner component

If you want to review all changes without whitespace: https://github.com/alphagov/govuk_prototype_kit/pull/512/files?w=1

The other parts that are missing are being tracked with this milestone: https://github.com/alphagov/govuk_prototype_kit/milestone/1

https://trello.com/c/SrxrezjZ/1061-add-govuk-frontend-to-the-govuk-prototype-kit

GOV.UK Frontend requires 3 and above

kr8n3r · 2018-06-26T09:15:20Z

app/assets/sass/unbranded.scss

-.unbranded {
-  background: $white;
+// Remove canvas background colour, as is used with the GOV.UK Footer.
+$govuk-canvas-background-colour: $govuk-body-background-colour;


no need for this as we're not including the footer

If we don't do this we get a grey box at the bottom of the screen, since the <body> does not extend the same length as <html>

kr8n3r · 2018-06-26T09:20:14Z

server.js

@@ -190,6 +205,7 @@ app.get('/prototype-admin/download-latest', function (req, res) {
 if (useDocumentation) {
  // Copy app locals to documentation app locals
  documentationApp.locals = app.locals
+  documentationApp.locals.serviceName = 'Prototype Kit'


this needs to be changed to how we've amended it in beta
documentationApp.locals = Object.assign({}, app.locals)
documentationApp.locals.serviceName = 'Prototype Kit'

dunno if its github being weird, but the line looks how you suggested already?
documentationApp.locals = Object.assign({}, app.locals)

ah it's because you commented on line 199 instead of 198 :)

joelanman · 2018-06-26T10:16:59Z

package.json

@@ -21,6 +21,7 @@
    "express": "4.15.2",
    "express-session": "^1.13.0",
    "express-writer": "0.0.4",
+    "govuk-frontend": "0.0.32",


should this be 1.0.0?

joelanman · 2018-06-26T10:32:12Z

.gitignore

@@ -5,7 +5,6 @@
 .port.tmp
 public
 lib/govuk_template.html
-govuk_modules


good catch! This isn't in the beta work

Since we require directly from 'node_modules' we don't need to copy to a 'govuk_module' folder.

joelanman · 2018-06-26T11:41:42Z

app/assets/sass/examples.scss

@@ -1,22 +0,0 @@
-@import "_colours";


another good catch! This file has been hanging around for ages

alex-ju

Great cleanup! 💯

Missing the following:

Update: the missing PRs will be added afterwards, I'm going to approve this.

alex-ju · 2018-06-26T14:51:18Z

docs/views/examples/confirmation-page.html


      <div class="govuk-box-highlight">
-        <h1 class="heading-xlarge">
+        <h1 class="govuk-heading-xl">


This page should use the panel component.

joelanman · 2018-06-26T16:55:41Z

docs/documentation/writing-css.md

@@ -18,23 +18,12 @@ Every time a change happens in [application.scss](../app/assets/sass/application

 Try starting the app and adding some styles to `application.scss`. If you open `application.css` you should now see the compiled version of those styles.

-## Using the govuk_frontend_toolkit
+## Using the GOV.UK Frontend


delete 'the'

to be honest its probably best to remove this section, it's not very useful and tells people to do something thats not very clear, or we already do for them?

joelanman · 2018-06-26T16:58:29Z

docs/documentation/writing-css.md


-Note that the convention is to start the name of any partial with an underscore, like those in the toolkit.
+Note that the convention is to start the name of any partial with an underscore, like those in the GOV.UK Frontend.


like those in ~~the~~ GOV.UK Frontend

joelanman · 2018-06-26T16:58:49Z

docs/documentation/writing-css.md

-      @include bold-48;
-
-The line `@import '_typography';` makes all the code in [_typography.scss](https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_typography.scss) available. The `h1` can therefore be styled in the 48pt bold form of the font by using `@include bold-48;` to call the `bold-48` mixin.
+You can use the Sass libraries in the [govuk-frontend](https://github.com/alphagov/govuk-frontend) by importing the files from there directly into `application.scss`.


in ~~the~~ govuk-frontend

joelanman · 2018-06-26T16:59:48Z

app/views/index.html

+      <ul class="govuk-list govuk-list--bullet">
+        <li><a href="/docs/tutorials-and-examples">Example pages and documentation</a></li>
+        <li>
+          <a href="https://govuk-design-system-production.cloudapps.digital">


https://design-system.service.gov.uk

joelanman · 2018-06-26T17:00:25Z

docs/views/tutorials-and-examples.html

-      <p class="text">
-        <a href="https://govuk-elements.herokuapp.com/">GOV.UK Elements</a> is a guide to making your prototype look like a GOV.UK
+      <p>
+        <a href="https://govuk-design-system-production.cloudapps.digital">GOV.UK Design System</a> is a guide to making your prototype look like a GOV.UK


https://design-system.service.gov.uk

joelanman · 2018-06-26T17:04:41Z

docs/views/cookies.html

@@ -42,26 +42,23 @@ <h2 class="govuk-heading-l">Our cookie message</h2>

      <p>You will see a message about cookies when you first visit the GOV.UK Prototype Kit. We’ll store a cookie so that your computer knows you’ve seen it and knows not to show it again.</p>


does this fix a problem with tables? Or just move it to using a macro?

Just moving everything to use macros.

joelanman · 2018-06-26T17:06:10Z

docs/documentation/tips-and-tricks.md

-      </ul>
-      -->
-    </nav>
+Import the header component macro place it in the `{% block header %}`and provide `navigation` items as shown below.


does this work fix something or just move it to macros? If its just about macros can we skip this commit, as we're not ready to push macros in prototyping

This is how you override the header contents now.

The new template gives us this for free

joelanman · 2018-06-26T18:56:27Z

Sorry I meant small changes plus reverting macros, not that that was small, I wasn't very clear.

joelanman · 2018-06-27T09:57:36Z

Wondering if the Cookie banner work would be better as a separate PR? Is it part of 'Update to govuk frontend'?

UPDATE

We decided to keep it, as Cookie banner used to be in the old stack, and needs replacing in a move to Frontend, as it doesnt exist there.

Avoid using JavaScript by using server side cookie setting. JavaScript is only necessary for www.GOV.UK since it can't easily set cookies.

NickColley · 2018-06-27T11:15:19Z

@joelanman yeah, I think it makes sense since otherwise this PR would break cookie support.

joelanman

Looks good, thanks!

NickColley added 2 commits June 19, 2018 17:42

Remove dependencies on GOV.UK Elements, Template, Toolkit

43b1735

Update Nunjucks dependency

1d8578c

GOV.UK Frontend requires 3 and above

NickColley force-pushed the update-to-govuk-frontend-7.0.0 branch 6 times, most recently from 647fca4 to c25335b Compare June 25, 2018 16:32

NickColley added this to the 7.0.0 milestone Jun 25, 2018

NickColley requested a review from joelanman June 25, 2018 17:05

kr8n3r reviewed Jun 26, 2018

View reviewed changes

NickColley force-pushed the update-to-govuk-frontend-7.0.0 branch from c25335b to 4f6df40 Compare June 26, 2018 10:01

joelanman reviewed Jun 26, 2018

View reviewed changes

NickColley added 4 commits June 26, 2018 12:16

Add GOV.UK Frontend as a dependency

57b5e72

Remove copy-govuk-modules tasks

5cf186d

Since we require directly from 'node_modules' we don't need to copy to a 'govuk_module' folder.

Import GOV.UK Frontend instead of GOV.UK Elements

dc874bd

Update SCSS to use GOV.UK Frontend

8ecc90e

NickColley force-pushed the update-to-govuk-frontend-7.0.0 branch from 4f6df40 to 5f3a671 Compare June 26, 2018 11:16

joelanman reviewed Jun 26, 2018

View reviewed changes

alex-ju suggested changes Jun 26, 2018

View reviewed changes

alex-ju approved these changes Jun 26, 2018

View reviewed changes

joelanman reviewed Jun 26, 2018

View reviewed changes

NickColley and others added 18 commits June 26, 2018 18:52

Remove duplicate <main>

cc57585

The new template gives us this for free

Update branch example to use GOV.UK Frontend component

96bce64

Fix branching guide code highlighting

3d655e7

Fix passing data code highlighting

6bdf19e

Update pass-data examples to use GOV.UK Frontend components

62d0819

Fix download link spacing

ee95b95

Style blockquotes like inset text

bcf6b13

Fix serviceName being set in docs pages

16f777a

Replace partial areas with Design System docs

0e5d026

Update JavaScript to use GOV.UK Frontend

78cb636

Remove Elements references from documentation

9d44b49

Improve release documentation

1dc5e95

Set custom head icons in unbranded template

b5c1c67

Fix cookies page tables

8d424a6

Update tips and tricks guidance

a8ea5e3

Update upgrading the kit guidance

f2e38d5

Remove unused files

3a1d5b9

Update page_scripts to camelcase

e4af699

NickColley force-pushed the update-to-govuk-frontend-7.0.0 branch from 0bfcfc9 to 06a7e28 Compare June 26, 2018 17:52

joelanman changed the title ~~[Do not merge] Update to govuk frontend 7.0.0~~ [Do not merge] Update to GOV.UK Frontend Jun 27, 2018

NickColley and others added 2 commits June 27, 2018 12:03

Add cookie banner component

16fb479

Avoid using JavaScript by using server side cookie setting. JavaScript is only necessary for www.GOV.UK since it can't easily set cookies.

Update confirmation page to use panel component

4fd81b0

NickColley force-pushed the update-to-govuk-frontend-7.0.0 branch from 06a7e28 to 4fd81b0 Compare June 27, 2018 11:03

NickColley changed the title ~~[Do not merge] Update to GOV.UK Frontend~~ Update to GOV.UK Frontend Jun 27, 2018

joelanman approved these changes Jun 27, 2018

View reviewed changes

NickColley merged commit 48ad1c3 into master Jun 27, 2018

NickColley deleted the update-to-govuk-frontend-7.0.0 branch June 27, 2018 11:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update to GOV.UK Frontend #512

Update to GOV.UK Frontend #512

NickColley commented Jun 25, 2018 •

edited

Loading

kr8n3r Jun 26, 2018

NickColley Jun 26, 2018

kr8n3r Jun 26, 2018

joelanman Jun 26, 2018

joelanman Jun 26, 2018

joelanman Jun 26, 2018

joelanman Jun 26, 2018

joelanman Jun 26, 2018

alex-ju left a comment •

edited

Loading

alex-ju Jun 26, 2018

joelanman Jun 26, 2018

joelanman Jun 26, 2018

joelanman Jun 26, 2018

joelanman Jun 26, 2018

joelanman Jun 26, 2018 •

edited

Loading

joelanman Jun 26, 2018 •

edited

Loading

joelanman Jun 26, 2018

NickColley Jun 26, 2018

joelanman Jun 26, 2018

NickColley Jun 26, 2018

joelanman commented Jun 26, 2018

joelanman commented Jun 27, 2018 •

edited

Loading

NickColley commented Jun 27, 2018

joelanman left a comment


		Note that the convention is to start the name of any partial with an underscore, like those in the toolkit.
		Note that the convention is to start the name of any partial with an underscore, like those in the GOV.UK Frontend.

		@@ -42,26 +42,23 @@ <h2 class="govuk-heading-l">Our cookie message</h2>

		<p>You will see a message about cookies when you first visit the GOV.UK Prototype Kit. We’ll store a cookie so that your computer knows you’ve seen it and knows not to show it again.</p>

Update to GOV.UK Frontend #512

Update to GOV.UK Frontend #512

Conversation

NickColley commented Jun 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alex-ju left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joelanman Jun 26, 2018 • edited Loading

Choose a reason for hiding this comment

joelanman Jun 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

joelanman commented Jun 26, 2018

joelanman commented Jun 27, 2018 • edited Loading

NickColley commented Jun 27, 2018

joelanman left a comment

Choose a reason for hiding this comment

NickColley commented Jun 25, 2018 •

edited

Loading

alex-ju left a comment •

edited

Loading

joelanman Jun 26, 2018 •

edited

Loading

joelanman Jun 26, 2018 •

edited

Loading

joelanman commented Jun 27, 2018 •

edited

Loading