Commit 27a6ac35 authored by Alejandro Celaya's avatar Alejandro Celaya Committed by Alejandro Celaya

Add description to annotations export formats

parent 6bd2b21f
...@@ -34,26 +34,31 @@ type ExportFormat = { ...@@ -34,26 +34,31 @@ type ExportFormat = {
/** Unique format identifier used also as file extension */ /** Unique format identifier used also as file extension */
value: 'json' | 'csv' | 'txt' | 'html'; value: 'json' | 'csv' | 'txt' | 'html';
name: string; name: string;
description: string;
}; };
const exportFormats: ExportFormat[] = [ const exportFormats: ExportFormat[] = [
{ {
value: 'json', value: 'json',
name: 'JSON', name: 'JSON',
description: 'For import into another Hypothesis group or document',
}, },
{ {
value: 'txt', value: 'txt',
name: 'Text', name: 'Text',
description: 'For import into Word or text editors',
}, },
{ {
value: 'csv', value: 'csv',
name: 'CSV', name: 'CSV',
description: 'For import into a spreadsheet',
}, },
// TODO Enable these formats when implemented // TODO Enable these formats when implemented
// { // {
// value: 'html', // value: 'html',
// name: 'HTML', // name: 'HTML',
// description: '',
// }, // },
]; ];
...@@ -228,7 +233,14 @@ function ExportAnnotations({ ...@@ -228,7 +233,14 @@ function ExportAnnotations({
key={exportFormat.value} key={exportFormat.value}
value={exportFormat} value={exportFormat}
> >
<div className="flex-col gap-y-2">
<div className="font-bold" data-testid="format-name">
{exportFormat.name} {exportFormat.name}
</div>
<div data-testid="format-description">
{exportFormat.description}
</div>
</div>
</SelectNext.Option> </SelectNext.Option>
))} ))}
</SelectNext> </SelectNext>
......
...@@ -241,11 +241,22 @@ describe('ExportAnnotations', () => { ...@@ -241,11 +241,22 @@ describe('ExportAnnotations', () => {
'[data-testid="export-format-select"]', '[data-testid="export-format-select"]',
); );
const options = select.find(SelectNext.Option); 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.length, 3);
assert.equal(options.at(0).text(), 'JSON'); assert.equal(optionText(0, 'name'), 'JSON');
assert.equal(options.at(1).text(), 'Text'); assert.equal(
assert.equal(options.at(2).text(), 'CSV'); 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', () => { describe('export form submitted', () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment