avo 3.30.4 → 4.0.0.beta.2

data/app/components/avo/sidebar/link_component.rb

@@ -13,7 +13,9 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
   end
   prop :data, default: {}.freeze
   prop :icon
+  prop :reserve_icon_space, default: false
   prop :args, kind: :**, default: {}.freeze
+  prop :items
 
   def is_external?
     # If the path contains the scheme, check if it includes the root path or not
@@ -36,7 +38,33 @@ class Avo::Sidebar::LinkComponent < Avo::BaseComponent
     end
   end
 
-  def classes
-    "px-4 pr-0 flex-1 flex mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-100 gap-1"
+  def parent_link_active?
+    return false if @path.blank?
+    helpers.is_active_link?(@path, @active)
+  end
+
+  def link_icon
+    @icon
+  end
+
+  def active_item_index
+    return @active_item_index if defined?(@active_item_index)
+
+    @active_item_index = @items&.index do |item|
+      item.path.present? && helpers.is_active_link?(item.path, @active)
+    end
+  end
+
+  def subitem_bar_class(index)
+    active_idx = active_item_index
+    return "" if active_idx.nil?
+
+    if index == active_idx
+      "sidebar-subitem--bar-active"
+    elsif index < active_idx
+      "sidebar-subitem--bar-pass"
+    else
+      ""
+    end
   end
 end

data/app/components/avo/sidebar/section_component.html.erb

@@ -1,19 +1,39 @@
-<div class="space-y-1 mb-4"
-  <% if collapsable %>
-    data-controller="menu"
-    data-menu-target="self"
-    data-menu-key-param="<%= key %>"
-    data-menu-default-collapsed-state="<%= collapsed ? 'collapsed' : 'expanded' %>"
+<%= tag.div class: "sidebar-section", data: data do %>
+  <% if item.name.present? %>
+    <% if collapsable %>
+      <button
+        type="button"
+        class="sidebar-section__header justify-between"
+        data-action="click->menu#triggerCollapse"
+        data-menu-target="trigger"
+        aria-expanded="<%= !collapsed %>"
+      >
+        <div class="sidebar-section__header-inner">
+          <%= helpers.svg icon, class: "sidebar-section__icon sidebar-icon" if icon.present? %>
+          <span><%= item.name %></span>
+        </div>
+        <span class="sidebar-section__icon sidebar-icon <%= 'sidebar-icon--collapsed' if collapsed %>"
+          data-menu-target="svg"
+        >
+          <%= helpers.svg 'heroicons/outline/chevron-down' %>
+        </span>
+      </button>
+    <% else %>
+      <div class="sidebar-section__header">
+        <%= helpers.svg icon, class: "sidebar-section__icon sidebar-icon" if icon.present? %>
+        <span><%= item.name %></span>
+      </div>
+    <% end %>
   <% end %>
->
-  <%= render Avo::Sidebar::HeadingComponent.new label: item.name, icon: helpers.svg(icon, class: "h-5"), collapsable: item.collapsable, collapsed: collapsed, key: key %>
-  <%= content_tag :div, class: class_names("w-full space-y-1", {"hidden": collapsed}),
+
+  <%= content_tag :div,
+    hidden: collapsed,
+    class: "sidebar-section__items",
     data: {
       menu_target: :items,
-      **section_collapse_data_animation
     } do %>
     <% @items.each do |item| %>
       <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
     <% end %>
   <% end %>
-</div>
+<% end %>

data/app/components/avo/sidebar/section_component.rb

@@ -2,8 +2,6 @@
 
 class Avo::Sidebar::SectionComponent < Avo::Sidebar::BaseItemComponent
   def icon
-    return nil if item.icon.nil?
-
-    item.icon
+    item.icon if item.icon.present?
   end
 end

data/app/components/avo/sidebar_component.html.erb

@@ -1,28 +1,24 @@
 <%= content_tag :div,
   class: class_names(
-    "avo-sidebar fixed z-[60] t-0 application-sidebar w-64 flex-1 border-r lg:border-none bg-none xh-dvh h-[calc(100dvh-4rem)] bg-application lg:bg-transparent",
+    "avo-sidebar",
     "print:hidden": Avo.configuration.hide_layout_when_printing,
     "hidden": !@sidebar_open,
   ),
   data: {
     sidebar_target: stimulus_target
   } do %>
