docs: 1126 build status design

docs/_data/statusInfo.json

@@ -0,0 +1,22 @@
+{
+  "Official": {
+    "link": "How ‘official’ components work",
+    "linkContent": "Components with an ‘official’ status have had a full, multi-disciplinary team review.",
+    "statusMessage": "Updated "
+  },
+  "To be reviewed": {
+    "link": "How ‘to be reviewed’ components work",
+    "linkContent": "Components with a ‘to be reviewed’ status have been added for use by everyone, but have not been checked or improved recently.",
+    "statusMessage": "Created "
+  },
+  "Experimental": {
+    "link": "How ‘experimental’ components work",
+    "linkContent": "Anyone can add an ‘experimental’ status component to the MoJ Design System. They’re early in development and can be used as a starting point.",
+    "statusMessage": "Created "
+  },
+  "Archived": {
+    "link": "How ‘archived’ components work",
+    "linkContent": "This component is no longer being supported and should not be used.",
+    "statusMessage": "Archived "
+  }
+}

docs/_includes/layouts/archive.njk

@@ -1,11 +1,14 @@
 {% extends "./base.njk" %}
 
+{% import "./macros/status.njk" as macros %}
+
 {% block content %}
     <div class="app-layout__content">
-        <h1 class="govuk-heading-xl">
-          {% if not isIndex %}<span class="govuk-caption-xl">Archive</span>{% endif %}
+        {% if not isIndex %}<span class="govuk-caption-xl">Archive</span>{% endif %}
+        <h1 class="govuk-heading-xl{% if status %} govuk-!-display-inline-block govuk-!-margin-bottom-2{% endif %}">
           {{ title }}
         </h1>
+        {{ macros.statusLabel(type, status, statusMessage, statusInfo, creatorName, creatorTeam, statusDate) }}
         {{ content | safe }}
     </div>
 

docs/_includes/layouts/component.njk

@@ -1,12 +1,14 @@
 {% extends "./base.njk" %}
 
-{% block content %}
+{% import "./macros/status.njk" as macros %}
+
+{% block content %}   
     <div class="app-layout__content">
-        <h1 class="govuk-heading-xl">
-          {% if not isIndex %}<span class="govuk-caption-xl">Components</span>{% endif %}
+       {% if not isIndex %}<span class="govuk-caption-xl">Components</span>{% endif %}
+      <h1 class="govuk-heading-xl{% if status %} govuk-!-display-inline-block govuk-!-margin-bottom-2{% endif %}">
           {{ title }}
         </h1>
-
+        {{ macros.statusLabel(type, status, statusMessage, statusInfo, creatorName, creatorTeam, statusDate) }}
         {{ content | safe }}
 
         {% include "./partials/get-help-and-contribute.njk" %}

docs/_includes/layouts/macros/status.njk

@@ -0,0 +1,60 @@
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+
+
+{% macro statusLabel(type, status, statusMessage, statusInfo, creatorName, creatorTeam, statusDate) %}
+  {% if status %}
+
+
+
+    {% set statusData = (statusInfo[status] if statusInfo and status in statusInfo else {}) %}
+
+    {% set statusClass = {
+      "Official": "govuk-tag--green",
+      "To be reviewed": "govuk-tag--orange",
+      "Experimental": "govuk-tag",
+      "Archived": "govuk-tag--grey"
+    }[status] or "" %}
+
+
+  <span class="govuk-tag status-tag {{ statusClass }}">
+   <span class="govuk-visually-hidden">Status:</span> {{ status }}
+  </span>
+
+   {% if status == 'Experimental' or statusDate %}
+<p class="status-message govuk-!-margin-bottom-2">
+    {{ statusData.statusMessage }}{% if status == 'Experimental' %} by{%- if creatorName and creatorTeam %} 
+        {{ creatorName }} in {{ creatorTeam }}
+    {%- elif creatorName %} 
+        {{ creatorName }}
+    {%- elif creatorTeam %} 
+        someone in {{ creatorTeam }}
+    {%- else %} 
+        someone in the community
+    {%- endif %}{% if statusDate %} in {{ statusDate }}{% endif %}.{% else %} in {{ statusDate }}.{% endif %}
+</p>
+{% endif %}
+
+  <details class="govuk-details govuk-!-margin-bottom-8">
+    <summary class="govuk-details__summary">
+      <span class="govuk-details__summary-text">
+     {{ statusInfo[status].link 
+      | replace('Components', type | capitalize + 's') 
+      | replace('components', type | lower + 's') 
+      | replace('Component', type | capitalize) 
+      | replace('component', type | lower) 
+      }}
+      </span>
+    </summary>
+    <div class="govuk-details__text">
+      {{ statusInfo[status].linkContent
+      | replace('Components', type | capitalize + 's') 
+      | replace('components', type | lower + 's') 
+      | replace('Component', type | capitalize) 
+      | replace('component', type | lower) 
+      }}
+      <a href="/design-system-statuses">Read about all the Design System statuses</a>.
+    </div>
+  </details>
+
+  {% endif %}
+{% endmacro %}

docs/_includes/layouts/pages.njk

@@ -1,11 +1,14 @@
 {% extends "./base.njk" %}
 
+{% import "./macros/status.njk" as macros %}
+
 {% block content %}
     <div class="app-layout__content">
-        <h1 class="govuk-heading-xl">
-            {% if not isIndex %}<span class="govuk-caption-xl">Pages</span>{% endif %}
+       {% if not isIndex %}<span class="govuk-caption-xl">Pages</span>{% endif %}
+        <h1 class="govuk-heading-xl{% if status %} govuk-!-display-inline-block govuk-!-margin-bottom-2{% endif %}">
             {{ title }}
         </h1>
