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 #}

{% 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 }}