Merge pull request #1947 from DFE-Digital/feature/update-dfe-design-s…

…ystem

Update for DfE Design System changes

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased][unreleased]
 
+### Changed
+
+- New DfE font and header have been applied to the application.
+
 ## [Release-91][release-91]
 
 ### Added

app/assets/stylesheets/application.scss

@@ -1,3 +1,9 @@
+// Import DfE Frontend early so it gets overidden
+@import "dfefrontend";
+
+// get the Inter font
+@import url("https://rsms.me/inter/inter.css");
+
 $govuk-font-url-function: "font-url";
 $govuk-image-url-function: "image-url";
 $govuk-global-styles: true;
@@ -6,16 +12,14 @@ $govuk-global-styles: true;
 $govuk-page-width: 1200px;
 $moj-page-width: $govuk-page-width;
 
-// do not user GDS Transport
-$govuk-font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
-  Cantarell, "Helvetica Neue", sans-serif;
+// Use the DfE font 'Inter', do not user GDS Transport
+$govuk-font-family: "Inter", sans-serif;
 
 $dfe-blue: #003a69;
 
 @import "govuk-frontend/govuk/all";
 @import "accessible-autocomplete/src/autocomplete";
 
-@import "dfefrontend";
 
 @import "@ministryofjustice/frontend/moj/settings/all";
 @import "@ministryofjustice/frontend/moj/helpers/all";

app/views/shared/_dfe_header.html.erb

@@ -4,17 +4,20 @@
         <a class="dfe-header__link dfe-header__link--service " href="<%= root_path %>" aria-label="DfE homepage">
           <%= image_tag("dfe-logo.png", class: "dfe-logo", alt: "DfE Homepage") %>
           <%= image_tag("dfe-logo-alt.png", class: "dfe-logo-hover", alt: "DfE Homepage") %>
-         <span class="dfe-header__service-name">
-           <%= t("service_name") %>
-         </span>
          </a>
       </div>
       <div class="dfe-header__content" id="content-header">
-         <div class="dfe-header__menu">
-            <button class="dfe-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
-         </div>
+        <div class="dfe-header__menu">
+          <button class="dfe-header__menu-toggle" id="toggle-menu" aria-controls="header-navigation" aria-expanded="false">Menu</button>
+        </div>
         <%= render partial: "shared/navigation/dfe_header_search" %>
       </div>
    </div>
+
+   <div class="govuk-width-container dfe-header__service-name">
+     <a href="<%= root_path %>" class="dfe-header__link--service"><%= t("service_name") %></a>
+   </div>
+
    <%= render partial: "shared/navigation/dfe_header_navigation" if policy(:navigation).show_header_navigation? %>
+
 </header>

config/initializers/content_security_policy.rb

@@ -7,6 +7,10 @@
 Rails.application.configure do
   config.content_security_policy do |policy|
     policy.default_src :self
+    policy.style_src :self,
+      "https://rsms.me/inter/inter.css"
+    policy.font_src :self,
+      "https://rsms.me"
     policy.script_src :self,
       "www.googletagmanager.com"
     policy.img_src :self,