From 95fa01bb99fe52c43d7a501e2daa7b9e1f86b14f Mon Sep 17 00:00:00 2001 From: Johan Girod Date: Thu, 20 Jan 2022 11:39:11 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=F0=9F=93=A3=20Affiche=20le=20logo?= =?UTF-8?q?=20bien=20en=20vu=20dans=20les=20int=C3=A9grations=20iframes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChiffreAffairesActivitéMixte.tsx | 2 +- site/source/components/Logo.tsx | 22 ++++ site/source/components/SchemeComparaison.tsx | 3 +- .../SimulationGoal.tsx} | 86 ++----------- .../components/Simulation/SimulationGoals.tsx | 121 ++++++++++++++++++ site/source/components/Simulation/index.tsx | 3 +- site/source/components/layout/Header.tsx | 21 ++- site/source/components/utils/colors.tsx | 2 +- site/source/iframe-integration-script.js | 20 +-- site/source/pages/Nouveautes/Nouveautes.tsx | 6 +- .../pages/Simulateurs/ArtisteAuteur.tsx | 2 +- .../pages/Simulateurs/AutoEntrepreneur.tsx | 2 +- .../pages/Simulateurs/ChômagePartiel.tsx | 2 +- site/source/pages/Simulateurs/Dividendes.tsx | 2 +- .../source/pages/Simulateurs/ImpôtSociété.tsx | 2 +- site/source/pages/Simulateurs/Indépendant.tsx | 16 +-- site/source/pages/Simulateurs/SASU.tsx | 2 +- site/source/pages/Simulateurs/Salarié.tsx | 2 +- 18 files changed, 185 insertions(+), 131 deletions(-) create mode 100644 site/source/components/Logo.tsx rename site/source/components/{SimulationGoals.tsx => Simulation/SimulationGoal.tsx} (66%) create mode 100644 site/source/components/Simulation/SimulationGoals.tsx diff --git a/site/source/components/ChiffreAffairesActivitéMixte.tsx b/site/source/components/ChiffreAffairesActivitéMixte.tsx index d637066ea..0f43216b9 100644 --- a/site/source/components/ChiffreAffairesActivitéMixte.tsx +++ b/site/source/components/ChiffreAffairesActivitéMixte.tsx @@ -9,7 +9,7 @@ import { useDispatch, useSelector } from 'react-redux' import { situationSelector } from 'Selectors/simulationSelectors' import styled from 'styled-components' import { Condition } from './EngineValue' -import { SimulationGoal } from './SimulationGoals' +import { SimulationGoal } from './Simulation' import { useEngine } from './utils/EngineContext' import { Markdown } from './utils/markdown' diff --git a/site/source/components/Logo.tsx b/site/source/components/Logo.tsx new file mode 100644 index 000000000..1670bfa9f --- /dev/null +++ b/site/source/components/Logo.tsx @@ -0,0 +1,22 @@ +import logoSvgFR from 'Images/logo-monentreprise.svg' +import logoSvgEN from 'Images/logo-mycompany.svg' +import { useTranslation } from 'react-i18next' +import styled from 'styled-components' + +/* Figma source: https://www.figma.com/file/YJUpRNO12lcPUDsEYEXzT9/logo-monentreprisee-urssaf-edition */ + +export function Logo() { + const { + i18n: { language }, + } = useTranslation() + + return language === 'fr' ? ( + + ) : ( + + ) +} + +const StyledLogo = styled.img.attrs({ 'data-test-id': 'logo img' })` + height: 100%; +` diff --git a/site/source/components/SchemeComparaison.tsx b/site/source/components/SchemeComparaison.tsx index cbc3a6fce..9cc230a3e 100644 --- a/site/source/components/SchemeComparaison.tsx +++ b/site/source/components/SchemeComparaison.tsx @@ -19,7 +19,8 @@ import styled, { css } from 'styled-components' import dirigeantComparaison from '../pages/Simulateurs/configs/rémunération-dirigeant.yaml' import SeeAnswersButton from './conversation/SeeAnswersButton' import PeriodSwitch from './PeriodSwitch' -import { SimulationGoal, SimulationGoals } from './SimulationGoals' +import { SimulationGoals, SimulationGoal } from './Simulation' + import Emoji from './utils/Emoji' import { useEngine } from './utils/EngineContext' import useSimulationConfig from './utils/useSimulationConfig' diff --git a/site/source/components/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoal.tsx similarity index 66% rename from site/source/components/SimulationGoals.tsx rename to site/source/components/Simulation/SimulationGoal.tsx index b041f9693..60596c1a4 100644 --- a/site/source/components/SimulationGoals.tsx +++ b/site/source/components/Simulation/SimulationGoal.tsx @@ -6,84 +6,16 @@ import { formatValue, UNSAFE_isNotApplicable } from 'publicodes' import React, { useCallback, useState } from 'react' import { useDispatch, useSelector } from 'react-redux' import { - firstStepCompletedSelector, situationSelector, targetUnitSelector, } from 'Selectors/simulationSelectors' -import styled, { css, ThemeProvider } from 'styled-components' -import RuleInput, { InputProps } from './conversation/RuleInput' -import RuleLink from './RuleLink' -import { Appear } from './ui/animate' -import AnimatedTargetValue from './ui/AnimatedTargetValue' -import { useEngine } from './utils/EngineContext' -import { useInitialRender, WatchInitialRender } from './utils/useInitialRender' - -type SimulationGoalsProps = { - className?: string - legend: string - publique?: - | 'employeur' - | 'particulier' - | 'artisteAuteur' - | 'independant' - | 'marin' - children: React.ReactNode - toggles?: React.ReactNode -} - -export function SimulationGoals({ - publique, - legend, - toggles, - children, -}: SimulationGoalsProps) { - const isFirstStepCompleted = useSelector(firstStepCompletedSelector) - - return ( - - {toggles && {toggles}} - - ({ ...theme, darkMode: true })}> -
- {legend} -
- {children} - - - - ) -} - -const ToggleSection = styled.div` - padding-bottom: ${({ theme }) => theme.spacings.sm}; -` - -const StyledSimulationGoals = styled.div< - Pick & { isFirstStepCompleted: boolean } ->` - z-index: 1; - position: relative; - padding: ${({ theme }) => `${theme.spacings.sm} ${theme.spacings.lg}`}; - border-radius: ${({ theme }) => theme.box.borderRadius}; - ${({ isFirstStepCompleted }) => - isFirstStepCompleted && - css` - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - `} - transition: border-radius 0.15s; - background: ${({ theme, publique }) => { - const colorPalette = publique - ? theme.colors.publics[publique] - : theme.colors.bases.primary - return css`linear-gradient(60deg, ${colorPalette[800]} 0%, ${colorPalette[600]} 100%);` - }}; -` +import styled from 'styled-components' +import RuleInput, { InputProps } from '../conversation/RuleInput' +import RuleLink from '../RuleLink' +import { Appear } from '../ui/animate' +import AnimatedTargetValue from '../ui/AnimatedTargetValue' +import { useEngine } from '../utils/EngineContext' +import { useInitialRender } from '../utils/useInitialRender' type SimulationGoalProps = { dottedName: DottedName @@ -230,3 +162,7 @@ const StyledGoal = styled.div` z-index: 1; padding: ${({ theme }) => theme.spacings.sm} 0; ` + +const LogoContainer = styled.div` + height: 3rem; +` diff --git a/site/source/components/Simulation/SimulationGoals.tsx b/site/source/components/Simulation/SimulationGoals.tsx new file mode 100644 index 000000000..55e28322f --- /dev/null +++ b/site/source/components/Simulation/SimulationGoals.tsx @@ -0,0 +1,121 @@ +import { Grid } from '@mui/material' +import { Link } from 'DesignSystem/typography/link' +import React from 'react' +import { useSelector } from 'react-redux' +import { firstStepCompletedSelector } from 'Selectors/simulationSelectors' +import styled, { css, ThemeProvider } from 'styled-components' +import { Logo } from '../Logo' +import { useIsEmbedded } from '../utils/embeddedContext' +import { WatchInitialRender } from '../utils/useInitialRender' + +type SimulationGoalsProps = { + className?: string + legend: string + publique?: + | 'employeur' + | 'particulier' + | 'artisteAuteur' + | 'independant' + | 'marin' + children: React.ReactNode + toggles?: React.ReactNode +} + +export function SimulationGoals({ + publique, + legend, + toggles, + children, +}: SimulationGoalsProps) { + const isFirstStepCompleted = useSelector(firstStepCompletedSelector) + + return ( + + + + + ({ ...theme, darkMode: true })}> +
+ {legend} +
+ {children} + + + + ) +} + +const StyledSimulationGoals = styled.div< + Pick & { isFirstStepCompleted: boolean } +>` + z-index: 1; + position: relative; + padding: ${({ theme }) => `${theme.spacings.sm} ${theme.spacings.lg}`}; + border-radius: ${({ theme }) => theme.box.borderRadius}; + ${({ isFirstStepCompleted }) => + isFirstStepCompleted && + css` + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + `} + transition: border-radius 0.15s; + background: ${({ theme, publique }) => { + const colorPalette = publique + ? theme.colors.publics[publique] + : theme.colors.bases.primary + return css`linear-gradient(60deg, ${colorPalette[800]} 0%, ${colorPalette[600]} 100%);` + }}; +` + +function TopSection({ toggles }: { toggles?: React.ReactNode }) { + const inIframe = useIsEmbedded() + + return ( + + {inIframe && ( + + + + + + )} + {toggles && ( + + {toggles} + + )} + + ) +} + +const ToggleSection = styled.div` + padding: ${({ theme }) => theme.spacings.sm} 0; + display: flex; + justify-content: right; + flex-wrap: wrap-reverse; + gap: ${({ theme }) => theme.spacings.md}; + > *:first-child { + flex: 1; + } + @media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) { + justify-content: center; + } +` + +const LogoContainer = styled(Link)` + height: 4rem; + padding: ${({ theme }) => theme.spacings.md} 0; + text-align: center; +` diff --git a/site/source/components/Simulation/index.tsx b/site/source/components/Simulation/index.tsx index a17c2a0e1..a58438e1d 100644 --- a/site/source/components/Simulation/index.tsx +++ b/site/source/components/Simulation/index.tsx @@ -14,6 +14,8 @@ import { FadeIn, FromTop } from './../ui/animate' import { Questions } from './Questions' export { Questions } from './Questions' +export { SimulationGoal } from './SimulationGoal' +export { SimulationGoals } from './SimulationGoals' type SimulationProps = { explanations?: React.ReactNode @@ -29,7 +31,6 @@ export default function Simulation({ customEndMessages, }: SimulationProps) { const firstStepCompleted = useSelector(firstStepCompletedSelector) - return ( <> {!firstStepCompleted && } diff --git a/site/source/components/layout/Header.tsx b/site/source/components/layout/Header.tsx index 4a7d82c40..51791b030 100644 --- a/site/source/components/layout/Header.tsx +++ b/site/source/components/layout/Header.tsx @@ -1,9 +1,8 @@ +import { Logo } from 'Components/Logo' import SearchButton from 'Components/SearchButton' import { SitePathsContext } from 'Components/utils/SitePathsContext' import { Container } from 'DesignSystem/layout' import { Link } from 'DesignSystem/typography/link' -import logoSvgFR from 'Images/logo-monentreprise.svg' -import logoSvgEN from 'Images/logo-mycompany.svg' import { useContext } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' @@ -18,14 +17,10 @@ export default function Header() { - {/* Figma source: https://www.figma.com/file/YJUpRNO12lcPUDsEYEXzT9/logo-monentreprisee-urssaf-edition */} - {language === 'fr' ? ( - - ) : ( - - )} + + + -
theme.spacings.sm} 0; ` -const Logo = styled.img.attrs({ 'data-test-id': 'logo img' })` - height: 70%; +const StyledLogo = styled.div` + height: 3rem; - @media (min-width: ${({ theme }) => theme.breakpointsWidth.sm}) { - height: 80%; + @media (max-width: ${({ theme }) => theme.breakpointsWidth.sm}) { + height: 2.5rem; } ` diff --git a/site/source/components/utils/colors.tsx b/site/source/components/utils/colors.tsx index 6d4b3093c..8c70b3d66 100644 --- a/site/source/components/utils/colors.tsx +++ b/site/source/components/utils/colors.tsx @@ -39,7 +39,7 @@ export function ThemeColorsProvider({ color, children }: ProviderProps) { [color] ) useEffect(() => { - divRef.current?.style.setProperty(`--${HUE_CSS_VARIABLE_NAME}`, '' + hue) + divRef.current?.style.setProperty(`--${HUE_CSS_VARIABLE_NAME}`, `${hue}deg`) divRef.current?.style.setProperty( `--${SATURATION_CSS_VARIABLE_NAME}`, `${saturation}%` diff --git a/site/source/iframe-integration-script.js b/site/source/iframe-integration-script.js index 1daa1d278..ef81efb38 100644 --- a/site/source/iframe-integration-script.js +++ b/site/source/iframe-integration-script.js @@ -1,6 +1,5 @@ import { iframeResizer } from 'iframe-resizer' -import logoFrSvg from 'Images/logo-monentreprise.svg' -import logoEnSvg from 'Images/logo-mycompany.svg' + import { hexToHSL } from './hexToHSL' let script = @@ -63,26 +62,13 @@ params.append('utm_medium', 'iframe') params.append('utm_campaign', 'newtext') url.search = params.toString() const simulateurURL = url.toString() -url.pathname = '/simulateurs' -const simulateursURL = url.toString() -url.pathname = '/' -const monEntrepriseUrl = url.toString() + links.innerHTML = `
- Ce simulateur a été créé par + Retrouvez ce simulateur et bien d'autres sur mon-entreprise.urssaf.fr
- Découvrez l'ensemble des simulateurs disponibles ici
- - - mon-entreprise.urssaf.fr : l'assistant officiel du créateur d'entreprise - -
` diff --git a/site/source/pages/Nouveautes/Nouveautes.tsx b/site/source/pages/Nouveautes/Nouveautes.tsx index 200484572..fc013e680 100644 --- a/site/source/pages/Nouveautes/Nouveautes.tsx +++ b/site/source/pages/Nouveautes/Nouveautes.tsx @@ -107,7 +107,7 @@ export default function Nouveautés() { - + )} - + @@ -184,7 +184,7 @@ const Sidebar = styled.ul` const SmallScreenSelect = styled.select`` -const MainBlock = styled.div` +const SimulationGoals = styled.div` flex: 1; > h1:first-child, diff --git a/site/source/pages/Simulateurs/ArtisteAuteur.tsx b/site/source/pages/Simulateurs/ArtisteAuteur.tsx index 690957714..08b3584a8 100644 --- a/site/source/pages/Simulateurs/ArtisteAuteur.tsx +++ b/site/source/pages/Simulateurs/ArtisteAuteur.tsx @@ -4,7 +4,7 @@ import PeriodSwitch from 'Components/PeriodSwitch' import SimulateurWarning from 'Components/SimulateurWarning' import Simulation from 'Components/Simulation' import { InstitutionsPartenairesArtisteAuteur } from 'Components/simulationExplanation/InstitutionsPartenaires' -import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals' +import { SimulationGoal, SimulationGoals } from 'Components/Simulation' import { EngineContext } from 'Components/utils/EngineContext' import useSimulationConfig from 'Components/utils/useSimulationConfig' import { H2 } from 'DesignSystem/typography/heading' diff --git a/site/source/pages/Simulateurs/AutoEntrepreneur.tsx b/site/source/pages/Simulateurs/AutoEntrepreneur.tsx index eedf7a110..9be04078c 100644 --- a/site/source/pages/Simulateurs/AutoEntrepreneur.tsx +++ b/site/source/pages/Simulateurs/AutoEntrepreneur.tsx @@ -4,7 +4,7 @@ import PeriodSwitch from 'Components/PeriodSwitch' import SimulateurWarning from 'Components/SimulateurWarning' import Simulation from 'Components/Simulation' import { InstitutionsPartenairesAutoEntrepreneur } from 'Components/simulationExplanation/InstitutionsPartenaires' -import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals' +import { SimulationGoal, SimulationGoals } from 'Components/Simulation' import StackedBarChart from 'Components/StackedBarChart' import { H2 } from 'DesignSystem/typography/heading' import { useContext } from 'react' diff --git a/site/source/pages/Simulateurs/ChômagePartiel.tsx b/site/source/pages/Simulateurs/ChômagePartiel.tsx index 68447e8e2..443d3861a 100644 --- a/site/source/pages/Simulateurs/ChômagePartiel.tsx +++ b/site/source/pages/Simulateurs/ChômagePartiel.tsx @@ -1,6 +1,6 @@ import RuleLink from 'Components/RuleLink' import Simulation from 'Components/Simulation' -import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals' +import { SimulationGoal, SimulationGoals } from 'Components/Simulation' import { FromTop } from 'Components/ui/animate' import Warning from 'Components/ui/WarningBlock' import { useIsEmbedded } from 'Components/utils/embeddedContext' diff --git a/site/source/pages/Simulateurs/Dividendes.tsx b/site/source/pages/Simulateurs/Dividendes.tsx index 5e7657c95..ce128afdb 100644 --- a/site/source/pages/Simulateurs/Dividendes.tsx +++ b/site/source/pages/Simulateurs/Dividendes.tsx @@ -3,7 +3,7 @@ import { HiddenOptionContext } from 'Components/conversation/ChoicesInput' import { Condition } from 'Components/EngineValue' import Notifications from 'Components/Notifications' import Simulation from 'Components/Simulation' -import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals' +import { SimulationGoal, SimulationGoals } from 'Components/Simulation' import StackedBarChart from 'Components/StackedBarChart' import Warning from 'Components/ui/WarningBlock' import { useEngine } from 'Components/utils/EngineContext' diff --git a/site/source/pages/Simulateurs/ImpôtSociété.tsx b/site/source/pages/Simulateurs/ImpôtSociété.tsx index f0e21f78c..2d8f27039 100644 --- a/site/source/pages/Simulateurs/ImpôtSociété.tsx +++ b/site/source/pages/Simulateurs/ImpôtSociété.tsx @@ -2,7 +2,7 @@ import { updateSituation } from 'Actions/actions' import RuleInput from 'Components/conversation/RuleInput' import Value from 'Components/EngineValue' import Notifications from 'Components/Notifications' -import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals' +import { SimulationGoal, SimulationGoals } from 'Components/Simulation' import { FromTop } from 'Components/ui/animate' import Warning from 'Components/ui/WarningBlock' import useSimulationConfig from 'Components/utils/useSimulationConfig' diff --git a/site/source/pages/Simulateurs/Indépendant.tsx b/site/source/pages/Simulateurs/Indépendant.tsx index 7c8018b28..4ea1cc40a 100644 --- a/site/source/pages/Simulateurs/Indépendant.tsx +++ b/site/source/pages/Simulateurs/Indépendant.tsx @@ -6,7 +6,7 @@ import PeriodSwitch from 'Components/PeriodSwitch' import SimulateurWarning from 'Components/SimulateurWarning' import Simulation from 'Components/Simulation' import IndépendantExplanation from 'Components/simulationExplanation/IndépendantExplanation' -import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals' +import { SimulationGoal, SimulationGoals } from 'Components/Simulation' import { useEngine } from 'Components/utils/EngineContext' import { SitePathsContext } from 'Components/utils/SitePathsContext' import { Radio, ToggleGroup } from 'DesignSystem/field' @@ -48,10 +48,11 @@ export default function IndépendantSimulation() { + <> + - + } /> @@ -66,15 +67,6 @@ export default function IndépendantSimulation() { ) } -const StyledToggleContainer = styled.div` - display: flex; - justify-content: space-between; - flex-wrap: wrap-reverse; - gap: ${({ theme }) => theme.spacings.md}; - @media (max-width: ${({ theme }) => theme.breakpointsWidth.md}) { - justify-content: center; - } -` function IndépendantSimulationGoals({ toggles = , diff --git a/site/source/pages/Simulateurs/SASU.tsx b/site/source/pages/Simulateurs/SASU.tsx index b6eba0cb2..6f55e42fd 100644 --- a/site/source/pages/Simulateurs/SASU.tsx +++ b/site/source/pages/Simulateurs/SASU.tsx @@ -2,7 +2,7 @@ import PeriodSwitch from 'Components/PeriodSwitch' import SimulateurWarning from 'Components/SimulateurWarning' import Simulation from 'Components/Simulation' import SalaryExplanation from 'Components/simulationExplanation/SalaryExplanation' -import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals' +import { SimulationGoal, SimulationGoals } from 'Components/Simulation' export function SASUSimulation() { return ( diff --git a/site/source/pages/Simulateurs/Salarié.tsx b/site/source/pages/Simulateurs/Salarié.tsx index d1ec70eed..b31f7f04f 100644 --- a/site/source/pages/Simulateurs/Salarié.tsx +++ b/site/source/pages/Simulateurs/Salarié.tsx @@ -4,7 +4,7 @@ import PeriodSwitch from 'Components/PeriodSwitch' import RuleLink from 'Components/RuleLink' import Simulation from 'Components/Simulation' import SalaryExplanation from 'Components/simulationExplanation/SalaryExplanation' -import { SimulationGoal, SimulationGoals } from 'Components/SimulationGoals' +import { SimulationGoal, SimulationGoals } from 'Components/Simulation' import { FromTop } from 'Components/ui/animate' import Emoji from 'Components/utils/Emoji' import { useEngine } from 'Components/utils/EngineContext'