[WIP] Remove GOV.UK frontend toolkit and convert to GOV.UK Frontend by Nooshu · Pull Request #34 · alphagov/tech-docs-gem

Nooshu · 2018-07-19T13:13:12Z

See task list of areas left to be integrated

Can we use NPM to install Frontend?
Check colours all map correctly from Frontend.
Move JavaScript from FE into the correct place.
Use the Phase banner component from Frontend.
Use skip link component from Frontend.
Adopt new typography classes from Frontend.
Adopt new spacing scale from Frontend.
Adopt new header from Frontend.
Adopt new footer from Frontend.

Related issue: #154 raised here.

The dependency on GOV.UK frontend toolkit has been removed and been replaced by GOV.UK Frontend.

Note: this also fixes the Base64 encoded font issue / PR too.

Below are some screenshots comparing the homepage for both on mobile, tablet and desktop:

Mobile

Toolkit

Frontend

Tablet

Toolkit

Frontend

Desktop

Toolkit

Frontend

36degrees

This feels like it's adopting the framework but avoiding adopting any of the conventions - is that intentional?

36degrees · 2018-07-19T15:03:19Z

 source 'https://rubygems.org'

 gem 'govuk_tech_docs', path: '..'
+gem 'middleman-search', git: 'git://github.com/alphagov/middleman-search.git'


Don't think this change is related?

Without this change the build freezes. This is just about to be rolled into master I believe.

36degrees · 2018-07-19T15:04:11Z

