Allow some customization in AnnotationTimestamps edited text

src/components/AnnotationTimestamps.tsx

@@ -4,14 +4,29 @@ import {
   formatRelativeDate,
   formatDateTime,
 } from '@hypothesis/frontend-shared';
+import classnames from 'classnames';
 import { useEffect, useMemo, useState } from 'preact/hooks';
 
+/**
+ * `subtle`: Small text with inherited font weight.
+ * `prominent`: Bold text with inherited font size.
+ */
+export type EditedTimestampVariant = 'subtle' | 'prominent';
+
 export type AnnotationTimestampsProps = {
   annotationCreated: string;
   annotationUpdated: string;
   annotationURL?: string;
-  /** Display a relative last-updated timestamp */
-  withEditedTimestamp?: boolean;
+
+  /**
+   * Whether a relative last-updated timestamp should be displayed or not.
+   * - `false`: do not display edited timestamp
+   * - `true`: display using default variant, `subtle`
+   * - {variant_name}: display using specified variant
+   *
+   * Defaults to `false`.
+   */
+  withEditedTimestamp?: boolean | EditedTimestampVariant;
 };
 
 /**
@@ -72,13 +87,19 @@ export default function AnnotationTimestamps({
     updated && updated.relative !== created.relative
       ? `edited ${updated.relative}`
       : 'edited';
+  const editedTimestampVariant: EditedTimestampVariant =
+    typeof withEditedTimestamp === 'string' ? withEditedTimestamp : 'subtle';
 
   return (
     <div>
       {withEditedTimestamp && (
         <span
-          className="text-color-text-light text-xs italic"
+          className={classnames('text-color-text-light italic', {
+            'text-xs': editedTimestampVariant === 'subtle',
+            'font-bold': editedTimestampVariant === 'prominent',
+          })}
           data-testid="timestamp-edited"
+          data-variant={editedTimestampVariant}
           title={updated.absolute}
         >
           ({editedString}){' '}

src/components/test/AnnotationTimestamps-test.js

@@ -70,6 +70,23 @@ describe('AnnotationTimestamps', () => {
     assert.include(editedTimestamp.text(), '(edited another fuzzy string)');
   });
 
+  [
+    { withEditedTimestamp: true, expectedVariant: 'subtle' },
+    { withEditedTimestamp: 'subtle', expectedVariant: 'subtle' },
+    { withEditedTimestamp: 'prominent', expectedVariant: 'prominent' },
+  ].forEach(({ withEditedTimestamp, expectedVariant }) => {
+    it('renders edited timestamp with expected variant', () => {
+      fakeFormatRelativeDate.onCall(1).returns('another fuzzy string');
+
+      const wrapper = createComponent({ withEditedTimestamp });
+
+      const editedTimestamp = wrapper
+        .find('[data-testid="timestamp-edited"]')
+        .getDOMNode();
+      assert.equal(editedTimestamp.dataset.variant, expectedVariant);
+    });
+  });
+
   it('does not render edited relative date if equivalent to created relative date', () => {
     fakeFormatRelativeDate.returns('equivalent fuzzy strings');