[ER-758] main hero layout (#826)

* Add dfe header * Adjustments for header in preparation for adding hero section * Main hero layout proof of concept * Module overview updates - Add colour to module progress - Add pages to section heading * styling adjustments for dfe-frontend integration * update yarn.lock * revert changes to dfe frontend version * remove path shown in header * revert dockerfile changes * upgrade dfe frontend * change dev cms env to staging * revert cms env change * decrease disk quota * - Positional section progress bar - Additional section for certificate in overview - Page styling and pagination changes * Revert "styling adjustments for dfe-frontend integration" This reverts commit f954fd0. * Revert "decrease disk quota" This reverts commit 23146fe. * Revert "Revert "styling adjustments for dfe-frontend integration"" This reverts commit 07f794b. * fix module content view and training text page * reduce disk quota * Change (now redundant following move to Azure) review app envs * Improve in app debugging for module authors * lint * docs * merge with header * - Fix test suite - Remove unused styling - Tidy up - Tweaks to meet latest ACs * Add missing hero to question response validations --------- Co-authored-by: jack.coggin <[email protected]> Co-authored-by: Peter David Hamilton <[email protected]>
DFE-Digital · Oct 6, 2023 · 4c2684e · 4c2684e
1 parent 35778d2
commit 4c2684e
Show file tree

Hide file tree

Showing 63 changed files with 12,234 additions and 1,774 deletions.
diff --git a/.env.example b/.env.example
@@ -3,6 +3,7 @@
 # ------------------------------------------------------------------------------
 
 VERBOSE=true
+DEBUG=true
 
 # automated queries of secure pages
 BOT_TOKEN=bot

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -119,7 +119,7 @@ GEM
       rails (>= 4.2)
       redcarpet (~> 3.2)
     crass (1.0.6)
-    cssbundling-rails (1.3.3)
+    cssbundling-rails (1.2.0)
       railties (>= 6.0.0)
     date (3.3.3)
     debug (1.8.0)
@@ -257,7 +257,7 @@ GEM
       sentry-rails (~> 5.3)
       sentry-ruby (~> 5.3)
       statsd-ruby (~> 1.5)
-    govuk_design_system_formbuilder (4.1.1)
+    govuk_design_system_formbuilder (4.0.0)
       actionview (>= 6.1)
       activemodel (>= 6.1)
       activesupport (>= 6.1)
@@ -306,7 +306,7 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
-    jsbundling-rails (1.2.1)
+    jsbundling-rails (1.1.2)
       railties (>= 6.0.0)
     json (2.6.3)
     jwt (2.7.0)
@@ -704,7 +704,7 @@ GEM
       nokogiri (>= 1.12.0)
     sassc (2.4.0)
       ffi (~> 1.9)
-    selenium-webdriver (4.13.1)
+    selenium-webdriver (4.10.0)
       rexml (~> 3.2, >= 3.2.5)
       rubyzip (>= 1.2.2, < 3.0)
       websocket (~> 1.0)
@@ -781,7 +781,7 @@ GEM
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
     webrick (1.7.0)
-    websocket (1.2.10)
+    websocket (1.2.9)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -793,7 +793,7 @@ GEM
       backports (>= 3.18)
       rainbow
       yard
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.11)
 
 PLATFORMS
   aarch64-linux-musl

diff --git a/app/assets/images/dfe-logo-alt.png b/app/assets/images/dfe-logo-alt.png
diff --git a/app/assets/images/dfe-logo.png b/app/assets/images/dfe-logo.png
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -3,30 +3,37 @@ https://frontend.design-system.service.gov.uk/sass-api-reference
 */
 
 $govuk-new-link-styles: true;
+$govuk-page-width: 1200px;
+
+@import 'govuk-frontend/govuk/all';
+@import 'dfe-frontend-alpha/packages/dfefrontend';
+@import 'dfe-header';
+
+@import 'govspeak';
+@import 'card';
+@import 'prompt';
+@import 'video';
+@import 'question';
+@import 'interruption';
+@import 'print-link';
+@import 'quote';
+@import 'icons';
+@import 'modal';
+@import 'autocomplete';
+@import 'assets-page';
+
+// training/modules#show
+@import 'progress-bar';
+@import 'module-overview';
+
+// training/pages#show (section intro)
+@import 'section-intro';
+@import 'section-bar';
 
