Add avatar component (#326)

rubyforgood · Nov 5, 2023 · c7e68c7 · c7e68c7
1 parent ab94e5a
commit c7e68c7
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 39 deletions.
diff --git a/Gemfile b/Gemfile
@@ -27,6 +27,9 @@ gem "turbo-rails"
 # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
 gem "stimulus-rails"
 
+# A framework for creating reusable, testable & encapsulated view components
+gem "view_component"
+
 # Build JSON APIs with ease [https://github.com/rails/jbuilder]
 gem "jbuilder"
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -443,6 +443,10 @@ GEM
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.4.2)
+    view_component (3.7.0)
+      activesupport (>= 5.2.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -516,6 +520,7 @@ DEPENDENCIES
   traceroute
   turbo-rails
   tzinfo-data
+  view_component
   web-console
 
 RUBY VERSION

diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
@@ -1,11 +1,15 @@
 /**
 * Custom Styling
 * -----------------------------------------------------------------------------
-* [NOTE] Please avoid writing custom css if you can help it! 
+* [NOTE] Please avoid writing custom css if you can help it!
 * Prefer to use the Bootstrap utility classes to override styles or follow
 * the theme.
 * -----------------------------------------------------------------------------
 */
 label.required:after {
   content: " *";
 }
+
+.cursor-pointer {
+  cursor: pointer;
+}
diff --git a/app/components/avatar_component.rb b/app/components/avatar_component.rb
@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+# Use Avatar::Component to represent users with image or initials.
+class AvatarComponent < ViewComponent::Base
+  SIZES = {
+    x_small: "avatar-xs",
+    small: "avatar-sm",
+    medium: "avatar-md",
+    large: "avatar-lg",
+    x_large: "avatar-xl",
+    xx_large: "avatar-xxl"
+  }.freeze
+
+  #
+  # @example 1|Show avatar with initials
+  # <%= component "avatar", alt: "JT" %>
+  #
+  # @example 2|Show avatar with image_tag
+  # <%= component "avatar", src: "avatar_#{@order.subject.gender}.svg",
+  #                         size: :medium) %>
+  #
+  # @example 2|Show avatar with image_tag with default params
+  # <%= component "avatar", src: "avatar_#{@order.subject.gender}.svg"%>
+  #
+  # @param src [String] Specifies the URL of the image.
+  # @param alt[String] Alternate text for an image, if the image cannot be displayed.
+
+  def initialize(alt: "avatar", size: :medium, **system_arguments)
+    @alt = alt
+    @system_arguments = system_arguments
+    @classes = "rounded-circle cursor-pointer avatar #{SIZES.fetch(size)}"
+  end
+
+  def avatar_with_image
+    image_tag @system_arguments[:src], class: @classes, alt: @alt
+  end
+
+  def avatar_with_initials
+    tag.div(tag.span(@alt), class: @classes, style: "background-color: #{avatar_color(@alt)}; display: flex; align-items: center; justify-content: center;")
+  end
+
+  def avatar_color(text)
+    avatar_colors = ["#feb2b2", "#b3e4fc", "#d6bcfa", "#faf089", "#9ae6b4", "#f0e2ba", "#fbb6ce", "#dadada"]
+
+    avatar_colors[text.ord % avatar_colors.length]
+  end
+
+  def call
+    if @system_arguments[:src].present?
+      avatar_with_image
+    else
+      avatar_with_initials
+    end
+  end
+end
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
@@ -27,18 +27,18 @@
 
             <div class="form-group mb-3">
               <%= f.email_field :email, autofocus: true, autocomplete: "email",
-                                 class: 'form-control' %>
+                                class: 'form-control' %>
             </div>
 
             <% if devise_mapping.confirmable? &&
-                  resource.pending_reconfirmation? %>
+              resource.pending_reconfirmation? %>
               <div>Currently waiting confirmation for:
-                   <%= resource.unconfirmed_email %></div>
+                <%= resource.unconfirmed_email %></div>
             <% end %>
 
             <div class="form-group mb-3">
               <%= f.password_field :password, autocomplete: "new-password",
-                                    class: 'form-control', label: 'New password' %>
+                                   class: 'form-control', label: 'New password' %>
               <i>(leave blank if you don't want to change it)</i><br />
               <% if @minimum_password_length %>
                 <em><%= @minimum_password_length %> characters minimum</em>
@@ -47,32 +47,32 @@
 
             <div class="form-group mb-3">
               <%= f.password_field :password_confirmation, autocomplete: "new-password",
-                                    class: 'form-control', label: 'Confirm new password' %>
+                                   class: 'form-control', label: 'Confirm new password' %>
             </div>
 
             <div class="form-group mb-3">
               <%= f.text_field :first_name,
-                                class: 'form-control' %>
+                               class: 'form-control' %>
             </div>
 
             <div class="form-group mb-3">
               <%= f.text_field :last_name,
-                                class: 'form-control' %>
+                               class: 'form-control' %>
             </div>
 
             <div class="form-group mb-3">
               <%= f.password_field :current_password,
-                                  autocomplete: "current-password",
-                                  required: true,
-                                  class: 'form-control' %>
+                                   autocomplete: "current-password",
+                                   required: true,
+                                   class: 'form-control' %>
               <i>(we need your current password to confirm your changes)</i><br />
             </div>
 
             <%= render partial: 'partials/avatarable_form', locals: { resource: resource, form: f } %>
 
             <div class="actions">
               <%= f.submit "Update", class: 'btn btn-outline-dark mt-3 mb-3',
-                                     data: { turbo: false } %>
+                           data: { turbo: false } %>
             </div>
           <% end %>
         </div> <!--col-->
@@ -90,20 +90,15 @@
                  data-delete-target="input" class="form-control mt-2">
 
           <%= button_to "Delete my account", registration_path(resource_name),
-                      class: 'btn custom-btn-pink mt-3 mb-3',
-                      data: { confirm: 'Are you sure?',
-                              turbo: 'false',
-                              delete_target: 'button' },
-                      method: 'delete',
-                      disabled: true %>
+                        class: 'btn custom-btn-pink mt-3 mb-3',
+                        data: { confirm: 'Are you sure?',
+                                turbo: 'false',
+                                delete_target: 'button' },
+                        method: 'delete',
+                        disabled: true %>
         </div>
       </div>
     </div> <!--row-->
 
   </div><!--container-->
 </section>
-
-
-
-
-
diff --git a/app/views/layouts/dashboard.html.erb b/app/views/layouts/dashboard.html.erb
@@ -180,17 +180,11 @@
                 </li>
                 <!-- List -->
                 <li class="dropdown ms-2">
-                  <a class="rounded-circle" href="#" role="button" id="dropdownUser" data-bs-toggle="dropdown" aria-expanded="false">
-                    <div class="avatar avatar-md avatar-indicators avatar-online">
-                      <img alt="avatar" src="" class="rounded-circle">
-                    </div>
-                  </a>
+                  <%= render AvatarComponent.new(alt: current_user.first_name.first.upcase, src: current_user.avatar) %>
                   <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownUser">
                     <div class="dropdown-item">
                       <div class="d-flex">
-                        <div class="avatar avatar-md avatar-indicators avatar-online">
-                          <img alt="avatar" src="" class="rounded-circle">
-                        </div>
+                        <%= render AvatarComponent.new(alt: current_user.first_name.first.upcase, src: current_user.avatar) %>
                         <div class="ms-3 lh-1">
                           <h5 class="mb-1"><%= "#{current_user.first_name} #{current_user.last_name}" %></h5>
                           <p class="mb-0 text-muted"><%= current_user.email %></p>

diff --git a/app/views/layouts/shared/_navbar.html.erb b/app/views/layouts/shared/_navbar.html.erb
@@ -18,13 +18,9 @@
       <% end %>
 
       <li class="dropdown ms-2 list-unstyled">
-        <a class="rounded-circle" href="#" role="button" id="dropdownUser" data-bs-toggle="dropdown" aria-expanded="false">
-          <% if user_signed_in? %>
-            <div class="avatar avatar-md avatar-indicators avatar-online">
-              <%= image_tag "avatar/avatar-1.jpg", class: 'rounded-circle' %>
-            </div>
-          <% end %>
-        </a>
+        <% if user_signed_in? %>
+          <%= render AvatarComponent.new(alt: current_user.first_name.first.upcase, src: current_user.avatar) %>
+        <% end %>
 
         <div class="dropdown-menu dropdown-menu-end pb-0" aria-labelledby="dropdownUser" style='z-index: 1000'>
           <% if user_signed_in? %>

diff --git a/test/system/users_test.rb b/test/system/users_test.rb
@@ -19,7 +19,7 @@ class UsersTest < ApplicationSystemTestCase
     assert_equal current_path, pets_path
 
     using_wait_time(5) do
-      find("#dropdownUser").hover
+      find(".avatar").hover
     end
 
     click_on "Sign Out"