Merge pull request #32 from agencetwogether/main

Add possibility to animate icon

README.md

@@ -36,6 +36,8 @@ content: [
 This plugin is already accessible within the Infolists builder and now supports both the `->state([])` and `->record()` methods.
 
 ```php
+use JaOcero\ActivityTimeline\Enums\IconAnimation;
+
 public function activityTimelineInfolist(Infolist $infolist): Infolist
 {
     return $infolist
@@ -95,6 +97,11 @@ public function activityTimelineInfolist(Infolist $infolist): Infolist
                             'published' => 'heroicon-m-rocket-launch',
                             default => null,
                         })
+                        /*
+                            You can animate icon with ->animation() method.
+                            Possible values : IconAnimation::Ping, IconAnimation::Pulse, IconAnimation::Bounce, IconAnimation::Spin or a Closure
+                         */
+                        ->animation(IconAnimation::Ping)
                         ->color(fn (string | null $state): string | null => match ($state) {
                             'ideation' => 'purple',
                             'drafting' => 'info',

resources/views/infolists/components/activity-icon.blade.php

@@ -1,9 +1,22 @@
+@php
+    use JaOcero\ActivityTimeline\Enums\IconAnimation;
+@endphp
 @if ($icon = $getIcon($getState()))
     @php
         $color = $getColor($getState()) ?? 'gray';
+        $animation = $getAnimation($getState());
     @endphp
 
-    <div class="relative flex items-center justify-center w-8 h-8">
+    <div @class([
+        'relative flex items-center justify-center w-8 h-8',
+        match ($animation) {
+            IconAnimation::Spin, 'spin' => 'animate-spin',
+            IconAnimation::Ping, 'ping' => 'animate-ping',
+            IconAnimation::Pulse, 'pulse' => 'animate-pulse',
+            IconAnimation::Bounce, 'bounce' => 'animate-bounce',
+            default => $animation,
+        },
+    ])>
         <span @class([
             'flex flex-shrink-0 p-[5px] w-8 h-8 justify-center items-center dark:border rounded-full dark:bg-gray-800 dark:border-gray-700',
             match ($color) {

src/Components/ActivityIcon.php

@@ -2,14 +2,32 @@
 
 namespace JaOcero\ActivityTimeline\Components;
 
+use Closure;
 use Filament\Infolists\Components\IconEntry;
+use JaOcero\ActivityTimeline\Enums\IconAnimation;
 
 class ActivityIcon extends IconEntry
 {
     protected string $viewIdentifier = 'activityIcon';
 
+    protected IconAnimation|string|Closure|null $animation = null;
+
     protected string $view = 'activity-timeline::infolists.components.activity-icon';
 
+    public function animation(IconAnimation|string|Closure|null $animation): static
+    {
+        $this->animation = $animation;
+
+        return $this;
+    }
+
+    public function getAnimation(mixed $state): IconAnimation|string|null
+    {
+        return $this->evaluate($this->animation, [
+            'state' => $state,
+        ]);
+    }
+
     public function getViewIdentifier(): string
     {
         return $this->viewIdentifier;

src/Enums/IconAnimation.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace JaOcero\ActivityTimeline\Enums;
+
+enum IconAnimation: string
+{
+    case Spin = 'spin';
+
+    case Ping = 'ping';
+
+    case Pulse = 'pulse';
+
+    case Bounce = 'bounce';
+}