Add Short Date Format and Unlinking to Author

.changeset/eighty-berries-knock.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Short Date Format and Unlinking to Author

src/components/author/author.stories.mdx

@@ -76,11 +76,22 @@ Displays an author, or set of authors, with optional meta content.
 
 If an author object contains the optional `link` property, then the author name will be linked.
 
+If you don't want a link, you can use the `unlink` property to remove it.
+
 <Canvas>
   <Story name="With link" args={{ count: 1 }}>
     {(args) =>
       template({
         authors: authors(args.count),
+        unlink: false,
+      })
+    }
+  </Story>
+  <Story name="Remove link" args={{ count: 1 }}>
+    {(args) =>
+      template({
+        authors: authors(args.count),
+        unlink: true,
       })
     }
   </Story>
@@ -107,14 +118,26 @@ If a date is desired for the meta content, use the `date` property with a
 date object value. The Author template has extra logic to create a more
 accessible user experience.
 
+If used in a space-constrained area, you may set the `date_format` property
+to "short" to display an abbreviated version. (e.g. `Mar 31, 2021` instead of `March 31st, 2021`)
+
 **Note:** The `meta` property will override the `date` if both are set.
 
 <Canvas>
   <Story name="With date content" args={{ count: 1 }}>
     {(args) =>
       template({
         authors: authors(args.count),
-        date: new Date('March 31, 2021'),
+        date: new Date('September 29, 2021'),
+      })
+    }
+  </Story>
+  <Story name="Short date format" args={{ count: 1 }}>
+    {(args) =>
+      template({
+        authors: authors(args.count),
+        date: new Date('September 29, 2021'),
+        date_format: 'short',
       })
     }
   </Story>
@@ -152,9 +175,13 @@ accessible user experience by adding visually hidden text, prefixes the author n
 
 `date` (optional, date object): Represents a publication date
 
+`date_format` (optional, string): Set to `short` to use abbreviated date formatting. (e.g. `Mar 31, 2021` instead of `March 31st, 2021`)
+
 `date_prefix` (optional, string, default "Published on"): Used to create a more
 accessible user experience by adding visually hidden text, prefixes the date value (e.g. "Published on March 31st, 2021")
 
+`unlink` (optional, boolean): Used to remove the link from an author that contains a `link` property.
+
 ## Template Blocks
 
 - `authors`: The author links to display.

src/components/author/author.test.ts

@@ -35,6 +35,31 @@ test(
   })
 );
 
+test(
+  'Short date formatting',
+  withBrowser(async ({ utils, screen }) => {
+    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',
+          },
+        ],
+        date: new Date('March 31, 2021'),
+        date_format: 'short',
+      })
+    );
+
+    // The short date formatting applies to the visible date text
+    // (not our visually hidden screen reader text)
+    const visibleDateText = await screen.getByText('Mar 31, 2021');
+    await expect(visibleDateText).toHaveAttribute('aria-hidden', 'true');
+  })
+);
+
 test(
   'meta is prioritized over date',
   withBrowser(async ({ utils, page }) => {
@@ -91,3 +116,31 @@ test(
     `);
   })
 );
+
+test(
+  'Can remove 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',
+            link: 'https://www.shakira.com/',
+          },
+        ],
+        unlink: true,
+      })
+    );
+
+    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

@@ -33,7 +33,7 @@
           @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
         #}
         <time aria-hidden="true" datetime="{{ date|date('Y-m-d') }}">
-          {{ date|date('F jS, Y') }}
+          {{ date_format == 'short' ? date|date('M j, Y') : date|date('F jS, Y') }}
         </time>
       </p>
     {% endif %}
@@ -67,7 +67,7 @@
       {% block authors %}
         {% for author in authors %}
           {% if loop.last and loop.length > 1 %}and {% endif %}
-            {% if author.link %}
+            {% if author.link and not unlink %}
               <a href="{{ author.link }}">{{ author.name }}</a>
             {% else %}
               <span>{{ author.name }}</span>