style(lodeom): style des switchs
parent
70538cc6dc
commit
8cfc29ac97
|
@ -81,7 +81,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
|
|||
})
|
||||
|
||||
it('should allow to select a scale', function () {
|
||||
cy.get('div[aria-label="Barème à appliquer"]')
|
||||
cy.get('div[aria-labelledby="barème-switch-label"]')
|
||||
.contains('Barème de compétitivité renforcée')
|
||||
.click()
|
||||
|
||||
|
@ -89,7 +89,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
|
|||
'p[id="salarié___cotisations___exonérations___lodeom___montant-value"]'
|
||||
).should('include.text', '958,20 €')
|
||||
|
||||
cy.get('div[aria-label="Barème à appliquer"]')
|
||||
cy.get('div[aria-labelledby="barème-switch-label"]')
|
||||
.contains("Barème d'innovation et croissance")
|
||||
.click()
|
||||
|
||||
|
@ -111,7 +111,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
|
|||
"Le barème d'innovation et croissance concerne uniquement les salaires inférieurs à 3,5 SMIC."
|
||||
)
|
||||
|
||||
cy.get('div[aria-label="Barème à appliquer"]')
|
||||
cy.get('div[aria-labelledby="barème-switch-label"]')
|
||||
.contains('Barème de compétitivité renforcée')
|
||||
.click()
|
||||
cy.get(inputSelector).first().type('{selectall}5000')
|
||||
|
@ -121,7 +121,7 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
|
|||
'Le barème de compétitivité renforcée concerne uniquement les salaires inférieurs à 2,7 SMIC.'
|
||||
)
|
||||
|
||||
cy.get('div[aria-label="Barème à appliquer"]')
|
||||
cy.get('div[aria-labelledby="barème-switch-label"]')
|
||||
.contains('Barème de compétitivité')
|
||||
.click()
|
||||
cy.get(inputSelector).first().type('{selectall}4000')
|
||||
|
@ -307,14 +307,14 @@ describe('Simulateur lodeom', { testIsolation: false }, function () {
|
|||
cy.get('@recapTable').should('include.text', 'code 462')
|
||||
cy.get('@recapTable').should('include.text', 'code 684')
|
||||
|
||||
cy.get('div[aria-label="Barème à appliquer"]')
|
||||
cy.get('div[aria-labelledby="barème-switch-label"]')
|
||||
.contains('Barème de compétitivité renforcée')
|
||||
.click()
|
||||
|
||||
cy.get('@recapTable').should('include.text', 'code 463')
|
||||
cy.get('@recapTable').should('include.text', 'code 538')
|
||||
|
||||
cy.get('div[aria-label="Barème à appliquer"]')
|
||||
cy.get('div[aria-labelledby="barème-switch-label"]')
|
||||
.contains("Barème d'innovation et croissance")
|
||||
.click()
|
||||
|
||||
|
|
|
@ -2,9 +2,12 @@ import { DottedName } from 'modele-social'
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { styled } from 'styled-components'
|
||||
|
||||
import { useEngine } from '@/components/utils/EngineContext'
|
||||
import { Radio, ToggleGroup } from '@/design-system'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { enregistreLaRéponse } from '@/store/actions/actions'
|
||||
|
||||
export default function EffectifSwitch() {
|
||||
|
@ -21,16 +24,45 @@ export default function EffectifSwitch() {
|
|||
}, [currentEffectif, engineEffectif])
|
||||
|
||||
return (
|
||||
<ToggleGroup
|
||||
value={currentEffectif}
|
||||
onChange={(value) => {
|
||||
setCurrentEffectif(value)
|
||||
dispatch(enregistreLaRéponse(dottedName, `'${value}'`))
|
||||
}}
|
||||
aria-label={t("Effectif de l'entreprise")}
|
||||
>
|
||||
<Radio value="10">{t('Moins de 50 salariés')}</Radio>
|
||||
<Radio value="100">{t('Plus de 50 salariés')}</Radio>
|
||||
</ToggleGroup>
|
||||
<Container>
|
||||
<StyledBody id="effectif-switch-label">
|
||||
<Strong>{t("Effectif de l'entreprise :")}</Strong>
|
||||
</StyledBody>
|
||||
<StyledToggleGroup
|
||||
value={currentEffectif}
|
||||
onChange={(value: string) => {
|
||||
setCurrentEffectif(value)
|
||||
dispatch(enregistreLaRéponse(dottedName, `'${value}'`))
|
||||
}}
|
||||
aria-labelledby="effectif-switch-label"
|
||||
>
|
||||
<StyledRadio value="10">{t('Moins de 50 salariés')}</StyledRadio>
|
||||
<StyledRadio value="100">{t('Plus de 50 salariés')}</StyledRadio>
|
||||
</StyledToggleGroup>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
column-gap: ${({ theme }) => theme.spacings.sm};
|
||||
width: 100%;
|
||||
`
|
||||
const StyledBody = styled(Body)`
|
||||
margin: ${({ theme }) => theme.spacings.xxs} 0;
|
||||
`
|
||||
const StyledToggleGroup = styled(ToggleGroup)`
|
||||
display: flex;
|
||||
> * {
|
||||
display: flex;
|
||||
}
|
||||
`
|
||||
const StyledRadio = styled(Radio)`
|
||||
white-space: nowrap;
|
||||
> span {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import { styled } from 'styled-components'
|
||||
|
||||
import { Radio, ToggleGroup } from '@/design-system'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { RégularisationMethod } from '@/utils/réductionDeCotisations'
|
||||
|
||||
type Props = {
|
||||
|
@ -15,28 +18,59 @@ export default function RégularisationSwitch({
|
|||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleGroup
|
||||
value={régularisationMethod}
|
||||
onChange={(value) => {
|
||||
setRégularisationMethod(value as RégularisationMethod)
|
||||
}}
|
||||
aria-label={t(
|
||||
'pages.simulateurs.réduction-générale.régularisation.type',
|
||||
'Type de régularisation'
|
||||
)}
|
||||
>
|
||||
<Radio value="annuelle">
|
||||
{t(
|
||||
'pages.simulateurs.réduction-générale.régularisation.annuelle',
|
||||
'Régularisation annuelle'
|
||||
)}
|
||||
</Radio>
|
||||
<Radio value="progressive">
|
||||
{t(
|
||||
'pages.simulateurs.réduction-générale.régularisation.progressive',
|
||||
'Régularisation progressive'
|
||||
)}
|
||||
</Radio>
|
||||
</ToggleGroup>
|
||||
<Container>
|
||||
<StyledBody id="régularisation-switch-label">
|
||||
<Strong>
|
||||
{t(
|
||||
'pages.simulateurs.réduction-générale.régularisation.type',
|
||||
'Type de régularisation :'
|
||||
)}
|
||||
</Strong>
|
||||
</StyledBody>
|
||||
<StyledToggleGroup
|
||||
value={régularisationMethod}
|
||||
onChange={(value) => {
|
||||
setRégularisationMethod(value as RégularisationMethod)
|
||||
}}
|
||||
aria-labelledby="régularisation-switch-label"
|
||||
>
|
||||
<StyledRadio value="annuelle">
|
||||
{t(
|
||||
'pages.simulateurs.réduction-générale.régularisation.annuelle',
|
||||
'Régularisation annuelle'
|
||||
)}
|
||||
</StyledRadio>
|
||||
<StyledRadio value="progressive">
|
||||
{t(
|
||||
'pages.simulateurs.réduction-générale.régularisation.progressive',
|
||||
'Régularisation progressive'
|
||||
)}
|
||||
</StyledRadio>
|
||||
</StyledToggleGroup>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
column-gap: ${({ theme }) => theme.spacings.sm};
|
||||
width: 100%;
|
||||
`
|
||||
const StyledBody = styled(Body)`
|
||||
margin: ${({ theme }) => theme.spacings.xxs} 0;
|
||||
`
|
||||
const StyledToggleGroup = styled(ToggleGroup)`
|
||||
display: flex;
|
||||
> * {
|
||||
display: flex;
|
||||
}
|
||||
`
|
||||
const StyledRadio = styled(Radio)`
|
||||
white-space: nowrap;
|
||||
> span {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -92,7 +92,7 @@ Décès: Deaths
|
|||
Déplier: Unfold
|
||||
"Détail du montant :": "Amount in detail :"
|
||||
Effacer mes réponses: Delete my answers
|
||||
Effectif de l'entreprise: Number of employees
|
||||
"Effectif de l'entreprise :": "Number of employees :"
|
||||
"En cas d’<1>accident de travail</1>, de <4>maladie professionnelle</4> ou d’un <7>accident sur le trajet domicile-travail</7>, vous serez indemnisé(e) à hauteur de :":
|
||||
"In the event of an<1>accident at work</1>, <4>occupational illness</4> or an
|
||||
<7>accident on the way to or from work</7>, you will receive compensation of:"
|
||||
|
@ -137,6 +137,7 @@ Graphique statistiques détaillés de la satisfaction, présence d’une alterna
|
|||
Graphique statistiques détaillés du nombre visites par jour, présence d’une alternative accessible après l’image:
|
||||
Graph showing detailed statistics on the number of visits per day, with an
|
||||
alternative accessible after the image
|
||||
Guadeloupe, Guyane, Martinique, La Réunion: Guadeloupe, French Guiana, Martinique, Reunion Island
|
||||
Habituellement: Usually
|
||||
Impôt: Tax
|
||||
Impôt au barème: Tax scale
|
||||
|
@ -278,6 +279,7 @@ Répartition du chiffre d'affaires: Sales breakdown
|
|||
Répondez à quelques questions additionnelles afin de préciser votre résultat.: Answer a few additional questions to clarify your result.
|
||||
Résultat fiscal: Taxable income
|
||||
Réussite: Success
|
||||
Saint-Barthélémy, Saint-Martin: Saint-Barthélémy, Saint-Martin
|
||||
Saisissez votre domaine d'activité: Enter your field of activity
|
||||
Salaire brut: Gross salary
|
||||
Salaire brut mensuel: Gross monthly salary
|
||||
|
@ -1447,7 +1449,7 @@ pages:
|
|||
included in the simulator.</5>
|
||||
title: Corporate tax simulator
|
||||
lodeom:
|
||||
bareme-label: Scale to be applied
|
||||
bareme-switch-label: "Scale to be applied :"
|
||||
legend: Employee's gross salary and applicable Lodeom exemption
|
||||
meta:
|
||||
description: Estimated amount of Lodeom exemption. This exemption applies, under
|
||||
|
@ -1484,6 +1486,7 @@ pages:
|
|||
salaries below 3.5 SMIC. In other words, for 2024, total
|
||||
remuneration not exceeding <1>€6,306.30</1> gross per month.
|
||||
stage: The Lodeom exemption does not apply to internship bonuses.
|
||||
zone-switch-label: "Company location :"
|
||||
médecin:
|
||||
meta:
|
||||
description: Calculation of net income after deduction of contributions, based
|
||||
|
@ -1566,7 +1569,7 @@ pages:
|
|||
régularisation:
|
||||
annuelle: Annual adjustment
|
||||
progressive: Progressive regularization
|
||||
type: Type of adjustment
|
||||
type: "Type of adjustment :"
|
||||
répartition:
|
||||
chômage: of which unemployment
|
||||
retraite: IRC
|
||||
|
|
|
@ -98,7 +98,7 @@ Décès: Décès
|
|||
Déplier: Déplier
|
||||
"Détail du montant :": "Détail du montant :"
|
||||
Effacer mes réponses: Effacer mes réponses
|
||||
Effectif de l'entreprise: Effectif de l'entreprise
|
||||
"Effectif de l'entreprise :": "Effectif de l'entreprise :"
|
||||
"En cas d’<1>accident de travail</1>, de <4>maladie professionnelle</4> ou d’un <7>accident sur le trajet domicile-travail</7>, vous serez indemnisé(e) à hauteur de :":
|
||||
"En cas d’<1>accident de travail</1>, de <4>maladie professionnelle</4> ou
|
||||
d’un <7>accident sur le trajet domicile-travail</7>, vous serez indemnisé(e) à
|
||||
|
@ -146,6 +146,7 @@ Graphique statistiques détaillés de la satisfaction, présence d’une alterna
|
|||
Graphique statistiques détaillés du nombre visites par jour, présence d’une alternative accessible après l’image:
|
||||
Graphique statistiques détaillés du nombre visites par jour, présence d’une
|
||||
alternative accessible après l’image
|
||||
Guadeloupe, Guyane, Martinique, La Réunion: Guadeloupe, Guyane, Martinique, La Réunion
|
||||
Habituellement: Habituellement
|
||||
Impôt: Impôt
|
||||
Impôt au barème: Impôt au barème
|
||||
|
@ -293,6 +294,7 @@ Répartition du chiffre d'affaires: Répartition du chiffre d'affaires
|
|||
Répondez à quelques questions additionnelles afin de préciser votre résultat.: Répondez à quelques questions additionnelles afin de préciser votre résultat.
|
||||
Résultat fiscal: Résultat fiscal
|
||||
Réussite: Réussite
|
||||
Saint-Barthélémy, Saint-Martin: Saint-Barthélémy, Saint-Martin
|
||||
Saisissez votre domaine d'activité: Saisissez votre domaine d'activité
|
||||
Salaire brut: Salaire brut
|
||||
Salaire brut mensuel: Salaire brut mensuel
|
||||
|
@ -1540,7 +1542,7 @@ pages:
|
|||
pas intégrés dans le simulateur.</5>
|
||||
title: Simulateur d'impôt sur les sociétés
|
||||
lodeom:
|
||||
bareme-label: Barème à appliquer
|
||||
bareme-switch-label: "Barème à appliquer :"
|
||||
legend: Rémunération brute du salarié et exonération Lodeom applicable
|
||||
meta:
|
||||
description: Estimation du montant de l'exonération Lodeom. Cette exonération
|
||||
|
@ -1580,6 +1582,7 @@ pages:
|
|||
2024, une rémunération totale qui ne dépasse pas <1>6 306,30 €</1>
|
||||
bruts par mois.
|
||||
stage: L'exonération Lodeom ne s'applique pas sur les gratifications de stage.
|
||||
zone-switch-label: "Localisation de l'entreprise :"
|
||||
médecin:
|
||||
meta:
|
||||
description: Calcul du revenu net après déduction des cotisations à partir du
|
||||
|
@ -1663,7 +1666,7 @@ pages:
|
|||
régularisation:
|
||||
annuelle: Régularisation annuelle
|
||||
progressive: Régularisation progressive
|
||||
type: Type de régularisation
|
||||
type: "Type de régularisation :"
|
||||
répartition:
|
||||
chômage: dont chômage
|
||||
retraite: IRC
|
||||
|
|
|
@ -47,8 +47,6 @@ export default function LodeomSimulation() {
|
|||
<>
|
||||
<Simulation afterQuestionsSlot={<SelectSimulationYear />}>
|
||||
<SimulateurWarning simulateur="lodeom" />
|
||||
<ZoneSwitch />
|
||||
<BarèmeSwitch />
|
||||
<LodeomSimulationGoals
|
||||
monthByMonth={monthByMonth}
|
||||
legend={t(
|
||||
|
@ -57,6 +55,8 @@ export default function LodeomSimulation() {
|
|||
)}
|
||||
toggles={
|
||||
<>
|
||||
<ZoneSwitch />
|
||||
{currentZone && <BarèmeSwitch />}
|
||||
{currentZone === 'zone un' && (
|
||||
<>
|
||||
<RégularisationSwitch
|
||||
|
|
|
@ -5,7 +5,8 @@ import { styled } from 'styled-components'
|
|||
import { ExplicableRule } from '@/components/conversation/Explicable'
|
||||
import { useEngine } from '@/components/utils/EngineContext'
|
||||
import { Radio, ToggleGroup } from '@/design-system'
|
||||
import { FlexCenter } from '@/design-system/global-style'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { useBarèmeLodeom } from '@/hooks/useBarèmeLodeom'
|
||||
import { useZoneLodeom } from '@/hooks/useZoneLodeom'
|
||||
|
||||
|
@ -17,13 +18,18 @@ export default function BarèmeSwitch() {
|
|||
|
||||
return (
|
||||
<Container>
|
||||
<StyledBody id="barème-switch-label">
|
||||
<Strong>
|
||||
{t(
|
||||
'pages.simulateurs.lodeom.bareme-switch-label',
|
||||
'Barème à appliquer :'
|
||||
)}
|
||||
</Strong>
|
||||
</StyledBody>
|
||||
<StyledToggleGroup
|
||||
value={currentBarème}
|
||||
onChange={updateBarème}
|
||||
aria-label={t(
|
||||
'pages.simulateurs.lodeom.bareme-label',
|
||||
'Barème à appliquer'
|
||||
)}
|
||||
aria-labelledby="barème-switch-label"
|
||||
>
|
||||
{barèmes.map((barème, index) => {
|
||||
const dottedName =
|
||||
|
@ -49,16 +55,21 @@ export default function BarèmeSwitch() {
|
|||
}
|
||||
|
||||
const Container = styled.div`
|
||||
${FlexCenter}
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
column-gap: ${({ theme }) => theme.spacings.sm};
|
||||
width: 100%;
|
||||
`
|
||||
const StyledBody = styled(Body)`
|
||||
margin: ${({ theme }) => theme.spacings.xxs} 0;
|
||||
`
|
||||
const StyledToggleGroup = styled(ToggleGroup)`
|
||||
display: flex;
|
||||
> * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
`
|
||||
const StyledRadio = styled(Radio)`
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import { styled } from 'styled-components'
|
||||
|
||||
import { Radio, ToggleGroup } from '@/design-system'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { useBarèmeLodeom } from '@/hooks/useBarèmeLodeom'
|
||||
import { useZoneLodeom } from '@/hooks/useZoneLodeom'
|
||||
|
||||
|
@ -10,18 +13,55 @@ export default function ZoneSwitch() {
|
|||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleGroup
|
||||
value={currentZone}
|
||||
onChange={(value) => {
|
||||
updateBarème()
|
||||
updateZone(value)
|
||||
}}
|
||||
aria-label={t("Zone de l'entreprise")}
|
||||
>
|
||||
<Radio value="zone un">
|
||||
{t('Guadeloupe, Guyane, Martinique, La Réunion')}
|
||||
</Radio>
|
||||
<Radio value="zone deux">{t('Saint-Barthélémy, Saint-Martin')}</Radio>
|
||||
</ToggleGroup>
|
||||
<Container>
|
||||
<StyledBody id="zone-switch-label">
|
||||
<Strong>
|
||||
{t(
|
||||
'pages.simulateurs.lodeom.zone-switch-label',
|
||||
"Localisation de l'entreprise :"
|
||||
)}
|
||||
</Strong>
|
||||
</StyledBody>
|
||||
<StyledToggleGroup
|
||||
value={currentZone}
|
||||
onChange={(value) => {
|
||||
updateBarème()
|
||||
updateZone(value)
|
||||
}}
|
||||
aria-labelledby="zone-switch"
|
||||
>
|
||||
<StyledRadio value="zone un">
|
||||
{t('Guadeloupe, Guyane, Martinique, La Réunion')}
|
||||
</StyledRadio>
|
||||
<StyledRadio value="zone deux">
|
||||
{t('Saint-Barthélémy, Saint-Martin')}
|
||||
</StyledRadio>
|
||||
</StyledToggleGroup>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
column-gap: ${({ theme }) => theme.spacings.sm};
|
||||
width: 100%;
|
||||
`
|
||||
const StyledBody = styled(Body)`
|
||||
margin: ${({ theme }) => theme.spacings.xxs} 0;
|
||||
`
|
||||
const StyledToggleGroup = styled(ToggleGroup)`
|
||||
display: flex;
|
||||
> * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
`
|
||||
const StyledRadio = styled(Radio)`
|
||||
white-space: nowrap;
|
||||
> span {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -6,7 +6,7 @@ import { styled } from 'styled-components'
|
|||
|
||||
import { useEngine } from '@/components/utils/EngineContext'
|
||||
import { Radio, ToggleGroup } from '@/design-system'
|
||||
import { FlexCenter } from '@/design-system/global-style'
|
||||
import { Strong } from '@/design-system/typography'
|
||||
import { Body } from '@/design-system/typography/paragraphs'
|
||||
import { enregistreLaRéponse } from '@/store/actions/actions'
|
||||
import { réductionGénéraleDottedName } from '@/utils/réductionDeCotisations'
|
||||
|
@ -30,9 +30,9 @@ export default function CongésPayésSwitch() {
|
|||
return (
|
||||
<Container>
|
||||
<StyledBody id="caisse-congés-payés-label">
|
||||
{engine.getRule(dottedName).title}
|
||||
<Strong>{engine.getRule(dottedName).title} :</Strong>
|
||||
</StyledBody>
|
||||
<ToggleGroup
|
||||
<StyledToggleGroup
|
||||
value={currentCongésPayés}
|
||||
onChange={(value) => {
|
||||
setCurrentCongésPayés(value)
|
||||
|
@ -40,19 +40,33 @@ export default function CongésPayésSwitch() {
|
|||
}}
|
||||
aria-labelledby="caisse-congés-payés-label"
|
||||
>
|
||||
<Radio value="oui">{t('Oui')}</Radio>
|
||||
<Radio value="non">{t('Non')}</Radio>
|
||||
</ToggleGroup>
|
||||
<StyledRadio value="oui">{t('Oui')}</StyledRadio>
|
||||
<StyledRadio value="non">{t('Non')}</StyledRadio>
|
||||
</StyledToggleGroup>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const Container = styled.div`
|
||||
${FlexCenter}
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
column-gap: ${({ theme }) => theme.spacings.sm};
|
||||
width: 100%;
|
||||
`
|
||||
const StyledBody = styled(Body)`
|
||||
margin: ${({ theme }) => theme.spacings.xxs} 0;
|
||||
`
|
||||
const StyledToggleGroup = styled(ToggleGroup)`
|
||||
display: flex;
|
||||
> * {
|
||||
display: flex;
|
||||
}
|
||||
`
|
||||
const StyledRadio = styled(Radio)`
|
||||
white-space: nowrap;
|
||||
> span {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
|
Loading…
Reference in New Issue