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

🎨📣 Affiche le logo bien en vu dans les intégrations iframes

pull/1942/head
Johan Girod 2022-01-20 11:39:11 +01:00
parent d8132a5820
commit 95fa01bb99
18 changed files with 185 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/source/components/ChiffreAffairesActivitéMixte.tsx
View File

@ -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'

22
site/source/components/Logo.tsx Normal file
View File

@ -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' ? (
<StyledLogo alt="Logo Mon-entreprise, site Urssaf" src={logoSvgFR} />
) : (
<StyledLogo alt="Logo Mycompanyinfrance by Urssaf" src={logoSvgEN} />
)
}
const StyledLogo = styled.img.attrs({ 'data-test-id': 'logo img' })`
height: 100%;
`

3
site/source/components/SchemeComparaison.tsx
View File

@ -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'

86
site/source/components/SimulationGoals.tsx → site/source/components/Simulation/SimulationGoal.tsx
View File

@ -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 (
<WatchInitialRender>
{toggles && <ToggleSection>{toggles}</ToggleSection>}
<StyledSimulationGoals
isFirstStepCompleted={isFirstStepCompleted}
publique={publique}
role="group"
aria-labelledby="simulator-legend"
>
<ThemeProvider theme={(theme) => ({ ...theme, darkMode: true })}>
<div className="sr-only" id="simulator-legend">
{legend}
</div>
{children}
</ThemeProvider>
</StyledSimulationGoals>
</WatchInitialRender>
)
}
const ToggleSection = styled.div`
padding-bottom: ${({ theme }) => theme.spacings.sm};
`
const StyledSimulationGoals = styled.div<
Pick<SimulationGoalsProps, 'publique'> & { 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;
`

121
site/source/components/Simulation/SimulationGoals.tsx Normal file
View File

@ -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 (
<WatchInitialRender>
<TopSection toggles={toggles} />
<StyledSimulationGoals
isFirstStepCompleted={isFirstStepCompleted}
publique={publique}
role="group"
aria-labelledby="simulator-legend"
>
<ThemeProvider theme={(theme) => ({ ...theme, darkMode: true })}>
<div className="sr-only" id="simulator-legend">
{legend}
</div>
{children}
</ThemeProvider>
</StyledSimulationGoals>
</WatchInitialRender>
)
}
const StyledSimulationGoals = styled.div<
Pick<SimulationGoalsProps, 'publique'> & { 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 (
<Grid container justifyContent="space-between" gap={1}>
{inIframe && (
<Grid
item
xs={12}
sm="auto"
container
alignItems="flex-end"
justifyContent="center"
>
<LogoContainer href={process.env.FR_BASE_URL} target="_blank">
<Logo />
</LogoContainer>
</Grid>
)}
{toggles && (
<Grid item xs>
<ToggleSection>{toggles}</ToggleSection>
</Grid>
)}
</Grid>
)
}
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;
`

3
site/source/components/Simulation/index.tsx
View File

@ -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 && <TrackPage name="accueil" />}

21
site/source/components/layout/Header.tsx
View File

@ -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() {
<Container>
<StyledHeader>
<Link to={sitePaths.index}>
{/* Figma source: https://www.figma.com/file/YJUpRNO12lcPUDsEYEXzT9/logo-monentreprisee-urssaf-edition */}
{language === 'fr' ? (
<Logo alt="Logo Mon-entreprise, site Urssaf" src={logoSvgFR} />
) : (
<Logo alt="Logo Mycompanyinfrance by Urssaf" src={logoSvgEN} />
)}
<StyledLogo>
<Logo />
</StyledLogo>
</Link>
<div
css={`
flex: 1;
@ -52,10 +47,10 @@ const StyledHeader = styled.div`
margin: ${({ theme }) => 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;
}
`

2
site/source/components/utils/colors.tsx
View File

@ -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}%`

20
site/source/iframe-integration-script.js
View File

@ -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 = `
<div style="text-align: center; margin-bottom: 2rem; font-size: 80%">
Ce simulateur a été créé par
Retrouvez ce simulateur et bien d'autres sur
<a href="${simulateurURL}">
mon-entreprise.urssaf.fr
</a><br/>
Découvrez l'ensemble des simulateurs disponibles <a href="${simulateursURL}">ici</a><br/>
<a href="${monEntrepriseUrl}">
<img
style="height: 40px; margin: 10px"
src="${process.env.FR_BASE_URL + '/' + (lang === 'fr' ? logoFrSvg : logoEnSvg)}"
alt="mon-entreprise.urssaf.fr : l'assistant officiel du créateur d'entreprise"
/>
</a>
</div>
`

6
site/source/pages/Nouveautes/Nouveautes.tsx
View File

@ -107,7 +107,7 @@ export default function Nouveautés() {
</Sidebar>
</Grid>
<Grid item xs={12} lg={9}>
<MainBlock>
<SimulationGoals>
<MarkdownWithAnchorLinks
source={data[selectedRelease].description}
escapeHtml={false}
@ -128,7 +128,7 @@ export default function Nouveautés() {
</Link>
)}
</NavigationButtons>
</MainBlock>
</SimulationGoals>
</Grid>
</Grid>
<MoreInfosOnUs />
@ -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,

2
site/source/pages/Simulateurs/ArtisteAuteur.tsx
View File

@ -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'

2
site/source/pages/Simulateurs/AutoEntrepreneur.tsx
View File

@ -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'

2
site/source/pages/Simulateurs/ChômagePartiel.tsx
View File

@ -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'

2
site/source/pages/Simulateurs/Dividendes.tsx
View File

@ -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'

2
site/source/pages/Simulateurs/ImpôtSociété.tsx
View File

@ -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'

16
site/source/pages/Simulateurs/Indépendant.tsx
View File

@ -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() {
<IndépendantSimulationGoals
legend="Vos revenus d'indépendant"
toggles={
<StyledToggleContainer>
<>
<ImpositionSwitch />
<PeriodSwitch />
</StyledToggleContainer>
</>
}
/>
<Banner icon={'✍️'}>
@ -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 = <PeriodSwitch />,

2
site/source/pages/Simulateurs/SASU.tsx
View File

@ -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 (

2
site/source/pages/Simulateurs/Salarié.tsx
View File

@ -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'