IBX-3085: As a Developer, I want to have thumbnail twig component (#478)

* IBX-3085: Add thumbnail twig component

* remove attr

* Remove cursor from CSS

src/bundle/Resources/public/scss/_header-user-menu.scss

@@ -23,13 +23,6 @@
         font-size: $ibexa-text-font-size-small;
     }
 
-    &__image {
-        width: calculateRem(24px);
-        height: calculateRem(24px);
-        border-radius: 50%;
-        cursor: pointer;
-    }
-
     &__toggler {
         display: flex;
         align-items: center;
@@ -47,7 +40,7 @@
         }
     }
 
-    &__thumbnail {
+    &__thumbnail-wrapper {
         display: flex;
         border: calculateRem(3px) solid $ibexa-color-black;
         border-radius: 50%;

src/bundle/Resources/public/scss/_user-thumbnail.scss

@@ -0,0 +1,7 @@
+.ibexa-user-thumbnail {
+    &--img {
+        width: calculateRem(24px);
+        height: calculateRem(24px);
+        border-radius: 50%;
+    }
+}

src/bundle/Resources/public/scss/ibexa.scss

@@ -114,3 +114,4 @@
 @import 'back-to-top';
 @import 'date-time-picker';
 @import 'middle-ellipsis';
+@import 'user-thumbnail';

src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig

@@ -1,5 +1,3 @@
-{% import "@ibexadesign/ui/component/macros.html.twig" as html %}
-
 {% trans_default_domain 'adaptive_filters' %}
 
 {% set attr = attr|default({})|merge({

src/bundle/Resources/views/themes/admin/ui/component/user_thumbnail/user_thumbnail.html.twig

@@ -0,0 +1,24 @@
+{% import "@ibexadesign/ui/component/macros.html.twig" as html %}
+
+{% set user_image = user_content.thumbnail %}
+
+{% if user_image.mimeType == 'image/svg+xml' %}
+    {% set attr_svg = attr_svg|default({})|merge({
+        class: ('ibexa-user-thumbnail--svg ' ~ attr_svg.class|default(''))|trim,
+        width: attr_svg.width is defined ? attr_svg.width : '24',
+        height: attr_svg.height is defined ? attr_svg.height : '24',
+        xmlns: attr_svg.xmlns is defined ? attr_svg.xmlns : 'http://www.w3.org/2000/svg',
+    }) %}
+
+    <svg {{ html.attributes(attr_svg|default({})) }}>
+        <use xlink:href="{{ user_image.resource }}"></use>
+    </svg>
+{% else %}
+    {% set attr_img = attr_img|default({})|merge({
+        class: ('ibexa-user-thumbnail--img ' ~ attr_img.class|default(''))|trim,
+        src: attr_img.src is defined ? attr_img.src : user_image.resource,
+        alt: attr_img.alt is defined ? attr_img.alt : user.name,
+    }) %}
+
+    <img {{ html.attributes(attr_img|default({})) }}/>
+{% endif %}

src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig

@@ -16,18 +16,10 @@
             <span class="ibexa-header-user-menu__notice-dot ibexa-header-user-menu__notice-dot--no-notice"></span>
         </div>
         <button class="ibexa-header-user-menu__toggler">
-            <div class="ibexa-header-user-menu__thumbnail">
-                {% if user_image.mimeType == "image/svg+xml" %}
-                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-                        <use xlink:href="{{ user_image.resource }}"></use>
-                    </svg>
-                {% else %}
-                    <img
-                        class="ibexa-header-user-menu__image"
-                        src="{{ user_image.resource }}"
-                        alt="{{ user.name }}"
-                    />
-                {% endif %}
+            <div class="ibexa-header-user-menu__thumbnail-wrapper">
+                {% include '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig' with {
+                    user_content: user.content,
+                } %}
             </div>
         </button>