From 6cc6a2ee233f4f4bb10d4a8327a2be475af782e4 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Fri, 8 Sep 2023 16:29:02 +0200
Subject: [PATCH] Styled component update : ajoute des & devant tous les
 pseudo-selector

---
 site/source/components/Feedback/FeedbackRating.tsx |  2 +-
 site/source/components/charts/PagesCharts.tsx      |  2 +-
 site/source/components/conversation/AnswerList.tsx |  2 +-
 .../source/components/conversation/NumberInput.tsx |  2 ++
 .../conversation/select/SelectCommune.tsx          |  4 ++--
 site/source/design-system/accordion/index.tsx      |  6 +++---
 site/source/design-system/buttons/Button.tsx       |  6 +++---
 .../buttons/HelpButtonWithPopover.tsx              |  2 +-
 site/source/design-system/card/Card.tsx            |  2 +-
 site/source/design-system/field/Checkbox.tsx       |  2 +-
 site/source/design-system/field/Radio/Radio.tsx    | 14 +++++++-------
 site/source/design-system/field/SearchField.tsx    |  2 +-
 site/source/design-system/field/Select/ListBox.tsx |  4 ++--
 site/source/design-system/field/TextAreaField.tsx  |  8 ++++----
 site/source/design-system/field/TextField.tsx      |  8 ++++----
 site/source/design-system/message/index.tsx        |  4 ++--
 site/source/design-system/popover/Popover.tsx      |  4 ++--
 site/source/design-system/stepper/index.tsx        |  6 +++---
 site/source/design-system/switch/Switch.tsx        | 12 ++++++------
 site/source/design-system/typography/heading.tsx   |  2 +-
 20 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/site/source/components/Feedback/FeedbackRating.tsx b/site/source/components/Feedback/FeedbackRating.tsx
index cd019269a..f0fbcd95b 100644
--- a/site/source/components/Feedback/FeedbackRating.tsx
+++ b/site/source/components/Feedback/FeedbackRating.tsx
@@ -65,7 +65,7 @@ const EmojiButton = styled.button`
 	background: none;
 	transition: transform 0.05s;
 	will-change: transform;
-	:hover {
+	&:hover {
 		transform: scale(1.3);
 	}
 `
diff --git a/site/source/components/charts/PagesCharts.tsx b/site/source/components/charts/PagesCharts.tsx
index 12f091bed..875189d9a 100644
--- a/site/source/components/charts/PagesCharts.tsx
+++ b/site/source/components/charts/PagesCharts.tsx
@@ -181,7 +181,7 @@ const formatLegend = (key: string) =>
 	key.replace('simulateurs / ', '').replace(/_/g, ' ')
 
 const ColoredLi = styled(Li)<{ color?: string }>`
-	::before {
+	&::before {
 		${({ color }) =>
 			color &&
 			css`
