feat(v9.0.0)!: Update to support govuk-frontend v6.0.0 (#2192)

Updates to the design system site to support GOV.UK Frontend v6.0.0

BREAKING CHANGE: Updates to MOJ Frontend to support all the changes in GOV.UK Frontend v6.0.0

Author: chrispymm

.github/workflows/sass.yml

@@ -16,11 +16,8 @@ jobs:
 
       matrix:
         package-version:
-          # Release without major deprecations
-          - 1.77.6
-
-          # Release with `mixed-decls` deprecated
-          - 1.77.7
+          # Earliest release supported by GOV.UK frontend v6.0.0
+          - 1.79.0
 
           # Release with `import` deprecated
           - 1.80.0

app/views/common/404.njk

@@ -2,7 +2,7 @@
 {% block header %}
     {% include "./partials/header-no-nav.njk" %}
 {% endblock %}
-{% block main %}
+{% block container %}
     <div class="app-layout__content">
         <main id="main-content" class="app-prose-scope">
             <h1>{{ title }}</h1>

app/views/common/500.njk

@@ -2,7 +2,7 @@
 {% block header %}
     {% include "./partials/header-no-nav.njk" %}
 {% endblock %}
-{% block main %}
+{% block container %}
     <div class="app-layout__content">
         <main id="main-content" class="app-prose-scope">
             <h1>{{ title }}</h1>

app/views/common/base.njk

@@ -42,7 +42,7 @@
   {% include "./partials/header.njk" %}
 {% endblock %}
 
-{% block main %}
+{% block container %}
   <div class="app-layout">
     <div id="sidebar" class="app-layout__sidebar">
       {% include "./partials/side-navigation.njk" ignore missing %}

app/views/common/partials/side-navigation.njk

@@ -45,6 +45,13 @@
 
 
 
+<li class="app-vertical-nav__item  ">
+  <a class="app-vertical-nav__link" href="/components/api-error/">API error</a></li>
+
+
+
+
+
 <li class="app-vertical-nav__item  ">
   <a class="app-vertical-nav__link" href="/components/badge/">Badge</a></li>
 
@@ -192,6 +199,13 @@
 
 
 
+<li class="app-vertical-nav__item  ">
+  <a class="app-vertical-nav__link" href="/components/outage-banner/">Outage banner</a></li>
+
+
+
+
+
 <li class="app-vertical-nav__item  ">
   <a class="app-vertical-nav__link" href="/components/page-header-actions/">Page header actions</a></li>
 

docs/_includes/layouts/404.njk

@@ -2,7 +2,7 @@
 {% block header %}
     {% include "./partials/header-no-nav.njk" %}
 {% endblock %}
-{% block main %}
+{% block container %}
     <div class="app-layout__content">
         <main id="main-content" class="app-prose-scope">
             <h1>{{ title }}</h1>

docs/_includes/layouts/500.njk

@@ -2,7 +2,7 @@
 {% block header %}
     {% include "./partials/header-no-nav.njk" %}
 {% endblock %}
-{% block main %}
+{% block container %}
     <div class="app-layout__content">
         <main id="main-content" class="app-prose-scope">
             <h1>{{ title }}</h1>

docs/_includes/layouts/base.njk

@@ -42,7 +42,7 @@
   {% include "./partials/header.njk" %}
 {% endblock %}
 
-{% block main %}
+{% block container %}
   <div class="app-layout">
     <div id="sidebar" class="app-layout__sidebar">
       {% include "./partials/side-navigation.njk" ignore missing %}

docs/_includes/layouts/example.njk

@@ -20,7 +20,7 @@
   <style>{% include stylesPath ignore missing %}</style>
 {% endblock %}
 
-{% block main %}
+{% block container %}
   {{ content | safe }}
 {% endblock %}
 

docs/stylesheets/components/_header.scss

@@ -2,7 +2,7 @@
 
 .moj-header--docs {
   padding-top: govuk-spacing(3);
-  border-bottom: 10px solid govuk-colour("pink");
+  border-bottom: 10px solid govuk-colour("magenta", $variant: "primary");
   background-color: #220051;
 }
 
@@ -28,13 +28,15 @@
 
   &--organisation-name {
     display: none;
+
     @include govuk-media-query($from: tablet) {
       display: initial;
     }
   }
 
   &--organisation-initials {
     font-weight: bold;
+
     @include govuk-media-query($from: tablet) {
       display: none;
     }