[MDS-625] Change Avatar headless, incl bg-cover fix

config/surface.exs

@@ -10,6 +10,7 @@ config :surface, :components, [
   {Moon.Components.TextInput, propagate_context_to_slots: true},
   {Moon.Design.Accordion, propagate_context_to_slots: true},
   {Moon.Design.Accordion.Item, propagate_context_to_slots: true},
+  {Moon.Design.Avatar, propagate_context_to_slots: true},
   {Moon.Design.BottomSheet, propagate_context_to_slots: true},
   {Moon.Design.Carousel, propagate_context_to_slots: true},
   {Moon.Design.Carousel.Reel, propagate_context_to_slots: true},

lib/moon/design/avatar.ex

@@ -4,20 +4,23 @@ defmodule Moon.Design.Avatar do
   use Moon.StatelessComponent
 
   alias Moon.Icon
-  alias Moon.Components.Avatar.StatusOrigin
 
+  @doc "Path to the image"
   prop(image_url, :string)
-  prop(name, :string)
+  @doc "Size of avatar"
   prop(size, :string, default: "md", values: ~w(xs sm md lg xl 2xl))
-  prop(color, :css_class, default: "text-bulma")
-  prop(bg_color, :css_class, default: "bg-gohan")
-  prop(is_rounded, :boolean, default: false)
-  prop(is_status_active, :boolean, default: false)
-  prop(status_origin, :struct, default: %StatusOrigin{vertical: "bottom", horizontal: "right"})
+  @doc "Capital letters of name"
+  prop(name, :string)
+  @doc "Tailwind classes for customization"
   prop(class, :css_class)
-
+  @doc "Data-testid attribute for DOM element"
   prop(testid, :string)
+  @doc "Id of the component"
   prop(id, :string)
+  @doc "Content of Avatar - use it to show icons or anything else"
+  slot(default)
+  @doc "Status indicator of Avatar, see Avatar.Status"
+  slot(status)
 
   def style(assigns) do
     "background-image: url(#{assigns.image_url});"
@@ -27,37 +30,35 @@ defmodule Moon.Design.Avatar do
     ~F"""
     <div
       {=@id}
-      class={merge([
-        [
-          "overflow-hidden uppercase font-medium flex items-center justify-center bg-cover relative",
-          @bg_color,
-          @color,
-          set_border_radius(@size, @is_rounded),
-          "text-moon-10-caption h-6 w-6": @size == "xs",
-          "text-moon-12 h-8 w-8": @size == "sm",
-          "text-moon-14 h-10 w-10": @size == "md",
-          "text-moon-16 h-12 w-12": @size == "lg",
-          "text-moon-16 h-14 w-14": @size == "xl",
-          "text-moon-20 h-16 w-16": @size == "2xl"
-        ],
-        @class
-      ])}
+      class={[
+        merge([
+          [
+            "overflow-hidden uppercase font-medium flex items-center justify-center relative text-bulma bg-gohan",
+            set_border_radius(@size),
+            "text-moon-10-caption h-6 w-6": @size == "xs",
+            "text-moon-12 h-8 w-8": @size == "sm",
+            "text-moon-14 h-10 w-10": @size == "md",
+            "text-moon-16 h-12 w-12": @size == "lg",
+            "text-moon-16 h-14 w-14": @size == "xl",
+            "text-moon-20 h-16 w-16": @size == "2xl"
+          ],
+          @class
+        ]),
+        "bg-cover"
+      ]}
       style={style(assigns)}
       data-testid={@testid}
     >
-      <span :if={@name && !@image_url}>{@name}</span>
-      <Icon name="generic_user" class={set_icon_size(@size)} :if={!@name && !@image_url} />
-      <div
-        :if={@status_origin && @is_status_active}
-        class={
-          "absolute border-solid color-beerus rounded-full bg-roshi",
-          "top-0": @status_origin.vertical == "top",
-          "bottom-0": @status_origin.vertical == "bottom",
-          "left-0": @status_origin.horizontal == "left",
-          "right-0": @status_origin.horizontal == "right",
-          "w-2 h-2 border": @size == "xs",
-          "w-3 h-3 border-2": @size == "sm" || @size == "md",
-          "w-4 h-4 border-2": @size == "lg" || @size == "xl" || @size == "2xl"
+      {#if slot_assigned?(:default)}
+        <#slot />
+      {#else}
+        <span :if={@name && !@image_url}>{@name}</span>
+        <Icon name="generic_user" class={set_icon_size(@size)} :if={!@name && !@image_url} />
+      {/if}
+      <#slot
+        {@status}
+        context_put={
+          size: @size
         }
       />
     </div>
@@ -72,11 +73,8 @@ defmodule Moon.Design.Avatar do
     end
   end
 
-  defp set_border_radius(size, is_rounded) do
+  defp set_border_radius(size) do
     cond do
-      is_rounded ->
-        "rounded-full"
-
       size == "xs" ->
         "rounded-moon-i-xs"
 

lib/moon/design/avatar/status.ex

@@ -0,0 +1,47 @@
+defmodule Moon.Design.Avatar.Status do
+  @moduledoc false
+
+  use Moon.StatelessComponent, slot: "status"
+
+  @doc "Position for status indicator. Vertical options: bottom | top. Horizontal options: left | right. Default is bottom-right"
+  prop(position, :map)
+  @doc "Will be got from Avatar in most cases"
+  prop(size, :string, from_context: :size)
+  @doc "Tailwind classes for customization"
+  prop(class, :css_class)
+  @doc "Data-testid attribute for DOM element"
+  prop(testid, :string)
+  @doc "Id of the component"
+  prop(id, :string)
+
+  def render(assigns) do
+    default_position = %{vertical: "bottom", horizontal: "right"}
+    position = Map.merge(default_position, assigns.position || %{})
+
+    ~F"""
+    <div
+      {=@id}
+      class={[
+        merge([
+          [
+            "absolute border-goku rounded-full bg-roshi",
+            "top-0": position.vertical == "top",
+            "bottom-0": position.vertical == "bottom",
+            "left-0": position.horizontal == "left",
+            "right-0": position.horizontal == "right",
+            "w-2 h-2": @size == "xs",
+            "w-3 h-3": @size == "sm" || @size == "md",
+            "w-4 h-4": @size == "lg" || @size == "xl" || @size == "2xl"
+          ],
+          @class
+        ]),
+        "border-solid",
+        border: @size == "xs",
+        "border-2": @size == "sm" || @size == "md",
+        "border-2": @size == "lg" || @size == "xl" || @size == "2xl"
+      ]}
+      data-testid={@testid}
+    />
+    """
+  end
+end

lib/moon_web/examples/design/avatar_example/active_status.ex

@@ -8,9 +8,14 @@ defmodule MoonWeb.Examples.Design.AvatarExample.ActiveStatus do
 
   def render(assigns) do
     ~F"""
-    <Avatar is_status_active />
-    <Avatar name="md" is_status_active />
-    <Avatar image_url="https://picsum.photos/id/547/100" is_status_active />
+    <Avatar>
+      <Avatar.Status />
+    </Avatar>
+    <Avatar name="md">
+      <Avatar.Status /></Avatar>
+    <Avatar image_url="/moon/assets/images/facing/avatar.jpeg">
+      <Avatar.Status />
+    </Avatar>
     """
   end
 
@@ -20,9 +25,14 @@ defmodule MoonWeb.Examples.Design.AvatarExample.ActiveStatus do
 
     ...
 
-    <Avatar is_status_active />
-    <Avatar name="md" is_status_active />
-    <Avatar image_url="https://picsum.photos/id/547/100" is_status_active />
+    <Avatar>
+      <Avatar.Status />
+    </Avatar>
+    <Avatar name="md">
+      <Avatar.Status /></Avatar>
+    <Avatar image_url="/moon/assets/images/facing/avatar.jpeg">
+      <Avatar.Status />
+    </Avatar>
     """
   end
 end

lib/moon_web/examples/design/avatar_example/customization.ex

@@ -0,0 +1,40 @@
+defmodule MoonWeb.Examples.Design.AvatarExample.Customization do
+  @moduledoc false
+
+  use Moon.StatelessComponent
+  use MoonWeb, :example
+
+  alias Moon.Design.Avatar
+
+  def render(assigns) do
+    ~F"""
+    <Avatar class="text-chichi" />
+    <Avatar class="bg-piccolo text-goten" />
+    <Avatar class="rounded-full rounded-moon-i-xx" />
+    <Avatar>
+      <Avatar.Status class="bg-chichi" />
+    </Avatar>
+    <Avatar>
+      <Avatar.Status class="border-chichi" />
+    </Avatar>
+    """
+  end
+
+  def code() do
+    """
+    alias Moon.Design.Avatar
+
+    ...
+
+    <Avatar class="text-chichi" />
+    <Avatar class="bg-piccolo text-goten" />
+    <Avatar class="rounded-full rounded-moon-i-xx" />
+    <Avatar>
+      <Avatar.Status class="bg-chichi" />
+    </Avatar>
+    <Avatar>
+      <Avatar.Status class="border-chichi" />
+    </Avatar>
+    """
+  end
+end

lib/moon_web/examples/design/avatar_example/sizes.ex

@@ -25,12 +25,12 @@ defmodule MoonWeb.Examples.Design.AvatarExample.Sizes do
       <Avatar name="2xl" size="2xl" />
     </div>
     <div class="flex flex-wrap items-center justify-around gap-2 w-full">
-      <Avatar image_url="https://picsum.photos/id/547/100" size="xs" />
-      <Avatar image_url="https://picsum.photos/id/547/100" size="sm" />
-      <Avatar image_url="https://picsum.photos/id/547/100" />
-      <Avatar image_url="https://picsum.photos/id/547/100" size="lg" />
-      <Avatar image_url="https://picsum.photos/id/547/100" size="xl" />
-      <Avatar image_url="https://picsum.photos/id/547/100" size="2xl" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="xs" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="sm" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="lg" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="xl" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="2xl" />
     </div>
     """
   end
@@ -58,12 +58,12 @@ defmodule MoonWeb.Examples.Design.AvatarExample.Sizes do
       <Avatar name="2xl" size="2xl" />
     </div>
     <div class="flex flex-wrap items-center justify-around gap-2 w-full">
-      <Avatar image_url="https://picsum.photos/id/547/100" size="xs" />
-      <Avatar image_url="https://picsum.photos/id/547/100" size="sm" />
-      <Avatar image_url="https://picsum.photos/id/547/100" />
-      <Avatar image_url="https://picsum.photos/id/547/100" size="lg" />
-      <Avatar image_url="https://picsum.photos/id/547/100" size="xl" />
-      <Avatar image_url="https://picsum.photos/id/547/100" size="2xl" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="xs" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="sm" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="lg" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="xl" />
+      <Avatar image_url="/moon/assets/images/facing/avatar.jpeg" size="2xl" />
     </div>
     """
   end

lib/moon_web/examples/design/avatar_example/status_origin.ex

@@ -5,14 +5,21 @@ defmodule MoonWeb.Examples.Design.AvatarExample.StatusOrigin do
   use MoonWeb, :example
 
   alias Moon.Design.Avatar
-  alias Moon.Design.Avatar.StatusOrigin
 
   def render(assigns) do
     ~F"""
-    <Avatar is_status_active status_origin={%StatusOrigin{vertical: "top", horizontal: "right"}} />
-    <Avatar is_status_active status_origin={%StatusOrigin{vertical: "top", horizontal: "left"}} />
-    <Avatar is_status_active />
-    <Avatar is_status_active status_origin={%StatusOrigin{vertical: "bottom", horizontal: "left"}} />
+    <Avatar>
+      <Avatar.Status position={vertical: "top", horizontal: "right"} />
+    </Avatar>
+    <Avatar>
+      <Avatar.Status position={vertical: "top", horizontal: "left"} />
+    </Avatar>
+    <Avatar>
+      <Avatar.Status />
+    </Avatar>
+    <Avatar>
+      <Avatar.Status position={vertical: "bottom", horizontal: "left"} />
+    </Avatar>
     """
   end
 
@@ -22,10 +29,18 @@ defmodule MoonWeb.Examples.Design.AvatarExample.StatusOrigin do
 
     ...
 
-    <Avatar is_status_active status_origin={%StatusOrigin{vertical: "top", horizontal: "right"}} />
-    <Avatar is_status_active status_origin={%StatusOrigin{vertical: "top", horizontal: "left"}} />
-    <Avatar is_status_active />
-    <Avatar is_status_active status_origin={%StatusOrigin{vertical: "bottom", horizontal: "left"}} />
+    <Avatar>
+      <Avatar.Status position={vertical: "top", horizontal: "right"} />
+    </Avatar>
+    <Avatar>
+      <Avatar.Status position={vertical: "top", horizontal: "left"} />
+    </Avatar>
+    <Avatar>
+      <Avatar.Status />
+    </Avatar>
+    <Avatar>
+      <Avatar.Status position={vertical: "bottom", horizontal: "left"} />
+    </Avatar>
     """
   end
 end