add dynamic params to AvatarComponent

Author: k0va1

app/assets/javascripts/polaris_view_components.js

@@ -2299,8 +2299,8 @@ function popperGenerator(generatorOptions) {
       }
     }));
     function runModifierEffects() {
-      state.orderedModifiers.forEach((function(_ref3) {
-        var name = _ref3.name, _ref3$options = _ref3.options, options = _ref3$options === void 0 ? {} : _ref3$options, effect = _ref3.effect;
+      state.orderedModifiers.forEach((function(_ref) {
+        var name = _ref.name, _ref$options = _ref.options, options = _ref$options === void 0 ? {} : _ref$options, effect = _ref.effect;
         if (typeof effect === "function") {
           var cleanupFn = effect({
             state: state,

app/components/polaris/avatar_component.html.erb

@@ -1,6 +1,6 @@
 <%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <% if @source %>
-    <%= image_tag @source, class: "Polaris-Avatar__Image", role: "presentation" %>
+    <img src="<%= @source %>" class="Polaris-Avatar__Image" role="presentation" onerror="this.src=''" />
   <% else %>
     <span class="Polaris-Avatar__Initials">
       <% if @initials %>

demo/app/previews/avatar_component_preview.rb

@@ -1,16 +1,77 @@
 class AvatarComponentPreview < ViewComponent::Preview
-  def default
+  # Avatar Component
+  # ------------
+  # Avatars are used to show a thumbnail representation of an individual or business in the interface.
+  #
+  # @param customer toggle "Whether the avatar is for a customer"
+  # @param name text "The name of the person"
+  # @param size select "Size of avatar" {{Polaris::AvatarComponent::SIZE_MAPPINGS.keys}}
+  def default(customer: true, name: "Farrah", size: :medium)
+    render_with_template(
+      locals: {
+        customer: customer,
+        name: name,
+        size: size
+      }
+    )
   end
 
-  def extra_small
+  # @param customer toggle "Whether the avatar is for a customer"
+  # @param name text "The name of the person"
+  # @param size select "Size of avatar" {{Polaris::AvatarComponent::SIZE_MAPPINGS.keys}}
+  def extra_small(customer: true, name: "Farrah", size: :extra_small)
+    render_with_template(
+      locals: {
+        customer: customer,
+        name: name,
+        size: size
+      }
+    )
   end
 
-  def square
+  # @param customer toggle "Whether the avatar is for a customer"
+  # @param name text "The name of the person"
+  # @param size select "Size of avatar" {{Polaris::AvatarComponent::SIZE_MAPPINGS.keys}}
+  # @param shape select "Shape of avatar" {{Polaris::AvatarComponent::SHAPE_MAPPINGS.keys}}
+  def square(customer: true, name: "Farrah", size: :medium, shape: :square)
+    render_with_template(
+      locals: {
+        customer: customer,
+        name: name,
+        size: size,
+        shape: shape
+      }
+    )
   end
 
-  def initials
+  # @param initials text "Initials of person to display"
+  # @param size select "Size of avatar" {{Polaris::AvatarComponent::SIZE_MAPPINGS.keys}}
+  def initials(initials: "AK", size: :medium)
+    render_with_template(
+      locals: {
+        initials: initials,
+        size: size
+      }
+    )
   end
 
-  def image
+  # @param size select "Size of avatar" {{Polaris::AvatarComponent::SIZE_MAPPINGS.keys}}
+  # @param shape select "Shape of avatar" {{Polaris::AvatarComponent::SHAPE_MAPPINGS.keys}}
+  # @param source url "URL of the avatar image which falls back to default if blank"
+  # @param initials text "Initials of person to display"
+  def image(
+    size: :medium,
+    shape: :round,
+    source: "https://www.redditstatic.com/desktop2x/img/favicon/apple-icon-180x180.png",
+    initials: "AK"
+  )
+    render_with_template(
+      locals: {
+        size: size,
+        shape: shape,
+        source: source,
+        initials: initials
+      }
+    )
   end
 end

demo/app/previews/avatar_component_preview/default.html.erb

@@ -1 +1 @@
-<%= polaris_avatar(customer: true, name: "Farrah") %>
+<%= polaris_avatar(customer: customer, name: name) %>

demo/app/previews/avatar_component_preview/extra_small.html.erb

@@ -1 +1 @@
-<%= polaris_avatar(customer: true, size: :extra_small, name: "Farrah") %>
+<%= polaris_avatar(customer: customer, size: size, name: name) %>

demo/app/previews/avatar_component_preview/image.html.erb

@@ -1,3 +1 @@
-<%= polaris_avatar(
-  source: "https://www.redditstatic.com/desktop2x/img/favicon/apple-icon-180x180.png",
-) %>
+<%= polaris_avatar(source: source) %>

demo/app/previews/avatar_component_preview/initials.html.erb

@@ -1 +1 @@
-<%= polaris_avatar(initials: "KP", size: :small) %>
+<%= polaris_avatar(initials: initials, size: size) %>

demo/app/previews/avatar_component_preview/square.html.erb

@@ -1 +1 @@
-<%= polaris_avatar(name: "Shop One", shape: :square) %>
+<%= polaris_avatar(name: name, shape: shape) %>