diff --git a/site/source/components/StackedBarChart.tsx b/site/source/components/StackedBarChart.tsx index 20a37308c..9f5c610c1 100644 --- a/site/source/components/StackedBarChart.tsx +++ b/site/source/components/StackedBarChart.tsx @@ -117,6 +117,7 @@ type InnerStackedBarChartProps = { color?: string value: EvaluatedNode['nodeValue'] legend: React.ReactNode + title?: string key: string }> precision: Precision @@ -159,13 +160,14 @@ function InnerStackedBarChart({ data, precision }: InnerStackedBarChartProps) { // has a border so we don't want to display empty bars // (even with width 0). .filter(({ percentage }) => percentage !== 0) - .map(({ key, color, percentage }) => ( + .map(({ key, color, percentage, title }) => ( ))} @@ -204,6 +206,7 @@ export default function StackedRulesChart({ value: engine.evaluate({ valeur: dottedName, unité: targetUnit }) .nodeValue, legend: {title}, + title, color, }))} /> diff --git a/site/source/components/charts/PagesCharts.tsx b/site/source/components/charts/PagesCharts.tsx index 16d5de48c..4304cc9c6 100644 --- a/site/source/components/charts/PagesCharts.tsx +++ b/site/source/components/charts/PagesCharts.tsx @@ -28,13 +28,13 @@ type PagesChartProps = { } const Palette = [ '#1ea0f5', - '#697ad5', - '#b453b6', - '#ff2d96', - '#fc9e67', + '#94004A', '#fad750', - '#bed976', - '#82da9d', + '#B250B4', + '#CBE08F', + '#2F41A7', + '#fc9e67', + '#1F6B37', '#46dcc3', ] diff --git a/site/source/components/conversation/Conversation.tsx b/site/source/components/conversation/Conversation.tsx index 9f7f003b6..e037d6270 100644 --- a/site/source/components/conversation/Conversation.tsx +++ b/site/source/components/conversation/Conversation.tsx @@ -119,7 +119,12 @@ export default function Conversation({ {previousAnswers.length > 0 && ( - @@ -129,7 +134,6 @@ export default function Conversation({ size="XS" onPress={goToNext} light={!currentQuestionIsAnswered ? true : undefined} - color={!currentQuestionIsAnswered ? 'secondary' : undefined} aria-label={ currentQuestionIsAnswered ? t('Suivant, passer à la question suivante') diff --git a/site/source/components/search/RulesInfiniteHits/index.tsx b/site/source/components/search/RulesInfiniteHits/index.tsx index 29c96bf96..59321c9b0 100644 --- a/site/source/components/search/RulesInfiniteHits/index.tsx +++ b/site/source/components/search/RulesInfiniteHits/index.tsx @@ -58,16 +58,6 @@ const Hit = (hit: THit) => { ) } -const HideableTitle = connectStats(({ nbHits }) => { - return nbHits === 0 ? ( - <> - ) : ( -

- Règles de calculs -

- ) -}) - const HitList = styled.ol` display: flex; flex-direction: column; @@ -117,7 +107,6 @@ const Hits = connectInfiniteHits(({ hits, hasMore, refineNext }: IHits) => { export const RulesInfiniteHits = () => { return ( <> - ) diff --git a/site/source/components/search/SimulatorHits.tsx b/site/source/components/search/SimulatorHits.tsx index cd3fbb298..1b85f4139 100644 --- a/site/source/components/search/SimulatorHits.tsx +++ b/site/source/components/search/SimulatorHits.tsx @@ -1,6 +1,7 @@ import { Trans } from 'react-i18next' import { Hit } from 'react-instantsearch-core' import { connectHits } from 'react-instantsearch-dom' +import styled from 'styled-components' import InfoBulle from '@/design-system/InfoBulle' import { SmallCard } from '@/design-system/card' @@ -32,20 +33,24 @@ const SimulateurCardHit = ({ hit: AlgoliaSimulatorHit }) => { return ( - } to={{ pathname: path }} state={{ fromSimulateurs: true }} title={ -

+

{' '} {tooltip && {tooltip}} -

+

} /> ) } +const StyledSmallCard = styled(SmallCard)` + border: solid 1px ${({ theme }) => theme.colors.bases.primary[800]}; +` + export const SimulatorHits = connectHits< { hits: AlgoliaSimulatorHit[] }, AlgoliaSimulatorHit @@ -69,11 +74,18 @@ export const SimulatorHits = connectHits< Simulateurs )} - + {hits.map( (hit) => hit.pathId && ( - + ) diff --git a/site/source/components/simulationExplanation/SalaryExplanation.tsx b/site/source/components/simulationExplanation/SalaryExplanation.tsx index 60b9973a7..5e95b4155 100644 --- a/site/source/components/simulationExplanation/SalaryExplanation.tsx +++ b/site/source/components/simulationExplanation/SalaryExplanation.tsx @@ -17,8 +17,6 @@ import { useCurrentSimulatorData } from '@/hooks/useCurrentSimulatorData' export default function SalaryExplanation() { const payslipRef = useRef(null) - const { t } = useTranslation() - if (useInversionFail()) { return null } @@ -148,7 +146,7 @@ function RevenueRepartitionSection(props: { onSeePayslip: () => void }) { currentSimulatorData?.pathId === 'simulateurs.sasu' ? 'dirigeant . assimilé salarié . cotisations' : 'salarié . cotisations', - color: colors.bases.secondary[300], + color: colors.extended.grey[700], }, ]} /> diff --git a/site/source/components/ui/Progress.tsx b/site/source/components/ui/Progress.tsx index 48a3860ca..da7478f7b 100644 --- a/site/source/components/ui/Progress.tsx +++ b/site/source/components/ui/Progress.tsx @@ -1,6 +1,8 @@ import { useProgressBar } from '@react-aria/progress' import styled from 'styled-components' +import { Body } from '@/design-system/typography/paragraphs' + type ProgressProps = { progress: number minValue?: number @@ -22,20 +24,20 @@ export default function Progress({ value: progress, } - const a11yPrefixLabel = `Étape ${progress + step} sur ${String(maxValue)}, ` + const a11yPrefixLabel = `Étape ${progress + step} sur ${String(maxValue)}` const { progressBarProps, labelProps } = useProgressBar(propsBar) return (
- - {`${a11yPrefixLabel} ${propsBar.label}`} - + + {a11yPrefixLabel} {propsBar.label} +
) } @@ -50,3 +52,9 @@ const ProgressBar = styled.div` background-color: ${({ theme }) => theme.colors.bases.primary[500]}; height: ${({ theme }) => theme.spacings.xxs}; ` +const StyledBody = styled(Body)` + font-size: 0.825rem; + padding: 0 1.5rem; + margin-bottom: 0; + color: ${({ theme }) => theme.colors.extended.grey[600]}!important; +` diff --git a/site/source/design-system/card/Article.tsx b/site/source/design-system/card/Article.tsx index 24f520b38..2349dd916 100644 --- a/site/source/design-system/card/Article.tsx +++ b/site/source/design-system/card/Article.tsx @@ -66,6 +66,7 @@ const StyledArticle = styled.div` padding: ${({ theme }) => theme.spacings.lg}; padding-top: ${({ theme }) => theme.spacings.sm}; border-radius: ${({ theme }) => theme.box.borderRadius}; + border: solid 1px ${({ theme }) => theme.colors.extended.grey[600]}; transition: background-color 0.15s; cursor: pointer; display: block; diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx index 2cbf3d480..0f2a945bd 100644 --- a/site/source/design-system/card/Card.tsx +++ b/site/source/design-system/card/Card.tsx @@ -45,7 +45,7 @@ export function Card({ ...ariaButtonProps }: CardProps) { const ref = useRef(null) - const titleProps = getTitleProps(title, 'h2') + const titleProps = getTitleProps(title, 'h3') const linkProps = useExternalLinkProps(ariaButtonProps) const buttonOrLinkProps = useButtonOrLink(ariaButtonProps, ref) diff --git a/site/source/design-system/layout/Grid.tsx b/site/source/design-system/layout/Grid.tsx index 7525eab88..bff87b9b6 100644 --- a/site/source/design-system/layout/Grid.tsx +++ b/site/source/design-system/layout/Grid.tsx @@ -1,4 +1,4 @@ -import { createContext, useContext } from 'react' +import { ComponentType, ReactNode, createContext, useContext } from 'react' import styled, { css } from 'styled-components' import { SpacingKey } from '../theme' @@ -95,6 +95,7 @@ type GridContainerProps = { columnSpacing?: number rowSpacing?: number children: React.ReactNode + as?: string | ComponentType | undefined } & React.ComponentPropsWithoutRef<'div'> function GridContainer({ @@ -127,6 +128,7 @@ function GridContainer({ type GridItemProps = { children?: React.ReactNode className?: string + as?: string | ComponentType | undefined } & Partial> & React.ComponentPropsWithoutRef<'div'> diff --git a/site/source/pages/Plan.tsx b/site/source/pages/Plan.tsx index 9e8495469..c832f3da6 100644 --- a/site/source/pages/Plan.tsx +++ b/site/source/pages/Plan.tsx @@ -31,98 +31,75 @@ export default function Plan() {
  • -

    - - Page d'accueil - -

    + + Page d'accueil +
  • -

    - - Créer une entreprise - -

    + + Créer une entreprise +
    • -

      - - Après la création - -

      + + Après la création +
    • -

      - - Choix du statut juridique - -

      + + Choix du statut juridique +
  • -

    - - Gérer mon activité - -

    + + Gérer mon activité +
    • -

      - - Embaucher - -

      + + Embaucher +
    • -

      - - Protection sociale - -

      + + Protection sociale +
    • -

      - - - Assistant à la détermination des charges sociales - déductibles - - -

      + + + Assistant à la détermination des charges sociales déductibles + +
    • -

      - - Demande de mobilité internationale - -

      + + Demande de mobilité internationale +
  • -

    - - Simulateurs disponibles - -

    + + Simulateurs disponibles +
      {Object.entries(absoluteSitePaths.simulateurs) @@ -130,115 +107,89 @@ export default function Plan() { .map(([simulateurKey, simulateurPath]: [string, string]) => { return (
    • -

      - - { - simulatorData[ - simulateurKey as keyof typeof simulatorData - ].title - } - -

      + + { + simulatorData[ + simulateurKey as keyof typeof simulatorData + ].title + } +
      • ) })}
    • -

      - - Assistant au choix du statut juridique - -

      + + Assistant au choix du statut juridique +
    • -

      - - - Assistant à la déclaration des revenus des plateformes en - ligne - - -

      + + + Assistant à la déclaration des revenus des plateformes en + ligne + +
  • -

    - - Nouveautés - -

    + + Nouveautés +
  • -

    - - Budget - -

    + + Budget +
  • -

    - - Accessibilité - -

    + + Accessibilité +
  • -

    - - Statistiques - -

    + + Statistiques +
  • -

    - - Outils pour les développeurs - -

    + + Outils pour les développeurs +
    • -

      - - API REST de simulation - -

      + + API REST de simulation +
    • -

      - - Intégrer le module Web - -

      + + Intégrer le module Web +
    • -

      - - - Utiliser les calculs des simulateurs dans votre application - - -

      + + + Utiliser les calculs des simulateurs dans votre application + +
    • -

      - - Utiliser avec un tableur - -

      + + Utiliser avec un tableur +
  • -

    - - Documentation - -

    + + Documentation +
    • diff --git a/site/source/pages/_landing/Landing.tsx b/site/source/pages/_landing/Landing.tsx index 53fe66163..b39c1d561 100644 --- a/site/source/pages/_landing/Landing.tsx +++ b/site/source/pages/_landing/Landing.tsx @@ -10,6 +10,7 @@ import { Button } from '@/design-system/buttons' import { Container, Grid, Spacing } from '@/design-system/layout' import { H2 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' +import { Li, Ul } from '@/design-system/typography/list' import { Body, Intro } from '@/design-system/typography/paragraphs' import { useGetFullURL } from '@/hooks/useGetFullURL' import useSimulatorsData from '@/hooks/useSimulatorsData' @@ -88,7 +89,9 @@ export default function Landing() { `} > + + -

    +

    Ressources utiles -

    + | undefined } export function SimulateurCard({ @@ -224,6 +226,7 @@ export function SimulateurCard({ beta, small = false, fromGérer = false, + as = undefined, ...props }: SimulateurCardProps) { const isIframe = useIsEmbedded() @@ -241,14 +244,14 @@ export function SimulateurCard({ }} state={fromGérer ? { fromGérer: true } : { fromSimulateurs: true }} title={ -

    +

    {shortName} {tooltip && {tooltip}} {beta && ( }> Bêta )} -

    +

    } role="link" /> diff --git a/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx b/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx index a6002a40d..cdd7bd141 100644 --- a/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx +++ b/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx @@ -77,7 +77,7 @@ function Explanation() { dottedName: 'dirigeant . auto-entrepreneur . cotisations et contributions', title: t('Cotisations'), - color: colors.bases.secondary[300], + color: colors.extended.grey[700], }, ]} /> diff --git a/site/source/pages/simulateurs/dividendes/Dividendes.tsx b/site/source/pages/simulateurs/dividendes/Dividendes.tsx index 6d03493c6..ec788fc25 100644 --- a/site/source/pages/simulateurs/dividendes/Dividendes.tsx +++ b/site/source/pages/simulateurs/dividendes/Dividendes.tsx @@ -140,7 +140,7 @@ const DividendesExplanation = () => { dottedName: 'bénéficiaire . dividendes . cotisations et contributions', title: t('Cotisations'), - color: colors.bases.secondary[300], + color: colors.extended.grey[700], }, ]} /> diff --git a/site/source/pages/statistiques/DemandesUtilisateurs.tsx b/site/source/pages/statistiques/DemandesUtilisateurs.tsx index b3cebbf83..900d31cab 100644 --- a/site/source/pages/statistiques/DemandesUtilisateurs.tsx +++ b/site/source/pages/statistiques/DemandesUtilisateurs.tsx @@ -68,6 +68,7 @@ function Pagination({ items }: PaginationProps) { setCurrentPage(i)} currentPage={currentPage === i} + aria-selected={currentPage === i ? true : undefined} key={i} > {i + 1} @@ -111,11 +112,10 @@ type PagerButtonProps = { const PagerButton = styled.button` font-family: ${({ theme }) => theme.fonts.main}; padding: 0.375rem 0.5rem; - border: 1px solid - ${({ theme, currentPage }) => - currentPage - ? theme.colors.bases.primary[500] - : theme.colors.extended.grey[300]}; + border: ${({ theme, currentPage }) => + currentPage + ? `2px solid ${theme.colors.bases.primary[500]}` + : `1px solid ${theme.colors.extended.grey[300]}`}; margin-right: 0.25rem; background-color: ${({ theme, currentPage }) => currentPage diff --git a/site/source/pages/statistiques/SatisfactionChart.tsx b/site/source/pages/statistiques/SatisfactionChart.tsx index 90c915613..9eeccebe2 100644 --- a/site/source/pages/statistiques/SatisfactionChart.tsx +++ b/site/source/pages/statistiques/SatisfactionChart.tsx @@ -25,10 +25,10 @@ export const SatisfactionStyle: [ SatisfactionLevel, { emoji: string; color: string } ][] = [ - [SatisfactionLevel.Mauvais, { emoji: '🙁', color: '#D97C76' }], - [SatisfactionLevel.Moyen, { emoji: '😐', color: '#f3dd68' }], - [SatisfactionLevel.Bien, { emoji: '🙂', color: '#90e789' }], - [SatisfactionLevel.TrèsBien, { emoji: '😀', color: '#17B890' }], + [SatisfactionLevel.Mauvais, { emoji: '🙁', color: '#F66775' }], + [SatisfactionLevel.Moyen, { emoji: '😐', color: '#4A184F' }], + [SatisfactionLevel.Bien, { emoji: '🙂', color: '#0F9970' }], + [SatisfactionLevel.TrèsBien, { emoji: '😀', color: '#02412F' }], ] function toPercentage(data: Record) {