@@ -36,12 +57,12 @@ $desktop-breakpoint: 992px !default;
 @import "accessibility";

 html, body {


Ideally the template should be updated to use the classes from https://github.com/alphagov/govuk-frontend/blob/master/src/core/_template.scss

36degrees · 2018-07-19T15:04:49Z


 a:link {
-  color: $link-colour;
+  color: govuk-colour("blue");


Suggest enabling global link and paragraph styling in Frontend and removing these link rules.

If not, this should be $govuk-link-colour

I'm going to raise all of your suggestions as GH suggestions

36degrees · 2018-07-19T15:06:23Z

@@ -0,0 +1,75 @@
+# The `src` directory


Ideally GOV.UK Frontend would be installed via npm install to avoid having to vendor it in.

If that's not possible, I strongly recommend using the package folder from the repo rather than the contents of source, as the Sass in source is not vendor-prefixed, and the source folder includes e.g. all the tests.

@tijmenb thoughts on use of npm here?

36degrees · 2018-07-19T15:07:41Z

@@ -0,0 +1,53 @@
+import { nodeListForEach } from './common'


The javascript from Frontend is inside a folder called 'stylesheets'. Suggest moving the Frontend dependency into a vendor directory or something (assuming installing it via npm install is not possible)

36degrees · 2018-07-19T15:12:14Z


 a:hover {
-  color: $link-hover-colour;
+  color: govuk-colour("light-blue");


$govuk-link-hover-colour

36degrees · 2018-07-19T15:13:25Z

      }
    }
  }

  @include print {
    a:link, a:visited {
-      color: $black;
+      color: govuk-colour("black");


$govuk-print-text-colour (which is actually #000!)

36degrees · 2018-07-19T15:15:46Z

@@ -9,14 +9,14 @@
 */

 .phase-banner {
-  @include bold-14;
+  @include govuk-font(14, $weight: bold);


Can we use the phase banner component from Frontend?

36degrees · 2018-07-19T15:16:22Z

@@ -19,13 +19,13 @@
  &:focus {


Can we use the skip link component from Frontend?

36degrees · 2018-07-19T15:17:30Z

@@ -42,65 +46,65 @@

  // Headings
  h1 {


Can we use the new typography classes from Frontend? We do this in the Design System like this

Nooshu · 2018-07-19T15:31:08Z

This feels like it's adopting the framework but avoiding adopting any of the conventions - is that intentional?

At the moment yes to get it to a state where it looks and functions fine. I've raised the PR for general feedback and also in the hope that someone will be able to pick up some of the other areas of integration as it is quite a time consuming task.

lewisnyman

It's great to see this being implemented., thanks for working on this.
I ran a quick visual regression test. It looks like the new logo implementation increases the logo height by one pixel, I don't know if that's worth worrying about or not.

lewisnyman · 2018-07-27T08:29:13Z

@@ -14,7 +14,7 @@
 .collapsible__toggle {
  position: absolute;
  top: 0;
-  right: -25px;
+  right: $govuk-gutter-half * -1;


This was the only other visual regression I found, this changes the value and moves the placement of the toggle button. I'd recommend using the previous value.

Nooshu · 2018-08-09T13:47:34Z

Currently in the process or integrating the DS components into the tech docs gem. Integration of the header component / phase banner has brought up a couple of design considerations.

Is the plan to keep the header / navigation the same but directly bring code across from the DS? If so the output will look like this:

Or should we be considering using the navigation that is now being used for the Design System:

I personally think the overall design on the DS nav / header looks better than "Header with service name and navigation", but I'm happy to go with whatever the community would prefer.

MatMoore · 2018-08-10T09:40:40Z

@Nooshu what's the name of that component the design system uses?

I like how it works on the design system site, but I'm wondering how it would work for sites where the tech docs is only part of the service. For example on registers this page has a different layout to the documentation part, which is a bit jarring, but the top level navigation still looks the same wherever you are.

Also on the GDS way site, one of the top level links is an external link, which might not work well with the new thing.

Nooshu · 2018-08-10T09:43:41Z

@MatMoore It is the "Header with service name and navigation" which can be seen on this page. I did wonder if it may not work for all documentation, so it is probably a safer to stick with what we know.

Nooshu · 2018-08-10T18:15:56Z

Pushing latest updates:

NPM now being used to pull in Frontend. This may be temporary until a discussion around the Ruby pipeline is had.
DS footer now being used.
Initial version of the DS Header is being used. This will be swapped out with a version that closely matches the current setup (after discussion with @36degrees and @dashouse).
DS Phase banner has been integrated, this may be removed depending on what happens with the updated header.
DS JS has been copied across to the assets folder as a temporary measure until the Ruby pipeline integration has been discussed.

Issues:

Small issue to be solved with horizontal padding when moving between breakpoints with the new footer.
Two sets of JS detection CSS classes currently in place. Modernizr and DS systems. Modernizr is used extensively for the overall layout, this could be used in the DS header with a little tweaking (js-enabled to js).

bendyson · 2019-02-14T12:44:04Z

@Nooshu Just out of interest, is this still being worked on?

Nooshu · 2019-02-14T12:46:08Z

@bendyson not at the moment I'm afraid. Leaving the information here and I'm hoping someone else will have the capacity to finish it.

tlwr · 2019-03-18T10:04:03Z


 a:link {
-  color: $link-colour;
+  color: govuk-colour("blue");


Suggested change

color: govuk-colour("blue");

color: $govuk-link-colour;

tlwr · 2019-03-18T10:04:29Z


 a:hover {
-  color: $link-hover-colour;
+  color: govuk-colour("light-blue");


Suggested change

color: govuk-colour("light-blue");

color: $govuk-link-hover-colour;

tlwr · 2019-03-18T10:05:03Z


 a:active {
-  color: $link-active-colour;
+  color: govuk-colour("light-blue");


Suggested change

color: govuk-colour("light-blue");

color: $govuk-link-active-colour;

tijmenb · 2019-07-31T10:59:31Z

This is superseded by #89 now, thanks @Nooshu!

Nooshu requested review from 36degrees, lewisnyman and tijmenb July 19, 2018 13:13

Nooshu force-pushed the update-to-govuk-frontend branch 3 times, most recently from 923a604 to 3883f3f Compare July 19, 2018 15:17

Remove Toolkit and converted to GOV.UK Frontend

96e9916

Nooshu force-pushed the update-to-govuk-frontend branch from 3883f3f to 96e9916 Compare July 19, 2018 15:19

36degrees reviewed Jul 19, 2018

View reviewed changes

Nooshu changed the title ~~Remove GOV.UK frontend toolkit and converted to GOV.UK Frontend~~ [WIP] Remove GOV.UK frontend toolkit and converted to GOV.UK Frontend Jul 19, 2018

Nooshu changed the title ~~[WIP] Remove GOV.UK frontend toolkit and converted to GOV.UK Frontend~~ [WIP] Remove GOV.UK frontend toolkit and convert to GOV.UK Frontend Jul 19, 2018

lewisnyman suggested changes Jul 27, 2018

View reviewed changes

lewisnyman mentioned this pull request Aug 1, 2018

Search Google Analytics tracking #39

Merged

Matt Hobbs added 3 commits August 9, 2018 11:47

Taken FE from the package directory until npm install is fleshed out

a73c284

Removed gutter, converted to spacing scale

865b7b9

Add the footer component

0171b43

Started integration of the header and phase banner

19f785a

Matt Hobbs added 3 commits August 10, 2018 13:46

Moved over to using npm to install frontend

36dc698

Updated code to use the header component from Frontend

b31639b

Removed copying over of FE into vendor folders, now using NPM.

0a3a5f3

Nooshu mentioned this pull request Sep 12, 2018

Migrated CSS Grid changes from tech-docs-template PR #16

Closed

subatoi mentioned this pull request Nov 6, 2018

adds warning symbol alphagov/pay-tech-docs#200

Merged

tlwr reviewed Mar 18, 2019

View reviewed changes

tijmenb mentioned this pull request Jul 16, 2019

Add GOV.UK Frontend, upgrade the phase tag #89

Merged

tijmenb closed this Jul 31, 2019

		@@ -36,12 +57,12 @@ $desktop-breakpoint: 992px !default;
		@import "accessibility";

		html, body {

	color: govuk-colour("light-blue");
	color: $govuk-link-hover-colour;

	color: govuk-colour("light-blue");
	color: $govuk-link-active-colour;

Conversation

Nooshu commented Jul 19, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Mobile

Toolkit

Frontend

Tablet

Toolkit

Frontend

Desktop

Toolkit

Frontend

Uh oh!

36degrees left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Nooshu commented Jul 19, 2018

Uh oh!

lewisnyman left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Nooshu commented Aug 9, 2018

Uh oh!

MatMoore commented Aug 10, 2018

Uh oh!

Nooshu commented Aug 10, 2018

Uh oh!

Nooshu commented Aug 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bendyson commented Feb 14, 2019

Uh oh!

Nooshu commented Feb 14, 2019

Uh oh!

tlwr Mar 18, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tijmenb commented Jul 31, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Nooshu commented Jul 19, 2018 •

edited

Loading

Nooshu commented Aug 10, 2018 •

edited

Loading

tlwr Mar 18, 2019 •

edited

Loading