Merge pull request #4004 from nhsuk/split-frontend-stylesheets

thomasleese · web-flow · commit 1e08edca67f6 · 2025-07-21T07:26:06.000+01:00
Use separate stylesheets for public- and SAIS-facing interfaces
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,10 +1,20 @@
-@use "sass:color";
-
 // NHS.UK frontend components
-@forward "vendor/nhsuk-frontend";
+@forward "vendor/nhsuk-frontend" with (
+  $nhsuk-page-width: 1100px,
+  $nhsuk-grid-widths: (
+    one-quarter: 25%,
+    one-third: 33.3333%,
+    one-half: 50%,
+    two-thirds: 66.6666%,
+    three-quarters: 75%,
+    full: 100%,
+    filters: 30%,
+    results: 70%,
+  )
+);
 
 // GOV.UK Frontend components
 @forward "vendor/govuk-frontend";
 
-// App-specific components
+// Application components
 @forward "components";
diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss
@@ -12,7 +12,6 @@
 @forward "highlight";
 @forward "search-input";
 @forward "secondary-navigation";
-@forward "signed-in";
 @forward "status";
 @forward "summary-list";
 @forward "tables";
diff --git a/app/assets/stylesheets/components/_signed-in.scss b/app/assets/stylesheets/components/_signed-in.scss
diff --git a/app/assets/stylesheets/core/settings/_index.scss b/app/assets/stylesheets/core/settings/_index.scss
@@ -1,7 +1,6 @@
 @use "sass:color";
 @use "../../vendor/nhsuk-frontend" as *;
 
