diff --git a/.changeset/eighty-berries-knock.md b/.changeset/eighty-berries-knock.md
new file mode 100644
index 000000000..1710b1c4a
--- /dev/null
+++ b/.changeset/eighty-berries-knock.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add Short Date Format and Unlinking to Author
diff --git a/src/components/author/author.stories.mdx b/src/components/author/author.stories.mdx
index a19cac88f..7d47cd79d 100644
--- a/src/components/author/author.stories.mdx
+++ b/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.
+
{(args) =>
template({
authors: authors(args.count),
+ unlink: false,
+ })
+ }
+
+
+ {(args) =>
+ template({
+ authors: authors(args.count),
+ unlink: true,
})
}
@@ -107,6 +118,9 @@ 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.
@@ -114,7 +128,16 @@ accessible user experience.
{(args) =>
template({
authors: authors(args.count),
- date: new Date('March 31, 2021'),
+ date: new Date('September 29, 2021'),
+ })
+ }
+
+
+ {(args) =>
+ template({
+ authors: authors(args.count),
+ date: new Date('September 29, 2021'),
+ date_format: 'short',
})
}
@@ -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.
diff --git a/src/components/author/author.test.ts b/src/components/author/author.test.ts
index 594e539f0..54a26fe56 100644
--- a/src/components/author/author.test.ts
+++ b/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(() => document.body);
+
+ // Confirm the author name is "text" and not a link
+ expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(`
+ text "By"
+ text "Shakira Isabel Mebarak Ripoll"
+ `);
+ })
+);
diff --git a/src/components/author/author.twig b/src/components/author/author.twig
index 66a6bb227..5dac4f757 100644
--- a/src/components/author/author.twig
+++ b/src/components/author/author.twig
@@ -33,7 +33,7 @@
@see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
#}
- {{ date|date('F jS, Y') }}
+ {{ date_format == 'short' ? date|date('M j, Y') : date|date('F jS, Y') }}
{% 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 %}
{{ author.name }}
{% else %}
{{ author.name }}