+        {{ macros.statusLabel(type, status, statusMessage, statusInfo, creatorName, creatorTeam, statusDate) }}
         {{ content | safe }}
 
       {% if isIndex or isArchive %}

docs/_includes/layouts/patterns.njk

@@ -1,11 +1,14 @@
 {% extends "./base.njk" %}
 
+{% import "./macros/status.njk" as macros %}
+
 {% block content %}
     <div class="app-layout__content">
-        <h1 class="govuk-heading-xl">
-            {% if not isIndex %}<span class="govuk-caption-xl">Patterns</span>{% endif %}
+        {% if not isIndex %}<span class="govuk-caption-xl">Patterns</span>{% endif %}
+        <h1 class="govuk-heading-xl{% if status %} govuk-!-display-inline-block govuk-!-margin-bottom-2{% endif %}">
             {{ title }}
         </h1>
+       {{ macros.statusLabel(type, status, statusMessage, statusInfo, creatorName, creatorTeam, statusDate) }}
         {{ content | safe }}
 
       {% if isIndex or isArchive %}

docs/archive/currency-input.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/archive.njk
 title: Currency input
+status: Archived
+statusDate: June 2021
 type: component
 redirect_from: /components/currency-input
 eleventyNavigation:

docs/archive/form-validator.md

@@ -1,6 +1,9 @@
 ---
 layout: layouts/archive.njk
 title: Form validator
+status: Archived
+type: component
+statusDate: April 2022
 redirect_from: /components/form-validator
 eleventyNavigation:
   key: Form validator

docs/archive/password-reveal.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/archive.njk
 title: Password reveal
+status: Archived
+statusDate: November 2024
 type: component
 redirect_from: /components/password-reveal
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/709

docs/archive/question-pages.md

@@ -1,6 +1,9 @@
 ---
 layout: layouts/archive.njk
 title: Question pages
+status: Archived
+type: page
+statusDate: December 2023
 redirect_from: [docs/patterns/question-pages.md, /pages/question-pages]
 eleventyNavigation:
   key: Question page

docs/archive/rich-text-editor.md

@@ -1,6 +1,9 @@
 ---
 layout: layouts/archive.njk
 title: Rich text editor
+status: Archived
+type: component
+statusDate: April 2022
 redirect_from: /components/rich-text-editor
 eleventyNavigation:
   key: Rich text editor

docs/archive/tag.md

@@ -1,6 +1,9 @@
 ---
 layout: layouts/archive.njk
 title: Tag
+status: Archived
+type: component
+statusDate: June 2021
 redirect_from: /components/tag
 eleventyNavigation:
   key: Tag

docs/archive/task-list.md

@@ -1,6 +1,9 @@
 ---
 layout: layouts/archive.njk
 title: Task list pages
+type: page
+status: Archived
+statusDate: December 2023
 redirect_from: [docs/patterns/task-list.md, /pages/task-list]
 eleventyNavigation:
   key: Task list page

docs/assets/stylesheets/application.scss

@@ -29,6 +29,7 @@ $govuk-assets-path: "../" !default;
 @import "./components/page";
 @import "./components/menu-toggle";
 @import "./components/app-card";
+@import "./components/status";
 @import "./components/documentation_tabs";
 
 @view-transition {

docs/assets/stylesheets/components/_status.scss

@@ -0,0 +1,9 @@
+.status-tag {
+  display: inline-block;
+  vertical-align: super;
+  margin-left: govuk-spacing(2);
+}
+
+p.status-message {
+  color: $govuk-secondary-text-colour;
+}

docs/components/add-another.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Add another
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/686
 eleventyNavigation:

docs/components/badge.md

@@ -2,6 +2,8 @@
 layout: layouts/component.njk
 title: Badge
 type: component
+status: To be reviewed
+statusDate: June 2021
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/687
 eleventyNavigation:
   parent: Components

docs/components/banner.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Banner
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/835
 eleventyNavigation:

docs/components/button-menu.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Button menu
+status: Official
+statusDate: October 2024
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/685
 eleventyNavigation:

docs/components/date-picker.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Date picker
+status: Official
+statusDate: July 2024
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/703
 eleventyNavigation:

docs/components/filter.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Filter
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/197
 eleventyNavigation:

docs/components/header.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Header
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/246
 eleventyNavigation:

docs/components/identity-bar.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Identity bar
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/704
 eleventyNavigation:

docs/components/interruption-card.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Interruption card
+status: Official
+statusDate: December 2024
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/421
 eleventyNavigation:

docs/components/messages.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Messages
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/705
 eleventyNavigation:

docs/components/multi-file-upload.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Multi file upload
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/264
 eleventyNavigation:

docs/components/multi-select.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Multi select
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/206
 eleventyNavigation:

docs/components/notification-badge.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Notification badge
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/706
 eleventyNavigation:

docs/components/organisation-switcher.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Organisation switcher
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/239
 eleventyNavigation:

docs/components/page-header-actions.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Page header actions
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/707
 eleventyNavigation:

docs/components/pagination.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Pagination
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/708
 eleventyNavigation:

docs/components/primary-navigation.md

@@ -1,6 +1,8 @@
 ---
 layout: layouts/component.njk
 title: Primary navigation
+status: To be reviewed
+statusDate: June 2021
 type: component
 githuburl: https://github.com/ministryofjustice/moj-frontend/discussions/710
 eleventyNavigation: