[Components/ProfileItems]: Improve profile items (#1291)

jeroennoten · Jul 2, 2024 · 7a9fb21 · 7a9fb21
1 parent cac45a5
commit 7a9fb21
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 10 deletions.
diff --git a/resources/views/components/widget/profile-col-item.blade.php b/resources/views/components/widget/profile-col-item.blade.php
@@ -10,7 +10,7 @@
         {{-- Header --}}
         @isset($title)
             <h5 class="description-header">
-                @if(! empty($url))
+                @if(! empty($url) && $urlTarget === 'title')
                     <a href="{{ $url }}">{{ $title }}</a>
                 @else
                     {{ $title }}
@@ -22,7 +22,11 @@
         @isset($text)
             <p class="description-text">
                 <span class="{{ $makeTextWrapperClass() }}">
-                    {{ $text }}
+                    @if(! empty($url) && $urlTarget === 'text')
+                        <a href="{{ $url }}">{{ $text }}</a>
+                    @else
+                        {{ $text }}
+                    @endif
                 </span>
             </p>
         @endisset

diff --git a/resources/views/components/widget/profile-row-item.blade.php b/resources/views/components/widget/profile-row-item.blade.php
@@ -9,7 +9,7 @@
 
         {{-- Header --}}
         @isset($title)
-            @if(! empty($url))
+            @if(! empty($url) && $urlTarget === 'title')
                 <a href="{{ $url }}">{{ $title }}</a>
             @else
                 {{ $title }}
@@ -19,7 +19,11 @@
         {{-- Text --}}
         @isset($text)
             <span class="{{ $makeTextWrapperClass() }}">
-                {{ $text }}
+                @if(! empty($url) && $urlTarget === 'text')
+                    <a href="{{ $url }}">{{ $text }}</a>
+                @else
+                    {{ $text }}
+                @endif
             </span>
         @endisset
 

diff --git a/src/View/Components/Widget/ProfileColItem.php b/src/View/Components/Widget/ProfileColItem.php
@@ -39,7 +39,8 @@ class ProfileColItem extends Component
      * The badge theme for the text attribute. When used, the text attribute
      * will be wrapped inside a badge of the configured theme. Available themes
      * are: light, dark, primary, secondary, info, success, warning, danger or
-     * any other AdminLTE color like lighblue or teal.
+     * any other AdminLTE color like lighblue or teal. You can also prepend
+     * the 'pill-' token for a pill badge, for example: 'pill-info'.
      *
      * @var string
      */
@@ -53,21 +54,29 @@ class ProfileColItem extends Component
      */
     public $url;
 
+    /**
+     * The target element for the URL (title or text).
+     *
+     * @var string
+     */
+    public $urlTarget;
+
     /**
      * Create a new component instance.
      *
      * @return void
      */
     public function __construct(
         $title = null, $text = null, $icon = null, $size = 4,
-        $badge = null, $url = null
+        $badge = null, $url = null, $urlTarget = 'title'
     ) {
         $this->title = UtilsHelper::applyHtmlEntityDecoder($title);
         $this->text = UtilsHelper::applyHtmlEntityDecoder($text);
         $this->icon = $icon;
         $this->size = $size;
         $this->badge = $badge;
         $this->url = $url;
+        $this->urlTarget = $urlTarget;
     }
 
     /**
@@ -80,7 +89,12 @@ public function makeTextWrapperClass()
         $classes = [];
 
         if (isset($this->badge)) {
-            $classes[] = "badge bg-{$this->badge}";
+            $badgeMode = str_starts_with($this->badge, 'pill-')
+                ? 'badge-pill'
+                : 'badge';
+
+            $badgeTheme = str_replace('pill-', '', $this->badge);
+            $classes[] = "{$badgeMode} bg-{$badgeTheme}";
         }
 
         return implode(' ', $classes);

diff --git a/src/View/Components/Widget/ProfileRowItem.php b/src/View/Components/Widget/ProfileRowItem.php
@@ -39,7 +39,8 @@ class ProfileRowItem extends Component
      * The badge theme for the text attribute. When used, the text attribute
      * will be wrapped inside a badge of the configured theme. Available themes
      * are: light, dark, primary, secondary, info, success, warning, danger or
-     * any other AdminLTE color like lighblue or teal.
+     * any other AdminLTE color like lighblue or teal. You can also prepend
+     * the 'pill-' token for a pill badge, for example: 'pill-info'.
      *
      * @var string
      */
@@ -53,21 +54,29 @@ class ProfileRowItem extends Component
      */
     public $url;
 
+    /**
+     * The target element for the URL (title or text).
+     *
+     * @var string
+     */
+    public $urlTarget;
+
     /**
      * Create a new component instance.
      *
      * @return void
      */
     public function __construct(
         $title = null, $text = null, $icon = null, $size = 12,
-        $badge = null, $url = null
+        $badge = null, $url = null, $urlTarget = 'title'
     ) {
         $this->title = UtilsHelper::applyHtmlEntityDecoder($title);
         $this->text = UtilsHelper::applyHtmlEntityDecoder($text);
         $this->icon = $icon;
         $this->size = $size;
         $this->badge = $badge;
         $this->url = $url;
+        $this->urlTarget = $urlTarget;
     }
 
     /**
@@ -80,7 +89,12 @@ public function makeTextWrapperClass()
         $classes = ['float-right'];
 
         if (isset($this->badge)) {
-            $classes[] = "badge bg-{$this->badge}";
+            $badgeMode = str_starts_with($this->badge, 'pill-')
+                ? 'badge-pill'
+                : 'badge';
+
+            $badgeTheme = str_replace('pill-', '', $this->badge);
+            $classes[] = "{$badgeMode} bg-{$badgeTheme}";
         }
 
         return implode(' ', $classes);

diff --git a/tests/Components/WidgetComponentsTest.php b/tests/Components/WidgetComponentsTest.php
@@ -232,13 +232,25 @@ public function testInfoBoxComponentProgressAttribute()
 
     public function testProfileColItemComponent()
     {
+        // Test with common badge.
+
         $component = new Components\Widget\ProfileColItem(
             'title', 'text', null, null, 'b-theme'
         );
 
         $twClass = $component->makeTextWrapperClass();
         $this->assertStringContainsString('badge', $twClass);
         $this->assertStringContainsString('bg-b-theme', $twClass);
+
+        // Test with common pill badge.
+
+        $component = new Components\Widget\ProfileColItem(
+            'title', 'text', null, null, 'pill-b-theme'
+        );
+
+        $twClass = $component->makeTextWrapperClass();
+        $this->assertStringContainsString('badge-pill', $twClass);
+        $this->assertStringContainsString('bg-b-theme', $twClass);
     }
 
     /*
@@ -249,13 +261,25 @@ public function testProfileColItemComponent()
 
     public function testProfileRowItemComponent()
     {
+        // Test with common badge.
+
         $component = new Components\Widget\ProfileRowItem(
             'title', 'text', null, null, 'b-theme'
         );
 
         $twClass = $component->makeTextWrapperClass();
         $this->assertStringContainsString('badge', $twClass);
         $this->assertStringContainsString('bg-b-theme', $twClass);
+
+        // Test with common pill badge.
+
+        $component = new Components\Widget\ProfileRowItem(
+            'title', 'text', null, null, 'pill-b-theme'
+        );
+
+        $twClass = $component->makeTextWrapperClass();
+        $this->assertStringContainsString('badge-pill', $twClass);
+        $this->assertStringContainsString('bg-b-theme', $twClass);
     }
 
     /*