-  <div class="flex flex-col w-full h-full">
-    <div class="flex-1 flex flex-col justify-between overflow-auto h-full pt-3 mac-styled-scrollbar">
-      <div class="space-y-6 mb-4">
+  <div class="sidebar__inner">
+    <div class="sidebar__body mac-styled-scrollbar">
+      <%# Body area %>
+      <div class="sidebar__body-content">
         <%= render Avo::Sidebar::LinkComponent.new label: 'Get started', path: helpers.avo.root_path, active: :exclusive if Rails.env.development? && Avo.configuration.home_path.nil? %>
 
-        <% if Avo.plugin_manager.installed?("avo-menu") && Avo.has_main_menu? %>
-          <% Avo.main_menu.items.each do |item| %>
-            <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
-          <% end %>
+        <% if render_custom_sidebar? %>
+          <%= render custom_sidebar_component %>
         <% else %>
-
           <% if dashboards.present? %>
             <div>
-              <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.dashboards'), icon: helpers.svg("avo/dashboards", class: 'h-4') %>
-
-              <div class="w-full space-y-1">
+              <div class="sidebar__nav-list">
                 <% dashboards.sort_by { |r| r.navigation_label }.each do |dashboard| %>
                   <%= render Avo::Sidebar::LinkComponent.new label: dashboard.navigation_label, path: helpers.avo_dashboards.dashboard_path(dashboard) %>
                 <% end %>
@@ -30,25 +26,25 @@
             </div>
           <% end %>
 
-          <div>
-            <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.resources'), icon: helpers.svg("avo/resources", class: 'h-4') %>
-
-            <div class="w-full space-y-1">
-              <% resources.sort_by { |r| r.navigation_label }.each do |resource| %>
-                <%= render Avo::Sidebar::LinkComponent.new label: resource.navigation_label, path: helpers.resources_path(resource: resource) %>
-              <% end %>
-            </div>
+          <div class="sidebar__nav-list">
+            <% resources.sort_by { |r| r.navigation_label }.each do |resource| %>
+              <%= render Avo::Sidebar::LinkComponent.new label: resource.navigation_label, path: helpers.resources_path(resource: resource), icon: resource.icon %>
+            <% end %>
           </div>
 
           <% if tools.present? %>
-            <div>
-              <%= render Avo::Sidebar::HeadingComponent.new label: t('avo.tools'), icon: helpers.svg("avo/tools", class: 'h-4') %>
+            <div class="sidebar__nav-list">
+              <% tools.each do |partial| %>
+                <%= render partial: "/avo/sidebar/items/#{partial}" %>
+              <% end %>
+            </div>
+          <% end %>
 
-              <div class="w-full space-y-1">
-                <% tools.each do |partial| %>
-                  <%= render partial: "/avo/sidebar/items/#{partial}" %>
-                <% end %>
-              </div>
+          <% if pages.present? %>
+            <div class="sidebar__nav-list">
+              <% pages.each do |page| %>
+                <%= render Avo::Sidebar::LinkComponent.new label: page.get_navigation_label, path: page.path %>
+              <% end %>
             </div>
           <% end %>
 
@@ -60,14 +56,17 @@
         <%= render partial: "/avo/partials/sidebar_extra" %>
       </div>
     </div>
-    <% if Rails.env.development? %>
-      <div class="p-4 border-t group">
-        <%= link_to helpers.avo.avo_private_status_path, class: "block px-4 py-2 border rounded flex justify-between items-center w-full text-black text-sm" do %>
-          <span>Avo Status</span> <span><div class="rounded-full w-4 h-4 <%= Avo.app_status ? "bg-green-400" : "bg-orange-400" %>"></div></span>
-        <% end %>
-        <div class="absolute text-xs text-gray-700 group-hover:block hidden text-center w-full -ml-4">👆Visible only in development👆</div>
-      </div>
-    <% end %>
-    <%= render Avo::SidebarProfileComponent.new user: helpers._current_user %>
+    <div class="sidebar__footer">
+      <% if Rails.env.development? %>
+        <div class="sidebar-status">
+          <%= link_to helpers.avo.avo_private_status_path, class: "sidebar-status__link" do %>
+            <span>Avo Status</span>
+            <span><div class="sidebar-status__indicator <%= Avo.app_status ? "sidebar-status__indicator--ok" : "sidebar-status__indicator--error" %>"></div></span>
+          <% end %>
+          <div class="sidebar-status__hint">👆Visible only in development👆</div>
+        </div>
+      <% end %>
+      <%= render Avo::SidebarProfileComponent.new user: helpers._current_user %>
+    </div>
   </div>
 <% end %>

