From dea83c383699fbce847b8a3a57c2bdf767956b6f Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Tue, 13 Dec 2022 16:09:58 +0100 Subject: [PATCH] =?UTF-8?q?Impl=C3=A9mente=20le=20nouveau=20composant=20be?= =?UTF-8?q?ta?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix fix #2408 --- site/source/components/BetaBanner/index.tsx | 68 ++++++--------------- site/source/components/PageData.tsx | 19 +++++- 2 files changed, 37 insertions(+), 50 deletions(-) diff --git a/site/source/components/BetaBanner/index.tsx b/site/source/components/BetaBanner/index.tsx index cd0a747c3..6aabefbf1 100644 --- a/site/source/components/BetaBanner/index.tsx +++ b/site/source/components/BetaBanner/index.tsx @@ -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 ( - - theme.darkMode - ? theme.colors.bases.tertiary[700] - : theme.colors.bases.tertiary[100] - } - > - - - - - - {children ?? ( - -

- Cet outil est en version beta -

- - Nous travaillons à valider les informations et les calculs, mais - des erreurs peuvent être présentes. - - + + + + Cet outil est en version bêta : nous + travaillons à valider les informations et les calculs + , mais des erreurs peuvent être présentes. + + + {/* 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. - - - )} - - - + */} + ) } + +const StyledStrong = styled(Strong)` + color: ${({ theme }) => theme.colors.extended.info[600]}; +` diff --git a/site/source/components/PageData.tsx b/site/source/components/PageData.tsx index 20613ab99..687d98bec 100644 --- a/site/source/components/PageData.tsx +++ b/site/source/components/PageData.tsx @@ -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) { {meta && } + {beta && ( + + + + )} {title && !inIframe && ( <>

@@ -87,7 +93,6 @@ export default function PageData(props: PageDataProps) { )} {description && !inIframe && description} - {beta && } @@ -106,3 +111,15 @@ export default function PageData(props: PageDataProps) { ) } + +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); +`