Améliore les Tag, termine le style des statuts disponibles

2023-06-13 16:07:16 +02:00 · 2023-06-13 16:07:16 +02:00 · 0f05fa76df
parent c95379c09e
commit 0f05fa76df
17 changed files with 480 additions and 168 deletions
--- a/site/source/components/StatusTag.tsx
+++ b/site/source/components/StatusTag.tsx
@ -0,0 +1,105 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+
+import {
+	CircleIcon,
+	HexagonIcon,
+	RhombusIcon,
+	SquareIcon,
+	TriangleIcon,
+} from '@/design-system/icons'
+import { Tag } from '@/design-system/tag'
+import { Colors } from '@/design-system/theme'
+
+export const TAG_DATA = {
+	EI: {
+		color: 'independant',
+		longName: 'Entreprise individuelle',
+		shortName: 'Entreprise (EI)',
+		acronym: 'EI',
+		icon: TriangleIcon,
+	},
+	AE: {
+		color: 'tertiary',
+		longName: 'Auto-entrepreneur',
+		shortName: 'Auto-entrepreneur',
+		acronym: 'AE',
+		icon: CircleIcon,
+	},
+	SASU: {
+		color: 'secondary',
+		longName: 'Société par actions simplifiée unipersonnelle',
+		shortName: 'Société (SASU)',
+		acronym: 'SASU',
+		icon: HexagonIcon,
+	},
+	SAS: {
+		color: 'secondary',
+		longName: 'Société par actions simplifiée',
+		shortName: 'Société (SAS)',
+		acronym: 'SAS',
+		icon: HexagonIcon,
+	},
+	EURL: {
+		color: 'artisteAuteur',
+		longName: 'Entreprise unipersonnelle à responsabilité limitée',
+		shortName: 'Entreprise (EURL)',
+		acronym: 'EURL',
+		icon: RhombusIcon,
+	},
+	SARL: {
+		color: 'artisteAuteur',
+		longName: 'Société à responsabilité limitée',
+		shortName: 'Société (SARL)',
+		acronym: 'SARL',
+		icon: RhombusIcon,
+	},
+	association: {
+		color: 'primary',
+		longName: 'Association',
+		shortName: 'Association',
+		acronym: 'Assoc.',
+		icon: SquareIcon,
+	},
+} satisfies {
+	[key: string]: {
+		color: Colors
+		longName: string
+		shortName: string
+		acronym: string
+		icon: FC
+	}
+}
+
+export type Status = keyof typeof TAG_DATA
+
+const StyledTag = styled(Tag)`
+	margin: 0 0.25rem;
+
+	svg {
+		margin-right: 0.25rem;
+		width: 1rem;
+		height: 1rem;
+	}
+	svg.square-icon {
+		width: 0.8rem;
+		height: 0.8rem;
+	}
+`
+
+interface StatusTagProps {
+	status: Status
+	text: 'acronym' | 'shortName' | 'longName'
+	showIcon?: boolean
+}
+
+export const StatusTag = ({ status, text, showIcon }: StatusTagProps) => {
+	const Icon = TAG_DATA[status].icon
+
+	return (
+		<StyledTag color={TAG_DATA[status].color} sm>
+			{showIcon && <Icon />}
+			{TAG_DATA[status][text]}
+		</StyledTag>
+	)
+}
--- a/site/source/components/layout/Header.tsx
+++ b/site/source/components/layout/Header.tsx
@ -87,7 +87,7 @@ const StyledHeader = styled.div`
 	column-gap: ${({ theme }) => theme.spacings.xs};
 	row-gap: ${({ theme }) => theme.spacings.md};
 	a {
-		height: 100%;
+		height: 3rem;
 		display: flex;
 		align-items: center;
 	}
--- a/site/source/design-system/icons/index.tsx
+++ b/site/source/design-system/icons/index.tsx
@ -168,21 +168,6 @@ export const EditIcon = (props: HTMLAttributes<SVGElement>) => (
 	</svg>
 )

-export const HexagonIcon = (props: HTMLAttributes<SVGElement>) => (
-	<svg
-		{...props}
-		width="16"
-		height="16"
-		viewBox="0 0 16 16"
-		fill="#1D458C"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden
-		role="img"
-	>
-		<path d="M8 3L12.3301 5.5V10.5L8 13L3.66987 10.5V5.5L8 3Z" />
-	</svg>
-)
-
 export const TriangleIcon = (props: HTMLAttributes<SVGElement>) => (
 	<svg
 		{...props}
@ -198,6 +183,41 @@ export const TriangleIcon = (props: HTMLAttributes<SVGElement>) => (
 	</svg>
 )

+export const SquareIcon = (props: HTMLAttributes<SVGElement>) => (
+	<svg
+		{...props}
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="#1D458C"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden
+		role="img"
+		className={'square-icon' + (props.className ? ' ' + props.className : '')}
+	>
+		<path d="M3 3H13V13H3V3Z" />
+	</svg>
+)
+
+export const RhombusIcon = styled(SquareIcon)`
+	transform: rotate(45deg);
+`
+
+export const HexagonIcon = (props: HTMLAttributes<SVGElement>) => (
+	<svg
+		{...props}
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="#1D458C"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden
+		role="img"
+	>
+		<path d="M8 3L12.3301 5.5V10.5L8 13L3.66987 10.5V5.5L8 3Z" />
+	</svg>
+)
+
 export const CircleIcon = (props: HTMLAttributes<SVGElement>) => (
 	<svg
 		{...props}
--- a/site/source/design-system/tag/index.stories.tsx
+++ b/site/source/design-system/tag/index.stories.tsx
@ -0,0 +1,48 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Tag } from '.'
+import { HexagonIcon } from '../icons'
+import theme from '../theme'
+
+const meta: Meta<typeof Tag> = {
+	component: Tag,
+}
+
+export default meta
+
+type Story = StoryObj<typeof Tag>
+
+export const Basic: Story = {
+	render: (args) => (
+		<>
+			<Tag {...args}>No props</Tag>
+			<Tag sm>Small</Tag>
+			<Tag color="primary" md>
+				Medium primary color
+			</Tag>
+			<Tag color="red">Large red</Tag>
+
+			<Tag color="secondary" md>
+				With icon <HexagonIcon />
+			</Tag>
+			<p>
+				Medium Tag with primary color in light mode and secondary color in dark
+				mode :
+			</p>
+			<Tag color={{ light: 'primary', dark: 'secondary' }} md>
+				Example
+			</Tag>
+			<p>Medium Tag with custom color in light and dark mode :</p>
+			<Tag
+				color={{
+					light: theme.colors.bases.secondary[400],
+					dark: theme.colors.bases.tertiary[600],
+				}}
+				md
+			>
+				Custom color
+			</Tag>
+		</>
+	),
+	args: {},
+}
--- a/site/source/design-system/tag/index.tsx
+++ b/site/source/design-system/tag/index.tsx
@ -1,47 +1,108 @@
 import styled from 'styled-components'

-import { baseTheme, getColorGroup } from '../theme'
+import { Colors, getColorGroup, isColor } from '../theme'
+import { KeysOfUnion, LG, MD, SM } from '../types'

-export type TagType = keyof typeof baseTheme.colors.bases &
-	keyof typeof baseTheme.colors.extended &
-	keyof typeof baseTheme.colors.publics
+type SizeProps = SM | MD | LG
+type SizeKey = KeysOfUnion<SizeProps>

-type SizeType = 'sm' | 'md' | 'lg'
+interface Color {
+	light: Colors | string
+	dark: Colors | string
+}

-const lightColors = ['grey']
+interface TagProps {
+	children?: React.ReactNode
+	className?: string
+	color?: Colors | Color | string
+}

-export const Tag = styled.div<{ $color?: TagType; $size?: SizeType }>`
+export const Tag = ({
+	children,
+	className,
+	color,
+	...size
+}: TagProps & Partial<SizeProps>) => (
+	<StyledTag
+		className={className}
+		$color={color}
+		$size={
+			'sm' in size ? 'sm' : 'md' in size ? 'md' : 'lg' in size ? 'lg' : 'md'
+		}
+	>
+		{children}
+	</StyledTag>
+)
+
+const StyledTag = styled.span<{ $color?: Color | string; $size: SizeKey }>`
 	font-family: ${({ theme }) => theme.fonts.main};

-	display: flex;
+	display: inline-flex;
+	vertical-align: middle;
 	align-items: center;
 	width: fit-content;
 	padding: 0.25rem 0.5rem;
 	border-radius: 0.25rem;
 	font-weight: 500;
+	font-size: 0.75rem;
+	line-height: 1rem;
+
 	background-color: ${({ theme, $color }) =>
-		$color
-			? theme.colors[getColorGroup($color)][$color][
-					lightColors.includes($color) ? 300 : 100
-			  ]
-			: theme.colors.bases.primary[100]};
+		typeof $color === 'string'
+			? isColor($color)
+				? getColorGroup($color)?.[200]
+				: $color
+			: theme.darkMode
+			? // darkmode
+			  typeof $color?.dark === 'string'
+				? isColor($color.dark)
+					? getColorGroup($color.dark)?.[200]
+					: $color.dark
+				: theme.colors.extended.grey[600]
+			: // lightmode
+			typeof $color?.light === 'string'
+			? isColor($color.light)
+				? getColorGroup($color.light)?.[400]
+				: $color.light
+			: theme.colors.extended.grey[400]};
+
 	color: ${({ theme, $color }) =>
-		$color
-			? theme.colors[getColorGroup($color)][$color][600]
-			: theme.colors.extended.grey[800]};
-	font-size: ${({ $size }) => {
-		switch ($size) {
-			case 'sm':
-				return '0.75rem'
-			case 'md':
-			default:
-				return '1rem'
-		}
-	}};
+		typeof $color === 'string'
+			? isColor($color)
+				? getColorGroup($color)?.[700]
+				: null
+			: theme.darkMode
+			? // darkmode
+			  typeof $color?.dark === 'string'
+				? isColor($color.dark)
+					? getColorGroup($color.dark)?.[700]
+					: null
+				: null
+			: // lightmode
+			typeof $color?.light === 'string'
+			? isColor($color.light)
+				? getColorGroup($color.light)?.[600]
+				: null
+			: null};
+
 	svg {
 		fill: ${({ theme, $color }) =>
-			$color
-				? theme.colors[getColorGroup($color)][$color][600]
-				: theme.colors.extended.grey[800]};
+			typeof $color === 'string'
+				? isColor($color)
+					? getColorGroup($color)?.[700]
+					: null
+				: theme.darkMode
+				? // darkmode
+				  typeof $color?.dark === 'string'
+					? isColor($color.dark)
+						? getColorGroup($color.dark)?.[700]
+						: null
+					: null
+				: // lightmode
+				typeof $color?.light === 'string'
+				? isColor($color.light)
+					? getColorGroup($color.light)?.[600]
+					: null
+				: null};
 	}
 `