data/app/components/avo/sidebar_component.rb

@@ -18,7 +18,23 @@ class Avo::SidebarComponent < Avo::BaseComponent
     Avo.tool_manager.tools_for_navigation
   end
 
+  def pages
+    return [] unless Avo.plugin_manager.installed?("avo-forms")
+
+    Avo::Forms::Core::Page.descendants.uniq(&:name).select(&:main_page?)
+  end
+
   def stimulus_target
     @for_mobile ? "mobileSidebar" : "sidebar"
   end
+
+  def custom_sidebar_component
+    Avo::Sidebar::CustomSidebarComponent.new
+  end
+
+  def render_custom_sidebar?
+    return false unless Avo.plugin_manager.installed?("avo-menu")
+
+    custom_sidebar_component.render?
+  end
 end

data/app/components/avo/sidebar_profile_component.html.erb

@@ -1,43 +1,34 @@
-<div class="text-black border-gray-150 p-4 flex border-t">
-  <div class="flex-1 flex space-x-4 w-full">
-    <% if avatar.present? %>
-      <div class="relative aspect-square w-10 h-10 overflow-hidden rounded shrink-0">
-        <%= image_tag helpers.main_app.url_for(avatar), class: "object-cover min-w-full min-h-full h-full" %>
-      </div>
-    <% end %>
-    <div class="flex flex-col pr-3 min-w-0">
-      <div class="font-medium text-ellipsis overflow-hidden">
+<div class="sidebar-profile" data-controller="toggle">
+  <div class="sidebar-profile__body">
+    <div class="sidebar-profile__avatar-wrapper">
+    <div class="sidebar-profile__avatar">
+        <% if avatar.present? %>
+          <%= image_tag helpers.main_app.url_for(avatar), class: "sidebar-profile__avatar-img" %>
+        <% else %>
+          <span class="sidebar-profile__avatar-initials">
+            <%= initials %>
+          </span>
+        <% end %>
+    </div>
+    </div>
+    <div class="sidebar-profile__info">
+      <div class="sidebar-profile__title">
         <%= name %>
       </div>
       <% if title.present? %>
-        <div class="text-xs text-gray-500 uppercase">
-          <%= title %>
+        <div class="sidebar-profile__subtitle">
+            <%= title %>
         </div>
       <% end %>
     </div>
   </div>
-  <div class="relative" data-controller="toggle">
-    <a class="flex items-center h-full cursor-pointer" data-control="profile-dots" data-action="click->toggle#togglePanel">
-      <%= helpers.svg "avo/three-dots", class: 'h-4' %>
-    </a>
-    <div
-      class="hidden absolute flex flex-col inset-auto right-0 bottom-0 mb-8 bg-white rounded min-w-[200px] shadow-context z-40"
-      data-toggle-target="panel"
-      data-transition-enter="transition ease-in-out duration-100"
-      data-transition-enter-start="transform opacity-0 translate-y-3"
-      data-transition-enter-end="transform opacity-100 translate-y-0"
-      data-transition-leave="transition ease-in duration-75"
-      data-transition-leave-start="transform opacity-100 translate-y-0"
-      data-transition-leave-end="transform opacity-0 translate-y-3"
-    >
-      <% if Avo.plugin_manager.installed?("avo-menu") && Avo.has_profile_menu? %>
-        <div class="text-black space-y-4">
-          <% Avo.profile_menu.items.each do |item| %>
-            <% if item.is_a? Avo::Menu::Link %>
-              <%= render Avo::ProfileItemComponent.new label: item.name, path: item.path, icon: item.icon, method: item.method, params: item.params %>
-            <% end %>
-          <% end %>
-        </div>
+  <div class="sidebar-profile__actions">
+    <button type="button" class="sidebar-profile__action-trigger" data-control="profile-dots" data-action="click->toggle#togglePanel">
+      <%= helpers.svg "tabler/outline/dots", class: 'sidebar-profile__action-icon sidebar-icon' %>
+    </button>
+    <div class="css-animate-slide-up sidebar-profile__panel" data-toggle-target="panel" hidden>
+      <% if render_custom_profile_menu? %>
+        <%= render custom_profile_component %>
       <% end %>
       <%= render "avo/partials/profile_menu_extra" %>
       <% if can_sign_out_user? %>