diff --git a/site/source/components/conversation/AnswerList.tsx b/site/source/components/conversation/AnswerList.tsx
index edac19def..c41314c6f 100644
--- a/site/source/components/conversation/AnswerList.tsx
+++ b/site/source/components/conversation/AnswerList.tsx
@@ -349,7 +349,7 @@ const StyledAnswerList = styled(Grid)`
 			? theme.colors.bases.primary[100]
 			: theme.colors.extended.dark[500]};
 	font-family: ${({ theme }) => theme.fonts.main};
-	:nth-child(2n) {
+	&:nth-child(2n) {
 		background-color: ${({ theme }) =>
 			theme.darkMode
 				? theme.colors.extended.dark[500]
diff --git a/site/source/components/conversation/NumberInput.tsx b/site/source/components/conversation/NumberInput.tsx
index d8fff550a..3cbbed7a9 100644
--- a/site/source/components/conversation/NumberInput.tsx
+++ b/site/source/components/conversation/NumberInput.tsx
@@ -19,6 +19,7 @@ export default function NumberInput({
 	unit,
 	formatOptions,
 	displayedUnit,
+	small,
 }: InputProps & {
 	unit?: Unit
 }) {
@@ -61,6 +62,7 @@ export default function NumberInput({
 	return (
 		<StyledNumberInput>
 			<NumberField
+				small={small}
 				description=""
 				displayedUnit={
 					parsedDisplayedUnit &&
diff --git a/site/source/components/conversation/select/SelectCommune.tsx b/site/source/components/conversation/select/SelectCommune.tsx
index 219b88b73..38012a778 100644
--- a/site/source/components/conversation/select/SelectCommune.tsx
+++ b/site/source/components/conversation/select/SelectCommune.tsx
@@ -219,8 +219,8 @@ const Option = styled(Body)<{
 
 	border-radius: 0.3rem;
 	border: 2px solid transparent;
-	:hover,
-	:focus {
+	&:hover,
+	&:focus {
 		${FocusedOption}
 	}
 	transition: background-color 0.2s;
diff --git a/site/source/design-system/accordion/index.tsx b/site/source/design-system/accordion/index.tsx
index 35dcc2a05..bb1466589 100644
--- a/site/source/design-system/accordion/index.tsx
+++ b/site/source/design-system/accordion/index.tsx
@@ -198,7 +198,7 @@ const StyledTitle = styled.h3`
 `
 
 const StyledAccordionItem = styled.div`
