Skip to content

Commit

Permalink
Merge pull request #4914 from dfe-analytical-services/EES-5175-5177
Browse files Browse the repository at this point in the history 
EES-5175 and EES-5177 data catalogue updates
  • Loading branch information
@amyb-hiveit
amyb-hiveit authored Jun 3, 2024
2 parents 62b18b6 + c237e67 commit 04f36a6
Show file tree
Hide file tree
Showing 7 changed files with 234 additions and 49 deletions.
78 changes: 50 additions & 28 deletions src/explore-education-statistics-common/src/components/form/FormSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,19 @@ export interface FormSelectProps
disabled?: boolean;
error?: string;
id: string;
/**
* Renders the label and select inline.
* If a hint is provided it appears below the label
* and select instead of between them.
*/
inline?: boolean;
/**
* Renders the hint inline with the label.
* Has no effect if `inline` is true.
*/
inlineHint?: boolean;
inputRef?: Ref<HTMLSelectElement>;
hint?: string;
hint?: string | ReactNode;
name: string;
onBlur?: FocusEventHandler;
onChange?: SelectChangeEventHandler;
Expand All @@ -48,6 +58,7 @@ const FormSelect = ({
error,
id,
inline = false,
inlineHint = false,
inputRef,
hint,
hideLabel,
Expand All @@ -62,27 +73,31 @@ const FormSelect = ({
placeholder,
value,
}: FormSelectProps) => {
const hintAndError = (
<>
{hint && (
<div id={`${id}-hint`} className="govuk-hint">
{hint}
</div>
)}
{error && <ErrorMessage id={`${id}-error`}>{error}</ErrorMessage>}
</>
);

return (
<>
<FormSelectWrapper inline={inline}>
<FormLabel
className={classNames({ 'govuk-!-margin-right-2': inline })}
id={id}
label={label}
hideLabel={hideLabel}
/>
<FormSelectLabelWrapper inlineHint={inlineHint && !inline}>
<FormLabel
className={classNames({ 'govuk-!-margin-right-2': inline })}
id={id}
label={label}
hideLabel={hideLabel}
/>

{/* Hint and error moved below the select when inline */}
{!inline && (
<>
{hint && (
<div id={`${id}-hint`} className="govuk-hint">
{hint}
</div>
)}
{error && <ErrorMessage id={`${id}-error`}>{error}</ErrorMessage>}
</>
)}
{/* Hint and error moved below the select when inline */}
{!inline && hintAndError}
</FormSelectLabelWrapper>

<select
aria-describedby={
Expand Down Expand Up @@ -135,16 +150,7 @@ const FormSelect = ({
))}
</select>
</FormSelectWrapper>
{inline && (
<>
{hint && (
<div id={`${id}-hint`} className="govuk-hint">
{hint}
</div>
)}
{error && <ErrorMessage id={`${id}-error`}>{error}</ErrorMessage>}
</>
)}
{inline && hintAndError}
</>
);
};
Expand All @@ -166,3 +172,19 @@ function FormSelectWrapper({
<>{children}</>
);
}

function FormSelectLabelWrapper({
inlineHint,
children,
}: {
inlineHint: boolean;
children: ReactNode;
}) {
return inlineHint ? (
<div className="dfe-flex dfe-justify-content--space-between">
{children}
</div>
) : (
<>{children}</>
);
}
61 changes: 61 additions & 0 deletions src/explore-education-statistics-common/src/components/form/__tests__/FormSelect.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,4 +171,65 @@ describe('FormSelect', () => {
expect(ariaDescribedBy).toContain('test-input-error');
expect(ariaDescribedBy).toContain('test-input-hint');
});

test('renders correctly with inline prop', () => {
const { container, getByLabelText } = render(
<FormSelect
hint="Test hint"
id="test-select"
inline
label="Test select"
name="testSelect"
options={[
{ value: 'option-1', label: 'Option 1' },
{ value: 'option-2', label: 'Option 2' },
{ value: 'option-3', label: 'Option 3' },
]}
/>,
);

expect(getByLabelText('Test select')).toBeDefined();
expect(container.innerHTML).toMatchSnapshot();
});

test('renders correctly with inlineHint prop', () => {
const { container, getByLabelText } = render(
<FormSelect
hint="Test hint"
id="test-select"
inlineHint
label="Test select"
name="testSelect"
options={[
{ value: 'option-1', label: 'Option 1' },
{ value: 'option-2', label: 'Option 2' },
{ value: 'option-3', label: 'Option 3' },
]}
/>,
);

expect(getByLabelText('Test select')).toBeDefined();
expect(container.innerHTML).toMatchSnapshot();
});

test('does not render the inlineHint div if inline is also true', () => {
const { container, getByLabelText } = render(
<FormSelect
hint="Test hint"
id="test-select"
inline
inlineHint
label="Test select"
name="testSelect"
options={[
{ value: 'option-1', label: 'Option 1' },
{ value: 'option-2', label: 'Option 2' },
{ value: 'option-3', label: 'Option 3' },
]}
/>,
);

expect(getByLabelText('Test select')).toBeDefined();
expect(container.innerHTML).toMatchSnapshot();
});
});
90 changes: 90 additions & 0 deletions ...on-statistics-common/src/components/form/__tests__/__snapshots__/FormSelect.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,95 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`FormSelect does not render the inlineHint div if inline is also true 1`] = `
<div class="dfe-flex dfe-align-items--center">
<label class="govuk-label govuk-!-margin-right-2"
for="test-select"
>
Test select
</label>
<select aria-describedby="test-select-hint"
class="govuk-select"
id="test-select"
name="testSelect"
>
<option value="option-1">
Option 1
</option>
<option value="option-2">
Option 2
</option>
<option value="option-3">
Option 3
</option>
</select>
</div>
<div id="test-select-hint"
class="govuk-hint"
>
Test hint
</div>
`;

