From ff77296e4c63bf9093c150b5cf41023478f2e2ae Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Wed, 15 Jul 2020 21:05:58 +0100
Subject: [PATCH] Style the recommendations block

References #146
---
 .../assets/css/components/recommendation.pcss |  5 ++++
 .../assets/css/custom-components.pcss         |  1 +
 .../opdavies/assets/css/custom-utilities.pcss |  6 +++++
 ...ck--inline-block--recommendation.html.twig | 26 +++++++++++++++++++
 4 files changed, 38 insertions(+)
 create mode 100644 web/themes/custom/opdavies/assets/css/components/recommendation.pcss
 create mode 100644 web/themes/custom/opdavies/templates/block/block--inline-block--recommendation.html.twig

diff --git a/web/themes/custom/opdavies/assets/css/components/recommendation.pcss b/web/themes/custom/opdavies/assets/css/components/recommendation.pcss
new file mode 100644
index 000000000..759089cce
--- /dev/null
+++ b/web/themes/custom/opdavies/assets/css/components/recommendation.pcss
@@ -0,0 +1,5 @@
+.recommendation {
+  .photo img {
+    @apply rounded-full
+  }
+}
diff --git a/web/themes/custom/opdavies/assets/css/custom-components.pcss b/web/themes/custom/opdavies/assets/css/custom-components.pcss
index f37bc5e4d..69e088139 100644
--- a/web/themes/custom/opdavies/assets/css/custom-components.pcss
+++ b/web/themes/custom/opdavies/assets/css/custom-components.pcss
@@ -3,6 +3,7 @@
 @import './components/lead.pcss';
 @import './components/markup.pcss';
 @import './components/note.pcss';
+@import './components/recommendation.pcss';
 @import './components/table.pcss';
 @import './components/video.pcss';
 @import './components/widget.pcss';
diff --git a/web/themes/custom/opdavies/assets/css/custom-utilities.pcss b/web/themes/custom/opdavies/assets/css/custom-utilities.pcss
index e39fd2784..35d011d74 100644
--- a/web/themes/custom/opdavies/assets/css/custom-utilities.pcss
+++ b/web/themes/custom/opdavies/assets/css/custom-utilities.pcss
@@ -1,3 +1,9 @@
 .no-js .js-hidden {
   display: none
 }
+
+@responsive {
+  .first-of-type\:mt-0:first-of-type {
+    @apply mt-0 !important
+  }
+}
diff --git a/web/themes/custom/opdavies/templates/block/block--inline-block--recommendation.html.twig b/web/themes/custom/opdavies/templates/block/block--inline-block--recommendation.html.twig
new file mode 100644
index 000000000..102978109
--- /dev/null
+++ b/web/themes/custom/opdavies/templates/block/block--inline-block--recommendation.html.twig
@@ -0,0 +1,26 @@
+<article class="recommendation mt-8 first-of-type:mt-0">
+  <h2>{{ label }}</h2>
+
+  <div
+    class="
+      mt-1 flex flex-col-reverse
+      sm:mt-0 sm:flex-row sm:space-y-0 sm:space-x-8
+    "
+  >
+    <div class="mt-4 sm:mt-0">
+      <div>
+        {{ content.field_role }}
+      </div>
+
+      <div class="mt-2 sm:mt-4">
+        {{ content|without('field_company', 'field_role', 'field_photo') }}
+      </div>
+    </div>
+
+    {% if content.field_photo %}
+      <div class="photo flex-shrink-0 flex justify-center">
+        {{ content.field_photo }}
+      </div>
+    {% endif %}
+  </div>
+</article>