New bell icon

config/megaphone.php

@@ -40,4 +40,10 @@
      * Clear Megaphone notifications older than....
      */
     'clearAfter' => '2 weeks',
+
+    /*
+     * Option for setting the icon to show actual count of unread Notifications or
+     * show a dot instead
+     */
+    'showCount' => true,
 ];

public/css/megaphone.css

@@ -1,6 +1,17 @@
 [x-cloak] {
   display: none !important;
 }
+.megaphone .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
 .megaphone .fixed {
   position: fixed;
 }
@@ -10,23 +21,14 @@
 .megaphone .relative {
   position: relative;
 }
-.megaphone .-left-2 {
-  left: -0.5rem;
-}
-.megaphone .-top-2 {
-  top: -0.5rem;
-}
 .megaphone .top-0 {
   top: 0px;
 }
-.megaphone .right-0 {
-  right: 0px;
-}
 .megaphone .left-0 {
   left: 0px;
 }
-.megaphone .z-20 {
-  z-index: 20;
+.megaphone .right-0 {
+  right: 0px;
 }
 .megaphone .z-50 {
   z-index: 50;
@@ -47,39 +49,47 @@
 .megaphone .block {
   display: block;
 }
-.megaphone .inline-block {
-  display: inline-block;
-}
 .megaphone .flex {
   display: flex;
 }
-.megaphone .h-12 {
-  height: 3rem;
-}
-.megaphone .h-6 {
-  height: 1.5rem;
+.megaphone .aspect-square {
+  aspect-ratio: 1 / 1;
 }
 .megaphone .h-full {
   height: 100%;
 }
+.megaphone .h-2\/5 {
+  height: 40%;
+}
+.megaphone .h-12 {
+  height: 3rem;
+}
 .megaphone .h-screen {
   height: 100vh;
 }
+.megaphone .h-6 {
+  height: 1.5rem;
+}
 .megaphone .h-8 {
   height: 2rem;
 }
 .megaphone .h-4\/5 {
   height: 80%;
 }
+.megaphone .max-h-fit {
+  max-height: -webkit-fit-content;
+  max-height: -moz-fit-content;
+  max-height: fit-content;
+}
+.megaphone .w-full {
+  width: 100%;
+}
 .megaphone .w-12 {
   width: 3rem;
 }
 .megaphone .w-6 {
   width: 1.5rem;
 }
-.megaphone .w-full {
-  width: 100%;
-}
 .megaphone .w-8 {
   width: 2rem;
 }
@@ -123,6 +133,9 @@
 .megaphone .rounded {
   border-radius: 0.25rem;
 }
+.megaphone .border-2 {
+  border-width: 2px;
+}
 .megaphone .border {
   border-width: 1px;
 }
@@ -137,9 +150,9 @@
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
-.megaphone .bg-red-600 {
+.megaphone .bg-red-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 .megaphone .bg-gray-50 {
   --tw-bg-opacity: 1;
@@ -153,8 +166,8 @@
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-.megaphone .fill-white {
-  fill: #fff;
+.megaphone .fill-black {
+  fill: #000;
 }
 .megaphone .fill-blue-600 {
   fill: #2563eb;
@@ -165,12 +178,6 @@
 .megaphone .fill-green-600 {
   fill: #16a34a;
 }
-.megaphone .p-1\.5 {
-  padding: 0.375rem;
-}
-.megaphone .p-1 {
-  padding: 0.25rem;
-}
 .megaphone .p-8 {
   padding: 2rem;
 }
@@ -180,6 +187,14 @@
 .megaphone .p-2 {
   padding: 0.5rem;
 }
+.megaphone .px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+.megaphone .px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 .megaphone .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -206,30 +221,33 @@
 .megaphone .pt-1 {
   padding-top: 0.25rem;
 }
-.megaphone .text-center {
-  text-align: center;
-}
 .megaphone .text-right {
   text-align: right;
 }
-.megaphone .text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+.megaphone .font-sans {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+.megaphone .text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 .megaphone .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
 }
-.megaphone .text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
+.megaphone .text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 }
 .megaphone .font-semibold {
   font-weight: 600;
 }
 .megaphone .font-bold {
   font-weight: 700;
 }
+.megaphone .leading-5 {
+  line-height: 1.25rem;
+}
 .megaphone .leading-6 {
   line-height: 1.5rem;
 }
@@ -242,6 +260,10 @@
 .megaphone .leading-3 {
   line-height: .75rem;
 }
+.megaphone .text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
 .megaphone .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -271,6 +293,11 @@
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.megaphone .shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .megaphone .drop-shadow {
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -308,6 +335,11 @@
 .megaphone .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
+@media (prefers-color-scheme: dark) {
+  .megaphone .dark\:fill-white {
+    fill: #fff;
+  }
+}
 @media (min-width: 1536px) {
   .megaphone .\32xl\:w-4\/12 {
     width: 33.333333%;

resources/views/icon.blade.php

@@ -1,13 +1,19 @@
-<div class="relative z-20 w-12 h-12 cursor-pointer" @click="open = true">
+<button type="button"
+        aria-label="show notifications"
+        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>
     @if ($unread->count() > 0)
-        <div class="absolute -left-2 -top-2 w-6 h-6 inline-block text-center text-sm rounded-full text-white bg-red-600">
-            <span class="p-1.5">
+        @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">
                 {{ $unread->count() }}
             </span>
-        </div>
+        @else
+            <span aria-label="has unread notifications" class="absolute top-0 left-0 aspect-square h-2/5 rounded-full bg-red-500 shadow">
+        @endif
     @endif
-
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-white">
-        <path d="M224 480c-17.66 0-32-14.38-32-32.03h-32c0 35.31 28.72 64.03 64 64.03s64-28.72 64-64.03h-32c0 17.65-14.34 32.03-32 32.03zm209.38-145.19c-27.96-26.62-49.34-54.48-49.34-148.91 0-79.59-63.39-144.5-144.04-152.35V16c0-8.84-7.16-16-16-16s-16 7.16-16 16v17.56C127.35 41.41 63.96 106.31 63.96 185.9c0 94.42-21.39 122.29-49.35 148.91-13.97 13.3-18.38 33.41-11.25 51.23C10.64 404.24 28.16 416 48 416h352c19.84 0 37.36-11.77 44.64-29.97 7.13-17.82 2.71-37.92-11.26-51.22zM400 384H48c-14.23 0-21.34-16.47-11.32-26.01 34.86-33.19 59.28-70.34 59.28-172.08C95.96 118.53 153.23 64 224 64c70.76 0 128.04 54.52 128.04 121.9 0 101.35 24.21 138.7 59.28 172.08C421.38 367.57 414.17 384 400 384z"/>
-    </svg>
-</div>
+</button>

src/Livewire/Megaphone.php

@@ -14,6 +14,8 @@ class Megaphone extends Component
 
     public $unread;
 
+    public $showCount;
+
     public $rules = [
         'unread' => 'required',
         'announcements' => 'required',
@@ -23,6 +25,7 @@ public function mount(Request $request)
     {
         $this->user = $request->user();
         $this->loadAnnouncements($this->user);
+        $this->showCount = config('megaphone.showCount', true);
     }
 
     public function loadAnnouncements($user)

tests/MegaphoneComponentTest.php

@@ -30,11 +30,31 @@
 
     $this->livewire(Megaphone::class)
         ->assertViewIs('megaphone::megaphone')
-        ->assertSeeHtml('<div class="absolute -left-2 -top-2 w-6 h-6 inline-block text-center text-sm rounded-full text-white bg-red-600">
-            <span class="p-1.5">
+        ->assertSeeHtml('<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">
                 1
-            </span>
-        </div>');
+            </span>');
+});
+
+it('can render the megaphone component with notification dot', function () {
+    config()->set(
+        'megaphone.showCount', false
+    );
+
+    $this->actingAs(
+        $user = $this->createTestUser()
+    );
+
+    $this->createTestNotification(
+        $user,
+        \MBarlow\Megaphone\Types\General::class
+    );
+
+    $this->livewire(Megaphone::class)
+        ->assertViewIs('megaphone::megaphone')
+        ->assertSeeHtml('<span aria-label="has unread notifications" class="absolute top-0 left-0 aspect-square h-2/5 rounded-full bg-red-500 shadow">')
+        ->assertDontSeeHtml('<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">
+                1
+            </span>');
 });
 
 it('can load announcements', function () {

tests/Setup/TestCase.php

@@ -48,8 +48,8 @@ protected function createTestNotification($user, $notifClass)
 
     protected function bellSvgIcon(): string
     {
-        return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-white">
-        <path d="M224 480c-17.66 0-32-14.38-32-32.03h-32c0 35.31 28.72 64.03 64 64.03s64-28.72 64-64.03h-32c0 17.65-14.34 32.03-32 32.03zm209.38-145.19c-27.96-26.62-49.34-54.48-49.34-148.91 0-79.59-63.39-144.5-144.04-152.35V16c0-8.84-7.16-16-16-16s-16 7.16-16 16v17.56C127.35 41.41 63.96 106.31 63.96 185.9c0 94.42-21.39 122.29-49.35 148.91-13.97 13.3-18.38 33.41-11.25 51.23C10.64 404.24 28.16 416 48 416h352c19.84 0 37.36-11.77 44.64-29.97 7.13-17.82 2.71-37.92-11.26-51.22zM400 384H48c-14.23 0-21.34-16.47-11.32-26.01 34.86-33.19 59.28-70.34 59.28-172.08C95.96 118.53 153.23 64 224 64c70.76 0 128.04 54.52 128.04 121.9 0 101.35 24.21 138.7 59.28 172.08C421.38 367.57 414.17 384 400 384z"/>
+        return '<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>';
     }