Update node version from ^16.0.0 to ^18.0.0 and ruby 3.1.2 to 3.1.4 (#1794)

* Update govuk-prototype-components

* Update node version

* Udate versions in the pipeline

* Do not fix to a specific buildpack version

* Update ruby version

* Upgrade govuk-frontend

* Update summary cards to use govuk frontend component

.github/workflows/production_pipeline.yml

@@ -68,7 +68,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           cache: yarn
-          node-version: 16
+          node-version: 18
 
       - name: Create database
         run: |
@@ -127,7 +127,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           cache: yarn
-          node-version: 16
+          node-version: 18
 
       - name: Create database
         run: |

.github/workflows/staging_pipeline.yml

@@ -60,7 +60,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           cache: yarn
-          node-version: 16
+          node-version: 18
 
       - name: Create database
         run: |
@@ -118,7 +118,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           cache: yarn
-          node-version: 16
+          node-version: 18
 
       - name: Create database
         run: |
@@ -149,7 +149,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           cache: yarn
-          node-version: 16
+          node-version: 18
 
       - name: Install packages and symlink local dependencies
         run: |

.nvmrc

@@ -1 +1 @@
-16
+18

.ruby-version

@@ -1 +1 @@
-3.1.2
+3.1.4

Dockerfile

@@ -1,5 +1,5 @@
 # Build compilation image
-FROM ruby:3.1.2-alpine as builder
+FROM ruby:3.1.4-alpine as builder
 
 # The application runs from /app
 WORKDIR /app
@@ -45,7 +45,7 @@ RUN rm -rf node_modules log tmp && \
       find /usr/local/bundle/gems -name "*.html" -delete
 
 # Build runtime image
-FROM ruby:3.1.2-alpine as production
+FROM ruby:3.1.4-alpine as production
 
 # The application runs from /app
 WORKDIR /app

Dockerfile_dev

@@ -1,5 +1,5 @@
 # Build compilation image
-FROM ruby:3.1.2-alpine
+FROM ruby:3.1.4-alpine
 
 # The application runs from /app
 WORKDIR /app

Gemfile

@@ -3,7 +3,7 @@
 source "https://rubygems.org"
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
-ruby "3.1.2"
+ruby "3.1.4"
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
 gem "rails", "~> 7.0.2"

Gemfile.lock

@@ -501,7 +501,7 @@ DEPENDENCIES
   webmock
 
 RUBY VERSION
-   ruby 3.1.2p20
+   ruby 3.1.4p223
 
 BUNDLED WITH
    2.3.14

app/components/bulk_upload_error_row_component.html.erb

@@ -1,13 +1,13 @@
-<div class="x-govuk-summary-card govuk-!-margin-bottom-6">
-  <div class="x-govuk-summary-card__header">
+<div class="govuk-summary-card govuk-!-margin-bottom-6">
+  <div class="govuk-summary-card__title-wrapper">
     <% if lettings? %>
-      <h3 class="x-govuk-summary-card__title"><strong>Row <%= row %></strong> <%= tenant_code_html %> <%= property_ref_html %></h3>
+      <h3 class="govuk-summary-card__title"><strong>Row <%= row %></strong> <%= tenant_code_html %> <%= property_ref_html %></h3>
     <% else %>
-      <h3 class="x-govuk-summary-card__title"><strong>Row <%= row %></strong> <%= purchaser_code_html %></h3>
+      <h3 class="govuk-summary-card__title"><strong>Row <%= row %></strong> <%= purchaser_code_html %></h3>
     <% end %>
   </div>
 
-  <div class="x-govuk-summary-card__body">
+  <div class="govuk-summary-card__content">
     <%= govuk_table do |table| %>
       <% table.head do |head| %>
         <% head.row do |row| %>

app/components/check_answers_summary_list_card_component.html.erb

@@ -1,12 +1,12 @@
 <% if applicable_questions.first %>
-  <div class="x-govuk-summary-card govuk-!-margin-bottom-6">
+  <div class="govuk-summary-card govuk-!-margin-bottom-6">
     <% if applicable_questions.first.check_answers_card_number != 0 && applicable_questions.first.check_answers_card_number.present? %>
-      <div class="x-govuk-summary-card__header">
-        <h3 class="x-govuk-summary-card__title"><%= check_answers_card_title(applicable_questions.first) %></h3>
+      <div class="govuk-summary-card__title-wrapper">
+        <h3 class="govuk-summary-card__title"><%= check_answers_card_title(applicable_questions.first) %></h3>
       </div>
     <% end %>
 
-    <div class="x-govuk-summary-card__body">
+    <div class="govuk-summary-card__content">
       <%= govuk_summary_list do |summary_list| %>
         <% applicable_questions.each do |question| %>
           <% summary_list.row do |row| %>

app/frontend/application.js

@@ -13,7 +13,7 @@ import 'regenerator-runtime/runtime'
 
 //
 import { initAll as GOVUKFrontend } from 'govuk-frontend'
-import { initAll as GOVUKPrototypeComponents } from 'govuk-prototype-components'
+import { initAll as GOVUKPrototypeComponents } from '@x-govuk/govuk-prototype-components'
 import './controllers'
 import './cookie-banner'
 import './styles/application.scss'

app/frontend/controllers/govukfrontend_controller.js

@@ -1,5 +1,5 @@
 import { initAll as GOVUKFrontend } from 'govuk-frontend'
-import { initAll as GOVUKPrototypeComponents } from 'govuk-prototype-components'
+import { initAll as GOVUKPrototypeComponents } from '@x-govuk/govuk-prototype-components'
 import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {

app/views/form/_interruption_screen_question.html.erb

@@ -3,8 +3,8 @@
 <h1 class="govuk-heading-m">
   Make sure these answers are correct:
 </h1>
-<div class="x-govuk-summary-card govuk-!-margin-bottom-6">
-  <div class="x-govuk-summary-card__body">
+<div class="govuk-summary-card govuk-!-margin-bottom-6">
+  <div class="govuk-summary-card__content">
 
     <%= render partial: "form/check_answers_summary_list", locals: {
         lettings_log:,

app/views/form/review.html.erb

@@ -14,11 +14,11 @@
       <h2 class="govuk-heading-m"><%= section.label %></h2>
       <% section.subsections.map do |subsection| %>
         <% if total_applicable_questions(subsection, @log, current_user).any? %>
-          <div class="x-govuk-summary-card govuk-!-margin-bottom-6">
-            <div class="x-govuk-summary-card__header">
-              <h3 class="x-govuk-summary-card__title"><%= subsection.label %></h3>
+          <div class="govuk-summary-card govuk-!-margin-bottom-6">
+            <div class="govuk-summary-card__title-wrapper">
+              <h3 class="govuk-summary-card__title"><%= subsection.label %></h3>
             </div>
-            <div class="x-govuk-summary-card__body">
+            <div class="govuk-summary-card__content">
               <%= render partial: "form/check_answers_summary_list", locals: { subsection:, questions: total_applicable_questions(subsection, @log, current_user), referrer: "check_answers" } %>
             </div>
           </div>

config/cloud_foundry/review_manifest.yml

@@ -1,7 +1,7 @@
 ---
 defaults: &defaults
   buildpacks:
-    - https://github.com/cloudfoundry/ruby-buildpack.git#v1.8.59
+    - https://github.com/cloudfoundry/ruby-buildpack.git
   processes:
     - type: web
       command: bundle exec rake cf:on_first_instance db:migrate db:seed && bin/rails server

docs/setup.md

@@ -64,8 +64,8 @@ We recommend using [nvm](https://github.com/nvm-sh/nvm) to manage NodeJS version
 4. Install Ruby and Bundler
 
     ```bash
-    rbenv install 3.1.2
-    rbenv global 3.1.2
+    rbenv install 3.1.4
+    rbenv global 3.1.4
     source ~/.bashrc
     gem install bundler
     ```

manifest.yml

@@ -1,7 +1,7 @@
 ---
 defaults: &defaults
   buildpacks:
-    - https://github.com/cloudfoundry/ruby-buildpack.git#v1.8.59
+    - https://github.com/cloudfoundry/ruby-buildpack.git
   processes:
     - type: web
       command: bundle exec rake cf:on_first_instance db:migrate && bin/rails server

package.json

@@ -2,7 +2,7 @@
   "name": "data-collector",
   "private": true,
   "engines": {
-    "node": "^16.0.0"
+    "node": "^18.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.17.7",
@@ -11,6 +11,7 @@
     "@hotwired/stimulus": "^3.0.0",
     "@stimulus/polyfills": "^2.0.0",
     "@webcomponents/webcomponentsjs": "^2.6.0",
+    "@x-govuk/govuk-prototype-components": "^2.0.1",
     "accessible-autocomplete": "^2.0.3",
     "babel-loader": "^8.2.3",
     "babel-plugin-macros": "^3.1.0",
@@ -19,8 +20,7 @@
     "css-loader": "^6.7.1",
     "custom-event-polyfill": "^1.0.7",
     "file-loader": "^6.2.0",
-    "govuk-frontend": "4.2.0",
-    "govuk-prototype-components": "^0.4.0",
+    "govuk-frontend": "4.7.0",
     "html5shiv": "^3.7.3",
     "intersection-observer": "^0.12.0",
     "mini-css-extract-plugin": "^2.6.0",

spec/features/form/check_answers_page_lettings_logs_spec.rb

@@ -148,14 +148,14 @@ RSpec.describe "Lettings Log Check Answers Page" do
 
     it "does not group questions into summary cards if the questions in the subsection don't have a check_answers_card_number attribute" do
       visit("/lettings-logs/#{completed_lettings_log.id}/household-needs/check-answers")
-      assert_selector ".x-govuk-summary-card__title", count: 0
+      assert_selector ".govuk-summary-card__title", count: 0
     end
 
     context "when the user is checking their answers for the household characteristics subsection" do
       it "they see a separate summary card for each member of the household" do
         visit("/lettings-logs/#{completed_lettings_log.id}/#{subsection}/check-answers")
-        assert_selector ".x-govuk-summary-card__title", text: "Lead tenant", count: 1
-        assert_selector ".x-govuk-summary-card__title", text: "Person 2", count: 1
+        assert_selector ".govuk-summary-card__title", text: "Lead tenant", count: 1
+        assert_selector ".govuk-summary-card__title", text: "Person 2", count: 1
       end
     end
 

spec/features/form/check_answers_page_sales_logs_spec.rb

@@ -36,33 +36,33 @@ RSpec.describe "Sales Log Check Answers Page" do
 
     it "does not group questions into summary cards if the questions in the subsection don't have a check_answers_card_number attribute" do
       visit("/sales-logs/#{completed_sales_log_joint_purchase.id}/household-needs/check-answers")
-      assert_selector ".x-govuk-summary-card__title", count: 0
+      assert_selector ".govuk-summary-card__title", count: 0
     end
 
     context "when the user is checking their answers for the household characteristics subsection" do
       context "and the log is for a joint purchase" do
         it "they see a separate summary card for each member of the household" do
           visit("/sales-logs/#{completed_sales_log_joint_purchase.id}/#{subsection}/check-answers")
-          assert_selector ".x-govuk-summary-card__title", text: "Buyer 1", count: 1
-          assert_selector ".x-govuk-summary-card__title", text: "Buyer 2", count: 1
-          assert_selector ".x-govuk-summary-card__title", text: "Person 1", count: 0
-          assert_selector ".x-govuk-summary-card__title", text: "Person 2", count: 0
-          assert_selector ".x-govuk-summary-card__title", text: "Person 3", count: 1
-          assert_selector ".x-govuk-summary-card__title", text: "Person 4", count: 1
-          assert_selector ".x-govuk-summary-card__title", text: "Person 5", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Buyer 1", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Buyer 2", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Person 1", count: 0
+          assert_selector ".govuk-summary-card__title", text: "Person 2", count: 0
+          assert_selector ".govuk-summary-card__title", text: "Person 3", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Person 4", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Person 5", count: 1
         end
       end
 
       context "and the log is for a non-joint purchase" do
         it "they see a separate summary card for each member of the household" do
           visit("/sales-logs/#{completed_sales_log_non_joint_purchase.id}/#{subsection}/check-answers")
-          assert_selector ".x-govuk-summary-card__title", text: "Buyer 1", count: 1
-          assert_selector ".x-govuk-summary-card__title", text: "Buyer 2", count: 0
-          assert_selector ".x-govuk-summary-card__title", text: "Person 1", count: 0
-          assert_selector ".x-govuk-summary-card__title", text: "Person 2", count: 1
-          assert_selector ".x-govuk-summary-card__title", text: "Person 3", count: 1
-          assert_selector ".x-govuk-summary-card__title", text: "Person 4", count: 1
-          assert_selector ".x-govuk-summary-card__title", text: "Person 5", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Buyer 1", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Buyer 2", count: 0
+          assert_selector ".govuk-summary-card__title", text: "Person 1", count: 0
+          assert_selector ".govuk-summary-card__title", text: "Person 2", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Person 3", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Person 4", count: 1
+          assert_selector ".govuk-summary-card__title", text: "Person 5", count: 1
         end
       end
     end

spec/views/bulk_upload_lettings_results/show.html.erb_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe "bulk_upload_lettings_results/show.html.erb" do
 
       fragment = Capybara::Node::Simple.new(rendered)
 
-      expect(fragment.find_css(".x-govuk-summary-card__title strong").map(&:inner_text)).to eql(["Row 10", "Row 14"])
+      expect(fragment.find_css(".govuk-summary-card__title strong").map(&:inner_text)).to eql(["Row 10", "Row 14"])
     end
   end
 

spec/views/bulk_upload_lettings_results/summary.html.erb_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe "bulk_upload_lettings_results/summary.html.erb" do
 
       fragment = Capybara::Node::Simple.new(rendered)
 
-      expect(fragment.find_css(".x-govuk-summary-card__title strong").map(&:inner_text)).to eql(["Row 10", "Row 14"])
+      expect(fragment.find_css(".govuk-summary-card__title strong").map(&:inner_text)).to eql(["Row 10", "Row 14"])
     end
   end
 

spec/views/bulk_upload_sales_results/show.html.erb_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe "bulk_upload_sales_results/show.html.erb" do
 
       fragment = Capybara::Node::Simple.new(rendered)
 
-      expect(fragment.find_css(".x-govuk-summary-card__title strong").map(&:inner_text)).to eql(["Row 10", "Row 14"])
+      expect(fragment.find_css(".govuk-summary-card__title strong").map(&:inner_text)).to eql(["Row 10", "Row 14"])
     end
   end
 

spec/views/bulk_upload_sales_results/summary.html.erb_spec.rb

@@ -16,7 +16,7 @@ RSpec.describe "bulk_upload_sales_results/summary.html.erb" do
 
       fragment = Capybara::Node::Simple.new(rendered)
 
-      expect(fragment.find_css(".x-govuk-summary-card__title strong").map(&:inner_text)).to eql(["Row 10", "Row 14"])
+      expect(fragment.find_css(".govuk-summary-card__title strong").map(&:inner_text)).to eql(["Row 10", "Row 14"])
     end
   end
 

webpack.config.js

@@ -40,7 +40,7 @@ module.exports = {
   resolve: {
     alias: {
       'govuk-frontend-styles': path.resolve(__dirname, 'node_modules/govuk-frontend/govuk/all.scss'),
-      'govuk-prototype-styles': path.resolve(__dirname, 'node_modules/govuk-prototype-components/x-govuk/all.scss')
+      'govuk-prototype-styles': path.resolve(__dirname, 'node_modules/@x-govuk/govuk-prototype-components/x-govuk/all.scss')
     },
     modules: ['node_modules', 'node_modules/govuk-frontend/govuk']
   },