Début d'implémentation du choix d'activité

pull/2782/head
Johan Girod 2023-04-20 18:06:32 +02:00
parent 81fa930a6e
commit 63ada8a447
2 changed files with 48 additions and 30 deletions

View File

@ -1,8 +1,9 @@
import { Trans, useTranslation } from 'react-i18next'
import { useMatch } from 'react-router-dom'
import styled from 'styled-components'
import { Button } from '@/design-system/buttons'
import { Grid } from '@/design-system/layout'
import { Container, Grid, Spacing } from '@/design-system/layout'
import { useSitePaths } from '@/sitePaths'
export const stepOrder = [
@ -55,33 +56,44 @@ export default function Navigation({
const previousStep = stepOrder[stepOrder.indexOf(currentStep) - 1]
return (
<Grid container spacing={2}>
<Grid item>
<Button
size="XS"
light
color={'secondary'}
to={
absoluteSitePaths.assistants['choix-du-statut'][
previousStep || 'index'
]
}
>
<span aria-hidden></span> <Trans>Précédent</Trans>
</Button>
</Grid>
{nextStep && (
<Grid item>
<Button
size="XS"
to={absoluteSitePaths.assistants['choix-du-statut'][nextStep]}
isDisabled={!currentStepIsComplete}
aria-label={t("Suivant, passer à l'étape suivante")}
>
<Trans>Suivant</Trans> <span aria-hidden></span>
</Button>
<StyledNavigation>
<Container backgroundColor={(theme) => theme.colors.extended.grey[100]}>
<Spacing md />
<Grid container spacing={2}>
<Grid item>
<Button
light
color={'secondary'}
to={
absoluteSitePaths.assistants['choix-du-statut'][
previousStep || 'index'
]
}
>
<span aria-hidden></span> <Trans>Précédent</Trans>
</Button>
</Grid>
{nextStep && (
<Grid item>
<Button
to={absoluteSitePaths.assistants['choix-du-statut'][nextStep]}
isDisabled={!currentStepIsComplete}
aria-label={t("Suivant, passer à l'étape suivante")}
>
<Trans>Suivant</Trans> <span aria-hidden></span>
</Button>
</Grid>
)}
</Grid>
)}
</Grid>
<Spacing md />
</Container>
</StyledNavigation>
)
}
const StyledNavigation = styled.div`
position: sticky;
bottom: 0;
z-index: 1;
box-shadow: ${({ theme }) => theme.elevations[6]};
`

View File

@ -1,11 +1,17 @@
import { H1 } from '@/design-system/typography/heading'
import { Spacing } from '@/design-system/layout'
import { H1, H3 } from '@/design-system/typography/heading'
import SearchCodeAPE from '../recherche-code-ape/SearchCodeAPE'
import Navigation from './_components/Navigation'
export default function Activité() {
return (
<>
<H1>Activité</H1>
<H1>Votre activité</H1>
<H3 as="h2">
Je souhaite créer une entreprise avec comme activité principale :
</H3>
<SearchCodeAPE />
<Navigation currentStepIsComplete />
</>
)