+ {(args) =>
+ template({
+ authors: authors(args.count),
date: new Date('March 31, 2021'),
})
}
@@ -55,15 +116,24 @@ Displays an author, or set of authors, for article bylines.
## Template Properties
-- `class`: Append a class to the root element.
-- `authors`: Array of [author objects](https://timber.github.io/docs/reference/timber-user/#properties) of the type:
+`class` (string): CSS class(es) to append to the root element
- ```ts
- {
- name: string | () => string;
- avatar: string | () => string;
- link: string | () => string;
- }
- ```
+`authors` (array): Array of [author objects](https://timber.github.io/docs/reference/timber-user/#properties) of the type:
+
+```ts
+ {
+ name: string | () => string;
+ avatar: string | () => string;
+ link: string | () => string;
+ }
+```
+
+`author_prefix` (optional, string, default "By"): Used to create a more
+accessible user experience by adding visually hidden text, prefixes the author name (e.g. "By Arianna Chau")
+
+`meta` (optional, string): Extra information to be rendered below the author name(s)
+
+`date` (optional, date object): Represents a publication date
-- `date`: A date object representing the publication date
+`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")
diff --git a/src/components/author/author.test.ts b/src/components/author/author.test.ts
new file mode 100644
index 000000000..6c1908cdf
--- /dev/null
+++ b/src/components/author/author.test.ts
@@ -0,0 +1,62 @@
+import path from 'path';
+import { withBrowser } from 'pleasantest';
+import { loadTwigTemplate } from '../../../test-utils';
+
+/** Helper to load the Twig template file */
+const template = loadTwigTemplate(path.join(__dirname, './author.twig'));
+
+describe('Author', () => {
+ test(
+ 'more accessible experience for publish date',
+ 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',
+ link: 'https://www.shakira.com/',
+ },
+ ],
+ date: new Date('March 31, 2021'),
+ date_prefix: 'Presented on',
+ })
+ );
+
+ // Confirm a more accessible user experience
+ await screen.getByText('Presented on March 31st, 2021');
+ })
+ );
+
+ test(
+ 'meta is prioritized over date',
+ 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',
+ link: 'https://www.shakira.com/',
+ },
+ ],
+ date: new Date('March 31, 2021'),
+ meta: 'Singer and songwriter',
+ })
+ );
+
+ // Confirm the meta value is rendered
+ await screen.getByText('Singer and songwriter');
+
+ // Confirm the date is not rendered
+ const publishDate = await screen.queryByText(
+ 'Published on March 31st, 2021'
+ );
+ expect(publishDate).toBeNull();
+ })
+ );
+});
diff --git a/src/components/author/author.twig b/src/components/author/author.twig
index a037489c4..c605d24bb 100644
--- a/src/components/author/author.twig
+++ b/src/components/author/author.twig
@@ -1,4 +1,47 @@
+{#
+ If both the `meta` and `date` properties contain values, the `meta` value has
+ a higher priority and will override the `date` value.
+
+ If rendering a date as meta data, it is recommended to use the `date` property.
+ There is extra template logic to create a more accessible user experience.
+#}
+{% set _meta_content %}
+ {% block meta_content %}
+ {% if meta %}
+ {{ meta }}
+ {% elseif date %}
+
+ {# This creates a more accessible, and less confusing, user experience #}
+
+ {{ date_prefix|default('Published on') }} {{ date|date('F jS, Y') }}
+
+ {#
+ The
+ {% endif %}
+ {% endblock %}
+{% endset %}
+