Remove outerContent, keeping only beforeContent. fixes #2023

nhsuk · Aug 29, 2024 · 3612739 · 3612739
1 parent 2ea9b42
commit 3612739
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 63 deletions.
diff --git a/app/views/design-system/patterns/mini-hub/example-symptoms/index.njk b/app/views/design-system/patterns/mini-hub/example-symptoms/index.njk
@@ -6,7 +6,7 @@
 {% from 'inset-text/macro.njk' import insetText %}
 {% from 'pagination/macro.njk' import pagination %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

diff --git a/app/views/design-system/patterns/mini-hub/example/index.njk b/app/views/design-system/patterns/mini-hub/example/index.njk
@@ -4,7 +4,7 @@
 {% from 'contents-list/macro.njk' import contentsList %}
 {% from 'pagination/macro.njk' import pagination %}
 
-{% block outerContent %}
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

diff --git a/app/views/design-system/patterns/start-page/example/index.njk b/app/views/design-system/patterns/start-page/example/index.njk
@@ -3,7 +3,9 @@
 {% from 'breadcrumb/macro.njk' import breadcrumb %}
 {% from 'button/macro.njk' import button %}
 
-{% block outerContent %}
+{% set mainClasses = "nhsuk-main-wrapper--s" %}
+
+{% block beforeContent %}
   {{ breadcrumb({
     items: [
       {

diff --git a/app/views/design-system/styles/page-template/annotated/index.njk b/app/views/design-system/styles/page-template/annotated/index.njk
@@ -22,9 +22,15 @@
 {%- endblock %}
 
 {% block beforeContent-%}
-  <div class="app-annotate-block">
+    <div class="app-annotate-block">
     <span class="app-annotate-block__label">block: beforeContent</span>
     {{ super() }}
+    {% from 'back-link/macro.njk' import backLink %}
+
+    {{ backLink({
+      href: "/",
+      text: "Back"
+    }) }}
   </div>
 {%- endblock %}
 
@@ -35,19 +41,6 @@
   </div>
 {%- endblock %}
 
-{% block outerContent-%}
-  <div class="app-annotate-block">
-    <span class="app-annotate-block__label">block: outerContent</span>
-    {{ super() }}
-    {% from 'back-link/macro.njk' import backLink %}
-
-    {{ backLink({
-      href: "/",
-      text: "Back"
-    }) }}
-  </div>
-{%- endblock %}
-
 {% block content -%}
   <div class="app-annotate-block">
     <span class="app-annotate-block__label">block: content</span>

diff --git a/app/views/design-system/styles/page-template/index.njk b/app/views/design-system/styles/page-template/index.njk
@@ -145,18 +145,6 @@
     </thead>
     <tbody class="nhsuk-table__body">
 
-      <tr class="nhsuk-table__row" role="row">
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option name </span>beforeContent</td>
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option type </span>Block</td>
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>
-          <span>
-            Add content that needs to appear outside <code>&lt;main&gt;</code> element and <code>&lt;div class="nhsuk-width-container"&gt;</code>.
-          <br>
-          For example: the <a href="/design-system/components/breadcrumbs">breadcrumbs</a> component.
-          </span>
-        </td>
-      </tr>
-
       <tr class="nhsuk-table__row">
         <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option name </span>bodyAttributes</td>
         <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option type </span>Variable</td>
@@ -177,6 +165,17 @@
         </td>
       </tr>
 
+      <tr class="nhsuk-table__row" role="row">
+        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option name </span>beforeContent</td>
+        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option type </span>Block</td>
+        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>
+          <span>
+            Add content that needs to appear outside <code>&lt;main&gt;</code> element.
+          <br>
+          For example: the <a href="/design-system/components/breadcrumbs">breadcrumbs</a> component and the <a href="/design-system/components/back-link">back link</a>.
+          </span>
+        </td>
+      </tr>
 
       <tr class="nhsuk-table__row">
         <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option name </span>bodyEnd</td>
@@ -262,16 +261,6 @@
         </td>
       </tr>
 
-      <tr class="nhsuk-table__row">
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option name </span>main</td>
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option type </span>Block</td>
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>
-          <span>
-            Override the main section of the page, which by default wraps the <code>&lt;main&gt;</code> element, <code>outerContent</code> block and <code>content</code> block.
-          </span>
-        </td>
-      </tr>
-
       <tr class="nhsuk-table__row">
         <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option name </span>mainClasses</td>
         <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option type </span>Variable</td>
@@ -281,18 +270,6 @@
           </span>
       </tr>
 
-      <tr class="nhsuk-table__row">
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option name </span>outerContent</td>
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option type </span>Block</td>
-        <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Description </span>
-          <span>
-            Add content that needs to appear outside <code>&lt;main&gt;</code> element but inside the <code>&lt;div class="nhsuk-width-container"&gt;</code>.
-            <br>
-            For example: the <a href="/design-system/components/back-link">back link</a> component.
-          </span>
-        </td>
-      </tr>
-
       <tr class="nhsuk-table__row">
         <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option name </span>pageTitle</td>
         <td class="nhsuk-table__cell" role="cell"><span class="nhsuk-table-responsive__heading" aria-hidden="true">Option type </span>Block</td>

diff --git a/app/views/design-system/styles/page-template/transactional/index.njk b/app/views/design-system/styles/page-template/transactional/index.njk
@@ -8,14 +8,6 @@
   Transactional page template
 {% endblock %}
 
-{% block outerContent %}
-  {{ backLink({
-    href: "#",
-    text: "Back",
-    classes: "nhsuk-u-margin-top-4 nhsuk-u-margin-bottom-0"
-  }) }}
-{% endblock %}
-
 {% block header %}
   {{ header({
     transactionalService: {
@@ -28,6 +20,13 @@
   }}
 {% endblock %}
 
+{% block beforeContent %}
+  {{ backLink({
+    href: "#",
+    text: "Back"
+  }) }}
+{% endblock %}
+
 {% block content %}
   <div class="nhsuk-grid-row">
     <div class="nhsuk-grid-column-two-thirds">

diff --git a/app/views/includes/design-example-wrapper-full-layout.njk b/app/views/includes/design-example-wrapper-full-layout.njk
@@ -1,4 +1,3 @@
-{% block outerContent %}{% endblock %}
 <div class="nhsuk-width-container">
   {% block beforeContent %}{% endblock %}
   <main class="nhsuk-main-wrapper{% if mainClasses %} {{ mainClasses }}{% endif %}" id="maincontent" role="main">

diff --git a/app/views/includes/template.njk b/app/views/includes/template.njk
@@ -53,11 +53,9 @@
         {{ header({}) }}
       {% endblock %}
 
-      {% block beforeContent %}{% endblock %}
-
       {% block main %}
         <div class="nhsuk-width-container {{ containerClasses }}">
-          {% block outerContent %}{% endblock %}
+          {% block beforeContent %}{% endblock %}
           <main class="nhsuk-main-wrapper {{ mainClasses }}" id="maincontent" role="main">
             {% block content %}{% endblock %}
           </main>