feat: implement image in avatar

helsingborg-stad · Sep 30, 2024 · 3c81e74 · 3c81e74
1 parent 75952d5
commit 3c81e74
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git a/source/php/Component/Avatar/avatar.blade.php b/source/php/Component/Avatar/avatar.blade.php
@@ -1,10 +1,25 @@
 <!-- avatar.blade.php -->
 @if($displayAvatar)
+
     <div class="{{ $class }}" {!! $attribute !!}>
+
+        {{-- If the avatar has an image --}}
         @if($image)
-            <img src="{{ $image }}" class="{{$baseClass}}__image" alt="{{ $label }}" aria-label="{{ $label }}"/>
+            @image(
+                [
+                    'src' => $image,
+                    'classList' => [$baseClass.'__image'],
+                    'alt' => $label,
+                    'attributeList' => [
+                        'aria-label' => $label
+                    ],
+                    'cover' => true
+                ]
+            )
+            @endimage
         @endif
 
+        {{-- If the avatar has an icon --}}
         @if($icon)
             <span class="{{$baseClass}}__icon" aria-label="{{ $label }}">
                 @icon(
@@ -17,10 +32,13 @@
             </span>
         @endif
 
+        {{-- If the avatar has initials --}}
         @if($initials)
             <svg class="{{$baseClass}}__initials" aria-label="{{ $label }}" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <text font-size="380" y="50%" x="50%" fill="#fff" dominant-baseline="middle" text-anchor="middle" alignment-baseline="central">{{$initials}}</text>
             </svg>
         @endif
+
     </div>
+
 @endif
diff --git a/source/php/Component/Avatar/avatar.json b/source/php/Component/Avatar/avatar.json
@@ -1,19 +1,19 @@
 {
     "slug": "avatar",
     "default": {
-        "image": "",
+        "image": false,
         "icon": [],
         "name": "",
         "size": "md"
     },
     "description": {
-        "image": "A url to a profile image.",
+        "image": "A url to a profile image or an ImageInterface.",
         "icon": "Attributes for @icon component (separate reference).",
         "name": "Persons full name",
         "size": "sm,md,lg,full"
     },
     "types": {
-        "image": "string",
+        "image": "string|ImageInterface|boolean",
         "icon": "array",
         "name": "string",
         "size": "string"