-@import "govuk-frontend/govuk/all";
-@import "./dfe";
-@import "./govspeak";
-@import "./card";
-@import "./prompt";
-@import "./video";
-@import "./question";
-@import "./interruption";
-@import "./print-link";
-@import "./quote";
-@import "./icons";
-@import "./modal";
-@import "./autocomplete";
-@import "./progress-bar";
-@import "./section-intro";
-@import "./section-bar";
-@import "./header";
-@import './module-overview';
-@import "./assets-page";
 
 
 * {
-  font-family: 
+  font-family:
     BlinkMacSystemFont,
     'Segoe UI',
     Roboto,
@@ -50,10 +57,13 @@ pre.code-tip {
 
 .debug_dump {
   background: beige;
-  &, * {
+
+  &,
+  * {
     font-family: monospace !important;
   }
 }
+
 // --------------------------------------------
 
 .app-sidebar {
@@ -99,34 +109,18 @@ abbr {
 }
 
 // nested bullets (level 2) to be unfilled circles
-ul > li > ul > li {
+ul>li>ul>li {
   list-style-type: circle;
 }
 
-.remove-borders {
-  border: none;
-}
-
 .first-column-bold td:first-child {
   font-weight: bold;
 }
 
-.light-grey-background {
-  background-color: govuk-colour("light-grey");
-  padding: govuk-spacing(6);
-}
-
-.white-background {
-  background-color: govuk-colour("white");; 
-  border-left: none !important;
-  padding: govuk-spacing(4);
-}
-
 .log-entry {
   border: 0.5px solid;
   border-color: #b1b4b6;
   padding: 20px;
-  max-width: 600px;
   margin-bottom: 40px;
 }
 

diff --git a/app/assets/stylesheets/dfe-header.scss b/app/assets/stylesheets/dfe-header.scss
@@ -0,0 +1,44 @@
+.dfe-header-f-toplinks { margin-left: auto; order: 2;
+
+&.dfe-header__content:after { display: none; } }
+
+.dfe-width-container { margin: 0 auto; max-width: $govuk-page-width;
+
+&.dfe-header__container.dfe-header-f-header-flex { display: flex; flex-wrap: wrap; } }
+
+.move-me { align-self: flex-end; width: 100%; order: 3;
+
+.dfe-header__link--service, .dfe-header__link--service:hover { color: #fff; font-size: 1.125em; margin-top: 12px; }
+
+.dfe-header__link--service:focus { color: #000; }
+
+@media (min-width: 61.875em) { order: 2; width: auto; padding-left: 30px; margin-bottom: -6px;
+
+.dfe-header__link--service,
+.dfe-header__link--service:hover {
+font-size: 1.375em;
+margin-top: 0;
+}
+} }
+
+.dfe-header__logo { order: 1; }
+
+.dfe-header__menu-toggle { right: 0px; }
+
+@media (min-width: 61.875em) { .dfe-header__navigation-item.dfe-header-f-mob { display: none; }
+
+.dfe-header__logo { order: 1; }
+
+.dfe-width-container.dfe-header__container.dfe-header-f-header-flex { display: flex; flex-wrap: nowrap; }
+
+.dfe-header-f-toplinks { order: 3; }
+
+.govuk-notification-banner__content > * { max-width: 44em; } }
+
+.dfe-header-f-dtonly .dfe-header-f-top-links { display: none;
+
+@media (min-width: 61.875em) { display: block; } }
+
+.dfe-header-f-header-flex.dfe-header__container:after { display: none; }
+
+.dfe-content-page--header { background: tint($color_dfe-secondary-blue, 90%); }
diff --git a/app/assets/stylesheets/dfe.scss b/app/assets/stylesheets/dfe.scss
diff --git a/app/assets/stylesheets/govspeak/_typography.scss b/app/assets/stylesheets/govspeak/_typography.scss
@@ -97,4 +97,8 @@
     font-style: normal;
     font-weight: inherit;
   }
+
+  h2, h3 {
+    padding-top: 0;
+  }
 }
diff --git a/app/assets/stylesheets/interruption.scss b/app/assets/stylesheets/interruption.scss
@@ -1,13 +1,12 @@
+// /modules/foo/content-pages/what-to-expect
+
 .interrupt-panel {
   width: 100%;
   padding: 30px;
-  background: darken(govuk-colour("blue"), 3%);
+  margin-bottom: 30px;
+  background: darken(govuk-colour('blue'), 3%);
 
   * {
-    color: govuk-colour("white") !important;
+    color: govuk-colour('white') !important;
   }
 }
-
-a:visited {
-  color: #005ea5
-}
diff --git a/app/assets/stylesheets/module-overview.scss b/app/assets/stylesheets/module-overview.scss
@@ -5,6 +5,10 @@ $progress-bar-container-width: 81px;
   margin-left: $progress-bar-container-width;
 }
 
+.greyed-out {
+  opacity: 0.5;
+}
+
 .module-section--pages {
   margin-left: 10px;
   color: govuk-colour('mid-grey');
@@ -14,7 +18,7 @@ $progress-bar-container-width: 81px;
 .module-overview--section {
   display: grid;
   grid-template-columns: $progress-bar-container-width auto;
-  
+
   .icon {
     border-radius: 50%;
     width: $icon-diameter;
@@ -24,19 +28,19 @@ $progress-bar-container-width: 81px;
     align-items: center;
     font-weight: bold;
     z-index: 2;
-  
+
     &.completed {
-      background-color: govuk-colour('black');
+      background-color: govuk-colour('blue');
       color: govuk-colour('white');
     }
-    
+
     &.started {
       background-color: govuk-colour('white');
-      color: govuk-color('black');
-      outline: 4px solid govuk-colour('black');
+      color: govuk-color('blue');
+      outline: 4px solid govuk-colour('blue');
       outline-offset: -4px;
     }
-    
+
     &.not_started {
       background-color: govuk-colour('white');
       color: govuk-color('black');

diff --git a/app/assets/stylesheets/progress-bar.scss b/app/assets/stylesheets/progress-bar.scss
@@ -8,10 +8,6 @@
     gap: 10px;
   }
 
-  &:focus {
-    @include govuk-focused-text;
-  }
-
   .progress-bar--item {
     &:first-child .progress--heading {
       margin-top: 2.5px;
@@ -21,50 +17,6 @@
       }
     }
 
-    .progress--heading {
-      text-align: center;
-      font-size: 12px;
-
-      @include govuk-media-query($from: tablet) {
-        font-size: 16px;
-      }
-
-      &:focus {
-        @include govuk-focused-text;
-      }
-    }
-
-    span.fa-stack {
-      z-index: 1;
-      width: 100%;
-    }
-
-    .svg-inline--fa {
-      background-color: transparent;
-      padding: 0 !important;
-      height: 26px;
-
-      &.small-circle {
-        height: 15px;
-      }
-
-      @include govuk-media-query($from: tablet) {
-        height: 36px;
-
-        &.small-circle {
-          height: 20px;
-        }
-      }
-
-      &.grey {
-        color: govuk-colour("mid-grey");
-      }
-
-      &.green {
-        color: govuk-colour("green");
-      }
-    }
-
     .line {
       width: 100%;
       height: 0px;
@@ -79,18 +31,6 @@
         bottom: 21px;
         border-width: 4px;
       }
-
-      &--green {
-        border-color: govuk-colour("green");
-      }
-
-      &--grey {
-        border-color: govuk-colour("mid-grey");
-      }
-
-      &--slice {
-        border-image-slice: 1;
-      }
     }
   }
 }
diff --git a/app/assets/stylesheets/prompt.scss b/app/assets/stylesheets/prompt.scss
@@ -23,7 +23,7 @@ $prompt-hue: govuk-colour("turquoise");
   }
 
   .govuk-grid-column-one-quarter {
-    margin-right: -90px;
+    margin-right: -120px;
   }
 
   .govuk-grid-column-three-quarters {