From f74e9e6f54dd5f2919d920f106dac0da63294a48 Mon Sep 17 00:00:00 2001 From: Amy Benson Date: Thu, 30 May 2024 16:12:18 +0100 Subject: [PATCH 1/2] EES-5175 add themes guidance to data catalogue --- .../src/components/form/FormSelect.tsx | 44 +++++++++++-------- .../data-catalogue/components/Filters.tsx | 5 ++- .../components/ThemesModal.tsx | 7 ++- 3 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/explore-education-statistics-common/src/components/form/FormSelect.tsx b/src/explore-education-statistics-common/src/components/form/FormSelect.tsx index c804e882064..06f97f09469 100644 --- a/src/explore-education-statistics-common/src/components/form/FormSelect.tsx +++ b/src/explore-education-statistics-common/src/components/form/FormSelect.tsx @@ -27,8 +27,9 @@ export interface FormSelectProps error?: string; id: string; inline?: boolean; + inlineHint?: boolean; inputRef?: Ref; - hint?: string; + hint?: string | ReactNode; name: string; onBlur?: FocusEventHandler; onChange?: SelectChangeEventHandler; @@ -48,6 +49,7 @@ const FormSelect = ({ error, id, inline = false, + inlineHint = false, inputRef, hint, hideLabel, @@ -65,24 +67,30 @@ const FormSelect = ({ return ( <> - +
+ - {/* Hint and error moved below the select when inline */} - {!inline && ( - <> - {hint && ( -
- {hint} -
- )} - {error && {error}} - - )} + {/* Hint and error moved below the select when inline */} + {!inline && ( + <> + {hint && ( +
+ {hint} +
+ )} + {error && {error}} + + )} +
- {inline && ( - <> - {hint && ( -
- {hint} -
- )} - {error && {error}} - - )} + {inline && hintAndError} ); }; @@ -174,3 +172,19 @@ function FormSelectWrapper({ <>{children} ); } + +function FormSelectLabelWrapper({ + inlineHint, + children, +}: { + inlineHint: boolean; + children: ReactNode; +}) { + return inlineHint ? ( +
+ {children} +
+ ) : ( + <>{children} + ); +} diff --git a/src/explore-education-statistics-common/src/components/form/__tests__/FormSelect.test.tsx b/src/explore-education-statistics-common/src/components/form/__tests__/FormSelect.test.tsx index b9b5e07c009..c40a292faeb 100644 --- a/src/explore-education-statistics-common/src/components/form/__tests__/FormSelect.test.tsx +++ b/src/explore-education-statistics-common/src/components/form/__tests__/FormSelect.test.tsx @@ -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( + , + ); + + expect(getByLabelText('Test select')).toBeDefined(); + expect(container.innerHTML).toMatchSnapshot(); + }); + + test('renders correctly with inlineHint prop', () => { + const { container, getByLabelText } = render( + , + ); + + 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( + , + ); + + expect(getByLabelText('Test select')).toBeDefined(); + expect(container.innerHTML).toMatchSnapshot(); + }); }); diff --git a/src/explore-education-statistics-common/src/components/form/__tests__/__snapshots__/FormSelect.test.tsx.snap b/src/explore-education-statistics-common/src/components/form/__tests__/__snapshots__/FormSelect.test.tsx.snap index b3cd7bbf266..0cd639e7410 100644 --- a/src/explore-education-statistics-common/src/components/form/__tests__/__snapshots__/FormSelect.test.tsx.snap +++ b/src/explore-education-statistics-common/src/components/form/__tests__/__snapshots__/FormSelect.test.tsx.snap @@ -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`] = ` +
+ + +
+
+ Test hint +
+`; + +exports[`FormSelect renders correctly with inline prop 1`] = ` +
+ + +
+
+ Test hint +
+`; + +exports[`FormSelect renders correctly with inlineHint prop 1`] = ` +
+ +
+ Test hint +
+
+ +`; + exports[`FormSelect renders correctly with required props 1`] = `