Add analytics status for components

layouts/partials/component-status.njk

@@ -1,4 +1,4 @@
-{% macro status(productionReady, progressiveEnhancementJS, progressiveEnhancementCSS, accessibile, documented) %}
+{% macro status(productionReady, progressiveEnhancementJS, progressiveEnhancementCSS, accessibile, analytics, documented) %}
 <h2 id="status" class="tna-heading-l tna-heading--no-link-arrow">
   Status
   <a href="#status" aria-hidden="true" title="Jump to Status" tabindex="-1">
@@ -10,56 +10,66 @@
     <dt>Status</dt>
     <dd>
       <strong>
-        {%- if productionReady -%}
+        {%- if productionReady %}
         <i class="fa-solid fa-fw fa-check"></i> Ready for production
-        {%- else -%}
+        {%- else %}
         <i class="fa-solid fa-fw fa-screwdriver-wrench"></i> In development
-        {%- endif -%}
+        {%- endif %}
       </strong>
     </dd>
-    {%- if progressiveEnhancementJS !== 0 -%}
+    {%- if progressiveEnhancementJS !== 0 %}
     <dt>Tested without JavaScript</dt>
     <dd>
-      {%- if progressiveEnhancementJS == 1 -%}
+      {%- if progressiveEnhancementJS == 1 %}
       <i class="fa-solid fa-fw fa-check"></i> Yes
-      {%- elseif progressiveEnhancementJS == 2 -%}
+      {%- elseif progressiveEnhancementJS == 2 %}
       <i class="fa-solid fa-fw fa-screwdriver-wrench"></i> In progress
-      {%- elseif progressiveEnhancementJS == 3 -%}
+      {%- elseif progressiveEnhancementJS == 3 %}
       <i class="fa-solid fa-fw fa-xmark"></i> No
-      {%- else -%}
+      {%- else %}
       <i class="fa-solid fa-fw fa-question"></i> Unknown
-      {%- endif -%}
+      {%- endif %}
     </dd>
-    {%- endif -%}
+    {%- endif %}
     <dt>Tested without CSS</dt>
     <dd>
-      {%- if progressiveEnhancementCSS == 1 -%}
+      {%- if progressiveEnhancementCSS == 1 %}
       <i class="fa-solid fa-fw fa-check"></i> Yes
-      {%- elseif progressiveEnhancementCSS == 2 -%}
+      {%- elseif progressiveEnhancementCSS == 2 %}
       <i class="fa-solid fa-fw fa-screwdriver-wrench"></i> In progress
-      {%- elseif progressiveEnhancementCSS == 3 -%}
+      {%- elseif progressiveEnhancementCSS == 3 %}
       <i class="fa-solid fa-fw fa-xmark"></i> No
-      {%- else -%}
+      {%- else %}
       <i class="fa-solid fa-fw fa-question"></i> Unknown
-      {%- endif -%}
+      {%- endif %}
     </dd>
     <dt>WCAG 2.2 AA compliant</dt>
     <dd>
-      {%- if accessibile == 1 -%}
+      {%- if accessibile == 1 %}
       <i class="fa-solid fa-fw fa-check"></i> Yes
-      {%- elseif accessibile == 2 -%}
+      {%- elseif accessibile == 2 %}
       <i class="fa-solid fa-fw fa-screwdriver-wrench"></i> In progress
-      {%- else -%}
+      {%- else %}
       <i class="fa-solid fa-fw fa-question"></i> Unknown
-      {%- endif -%}
+      {%- endif %}
     </dd>
+    {%- if analytics !== 0 %}
+    <dt>Analytics integrated</dt>
+    <dd>
+      {%- if analytics == 1 %}
+      <i class="fa-solid fa-fw fa-check"></i> Yes
+      {%- elseif analytics == 2 %}
+      <i class="fa-solid fa-fw fa-screwdriver-wrench"></i> In progress
+      {%- endif %}
+    </dd>
+    {%- endif %}
     <dt>Documentataion complete</dt>
     <dd>
-      {%- if documented -%}
+      {%- if documented %}
       <i class="fa-solid fa-fw fa-check"></i> Yes
-      {%- else -%}
+      {%- else %}
       <i class="fa-solid fa-fw fa-xmark"></i> No
