Add description to annotations export formats

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

@@ -34,26 +34,31 @@ type ExportFormat = {
   /** Unique format identifier used also as file extension */
   value: 'json' | 'csv' | 'txt' | 'html';
   name: string;
+  description: string;
 };
 
 const exportFormats: ExportFormat[] = [
   {
     value: 'json',
     name: 'JSON',
+    description: 'For import into another Hypothesis group or document',
   },
   {
     value: 'txt',
     name: 'Text',
+    description: 'For import into Word or text editors',
   },
   {
     value: 'csv',
     name: 'CSV',
+    description: 'For import into a spreadsheet',
   },
 
   // TODO Enable these formats when implemented
   // {
   //   value: 'html',
   //   name: 'HTML',
+  //   description: '',
   // },
 ];
 
@@ -228,7 +233,14 @@ function ExportAnnotations({
                       key={exportFormat.value}
                       value={exportFormat}
                     >
-                      {exportFormat.name}
+                      <div className="flex-col gap-y-2">
+                        <div className="font-bold" data-testid="format-name">
+                          {exportFormat.name}
+                        </div>
+                        <div data-testid="format-description">
+                          {exportFormat.description}
+                        </div>
+                      </div>
                     </SelectNext.Option>
                   ))}
                 </SelectNext>

src/sidebar/components/ShareDialog/test/ExportAnnotations-test.js

@@ -241,11 +241,22 @@ describe('ExportAnnotations', () => {
       '[data-testid="export-format-select"]',
     );
     const options = select.find(SelectNext.Option);
+    const optionText = (index, type) =>
+      options.at(index).find(`[data-testid="format-${type}"]`).text();
 
     assert.equal(options.length, 3);
-    assert.equal(options.at(0).text(), 'JSON');
-    assert.equal(options.at(1).text(), 'Text');
-    assert.equal(options.at(2).text(), 'CSV');
+    assert.equal(optionText(0, 'name'), 'JSON');
+    assert.equal(
+      optionText(0, 'description'),
+      'For import into another Hypothesis group or document',
+    );
+    assert.equal(optionText(1, 'name'), 'Text');
+    assert.equal(
+      optionText(1, 'description'),
+      'For import into Word or text editors',
+    );
+    assert.equal(optionText(2, 'name'), 'CSV');
+    assert.equal(optionText(2, 'description'), 'For import into a spreadsheet');
   });
 
   describe('export form submitted', () => {