@@ -48,9 +39,9 @@
             sign_out_confirm_value: t('avo.are_you_sure'),
             action: "submit->sign-out#handle",
           },
-          class: 'flex-1' do |form| %>
-          <%= form.button turbo_confirm: t('avo.are_you_sure'), class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-red-600 font-semibold hover:bg-red-100 block px-4 py-1 w-full py-3 text-center rounded w-full" do %>
-          <%= helpers.svg "avo/logout", class: 'h-4 mr-1' %> <%= t('avo.sign_out') %>
+          class: 'sidebar-profile__form' do |form| %>
+          <%= form.button turbo_confirm: t('avo.are_you_sure'), class: "sidebar-profile__sign-out" do %>
+            <%= helpers.svg "avo/logout", class: 'sidebar-profile__sign-out-icon sidebar-icon' %> <%= t('avo.sign_out') %>
           <% end %>
         <% end %>
       <% end %>

data/app/components/avo/sidebar_profile_component.rb

@@ -33,6 +33,10 @@ class Avo::SidebarProfileComponent < Avo::BaseComponent
     end
   end
 
+  def initials
+    name.split(" ").map(&:first).join("").first(2).upcase
+  end
+
   def sign_out_method
     :delete
   end
@@ -53,4 +57,14 @@ class Avo::SidebarProfileComponent < Avo::BaseComponent
   def can_sign_out_user?
     sign_out_path.present? && main_app.respond_to?(sign_out_path&.to_sym)
   end
+
+  def custom_profile_component
+    Avo::Sidebar::CustomProfileComponent.new
+  end
+
+  def render_custom_profile_menu?
+    return false unless Avo.plugin_manager.installed?("avo-menu")
+
+    custom_profile_component.render?
+  end
 end

data/app/components/avo/tab_group_component.html.erb

@@ -5,28 +5,40 @@
     controller: "tabs",
     tabs_view_value: view,
     tabs_group_id_value: group.id,
-    tabs_active_tab_value: active_tab_name,
+    tabs_active_tab_value: active_tab_title,
     tabs_resource_name_value: resource.underscore_name
   } do %>
   <% visible_tabs.each_with_index do |tab, index| %>
     <%= content_tag :div, **args(tab) do %>
-      <%= render Avo::PanelHeaderComponent.new name: group.title, description: group.description %>
-      <div class="border rounded-lg p-2 -mx-2 -my-2 lg:p-4 lg:-mx-4 lg:-my-3 space-y-4">
-        <%= render Avo::TabSwitcherComponent.new resource: resource, current_tab: visible_tabs.first, group: group, active_tab_name: tab.name, view: view %>
+      <% if group.title.present? || group.description.present? %>
+        <%= render ui.panel_header(title: group.title, description: group.description) %>
+      <% end %>
+
+        <%= render Avo::UI::Tabs::TabsComponent.new do %>
+          <% visible_tabs.each do |tab_item| %>
+            <%= render Avo::UI::Tabs::TabComponent.new(
+              label: tab_item.title,
+              active: tab_active?(tab_item, tab),
+              href: tab_path(tab_item),
+              title: tab_item.description,
+              data: tab_data(tab_item, tab)
+            ) %>
+          <% end %>
+        <% end %>
+
         <% if !tab.is_empty? %>
           <% if tab.lazy_load && view.display? %>
-            <%= turbo_frame_tag tab.turbo_frame_id(parent: @group), **frame_args(tab) do %>
+            <%= turbo_frame_tag tab.turbo_frame_id(parent: group), **frame_args(tab) do %>
               <% if is_not_loaded?(tab) %>
-                <%= render Avo::LoadingComponent.new(title: tab.name) %>
+                <%= render Avo::LoadingComponent.new(title: tab.title) %>
               <% else %>
-                <%= render Avo::TabContentComponent.new tab:, resource:, index:, form:, view:%>
+                <%= render Avo::TabContentComponent.new tab:, resource:, index:, form:, view: %>
               <% end %>
             <% end %>
           <% else %>
-            <%= render Avo::TabContentComponent.new tab:, resource:, index:, form:, view:%>
+            <%= render Avo::TabContentComponent.new tab:, resource:, index:, form:, view: %>
           <% end %>
         <% end %>