--- a/site/source/design-system/theme.ts
+++ b/site/source/design-system/theme.ts
@ -1,6 +1,7 @@
 import { Theme } from '@/types/styled'
+import { Merge } from '@/types/utils'

-import { TagType } from './tag'
+import { KeysOfUnion } from './types'

 export const baseTheme = {
 	colors: {
@ -185,17 +186,37 @@ export const baseTheme = {
 	},
 }

-export type ColorGroups = Array<keyof typeof baseTheme.colors>
+type ColorsType = typeof baseTheme.colors
+type ColorGroups = Merge<ColorsType[keyof ColorsType]>

-export const getColorGroup = (color: TagType) => {
-	const colorGroups: ColorGroups = Object.keys(baseTheme.colors).map(
-		(colorGroup) => colorGroup as keyof typeof baseTheme.colors
-	)
+export type Colors = KeysOfUnion<ColorsType[keyof ColorsType]>

-	return colorGroups.find(
-		(colorGroup: keyof typeof baseTheme.colors) =>
-			!!baseTheme.colors[colorGroup]?.[color]
-	) as keyof typeof baseTheme.colors
+/**
+ * Check if a color is in the theme
+ * @param color
+ */
+export const isColor = (color: string): color is Colors =>
+	Object.values(baseTheme.colors).some((val) => color in val)
+
+/**
+ * Get the color group of a color
+ * @example getColorGroup('error') => { 100: '#FDE8E9', 200: '#F9BCC0', 300: '#DB666E', 400: '#CB111D', 500: '#96050F', 600: '#52070C' }
+ * @param color
+ */
+export const getColorGroup = <T extends Colors>(color: T) => {
+	const colorGroup = Object.values(baseTheme.colors).find(
+		(val) => color in val
+	) as ColorGroups | undefined
+
+	if (colorGroup && color in colorGroup) {
+		return (
+			(colorGroup[color as keyof ColorGroups] as Merge<
+				NonNullable<ColorGroups[T]>
+			>) ?? null
+		)
+	}
+
+	return null
 }

 // We use the Grid from material-ui, we need to uniformise
--- a/site/source/design-system/types.ts
+++ b/site/source/design-system/types.ts
@ -0,0 +1,9 @@
+export type XXL = { xxl: true }
+export type XL = { xl: true }
+export type LG = { lg: true }
+export type MD = { md: true }
+export type SM = { sm: true }
+export type XS = { xs: true }
+export type XXS = { xxs: true }
+
+export type KeysOfUnion<T> = T extends T ? keyof T : never
--- a/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx
@ -15,13 +15,11 @@ export default function Layout({
 		<>
 			<H1>{title}</H1>
 			<Grid container spacing={5}>
-				<Grid item sm={12} md={8} lg={9}>
+				<Grid item sm={12} md={7} lg={8}>
 					{children}
 				</Grid>
-				<Grid item sm={12} md={4} lg={3}>
-					<Message>
-						<StatutsDisponibles />
-					</Message>
+				<Grid item sm={12} md={5} lg={4}>
+					<StatutsDisponibles />
 				</Grid>
 			</Grid>
 		</>
--- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
@ -119,7 +119,10 @@ const StyledNavigation = styled.div`
 	padding: ${({ theme }) => theme.spacings.lg} 1rem;
 	margin: 0 -1rem;
 	bottom: 0;
-	background: ${({ theme }) => theme.colors.extended.grey[100]};
+	background: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.extended.dark[800]
+			: theme.colors.extended.grey[100]};
 	z-index: 2;
 	/* box-shadow: ${({ theme }) => theme.elevations[6]}; */
 `
--- a/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/StatutsDisponibles.tsx
@ -1,36 +1,136 @@
+import styled from 'styled-components'
+
 import { DottedName } from '@/../../modele-social'
+import { Status, StatusTag } from '@/components/StatusTag'
 import { useEngine } from '@/components/utils/EngineContext'
+import { Message } from '@/design-system'
 import { H5 } from '@/design-system/typography/heading'
 import { Li, Ul } from '@/design-system/typography/list'
 import { SmallBody } from '@/design-system/typography/paragraphs'

 export default function StatutsDisponibles() {
 	return (
-		<>
+		<StyledMessage>
 			<H5 as="h2"> Statuts disponibles</H5>
 			<SmallBody>
 				Les statuts disponibles diffèrent en fonction de l'activité
 				professionnelle que vous exercez
 			</SmallBody>
-			<Ul>
-				<Statut statut="entreprise . catégorie juridique . EI . EI" />
-				<Statut statut="entreprise . catégorie juridique . EI . auto-entrepreneur" />
-				<Statut statut="entreprise . catégorie juridique . SARL . EURL" />
-				<Statut statut="entreprise . catégorie juridique . SARL . SARL" />
-				<Statut statut="entreprise . catégorie juridique . SAS . SAS" />
-				<Statut statut="entreprise . catégorie juridique . SAS . SASU" />
-				<Statut statut="entreprise . catégorie juridique . SELARL . SELARL" />
-				<Statut statut="entreprise . catégorie juridique . SELARL . SELARLU" />
-				<Statut statut="entreprise . catégorie juridique . SELAS . SELAS" />
-				<Statut statut="entreprise . catégorie juridique . SELAS . SELASU" />
-				<Statut statut="entreprise . catégorie juridique . association" />
-			</Ul>
-		</>
+			<StyledUl noMarker>
+				<Statut
+					statut="entreprise . catégorie juridique . EI . EI"
+					status="EI"
+				/>
+				<Statut
+					statut="entreprise . catégorie juridique . EI . auto-entrepreneur"
+					status="AE"
+				/>
+				<Statut
+					statut="entreprise . catégorie juridique . SARL . EURL"
+					status="EURL"
+				/>
+				<Statut
+					statut="entreprise . catégorie juridique . SARL . SARL"
+					status="SARL"
+				/>
+				<Statut
+					statut="entreprise . catégorie juridique . SAS . SAS"
+					status="SAS"
+				/>
+				<Statut
+					statut="entreprise . catégorie juridique . SAS . SASU"
+					status="SASU"
+				/>
+				{/* <Statut
+					statut="entreprise . catégorie juridique . SELARL . SELARL"
+					status=""
+				/>
+				<Statut
+					statut="entreprise . catégorie juridique . SELARL . SELARLU"
+					status=""
+				/>
+				<Statut
+					statut="entreprise . catégorie juridique . SELAS . SELAS"
+					status=""
+				/>
+				<Statut
+					statut="entreprise . catégorie juridique . SELAS . SELASU"
+					status=""
+				/> */}
+				<Statut
+					statut="entreprise . catégorie juridique . association"
+					status="association"
+				/>
+			</StyledUl>
+		</StyledMessage>
 	)
 }

-function Statut({ statut }: { statut: DottedName }) {
-	const engine = useEngine()
+const StyledMessage = styled(Message)`
+	padding-top: 2rem;
+	border: none;
+	border-radius: 0.5rem;
+	background: ${({ theme }) =>
+		theme.darkMode
+			? theme.colors.bases.primary[400]
+			: theme.colors.bases.primary[100]};

-	return <Li>{engine.getRule(statut).title}</Li>
+	/* cut the top right corner */
+	clip-path: polygon(0 100%, 0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%);
+
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0;
+		width: 40px;
+		height: 40px;
+		background: ${({ theme }) => theme.colors.bases.primary[300]};
+		border-bottom-left-radius: 0.5rem;
+		/* css blue triangle */
+		clip-path: polygon(
+			-10px -10px,
+			0 calc(100% + 10px),
+			calc(100% + 10px) calc(100% + 10px)
+		);
+	}
+`
+
+function Statut({ statut, status }: { statut: DottedName; status: Status }) {
+	const engine = useEngine()
+	const disabled = status === 'AE'
+
+	return (
+		<Li className={disabled ? 'disabled' : ''}>
+			<StyledSpan>{engine.getRule(statut).title}</StyledSpan>
+			<StatusTag status={status} text="acronym" showIcon />
+		</Li>
+	)
 }
+
+const StyledSpan = styled.span``
+
+const StyledUl = styled(Ul)`
+	${Li} {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background: ${({ theme }) => theme.colors.extended.grey[100]};
+		border-radius: ${({ theme }) => theme.box.borderRadius};
+		padding: ${({ theme }) => theme.spacings.sm};
+
+		${StyledSpan} {
+			color: ${({ theme }) => theme.colors.bases.primary[700]};
+			font-weight: bold;
+		}
+
+		&.disabled {
+			background: ${({ theme }) => theme.colors.extended.grey[200]};
+			${StyledSpan} {
+				color: ${({ theme }) => theme.colors.extended.grey[600]};
+				font-weight: bold;
+				text-decoration-line: line-through;
+			}
+		}
+	}
+`
--- a/site/source/pages/assistants/choix-du-statut/détails-activité.tsx
+++ b/site/source/pages/assistants/choix-du-statut/détails-activité.tsx
@ -117,7 +117,6 @@ function GuichetSelection({
 						<RadioCardSkeleton
 							value={guichetEntry.code}
 							key={guichetEntry.code}
-							visibleRadioAs="div"
 						>
 							<H5 as="h3">{getGuichetTitle(guichetEntry.label)}</H5>
 							<GuichetDescription {...guichetEntry} />
@ -132,11 +131,9 @@ function GuichetSelection({
 function GuichetSkeleton() {
 	return (
 		<Message border={false}>
-			<Body>
-				<Skeleton width={300} height={20} />
-				<Spacing md />
-				<Skeleton width={600} height={20} />
-			</Body>
+			<Skeleton width={300} height={20} />
+			<Spacing md />
+			<Skeleton width={600} height={20} />
 		</Message>
 	)
 }
--- a/site/source/pages/simulateurs/comparaison-statuts/components/AllerPlusLoinRevenus.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/AllerPlusLoinRevenus.tsx
@ -9,13 +9,15 @@ import { SwitchInput } from '@/components/conversation/ChoicesInput'
 import { ExplicableRule } from '@/components/conversation/Explicable'
 import RuleInput from '@/components/conversation/RuleInput'
 import Value from '@/components/EngineValue'
+import { StatusTag } from '@/components/StatusTag'
 import { useEngine } from '@/components/utils/EngineContext'
 import { Message } from '@/design-system'
 import { Button } from '@/design-system/buttons'
 import { Drawer } from '@/design-system/drawer'
 import { ArrowRightIcon, InfoIcon } from '@/design-system/icons'
 import { Grid, Spacing } from '@/design-system/layout'
-import { Tag, TagType } from '@/design-system/tag'
+import { Tag } from '@/design-system/tag'
+import { Colors } from '@/design-system/theme'
 import { Tooltip } from '@/design-system/tooltip'
 import { Strong } from '@/design-system/typography'
 import { H2, H4, H5 } from '@/design-system/typography/heading'
@ -24,7 +26,6 @@ import { Body } from '@/design-system/typography/paragraphs'
 import { answerQuestion } from '@/store/actions/actions'

 import { useCasParticuliers } from '../contexts/CasParticuliers'
-import { StatusTagIcon } from './StatusCard'

 const DOTTEDNAME_SOCIETE_IMPOT = 'entreprise . imposition'
 const DOTTEDNAME_SOCIETE_VERSEMENT_LIBERATOIRE =
@ -137,7 +138,7 @@ const AllerPlusLoinRevenus = ({
 								<th className="sr-only">Type de structure</th>
 								<th scope="col">
 									<span className="table-title-sasu">
-										<StatusTagIcon status="sasu" /> SASU
+										<StatusTag status="SASU" text="acronym" showIcon />
 									</span>
 								</th>

@ -147,7 +148,7 @@ const AllerPlusLoinRevenus = ({
 										id="tooltip-ei-table"
 									>
 										<span className="table-title-ei">
-											<StatusTagIcon status="ei" /> EI
+											<StatusTag status="EI" text="acronym" showIcon />
 										</span>
 									</Tooltip>
 								</th>
@ -155,7 +156,7 @@ const AllerPlusLoinRevenus = ({
 								<th scope="col">
 									<Tooltip tooltip="Auto-entreprise" id="tooltip-ae-table">
 										<span className="table-title-ae">
-											<StatusTagIcon status="ae" /> AE
+											<StatusTag status="AE" text="acronym" showIcon />
 										</span>
 									</Tooltip>
 								</th>
@ -175,7 +176,7 @@ const AllerPlusLoinRevenus = ({
 									<Trans>Chiffre d'affaires</Trans>
 								</th>
 								<td colSpan={3}>
-									<StyledTag $color={'grey' as TagType}>
+									<StyledTag color={'grey' as Colors}>
 										<Value
 											expression="entreprise . chiffre d'affaires"
 											displayedUnit="€"
@ -190,7 +191,7 @@ const AllerPlusLoinRevenus = ({
 									<Trans>Charges</Trans>
 								</th>
 								<td colSpan={3}>
-									<StyledTag $color={'grey' as TagType}>
+									<StyledTag color={'grey' as Colors}>
 										<Value
 											expression="entreprise . charges"
 											unit="€/an"
@ -206,7 +207,7 @@ const AllerPlusLoinRevenus = ({
 									<Trans>Cotisations</Trans>
 								</th>
 								<td>
-									<StyledTag $color={'secondary' as TagType}>
+									<StyledTag color={'secondary' as Colors}>
 										<Value
 											expression="dirigeant . rémunération . cotisations"
 											engine={assimiléEngine}
@ -217,7 +218,7 @@ const AllerPlusLoinRevenus = ({
 									</StyledTag>
 								</td>
 								<td>
-									<StyledTag $color={'independant' as TagType}>
+									<StyledTag color={'independant' as Colors}>
 										<Value
 											expression="dirigeant . rémunération . cotisations"
 											engine={indépendantEngine}
@ -228,7 +229,7 @@ const AllerPlusLoinRevenus = ({
 									</StyledTag>
 								</td>
 								<td>
-									<StyledTag $color={'tertiary' as TagType}>
+									<StyledTag color={'tertiary' as Colors}>
 										<Value
 											expression="dirigeant . rémunération . cotisations"
 											engine={autoEntrepreneurEngine}
@ -244,7 +245,7 @@ const AllerPlusLoinRevenus = ({
 									<Minus aria-label={t('moins')}>-</Minus> <Trans>Impôts</Trans>
 								</th>
 								<td>
-									<StyledTag $color={'secondary' as TagType}>
+									<StyledTag color={'secondary' as Colors}>
 										<Value
 											expression="dirigeant . rémunération . impôt"
 											engine={assimiléEngine}
@ -255,7 +256,7 @@ const AllerPlusLoinRevenus = ({
 									</StyledTag>
 								</td>
 								<td>
-									<StyledTag $color={'independant' as TagType}>
+									<StyledTag color={'independant' as Colors}>
 										<Value
 											expression="dirigeant . rémunération . impôt"
 											engine={indépendantEngine}
@ -266,7 +267,7 @@ const AllerPlusLoinRevenus = ({
 									</StyledTag>
 								</td>
 								<td>
-									<StyledTag $color={'tertiary' as TagType}>
+									<StyledTag color={'tertiary' as Colors}>
 										<Value
 											expression="dirigeant . rémunération . impôt"
 											engine={autoEntrepreneurEngine}
@ -294,7 +295,7 @@ const AllerPlusLoinRevenus = ({
 									</StyledStrong>
 								</th>
 								<td>
-									<StyledTag $color={'secondary' as TagType}>
+									<StyledTag color={'secondary' as Colors}>
 										<Strong>
 											<Value
 												expression="dirigeant . rémunération . net . après impôt"
@ -307,7 +308,7 @@ const AllerPlusLoinRevenus = ({
 									</StyledTag>
 								</td>
 								<td>
-									<StyledTag $color={'independant' as TagType}>
+									<StyledTag color={'independant' as Colors}>
 										<Strong>
 											<Value
 												expression="dirigeant . rémunération . net . après impôt"
@ -320,7 +321,7 @@ const AllerPlusLoinRevenus = ({
 									</StyledTag>
 								</td>
 								<td>
-									<StyledTag $color={'tertiary' as TagType}>
+									<StyledTag color={'tertiary' as Colors}>
 										<Strong>
 											<Value
 												expression="dirigeant . rémunération . net . après impôt"
@ -480,7 +481,7 @@ const AllerPlusLoinRevenus = ({
 	)
 }

-const StyledTag = styled(Tag)<{ $color: TagType }>`
+const StyledTag = styled(Tag)`
 	width: 100%;
 	justify-content: center;
 	font-size: 0.75rem;
--- a/site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/DetailsRowCards.tsx
@ -15,7 +15,9 @@ import { getBestOption, OptionType } from '../utils'
 import StatusCard from './StatusCard'

 const getStatusLabelsArray = (statusArray: OptionType[]) =>
-	statusArray.map((statusOption) => statusOption.type)
+	statusArray.map(
+		(statusOption) => statusOption.type.toUpperCase() as 'SASU' | 'EI' | 'AE'
+	)

 const getGridSizes = (statusArray: OptionType[]) => {
 	return { sizeXs: 12, sizeLg: 4 * statusArray.length }
--- a/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx
@ -489,7 +489,7 @@ const Détails = ({
 							sa vie professionnelle.
 						</Trans>
 					</Body>
-					<StatusCard status={['sasu', 'ei', 'ae']}>
+					<StatusCard status={['SASU', 'EI', 'AE']}>
 						<span>
 							<Value
 								linkToRule={false}
@ -637,12 +637,12 @@ const Détails = ({
 					</Body>
 					<Grid container spacing={4}>
 						<Grid item xs={12} lg={4}>
-							<StatusCard status={['sasu']}>
+							<StatusCard status={['SASU']}>
 								<Trans>1 € minimum</Trans>
 							</StatusCard>
 						</Grid>
 						<Grid item xs={12} lg={8}>
-							<StatusCard status={['ei', 'ae']}>
+							<StatusCard status={['EI', 'AE']}>
 								<DisabledLabel>
 									<Trans>Aucun</Trans>
 								</DisabledLabel>
@ -664,17 +664,17 @@ const Détails = ({
 					</Body>
 					<Grid container spacing={4}>
 						<Grid item xs={12} lg={4}>
-							<StatusCard status={['sasu']}>
+							<StatusCard status={['SASU']}>
 								<Trans>Conjoint associé ou salarié</Trans>
 							</StatusCard>
 						</Grid>
 						<Grid item xs={12} lg={4}>
-							<StatusCard status={['ei']}>
+							<StatusCard status={['EI']}>
 								<Trans>Conjoint collaborateur ou salarié</Trans>
 							</StatusCard>
 						</Grid>
 						<Grid item xs={12} lg={4}>
-							<StatusCard status={['ae']}>
+							<StatusCard status={['AE']}>
 								<Trans>Conjoint collaborateur</Trans>
 							</StatusCard>
 						</Grid>
--- a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuAprèsImpot.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuAprèsImpot.tsx
@ -66,7 +66,7 @@ const RevenuAprèsImpot = ({
 			<Grid container spacing={4}>
 				<Grid item xs={12} lg={4}>
 					<StatusCard
-						status={['sasu']}
+						status={['SASU']}
 						isBestOption={bestOption === 'sasu'}
 						footerContent={
 							<CheckList
@ -121,7 +121,7 @@ const RevenuAprèsImpot = ({

 				<Grid item xs={12} lg={4}>
 					<StatusCard
-						status={['ei']}
+						status={['EI']}
 						isBestOption={bestOption === 'ei'}
 						footerContent={
 							<CheckList
@ -181,7 +181,7 @@ const RevenuAprèsImpot = ({

 				<Grid item xs={12} lg={4}>
 					<StatusCard
-						status={['ae']}
+						status={['AE']}
 						isBestOption={bestOption === 'ae'}
 						footerContent={
 							<CheckList
--- a/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx
@ -2,37 +2,21 @@ import { ReactNode, useRef } from 'react'
 import { Trans } from 'react-i18next'
 import styled from 'styled-components'

+import { StatusTag } from '@/components/StatusTag'
 import { CardContainer } from '@/design-system/card/Card'
 import { Emoji } from '@/design-system/emoji'
-import { CircleIcon, HexagonIcon, TriangleIcon } from '@/design-system/icons'
 import { Grid } from '@/design-system/layout'
-import { Tag, TagType } from '@/design-system/tag'
 import { Tooltip } from '@/design-system/tooltip'
 import { Body } from '@/design-system/typography/paragraphs'
 import { generateUuid } from '@/utils'

 type StatusCardType = {
-	status: ('sasu' | 'ei' | 'ae')[]
+	status: ('SASU' | 'EI' | 'AE')[]
 	footerContent?: ReactNode
 	isBestOption?: boolean
 	children: ReactNode
 }

-const STATUS_DATA = {
-	sasu: {
-		color: 'secondary',
-		label: 'Société (SASU)',
-	},
-	ei: {
-		color: 'independant',
-		label: 'Entreprise individuelle (EI)',
-	},
-	ae: {
-		color: 'tertiary',
-		label: 'Auto-entrepreneur',
-	},
-}
-
 const StatusCard = ({
 	status,
 	children,
@ -47,17 +31,7 @@ const StatusCard = ({
 				<Grid container spacing={1}>
 					{status.map((statusString) => (
 						<Grid item key={statusString}>
-							<StyledTag
-								key={statusString}
-								$color={STATUS_DATA[statusString].color as TagType}
-								$size="sm"
-							>
-								<StatusTagIcon
-									style={{ marginRight: '0.25rem' }}
-									status={statusString}
-								/>
-								{STATUS_DATA[statusString].label}
-							</StyledTag>
+							<StatusTag status={statusString} text="shortName" showIcon />
 						</Grid>
 					))}
 				</Grid>
@ -98,13 +72,6 @@ const StyledCardContainer = styled(CardContainer)`
 	padding: 0;
 `

-const StyledTag = styled(Tag)`
-	display: inline-flex;
-	&:not(:last-child) {
-		margin-right: 0.5rem;
-	}
-`
-
 const StyledEmoji = styled(Emoji)`
 	position: absolute;
 	top: 0;
@ -138,23 +105,3 @@ const StyledBodyTooltip = styled(Body)`
 	font-size: 0.75rem;
 	margin: 0;
 `
-
-export const StatusTagIcon = ({
-	status,
-	...props
-}: {
-	status: 'sasu' | 'ei' | 'ae'
-	style?: { marginRight: string }
-}) => {
-	switch (true) {
-		case status.includes('sasu'):
-			return <HexagonIcon {...props} />
-		case status.includes('ei'):
-			return <TriangleIcon {...props} />
-		case status.includes('ae'):
-			return <CircleIcon {...props} />
-
-		default:
-			return null
-	}
-}
--- a/site/source/types/utils.d.ts
+++ b/site/source/types/utils.d.ts
@ -1,5 +1,5 @@
 /**
- * Immutable type
+ * Immutable type, useful for satisfied typescript type checking
 *
 * source: https://github.com/cefn/lauf/blob/b982a09/modules/store/src/types/immutable.ts#L25
 */