Merge pull request #2626 from alphagov/ldeb-govuk-frontend-6

Upgrade to GOV.UK Frontend 6.0.0

Author: lfdebrux

Gemfile

@@ -41,8 +41,8 @@ gem "bootsnap", require: false
 gem "vite_rails"
 
 # For GOV.UK branding
-gem "govuk-components"
-gem "govuk_design_system_formbuilder"
+gem "govuk-components", "~> 6"
+gem "govuk_design_system_formbuilder", "~> 6"
 
 # The autocomplete component is not currently published as a gem, if changing
 # the hash, also change in package.json

Gemfile.lock

@@ -242,11 +242,11 @@ GEM
       rake (>= 13)
     googleapis-common-protos-types (1.22.0)
       google-protobuf (~> 4.26)
-    govuk-components (5.13.1)
+    govuk-components (6.0.0)
       html-attributes-utils (~> 1.0.0, >= 1.0.0)
       pagy (>= 6, < 10)
-      view_component (>= 4.0, < 4.2)
-    govuk_design_system_formbuilder (5.13.0)
+      view_component (>= 4.0, < 4.3)
+    govuk_design_system_formbuilder (6.0.0)
       actionview (>= 6.1)
       activemodel (>= 6.1)
       activesupport (>= 6.1)
@@ -822,9 +822,9 @@ DEPENDENCIES
   factory_bot_rails
   faker
   gds-sso
-  govuk-components
+  govuk-components (~> 6)
   govuk-forms-markdown!
-  govuk_design_system_formbuilder
+  govuk_design_system_formbuilder (~> 6)
   govuk_notify_rails
   i18n-tasks (~> 1.1.2)
   lograge
@@ -933,9 +933,9 @@ CHECKSUMS
   google-protobuf (4.33.4-x86_64-linux-gnu) sha256=a8cff953d742bc804ece78bd96e82d88cf65a7d8c1910e045359e2f53074e55d
   google-protobuf (4.33.4-x86_64-linux-musl) sha256=265e6e5bbcc0ba1367268739e31c4cc84ff310b56e8d738d2a3245b5cccfc2e7
   googleapis-common-protos-types (1.22.0) sha256=f97492b77bd6da0018c860d5004f512fe7cd165554d7019a8f4df6a56fbfc4c7
-  govuk-components (5.13.1) sha256=74808d8188a7de2c5e83e5a829c5f8ac3851df27f82410a4a2444cf53c24cfe5
+  govuk-components (6.0.0) sha256=38feaed165ea2afe4c6f9f68bfcdfdb56426be133d2402912817e21830cbce81
   govuk-forms-markdown (0.8.0)
-  govuk_design_system_formbuilder (5.13.0) sha256=126ff4af70b36f06395e8f4f09d399944bcc10e9a41c2ff7d7773e81e92ca885
+  govuk_design_system_formbuilder (6.0.0) sha256=30025c64e05b71018a48b8618e6e9501efe4bf049d5e127d90e2fd48c0b60ea8
   govuk_notify_rails (3.0.0) sha256=e0e1b8b0a7c47f90963034f290fb2982652aa8051a733c25c178680d44f2d7aa
   hashdiff (1.2.1) sha256=9c079dbc513dfc8833ab59c0c2d8f230fa28499cc5efb4b8dd276cf931457cd1
   hashie (5.1.0) sha256=c266471896f323c446ea8207f8ffac985d2718df0a0ba98651a3057096ca3870

app/components/form_status_tag_component/view.rb

@@ -8,7 +8,7 @@ def initialize(status: :draft)
     def status_colour
       {
         draft: "yellow",
-        live: "turquoise",
+        live: "teal",
         archived: "orange",
       }[@status]
     end

app/components/header_component/_index.scss

@@ -12,12 +12,12 @@
 }
 
 .govuk-header {
-  &.app-header--pink {
-    border-top: 10px solid govuk-colour("pink");
+  &.app-header--magenta {
+    border-top: 10px solid govuk-colour("magenta");
   }
 
-  &.app-header--turquoise {
-    border-top: 10px solid govuk-colour("turquoise");
+  &.app-header--teal {
+    border-top: 10px solid govuk-colour("teal");
   }
 
   &.app-header--yellow {

app/components/header_component/view.html.erb

@@ -1,3 +1,3 @@
 <%= govuk_header classes: ["govuk-header--full-width-border", "app-header", app_header_class_for_environment] do |header| %>
-  <%= header.with_product_name(name: "#{t("header.product_name")} #{render(environment_tag)}".html_safe, classes: ["app-header__product-name"]) %>
+  <% header.with_product_name(name: "#{t("header.product_name")} #{render(environment_tag)}".html_safe, classes: ["app-header__product-name"]) %>
 <% end %>

app/components/header_component/view.rb

@@ -22,9 +22,9 @@ def app_header_class_for_environment
     def colour_for_environment
       case environment_name
       when "Local"
-        "pink"
+        "magenta"
       when "Development"
-        "turquoise"
+        "teal"
       when "Staging"
         "yellow"
       else

app/components/markdown_editor_component/_index.scss

@@ -3,7 +3,7 @@
 }
 
 .app-markdown-editor__preview-area {
-  border: 2px solid $govuk-border-colour;
+  border: 2px solid govuk-functional-colour(border);
   padding: 30px;
   margin: 0 0 1em;
 }
@@ -44,7 +44,7 @@
 
   &:focus-within {
     box-shadow: inset 0 0 0 2px;
-    outline: 3px solid $govuk-focus-colour;
+    outline: 3px solid govuk-functional-colour(focus);
     outline-offset: 0;
   }
 }

app/components/metrics_summary_component/_index.scss

@@ -21,8 +21,8 @@
       flex-flow: column nowrap;
       justify-content: space-between;
 
-      border-top: $govuk-border-width solid $govuk-border-colour;
-      border-bottom: $govuk-border-width solid $govuk-border-colour;
+      border-top: $govuk-border-width solid govuk-functional-colour(border);
+      border-bottom: $govuk-border-width solid govuk-functional-colour(border);
     }
   }
 }

app/components/page_list_component/_index.scss

@@ -22,6 +22,6 @@
 
 .app-page_list__route-text--error {
   @include govuk-responsive-margin(2, "bottom");
-  color: $govuk-error-colour;
+  color: govuk-functional-colour(error);
   font-weight: 700;
 }

app/components/scrolling_wrapper_component/_index.scss

@@ -3,7 +3,7 @@
 }
 
 .app-scrolling-wrapper:focus-visible {
-  outline: $govuk-focus-width solid $govuk-focus-colour;
+  outline: $govuk-focus-width solid govuk-functional-colour(focus);
   outline-offset: $govuk-focus-width;
   box-shadow: 0 0 0 $govuk-focus-width;
 }