-      </div>
     <% end %>
   <% end %>
 <% end %>

data/app/components/avo/tab_group_component.rb

@@ -4,6 +4,7 @@ class Avo::TabGroupComponent < Avo::BaseComponent
   delegate :group_param, to: :@group
 
   prop :resource, reader: :public
+  # variable @group was changed with group to avoid cases where we need to pass down the group object as a prop
   prop :group, reader: :public
   prop :index, reader: :public
   prop :form, reader: :public
@@ -27,11 +28,11 @@ class Avo::TabGroupComponent < Avo::BaseComponent
     if is_not_loaded?(tab)
       args[:loading] = :lazy
       args[:src] = helpers.resource_path(
-        resource: @resource,
-        record: @resource.record,
+        resource: resource,
+        record: resource.record,
         keep_query_params: true,
-        active_tab_name: tab.name,
-        tab_turbo_frame: tab.turbo_frame_id(parent: @group)
+        active_tab_title: tab.title,
+        tab_turbo_frame: tab.turbo_frame_id(parent: group)
       )
     end
 
@@ -39,19 +40,26 @@ class Avo::TabGroupComponent < Avo::BaseComponent
   end
 
   def is_not_loaded?(tab)
-    params[:tab_turbo_frame] != tab.turbo_frame_id(parent: @group)
+    params[:tab_turbo_frame] != tab.turbo_frame_id(parent: group)
   end
 
   def tabs_have_content?
     visible_tabs.present?
   end
 
-  def active_tab_name
-    CGI.unescape(params[group_param] || group.visible_items&.first&.name)
+  def active_tab_title
+    requested_tab_title = CGI.unescape(params[group_param].to_s)
+    visible_tab_titles = visible_tabs.map { |tab| tab.title.to_s }
+
+    if requested_tab_title.present? && visible_tab_titles.include?(requested_tab_title)
+      requested_tab_title
+    else
+      visible_tab_titles.first
+    end
   end
 
   def tabs
-    @group.visible_items.map do |tab|
+    group.visible_items.map do |tab|
       tab.hydrate(view: view)
     end
   end
@@ -63,10 +71,8 @@ class Avo::TabGroupComponent < Avo::BaseComponent
   end
 
   def active_tab
-    return if group.visible_items.blank?
-
-    group.visible_items.find do |tab|
-      tab.name.to_s == active_tab_name.to_s
+    visible_tabs.find do |tab|
+      tab.title.to_s == active_tab_title.to_s
     end
   end
 
@@ -74,13 +80,46 @@ class Avo::TabGroupComponent < Avo::BaseComponent
     {
       # Hide the turbo frames that aren't in the current tab
       # This way we can lazy load the un-selected tabs on the show view
-      class: "block #{'hidden' unless tab.name == active_tab_name}",
+      class: "block space-y-4 #{"hidden" unless tab.title == active_tab_title}",
       data: {
         # Add a marker to know if we already loaded a turbo frame
-        loaded: tab.name == active_tab_name,
+        loaded: tab.title == active_tab_title,
         tabs_target: :tabPanel,
-        tab_id: tab.name,
+        tab_id: tab.title,
       }
     }
   end
+
+  def tab_path(tab)
+    base_options = {
+      resource: resource,
+      keep_query_params: true,
+      active_tab_title: tab.title,
+      tab_turbo_frame: group.turbo_frame_id
+    }
+
+    if view.in?(%w[edit update])
+      helpers.edit_resource_path(**base_options, record: resource.record)
+    elsif view.in?(%w[new create])
+      helpers.new_resource_path(**base_options)
+    else
+      helpers.resource_path(**base_options, record: resource.record)
+    end
+  end
+
+  def tab_data(tab, current_tab)
+    data = {
+      action: "click->tabs#changeTab",
+      tabs_tab_name_param: tab.title,
+      tabs_group_id_param: group.to_param,
+      tabs_resource_name_param: resource.underscore_name,
+      selected: tab_active?(tab, current_tab)
+    }
+    data[:tippy] = "tooltip" if tab.description.present?
+    data
+  end
+
+  def tab_active?(tab, current_tab)
+    tab.title == current_tab.title
+  end
 end

data/app/components/avo/turbo_frame_wrapper_component.html.erb

@@ -1,13 +1,9 @@
 <% if @name.present? %>
