From a9c67250c3ddd94fa44830f554d0672142088496 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Wed, 22 Jun 2022 13:15:53 +0200 Subject: [PATCH] Revert "Revert "Composant UI Grid (#2147)"" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A priori le problème sur la recherche venait d'une erreur de l'API et non de la modification du code. --- package.json | 3 - site/package.json | 8 - site/source/components/BetaBanner/index.tsx | 11 +- site/source/components/MoreInfosOnUs.tsx | 2 +- site/source/components/PageHeader.tsx | 33 +- site/source/components/SchemeComparaison.tsx | 2 +- .../ShareSimulationPopup.tsx | 2 +- .../ShareSimulationBanner/index.tsx | 7 +- .../components/Simulation/SimulationGoal.tsx | 28 +- .../components/Simulation/SimulationGoals.tsx | 18 +- site/source/components/Simulation/index.tsx | 12 +- site/source/components/company/Details.tsx | 9 +- .../source/components/company/SearchField.tsx | 2 +- .../components/conversation/AnswerList.tsx | 14 +- .../components/conversation/Conversation.tsx | 21 +- .../components/search/SimulatorHits.tsx | 2 +- .../InstitutionsPartenaires.tsx | 6 +- .../SalaryExplanation.tsx | 10 +- site/source/components/ui/Checklist/index.tsx | 3 +- site/source/design-system/accordion/index.tsx | 5 +- .../design-system/answer-group/index.tsx | 23 +- site/source/design-system/card/Card.tsx | 3 +- site/source/design-system/footer/column.tsx | 2 +- .../source/design-system/footer/container.tsx | 2 +- site/source/design-system/layout/Grid.tsx | 146 ++++++++ site/source/design-system/layout/index.ts | 1 + site/source/design-system/message/index.tsx | 10 +- site/source/design-system/popover/Popover.tsx | 18 +- site/source/design-system/root.tsx | 2 +- site/source/design-system/styled.d.ts | 110 ------ site/source/design-system/theme.ts | 17 +- site/source/pages/Budget/Budget.tsx | 2 +- site/source/pages/Creer/CreationChecklist.tsx | 3 +- site/source/pages/Creer/Home.tsx | 6 +- site/source/pages/Documentation.tsx | 3 +- site/source/pages/Landing/Landing.tsx | 34 +- site/source/pages/Landing/SearchOrCreate.tsx | 3 +- site/source/pages/Nouveautes/Nouveautes.tsx | 29 +- .../ActivitésSelection.tsx | 3 +- .../EconomieCollaborative/VotreSituation.tsx | 2 +- .../ExonerationCovid/ExonérationCovid.tsx | 5 +- .../ExonerationCovid/FormulaireS1S1Bis.tsx | 35 +- .../ExonerationCovid/FormulaireS2.tsx | 19 +- .../Simulateurs/ExonerationCovid/Recap.tsx | 2 +- site/source/pages/Simulateurs/Home.tsx | 2 +- site/source/pages/Simulateurs/NextSteps.tsx | 8 +- site/source/pages/Stats/GlobalStats.tsx | 3 +- site/source/pages/Stats/Stats.tsx | 41 ++- .../_components/RésultatSimple.tsx | 3 +- .../index.tsx | 2 +- .../_components/DéclarationRevenu.tsx | 15 +- .../_components/NotHandledCase.tsx | 24 +- .../cotisations.tsx | 3 +- .../declaration.tsx | 11 +- .../entreprise.tsx | 3 +- .../imposition.tsx | 3 +- .../pages/gerer/demande-mobilité/EndBlock.tsx | 3 +- .../pages/gerer/demande-mobilité/index.tsx | 3 +- site/source/pages/gerer/index.tsx | 78 ++-- site/source/pages/integration/Iframe.tsx | 11 +- site/source/pages/integration/Options.tsx | 2 +- site/source/types/styled.d.ts | 103 ++++++ site/tsconfig.json | 2 +- yarn.lock | 343 +----------------- 64 files changed, 646 insertions(+), 695 deletions(-) create mode 100644 site/source/design-system/layout/Grid.tsx delete mode 100644 site/source/design-system/styled.d.ts create mode 100644 site/source/types/styled.d.ts diff --git a/package.json b/package.json index f68839b7f..466e082e2 100644 --- a/package.json +++ b/package.json @@ -31,9 +31,6 @@ "i18n:check": "yarn workspace site i18n:check", "i18n:translate": "yarn workspace site i18n:translate" }, - "resolutions": { - "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest" - }, "devDependencies": { "@actions/core": "^1.9.0", "@typescript-eslint/eslint-plugin": "^5.25.0", diff --git a/site/package.json b/site/package.json index 838746a5d..1587dadb3 100644 --- a/site/package.json +++ b/site/package.json @@ -46,16 +46,8 @@ "storybook": "start-storybook -p 6006", "build:storybook": "build-storybook" }, - "resolutions": { - "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest" - }, "dependencies": { - "@emotion/react": "^11.7.1", - "@emotion/styled": "^11.6.0", - "@icons/material": "^0.4.1", "@internationalized/number": "^3.0.3", - "@mui/material": "^5.0.4", - "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest", "@react-aria/accordion": "^3.0.0-alpha.5", "@react-aria/button": "^3.4.1", "@react-aria/checkbox": "^3.2.3", diff --git a/site/source/components/BetaBanner/index.tsx b/site/source/components/BetaBanner/index.tsx index cfcc31cd9..36c3b407d 100644 --- a/site/source/components/BetaBanner/index.tsx +++ b/site/source/components/BetaBanner/index.tsx @@ -1,5 +1,4 @@ -import { Container } from '@/design-system/layout' -import { Grid } from '@mui/material' +import { Container, Grid } from '@/design-system/layout' import React from 'react' import wipSvg from './undraw_qa_engineers_dg-5-p.svg' @@ -10,7 +9,13 @@ export default function BetaBanner({ }) { return ( theme.colors.bases.tertiary[100]}> - + diff --git a/site/source/components/MoreInfosOnUs.tsx b/site/source/components/MoreInfosOnUs.tsx index bc88c30d2..647e367b0 100644 --- a/site/source/components/MoreInfosOnUs.tsx +++ b/site/source/components/MoreInfosOnUs.tsx @@ -1,4 +1,4 @@ -import { Grid } from '@mui/material' +import { Grid } from '@/design-system/layout' import { SmallCard } from '@/design-system/card' import { H2 } from '@/design-system/typography/heading' import { useContext } from 'react' diff --git a/site/source/components/PageHeader.tsx b/site/source/components/PageHeader.tsx index 0b3f5f66a..04553617f 100644 --- a/site/source/components/PageHeader.tsx +++ b/site/source/components/PageHeader.tsx @@ -1,4 +1,4 @@ -import { Grid } from '@mui/material' +import { Grid } from '@/design-system/layout' import { H1 } from '@/design-system/typography/heading' import { ReactNode } from 'react' import styled from 'styled-components' @@ -8,8 +8,6 @@ const Illustration = styled.img<{ titre: ReactNode }>` width: 100%; vertical-align: bottom; padding-top: ${({ theme }) => theme.spacings.xl}; - /* transform-origin: center right; - transform: scale(1.25); */ ` export default function PageHeader({ @@ -22,7 +20,13 @@ export default function PageHeader({ picture?: string }) { return ( - + {picture && ( - + - + )} ) } + +const InnerGrid = styled(Grid)` + align-self: flex-end; + z-index: -1; + display: none; + + @media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) { + display: block; + } +` diff --git a/site/source/components/SchemeComparaison.tsx b/site/source/components/SchemeComparaison.tsx index 622f3d1c9..f0db24680 100644 --- a/site/source/components/SchemeComparaison.tsx +++ b/site/source/components/SchemeComparaison.tsx @@ -11,7 +11,7 @@ import { H2, H3 } from '@/design-system/typography/heading' import { SmallBody } from '@/design-system/typography/paragraphs' import revenusSVG from '@/images/revenus.svg' import { situationSelector } from '@/selectors/simulationSelectors' -import { Grid } from '@mui/material' +import { Grid } from '@/design-system/layout' import { useCallback, useContext, useMemo, useState } from 'react' import { Trans } from 'react-i18next' import { useSelector } from 'react-redux' diff --git a/site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx b/site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx index 65c404edd..60efcb37b 100644 --- a/site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx +++ b/site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx @@ -3,7 +3,7 @@ import { TextField } from '@/design-system/field' import { Strong } from '@/design-system/typography' import { H3 } from '@/design-system/typography/heading' import { Body, Intro, SmallBody } from '@/design-system/typography/paragraphs' -import { Grid } from '@mui/material' +import { Grid } from '@/design-system/layout' import { useContext, useEffect, useRef, useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import { TrackingContext } from '../../ATInternetTracking' diff --git a/site/source/components/ShareSimulationBanner/index.tsx b/site/source/components/ShareSimulationBanner/index.tsx index a683ed33d..826a48d7f 100644 --- a/site/source/components/ShareSimulationBanner/index.tsx +++ b/site/source/components/ShareSimulationBanner/index.tsx @@ -1,12 +1,11 @@ import Emoji from '@/components/utils/Emoji' import { PopoverWithTrigger } from '@/design-system' import { Button } from '@/design-system/buttons' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { companySituationSelector, situationSelector, } from '@/selectors/simulationSelectors' -import { Grid } from '@mui/material' import { useContext } from 'react' import { Trans, useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' @@ -83,7 +82,9 @@ export default function ShareOrSaveSimulationBanner({ container className=" print-hidden" spacing={4} - justifyContent="center" + css={` + justify-content: center; + `} > {share && ( diff --git a/site/source/components/Simulation/SimulationGoal.tsx b/site/source/components/Simulation/SimulationGoal.tsx index 220b40ae8..3c41ba317 100644 --- a/site/source/components/Simulation/SimulationGoal.tsx +++ b/site/source/components/Simulation/SimulationGoal.tsx @@ -1,7 +1,7 @@ import { updateSituation } from '@/actions/actions' +import { Grid } from '@/design-system/layout' import { SmallBody } from '@/design-system/typography/paragraphs' import { targetUnitSelector } from '@/selectors/simulationSelectors' -import { Grid } from '@mui/material' import { DottedName } from 'modele-social' import { formatValue, PublicodesExpression } from 'publicodes' import React, { useCallback, useState } from 'react' @@ -66,9 +66,11 @@ export function SimulationGoal({ @@ -85,13 +87,9 @@ export function SimulationGoal({ - + - + {editable ? ( {!isFocused && !small && ( @@ -132,6 +130,18 @@ export function SimulationGoal({ ) } + +const StyledGuideLectureContainer = styled(Grid).attrs({ + item: true, + md: true, +})` + display: none; + + @media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) { + display: block; + } +` + const StyledGuideLecture = styled.div.attrs({ 'aria-hidden': true })<{ small: boolean }>` diff --git a/site/source/components/Simulation/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoals.tsx index 27a115433..8639adfef 100644 --- a/site/source/components/Simulation/SimulationGoals.tsx +++ b/site/source/components/Simulation/SimulationGoals.tsx @@ -1,6 +1,6 @@ +import { Grid } from '@/design-system/layout' import { Link } from '@/design-system/typography/link' import { firstStepCompletedSelector } from '@/selectors/simulationSelectors' -import { Grid } from '@mui/material' import React from 'react' import { useSelector } from 'react-redux' import styled, { css, ThemeProvider } from 'styled-components' @@ -88,15 +88,16 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) { const inIframe = useIsEmbedded() return ( - +
{inIframe && ( {toggles} )} - +
) } +const Section = styled(Grid).attrs({ container: true })` + justify-content: space-between; + gap: ${({ theme }) => theme.spacings.xs}; +` + const ToggleSection = styled.div` padding: ${({ theme }) => theme.spacings.sm} 0; diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx index 425d3a0c0..74e55a6c6 100644 --- a/site/source/components/Simulation/index.tsx +++ b/site/source/components/Simulation/index.tsx @@ -2,16 +2,16 @@ import { ConversationProps } from '@/components/conversation/Conversation' import PageFeedback from '@/components/Feedback' import ShareOrSaveSimulationBanner from '@/components/ShareSimulationBanner' import { PopoverWithTrigger } from '@/design-system' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { Link } from '@/design-system/typography/link' import { companySituationSelector, firstStepCompletedSelector, } from '@/selectors/simulationSelectors' -import { Grid, styled } from '@mui/material' import React from 'react' import { Trans } from 'react-i18next' import { useSelector } from 'react-redux' +import styled from 'styled-components' import { TrackPage } from '../../ATInternetTracking' import Banner from '../Banner' import AnswerList from '../conversation/AnswerList' @@ -58,7 +58,13 @@ export default function Simulation({ return ( <> {!firstStepCompleted && } - + {children} diff --git a/site/source/components/company/Details.tsx b/site/source/components/company/Details.tsx index 41eec8f81..12597a428 100644 --- a/site/source/components/company/Details.tsx +++ b/site/source/components/company/Details.tsx @@ -1,9 +1,8 @@ import { Message } from '@/design-system' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { Strong } from '@/design-system/typography' import { H4 } from '@/design-system/typography/heading' import { Body } from '@/design-system/typography/paragraphs' -import { Grid } from '@mui/material' import { Trans } from 'react-i18next' import styled from 'styled-components' import SeeAnswersButton from '../conversation/SeeAnswersButton' @@ -18,8 +17,10 @@ export function CompanyDetails({ diff --git a/site/source/components/company/SearchField.tsx b/site/source/components/company/SearchField.tsx index 3e43cc5c8..815f2a07f 100644 --- a/site/source/components/company/SearchField.tsx +++ b/site/source/components/company/SearchField.tsx @@ -1,4 +1,4 @@ -import { Grid } from '@mui/material' +import { Grid } from '@/design-system/layout' import { useSearchFieldState } from '@react-stately/searchfield' import { FabriqueSocialEntreprise } from '@/api/fabrique-social' import { Card } from '@/design-system/card' diff --git a/site/source/components/conversation/AnswerList.tsx b/site/source/components/conversation/AnswerList.tsx index 3168104b5..c19e70ca3 100644 --- a/site/source/components/conversation/AnswerList.tsx +++ b/site/source/components/conversation/AnswerList.tsx @@ -5,7 +5,7 @@ import { useEngine } from '@/components/utils/EngineContext' import { useNextQuestions } from '@/components/utils/useNextQuestion' import { Message, PopoverWithTrigger } from '@/design-system' import { Button } from '@/design-system/buttons' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { H2, H3 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' import { Body } from '@/design-system/typography/paragraphs' @@ -15,7 +15,6 @@ import { situationSelector, } from '@/selectors/simulationSelectors' import { evaluateQuestion } from '@/utils' -import { Grid } from '@mui/material' import { DottedName } from 'modele-social' import { EvaluatedNode } from 'publicodes' import { useCallback, useMemo } from 'react' @@ -161,13 +160,7 @@ function StepsTable({ {rules .filter((rule) => rule.nodeValue !== null) .map((rule) => ( - + {rule.title} @@ -241,6 +234,9 @@ const StyledAnswer = styled(Grid)` ` const StyledAnswerList = styled(Grid)` margin: ${({ theme }) => `${theme.spacings.md} 0`}; + align-items: baseline; + justify-content: flex-end; + gap: ${({ theme }) => theme.spacings.sm}; font-family: ${({ theme }) => theme.fonts.main}; :nth-child(2n) { diff --git a/site/source/components/conversation/Conversation.tsx b/site/source/components/conversation/Conversation.tsx index d84f5c878..c5715c0a6 100644 --- a/site/source/components/conversation/Conversation.tsx +++ b/site/source/components/conversation/Conversation.tsx @@ -11,7 +11,7 @@ import Emoji from '@/components/utils/Emoji' import { EngineContext } from '@/components/utils/EngineContext' import { useNextQuestions } from '@/components/utils/useNextQuestion' import { Button } from '@/design-system/buttons' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { H3 } from '@/design-system/typography/heading' import { Body } from '@/design-system/typography/paragraphs' import { @@ -19,7 +19,6 @@ import { situationSelector, } from '@/selectors/simulationSelectors' import { evaluateQuestion } from '@/utils' -import { Grid } from '@mui/material' import { PublicodesExpression } from 'publicodes' import React, { useContext, useEffect } from 'react' import { Trans } from 'react-i18next' @@ -136,7 +135,14 @@ export default function Conversation({ → - + {customSituationVisualisation} @@ -171,7 +177,14 @@ export default function Conversation({ )} - + {customSituationVisualisation} diff --git a/site/source/components/search/SimulatorHits.tsx b/site/source/components/search/SimulatorHits.tsx index b990b71b9..b2b67698b 100644 --- a/site/source/components/search/SimulatorHits.tsx +++ b/site/source/components/search/SimulatorHits.tsx @@ -1,4 +1,4 @@ -import { Grid } from '@mui/material' +import { Grid } from '@/design-system/layout' import Emoji from '@/components/utils/Emoji' import { SitePathsContext } from '@/components/utils/SitePathsContext' import { SmallCard } from '@/design-system/card' diff --git a/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx b/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx index 37fe13463..dedafa0f9 100644 --- a/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx +++ b/site/source/components/simulationExplanation/InstitutionsPartenaires.tsx @@ -1,4 +1,3 @@ -import { Grid } from '@mui/material' import Value, { Condition, WhenApplicable, @@ -8,18 +7,19 @@ import RuleLink from '@/components/RuleLink' import { FromBottom } from '@/components/ui/animate' import Emoji from '@/components/utils/Emoji' import { useEngine } from '@/components/utils/EngineContext' +import { Message } from '@/design-system' +import { Grid } from '@/design-system/layout' import { H2, H3 } from '@/design-system/typography/heading' import { Body, SmallBody } from '@/design-system/typography/paragraphs' import assuranceMaladieSrc from '@/images/assurance-maladie.svg' import dgfipSrc from '@/images/logo-dgfip.svg' import * as logosSrc from '@/images/logos-caisses-retraite' import urssafSrc from '@/images/Urssaf.svg' +import { targetUnitSelector } from '@/selectors/simulationSelectors' import { DottedName } from 'modele-social' import { Trans } from 'react-i18next' import { useSelector } from 'react-redux' -import { targetUnitSelector } from '@/selectors/simulationSelectors' import styled from 'styled-components' -import { Message } from '@/design-system' export default function InstitutionsPartenaires() { const unit = useSelector(targetUnitSelector) diff --git a/site/source/components/simulationExplanation/SalaryExplanation.tsx b/site/source/components/simulationExplanation/SalaryExplanation.tsx index fc282b4b3..744c332a5 100644 --- a/site/source/components/simulationExplanation/SalaryExplanation.tsx +++ b/site/source/components/simulationExplanation/SalaryExplanation.tsx @@ -1,11 +1,10 @@ -import { Grid } from '@mui/material' import Distribution from '@/components/Distribution' import PaySlip from '@/components/PaySlip' import StackedBarChart from '@/components/StackedBarChart' import { FromTop } from '@/components/ui/animate' import Emoji from '@/components/utils/Emoji' import { useInversionFail } from '@/components/utils/EngineContext' -import { Container, Spacing } from '@/design-system/layout' +import { Container, Grid, Spacing } from '@/design-system/layout' import { H2 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' import { SmallBody } from '@/design-system/typography/paragraphs' @@ -36,7 +35,12 @@ export default function SalaryExplanation() { theme.colors.bases.primary[100]}>
- +

Fiche de paie diff --git a/site/source/components/ui/Checklist/index.tsx b/site/source/components/ui/Checklist/index.tsx index 594129560..38c6f705e 100644 --- a/site/source/components/ui/Checklist/index.tsx +++ b/site/source/components/ui/Checklist/index.tsx @@ -1,8 +1,7 @@ -import { Grid } from '@mui/material' import { Markdown } from '@/components/utils/markdown' import { ScrollToElement } from '@/components/utils/Scroll' import { Checkbox } from '@/design-system/field' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { Link } from '@/design-system/typography/link' import React, { useEffect, useState } from 'react' import { Trans } from 'react-i18next' diff --git a/site/source/design-system/accordion/index.tsx b/site/source/design-system/accordion/index.tsx index 4327d5e09..ad59c00a5 100644 --- a/site/source/design-system/accordion/index.tsx +++ b/site/source/design-system/accordion/index.tsx @@ -116,11 +116,8 @@ const ChevronRightMedium = styled.img.attrs({ src: chevronImg })<{ `} ` -const StyledContent = styled(animated.div)` +const StyledContent: any = styled(animated.div)` overflow: hidden; - ${({ theme }) => css` - /* border-top: 1px solid ${theme.colors.bases.primary[400]}; */ - `} > div { margin: ${({ theme }) => theme.spacings.lg}; } diff --git a/site/source/design-system/answer-group/index.tsx b/site/source/design-system/answer-group/index.tsx index 3823693d9..d59169a45 100644 --- a/site/source/design-system/answer-group/index.tsx +++ b/site/source/design-system/answer-group/index.tsx @@ -1,22 +1,21 @@ -import { Grid } from '@mui/material' -import { Children, ComponentProps, FunctionComponent, ReactNode } from 'react' +import { Children, FunctionComponent, ReactNode } from 'react' type AnswerGroupProps = { children: ReactNode -} & ComponentProps +} -const AnswerGroup: FunctionComponent = ({ - children, - ...props -}) => { +const AnswerGroup: FunctionComponent = ({ children }) => { return ( - +
{Children.map(children, (c, i) => ( - - {c} - +
{c}
))} - +
) } diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx index 9ec47b5cb..23bf334ce 100644 --- a/site/source/design-system/card/Card.tsx +++ b/site/source/design-system/card/Card.tsx @@ -8,7 +8,6 @@ import { useExternalLinkProps, } from '@/design-system/typography/link' import { Body } from '@/design-system/typography/paragraphs' -import { PropsOf } from '@emotion/react' import React, { ReactHTML, useRef } from 'react' import styled, { css, ThemeProvider } from 'styled-components' @@ -22,7 +21,7 @@ type CardProps = GenericCardProps & { ctaLabel?: React.ReactNode children: React.ReactNode compact?: boolean - bodyAs?: PropsOf['as'] + bodyAs?: React.ComponentProps['as'] } export function Card({ diff --git a/site/source/design-system/footer/column.tsx b/site/source/design-system/footer/column.tsx index 763b80b66..bc298c50a 100644 --- a/site/source/design-system/footer/column.tsx +++ b/site/source/design-system/footer/column.tsx @@ -1,4 +1,4 @@ -import { Grid } from '@mui/material' +import { Grid } from '@/design-system/layout' import { H1 } from '@/design-system/typography/heading' import { ReactNode } from 'react' import styled from 'styled-components' diff --git a/site/source/design-system/footer/container.tsx b/site/source/design-system/footer/container.tsx index 238e20cf7..c7c1ba4f3 100644 --- a/site/source/design-system/footer/container.tsx +++ b/site/source/design-system/footer/container.tsx @@ -1,4 +1,4 @@ -import Grid from '@mui/material/Grid' +import { Grid } from '@/design-system/layout' import { ReactNode } from 'react' import styled from 'styled-components' diff --git a/site/source/design-system/layout/Grid.tsx b/site/source/design-system/layout/Grid.tsx new file mode 100644 index 000000000..fdcb40d54 --- /dev/null +++ b/site/source/design-system/layout/Grid.tsx @@ -0,0 +1,146 @@ +import styled, { css } from 'styled-components' +import { SpacingKey } from '../theme' +import { useContext, createContext } from 'react' + +const breakPoints = ['sm', 'md', 'lg', 'xl'] as Array + +type ContainerContext = { + nbColumns: number + rowSpacing: number + columnSpacing: number +} + +const GridContainerContext = createContext({ + nbColumns: 12, + columnSpacing: 0, + rowSpacing: 0, +}) + +type BreakpointConfig = number | true | 'auto' | undefined +const breakPointCss = ( + breakPointConfig: BreakpointConfig, + nbColumns: number +) => { + if (breakPointConfig === undefined) { + return '' + } else if (breakPointConfig === true) { + return css` + max-width: 100%; + flex-basis: 0; + flex-grow: 1; + ` + } else if (breakPointConfig === 'auto') { + return css` + flex: 0 0 auto; + width: auto; + ` + } else { + return css` + flex-basis: ${(breakPointConfig / nbColumns) * 100}%; + flex-grow: 0; + ` + } +} + +type GridProps = + | ({ item: true; container?: false } & GridItemProps) + | ({ item?: false; container: true } & GridContainerProps) + +/** + * An hybrid Flexbox/Grid layout component + */ +export default function FluidGrid(props: GridProps) { + if (props.container === true) { + return + } else if (props?.item === true) { + return + } + + return null +} + +const StyledGridContainer = styled.div` + display: flex; + flex-wrap: wrap; + flex-direction: row; + margin-left: -${({ theme, columnSpacing }) => theme.spacing[columnSpacing ?? 0]}; + margin-top: -${({ theme, rowSpacing }) => theme.spacing[rowSpacing ?? 0]}; +` + +const StyledGridItem = styled.div` + padding-left: ${({ theme, columnSpacing }) => + theme.spacing[columnSpacing ?? 0]}; + padding-top: ${({ theme, rowSpacing }) => theme.spacing[rowSpacing ?? 0]}; + ${(props) => breakPointCss(props.xs, props.nbColumns)} + + ${(props) => + breakPoints + .filter((id) => props[id]) + .map( + (id) => css` + @media (min-width: ${({ theme }) => theme.breakpointsWidth[id]}) { + ${breakPointCss(props[id], props.nbColumns)} + } + ` + )} +` +type GridContainerProps = { + columns?: number + spacing?: number + columnSpacing?: number + rowSpacing?: number + children: React.ReactNode +} & React.ComponentPropsWithoutRef<'div'> + +function GridContainer({ + columns = 12, + spacing = 0, + columnSpacing, + rowSpacing, + children, + ...otherProps +}: GridContainerProps) { + return ( + + + {children} + + + ) +} + +type GridItemProps = { + children?: React.ReactNode + className?: string +} & Partial> & + React.ComponentPropsWithoutRef<'div'> + +function GridItem({ + xs, + sm, + md, + lg, + xl, + children, + ...otherProps +}: GridItemProps) { + const containerContext = useContext(GridContainerContext) + + return ( + + {children} + + ) +} diff --git a/site/source/design-system/layout/index.ts b/site/source/design-system/layout/index.ts index ed2df9414..4f7a23c01 100644 --- a/site/source/design-system/layout/index.ts +++ b/site/source/design-system/layout/index.ts @@ -1,6 +1,7 @@ import styled from 'styled-components' export { default as Container } from './Container' +export { default as Grid } from './Grid' export const Spacing = styled.div< | { xxl: true } diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx index a3257d0f6..d3e68e2bb 100644 --- a/site/source/design-system/message/index.tsx +++ b/site/source/design-system/message/index.tsx @@ -1,11 +1,11 @@ +import { Palette, SmallPalette } from '@/types/styled' import React from 'react' import styled, { css, ThemeProvider } from 'styled-components' -import baseIcon from './baseIcon.svg' -import infoIcon from './infoIcon.svg' -import errorIcon from './errorIcon.svg' -import successIcon from './successIcon.svg' import { Body } from '../typography/paragraphs' -import { Palette, SmallPalette } from '../styled' +import baseIcon from './baseIcon.svg' +import errorIcon from './errorIcon.svg' +import infoIcon from './infoIcon.svg' +import successIcon from './successIcon.svg' type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success' type MessageProps = { diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx index 38891cdba..8ef552e97 100644 --- a/site/source/design-system/popover/Popover.tsx +++ b/site/source/design-system/popover/Popover.tsx @@ -1,5 +1,5 @@ +import { Grid } from '@/design-system/layout' import { getIframeOffset, wrapperDebounceEvents } from '@/utils' -import { Grid } from '@mui/material' import { useButton } from '@react-aria/button' import { useDialog } from '@react-aria/dialog' import { FocusScope } from '@react-aria/focus' @@ -73,8 +73,20 @@ export default function Popover( - - + + [ + Object.entries(baseTheme.breakpointsWidth).map(([key, value]) => [ key, Number.parseInt(value), ]) ) as Record -export const theme: DefaultTheme = createTheme({ +const theme: DefaultTheme = { breakpoints: { values: { xs: 0, ...breakpoints, }, }, - spacing: Object.values(defaultTheme.spacings), + spacing: Object.values(baseTheme.spacings), - ...defaultTheme, -}) + ...baseTheme, +} + +export default theme diff --git a/site/source/pages/Budget/Budget.tsx b/site/source/pages/Budget/Budget.tsx index debcbea7a..055200156 100644 --- a/site/source/pages/Budget/Budget.tsx +++ b/site/source/pages/Budget/Budget.tsx @@ -1,4 +1,4 @@ -import { Grid } from '@mui/material' +import { Grid } from '@/design-system/layout' import MoreInfosOnUs from '@/components/MoreInfosOnUs' import Emoji from '@/components/utils/Emoji' import { Markdown } from '@/components/utils/markdown' diff --git a/site/source/pages/Creer/CreationChecklist.tsx b/site/source/pages/Creer/CreationChecklist.tsx index 8c8657ed0..000757e1b 100644 --- a/site/source/pages/Creer/CreationChecklist.tsx +++ b/site/source/pages/Creer/CreationChecklist.tsx @@ -10,14 +10,13 @@ import Scroll from '@/components/utils/Scroll' import { SitePathsContext } from '@/components/utils/SitePathsContext' import { Button } from '@/design-system/buttons' import { Article } from '@/design-system/card' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { H1, H2 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' import { Li, Ul } from '@/design-system/typography/list' import { Body, SmallBody } from '@/design-system/typography/paragraphs' import { RootState } from '@/reducers/rootReducer' import { LegalStatus } from '@/selectors/companyStatusSelectors' -import { Grid } from '@mui/material' import { useContext } from 'react' import { Helmet } from 'react-helmet-async' import { Trans, useTranslation } from 'react-i18next' diff --git a/site/source/pages/Creer/Home.tsx b/site/source/pages/Creer/Home.tsx index ca748544a..38f00f350 100644 --- a/site/source/pages/Creer/Home.tsx +++ b/site/source/pages/Creer/Home.tsx @@ -1,18 +1,18 @@ -import { Grid } from '@mui/material' import PageHeader from '@/components/PageHeader' import { FromBottom } from '@/components/ui/animate' import Meta from '@/components/utils/Meta' import { SitePathsContext } from '@/components/utils/SitePathsContext' import { Button } from '@/design-system/buttons' import { Card } from '@/design-system/card' +import { Grid } from '@/design-system/layout' import { H2 } from '@/design-system/typography/heading' import { Intro, SmallBody } from '@/design-system/typography/paragraphs' +import { RootState } from '@/reducers/rootReducer' +import { useNextQuestionUrl } from '@/selectors/companyStatusSelectors' import { useContext } from 'react' import { Helmet } from 'react-helmet-async' import { Trans, useTranslation } from 'react-i18next' import { useSelector } from 'react-redux' -import { RootState } from '@/reducers/rootReducer' -import { useNextQuestionUrl } from '@/selectors/companyStatusSelectors' import { TrackPage } from '../../ATInternetTracking' import créerSvg from './créer.svg' diff --git a/site/source/pages/Documentation.tsx b/site/source/pages/Documentation.tsx index 47663c160..d0d7dc7d1 100644 --- a/site/source/pages/Documentation.tsx +++ b/site/source/pages/Documentation.tsx @@ -7,13 +7,12 @@ import Meta from '@/components/utils/Meta' import { ScrollToTop } from '@/components/utils/Scroll' import { SitePathsContext } from '@/components/utils/SitePathsContext' import { Button } from '@/design-system/buttons' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { H1, H2, H3, H4, H5 } from '@/design-system/typography/heading' import { Link, StyledLink } from '@/design-system/typography/link' import { Li, Ul } from '@/design-system/typography/list' import { Body } from '@/design-system/typography/paragraphs' import { RootState } from '@/reducers/rootReducer' -import { Grid } from '@mui/material' import rules, { DottedName } from 'modele-social' import { getDocumentationSiteMap, RulePage } from 'publicodes-react' import { ComponentType, useContext, useMemo } from 'react' diff --git a/site/source/pages/Landing/Landing.tsx b/site/source/pages/Landing/Landing.tsx index eed8f1092..0e2f6b262 100644 --- a/site/source/pages/Landing/Landing.tsx +++ b/site/source/pages/Landing/Landing.tsx @@ -4,13 +4,13 @@ import PageHeader from '@/components/PageHeader' import Meta from '@/components/utils/Meta' import { SitePathsContext } from '@/components/utils/SitePathsContext' import { Button } from '@/design-system/buttons' -import { Container, Spacing } from '@/design-system/layout' +import { Container, Grid, Spacing } from '@/design-system/layout' import { H2 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' import { Body, Intro } from '@/design-system/typography/paragraphs' -import { Grid } from '@mui/material' import { useContext } from 'react' import { Trans } from 'react-i18next' +import styled from 'styled-components' import { TrackPage } from '../../ATInternetTracking' import { SimulateurCard } from '../Simulateurs/Home' import useSimulatorsData from '../Simulateurs/metadata' @@ -69,8 +69,10 @@ export default function Landing() { @@ -101,13 +103,13 @@ export default function Landing() { theme.colors.bases.primary[100]}> - - + + - +

Qui sommes-nous ?

@@ -155,3 +157,11 @@ export default function Landing() { ) } + +const HideOnMobile = styled(Grid)` + display: none; + + @media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) { + display: block; + } +` diff --git a/site/source/pages/Landing/SearchOrCreate.tsx b/site/source/pages/Landing/SearchOrCreate.tsx index 35b37f76a..0e4cf855a 100644 --- a/site/source/pages/Landing/SearchOrCreate.tsx +++ b/site/source/pages/Landing/SearchOrCreate.tsx @@ -10,12 +10,11 @@ import { useEngine } from '@/components/utils/EngineContext' import { SitePathsContext } from '@/components/utils/SitePathsContext' import AnswerGroup from '@/design-system/answer-group' import { Button } from '@/design-system/buttons' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { H3 } from '@/design-system/typography/heading' import { useSetEntreprise } from '@/hooks/useSetEntreprise' import { RootState } from '@/reducers/rootReducer' import { getCookieValue } from '@/storage/readCookie' -import { Grid } from '@mui/material' import { useCallback, useContext, useEffect } from 'react' import { Trans } from 'react-i18next' import { useDispatch, useSelector } from 'react-redux' diff --git a/site/source/pages/Nouveautes/Nouveautes.tsx b/site/source/pages/Nouveautes/Nouveautes.tsx index f41485099..02ac5138b 100644 --- a/site/source/pages/Nouveautes/Nouveautes.tsx +++ b/site/source/pages/Nouveautes/Nouveautes.tsx @@ -1,4 +1,3 @@ -import { Grid } from '@mui/material' import { determinant, hideNewsBanner } from '@/components/layout/NewsBanner' import MoreInfosOnUs from '@/components/MoreInfosOnUs' import Emoji from '@/components/utils/Emoji' @@ -7,7 +6,7 @@ import Meta from '@/components/utils/Meta' import { ScrollToTop } from '@/components/utils/Scroll' import { SitePathsContext } from '@/components/utils/SitePathsContext' import { Item, Select } from '@/design-system/field/Select' -import { Container } from '@/design-system/layout' +import { Container, Grid } from '@/design-system/layout' import { H1 } from '@/design-system/typography/heading' import { GenericButtonOrLinkProps, Link } from '@/design-system/typography/link' import { Body } from '@/design-system/typography/paragraphs' @@ -89,7 +88,7 @@ export default function Nouveautés() { - + - - + + {data.map(({ name }, index) => (
  • @@ -111,7 +110,7 @@ export default function Nouveautés() {
    • ))}     -     + @@ -148,13 +147,19 @@ const TextRenderer = ({ children }: { children: string }) => ( ) -const NewsSection = styled.section` - display: flex; - justify-content: space-between; - align-items: flex-start; +const MobileGridItem = styled(Grid).attrs({ item: true, xs: 12 })` + display: block; - @media (min-width: 1250px) { - margin-left: -175px; + @media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) { + display: none; + } +` + +const DesktopGridItem = styled(Grid).attrs({ item: true, lg: 3 })` + display: none; + + @media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) { + display: block; } ` diff --git a/site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx b/site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx index 57534db3a..8db2abdc9 100644 --- a/site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx +++ b/site/source/pages/Simulateurs/EconomieCollaborative/ActivitésSelection.tsx @@ -1,8 +1,7 @@ -import { Grid } from '@mui/material' import { FromBottom } from '@/components/ui/animate' import Emoji from '@/components/utils/Emoji' import { ScrollToTop } from '@/components/utils/Scroll' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { H1, H2 } from '@/design-system/typography/heading' import { Body, SmallBody } from '@/design-system/typography/paragraphs' import { useContext } from 'react' diff --git a/site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx b/site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx index 93ff1c925..258ca417b 100644 --- a/site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx +++ b/site/source/pages/Simulateurs/EconomieCollaborative/VotreSituation.tsx @@ -1,10 +1,10 @@ -import { Grid } from '@mui/material' import PageFeedback from '@/components/Feedback' import { FromBottom } from '@/components/ui/animate' import Emoji from '@/components/utils/Emoji' import { ScrollToTop } from '@/components/utils/Scroll' import { SitePathsContext } from '@/components/utils/SitePathsContext' import { Button } from '@/design-system/buttons' +import { Grid } from '@/design-system/layout' import { Strong } from '@/design-system/typography' import { H1, H2, H3 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' diff --git a/site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx b/site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx index a23ac3aa5..2007ab024 100644 --- a/site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx +++ b/site/source/pages/Simulateurs/ExonerationCovid/ExonérationCovid.tsx @@ -6,9 +6,8 @@ import { useSynchronizedSituationState, } from '@/components/utils/SituationContext' import { Button } from '@/design-system/buttons' -import { Spacing } from '@/design-system/layout' +import { Grid, Spacing } from '@/design-system/layout' import { H3 } from '@/design-system/typography/heading' -import { Grid } from '@mui/material' import { DottedName as ExoCovidDottedNames } from 'exoneration-covid' import { PublicodesExpression } from 'publicodes' import { useCallback, useEffect } from 'react' @@ -115,7 +114,7 @@ export const ExonérationCovid = () => { - + {step2 ? (

    Vous souhaitez : - - - recruter, former vos salariés - - - financer vos projets d'investissement - - - résoudre un problème de trésorerie - - - être conseillé(e) en droit du travail - - - développer votre activité commerciale - - - vendre sur internet - - - vendre ou reprendre une entreprise - - - améliorer la santé et sécurité au travail - - - entrer dans une démarche de transition écologique & RSE - - + +
  • recruter, former vos salariés
    • +
  • financer vos projets d'investissement
    • +
  • résoudre un problème de trésorerie
    • +
  • être conseillé(e) en droit du travail
    • +
  • développer votre activité commerciale
    • +
  • vendre sur internet
    • +
  • vendre ou reprendre une entreprise
    • +
  • améliorer la santé et sécurité au travail
    • +
  • entrer dans une démarche de transition écologique & RSE
    • +     @@ -428,6 +423,15 @@ const companyDetailsConfig = { ] as DottedName[], } +const UlInColumns = styled.ul` + @media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) { + columns: 2; + } + @media (min-width: ${({ theme }) => theme.breakpointsWidth.lg}) { + columns: 3; + } +` + export const AskCompanyMissingDetails = () => { const sitePaths = useContext(SitePathsContext) useSimulationConfig(companyDetailsConfig, { path: sitePaths.gérer.index }) @@ -502,7 +506,13 @@ const PopoverOverwriteSituation = ({ l'écraser ? - +