Make the Author story code example better/update component (#1300)

Author: gerardo-rodriguez

.changeset/serious-clocks-visit.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Remove function calls for properties in Author component

src/components/author/author.stories.mdx

@@ -4,19 +4,19 @@ import gerardoImage from './demo/gerardo.png';
 import tylerImage from './demo/tyler.png';
 import meganImage from './demo/megan.png';
 const gerardo = {
-  name: () => 'Gerardo Rodriguez',
-  avatar: () => gerardoImage,
-  link: () => 'https://cloudfour.com/is/gerardo',
+  name: 'Gerardo Rodriguez',
+  avatar: gerardoImage,
+  link: 'https://cloudfour.com/is/gerardo',
 };
 const tyler = {
-  name: () => 'Tyler Sticka',
-  avatar: () => tylerImage,
-  link: () => 'https://cloudfour.com/is/tyler',
+  name: 'Tyler Sticka',
+  avatar: tylerImage,
+  link: 'https://cloudfour.com/is/tyler',
 };
 const megan = {
-  name: () => 'Megan Notarte',
-  avatar: () => meganImage,
-  link: () => 'https://cloudfour.com/is/megnotarte',
+  name: 'Megan Notarte',
+  avatar: meganImage,
+  link: 'https://cloudfour.com/is/megnotarte',
 };
 
 <Meta
@@ -41,7 +41,7 @@ const megan = {
 Displays an author, or set of authors, for article bylines.
 
 <Canvas>
-  <Story name="Default" args={{}}>
+  <Story name="Default">
     {(args) =>
       template({
         authors: [gerardo, tyler, megan].slice(0, args.count),
@@ -58,9 +58,9 @@ Displays an author, or set of authors, for article bylines.
 
   ```ts
   {
-    name: () => string;
-    avatar: () => string;
-    link: () => string;
+    name: string | () => string;
+    avatar: string | () => string;
+    link: string | () => string;
   }
   ```
 

src/components/author/author.twig

@@ -2,7 +2,7 @@
   {% 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 %}
+        {% include '@cloudfour/components/avatar/avatar.twig' with { src: author.avatar } only %}
       {% endfor %}
     {% endblock %}
   {% endembed %}
@@ -11,7 +11,7 @@
       <span class="u-hidden-visually">Authored by</span>
       {% for author in authors %}
         {% if loop.last and loop.length > 1 %}and {% endif %}
-        <a href="{{ author.link() }}">{{ author.name() }}</a>
+        <a href="{{ author.link }}">{{ author.name }}</a>
         {%- if not loop.last and loop.length > 2 %},{% endif %}
       {% endfor %}
     </div>