-  <turbo-frame id="<%= @name %>">
-    <% if helpers.turbo_frame_request? %>
-      <%= helpers.turbo_stream_action_tag :append, target: "alerts", template: render(Avo::FlashAlertsComponent.new(flashes: helpers.flash)) %>
-    <% end %>
+  <%= turbo_frame_tag @name, class: @class do %>
+    <%= flash_content %>
     <%= content %>
-  </turbo-frame>
-<% else %>
-  <% if helpers.turbo_frame_request? %>
-    <%= helpers.turbo_stream_action_tag :append, target: "alerts", template: render(Avo::FlashAlertsComponent.new(flashes: helpers.flash)) %>
   <% end %>
+<% else %>
+  <%= flash_content %>
   <%= content %>
 <% end %>

data/app/components/avo/turbo_frame_wrapper_component.rb

@@ -2,4 +2,13 @@
 
 class Avo::TurboFrameWrapperComponent < Avo::BaseComponent
   prop :name, kind: :positional
+  prop :class, kind: :positional
+
+  # When rendering the frames the flashed content gets lost.
+  # We're appending it back if it's a turbo_frame_request.
+  def flash_content
+    if helpers.turbo_frame_request?
+      helpers.turbo_stream_action_tag :append, target: "alerts", template: render(Avo::FlashAlertsComponent.new(flashes: helpers.flash))
+    end
+  end
 end

data/app/components/avo/u_i/avatar_component.html.erb

@@ -0,0 +1,11 @@
+<%= tag.div class: container_classes, data: { component: "avo/avatar_component" }, **options do %>
+  <% if type == "avatar" && src.present? %>
+    <div class="cado-avatar__image">
+      <%= image_tag src, alt: alt, class: "cado-avatar__img" %>
+    </div>
+  <% elsif type == "initials" && initials.present? %>
+    <div class="cado-avatar__initials">
+      <%= display_initials %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/avo/u_i/avatar_component.rb

@@ -0,0 +1,61 @@
+class Avo::UI::AvatarComponent < Avo::BaseComponent
+  SIZES = %w[large medium small tiny].freeze
+  SHAPES = %w[rounded square].freeze
+  THEMES = %w[default orange yellow green teal blue purple].freeze
+  TYPES = %w[avatar placeholder initials].freeze
+
+  def initialize(
+    type: "placeholder",
+    size: "large",
+    shape: "rounded",
+    theme: "default",
+    initials: nil,
+    src: nil,
+    alt: nil,
+    **options
+  )
+    @type = type.to_s
+    @size = size.to_s
+    @shape = shape.to_s
+    @theme = theme.to_s
+    @initials = initials
+    @src = src
+    @alt = alt
+    @options = options
+
+    validate_params!
+  end
+
+  private
+
+  attr_reader :type, :size, :shape, :theme, :initials, :src, :alt, :options
+
+  def validate_params!
+    raise ArgumentError, "Invalid type: #{type}" unless TYPES.include?(type)
+    raise ArgumentError, "Invalid size: #{size}" unless SIZES.include?(size)
+    raise ArgumentError, "Invalid shape: #{shape}" unless SHAPES.include?(shape)
+    raise ArgumentError, "Invalid theme: #{theme}" unless THEMES.include?(theme)
+
+    if type == "initials" && initials.blank?
+      raise ArgumentError, "Initials is required when type is 'initials'"
+    end
+
+    if type == "avatar" && src.blank?
+      raise ArgumentError, "src is required when type is 'avatar'"
+    end
+  end
+
+  def container_classes
+    classes = ["cado-avatar"]
+    classes << "cado-avatar--#{type}"
+    classes << "cado-avatar--#{size}"
+    classes << "cado-avatar--#{shape}"
+    classes << "cado-avatar--#{theme}" unless theme == "default"
+    classes.join(" ")
+  end
+
+  def display_initials
+    return "" if initials.blank?
+    initials.to_s.upcase
+  end
+end

data/app/components/avo/u_i/badge_component.html.erb

@@ -0,0 +1,9 @@
+<%= content_tag :span, class: class_names(
+  "badge",
+  style_classes,
+  color_classes,
+  @classes
+) do %>
+  <%= svg(@icon, class: "badge__icon") if @icon.present? %>
+  <%= content_tag(:span, @label, class: "badge__label") if @label.present? %>
+<% end %>