From 60354a525d0ec386bbc64581769123a93e8615b0 Mon Sep 17 00:00:00 2001
From: Tyler Sticka <tyler@cloudfour.com>
Date: Thu, 7 Apr 2022 14:43:51 -0700
Subject: [PATCH] Author avatar prop can be an object

---
 .changeset/beige-books-battle.md         |  5 +++++
 src/components/author/author.stories.mdx | 14 +++++---------
 src/components/author/author.twig        |  6 +++++-
 3 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/beige-books-battle.md

diff --git a/.changeset/beige-books-battle.md b/.changeset/beige-books-battle.md
new file mode 100644
index 000000000..a60902aec
--- /dev/null
+++ b/.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.
diff --git a/src/components/author/author.stories.mdx b/src/components/author/author.stories.mdx
index d04e96db8..737ced807 100644
--- a/src/components/author/author.stories.mdx
+++ b/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")
diff --git a/src/components/author/author.twig b/src/components/author/author.twig
index 2eff45c27..17090876e 100644
--- a/src/components/author/author.twig
+++ b/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 %}