Revert "Load govuk assets"

Dockerfile

@@ -18,6 +18,8 @@ RUN apk add --update --no-cache --virtual build-dependances \
     apk del build-dependances
 
 COPY package.json yarn.lock ./
+RUN  yarn install --frozen-lockfile && \
+     yarn cache clean
 
 COPY . .
 
@@ -34,7 +36,6 @@ ARG GOVUK_NOTIFY_GENERIC_EMAIL_TEMPLATE_ID
 ENV GOVUK_NOTIFY_GENERIC_EMAIL_TEMPLATE_ID=$GOVUK_NOTIFY_GENERIC_EMAIL_TEMPLATE_ID
 
 RUN bundle exec rake assets:precompile && \
-    rm -rf node_modules tmp && \
-    apk del yarn nodejs
+    rm -rf tmp
 
 CMD ./bin/app-startup.sh

app/assets/config/manifest.js

@@ -2,4 +2,4 @@
 //= link_tree ../builds
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
-//= link_tree ../../../vendor/assets
+//= link_tree ../../../node_modules

app/assets/stylesheets/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

app/javascript/packs/application.js

@@ -0,0 +1,18 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
+console.log('Hello World from Webpacker')

app/javascript/packs/govuk.js

@@ -0,0 +1,3 @@
+require("govuk-frontend/govuk/all").initAll()
+require.context('govuk-frontend/govuk/assets/images', true)
+import "./stylesheets/govuk.scss"

app/javascript/packs/stylesheets/custom.scss

