Author avatar prop can be an object

.changeset/beige-books-battle.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Avatar values passed to the Author component may now be an object, which will be passed directly to the Avatar component. This allows additional properties like `srcset`, `sizes`, etc. to be set.

src/components/author/author.stories.mdx

@@ -13,7 +13,7 @@ const allAuthors = [
   },
   {
     name: 'Danielle Romo',
-    avatar: danielleImage,
+    avatar: { src: danielleImage, width: 64 },
     link: 'https://cloudfour.com/is/danielle',
   },
   {
@@ -139,15 +139,11 @@ Multiple authors are also supported.
 
 `class` (string): CSS class(es) to append to the root element
 
-`authors` (array): Array of [author objects](https://timber.github.io/docs/reference/timber-user/#properties) of the type:
+`authors` (array): Array of [author objects](https://timber.github.io/docs/reference/timber-user/#properties), each containing:
 
-```ts
- {
-   name: string | () => string;
-   avatar: string | () => string;
-   link?: string | () => string;
- }
-```
+- `name` (string): The author's name.
+- `avatar` (string or object): If this is an object containing a `src`, this will be passed directly to [the Avatar component](/?path=/docs/components-avatar--empty) (along with any other properties, for example `srcset` or `sizes`). Otherwise, it is assumed to be a string and used as the Avatar's `src` property.
+- `link` (optional, string): An `href` for the author's name to link to, for example a bio page.
 
 `author_prefix` (optional, string, default "By"): Used to create a more
 accessible user experience by adding visually hidden text, prefixes the author name (e.g. "By Arianna Chau")

src/components/author/author.twig

@@ -45,7 +45,11 @@
   {% embed '@cloudfour/objects/bunch/bunch.twig' with { class: 'o-media__object' } %}
     {% block content %}
       {% for author in authors %}
-        {% include '@cloudfour/components/avatar/avatar.twig' with { src: author.avatar } only %}
+        {% if author.avatar.src is defined %}
+          {% include '@cloudfour/components/avatar/avatar.twig' with author.avatar only %}
+        {% else %}
+          {% include '@cloudfour/components/avatar/avatar.twig' with { src: author.avatar } only %}
+        {% endif %}
       {% endfor %}
     {% endblock %}
   {% endembed %}