-      {%- endif -%}
+      {%- endif %}
     </dd>
   </dl>
 </div>

src/components/breadcrumbs/index.md

@@ -12,7 +12,7 @@ The breadcrumbs component helps users to understand where they are within a webs
 
 {{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, size: "xxs" }) }}
 
-{{ status(true, 1, 1, 1, true) }}
+{{ status(true, 1, 1, 1, 2, true) }}
 
 ## When to use this component
 

src/components/button/index.md

@@ -11,7 +11,7 @@ The button component can be used as a call to action link or as a `<button>` ele
 
 {{ example({ group: "components", item: "button", example: "default", html: true, nunjucks: true, size: "xxs" }) }}
 
-{{ status(true, 0, 1, 1, true) }}
+{{ status(true, 0, 1, 1, 2, true) }}
 
 ## Icons
 

src/components/card/index.md

@@ -11,7 +11,7 @@ Use the card component for providing previews to articles and pages.
 
 {{ example({ group: "components", item: "card", example: "default", html: true, nunjucks: true, size: "xl" }) }}
 
-{{ status(false, 0, 2, 2, false) }}
+{{ status(false, 0, 2, 2, 2, false) }}
 
 ## Horizontal
 

src/components/checkboxes/index.md

@@ -11,7 +11,7 @@ Checkboxes allow users to post multiple options for the same field.
 
 {{ example({ group: "components", item: "checkboxes", example: "default", html: true, nunjucks: true, size: "s" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 ## Small
 

src/components/compound-filters/index.md

@@ -13,4 +13,4 @@ Each selected value requires a link to be able to remove the value.
 
 {{ example({ group: "components", item: "compound-filters", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 
-{{ status(false, 0, 1, 1, false) }}
+{{ status(false, 0, 1, 1, 2, false) }}

src/components/cookie-banner/index.md

@@ -14,4 +14,4 @@ The cookie banner is available as part of [TNA Frontend](https://www.npmjs.com/p
 
 {{ example({ group: "components", item: "cookie-banner", example: "default", html: true, nunjucks: true, noPadding: true }) }}
 
-{{ status(false, 2, 2, 2, false) }}
+{{ status(false, 2, 2, 2, 2, false) }}

src/components/date-input/index.md

@@ -13,7 +13,7 @@ For searching by date, use the [date search](/design-system/components/date-sear
 
 {{ example({ group: "components", item: "date-input", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 ## Preselected
 

src/components/date-search/index.md

@@ -13,7 +13,7 @@ When you need the user to enter a date for data purposes or don't want to requir
 
 {{ example({ group: "components", item: "date-search", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 ## Preselected
 

src/components/error-summary/index.md

@@ -11,5 +11,5 @@ Use the error summary component to summarise form errors on the page and provide
 
 {{ example({ group: "components", item: "error-summary", example: "default", html: true, nunjucks: true, size: "s" }) }}
 
-{{ status(false, 2, 2, 2, false) }}
+{{ status(false, 2, 2, 2, 2, false) }}
 

src/components/featured-records/index.md

@@ -11,4 +11,4 @@ The featured records component can be used to show a list of related or interest
 
 {{ example({ group: "components", item: "featured-records", example: "default", html: true, nunjucks: true, size: "l" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}

src/components/footer/index.md

@@ -11,5 +11,5 @@ The footer component provides an area to use for copyright information and addit
 
 {{ example({ group: "components", item: "footer", example: "default", html: true, nunjucks: true, size: "xl" }) }}
 
-{{ status(true, 0, 1, 1, false) }}
+{{ status(true, 0, 1, 1, 2, false) }}
 

src/components/global-header/index.md

@@ -11,4 +11,4 @@ The global header component shows users they are on a main National Archives ser
 
 {{ example({ group: "components", item: "global-header", example: "default", html: true, nunjucks: true, size: "m" }) }}
 
-{{ status(true, 1, 1, 1, false) }}
+{{ status(true, 1, 1, 1, 2, false) }}

src/components/header/index.md

@@ -11,4 +11,4 @@ The header component shows users they are on a National Archives service and pro
 
 {{ example({ group: "components", item: "header", example: "default", html: true, nunjucks: true }) }}
 
-{{ status(true, 1, 1, 1, false) }}
+{{ status(true, 1, 1, 1, 2, false) }}

src/components/hero/index.md

@@ -11,5 +11,5 @@ Use the hero component to start an article.
 
 {{ example({ group: "components", item: "hero", example: "default", html: true, nunjucks: true, size: "l" }) }}
 
-{{ status(true, 0, 1, 1, false) }}
+{{ status(true, 0, 1, 1, 2, false) }}
 

src/components/index-grid/index.md

@@ -13,4 +13,4 @@ The index grid includes a `tna-container` element so doesn't need to be used wit
 
 {{ example({ group: "components", item: "index-grid", example: "default", html: true, nunjucks: true, size: "xxxl" }) }}
 
-{{ status(false, 0, 2, 2, false) }}
+{{ status(false, 0, 2, 2, 2, false) }}

src/components/message/index.md

@@ -11,4 +11,4 @@ The message component provides the user with important information about the pag
 
 {{ example({ group: "components", item: "message", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}

src/components/pagination/index.md

@@ -11,7 +11,7 @@ Use a list-type layout if users need to navigate through pages of similar items.
 
 {{ example({ group: "components", item: "pagination", example: "default", html: true, nunjucks: true, size: "xxs" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 Show the page number in the page `<title>` so that screen reader users know they’ve navigated to a different page. For example, ‘Search results (page 1 of 4)’.
 

src/components/phase-banner/index.md

@@ -13,4 +13,4 @@ It can also display a link to allow the user to provide feedback.
 
 {{ example({ group: "components", item: "phase-banner", example: "default", html: true, nunjucks: true, size: "xxs" }) }}
 
-{{ status(false, 0, 2, 2, false) }}
+{{ status(false, 0, 2, 2, 2, false) }}

src/components/picture/index.md

@@ -11,4 +11,4 @@ The picture component can display an image with additional information.
 
 {{ example({ group: "components", item: "picture", example: "default", html: true, nunjucks: true, size: "xxxl" }) }}
 
-{{ status(false, 2, 2, 2, false) }}
+{{ status(false, 2, 2, 2, 2, false) }}

src/components/quick-filters/index.md

@@ -11,4 +11,4 @@ The quick filters component provides users with a list of links which act as a q
 
 {{ example({ group: "components", item: "quick-filters", example: "default", html: true, nunjucks: true, size: "s" }) }}
 
-{{ status(false, 0, 1, 1, false) }}
+{{ status(false, 0, 1, 1, 2, false) }}

src/components/radios/index.md

@@ -11,7 +11,7 @@ Radios allow users to select a single options for a form field.
 
 {{ example({ group: "components", item: "radios", example: "default", html: true, nunjucks: true, size: "s" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 ## Small
 

src/components/search-field/index.md

@@ -11,7 +11,7 @@ Use the search field component as an entry point into searches.
 
 {{ example({ group: "components", item: "search-field", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 ## Preselected
 

src/components/search-filters/index.md

@@ -11,5 +11,5 @@ Use the search filters component to add optional filters to a search page.
 
 {{ example({ group: "components", item: "search-filters", example: "default", html: true, nunjucks: true, size: "l" }) }}
 
-{{ status(false, 2, 2, 2, false) }}
+{{ status(false, 2, 2, 2, 2, false) }}
 

src/components/select/index.md

@@ -13,7 +13,7 @@ Where possible, avoid overusing the select component. Alice Bartlett gave a talk
 
 {{ example({ group: "components", item: "select", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 ## Preselected
 

src/components/skip-link/index.md

@@ -11,4 +11,4 @@ The skip link component can be used at the start of a page to allow the user to
 
 {{ example({ group: "components", item: "skip-link", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}

src/components/text-input/index.md

@@ -11,7 +11,7 @@ Use the text input component to allow the users to enter a short string text inf
 
 {{ example({ group: "components", item: "text-input", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 ## Preselected
 

src/components/textarea/index.md

@@ -11,7 +11,7 @@ Use the textarea component to allow the users to enter a longer string of text i
 
 {{ example({ group: "components", item: "textarea", example: "default", html: true, nunjucks: true, size: "m" }) }}
 
-{{ status(false, 0, 1, 2, false) }}
+{{ status(false, 0, 1, 2, 2, false) }}
 
 ## Preselected