Fix example project and base template

uktrade · Jun 17, 2024 · 862c39a · 862c39a
1 parent 81802c2
commit 862c39a
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 243 deletions.
diff --git a/example_project/example/templates/base.html b/example_project/example/templates/base.html
@@ -15,8 +15,12 @@
     {% endgds_header %}
 {% endblock header %}
 {% block body_end %}
-    <script src='{% static "govuk-frontend/govuk/all.js" %}'></script>
-    <script>window.GOVUKFrontend.initAll()</script>
+    <script type="module"
+            src='{% static "govuk-frontend/dist/govuk/govuk-frontend.min.js" %}'></script>
+    <script type="module">
+        import { initAll } from '{% static "govuk-frontend/dist/govuk/govuk-frontend.min.js" %}'
+        initAll()
+    </script>
     <script>
         const CSRF_TOKEN = "{{ csrf_token }}";
 

diff --git a/example_project/example/templates/example/templatetags.html b/example_project/example/templates/example/templatetags.html
@@ -91,15 +91,15 @@ <h1 class="govuk-heading-l">Template tags for GDS components</h1>
             {% endgds_footer %}
         {% endgds_accordion_item %}
         {% gds_accordion_item heading="Header" summary="The header component" %}
-            {% gds_header homepageUrl="/" productName="Some product" serviceName="Service name" serviceUrl="/" %}
+            {% gds_header homepageUrl="/" productName="Some product" serviceName="Service name" serviceUrl="/" useTudorCrown=False %}
                 {% gds_header_nav_item href="/" %}
                     Nav item 1
                 {% endgds_header_nav_item %}
                 {% gds_header_nav_item_inline href="/" text="Nav item 2" %}
                 {% gds_header_nav_item_inline href="/components/" text="Components" %}
             {% endgds_header %}
             OR
-            {% gds_header homepageUrl="/" productName="Some product" serviceName="Service name" serviceUrl="/" %}
+            {% gds_header homepageUrl="/" productName="Some product" serviceName="Service name" serviceUrl="/" useTudorCrown=True %}
                 {% if True %}
                     {% gds_header_nav_item_inline href="/" text="Truthy nav link" %}
                 {% endif %}

diff --git a/example_project/package-lock.json b/example_project/package-lock.json
diff --git a/example_project/package.json b/example_project/package.json
@@ -1,10 +1,10 @@
 {
     "dependencies": {
-        "govuk-frontend": "4.6.0",
+        "govuk-frontend": "5.1.0",
         "sass": "^1.63.6"
     },
     "scripts": {
         "build": "sass --load-path=./ --quiet-deps --style=compressed static/css/styles.scss static/css/styles.css",
         "watch": "sass --load-path=./ --quiet-deps --style=compressed static/css/styles.scss static/css/styles.css --watch"
     }
-}
+}
diff --git a/example_project/static/css/styles.css b/example_project/static/css/styles.css
diff --git a/example_project/static/css/styles.css.map b/example_project/static/css/styles.css.map
diff --git a/example_project/static/css/styles.scss b/example_project/static/css/styles.scss
@@ -1,2 +1,2 @@
-$govuk-assets-path: "/static/govuk-frontend/govuk/assets/";
-@import "./node_modules/govuk-frontend/govuk/all";
+$govuk-assets-path: "/static/govuk-frontend/dist/govuk/assets/";
+@import "./node_modules/govuk-frontend/dist/govuk/all";
diff --git a/govuk_frontend_django/templates/govuk_frontend_django/base.html b/govuk_frontend_django/templates/govuk_frontend_django/base.html
@@ -1,56 +1,67 @@
 {% load static govuk_frontend_django %}
 <!DOCTYPE html>
 <html lang="en" class="govuk-template">
-
     <head>
         <meta charset="utf-8">
-        <title>{% block title %}{% endblock title %}</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+        <title>
+            {% block title %}
+            {% endblock title %}
+        </title>
+        <meta name="viewport"
+              content="width=device-width, initial-scale=1, viewport-fit=cover">
         <meta name="theme-color" content="#0b0c0c">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <link rel="shortcut icon" sizes="16x16 32x32 48x48" href='{% static "govuk-frontend/govuk/assets/images/favicon.ico" %}' type="image/x-icon">
-        <link rel="mask-icon" href='{% static "govuk-frontend/govuk/assets/images/govuk-mask-icon.svg" %}' color="#0b0c0c">
-        <link rel="apple-touch-icon" sizes="180x180" href='{% static "govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-180x180.png" %}'>
-        <link rel="apple-touch-icon" sizes="167x167" href='{% static "govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-167x167.png" %}'>
-        <link rel="apple-touch-icon" sizes="152x152" href='{% static "govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-152x152.png" %}'>
-        <link rel="apple-touch-icon" href='{% static "govuk-frontend/govuk/assets/images/govuk-apple-touch-icon.png" %}'>
-
+        <link rel="shortcut icon"
+              sizes="16x16 32x32 48x48"
+              href='{% static "govuk-frontend/govuk/assets/images/favicon.ico" %}'
+              type="image/x-icon">
+        <link rel="mask-icon"
+              href='{% static "govuk-frontend/govuk/assets/images/govuk-mask-icon.svg" %}'
+              color="#0b0c0c">
+        <link rel="apple-touch-icon"
+              sizes="180x180"
+              href='{% static "govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-180x180.png" %}'>
+        <link rel="apple-touch-icon"
+              sizes="167x167"
+              href='{% static "govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-167x167.png" %}'>
+        <link rel="apple-touch-icon"
+              sizes="152x152"
+              href='{% static "govuk-frontend/govuk/assets/images/govuk-apple-touch-icon-152x152.png" %}'>
+        <link rel="apple-touch-icon"
+              href='{% static "govuk-frontend/govuk/assets/images/govuk-apple-touch-icon.png" %}'>
         {% block head %}
             <link href='{% static "govuk-frontend/govuk/all.css" %}' rel="stylesheet">
         {% endblock head %}
     </head>
-
     <body class="govuk-template__body ">
-        <script>
-        document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
-        </script>
+        <script>document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');</script>
         {% block body_start %}
         {% endblock body_start %}
-
-        {% gds_component "skip-link" text="Skip to main content" href="#main-content" %}
-
+        {% gds_component "skip-link" text="Skip to main content" %}
         {% block header %}
             {% gds_header homepageUrl="/" serviceName="Service name" serviceUrl="/" containerClasses="govuk-width-container" %}
             {% endgds_header %}
         {% endblock header %}
-
         <div class="{% block container_class_names %}govuk-width-container{% endblock container_class_names %}">
-            <main class="{% block main_class_names %}govuk-main-wrapper{% endblock main_class_names %}" id="main-content" role="main">
+            <main class="{% block main_class_names %}govuk-main-wrapper{% endblock main_class_names %}"
+                  id="content"
+                  role="main">
                 {% block content %}
                     <h1 class="govuk-heading-xl">Default page template</h1>
                 {% endblock content %}
             </main>
         </div>
-
         {% block footer %}
             {% gds_footer %}
             {% endgds_footer %}
         {% endblock footer %}
-
         {% block body_end %}
-            <script src='{% static "govuk-frontend/govuk/all.js" %}'></script>
-            <script>window.GOVUKFrontend.initAll()</script>
+            <script type="module"
+                    src='{% static "govuk-frontend/dist/govuk/govuk-frontend.min.js" %}'></script>
+            <script type="module">
+                import { initAll } from '{% static "govuk-frontend/dist/govuk/govuk-frontend.min.js" %}'
+                initAll()
+            </script>
         {% endblock body_end %}
     </body>
-
 </html>