From a7e9f9031f2ce593ab7250dd5b05c0e54b9a6c43 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 10:35:49 -0700 Subject: [PATCH 01/10] Add Short Date Format and Unlinking to Author This PR adds two new features to the Author component. First, it adds the `unlink` property, which will prevent a link from being rendered even if one is provided as part of the Author object. This is useful for situations where removing the link property from the Author is a hassle. Second, it adds a `date_format` property, which can be set to `short` to use abbreviate date formatting. --- src/components/author/author.stories.mdx | 29 ++++++++++++- src/components/author/author.test.ts | 55 ++++++++++++++++++++++++ src/components/author/author.twig | 9 ++-- 3 files changed, 89 insertions(+), 4 deletions(-) diff --git a/src/components/author/author.stories.mdx b/src/components/author/author.stories.mdx index a19cac88f..37d5005db 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. (This is useful for when it's not convenient to modify the author data.) + {(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. + **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. + `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..7117343ca 100644 --- a/src/components/author/author.test.ts +++ b/src/components/author/author.test.ts @@ -35,6 +35,33 @@ test( }) ); +test( + 'Short date formatting', + 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', + }, + ], + date: new Date('March 31, 2021'), + date_format: 'short', + }) + ); + + const body = await page.evaluateHandle(() => document.body); + expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(` + text "By" + text "Shakira Isabel Mebarak Ripoll" + text "Published on Mar 31, 2021" + `); + }) +); + test( 'meta is prioritized over date', withBrowser(async ({ utils, page }) => { @@ -91,3 +118,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..b0cb33924 100644 --- a/src/components/author/author.twig +++ b/src/components/author/author.twig @@ -10,10 +10,13 @@ {% if meta %}

{{ meta }}

{% elseif date %} + {% set _formatted_date = + date_format == 'short' ? date|date('M j, Y') : date|date('F jS, Y') + %}

{# This creates a more accessible, and less confusing, user experience #} - {{ date_prefix|default('Published on') }} {{ date|date('F jS, Y') }} + {{ date_prefix|default('Published on') }} {{ _formatted_date }} {# The

{% endif %} @@ -67,7 +70,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 }} From b046bb29524451ec435e2409156a896beabeb455 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 10:41:23 -0700 Subject: [PATCH 02/10] Create eighty-berries-knock.md --- .changeset/eighty-berries-knock.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eighty-berries-knock.md diff --git a/.changeset/eighty-berries-knock.md b/.changeset/eighty-berries-knock.md new file mode 100644 index 000000000..3138d8105 --- /dev/null +++ b/.changeset/eighty-berries-knock.md @@ -0,0 +1,5 @@ +--- +"@cloudfour/patterns": minor +--- + +Add Short Date Format and Unlinking to Author From 19c5b15f1e376cd16f71a6082381dc032130a02b Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 10:43:52 -0700 Subject: [PATCH 03/10] no need to abbreviate the screen reader date formatting --- src/components/author/author.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/author/author.twig b/src/components/author/author.twig index b0cb33924..cc63bfcee 100644 --- a/src/components/author/author.twig +++ b/src/components/author/author.twig @@ -16,7 +16,7 @@

{# This creates a more accessible, and less confusing, user experience #} - {{ date_prefix|default('Published on') }} {{ _formatted_date }} + {{ date_prefix|default('Published on') }} {{ date|date('F jS, Y') }} {# The

{{ meta }}

{% elseif date %} - {% set _formatted_date = - date_format == 'short' ? date|date('M j, Y') : date|date('F jS, Y') - %}

{# This creates a more accessible, and less confusing, user experience #} @@ -36,7 +33,7 @@ @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time #}

{% endif %} From 5f062e91fd014dca37229dbefcd77761d001e07e Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 11:04:24 -0700 Subject: [PATCH 05/10] fix tests --- src/components/author/author.test.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/author/author.test.ts b/src/components/author/author.test.ts index 7117343ca..c020ba274 100644 --- a/src/components/author/author.test.ts +++ b/src/components/author/author.test.ts @@ -37,7 +37,7 @@ test( test( 'Short date formatting', - withBrowser(async ({ utils, page }) => { + withBrowser(async ({ utils, screen }) => { await utils.injectHTML( await template({ // The avatar is not included because I couldn't figure out how @@ -53,12 +53,8 @@ test( }) ); - const body = await page.evaluateHandle(() => document.body); - expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(` - text "By" - text "Shakira Isabel Mebarak Ripoll" - text "Published on Mar 31, 2021" - `); + const visibleDateText = await screen.getByText('Mar 31, 2021'); + await expect(visibleDateText).toHaveAttribute('aria-hidden', 'true'); }) ); From a96a55ea0cc335f7d4c44b2651874529d6fe71d3 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 11:05:02 -0700 Subject: [PATCH 06/10] lint fix --- .changeset/eighty-berries-knock.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/eighty-berries-knock.md b/.changeset/eighty-berries-knock.md index 3138d8105..1710b1c4a 100644 --- a/.changeset/eighty-berries-knock.md +++ b/.changeset/eighty-berries-knock.md @@ -1,5 +1,5 @@ --- -"@cloudfour/patterns": minor +'@cloudfour/patterns': minor --- Add Short Date Format and Unlinking to Author From ec12929bd6b680e73c073cbd8337171796f592a1 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 11:10:42 -0700 Subject: [PATCH 07/10] Update src/components/author/author.stories.mdx Co-authored-by: Paul Hebert --- src/components/author/author.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/author/author.stories.mdx b/src/components/author/author.stories.mdx index 37d5005db..f55fe60b2 100644 --- a/src/components/author/author.stories.mdx +++ b/src/components/author/author.stories.mdx @@ -175,7 +175,7 @@ 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. +`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") From 51360abe509410a7715aa6e9e2fbe10a574131c3 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 11:11:02 -0700 Subject: [PATCH 08/10] Update src/components/author/author.test.ts Co-authored-by: Paul Hebert --- src/components/author/author.test.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/author/author.test.ts b/src/components/author/author.test.ts index c020ba274..54a26fe56 100644 --- a/src/components/author/author.test.ts +++ b/src/components/author/author.test.ts @@ -53,6 +53,8 @@ test( }) ); + // 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'); }) From 771be386a55086fdf1916a5e0b248165a8c543d9 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 11:11:21 -0700 Subject: [PATCH 09/10] Update src/components/author/author.stories.mdx Co-authored-by: Paul Hebert --- src/components/author/author.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/author/author.stories.mdx b/src/components/author/author.stories.mdx index f55fe60b2..35df444a3 100644 --- a/src/components/author/author.stories.mdx +++ b/src/components/author/author.stories.mdx @@ -119,7 +119,7 @@ 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. +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. From 3810da8f74760be1ea7b9abc9a979b1941ec77b7 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 14 Apr 2022 11:11:47 -0700 Subject: [PATCH 10/10] Update src/components/author/author.stories.mdx Co-authored-by: Paul Hebert --- src/components/author/author.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/author/author.stories.mdx b/src/components/author/author.stories.mdx index 35df444a3..7d47cd79d 100644 --- a/src/components/author/author.stories.mdx +++ b/src/components/author/author.stories.mdx @@ -76,7 +76,7 @@ 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. (This is useful for when it's not convenient to modify the author data.) +If you don't want a link, you can use the `unlink` property to remove it.