From 568e63b635551cc969868903cf09b9f24fe96269 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Wed, 26 Apr 2023 16:53:54 +0200 Subject: [PATCH] Fix critere 11.1 --- site/source/components/SearchButton.tsx | 18 ++----------- site/source/components/search/SearchBox.tsx | 17 +++++++++---- site/source/components/search/SearchRules.tsx | 9 +++++-- .../search/SearchRulesAndSimulators.tsx | 13 +++++----- site/source/design-system/popover/Popover.tsx | 25 ++----------------- .../popover/PopoverWithTrigger.tsx | 5 ---- 6 files changed, 30 insertions(+), 57 deletions(-) diff --git a/site/source/components/SearchButton.tsx b/site/source/components/SearchButton.tsx index 6ebb77adb..de1fb0f29 100644 --- a/site/source/components/SearchButton.tsx +++ b/site/source/components/SearchButton.tsx @@ -11,12 +11,7 @@ export default function SearchButton() { return ( ( {(closePopover) => ( - + )} ) @@ -72,9 +64,3 @@ const StyledIcon = styled.svg` height: ${({ theme }) => theme.spacings.md}; margin-right: ${({ theme }) => theme.spacings.xs}; ` - -// const StyledLabel = styled.span` -// @media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) { -// ${SROnly} -// } -// ` diff --git a/site/source/components/search/SearchBox.tsx b/site/source/components/search/SearchBox.tsx index 9e42b9dca..59e474c24 100644 --- a/site/source/components/search/SearchBox.tsx +++ b/site/source/components/search/SearchBox.tsx @@ -1,9 +1,15 @@ import { useTranslation } from 'react-i18next' +import { SearchBoxProvided } from 'react-instantsearch-core' import { connectSearchBox } from 'react-instantsearch-dom' import { SearchField } from '@/design-system/field' -export const SearchBox = connectSearchBox( +interface Props extends SearchBoxProvided { + label: string + 'aria-label'?: string +} + +export const SearchBox = connectSearchBox( ({ currentRefinement, isSearchStalled, refine, ...props }) => { const { t } = useTranslation() @@ -11,18 +17,19 @@ export const SearchBox = connectSearchBox(
refine('')} + onClear={() => { + refine('') + }} placeholder={t( 'recherche-globale.placeholder', 'Mot-clé ou acronyme (exemple : CSG)' )} - aria-label={t('Rechercher une règle de calcul dans la documentation')} id="input-recherche-globale" isSearchStalled={isSearchStalled} - {...props} + label={props.label} + aria-label={props['aria-label']} /> ) diff --git a/site/source/components/search/SearchRules.tsx b/site/source/components/search/SearchRules.tsx index e9ad0a0dc..dc7fec360 100644 --- a/site/source/components/search/SearchRules.tsx +++ b/site/source/components/search/SearchRules.tsx @@ -1,5 +1,5 @@ import algoliasearch from 'algoliasearch/lite' -import { Trans } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import { H2 } from '@/design-system/typography/heading' @@ -14,12 +14,17 @@ const ALGOLIA_INDEX_PREFIX = import.meta.env.VITE_ALGOLIA_INDEX_PREFIX || '' const searchClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY) export default function SearchRules() { + const { t } = useTranslation() + return ( - +

Règles de calculs

diff --git a/site/source/components/search/SearchRulesAndSimulators.tsx b/site/source/components/search/SearchRulesAndSimulators.tsx index 023cb0936..9ae9f3642 100644 --- a/site/source/components/search/SearchRulesAndSimulators.tsx +++ b/site/source/components/search/SearchRulesAndSimulators.tsx @@ -1,6 +1,6 @@ import algoliasearch from 'algoliasearch/lite' import { useEffect, useRef } from 'react' -import { Trans } from 'react-i18next' +import { Trans, useTranslation } from 'react-i18next' import { Configure, Index } from 'react-instantsearch-dom' import { useLocation } from 'react-router-dom' @@ -22,10 +22,8 @@ interface Props { closePopover: () => void } -export default function SearchRulesAndSimulators({ - closePopover, - ...searchProps -}: Props) { +export default function SearchRulesAndSimulators({ closePopover }: Props) { + const { t } = useTranslation() const location = useLocation() const prevLocation = useRef(location) useEffect(() => { @@ -41,7 +39,10 @@ export default function SearchRulesAndSimulators({ searchClient={searchClient} role="search" > - + diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx index 27b55154f..8ae920841 100644 --- a/site/source/design-system/popover/Popover.tsx +++ b/site/source/design-system/popover/Popover.tsx @@ -38,9 +38,6 @@ export default function Popover( AriaDialogProps & { children: React.ReactNode title?: string - titleProps?: { - [key: string]: unknown - } small?: boolean contentRef?: RefObject onClose?: () => void @@ -48,13 +45,7 @@ export default function Popover( isOpen?: boolean } ) { - const { - title, - children, - small, - contentRef, - titleProps: titlePropsFromProps, - } = props + const { title, children, small, contentRef } = props const { t } = useTranslation() @@ -160,11 +151,7 @@ export default function Popover( )} - {title && ( - - {title} - - )} + {title &&

{title}

} {children} @@ -282,11 +269,3 @@ const PopoverContent = styled.div` overflow: auto; padding: 0 ${({ theme }) => theme.spacings.xxl + ' ' + theme.spacings.md}; ` - -const StyledH2 = styled(H2)` - &:after { - content: ''; - border: none; - height: 0; - } -` diff --git a/site/source/design-system/popover/PopoverWithTrigger.tsx b/site/source/design-system/popover/PopoverWithTrigger.tsx index eb8226ab2..16b70a235 100644 --- a/site/source/design-system/popover/PopoverWithTrigger.tsx +++ b/site/source/design-system/popover/PopoverWithTrigger.tsx @@ -21,9 +21,6 @@ export type PopoverWithTriggerProps = { ) => ReactElement | ReactElement children: React.ReactNode | ((close: () => void) => React.ReactNode) title?: string - titleProps?: { - [key: string]: unknown - } small?: boolean contentRef?: RefObject } @@ -31,7 +28,6 @@ export type PopoverWithTriggerProps = { export default function PopoverWithTrigger({ children, title, - titleProps, trigger, small, contentRef, @@ -69,7 +65,6 @@ export default function PopoverWithTrigger({ { state.close() }}