ER-1158 DfE Frontend update (#822)

* Update dfe-alpha to dfe-frontend and update width declaration

* Styling and comment update

* Chevron update

* Small styling updates

* Update based on PR comments

* Card update

* Edits

* More edits

* Update due to deprecation warning

* Move head content into partial

* Update class so it highlights correctly when on specific page

---------

Co-authored-by: Peter David Hamilton <[email protected]>

app/assets/stylesheets/application.scss

@@ -7,16 +7,8 @@
 
 // https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/_colours.scss
 
-
-$govuk-new-link-styles: true;
-$govuk-page-width: 1200px;
-
-.govuk-width-container {
-  max-width: $govuk-page-width;
-}
-
-@import 'govuk-frontend/govuk/all';
-@import 'dfe-frontend-alpha/packages/dfefrontend';
+@import 'govuk-frontend/dist/govuk/all';
+@import 'dfe-frontend/packages/dfefrontend';
 
 $light-blue: tint(govuk-organisation-colour('department-for-education'), 90%);
 
@@ -70,6 +62,16 @@ aside img {
   max-width: 100%;
 }
 
+.govuk-width-container,
+.dfe-width-container {
+  max-width: 1200px;
+}
+
+.dfe-width-container.dfe-header__container.dfe-header-f-header-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 #hero-layout {
   .govuk-notification-banner {
     margin-top: govuk-spacing(6);

app/assets/stylesheets/card.scss

@@ -4,11 +4,6 @@
     border-bottom: 3px solid govuk-organisation-colour('department-for-education', false);
   }
 
-  &-details {
-    padding: govuk-spacing(6);
-    min-height: 190px;
-  }
-
   a {
     text-decoration: none;
 
@@ -29,3 +24,13 @@
     }
   }
 }
+
+.hf-card-details {
+  padding: govuk-spacing(6);
+  min-height: 190px;
+
+  @include govuk-media-query($until: tablet) {
+    padding: govuk-spacing(5);
+    min-height: 170px;
+  }
+}

app/assets/stylesheets/header.scss

@@ -15,28 +15,24 @@
   right: 0;
 }
 
