Add styles and Jinja for component

Most of these are cut-and-paste'd from the GOVUK
metadata component:

https://components.publishing.service.gov.uk/component-guide/metadata

...but stripped back to only include what we need
and a optional suffix paragraph added.

Links to styles and ERB template
https://github.com/alphagov/govuk_publishing_components/blob/master/app/assets/stylesheets/govuk_publishing_components/components/_metadata.scss
https://github.com/alphagov/govuk_publishing_components/blob/master/app/views/govuk_publishing_components/components/_metadata.html.erb

Also adds it to the accessibility statement as an
example and updates the test that checks any
updates bump the date.

app/assets/stylesheets/components/content-metadata.scss

@@ -0,0 +1,43 @@
+.content-metadata {
+  @include govuk-font(16);
+  @include govuk-clearfix;
+  @include govuk-responsive-margin(5, "bottom");
+  color: $govuk-text-colour;
+  margin-top: 15px;
+
+  .content-metadata__term,
+  .content-metadata__definition {
+    line-height: 1.4;
+  }
+
+  .content-metadata__term {
+    margin-top: .5em;
+
+    @include govuk-media-query($from: tablet) {
+      box-sizing: border-box;
+      float: left;
+      clear: left;
+      padding-right: govuk-spacing(1);
+      margin-top: 0;
+    }
+  }
+
+  .content-metadata__definition {
+    margin: 0;
+
+    @include govuk-media-query($from: tablet) {
+      &:not(:last-of-type) {
+        margin-bottom: govuk-spacing(1);
+      }
+    }
+  }
+
+  .content-metadata__suffix {
+    margin-top: 0.628em;
+    margin-bottom: 0;
+
+    @include govuk-media-query($from: tablet) {
+      margin-top: 6px;
+    }
+  }
+}

app/assets/stylesheets/main.scss

@@ -72,6 +72,7 @@ $path: '/static/images/';
 @import 'components/loading-indicator';
 @import 'components/area-list';
 @import 'components/broadcast-message';
+@import 'components/content-metadata';
 
 @import 'views/dashboard';
 @import 'views/users';

app/templates/components/content-metadata.html

@@ -0,0 +1,13 @@
+{% macro content_metadata(data, suffix=False) %}
+<div class="content-metadata">
+  <dl>
+  {% for key, value in data.items() %}
+    <dt class="content-metadata__term">{{ key }}</dt>
+    <dd class="content-metadata__definition">{{ value }}</dd>
+  {% endfor %}
+  </dl>
+  {% if suffix %}
+  <p class="content-metadata__suffix">{{ suffix }}</p>
+  {% endif %}
+</div>
+{% endmacro %}

app/templates/views/accessibility_statement.html

@@ -1,5 +1,6 @@
 {% extends "content_template.html" %}
 {% from "components/service-link.html" import service_link %}
+{% from "components/content-metadata.html" import content_metadata %}
 
 {% block per_page_title %}
   Accessibility statement
@@ -9,9 +10,13 @@
 
   <h1 class="heading-large">Accessibility statement</h1>
 
-<p class="govuk-body">
-    Published 23 September 2020<br>Last updated 27 October 2021<br>We review this page every 3 months.
-  </p>
+  {{ content_metadata(
+    data={
+      "Published": "23 September 2020",
+      "Last updated": "27 October 2021"
+    },
+    suffix="We review this page every 3 months"
+  ) }}
 
   <p class="govuk-body">
     This accessibility statement applies to the www.notifications.service.gov.uk domain. It does not apply to the <a class="govuk-link govuk-link--no-visited-state" href="https://docs.notifications.service.gov.uk">GOV.UK Notify API documentation subdomain</a>.

tests/app/test_accessibility_statement.py

@@ -15,10 +15,9 @@ def test_last_review_date():
         raw_diff = statement_diff.stdout.decode('utf-8')
         today = datetime.now().strftime('%d %B %Y')
         with open(statement_file_path, 'r') as statement_file:
-            current_review_date = re.search((r'This statement was prepared on 23 September 2020\. '
-                                             r'It was last reviewed on (\d{1,2} [A-Z]{1}[a-z]+ \d{4})'),
+            current_review_date = re.search((r'"Last updated": "(\d{1,2} [A-Z]{1}[a-z]+ \d{4})"'),
                                             statement_file.read()).group(1)
 
         # guard against changes that don't need to update the review date
         if current_review_date != today:
-            assert 'This statement was prepared on 23 September 2020. It was last reviewed on' in raw_diff
+            assert '"Last updated": "' in raw_diff