-	:not(:first-child) {
+	&:not(:first-child) {
 		border-top: 1px solid ${({ theme }) => theme.colors.bases.primary[400]};
 	}
 `
@@ -219,11 +219,11 @@ const StyledButton = styled.button<{ $variant?: 'light' }>`
 			border-radius: ${theme.box.borderRadius};
 		}
 	`}
-	:hover {
+	&:hover {
 		text-decoration: ${({ $variant }) =>
 			$variant === 'light' ? 'none' : 'underline'};
 	}
-	:focus {
+	&:focus {
 		${FocusStyle}
 	}
 
diff --git a/site/source/design-system/buttons/Button.tsx b/site/source/design-system/buttons/Button.tsx
index 27033d0e1..6f674dc8c 100644
--- a/site/source/design-system/buttons/Button.tsx
+++ b/site/source/design-system/buttons/Button.tsx
@@ -119,7 +119,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 				: ''}
 	}
 
-	:focus {
+	&:focus {
 		${FocusStyle}
 	}
 
@@ -173,7 +173,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 	/////////////////////
 
 	/* HOVER STYLE */
-	:hover {
+	&:hover {
 		${({ theme, $color, disabled, $light }) =>
 			disabled || theme.darkMode
 				? ''
@@ -197,7 +197,7 @@ export const StyledButton = styled.button<StyledButtonProps>`
 
 	/* Dark mode */
 	@media not print {
-		:hover {
+		&:hover {
 			${({ $light, theme, disabled }) =>
 				disabled || !theme.darkMode
 					? ''
diff --git a/site/source/design-system/buttons/HelpButtonWithPopover.tsx b/site/source/design-system/buttons/HelpButtonWithPopover.tsx
index 6460493f5..2d11ad37d 100644
--- a/site/source/design-system/buttons/HelpButtonWithPopover.tsx
+++ b/site/source/design-system/buttons/HelpButtonWithPopover.tsx
@@ -103,7 +103,7 @@ const StyledButton = styled(Button)<{ $light?: boolean }>`
 			(${({ theme }) => theme.spacings.md}) / 2 + var(--padding)
 		);
 
-		:hover {
+		&:hover {
 			background-color: ${({ theme }) => theme.colors.bases.primary[200]};
 		}
 	}
diff --git a/site/source/design-system/card/Card.tsx b/site/source/design-system/card/Card.tsx
index b80aa1e8a..d550f4183 100644
--- a/site/source/design-system/card/Card.tsx
+++ b/site/source/design-system/card/Card.tsx
@@ -121,7 +121,7 @@ const CompactStyledHeader = styled(H4)`
 const StyledHeader = styled(H3)`
 	text-align: center;
 	${HeadingUnderline}
-	::after {
+	&::after {
 		margin: auto;
 	}
 `
diff --git a/site/source/design-system/field/Checkbox.tsx b/site/source/design-system/field/Checkbox.tsx
index 802c1418c..be99ebdc9 100644
--- a/site/source/design-system/field/Checkbox.tsx
+++ b/site/source/design-system/field/Checkbox.tsx
@@ -81,7 +81,7 @@ const CheckboxVisualContainer = styled.span`
 	-webkit-tap-highlight-color: transparent;
 	transition: all 0.2s ease;
 
-	::before {
+	&::before {
 		content: '';
 		position: absolute;
 		top: calc(var(--halo) * -1 - 2px);
diff --git a/site/source/design-system/field/Radio/Radio.tsx b/site/source/design-system/field/Radio/Radio.tsx
index d70b739fa..4d3aa44da 100644
--- a/site/source/design-system/field/Radio/Radio.tsx
+++ b/site/source/design-system/field/Radio/Radio.tsx
@@ -99,7 +99,7 @@ export const RadioButton = styled.span`
 	flex-shrink: 0;
 	position: relative;
 	margin-right: var(--halo);
-	::before {
+	&::before {
 		content: '';
 		position: absolute;
 		top: calc(var(--halo) * -1);
@@ -126,12 +126,12 @@ export const VisibleRadio = styled.span<{ $inert?: boolean }>`
 	${({ theme, $inert }) =>
 		!$inert
 			? css`
-			:hover > ${RadioButton}::before {
+			&:hover > ${RadioButton}::before {
 				opacity: 1;
 				transform: scale(1);
 			}
 
-			:hover ${OutsideCircle} {
+			&:hover ${OutsideCircle} {
 				border-color: ${
 					theme.darkMode
 						? theme.colors.bases.primary[500]
@@ -159,20 +159,20 @@ export const SpanBody = styled(Body).attrs({ as: 'span' })`
 `
 
 export const InputRadio = styled.input`
-	:focus
+	&:focus
 		+ ${VisibleRadio}
 		${OutsideCircle},
-		:checked
+		&:checked
 		+ ${VisibleRadio}
 		${OutsideCircle} {
 		border-color: ${({ theme }) => theme.colors.bases.primary[700]};
 	}
 
-	:focus + ${VisibleRadio} {
+	&:focus + ${VisibleRadio} {
 		${FocusStyle}
 	}
 
-	:checked + ${VisibleRadio} ${InsideCircle} {
+	&:checked + ${VisibleRadio} ${InsideCircle} {
 		transform: scale(1);
 	}
 `
diff --git a/site/source/design-system/field/SearchField.tsx b/site/source/design-system/field/SearchField.tsx
index c3d1f44e7..510d396ce 100644
--- a/site/source/design-system/field/SearchField.tsx
+++ b/site/source/design-system/field/SearchField.tsx
@@ -33,7 +33,7 @@ const SearchInput = styled(StyledInput)`
 
 const SearchInputContainer = styled(StyledInputContainer)`
 	padding-left: 0.5rem;
-	:focus-within {
+	&:focus-within {
 		${FocusStyle}
 	}
 `
diff --git a/site/source/design-system/field/Select/ListBox.tsx b/site/source/design-system/field/Select/ListBox.tsx
index 9f996754a..c7d90181f 100644
--- a/site/source/design-system/field/Select/ListBox.tsx
+++ b/site/source/design-system/field/Select/ListBox.tsx
@@ -63,8 +63,8 @@ const ListItem = styled.li<{ isFocused?: boolean; isSelected?: boolean }>`
 
 	border-radius: 0.3rem;
 	border: 2px solid transparent;
-	:hover,
-	:focus {
+	&:hover,
+	&:focus {
 		${FocusedOption}
 	}
 	max-width: 100%;
diff --git a/site/source/design-system/field/TextAreaField.tsx b/site/source/design-system/field/TextAreaField.tsx
index 09530e9f3..d935239d3 100644
--- a/site/source/design-system/field/TextAreaField.tsx
+++ b/site/source/design-system/field/TextAreaField.tsx
@@ -73,7 +73,7 @@ export const StyledTextArea = styled.textarea`
 	height: 100%;
 	outline: none;
 	transition: color 0.2s;
-	::placeholder {
+	&::placeholder {
 		${({ theme }) =>
 			theme.darkMode &&
 			css`
@@ -155,7 +155,7 @@ export const StyledTextAreaContainer = styled.div<{
 	align-items: center;
 	transition: all 0.2s;
 
-	:focus-within {
+	&:focus-within {
 		outline-color: ${({ theme, $hasError }) =>
 			$hasError
 				? theme.colors.extended.error[400]
@@ -165,12 +165,12 @@ export const StyledTextAreaContainer = styled.div<{
 		outline-offset: ${({ theme }) => theme.spacings.xxs};
 		outline-width: ${({ theme }) => theme.spacings.xxs};
 	}
-	:focus-within ${StyledLabel} {
+	&:focus-within ${StyledLabel} {
 		color: ${({ theme }) => theme.colors.bases.primary[800]};
 		background-color: inherit;
 	}
 
-	:focus-within + ${StyledDescription} {
+	&:focus-within + ${StyledDescription} {
 		${({ theme }) =>
 			!theme.darkMode &&
 			css`
diff --git a/site/source/design-system/field/TextField.tsx b/site/source/design-system/field/TextField.tsx
index b6720cb6c..52516542e 100644
--- a/site/source/design-system/field/TextField.tsx
+++ b/site/source/design-system/field/TextField.tsx
@@ -66,7 +66,7 @@ export const StyledInput = styled.input`
 	height: 100%;
 	outline: none;
 	transition: color 0.2s;
-	::placeholder {
+	&::placeholder {
 		${({ theme }) =>
 			theme.darkMode &&
 			css`
@@ -149,7 +149,7 @@ export const StyledInputContainer = styled.div<{
 	align-items: center;
 	transition: all 0.2s;
 
-	:focus-within {
+	&:focus-within {
 		outline-color: ${({ theme, $hasError }) =>
 			$hasError
 				? theme.colors.extended.error[400]
@@ -159,12 +159,12 @@ export const StyledInputContainer = styled.div<{
 		outline-offset: ${({ theme }) => theme.spacings.xxs};
 		outline-width: ${({ theme }) => theme.spacings.xxs};
 	}
-	:focus-within ${StyledLabel} {
+	&:focus-within ${StyledLabel} {
 		color: ${({ theme }) => theme.colors.bases.primary[800]};
 		background-color: transparent;
 	}
 
-	:focus-within + ${StyledDescription} {
+	&:focus-within + ${StyledDescription} {
 		${({ theme }) =>
 			!theme.darkMode &&
 			css`
diff --git a/site/source/design-system/message/index.tsx b/site/source/design-system/message/index.tsx
index edc24b45d..7d378aec9 100644
--- a/site/source/design-system/message/index.tsx
+++ b/site/source/design-system/message/index.tsx
@@ -111,8 +111,8 @@ const StyledMessage = styled.div<StyledMessageProps>`
 			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};
+			border: ${$mini ? '1px' : '2px'} solid ${colorSpace[$border ? 500 : 100]};
+			border-radius: ${theme.box.borderRadius};
 			margin-bottom: ${theme.spacings.md};
 
 			&& h3,
diff --git a/site/source/design-system/popover/Popover.tsx b/site/source/design-system/popover/Popover.tsx
index 24a3a0e44..ad115c856 100644
--- a/site/source/design-system/popover/Popover.tsx
+++ b/site/source/design-system/popover/Popover.tsx
@@ -256,10 +256,10 @@ export const CloseButton = styled.button`
 				? theme.colors.extended.grey[100]
 				: theme.colors.bases.primary[700]};
 	}
-	:hover {
+	&:hover {
 		text-decoration: underline;
 	}
-	:focus {
+	&:focus {
 		${FocusStyle}
 		box-shadow:  inset 0 0 0 3px #ffffff;
 		outline-offset: -2px;
diff --git a/site/source/design-system/stepper/index.tsx b/site/source/design-system/stepper/index.tsx
index 97e529abe..ea779f4a1 100644
--- a/site/source/design-system/stepper/index.tsx
+++ b/site/source/design-system/stepper/index.tsx
@@ -86,7 +86,7 @@ const StyledStepContainer = styled.li`
 	counter-increment: step-counter;
 	display: inline-block;
 	margin-right: ${({ theme }) => theme.spacings.lg};
-	:last-child {
+	&:last-child {
 		margin-right: 0;
 	}
 	margin-bottom: ${({ theme }) => theme.spacings.md};
@@ -98,7 +98,7 @@ const StyledStepContainer = styled.li`
 	}
 `
 const StyledStepNumber = styled.span<{ $active: boolean; $disabled: boolean }>`
-	::before {
+	&::before {
 		content: counter(step-counter);
 		font-size: 1.125rem;
 		font-weight: 500;
@@ -151,7 +151,7 @@ const StyledProgressBar = styled.span<{
 	background-color: ${({ theme }) => theme.colors.extended.grey[300]};
 
 	position: relative;
-	::after {
+	&::after {
 		display: block;
 		content: '';
 		height: inherit;
diff --git a/site/source/design-system/switch/Switch.tsx b/site/source/design-system/switch/Switch.tsx
index d1319f1f1..9a8bef71d 100644
--- a/site/source/design-system/switch/Switch.tsx
+++ b/site/source/design-system/switch/Switch.tsx
@@ -59,7 +59,7 @@ const StyledSwitch = styled.span<StyledProps>`
 	${({ $light }) =>
 		$light
 			? css`
-					border: 2px #ffffffbf solid;
+					border: 2px #ffffffbf solid !important;
 			  `
 			: ''}
 
@@ -72,7 +72,7 @@ const StyledSwitch = styled.span<StyledProps>`
 					? theme.colors.bases.primary[700]
 					: theme.colors.extended.grey[500]}42; // 42 is alpha
 	}
-	:focus-within {
+	&:focus-within {
 		${FocusStyle}
 	}
 	${({ disabled, theme }) =>
@@ -105,7 +105,7 @@ type AriaSwitchProps = Parameters<typeof useSwitch>[0]
 
 export type SwitchProps = AriaSwitchProps & {
 	size?: Size
-	$light?: boolean
+	light?: boolean
 	children?: ReactNode
 	className?: string
 	role?: string
@@ -118,7 +118,7 @@ export type SwitchProps = AriaSwitchProps & {
 export const Switch = (props: SwitchProps) => {
 	const {
 		size = 'MD',
-		$light = false,
+		light = false,
 		children,
 		className,
 		invertLabel = false,
@@ -137,7 +137,7 @@ export const Switch = (props: SwitchProps) => {
 				<Text $invertLabel={invertLabel}>{children}</Text>
 			)}
 			<StyledSwitch
-				$light={$light}
+				$light={light}
 				$size={size}
 				checked={isSelected}
 				disabled={isDisabled}
@@ -151,7 +151,7 @@ export const Switch = (props: SwitchProps) => {
 					role={props?.role}
 				/>
 				<StyledSpan
-					$light={$light}
+					$light={light}
 					$size={size}
 					aria-hidden
 					checked={isSelected}
diff --git a/site/source/design-system/typography/heading.tsx b/site/source/design-system/typography/heading.tsx
index 1dbe91bfe..3c0330b59 100644
--- a/site/source/design-system/typography/heading.tsx
+++ b/site/source/design-system/typography/heading.tsx
@@ -12,7 +12,7 @@ const baseHeading = css`
 `
 
 export const HeadingUnderline = css`
-	::after {
+	&::after {
 		height: 1.25rem;
 		width: 5rem;
 		display: block;