Add mission patch page (#202)

Adds a new mission patch page.

Author: edwardhorsford

app/_components/_all.scss

@@ -1,3 +1,4 @@
 @import "email/email";
+@import "gallery/gallery";
 @import "header/header";
 @import "screenshots/screenshots";

app/_components/gallery/_gallery.scss

@@ -0,0 +1,43 @@
+.app-gallery {
+  padding: 0;
+  list-style: none;
+}
+
+.app-gallery--layout-thumbnails {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-gap: govuk-spacing(6);
+
+  figure {
+    @include govuk-responsive-margin(2, "bottom");
+
+    > a {
+      display: block;
+    }
+
+    > img {
+      object-fit: cover;
+      object-position: top;
+    }
+  }
+}
+
+.app-prose-scope .app-gallery--mission-patches {
+
+  figure {
+    // Remove styling that figures get by default
+    background-color: inherit;
+    border-bottom: none;
+    @include govuk-font(19);
+    padding: 20px 0 0 0;
+    img {
+      outline: none;
+    }
+  }
+
+  figcaption {
+    @include govuk-font(19);
+    padding: 20px 0 0 0;
+    color: #4c6272;
+  }
+}

app/_components/gallery/macro.njk

@@ -0,0 +1,3 @@
+{% macro appGallery(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}

app/_components/gallery/template.njk

@@ -0,0 +1,15 @@
+<ul class="app-gallery{% if params.classes %} {{ params.classes }} {% endif %}{% if params.layout != false %} app-gallery--layout-{{ params.layout or "thumbnails" }}{% endif %}">
+{%- for item in params.items %}
+  {%- set id = item.id or (item.text | slugify) -%}
+  {%- set file = item.src or (id + ".png") -%}
+  {%- set alt = item.alt or ("Screenshot of " + item.text) -%}
+  <li class="app-gallery__item" id="{{ id }}">
+    <figure>
+      <a href="{{ file }}"><img src="{{ file }}" alt="{{ alt }}"></a>
+      {%- if item.caption or item.text %}
+        <figcaption>{{ item.caption or item.text | markdown | safe }}</figcaption>
+      {%- endif %}
+    </figure>
+  </li>
+{%- endfor %}
+</ul>

app/_layouts/product.njk

@@ -91,18 +91,32 @@
     {% endfor %}
 
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-full">
-        <hr class="govuk-section-break govuk-section-break--xl govuk-section-break--visible">
+      <div class="govuk-grid-column-two-thirds">
+        <h2 class="govuk-heading-l">
+          Reference
+        </h2>
+      </div>
+    </div>
+
+    <div class="govuk-grid-row">
 
-        {% for item in collections.all | eleventyNavigation(options.homeKey) %}
-          {% if ("Guide" == item.title)  %}
+      {% for item in collections.all | eleventyNavigation(options.homeKey) %}
+        {% if (item.title == "Guide")  %}
+          <section class="govuk-grid-column-one-half govuk-!-margin-bottom-6">
             <h3 class="govuk-heading-m govuk-!-margin-bottom-1">
               <a href="{{ item.url | pretty }}">{{ item.title }}</a>
             </h3>
             <p class="govuk-body">{{ item.excerpt }}</p>
-          {% endif %}
-        {% endfor %}
-      </div>
+          </section>
+        {% endif %}
+      {% endfor %}
+      <section class="govuk-grid-column-one-half govuk-!-margin-bottom-6">
+        <h3 class="govuk-heading-m govuk-!-margin-bottom-1">
+          <a href="./mission-patches">Mission patches</a>
+        </h3>
+        <p class="govuk-body">Archive of patches created to celebrate milestones in the development of our different services.</p>
+      </section>
+
     </div>
 
   {% endif %}