diff --git a/src/components/AnnotationTimestamps.tsx b/src/components/AnnotationTimestamps.tsx index bc1eb7a..79ce3a5 100644 --- a/src/components/AnnotationTimestamps.tsx +++ b/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 (