Support icon in avatar component (#429)

* feat: support icon in avatar component * feat: add lookbook preview for icon
baoagency · Jul 9, 2024 · 0a345e7 · 0a345e7
1 parent 8a6eef5
commit 0a345e7
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/app/components/polaris/avatar_component.html.erb b/app/components/polaris/avatar_component.html.erb
@@ -9,6 +9,8 @@
             <%= @initials %>
           </text>
         </svg>
+      <% elsif @icon %>
+        <%= polaris_icon(name: @icon) %>
       <% else %>
         <svg class="Polaris-Avatar__Svg" viewBox="0 0 40 40">
           <path fill="currentColor" d="M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9zM13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"></path>

diff --git a/app/components/polaris/avatar_component.rb b/app/components/polaris/avatar_component.rb
@@ -27,6 +27,7 @@ def initialize(
       size: SIZE_DEFAULT,
       shape: SHAPE_DEFAULT,
       source: nil,
+      icon: nil,
       **system_arguments
     )
       @customer = customer
@@ -35,6 +36,7 @@ def initialize(
       @size = size
       @shape = shape
       @source = source
+      @icon = icon
       @system_arguments = system_arguments
     end
 

diff --git a/demo/app/previews/avatar_component_preview.rb b/demo/app/previews/avatar_component_preview.rb
@@ -77,4 +77,13 @@ def image(source: "https://www.redditstatic.com/desktop2x/img/favicon/apple-icon
       }
     )
   end
+
+  # @param icon text "name of Polaris icon"
+  def icon(icon: "StoreIcon")
+    render_with_template(
+      locals: {
+        icon: icon
+      }
+    )
+  end
 end
diff --git a/demo/app/previews/avatar_component_preview/icon.html.erb b/demo/app/previews/avatar_component_preview/icon.html.erb
@@ -0,0 +1 @@
+<%= polaris_avatar(icon: icon) %>