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

Styled component update : Fix Errors on auto-entrepreneur

pull/2799/head
Johan Girod 2023-09-08 16:16:22 +02:00
parent 48310e09d1
commit 669da2d203
11 changed files with 74 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
site/source/components/Notifications.tsx
View File

@ -82,11 +82,11 @@ export default function Notifications() {
>
<StyledBody
as="div"
isMultiline={isMultiline(résumé ?? description ?? '')}
$isMultiline={isMultiline(résumé ?? description ?? '')}
>
<Markdown>{résumé ?? description ?? ''}</Markdown>
</StyledBody>
<Absolute isMultiline={isMultiline(résumé ?? description ?? '')}>
<Absolute $isMultiline={isMultiline(résumé ?? description ?? '')}>
<ExplicableRule dottedName={dottedName} light />
<CloseButton
aria-label={t('Fermer')}
@ -101,20 +101,20 @@ export default function Notifications() {
)
}
const StyledBody = styled(Body)<{ isMultiline: boolean }>`
margin-right: ${({ isMultiline }) => (isMultiline ? '3rem' : '5rem')};
const StyledBody = styled(Body)<{ $isMultiline: boolean }>`
margin-right: ${({ $isMultiline }) => ($isMultiline ? '3rem' : '5rem')};
`
const Absolute = styled.div<{ isMultiline: boolean }>`
const Absolute = styled.div<{ $isMultiline: boolean }>`
display: flex;
flex-direction: column;
flex-direction: ${({ isMultiline }) =>
isMultiline ? 'column-reverse' : 'row'};
flex-direction: ${({ $isMultiline }) =>
$isMultiline ? 'column-reverse' : 'row'};
align-items: flex-end;
position: absolute;
top: ${({ theme, isMultiline }) =>
isMultiline ? theme.spacings.xxs : theme.spacings.xs};
top: ${({ theme, $isMultiline }) =>
$isMultiline ? theme.spacings.xxs : theme.spacings.xs};
right: ${({ theme }) => theme.spacings.sm};
${CloseButton} {
margin-left: ${({ theme }) => theme.spacings.xxs};

6
site/source/components/QuickLinks.tsx
View File

@ -42,7 +42,7 @@ export default function QuickLinks() {
{links.map(({ label, dottedName }) => (
<StyledLink
key={dottedName}
underline={dottedName === currentQuestion}
$underline={dottedName === currentQuestion}
onPress={() => dispatch(goToQuestion(dottedName))}
aria-label={t('{{question}}, aller à la question : {{question}}', {
question: label,
@ -61,6 +61,6 @@ const StyledLinks = styled(SmallBody)`
gap: ${({ theme }) => theme.spacings.sm};
`
const StyledLink = styled(Link)<{ underline: boolean }>`
text-decoration: ${({ underline }) => (underline ? 'underline' : '')};
const StyledLink = styled(Link)<{ $underline: boolean }>`
text-decoration: ${({ $underline }) => ($underline ? 'underline' : '')};
`

6
site/source/components/SelectSimulationYear.tsx
View File