-$page-width: 1100px;
 // stylelint-disable-next-line scss/dollar-variable-pattern
 $color_dark-orange: color.scale(
   color.mix($color_nhsuk-red, $color_nhsuk-yellow, 60%),
diff --git a/app/assets/stylesheets/public.scss b/app/assets/stylesheets/public.scss
@@ -0,0 +1,10 @@
+// NHS.UK frontend components
+@forward "vendor/nhsuk-frontend";
+
+// Public-facing GOV.UK Frontend components
+@forward "vendor/govuk-frontend/public";
+
+// Public-facing components
+@forward "components/autocomplete";
+@forward "components/environment";
+@forward "components/summary-list";
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/_public.scss b/app/assets/stylesheets/vendor/govuk-frontend/_public.scss
@@ -0,0 +1,3 @@
+@use "base" as *;
+
+@forward "components/notification-banner";
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/components/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/components/_index.scss
@@ -1,4 +1,3 @@
 @forward "file-upload";
 @forward "notification-banner";
 @forward "pagination";
-@forward "password-input";
diff --git a/app/assets/stylesheets/vendor/govuk-frontend/components/password-input/_index.scss b/app/assets/stylesheets/vendor/govuk-frontend/components/password-input/_index.scss
diff --git a/app/assets/stylesheets/vendor/nhsuk-frontend/core/_index.scss b/app/assets/stylesheets/vendor/nhsuk-frontend/core/_index.scss
@@ -1,13 +1 @@
-@forward "pkg:nhsuk-frontend/packages/core" with (
-  $nhsuk-fonts-path: "/",
-  $nhsuk-grid-widths: (
-    one-quarter: 25%,
-    one-third: 33.3333%,
-    one-half: 50%,
-    two-thirds: 66.6666%,
-    three-quarters: 75%,
-    full: 100%,
-    filters: 30%,
-    results: 70%,
-  )
-);
+@forward "pkg:nhsuk-frontend/packages/core";
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -34,9 +34,6 @@ application.register(
   NhsukNotificationBannerController,
 );
 
-import NhsukPasswordInputController from "./nhsuk_password_input_controller";
-application.register("nhsuk-password-input", NhsukPasswordInputController);
-
 import NhsukRadiosController from "./nhsuk_radios_controller";
 application.register("nhsuk-radios", NhsukRadiosController);
 
diff --git a/app/javascript/controllers/nhsuk_password_input_controller.js b/app/javascript/controllers/nhsuk_password_input_controller.js
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -6,8 +6,7 @@
 
     <title><%= page_title(@service_name) %></title>
 
-    <%= stylesheet_link_tag "accessible-autocomplete.min", "data-turbo-track": Rails.env.development? ? "" : "reload" %>
-    <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.development? ? "" : "reload" %>
+    <%= stylesheet_link_tag current_user.present? ? "application" : "public", "data-turbo-track": Rails.env.development? ? "" : "reload" %>
     <%= javascript_include_tag "application", "data-turbo-track": Rails.env.development? ? "" : "reload", defer: true %>
 
     <%= csrf_meta_tags %>
@@ -17,7 +16,7 @@
     <%= yield :head %>
   </head>
 
-  <body class="nhsuk-template__body<%= ' app-signed-in' if current_user.present? %>">
+  <body class="nhsuk-template__body">
     <script>
       document.body.className += ' js-enabled' +
          ('noModule' in HTMLScriptElement.prototype
diff --git a/app/views/offline_passwords/new.html.erb b/app/views/offline_passwords/new.html.erb
@@ -24,26 +24,26 @@
       <%= f.hidden_field :assets_css, value: asset_path("application.css") %>
       <%= f.hidden_field :assets_js, value: asset_path("application.js") %>
 
-      <%= f.govuk_password_field :password,
-                                 label: {
-                                   text: "Offline password",
-                                   size: "s",
-                                 },
-                                 hint: {
-                                   text: "Your password must be at least 12 characters long",
-                                 },
-                                 width: 20,
-                                 autocomplete: "new-password",
-                                 data: { testid: "password" } %>
-
-      <%= f.govuk_password_field :password_confirmation,
-                                 label: {
-                                   text: "Confirm offline password",
-                                   size: "s",
-                                 },
-                                 width: 20,
-                                 autocomplete: "new-password",
-                                 data: { testid: "password-confirmation" } %>
+      <%= f.govuk_text_field :password,
+                             label: {
+                               text: "Offline password",
+                               size: "s",
+                             },
+                             hint: {
+                               text: "Your password must be at least 12 characters long",
+                             },
+                             width: 20,
+                             autocomplete: "new-password",
+                             data: { testid: "password" } %>
+
+      <%= f.govuk_text_field :password_confirmation,
+                             label: {
+                               text: "Confirm offline password",
+                               size: "s",
+                             },
+                             width: 20,
+                             autocomplete: "new-password",
+                             data: { testid: "password-confirmation" } %>
 
       <%= f.govuk_submit "Save password", data: { testid: "submit" } %>
     <% end %>
diff --git a/app/views/users/sessions/new.html.erb b/app/views/users/sessions/new.html.erb
@@ -4,7 +4,7 @@
   <%= h1 "Log in", size: "xl" %>
 
   <%= f.govuk_email_field :email, autocomplete: "email", label: { text: "Email address" } %>
-  <%= f.govuk_password_field :password, autocomplete: "current-password", label: { text: "Password" } %>
+  <%= f.govuk_text_field :password, autocomplete: "current-password", label: { text: "Password" }, type: "password" %>
 
   <% if devise_mapping.rememberable? %>
     <%= f.govuk_check_boxes_fieldset :remember_me, multiple: false, legend: nil do %>
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
@@ -7,9 +7,6 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
-Rails.application.config.assets.paths << Rails.root.join(
-  "node_modules/accessible-autocomplete/dist"
-)
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
     "workbox-build": "^7.3.0"
   },
   "scripts": {
-    "build:css": "sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css --no-source-map --pkg-importer=node --quiet-deps --style compressed",
+    "build:css": "sass ./app/assets/stylesheets:./app/assets/builds --no-source-map --pkg-importer=node --quiet-deps --style compressed",
     "build": "esbuild app/javascript/*.[jt]s app/javascript/controllers/*.[jt]s --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --minify",
     "build:serviceworker": "esbuild app/javascript/serviceworker/main.js --bundle --sourcemap --outfile=public/sw.js --minify",
     "test:e2e": "PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS=1 playwright test",

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@use "base" as *;`
	`2`	`+`
	`3`	`+@forward "components/notification-banner";`