From 66be1e6c81240d1bf88817a19c6973255c3daa18 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 6 Apr 2022 15:29:28 -0700 Subject: [PATCH 1/7] Make the author link prop optional --- src/components/author/author.stories.mdx | 21 +++++++++++++++++++++ src/components/author/author.twig | 6 +++++- 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/components/author/author.stories.mdx b/src/components/author/author.stories.mdx index 8a5843ef4..31609569f 100644 --- a/src/components/author/author.stories.mdx +++ b/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); +## With no `link` + +If an author object does not contain a `link` property, then the author name does not use an anchor element. + + + + {(args) => + template({ + authors: authorsWithNoLink(args.count), + }) + } + + + ## With `meta` content You can use the `meta` property to add meta content, for example, the author title. diff --git a/src/components/author/author.twig b/src/components/author/author.twig index c605d24bb..2eff45c27 100644 --- a/src/components/author/author.twig +++ b/src/components/author/author.twig @@ -57,7 +57,11 @@ {{ author_prefix|default("By") }} {% for author in authors %} {% if loop.last and loop.length > 1 %}and {% endif %} - {{ author.name }} + {% if author.link %} + {{ author.name }} + {% else %} + {{ author.name }} + {% endif %} {%- if not loop.last and loop.length > 2 %},{% endif %} {% endfor %}

From b721965abd1b0ad34f6a5e47f3b8b31f980436e2 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 6 Apr 2022 15:35:07 -0700 Subject: [PATCH 2/7] Add optional into the author docs --- 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 31609569f..f4154c20c 100644 --- a/src/components/author/author.stories.mdx +++ b/src/components/author/author.stories.mdx @@ -145,7 +145,7 @@ Multiple authors are also supported. { name: string | () => string; avatar: string | () => string; - link: string | () => string; + link?: string | () => string; } ``` From 8c1d4e00a99bb73400a1f3159edb0e272bdc126c Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 6 Apr 2022 15:37:40 -0700 Subject: [PATCH 3/7] Add a changeset --- .changeset/thirty-beans-act.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thirty-beans-act.md diff --git a/.changeset/thirty-beans-act.md b/.changeset/thirty-beans-act.md new file mode 100644 index 000000000..4f930cde5 --- /dev/null +++ b/.changeset/thirty-beans-act.md @@ -0,0 +1,5 @@ +--- +'@cloudfour/patterns': minor +--- + +Allow the author link prop to be optional From 995afcf9aa8349127ae090d73d4e9a077b9a2d75 Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 6 Apr 2022 15:42:46 -0700 Subject: [PATCH 4/7] Add a test --- src/components/author/author.test.ts | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/components/author/author.test.ts b/src/components/author/author.test.ts index 4d6e89e12..1ae08de15 100644 --- a/src/components/author/author.test.ts +++ b/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(() => document.body); + + // Confirm the meta value is rendered and the date is not rendered + expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(` + text "By" + text "Shakira Isabel Mebarak Ripoll" + `); + }) +); From 8b6e30740f26602a50d53750e07ccd1bbd060f3f Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 6 Apr 2022 15:43:41 -0700 Subject: [PATCH 5/7] Update comment --- src/components/author/author.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/author/author.test.ts b/src/components/author/author.test.ts index 1ae08de15..a978236d1 100644 --- a/src/components/author/author.test.ts +++ b/src/components/author/author.test.ts @@ -84,7 +84,7 @@ test( const body = await page.evaluateHandle(() => document.body); - // Confirm the meta value is rendered and the date is not rendered + // Confirm the author name is "text" and not link expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(` text "By" text "Shakira Isabel Mebarak Ripoll" From 50c40f3f0f58ad7072a4cbca789d162057e57a6a Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Wed, 6 Apr 2022 15:44:40 -0700 Subject: [PATCH 6/7] Typo --- src/components/author/author.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/author/author.test.ts b/src/components/author/author.test.ts index a978236d1..594e539f0 100644 --- a/src/components/author/author.test.ts +++ b/src/components/author/author.test.ts @@ -84,7 +84,7 @@ test( const body = await page.evaluateHandle(() => document.body); - // Confirm the author name is "text" and not link + // Confirm the author name is "text" and not a link expect(await getAccessibilityTree(body)).toMatchInlineSnapshot(` text "By" text "Shakira Isabel Mebarak Ripoll" From bb5871a7c3beeeb0769ab85dee581d4c97c0625b Mon Sep 17 00:00:00 2001 From: Gerardo Rodriguez Date: Thu, 7 Apr 2022 10:47:23 -0700 Subject: [PATCH 7/7] PR feedback, start with no link as default example --- src/components/author/author.stories.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/author/author.stories.mdx b/src/components/author/author.stories.mdx index f4154c20c..d04e96db8 100644 --- a/src/components/author/author.stories.mdx +++ b/src/components/author/author.stories.mdx @@ -66,21 +66,21 @@ Displays an author, or set of authors, with optional meta content. {(args) => template({ - authors: authors(args.count), + authors: authorsWithNoLink(args.count), }) } -## With no `link` +## With `link` -If an author object does not contain a `link` property, then the author name does not use an anchor element. +If an author object contains the optional `link` property, then the author name will be linked. - + {(args) => template({ - authors: authorsWithNoLink(args.count), + authors: authors(args.count), }) }