Merge branch 'feature/button-updates' into develop

resources/js/modules/pdf.js

@@ -1,7 +1,19 @@
 (function() {
     "use strict";
 
-    document.querySelectorAll('a[href$=".pdf"]').forEach(function(item) {
-        item.innerHTML += ' (pdf)';
+    document.querySelectorAll('a[href$=".pdf"]').forEach(function(link) {
+        const pdfSpan = document.createElement("span");
+        const pdfLabel = document.createTextNode(" (pdf)");
+        if(link.classList.contains('button') && link.children.length > 0) {
+            const lastChild = link.children.length - 1;
+            pdfSpan.appendChild(pdfLabel);
+            link.children[lastChild].appendChild(pdfSpan);
+        } else if(!link.classList.contains('button') && link.getElementsByTagName('img').length > 0) {
+            pdfSpan.appendChild(pdfLabel);
+            link.appendChild(pdfSpan);
+
+        } else {
+            link.innerHTML += ' (pdf)';
+        }
     });
 })();

resources/scss/components/_global-buttons.scss

@@ -1,32 +1,40 @@
 .button {
     @apply bg-gray-200 text-green-800 align-middle mb-2 px-4 py-2 rounded text-center text-sm font-bold inline-block transition-all leading-tight;
 
+    div {
+        @apply inline;
+    }
+
     &:hover {
         @apply bg-gray-100;
     }
 }
 
-.button--two-line {
-    @apply justify-start text-left inline-grid;
+.button--icon-one-line {
+    @apply text-left px-2.5 flex items-center;
 
-    & > *:not(img):nth-of-type(1) {
-        @apply block text-lg leading-none xl:text-xl xl:leading-none not-italic;
+    & .button__title {
+        @apply block text-lg leading-none xl:text-xl xl:leading-none not-italic -mt-0.5;
+    }
 
-        grid-area: 1 / 2 / 2 / 3;
+    & .button__image {
+        @apply w-10 mr-2 float-left;
     }
+}
 
-    & > *:not(img):nth-of-type(2) {
-        @apply text-sm py-1 leading-tight font-normal not-italic;
+.button--two-line {
+    @apply text-left px-2.5 inline-grid auto-rows-auto justify-start;
 
-        grid-area: 2 / 2 / 3 / 3;
+    & .button__title {
+        @apply block text-lg leading-none xl:text-xl xl:leading-none not-italic col-start-2 col-end-auto;
     }
 
-    & > img {
-        @apply row-span-2 mr-3;
+    & .button__excerpt {
+        @apply text-sm leading-tight font-normal not-italic col-start-2 col-end-auto w-full;
+    }
 
-        width: 2.5rem;
-        padding: 0 !important;
-        grid-area: 1 / 1 / 3 / 2;
+    & .button__image {
+        @apply w-10 col-start-1 row-span-2 mr-2;
     }
 }
 

resources/scss/components/_pdf.scss

@@ -0,0 +1,4 @@
+// pdf.js appends a span for styling
+a[href$=".pdf"] img + span {
+    @apply bg-green-600 text-white rounded-sm absolute right-0 bottom-0 pt-0.5 pb-1 px-2 mr-1 mb-1 leading-none font-bold text-sm tracking-wide;
+}

resources/scss/main.scss

@@ -32,6 +32,7 @@
 @import "components/print";
 @import "components/cms-layouts";
 @import "components/play-video-button";
+@import "components/pdf";
 
 // Tailwind
 @tailwind components;

resources/views/components/button-column.blade.php

@@ -5,8 +5,10 @@
 <ul class="grid grid-cols-1 gap-4 gap-y-2 xl:mx-0 items-start">
     @foreach($data as $button)
         <li class="block">
-            @if(!empty($button['option']) && view()->exists('components.buttons.'.\Illuminate\Support\Str::slug($button['option'])))
-                @include('components.buttons.'.\Illuminate\Support\Str::slug($button['option']), ['button' => $button, 'class' => 'w-full'])
+            @if(!empty($button['option']) && $button['option'] === 'Image')
+                @include('components.buttons.image', ['button' => $button, 'class' => 'w-full'])
+            @elseif(!empty($button['option']) && $button['option'] != 'Default')
+                @include('components.buttons.default', ['button' => $button, 'class' => 'w-full '.\Illuminate\Support\Str::slug($button['option']).'-button'])
             @else
                 @include('components.buttons.default', ['button' => $button, 'class' => 'w-full'])
             @endif

resources/views/components/button-row.blade.php

@@ -2,8 +2,16 @@
     $button => array // ['title', 'link']
 --}}
 
-<div class="grid md:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && $component['columns'] >= 4 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }} xl:mx-0 items-start gap-x-4 gap-y-2">
+<ul class="grid md:grid-cols-2 lg:grid-cols-{{ !empty($component['columns']) && $component['columns'] >= 4 ? '2' : '3' }} xl:grid-cols-{{ !empty($component['columns']) ? $component['columns'] : '3' }} xl:mx-0 items-start gap-x-4 gap-y-2">
     @foreach($data as $button)
-        <a href="{{ $button['link'] }}" class="green-button text-lg w-full mb-0">{{ $button['title'] }}</a>
+        <li class="block">
+            @if(!empty($button['option']) && $button['option'] === 'Image')
+                @include('components.buttons.image', ['button' => $button, 'class' => 'w-full text-lg'])
+            @elseif(!empty($button['option']) && $button['option'] != 'Default')
+                @include('components.buttons.default', ['button' => $button, 'class' => 'w-full text-lg '.\Illuminate\Support\Str::slug($button['option']).'-button'])
+            @else
+                @include('components.buttons.default', ['button' => $button, 'class' => 'w-full text-lg'])
+            @endif
+        </li>
     @endforeach
-</div>
+</ul>

resources/views/components/buttons/default.blade.php

@@ -1,13 +1,12 @@
 {{--
-    $button => array // ['title', 'link', 'excerpt']
+    $button => array // ['title', 'link', 'excerpt', 'relative_url']
 --}}
 
 @if(!empty($button['link']))
-    <a href="{{ $button['link'] }}" class="button @if(!empty($button['excerpt']) || !empty($button['relative_url']) || !empty($button['secondary_relative_url']))button--two-line @endif {{ $class ?? '' }}">
-        @if(!empty($button['relative_url']) || !empty($button['secondary_relative_url']))<img src="{{ $button['relative_url'] ?? $button['secondary_relative_url'] }}" alt="{{ $button['filename_alt_text'] ?? $button['secondary_alt_text'] }}">@endif
+    <a href="{{ $button['link'] }}" class="button {{ $class }}  @if(!empty($button['excerpt'])) button--two-line @elseif(!empty($button['relative_url'])) button--icon-one-line @endif ">
+        @if(!empty($button['relative_url'])) @image($button['relative_url'], $button['filename_alt_text'], 'button__image lazy') @endif
 
-        <div>{{ $button['title'] }}</div>
-
-        @if(!empty($button['excerpt']))<div>{{ $button['excerpt'] }}</div>@endif
+        <div class="button__title">{{ $button['title'] }}</div>
+        @if(!empty($button['excerpt']))<div class="button__excerpt">{{ $button['excerpt'] }}</div>@endif
     </a>
 @endif

resources/views/components/buttons/image.blade.php

@@ -1,5 +1,5 @@
 {{--
-    $button => array // ['title', 'link', 'relative_url']
+    $button => array // ['title', 'link', 'relative_url', 'secondary_relative_url']
 --}}
 
 @if(!empty($button['link']) && !empty($button['relative_url']))

resources/views/components/content-column.blade.php

@@ -7,5 +7,5 @@
     @else
         <h2 class="mt-0">{{ $content_block['title'] }}</h2>
     @endif
-    {!! $content_block['description'] !!}
+    <div class="content">{!! $content_block['description'] !!}</div>
 @endforeach

resources/views/components/content-row.blade.php

@@ -7,5 +7,5 @@
     @else
         <h2 class="mt-0">{{ $content_block['title'] }}</h2>
     @endif
-    {!! $content_block['description'] !!}
+    <div class="content">{!! $content_block['description'] !!}</div>
 @endforeach