Consolidate GOV.UK Frontend into application scripts

We need to ensure that only `initAll()` on example pages suppresses auto focus

Author: colinrotherham

lib/metalsmith.js

@@ -175,14 +175,9 @@ module.exports = metalsmith
     done()
   })
 
-  // build the entrypoint for application specific JavaScript
+  // build the entrypoints for application specific JavaScript
   .use(rollup('javascripts/application.mjs'))
-
-  // build GOV.UK Frontend JavaScript
-  .use(rollup('javascripts/govuk-frontend.mjs'))
-
-  // build the entrypoint for example specific JavaScript
-  .use(rollup('javascripts/example.mjs'))
+  .use(rollup('javascripts/application-example.mjs'))
 
   // add hash to files in production
   .use((files, metalsmith, done) => {

src/javascripts/application-example.mjs

@@ -0,0 +1,13 @@
+import { initAll } from 'govuk-frontend'
+
+import ExamplePage from './components/example-page.mjs'
+
+// Initialise GOV.UK Frontend
+initAll({
+  // Auto focusing the error summary and notification banner is not useful
+  // when used in examples, and causes the viewport to scroll
+  errorSummary: { disableAutoFocus: true },
+  notificationBanner: { disableAutoFocus: true }
+})
+
+new ExamplePage(document).init()

src/javascripts/application.mjs

@@ -1,3 +1,5 @@
+import { initAll } from 'govuk-frontend'
+
 import Analytics from './components/analytics.mjs'
 import BackToTop from './components/back-to-top.mjs'
 import CookieBanner from './components/cookie-banner.mjs'
@@ -11,6 +13,9 @@ import OptionsTable from './components/options-table.mjs'
 import Search from './components/search.mjs'
 import AppTabs from './components/tabs.mjs'
 
+// Initialise GOV.UK Frontend
+initAll()
+
 // Initialise cookie banner
 var $cookieBanner = document.querySelector('[data-module="govuk-cookie-banner"]')
 new CookieBanner($cookieBanner).init()

src/javascripts/example.mjs renamed to src/javascripts/components/example-page.mjs

@@ -1,6 +1,7 @@
 function ExamplePage ($module) {
   this.$module = $module
 }
+
 ExamplePage.prototype.init = function () {
   var $module = this.$module
   if (!$module) {
@@ -9,6 +10,7 @@ ExamplePage.prototype.init = function () {
   var $form = $module.querySelector('form[action="/form-handler"]')
   this.preventFormSubmission($form)
 }
+
 ExamplePage.prototype.preventFormSubmission = function ($form) {
   // we should only have one form per example
   if (!$form) {
@@ -19,4 +21,4 @@ ExamplePage.prototype.preventFormSubmission = function ($form) {
   })
 }
 
-new ExamplePage(document).init()
+export default ExamplePage

src/javascripts/govuk-frontend.mjs

@@ -81,7 +81,7 @@ stylesheets:
     <span class="app-annotate-block__label">block: bodyEnd</span>
     {{ super() }}
     {# Since we’re not extending the Design System layout we need to add this manually #}
-    <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+    <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
     <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
   </div>
 {%- endblock %}

src/styles/page-template/block-areas/index.njk

@@ -149,6 +149,6 @@ ignoreInSitemap: true
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
   <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

src/styles/page-template/custom/index.njk

@@ -14,6 +14,6 @@ layout: false
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
   <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

src/styles/page-template/default/index.njk

@@ -37,6 +37,5 @@
 {% block footer %}{% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
   <script type="module" src="{{ getFingerprint('javascripts/application.js') }}"></script>
 {% endblock %}

views/layouts/_generic.njk

@@ -22,7 +22,6 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script type="module" src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
   <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

views/layouts/layout-example-full-page-govuk.njk

@@ -24,7 +24,6 @@
   {{ contents | safe }}
 {% endblock %}
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script type="module" src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
   <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}

views/layouts/layout-example-full-page.njk

@@ -35,8 +35,7 @@
 {% endblock %}
 
 {% block bodyEnd %}
-  <script type="module" src="{{ getFingerprint('javascripts/govuk-frontend.js') }}"></script>
-  <script type="module" src="{{ getFingerprint('javascripts/example.js') }}"></script>
+  <script type="module" src="{{ getFingerprint('javascripts/application-example.js') }}"></script>
   <script type="module" src="{{ getFingerprint('javascripts/vendor/iframeResizer.contentWindow.min.js') }}"></script>
 {% endblock %}