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

Améliore le style des radiocard

pull/2782/head
Johan Girod 2023-06-19 10:26:36 +02:00
parent ef2159a235
commit 1b48c36b68
2 changed files with 30 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
site/source/design-system/field/Radio/RadioCard.tsx
View File

@ -1,24 +1,12 @@
import { AriaRadioProps } from '@react-types/radio'
import { ComponentProps } from 'react'
import React, { ComponentProps } from 'react'
import styled from 'styled-components'
import { Markdown } from '@/components/utils/markdown'
import { CardContainer } from '@/design-system/card/Card'
import { Emoji } from '@/design-system/emoji'
import { SmallBody } from '@/design-system/typography/paragraphs'
import { Body, SmallBody } from '@/design-system/typography/paragraphs'
import { RadioPoint, RadioSkeleton, SpanBody, VisibleRadio } from './Radio'
const Description = styled.span`
display: block;
margin: 0;
margin-top: ${({ theme }) => theme.spacings.sm};
`
const StyledRadioPoint = styled(RadioPoint)`
align-self: baseline;
margin-top: 0.2rem;
`
import { RadioPoint, RadioSkeleton, VisibleRadio } from './Radio'
export const RadioCardSkeleton = ({
children,
@ -45,9 +33,9 @@ const StyledCardContainer = styled(CardContainer)`
type RadioCardProps = AriaRadioProps & {
value: string
label: string
label: React.ReactNode
className?: string
description?: string
description?: React.ReactNode
emoji?: string
autoFocus?: boolean
}
@ -62,16 +50,14 @@ export function RadioCard({
return (
<StyledRadioCardSkeleton {...props}>
<StyledRadioPoint />
<SpanBody>
<span>
<div>
<Body>
{label} {emoji && <Emoji emoji={emoji} />}
</span>
{description && (
<SmallBody>
<Markdown as={Description}>{description ?? ''}</Markdown>
</SmallBody>
)}
</SpanBody>
</Body>
{description && <SmallBody grey>{description}</SmallBody>}
</div>
</StyledRadioCardSkeleton>
)
}
@ -81,3 +67,11 @@ const StyledRadioCardSkeleton = styled(RadioCardSkeleton)`
display: flex;
}
`
const StyledRadioPoint = styled(RadioPoint)`
margin: ${({ theme }) => theme.spacings.md};
margin-right: ${({ theme }) => theme.spacings.md} !important;
transform: translateY(${({ theme }) => theme.spacings.xxs});
margin-left: 0;
align-self: flex-start;
`

18
site/source/pages/assistants/choix-du-statut/association.tsx
View File

@ -47,10 +47,11 @@ export default function Association() {
>
<RadioCard
value={'gagner-argent'}
label={t(
'choix-statut.association.question.gagner-argent',
"Dans le but de gagner de l'argent"
)}
label={
<Trans i18nKey="choix-statut.association.question.gagner-argent">
Dans le but de <Strong>gagner de l'argent</Strong>
</Trans>
}
// emoji={node.rawNode.icônes}
// description={node.rawNode.description}
>
@ -58,10 +59,11 @@ export default function Association() {
</RadioCard>
<RadioCard
value={'non-lucratif'}
label={t(
'choix-statut.association.question.gagner-argent',
'Dans un but non lucratif'
)}
label={
<Trans i18nKey="choix-statut.association.question.gagner-argent">
Dans un but <Strong>non lucratif</Strong>
</Trans>
}
// emoji={node.rawNode.icônes}
description={t(
'choix-statut.association.question.non-lucratif.description',