Merge pull request #35 from mikebarlow/svg-amends

SVG amends / "Componentifying" some of the views
mikebarlow · Apr 29, 2024 · 820a678 · 820a678
2 parents d612386 + 39383e8
commit 820a678
Show file tree

Hide file tree

Showing 21 changed files with 197 additions and 71 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,11 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unrelease] - TBC
+
+* Moved SVG icons into anonymous components for easier reuse / overwriting.[PR#35](https://github.com/mikebarlow/megaphone/pull/35)
+* Reworked notification type templates into components. [PR#35](https://github.com/mikebarlow/megaphone/pull/35)
+
 ## [2.0.0] - 2023-09-11
 
 * Updated PHP requirement to 8.1 and above (7.4 and 8.0 dropped) [PR#28](https://github.com/mikebarlow/megaphone/pull/28)

diff --git a/README.md b/README.md
@@ -93,7 +93,7 @@ If you are not using the default user model found at `App\Models\User`, you will
 To get started using megaphone, drop in the Megaphone Livewire component into your template.
 
 ```html
-<livewire:megaphone></livewire:megaphone>
+<livewire:megaphone />
 ```
 
 This will render a Bell Icon where the component has been placed. When clicked a static sidebar will appear on the right of the screen which will show all the existing and any new notifications to the user.

diff --git a/resources/views/components/icons/bell.blade.php b/resources/views/components/icons/bell.blade.php
@@ -0,0 +1,5 @@
+@props(['class' => 'h-full w-full fill-black dark:fill-white'])
+
+<svg class="{{ $class }}" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
+</svg>
diff --git a/resources/views/components/icons/bells.blade.php b/resources/views/components/icons/bells.blade.php
@@ -0,0 +1,5 @@
+@props(['class' => 'w-4/5 h-4/5 fill-blue-600'])
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="{{ $class }}">
+    <path d="M638.4 313.9c-2.1-5.9-6.4-11.2-12.9-14.5-21-10.8-58.3-24.9-87.4-105-.8-2.2-14.7-40.5-15.4-42.6C503 97.6 451.8 64 397.4 64c-15.1 0-30.5 2.6-45.6 8.1-3.6 1.3-6.6 3.3-10 4.8-14.2-16-32.1-29-53.5-36.8-15-5.5-30.5-8.1-45.6-8.1-54.5 0-105.6 33.6-125.3 87.8-.8 2.1-14.6 40.4-15.4 42.6-29.2 80.1-66.4 94.3-87.4 105-6.5 3.3-10.8 8.6-12.9 14.5-4.6 12.9 1 28.8 16 34.2l82 29.9c-2.1 7-3.6 14.3-3.6 22 0 44.2 35.8 80 80 80 32.6 0 60.5-19.6 72.9-47.7l42.1 15.3c-2.8 6.5-7.5 14.8-3.4 26 4.9 13.1 19.6 21.3 34.3 15.9l76-27.7c11.8 29.4 40.5 50.1 74.1 50.1 44.2 0 80-35.8 80-80 0-8.7-1.9-16.8-4.6-24.5l75-27.3c14.9-5.4 20.5-21.3 15.9-34.2zM176 416c-26.5 0-48-21.5-48-48 0-3.9.6-7.5 1.5-11.1l88.9 32.4C210.6 405 194.7 416 176 416zm124.7-30.9L40.1 290.3c24.5-12.8 63.2-38.2 91.8-117 8.3-22.9 5.1-14.1 15.4-42.6C161.9 90.8 200.2 64 242.6 64c44.7 0 70.8 29.1 71.6 29.9-43.3 34.8-62.2 94-42.2 149.1.8 2.1 14.8 40.4 15.6 42.6 16.9 46.4 17.4 77.3 13.1 99.5zM472 448c-19.7 0-36.1-12.2-43.4-29.3l89.3-32.5c1.3 4.4 2.1 9 2.1 13.8 0 26.5-21.5 48-48 48zm-149.5-24.8c10.6-25.6 23.8-69.8-4.8-148.7-9.6-26.3-5.5-15-15.6-42.6-19.1-52.5 8.1-110.8 60.6-129.9 53-19.3 110.9 8.5 129.9 60.6 9.7 26.7 5 13.8 15.4 42.6 28.7 78.8 67.3 104.2 91.8 117l-277.3 101z"/>
+</svg>
diff --git a/resources/views/components/icons/bullhorn.blade.php b/resources/views/components/icons/bullhorn.blade.php
@@ -0,0 +1,5 @@
+@props(['class' => 'w-4/5 h-4/5 fill-green-600'])
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="{{ $class }}">
+    <path d="M544 184.88V32c0-8.74-6.98-32-31.99-32H512c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64l-.48 32c0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h106.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.12c19.05-11.09 32-31.49 32-55.12.01-23.63-12.94-44.03-31.99-55.12zM223.76 480l-105.89-.03c-14.83-30.56-22.35-62.19-22.36-95.49l.48-32L96 352h99.33c-2.31 10.7-3.81 21.43-3.81 32 0 35.29 11.3 68.78 32.24 96zM64 320c-17.64 0-32-14.36-32-32v-96c0-17.64 14.36-32 32-32h192v160H64zm448.05 126.93c-.04.25-.13.58-.25.9l-84.83-67.87C386.99 348 338.54 328.14 288 322.13V157.87c50.54-6.01 98.99-25.87 138.98-57.84l84.87-67.9c.03.03.06.05.08.05.04 0 .06-.05.07-.17l.05 414.92z"/>
+</svg>
diff --git a/resources/views/components/icons/close.blade.php b/resources/views/components/icons/close.blade.php
@@ -0,0 +1,6 @@
+@props(['class' => ''])
+
+<svg class="{{ $class }}" stroke="currentColor" viewBox="0 0 24 24" fill="none" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18 6L6 18" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
+    <path d="M6 6L18 18" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
diff --git a/resources/views/components/icons/exclaimation.blade.php b/resources/views/components/icons/exclaimation.blade.php
@@ -0,0 +1,5 @@
+@props(['class' => 'w-4/5 h-4/5 fill-red-600'])
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" class="{{ $class }}">
+    <path d="M139.315 32c6.889 0 12.364 5.787 11.982 12.666l-14.667 264c-.353 6.359-5.613 11.334-11.982 11.334H67.352c-6.369 0-11.628-4.975-11.982-11.334l-14.667-264C40.321 37.787 45.796 32 52.685 32h86.63M96 352c35.29 0 64 28.71 64 64s-28.71 64-64 64-64-28.71-64-64 28.71-64 64-64M139.315 0h-86.63C27.457 0 7.353 21.246 8.753 46.441l14.667 264c.652 11.728 5.864 22.178 13.854 29.665C14.613 357.682 0 385.168 0 416c0 52.935 43.065 96 96 96s96-43.065 96-96c0-30.832-14.613-58.318-37.274-75.894 7.991-7.487 13.203-17.937 13.854-29.665l14.667-264C184.647 21.251 164.548 0 139.315 0z"/>
+</svg>
diff --git a/resources/views/components/notification/date.blade.php b/resources/views/components/notification/date.blade.php
@@ -0,0 +1,5 @@
+@props(['class' => 'focus:outline-none text-xs leading-3 pt-1 text-gray-500', 'createdAt',])
+
+<p class="{{ $class }}" title="{{ $createdAt->format('jS M Y H:i') }}">
+    {{ $createdAt->diffForHumans() }}
+</p>
diff --git a/resources/views/components/notification/link.blade.php b/resources/views/components/notification/link.blade.php
@@ -0,0 +1,12 @@
+@props([
+    'class' => 'cursor-pointer no-underline bg-gray-100 text-gray-800 rounded-md border border-gray-300 p-2 hover:bg-gray-300',
+    'link', 'newWindow', 'linkText',
+])
+
+@if(! empty($link))
+    <p class="text-right focus:outline-none text-xs leading-3 pt-1">
+        <a href="{{ $link }}" {{ ! empty($newWindow) ? ' target="_blank"' : '' }} class="{{ $class }}">
+            {{ ! empty($linkText) ? $linkText : 'View' }}
+        </a>
+    </p>
+@endif
diff --git a/resources/views/components/notification/notification.blade.php b/resources/views/components/notification/notification.blade.php
@@ -0,0 +1,18 @@
+<div tabindex="0" aria-label="group icon" role="img" class="focus:outline-none w-8 h-8 border rounded-full border-gray-200 flex flex-shrink-0 items-center justify-center">
+    {{ ! $icon->isEmpty() ? $icon : '' }}
+</div>
+<div class="pl-3 w-full">
+    <div class="items-center justify-between w-full pr-2">
+        <p class="block w-full focus:outline-none text-sm leading-none my-0">
+            {{ $title }}
+        </p>
+        <p class="block w-full focus:outline-none text-sm leading-none">
+            {{ $body }}
+        </p>
+    </div>
+    <div class="flex justify-between">
+        {{ $date }}
+
+        {{ $link }}
+    </div>
+</div>
diff --git a/resources/views/components/notification/title.blade.php b/resources/views/components/notification/title.blade.php
@@ -0,0 +1,13 @@
+@props(['class' => 'text-indigo-700 font-bold', 'link',])
+
+<span class="{{ $class }}">
+    @if(! empty($link))
+        <a href="{{ $link }}">
+    @endif
+
+    {{ $slot }}
+
+    @if(! empty($link))
+        </a>
+    @endif
+</span>
diff --git a/resources/views/icon.blade.php b/resources/views/icon.blade.php
@@ -4,9 +4,7 @@ class="font-sans text-gray-900"
         @click="open = true"
 >
     <span class="sr-only">Show Notifications</span>
-    <svg class="h-full w-full fill-black dark:fill-white" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
-    </svg>
+    <x-megaphone::icons.bell />
     @if ($unread->count() > 0)
         @if($showCount)
             <span aria-label="unread count" class="absolute top-0 left-0 aspect-square max-h-fit rounded-full border-2 bg-red-500 px-1.5 shadow leading-5 text-white font-semibold text-xs">

diff --git a/resources/views/popout.blade.php b/resources/views/popout.blade.php
@@ -5,10 +5,7 @@
         <div class="flex items-center justify-between">
             <p tabindex="0" class="focus:outline-none text-2xl font-semibold leading-6 text-gray-800">Notifications</p>
             <button role="button" aria-label="close modal" class="focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-md cursor-pointer" @click="open = false">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M18 6L6 18" stroke="#4B5563" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
-                    <path d="M6 6L18 18" stroke="#4B5563" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
+                <x-megaphone::icons.close />
             </button>
         </div>
 
@@ -25,10 +22,7 @@
                         <button role="button" aria-label="Mark as Read" class="w-6 h-6 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 rounded-md cursor-pointer"
                                 x-on:click="$wire.markAsRead('{{ $announcement->id }}')"
                         >
-                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                <path d="M18 6L6 18" stroke="#4B5563" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M6 6L18 18" stroke="#4B5563" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
-                            </svg>
+                            <x-megaphone::icons.close />
                         </button>
                     @endif
                 </div>

diff --git a/resources/views/types/base.blade.php b/resources/views/types/base.blade.php
diff --git a/resources/views/types/general.blade.php b/resources/views/types/general.blade.php
@@ -1,3 +1,23 @@
-@include('megaphone::types.base', ['icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="w-4/5 h-4/5 fill-blue-600">
-        <path d="M638.4 313.9c-2.1-5.9-6.4-11.2-12.9-14.5-21-10.8-58.3-24.9-87.4-105-.8-2.2-14.7-40.5-15.4-42.6C503 97.6 451.8 64 397.4 64c-15.1 0-30.5 2.6-45.6 8.1-3.6 1.3-6.6 3.3-10 4.8-14.2-16-32.1-29-53.5-36.8-15-5.5-30.5-8.1-45.6-8.1-54.5 0-105.6 33.6-125.3 87.8-.8 2.1-14.6 40.4-15.4 42.6-29.2 80.1-66.4 94.3-87.4 105-6.5 3.3-10.8 8.6-12.9 14.5-4.6 12.9 1 28.8 16 34.2l82 29.9c-2.1 7-3.6 14.3-3.6 22 0 44.2 35.8 80 80 80 32.6 0 60.5-19.6 72.9-47.7l42.1 15.3c-2.8 6.5-7.5 14.8-3.4 26 4.9 13.1 19.6 21.3 34.3 15.9l76-27.7c11.8 29.4 40.5 50.1 74.1 50.1 44.2 0 80-35.8 80-80 0-8.7-1.9-16.8-4.6-24.5l75-27.3c14.9-5.4 20.5-21.3 15.9-34.2zM176 416c-26.5 0-48-21.5-48-48 0-3.9.6-7.5 1.5-11.1l88.9 32.4C210.6 405 194.7 416 176 416zm124.7-30.9L40.1 290.3c24.5-12.8 63.2-38.2 91.8-117 8.3-22.9 5.1-14.1 15.4-42.6C161.9 90.8 200.2 64 242.6 64c44.7 0 70.8 29.1 71.6 29.9-43.3 34.8-62.2 94-42.2 149.1.8 2.1 14.8 40.4 15.6 42.6 16.9 46.4 17.4 77.3 13.1 99.5zM472 448c-19.7 0-36.1-12.2-43.4-29.3l89.3-32.5c1.3 4.4 2.1 9 2.1 13.8 0 26.5-21.5 48-48 48zm-149.5-24.8c10.6-25.6 23.8-69.8-4.8-148.7-9.6-26.3-5.5-15-15.6-42.6-19.1-52.5 8.1-110.8 60.6-129.9 53-19.3 110.9 8.5 129.9 60.6 9.7 26.7 5 13.8 15.4 42.6 28.7 78.8 67.3 104.2 91.8 117l-277.3 101z"/>
-    </svg>'])
+<x-megaphone::notification.notification :body="$announcement['body']">
+    <x-slot:icon>
+        <x-megaphone::icons.bells />
+    </x-slot:icon>
+
+    <x-slot:title>
+        <x-megaphone::notification.title :link="$announcement['link']">
+            {{ $announcement['title'] }}
+        </x-megaphone::notification.title>
+    </x-slot:title>
+
+    <x-slot:date>
+        <x-megaphone::notification.date :createdAt="$created_at" />
+    </x-slot:date>
+
+    <x-slot:link>
+        <x-megaphone::notification.link
+            :link="$announcement['link']"
+            :newWindow="$announcement['linkNewWindow']"
+            :linkText="$announcement['linkText']"
+        />
+    </x-slot:link>
+</x-megaphone::notification.notification>
diff --git a/resources/views/types/important.blade.php b/resources/views/types/important.blade.php
@@ -1,3 +1,23 @@
-@include('megaphone::types.base', ['icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512" class="w-4/5 h-4/5 fill-red-600">
-        <path d="M139.315 32c6.889 0 12.364 5.787 11.982 12.666l-14.667 264c-.353 6.359-5.613 11.334-11.982 11.334H67.352c-6.369 0-11.628-4.975-11.982-11.334l-14.667-264C40.321 37.787 45.796 32 52.685 32h86.63M96 352c35.29 0 64 28.71 64 64s-28.71 64-64 64-64-28.71-64-64 28.71-64 64-64M139.315 0h-86.63C27.457 0 7.353 21.246 8.753 46.441l14.667 264c.652 11.728 5.864 22.178 13.854 29.665C14.613 357.682 0 385.168 0 416c0 52.935 43.065 96 96 96s96-43.065 96-96c0-30.832-14.613-58.318-37.274-75.894 7.991-7.487 13.203-17.937 13.854-29.665l14.667-264C184.647 21.251 164.548 0 139.315 0z"/>
-    </svg>'])
+<x-megaphone::notification.notification :body="$announcement['body']">
+    <x-slot:icon>
+        <x-megaphone::icons.exclaimation />
+    </x-slot:icon>
+
+    <x-slot:title>
+        <x-megaphone::notification.title :link="$announcement['link']">
+            {{ $announcement['title'] }}
+        </x-megaphone::notification.title>
+    </x-slot:title>
+
+    <x-slot:date>
+        <x-megaphone::notification.date :createdAt="$created_at" />
+    </x-slot:date>
+
+    <x-slot:link>
+        <x-megaphone::notification.link
+            :link="$announcement['link']"
+            :newWindow="$announcement['linkNewWindow']"
+            :linkText="$announcement['linkText']"
+        />
+    </x-slot:link>
+</x-megaphone::notification.notification>
diff --git a/resources/views/types/new-feature.blade.php b/resources/views/types/new-feature.blade.php
@@ -1,3 +1,23 @@
-@include('megaphone::types.base', ['icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="w-4/5 h-4/5 fill-green-600">
-        <path d="M544 184.88V32c0-8.74-6.98-32-31.99-32H512c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64l-.48 32c0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h106.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.12c19.05-11.09 32-31.49 32-55.12.01-23.63-12.94-44.03-31.99-55.12zM223.76 480l-105.89-.03c-14.83-30.56-22.35-62.19-22.36-95.49l.48-32L96 352h99.33c-2.31 10.7-3.81 21.43-3.81 32 0 35.29 11.3 68.78 32.24 96zM64 320c-17.64 0-32-14.36-32-32v-96c0-17.64 14.36-32 32-32h192v160H64zm448.05 126.93c-.04.25-.13.58-.25.9l-84.83-67.87C386.99 348 338.54 328.14 288 322.13V157.87c50.54-6.01 98.99-25.87 138.98-57.84l84.87-67.9c.03.03.06.05.08.05.04 0 .06-.05.07-.17l.05 414.92z"/>
-    </svg>'])
+<x-megaphone::notification.notification :body="$announcement['body']">
+    <x-slot:icon>
+        <x-megaphone::icons.bullhorn />
+    </x-slot:icon>
+
+    <x-slot:title>
+        <x-megaphone::notification.title :link="$announcement['link']">
+            {{ $announcement['title'] }}
+        </x-megaphone::notification.title>
+    </x-slot:title>
+
+    <x-slot:date>
+        <x-megaphone::notification.date :createdAt="$created_at" />
+    </x-slot:date>
+
+    <x-slot:link>
+        <x-megaphone::notification.link
+            :link="$announcement['link']"
+            :newWindow="$announcement['linkNewWindow']"
+            :linkText="$announcement['linkText']"
+        />
+    </x-slot:link>
+</x-megaphone::notification.notification>
diff --git a/src/Components/Display.php b/src/Components/Display.php
@@ -27,7 +27,16 @@ public function render()
         }
 
         $params = [
-            'announcement' => $this->notification->data,
+            'announcement' => array_merge(
+                [
+                    'title' => '',
+                    'body' => '',
+                    'link' => '',
+                    'linkNewWindow' => false,
+                    'linkText' => 'View',
+                ],
+                $this->notification->data
+            ),
             'read_at' => $this->notification->read_at,
             'created_at' => $this->notification->created_at,
         ];