exports[`FormSelect renders correctly with inline prop 1`] = `
<div class="dfe-flex dfe-align-items--center">
<label class="govuk-label govuk-!-margin-right-2"
for="test-select"
>
Test select
</label>
<select aria-describedby="test-select-hint"
class="govuk-select"
id="test-select"
name="testSelect"
>
<option value="option-1">
Option 1
</option>
<option value="option-2">
Option 2
</option>
<option value="option-3">
Option 3
</option>
</select>
</div>
<div id="test-select-hint"
class="govuk-hint"
>
Test hint
</div>
`;

exports[`FormSelect renders correctly with inlineHint prop 1`] = `
<div class="dfe-flex dfe-justify-content--space-between">
<label class="govuk-label"
for="test-select"
>
Test select
</label>
<div id="test-select-hint"
class="govuk-hint"
>
Test hint
</div>
</div>
<select aria-describedby="test-select-hint"
class="govuk-select"
id="test-select"
name="testSelect"
>
<option value="option-1">
Option 1
</option>
<option value="option-2">
Option 2
</option>
<option value="option-3">
Option 3
</option>
</select>
`;

exports[`FormSelect renders correctly with required props 1`] = `
<label class="govuk-label"
for="test-select"
Expand Down
7 changes: 5 additions & 2 deletions ...explore-education-statistics-frontend/src/modules/data-catalogue/DataCataloguePageNew.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,7 +253,7 @@ export default function DataCataloguePageNew({ showTypeFilter }: Props) {
>
<NotificationBanner title="This page has changed">
Following user feedback we've made some changes to this page to make our
publications easier to find, if you have any comments on the new design
data sets easier to find, if you have any comments on the new design
please let us know via the{' '}
<a
href="https://forms.office.com/Pages/ResponsePage.aspx?id=yXfS-grGoU2187O4s0qC-XMiKzsnr8xJoWM_DeGwIu9UNDJHOEJDRklTNVA1SDdLOFJITEwyWU1OQS4u"
Expand All @@ -276,6 +276,9 @@ export default function DataCataloguePageNew({ showTypeFilter }: Props) {
<li>
<Link to="/find-statistics">Find statistics and data</Link>
</li>
<li>
<Link to="/methodology">Methodology</Link>
</li>
<li>
<Link to="/glossary">Glossary</Link>
</li>
Expand Down Expand Up @@ -352,7 +355,7 @@ export default function DataCataloguePageNew({ showTypeFilter }: Props) {
<ButtonText
onClick={() => handleClearFilter({ filterType: 'all' })}
>
Clear filters
Reset filters
</ButtonText>
)}
</div>
Expand Down
Loading

0 comments on commit 04f36a6

Please sign in to comment.