Displaying provenance of signs

src/signs/domain/CroppedAnnotation.ts

@@ -5,6 +5,7 @@ type base64String = string
 export interface CroppedAnnotation {
   image: base64String
   fragmentNumber: string
+  provenance?: string
   script: string
   label: string
   date?: MesopotamianDate

src/signs/ui/display/SignImages.css

@@ -7,3 +7,7 @@
   color: black;
   font-size: 90%;
 }
+
+.figure-caption .provenance {
+  color: black;
+}

src/signs/ui/display/SignImages.test.tsx

@@ -19,6 +19,7 @@ const croppedAnnotations: CroppedAnnotation[] = [
     fragmentNumber: 'K.6400',
     image: imageString,
     script: '',
+    provenance: 'ASSUR',
     label: 'label-1',
   },
   {
@@ -48,6 +49,14 @@ describe('Sign Images', () => {
     userEvent.click(screen.getByRole('button', { name: 'Unclassified' }))
     expect(screen.getByText(croppedAnnotations[0].fragmentNumber)).toBeVisible()
   })
+
+  it('Provenance is displayed', () => {
+    userEvent.click(screen.getByRole('button', { name: 'Unclassified' }))
+    const provenanceSpan = screen.getByText('ASSUR', {
+      selector: '.provenance',
+    })
+    expect(provenanceSpan).toBeInTheDocument()
+  })
 })
 
 describe('Sign Images Empty', () => {

src/signs/ui/display/SignImages.tsx

@@ -47,6 +47,9 @@ function SignImage({
           {croppedAnnotation.date && (
             <DateDisplay date={croppedAnnotation.date} />
           )}
+          {croppedAnnotation.provenance && (
+            <span className="provenance">{`${croppedAnnotation.provenance}`}</span>
+          )}
         </Figure.Caption>
       </Figure>
     </Col>