-.dfe-width-container {
-  margin: 0 auto;
-  max-width: $govuk-page-width;
-
-  @include govuk-media-query($until: tablet) {
-    padding-left: govuk-spacing(3);
-    padding-right: govuk-spacing(3);
-  }
-
-  &.dfe-header__container.dfe-header-f-header-flex {
-    display: flex;
-    flex-wrap: wrap;
-  }
+.dfe-width-container.dfe-header__container.dfe-header-f-header-flex {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 header #service-name {
   align-self: flex-end;
   width: 100%;
   order: 3;
 
+  .dfe-header__link {
+    height: auto;
+  }
+
   .dfe-header__link--service,
   .dfe-header__link--service:hover {
+    margin-bottom: govuk-spacing(2);
+    width: 100%;
     color: govuk-colour('white');
     font-size: 1.125em;
     margin-top: 12px;
@@ -49,8 +45,8 @@ header #service-name {
   @media (min-width: 61.875em) {
     order: 2;
     width: auto;
-    padding-left: 30px;
-    margin-bottom: -6px;
+    padding-left: govuk-spacing(6);
+    margin-bottom: 0;
 
     .dfe-header__link--service,
     .dfe-header__link--service:hover {

app/components/header_component.html.slim

@@ -1,11 +1,9 @@
 = tag.header(role: 'banner', data: { module: 'dfe-header', controller: 'reveal', 'reveal-hidden-class': 'js-show' }, **html_attributes) do
   = tag.div(**container_html_attributes) do
-    = tag.div(class: 'dfe-header__logo')
-      = link_to(root_path, class: 'dfe-header__link dfe-header__link--service', aria: { label: 'DfE homepage' }) do
+    .dfe-header__logo
+      = link_to(root_path, class: 'dfe-header__link', aria: { label: 'DfE homepage' }) do
         = image_tag 'dfe-logo.png', class: 'dfe-logo', alt: 'DfE homepage'
         = image_tag 'dfe-logo-alt.png', class: 'dfe-logo-hover', alt: 'DfE homepage'
-    #service-name
-      = link_to service_name, service_url, class: 'dfe-header__link dfe-header__link--service', aria: { label: t('service.name') }
     / Original header template
       - if action_links.any?
        #content-header.dfe-header__content.dfe-header-f-dtonly.dfe-header-f-toplinks
@@ -21,6 +19,8 @@
       .dfe-header__menu
         button#toggle-menu.dfe-header__menu-toggle aria-controls='header-navigation' aria-expanded='false' data-action='click->reveal#toggle'
           | Menu
+  .dfe-width-container.dfe-header__service-name
+    = link_to service_name, service_url, class: 'dfe-header__link--service'
   - if navigation_items.any?
     = tag.nav(**navigation_html_attributes) do
       .dfe-width-container

app/components/header_component.rb

@@ -1,5 +1,9 @@
 # frozen_string_literal: true
 
+#
+# Support for new DfE Frontend
+# @see https://design.education.gov.uk/design-system/dfe-frontend
+#
 class HeaderComponent < GovukComponent::HeaderComponent
   include Devise::Controllers::Helpers
 
@@ -18,15 +22,7 @@ def navigation_html_attributes
   end
 
   def container_html_attributes
-    { class: %w[dfe-header__container dfe-width-container] << custom_container_classes.compact }
-  end
-
-  def crown_fallback_image_attributes
-    {
-      class: 'dfe-header__logo-crown-fallback-image',
-      width: '36',
-      height: '32',
-    }
+    { class: %w[dfe-header__container dfe-width-container] }
   end
 
   class ActionLinkItem < GovukComponent::HeaderComponent::NavigationItem
@@ -35,9 +31,9 @@ def active_class
     end
 
     def call
-      tag.li(**html_attributes) do
+      tag.li do
         if link?
-          govuk_link_to(text, href, class: 'dfe-header__action-link', **options)
+          govuk_link_to(text, href, **options)
         else
           text
         end
@@ -53,7 +49,9 @@ def active_class
     def call
       tag.li(**html_attributes) do
         if link?
-          link_to(text, href, class: 'dfe-header__navigation-link', **options)
+          link_to(href, class: 'dfe-header__navigation-link', **options) do
+            (text + chevron).html_safe
+          end
         else
           text
         end
@@ -62,6 +60,12 @@ def call
 
   private
 
+    def chevron
+      tag.svg class: 'dfe-icon dfe-icon__chevron-right', xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', width: 34, height: 34, aria: { hidden: true } do
+        tag.path d: 'M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z'
+      end
+    end
+
     def default_attributes
       { class: %w[dfe-header__navigation-item] }
     end

app/helpers/application_helper.rb

@@ -1,6 +1,6 @@
 module ApplicationHelper
   def navigation
-    render(HeaderComponent.new(service_name: t('service.name'), classes: 'dfe-header noprint', container_classes: %w[dfe-header-f-header-flex], navigation_label: 'Primary navigation')) do |header|
+    render(HeaderComponent.new(service_name: t('service.name'), classes: 'dfe-header noprint', navigation_label: 'Primary navigation')) do |header|
       header.with_navigation_item(
         text: 'Home', href: '/', active: request.path == root_path, classes: %w[dfe-header__navigation-item],
       )

app/javascript/application.js

@@ -1,7 +1,9 @@
-import { initAll } from 'govuk-frontend';
-initAll();
-
 import '@hotwired/turbo-rails';
+
 import './controllers';
 
-import $ from 'jquery';
+import { initAll } from 'govuk-frontend';
+
+document.addEventListener('turbo:load', function() {
+  initAll();
+})

app/javascript/controllers/index.js

@@ -1,5 +1,10 @@
 import { Application } from '@hotwired/stimulus'
-import Reveal from 'stimulus-reveal-controller'
+import Reveal from '@stimulus-components/reveal'
 
 const application = Application.start()
+
 application.register('reveal', Reveal)
+
+application.debug = true
+window.Stimulus = application
+export { application }

app/views/layouts/_head.html.slim

@@ -0,0 +1,24 @@
+title= [t('service.name'), yield(:page_title).presence].compact.join(' : ')
+
+= csrf_meta_tags
+= csp_meta_tag
+
+= tag.meta content: 'text/html; charset=UTF-8', 'http-equiv': 'Content-Type'
+= render 'layouts/analytics_header'
+= render 'layouts/hotjar'
+
+= tag.meta content: 'width=device-width,initial-scale=1', name: 'viewport'
+= tag.meta name: 'robots', content: 'noindex,nofollow' unless Rails.application.live?
+= tag.meta property: 'og:image', content: image_path('hfeyp_opengraph.png')
+= tag.meta name: 'description', content: @page&.meta_description if @page&.meta_description.present?
+
+= csrf_meta_tags
+= tag.meta name: 'theme-color', content: '#0b0c0c'
+
+= favicon_link_tag image_path('dfe_favicon.ico')
+
+= stylesheet_link_tag 'application', 'data-turbo-track': 'reload'
+
+= javascript_include_tag 'application', 'data-turbo-track': 'reload', defer: true
+
+= yield :head

app/views/layouts/application.html.slim

@@ -1,34 +1,11 @@
 doctype html 
 html.govuk-template lang='en'
   head 
-    title= [t('service.name'), yield(:page_title).presence].compact.join(' : ')
-    = csrf_meta_tags
-    = csp_meta_tag
-
-    = tag.meta content: 'text/html; charset=UTF-8', 'http-equiv': 'Content-Type'
-    = render 'layouts/analytics_header'
-    = render 'layouts/hotjar'
-
-    = tag.meta content: 'width=device-width,initial-scale=1', name: 'viewport'
-    = tag.meta name: 'robots', content: 'noindex,nofollow' unless Rails.application.live?
-    = tag.meta property: 'og:image', content: image_path('hfeyp_opengraph.png')
-    = tag.meta name: 'description', content: @page&.meta_description if @page&.meta_description.present?
-    = csrf_meta_tags
-    = tag.meta name: 'theme-color', content: '#0b0c0c'
-
-    = favicon_link_tag image_path('dfe_favicon.ico')
-    = favicon_link_tag asset_path('images/govuk-mask-icon.svg'), rel: 'mask-icon', type: 'image/svg', color: '#0b0c0c'
-    = favicon_link_tag asset_path('images/govuk-apple-touch-icon.png'), rel: 'apple-touch-icon', type: 'image/png'
-    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-152x152.png'), rel: 'apple-touch-icon', type: 'image/png', size: '152x152'
-    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-167x167.png'), rel: 'apple-touch-icon', type: 'image/png', size: '167x167'
-    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', type: 'image/png', size: '180x180'
-    = stylesheet_link_tag 'application', 'data-turbo-track': 'reload'
-    = javascript_include_tag 'application', 'data-turbo-track': 'reload', defer: true
-    = yield :head
+    = render 'layouts/head'
 
   body#default-layout.govuk-template__body
     script
-      | document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+      | document.body.className = ((document.body.className) ? document.body.className + ' js-enabled govuk-frontend-supported' : 'js-enabled govuk-frontend-supported');
 
     = render 'layouts/analytics_body'
     = render 'layouts/cookie_banner'

app/views/layouts/hero.html.slim

@@ -1,34 +1,11 @@
 doctype html 
 html.govuk-template lang='en'
   head 
-    title= [t('service.name'), yield(:page_title).presence].compact.join(' : ')
-    = csrf_meta_tags
-    = csp_meta_tag
-
-    = tag.meta content: 'text/html; charset=UTF-8', 'http-equiv': 'Content-Type'
-    = render 'layouts/analytics_header'
-    = render 'layouts/hotjar'
-
-    = tag.meta content: 'width=device-width,initial-scale=1', name: 'viewport'
-    = tag.meta name: 'robots', content: 'noindex,nofollow' unless Rails.application.live?
-    = tag.meta property: 'og:image', content: image_path('hfeyp_opengraph.png')
-    = tag.meta name: 'description', content: @page&.meta_description if @page&.meta_description.present?
-    = csrf_meta_tags
-    = tag.meta name: 'theme-color', content: '#0b0c0c'
-
-    = favicon_link_tag image_path('dfe_favicon.ico')
-    = favicon_link_tag asset_path('images/govuk-mask-icon.svg'), rel: 'mask-icon', type: 'image/svg', color: "#0b0c0c"
-    = favicon_link_tag asset_path('images/govuk-apple-touch-icon.png'), rel: 'apple-touch-icon', type: 'image/png'
-    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-152x152.png'), rel: 'apple-touch-icon', type: 'image/png', size: '152x152'
-    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-167x167.png'), rel: 'apple-touch-icon', type: 'image/png', size: '167x167'
-    = favicon_link_tag asset_path('images/govuk-apple-touch-icon-180x180.png'), rel: 'apple-touch-icon', type: 'image/png', size: '180x180'
-    = stylesheet_link_tag 'application', 'data-turbo-track': 'reload'
-    = javascript_include_tag 'application', 'data-turbo-track': 'reload', defer: true
-    = yield :head
+    = render 'layouts/head'
 
   body#hero-layout.govuk-template__body
     script
-      | document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
+      | document.body.className = ((document.body.className) ? document.body.className + ' js-enabled govuk-frontend-supported' : 'js-enabled govuk-frontend-supported');
 
     = render 'layouts/analytics_body'
     = render 'layouts/cookie_banner'

app/views/pages/_card.html.slim

@@ -3,6 +3,9 @@
     a href=card.path
       .hf-card-container 
         = image_tag(card.thumbnail.url, class: 'full-width-image', alt: card.thumbnail.description, title: card.thumbnail.title)
-        .hf-card-details 
-          h3.govuk-heading-m=card&.title
-          p.govuk-body=card&.meta_description || card&.hero_description
+
+        .hf-card-details
+          h3.govuk-heading-m
+            = card.title
+          p.govuk-body
+            = card.meta_description || card.hero_description