betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Implémente le nouveau composant beta 

fix
fix #2408
pull/2431/head
Johan Girod 2022-12-13 16:09:58 +01:00
parent c5a2a38730
commit dea83c3836
2 changed files with 37 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
site/source/components/BetaBanner/index.tsx
View File

@ -1,61 +1,31 @@
import React from 'react'
import { Trans } from 'react-i18next'
import styled from 'styled-components'
import { Container, Grid } from '@/design-system/layout'
import { Message } from '@/design-system'
import { Strong } from '@/design-system/typography'
import { H3 } from '@/design-system/typography/heading'
import { Body, Intro } from '@/design-system/typography/paragraphs'
import { Body } from '@/design-system/typography/paragraphs'
import wipSvg from './undraw_qa_engineers_dg-5-p.svg'
export default function BetaBanner({
children,
}: {
children?: React.ReactNode
}) {
export default function BetaBanner() {
return (
<Container
backgroundColor={(theme) =>
theme.darkMode
? theme.colors.bases.tertiary[700]
: theme.colors.bases.tertiary[100]
}
>
<Grid
container
spacing={4}
css={`
align-items: center;
`}
>
<Grid item sm={3}>
<img
src={wipSvg}
alt=""
style={{ width: '100%', padding: '0.25rem' }}
/>
</Grid>
<Grid item sm={9}>
{children ?? (
<Trans i18nKey="betawarning">
<H3 as="h2">
<Strong>Cet outil est en version beta</Strong>
</H3>
<Intro>
Nous travaillons à valider les informations et les calculs, mais
des <Strong>erreurs peuvent être présentes</Strong>.
</Intro>
<Body>
<Message type="info" icon="🚧" border={false} mini>
<Trans i18nKey="betawarning">
<Body>
<StyledStrong>Cet outil est en version bêta</StyledStrong> : nous
travaillons à <Strong>valider les informations et les calculs</Strong>
, mais des <Strong>erreurs peuvent être présentes.</Strong>
</Body>
</Trans>
{/* <Body>
Bien qu'il ne soit pas terminé, nous avons choisi de le publier
pour prendre en compte vos retours le plus tôt possible. Si vous
pensez avoir trouvé un problème ou si vous voulez nous partager
une remarque, vous pouvez nous contacter via le bouton « Faire
une suggestion » en bas de page.
</Body>
</Trans>
)}
</Grid>
</Grid>
</Container>
</Body> */}
</Message>
)
}
const StyledStrong = styled(Strong)`
color: ${({ theme }) => theme.colors.extended.info[600]};
`

19
site/source/components/PageData.tsx
View File

@ -1,5 +1,6 @@
import { ComponentPropsWithoutRef } from 'react'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
import Meta from '@/components/utils/Meta'
import { useIsEmbedded } from '@/components/utils/useIsEmbedded'
@ -77,6 +78,11 @@ export default function PageData(props: PageDataProps) {
<TrackChapter {...trackInfo}>
{meta && <Meta page={`simulateur.${title ?? ''}`} {...meta} />}
{beta && (
<StyledBetaContainer>
<BetaBanner />
</StyledBetaContainer>
)}
{title && !inIframe && (
<>
<H1>
@ -87,7 +93,6 @@ export default function PageData(props: PageDataProps) {
</>
)}
{description && !inIframe && description}
{beta && <BetaBanner />}
<Component />
@ -106,3 +111,15 @@ export default function PageData(props: PageDataProps) {
</CurrentSimulatorDataProvider>
)
}
const StyledBetaContainer = styled.div`
padding-top: ${({ theme }) => theme.spacings.xl};
@media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) {
padding-top: ${({ theme }) => theme.spacings.md};
}
margin-bottom: -${({ theme }) => theme.spacings.xl};
position: sticky;
top: 0;
z-index: 3;
background-color: rgba(255, 255, 255, 0.7);
`