@@ -0,0 +1,138 @@
+.dashboard {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 20px; /* Adjust this for your desired gap between columns */
+}
+
+.kpi-widget {
+  background-color: #1d70b8;
+  border-radius: 5px;
+  padding: 15px;
+  text-align: center;
+
+  .title {
+    font-size: 28px;
+    font-weight: bold;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+  }
+
+  .subtitle {
+    font-size: 17px;
+    font-weight: bold;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+  }
+
+  .value {
+    font-size: 70px;
+    font-weight: bold;
+    color: #fff;
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+
+  .value-small {
+    font-size: 24px;
+    font-weight: bold;
+    color: #fff;
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+  .value-smallest {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff;
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+
+  .kpi-table {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    width: 100%;
+    text-align: left;
+    color: #fff;
+
+    th {
+      font-weight: bold;
+      padding: 5px;
+    }
+
+    td {
+      padding: 5px;
+      font-size: 20px;
+    }
+
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+}
+
+.applicants-table {
+  font-size: 15px;
+
+  .govuk-table__head {
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    box-shadow: 0 0.3px 0 #b1b4b6;
+  }
+
+  th {
+    vertical-align: middle;
+    text-align: center;
+  }
+
+  td:not(:nth-child(-n + 2)) {
+    width: 120px;
+  }
+  td {
+    vertical-align: middle;
+  }
+  tr.sla-breached {
+    background-color: #f8d7da;
+  }
+}
+
+.flash {
+  padding: 15px;
+  margin-bottom: 20px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  width: 100%;
+  font-size: 1.2em;
+
+  &.notice {
+    color: #155724;
+    background-color: #d4edda;
+    border-color: #c3e6cb;
+  }
+
+  &.alert {
+    color: #721c24;
+    background-color: #f8d7da;
+    border-color: #f5c6cb;
+  }
+}
+
+#search {
+  .row {
+    display: flex;
+  }
+
+  .column {
+    flex: 1;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+}

app/javascript/packs/stylesheets/govuk.scss

@@ -0,0 +1,3 @@
+$govuk-assets-path: '~govuk-frontend/govuk/assets/';
+@import 'govuk-frontend/govuk/all';
+@import 'custom';

app/views/layouts/admin.html.erb

@@ -13,12 +13,12 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="<%= asset_url('images/favicon.ico') %>" type="image/x-icon" />
-    <link rel="mask-icon" href="<%= asset_url('images/govuk-mask-icon.svg') %>" color="blue">
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= asset_url('images/govuk-apple-touch-icon-180x180.png') %>">
-    <link rel="apple-touch-icon" sizes="167x167" href="<%= asset_url('images/govuk-apple-touch-icon-167x167.png') %>">
-    <link rel="apple-touch-icon" sizes="152x152" href="<%= asset_url('images/govuk-apple-touch-icon-152x152.png') %>">
-    <link rel="apple-touch-icon" href="<%= asset_url('images/govuk-apple-touch-icon.png') %>">
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="<%= asset_url('govuk-frontend/govuk/assets/images/favicon.ico') %>" type="image/x-icon" />
+    <link rel="mask-icon" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-mask-icon.svg') %>" color="blue">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-180x180.png') %>">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-167x167.png') %>">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-152x152.png') %>">
+    <link rel="apple-touch-icon" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon.png') %>">
     <%= stylesheet_link_tag 'application', 'data-turbolinks-track': 'reload' %>
 
     <%= javascript_importmap_tags %>

app/views/layouts/application.html.erb

@@ -13,18 +13,18 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 
-    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="<%= asset_url('images/favicon.ico') %>" type="image/x-icon" />
-    <link rel="mask-icon" href="<%= asset_url('images/govuk-mask-icon.svg') %>" color="blue">
-    <link rel="apple-touch-icon" sizes="180x180" href="<%= asset_url('images/govuk-apple-touch-icon-180x180.png') %>">
-    <link rel="apple-touch-icon" sizes="167x167" href="<%= asset_url('images/govuk-apple-touch-icon-167x167.png') %>">
-    <link rel="apple-touch-icon" sizes="152x152" href="<%= asset_url('images/govuk-apple-touch-icon-152x152.png') %>">
-    <link rel="apple-touch-icon" href="<%= asset_url('images/govuk-apple-touch-icon.png') %>">
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="<%= asset_url('govuk-frontend/govuk/assets/images/favicon.ico') %>" type="image/x-icon" />
+    <link rel="mask-icon" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-mask-icon.svg') %>" color="blue">
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-180x180.png') %>">
+    <link rel="apple-touch-icon" sizes="167x167" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-167x167.png') %>">
+    <link rel="apple-touch-icon" sizes="152x152" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-152x152.png') %>">
+    <link rel="apple-touch-icon" href="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-apple-touch-icon.png') %>">
 
     <%= stylesheet_link_tag 'application', 'data-turbolinks-track': 'reload' %>
 
     <%= javascript_importmap_tags %>
 
-    <meta property="og:image" content="<%= asset_url('images/govuk-opengraph-image.png') %>">
+    <meta property="og:image" content="<%= asset_url('govuk-frontend/govuk/assets/images/govuk-opengraph-image.png') %>">
   </head>
 
   <body class="govuk-template__body app-body-class">

babel.config.js

@@ -0,0 +1,82 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        '@babel/preset-env',
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        '@babel/preset-env',
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      'babel-plugin-macros',
+      '@babel/plugin-syntax-dynamic-import',
+      isTestEnv && 'babel-plugin-dynamic-import-node',
+      '@babel/plugin-transform-destructuring',
+      [
+        '@babel/plugin-proposal-class-properties',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-object-rest-spread',
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-private-methods',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-proposal-private-property-in-object',
+        {
+          loose: true
+        }
+      ],
+      [
+        '@babel/plugin-transform-runtime',
+        {
+          helpers: false
+        }
+      ],
+      [
+        '@babel/plugin-transform-regenerator',
+        {
+          async: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

config/environments/test.rb

@@ -51,7 +51,4 @@
   # config.action_view.annotate_rendered_view_with_filenames = true
 
   config.active_job.queue_adapter = :test
-
-  # config/initializers/dartsass.rb
-  config.dartsass.build_options << " --quiet-deps"
 end

config/initializers/assets.rb

@@ -5,6 +5,7 @@
 # Version of your assets, change this if you want to expire all your assets.
 Rails.application.config.assets.version = "1.0"
 Rails.application.config.assets.paths << Rails.root.join("node_modules")
+Rails.application.config.assets.paths << Rails.root.join("node_modules/govuk-frontend/govuk/assets")
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}