Skip to content

Commit

Permalink
Merge pull request #675 from colonial-heritage/headlessui-form-compon…
Browse files Browse the repository at this point in the history 
…ents

Use the headless ui form components for accessibility
  • Loading branch information
@barbarah
barbarah authored Jun 26, 2024
2 parents 79db465 + 6d02049 commit 1dae173
Show file tree
Hide file tree
Showing 9 changed files with 260 additions and 195 deletions.
5 changes: 1 addition & 4 deletions apps/researcher/e2e/object.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,7 @@ test.describe('Object details page logged in', () => {
.getByTestId('enrichment-form')
.locator('textarea[name="citation"]')
.fill('End to end test');
await page
.getByTestId('enrichment-form')
.locator('input[name="agreedToLicense"]')
.check();
await page.getByTestId('agreed-to-license').click();
await page.getByTestId('community-selector').click();
page.keyboard.press('ArrowDown');
page.keyboard.press('Enter');
Expand Down
253 changes: 140 additions & 113 deletions apps/researcher/src/app/[locale]/objects/[id]/(provenance)/add-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
'use client';

import {Tab} from '@headlessui/react';
import {
Field,
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
} from '@headlessui/react';
import {useLocale, useTranslations} from 'next-intl';
import {Fragment, ReactNode, useMemo, useState} from 'react';
import classNames from 'classnames';
Expand Down Expand Up @@ -231,12 +238,12 @@ export default function AddProvenanceForm({
</div>
</div>
)}
<Tab.Group
<TabGroup
manual
selectedIndex={selectedIndex}
onChange={setSelectedIndex}
>
<Tab.List className="w-full pb-4 pt-8 flex flex-row flex-wrap gap-4 lg:gap-8 border-b -mx-4 px-4 mb-4 italic">
<TabList className="w-full pb-4 pt-8 flex flex-row flex-wrap gap-4 lg:gap-8 border-b -mx-4 px-4 mb-4 italic">
<ProvenanceTab fields={['type']} number={1} title={t('TabWhat')} />
<ProvenanceTab
number={2}
Expand All @@ -248,41 +255,47 @@ export default function AddProvenanceForm({
title={t('TabMoreInfo')}
fields={['citation', 'inLanguage']}
/>
</Tab.List>
<Tab.Panels>
</TabList>
<TabPanels>
<form onSubmit={handleSubmit(onSubmit)}>
<Tab.Panel>
<TabPanel>
<FormRow>
<FormColumn>
<InputLabel
title={t('type')}
description={t('typeDescription')}
required
/>
<Select
name="type"
options={typeOptions}
placeholder={t('typePlaceholder')}
/>
<FieldValidationMessage field="type.id" />
<Field as={Fragment}>
<InputLabel
title={t('type')}
description={t('typeDescription')}
required
/>
<Select
name="type"
options={typeOptions}
placeholder={t('typePlaceholder')}
/>
<FieldValidationMessage field="type.id" />
</Field>
<MotivationInput name="motivations.type" />
</FormColumn>
<FormColumn>
<InputLabel
title={t('inLanguage')}
description={t('inLanguageDescription')}
required
/>
<LanguageSelector name="inLanguage" />
<Field as={Fragment}>
<InputLabel
title={t('inLanguage')}
description={t('inLanguageDescription')}
required
/>
<LanguageSelector name="inLanguage" />
</Field>
</FormColumn>
<FormColumn>
<InputLabel
title={t('community')}
description={t('communityDescription')}
required
/>
<CommunitySelector />
<FieldValidationMessage field="community.id" />
<Field as={Fragment}>
<InputLabel
title={t('community')}
description={t('communityDescription')}
required
/>
<CommunitySelector />
<FieldValidationMessage field="community.id" />
</Field>
</FormColumn>
</FormRow>
<ButtonGroup>
Expand All @@ -291,82 +304,92 @@ export default function AddProvenanceForm({
{t('nextButton')}
</DefaultButton>
</ButtonGroup>
</Tab.Panel>
</TabPanel>

<Tab.Panel>
<TabPanel>
<FormRow>
<FormColumn>
<InputLabel
title={t.rich('transferredFrom', {
important: text => <em>{text}</em>,
})}
description={t('transferredFromDescription')}
/>
<SearchSelector
searchers={[
{
name: 'Wikidata Constituent',
url: '/api/wikidata',
},
{
name: 'Datahub Constituent',
url: '/api/datahub',
},
]}
name="transferredFrom"
/>
<Field as={Fragment}>
<InputLabel
title={t.rich('transferredFrom', {
important: text => <em>{text}</em>,
})}
description={t('transferredFromDescription')}
/>
<SearchSelector
searchers={[
{
name: 'Wikidata Constituent',
url: '/api/wikidata',
},
{
name: 'Datahub Constituent',
url: '/api/datahub',
},
]}
name="transferredFrom"
/>
</Field>
<MotivationInput name="motivations.transferredFrom" />
<InputLabel
title={t.rich('transferredTo', {
important: text => <em>{text}</em>,
})}
description={t('transferredToDescription')}
/>
<SearchSelector
searchers={[
{
name: 'Wikidata Constituent',
url: '/api/wikidata',
},
{
name: 'Datahub Constituent',
url: '/api/datahub',
},
]}
name="transferredTo"
/>
<Field as={Fragment}>
<InputLabel
title={t.rich('transferredTo', {
important: text => <em>{text}</em>,
})}
description={t('transferredToDescription')}
/>
<SearchSelector
searchers={[
{
name: 'Wikidata Constituent',
url: '/api/wikidata',
},
{
name: 'Datahub Constituent',
url: '/api/datahub',
},
]}
name="transferredTo"
/>
</Field>
<MotivationInput name="motivations.transferredTo" />
</FormColumn>
<FormColumn>
<InputLabel
title={t('location')}
description={t('locationDescription')}
/>
<SearchSelector
searchers={[
{
name: 'GeoNames Location',
url: '/api/geonames',
},
]}
name="location"
/>
<Field as={Fragment}>
<InputLabel
title={t('location')}
description={t('locationDescription')}
/>
<SearchSelector
searchers={[
{
name: 'GeoNames Location',
url: '/api/geonames',
},
]}
name="location"
/>
</Field>
<MotivationInput name="motivations.location" />
</FormColumn>
<FormColumn>
<InputLabel
title={t('startDate')}
description={t('startDateDescription')}
/>
<EdtfInput name="date.startDate" />
<FieldValidationMessage field="date.startDate" />
<Field as={Fragment}>
<InputLabel
title={t('startDate')}
description={t('startDateDescription')}
/>
<EdtfInput name="date.startDate" />
<FieldValidationMessage field="date.startDate" />
</Field>
<MotivationInput name="motivations.startDate" />
<InputLabel
title={t('endDate')}
description={t('startDateDescription')}
/>
<EdtfInput name="date.endDate" />
<FieldValidationMessage field="date.endDate" />
<Field as={Fragment}>
<InputLabel
title={t('endDate')}
description={t('startDateDescription')}
/>
<EdtfInput name="date.endDate" />
<FieldValidationMessage field="date.endDate" />
</Field>
<FieldValidationMessage field="date.root" />
<MotivationInput name="motivations.endDate" />
</FormColumn>
Expand All @@ -379,27 +402,31 @@ export default function AddProvenanceForm({
{t('nextButton')}
</DefaultButton>
</ButtonGroup>
</Tab.Panel>
</TabPanel>

<Tab.Panel>
<TabPanel>
<FormRow>
<FormColumn>
<InputLabel
title={t('qualifier')}
description={t('qualifierDescription')}
required
/>
<QualifierSelector name="qualifier" />
<Field as={Fragment}>
<InputLabel
title={t('qualifier')}
description={t('qualifierDescription')}
required
/>
<QualifierSelector name="qualifier" />
</Field>
<MotivationInput name="motivations.qualifier" />
</FormColumn>
<FormColumn>
<InputLabel
title={t('citation')}
description={t('citationDescription')}
required
/>
<Textarea name="citation" />
<FieldValidationMessage field="citation" />
<Field as={Fragment}>
<InputLabel
title={t('citation')}
description={t('citationDescription')}
required
/>
<Textarea name="citation" />
<FieldValidationMessage field="citation" />
</Field>
</FormColumn>
<FormColumn>
<div className="mt-4">
Expand Down Expand Up @@ -430,10 +457,10 @@ export default function AddProvenanceForm({
{t('saveButton')}
</PrimaryButton>
</ButtonGroup>
</Tab.Panel>
</TabPanel>
</form>
</Tab.Panels>
</Tab.Group>
</TabPanels>
</TabGroup>
</FormProvider>
);
}
Expand Down
Loading

0 comments on commit 1dae173

Please sign in to comment.