@ -9,8 +9,8 @@ import { EngineContext } from '@/components/utils/EngineContext'
import { Link as DesignSystemLink } from '@/design-system/typography/link'
import { updateSituation } from '@/store/actions/actions'
const Bold = styled.span<{ bold: boolean }>`
${({ bold }) => (bold ? 'font-weight: bold;' : '')}
const Bold = styled.span<{ $bold: boolean }>`
${({ $bold }) => ($bold ? 'font-weight: bold;' : '')}
`
export const SelectSimulationYear = () => {
@ -29,7 +29,7 @@ export const SelectSimulationYear = () => {
<Banner hideAfterFirstStep={false} icon={'📅'}>
<Trans i18nKey="pages.simulateurs.select-year.info">
Cette simulation concerne l'année{' '}
<Bold bold={actualYear !== 2023}>{{ actualYear }}</Bold>.{' '}
<Bold $bold={actualYear !== 2023}>{{ actualYear }}</Bold>.{' '}
</Trans>
<>
{choices

13
site/source/components/Simulation/SimulationGoal.tsx
View File

@ -124,8 +124,8 @@ export function SimulationGoal({
)}
</StyledGoalHeader>
</Grid>
<StyledGuideLectureContainer>
<StyledGuideLecture small={small} />
<StyledGuideLectureContainer item md>
<StyledGuideLecture />
</StyledGuideLectureContainer>
{editable ? (
<Grid item md={small ? 2 : 3} sm={small ? 3 : 4} xs={4}>
@ -174,10 +174,7 @@ export function SimulationGoal({
)
}
const StyledGuideLectureContainer = styled(Grid).attrs({
item: true,
md: true,
})`
const StyledGuideLectureContainer = styled(Grid)`
display: none;
@media (min-width: ${({ theme }) => theme.breakpointsWidth.md}) {
@ -185,9 +182,7 @@ const StyledGuideLectureContainer = styled(Grid).attrs({
}
`
const StyledGuideLecture = styled.div.attrs({ 'aria-hidden': true })<{
small: boolean
}>`
const StyledGuideLecture = styled.div.attrs({ 'aria-hidden': true })`
border-bottom: 1px dashed
${({ theme }) =>
theme.darkMode

46
site/source/components/Simulation/SimulationGoals.tsx
View File

@ -15,18 +15,12 @@ import { WatchInitialRender } from '../utils/useInitialRender'
type SimulationGoalsProps = {
legend: string
publique?:
| 'employeur'
| 'particulier'
| 'artisteAuteur'
| 'independant'
| 'marin'
children: React.ReactNode
toggles?: React.ReactNode
}
export function SimulationGoals({
publique,
legend,
toggles,
children,
@ -40,9 +34,8 @@ export function SimulationGoals({
<TopSection toggles={toggles} />
<SimulationGoalsContainer
isEmbeded={isEmbeded}
isFirstStepCompleted={isFirstStepCompleted}
publique={publique}
$isEmbeded={isEmbeded}
$isFirstStepCompleted={isFirstStepCompleted}
id="simulator-legend"
aria-live="polite"
>
@ -72,37 +65,26 @@ export function SimulationGoals({
)
}
export const SimulationGoalsContainer = styled.div<
Pick<SimulationGoalsProps, 'publique'> & {
isFirstStepCompleted: boolean
isEmbeded: boolean
}
>`
export const SimulationGoalsContainer = styled.div<{
$isFirstStepCompleted: boolean
$isEmbeded: boolean
}>`
z-index: 1;
position: relative;
padding: ${({ theme }) => `${theme.spacings.sm} ${theme.spacings.lg}`};
border-start-end-radius: ${({ theme, isEmbeded }) =>
isEmbeded ? theme.box.borderRadius : '0'};
border-start-end-radius: ${({ theme, $isEmbeded }) =>
$isEmbeded ? theme.box.borderRadius : '0'};
border-end-start-radius: 0;
border-end-end-radius: 0;
border-start-start-radius: ${({ theme }) => theme.box.borderRadius};
${({ isFirstStepCompleted }) =>
isFirstStepCompleted &&
${({ $isFirstStepCompleted }) =>
$isFirstStepCompleted &&
css`
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
`}
transition: border-radius 0.15s;
background: ${({ theme, publique, isEmbeded }) => {
const colorPalette =
publique && !isEmbeded
? theme.colors.publics[publique]
: theme.colors.bases.primary
return css`
${colorPalette[600]};
`
}};
background: ${({ theme }) => theme.colors.bases.primary[600]};
@media print {
background: initial;
@ -119,7 +101,7 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) {
const { t } = useTranslation()
return (
<Section>
<Section container>
{inIframe && (
<Grid
item
@ -153,7 +135,7 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) {
)
}
const Section = styled(Grid).attrs({ container: true })`
const Section = styled(Grid)`
justify-content: space-between;
gap: ${({ theme }) => theme.spacings.xs};
`

2
site/source/components/conversation/ChoicesInput.tsx
View File

@ -355,7 +355,7 @@ export const SwitchInput = (props: {
<Switch
defaultSelected={defaultSelected}
onChange={(isSelected: boolean) => onChange && onChange(isSelected)}
light
$light
id={id}
key={key}
invertLabel={invertLabel}

3
site/source/components/conversation/NumberInput.tsx
View File

@ -1,4 +1,3 @@
import { NumberFieldProps } from '@react-types/numberfield'
import { ASTNode, parseUnit, serializeUnit, Unit } from 'publicodes'
import { useCallback, useContext, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -20,7 +19,6 @@ export default function NumberInput({
unit,
formatOptions,
displayedUnit,
...fieldProps
}: InputProps & {
unit?: Unit
}) {
@ -63,7 +61,6 @@ export default function NumberInput({
return (
<StyledNumberInput>
<NumberField
{...(fieldProps as NumberFieldProps)}
description=""
displayedUnit={
parsedDisplayedUnit &&

16
site/source/design-system/field/NumberField.tsx
View File

@ -105,7 +105,13 @@ export default function NumberField(props: NumberFieldProps) {
$small={props.small}
>
<StyledNumberInput
{...(omit(props, 'label') as HTMLAttributes<HTMLInputElement>)}
{...(omit(
props,
'label',
'small',
'formatOptions',
'displayedUnit'
) as HTMLAttributes<HTMLInputElement>)}
{...inputWithCursorHandlingProps}
placeholder={
props.placeholder != null
@ -113,7 +119,7 @@ export default function NumberField(props: NumberFieldProps) {
: ''
}
ref={ref}
withUnit={!!props.displayedUnit}
$withUnit={!!props.displayedUnit}
/>
{props.displayedUnit && (
<StyledUnit
@ -155,9 +161,9 @@ const StyledUnit = styled(StyledSuffix)`
white-space: nowrap;
`
const StyledNumberInput = styled(StyledInput)<{ withUnit: boolean }>`
${({ withUnit }) =>
withUnit &&
const StyledNumberInput = styled(StyledInput)<{ $withUnit: boolean }>`
${({ $withUnit }) =>
$withUnit &&
css`
padding-right: 0 !important;
`};

8
site/source/design-system/field/Radio/RadioGroup.tsx
View File

@ -21,7 +21,7 @@ export function RadioGroup(props: RadioGroupProps) {
aria-label={props['aria-label']}
>
{label && <span {...labelProps}>{label}</span>}
<RadioGroupContainer orientationMode={props.orientation ?? 'vertical'}>
<RadioGroupContainer $orientationMode={props.orientation ?? 'vertical'}>
<RadioContext.Provider value={state}>{children}</RadioContext.Provider>
</RadioGroupContainer>
</div>
@ -29,10 +29,10 @@ export function RadioGroup(props: RadioGroupProps) {
}
const RadioGroupContainer = styled.div<{
orientationMode: 'horizontal' | 'vertical'
$orientationMode: 'horizontal' | 'vertical'
}>`
display: flex;
flex-wrap: wrap;
flex-direction: ${({ orientationMode }) =>
orientationMode === 'horizontal' ? 'row' : 'column'};
flex-direction: ${({ $orientationMode }) =>
$orientationMode === 'horizontal' ? 'row' : 'column'};
`

39
site/source/design-system/message/index.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import React, { CSSProperties } from 'react'
import { useTranslation } from 'react-i18next'
import { css, CSSProperties, DefaultTheme, styled } from 'styled-components'
import { css, DefaultTheme, styled } from 'styled-components'
import { ForceThemeProvider } from '@/components/utils/DarkModeContext'
import { Palette, SmallPalette } from '@/types/styled'
@ -52,10 +52,10 @@ export function Message({
<StyledMessage
className={className}
style={style}
messageType={type}
border={border}
mini={mini}
light={light}
$messageType={type}
$border={border}
$mini={mini}
$light={light}
aria-atomic
>
{icon && (
@ -90,26 +90,29 @@ const StyledIconWrapper = styled.div<{
}
`
type StyledMessageProps = Pick<MessageProps, 'border' | 'light' | 'mini'> & {
messageType: NonNullable<MessageProps['type']>
type StyledMessageProps = {
$border: boolean
$light: boolean
$mini: boolean
$messageType: NonNullable<MessageProps['type']>
}
const StyledMessage = styled.div<StyledMessageProps>`
display: flex;
position: relative;
align-items: baseline;
${({ theme, messageType, border, light, mini }) => {
${({ theme, $messageType, $border, $light, $mini }) => {
const colorSpace: Palette | SmallPalette =
messageType === 'secondary' || messageType === 'primary'
? theme.colors.bases[messageType]
: theme.colors.extended[messageType]
$messageType === 'secondary' || $messageType === 'primary'
? theme.colors.bases[$messageType]
: theme.colors.extended[$messageType]
return css`
padding: ${mini ? theme.spacings.xxs : '0px'}
${mini ? theme.spacings.md : theme.spacings.lg};
background-color: ${light ? 'rgba(255,255,255,0.75)' : colorSpace[100]};
border: ${mini ? '1px' : '2px'} solid ${colorSpace[border ? 500 : 100]};
border-radius: ${theme.box.borderRadius};
padding: ${$mini ? theme.spacings.xxs : '0px'}
${$mini ? theme.spacings.md : theme.spacings.lg};
background-color: ${$light ? 'rgba(255,255,255,0.75)' : colorSpace[100]};
$border: ${$mini ? '1px' : '2px'} solid ${colorSpace[$border ? 500 : 100]};
$border-radius: ${theme.box.borderRadius};
margin-bottom: ${theme.spacings.md};
&& h3,
@ -120,7 +123,7 @@ const StyledMessage = styled.div<StyledMessageProps>`
background-color: inherit;
}
> * {
margin: -${mini ? theme.spacings.xs : 0} 0;
margin: -${$mini ? theme.spacings.xs : 0} 0;
}
& p,
& span,

8
site/source/design-system/switch/Switch.tsx
View File

@ -90,8 +90,8 @@ const LabelBody = styled(Body)`
cursor: pointer;
`
const Text = styled.span<{ invertLabel?: boolean }>`
${({ theme, invertLabel: $invertLabel }) =>
const Text = styled.span<{ $invertLabel?: boolean }>`
${({ theme, $invertLabel }) =>
$invertLabel
? css`
margin-left: ${theme.spacings.xxs};
@ -134,7 +134,7 @@ export const Switch = (props: SwitchProps) => {
return (
<LabelBody as="label" htmlFor={inputProps.id} className={className}>
{children && !invertLabel && (
<Text invertLabel={invertLabel}>{children}</Text>
<Text $invertLabel={invertLabel}>{children}</Text>
)}
<StyledSwitch
$light={$light}
@ -159,7 +159,7 @@ export const Switch = (props: SwitchProps) => {
/>
</StyledSwitch>
{children && invertLabel && (
<Text invertLabel={invertLabel}>{children}</Text>
<Text $invertLabel={invertLabel}>{children}</Text>
)}
</LabelBody>
)