From aacd25f519b94e276c13cba56fe3b0da4224e866 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 25 Oct 2018 08:53:59 +0100
Subject: [PATCH] Refactor certifications block

---
 source/_partials/badges.html.twig        | 61 ++++++++++++++++--------
 source/_partials/certification.html.twig | 17 +++++++
 2 files changed, 59 insertions(+), 19 deletions(-)
 create mode 100644 source/_partials/certification.html.twig

diff --git a/source/_partials/badges.html.twig b/source/_partials/badges.html.twig
index 4deba4b7..fd5e7357 100644
--- a/source/_partials/badges.html.twig
+++ b/source/_partials/badges.html.twig
@@ -1,31 +1,54 @@
-<div class="flex items-center md:block text-center">
-    <div class="widget w-1/2 md:w-full">
+<div>
+    <div class="widget">
         <a href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member." class="block mb-4 px-4 md:px-0 lg:w-3/4 lg:mx-auto">
             <img src="/images/badges/da-individual-member.png" alt="Drupal Association Individual Member"/>
         </a>
     </div>
 
-    <div class="widget w-1/2 md:w-full">
-        <div class="mb-4 flex flex-wrap">
-            <div class="w-full lg:w-1/2 leading-none px-4 md:px-0">
-                <img src="/images/badges/acquia-d8-grand-master.png" alt="Acquia Certified Grand Master - Drupal 8 Exam Badge" />
-            </div>
+    <div class="widget bg-grey-light p-4 rounded">
+        <div class="-mb-2">
+            <h2 class="visuallyhidden">Certifications</h2>
 
-            <div class="w-full lg:w-1/2 leading-none px-4 md:px-0 hidden lg:block">
-                <img src="/images/badges/acquia-d8-developer.png" alt="Acquia Certified Developer - Drupal 8 Exam Badge" />
-            </div>
+            {% include 'certification' with {
+                title: 'Acquia certified Grand Master - Drupal 8',
+                url: 'http://certification.acquia.com/user/1647756',
+                image: {
+                    filename: 'acquia-d8-grand-master.png',
+                    alt: 'Acquia Certified Grand Master - Drupal 8 Exam Badge',
+                },
+            } %}
 
-            <div class="w-full lg:w-1/2 leading-none px-4 md:px-0 hidden lg:block">
-                <img src="/images/badges/acquia-d8-back-end.png" alt="Acquia Certified Back End Specialist - Drupal 8 Exam Badge" />
-            </div>
+            {% include 'certification' with {
+                title: 'Acquia certified Developer - Drupal 8',
+                image: {
+                    filename: 'acquia-d8-developer.png',
+                    alt: 'Acquia Certified Developer - Drupal 8 Exam Badge',
+                },
+            } %}
 
-            <div class="w-full lg:w-1/2 leading-none px-4 md:px-0 hidden lg:block">
-                <img src="/images/badges/acquia-d8-front-end.png" alt="Acquia Certified Front End Specialist - Drupal 8 Exam Badge" />
-            </div>
+            {% include 'certification' with {
+                title: 'Acquia certified Back End Specialist - Drupal 8',
+                image: {
+                    filename: 'acquia-d8-back-end.png',
+                    alt: 'Acquia Certified Back End Specialist - Drupal 8 Exam Badge',
+                },
+            } %}
 
-            <div class="w-full lg:w-1/2 leading-none px-4 md:px-0 hidden lg:block">
-                <img src="/images/badges/acquia-cloud-pro.png" alt="Acquia Certified Cloud Pro Exam Badge" />
-            </div>
+            {% include 'certification' with {
+                title: 'Acquia certified Front End Specialist - Drupal 8',
+                image: {
+                    filename: 'acquia-d8-front-end.png',
+                    alt: 'Acquia Certified Front End Specialist - Drupal 8 Exam Badge',
+                },
+            } %}
+
+            {% include 'certification' with {
+                title: 'Acquia certified Cloud Pro',
+                image: {
+                    filename: 'acquia-cloud-pro.png',
+                    alt: 'Acquia Certified Cloud Pro Exam Badge',
+                },
+            } %}
         </div>
     </div>
 </div>
diff --git a/source/_partials/certification.html.twig b/source/_partials/certification.html.twig
new file mode 100644
index 00000000..7153c119
--- /dev/null
+++ b/source/_partials/certification.html.twig
@@ -0,0 +1,17 @@
+<div class="flex mb-2">
+    <div class="w-16 mr-2 flex-none">
+        <div class="flex flex-col items-center">
+            <img src="/images/badges/{{ image.filename }}" alt="{{ image.alt }}" />
+        </div>
+    </div>
+
+    <div class="flex items-center">
+        <p class="mb-0">
+            {% if url %}
+                <a class="link" href="{{ url }}">{{ title }}</a>
+            {% else %}
+                {{ title }}
+            {% endif %}
+        </p>
+    </div>
+</div>