Make the author link prop optional

.changeset/thirty-beans-act.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Allow the author link prop to be optional

src/components/author/author.stories.mdx

@@ -33,6 +33,13 @@ const allAuthors = [
   },
 ];
 const authors = (count) => allAuthors.slice(0, count);
+const authorsWithNoLink = (count) =>
+  allAuthors
+    .map(({ name, avatar }) => ({
+      name,
+      avatar,
+    }))
+    .slice(0, count);
 
 <Meta
   title="Components/Author"
@@ -57,6 +64,20 @@ Displays an author, or set of authors, with optional meta content.
 
 <Canvas>
   <Story name="Basic usage" args={{ count: 1 }}>
+    {(args) =>
+      template({
+        authors: authorsWithNoLink(args.count),
+      })
+    }
+  </Story>
+</Canvas>
+
+## With `link`
+
+If an author object contains the optional `link` property, then the author name will be linked.
+
+<Canvas>
+  <Story name="With link" args={{ count: 1 }}>
     {(args) =>
       template({
         authors: authors(args.count),
@@ -124,7 +145,7 @@ Multiple authors are also supported.
  {
    name: string | () => string;
    avatar: string | () => string;
-   link: string | () => string;
+   link?: string | () => string;
  }
 ```
 

src/components/author/author.test.ts

@@ -65,3 +65,29 @@ test(
     `);
   })
 );
+
+test(
+  'Optional author link prop',
+  withBrowser(async ({ utils, page }) => {
+    await utils.injectHTML(
+      await template({
+        // The avatar is not included because I couldn't figure out how
+        // to include it. For the purposes of this test, though, it is
+        // not important so I left it out.
+        authors: [
+          {
+            name: 'Shakira Isabel Mebarak Ripoll',
+          },
+        ],
+      })
+    );
+
+    const body = await page.evaluateHandle<ElementHandle>(() => document.body);
+
+    // Confirm the author name is "text" and not a link
+    expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+      text "By"
+      text "Shakira Isabel Mebarak Ripoll"
+    `);
+  })
+);

src/components/author/author.twig

@@ -57,7 +57,11 @@
       <span class="u-hidden-visually">{{ author_prefix|default("By") }}</span>
       {% for author in authors %}
         {% if loop.last and loop.length > 1 %}and {% endif %}
-        <a href="{{ author.link }}">{{ author.name }}</a>
+          {% if author.link %}
+            <a href="{{ author.link }}">{{ author.name }}</a>
+          {% else %}
+            <span>{{ author.name }}</span>
+          {% endif %}
         {%- if not loop.last and loop.length > 2 %},{% endif %}
       {% endfor %}
     </p>