From c1b272e1ca5715b6e3bc09a87b18ab73f92952a6 Mon Sep 17 00:00:00 2001
From: Alice Dahan <lilice.dhn@gmail.com>
Date: Thu, 28 Nov 2024 14:28:15 +0100
Subject: [PATCH] =?UTF-8?q?refactor:=20cr=C3=A9ation=20d'un=20=C3=A9l?=
 =?UTF-8?q?=C3=A9ment=20r=C3=A9utilisable=20RotatingChevronIcon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../design-system/icons/index.stories.tsx     | 27 +++++++++++++++++--
 site/source/design-system/icons/index.tsx     | 13 ++++++++-
 .../recherche-code-ape/components/Result.tsx  | 12 ++-------
 .../RéductionGénéraleMoisParMoisRow.tsx       | 21 +++++----------
 4 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/site/source/design-system/icons/index.stories.tsx b/site/source/design-system/icons/index.stories.tsx
index ac6687e3a..0ef8d8a59 100644
--- a/site/source/design-system/icons/index.stories.tsx
+++ b/site/source/design-system/icons/index.stories.tsx
@@ -1,6 +1,7 @@
-import { Meta } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
+import { ComponentProps, useState } from 'react'
 
-import { SvgIcon } from '.'
+import { RotatingChevronIcon, SvgIcon } from '.'
 
 const meta: Meta<typeof SvgIcon> = {
 	component: SvgIcon,
@@ -32,3 +33,25 @@ export {
 	TriangleIcon,
 	WarningIcon,
 } from '@/design-system/icons'
+
+const RotatingChevronExample = (
+	args: ComponentProps<typeof RotatingChevronIcon>
+) => {
+	const [isOpen, setIsOpen] = useState(false)
+
+	return (
+		<>
+			<button onClick={() => setIsOpen(!isOpen)}>
+				{isOpen ? 'Ouvert' : 'Fermé'}
+				<RotatingChevronIcon {...args} $isOpen={isOpen} />
+			</button>
+			{isOpen && <div>Visible si ouvert</div>}
+		</>
+	)
+}
+
+type Story = StoryObj<typeof RotatingChevronExample>
+
+export const Chevron: Story = {
+	render: (args) => <RotatingChevronExample {...args} />,
+}
diff --git a/site/source/design-system/icons/index.tsx b/site/source/design-system/icons/index.tsx
index f7665d86b..32a09159c 100644
--- a/site/source/design-system/icons/index.tsx
+++ b/site/source/design-system/icons/index.tsx
@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react'
-import { styled } from 'styled-components'
+import { css, styled } from 'styled-components'
 
 export const SvgIcon = styled.svg`
 	/* width: ${({ theme }) => theme.spacings.lg};
@@ -27,6 +27,17 @@ export const ChevronIcon = (props: HTMLAttributes<SVGElement>) => (
 	</SvgIcon>
 )
 
+export const RotatingChevronIcon = styled(ChevronIcon)<{ $isOpen: boolean }>`
+	vertical-align: middle;
+	transform: rotate(-90deg);
+	transition: transform 0.3s;
+	${({ $isOpen }) =>
+		!$isOpen &&
+		css`
+			transform: rotate(90deg);
+		`}
+`
+
 export const InfoIcon = (props: HTMLAttributes<SVGElement>) => (
 	<SvgIcon
 		{...props}
diff --git a/site/source/pages/assistants/recherche-code-ape/components/Result.tsx b/site/source/pages/assistants/recherche-code-ape/components/Result.tsx
index a7b19af7b..14729e5d6 100644
--- a/site/source/pages/assistants/recherche-code-ape/components/Result.tsx
+++ b/site/source/pages/assistants/recherche-code-ape/components/Result.tsx
@@ -7,7 +7,7 @@ import { Appear } from '@/components/ui/animate'
 import { Chip } from '@/design-system'
 import { Button } from '@/design-system/buttons'
 import { RadioCardSkeleton } from '@/design-system/field/Radio/RadioCard'
-import { ChevronIcon } from '@/design-system/icons'
+import { RotatingChevronIcon } from '@/design-system/icons'
 import { Grid } from '@/design-system/layout'
 import { H4, H5, H6 } from '@/design-system/typography/heading'
 import { Li, Ul } from '@/design-system/typography/list'
@@ -141,15 +141,7 @@ const StyledButton = styled(Button)`
 			}
 		`}
 `
-const StyledChevron = styled(ChevronIcon)<{ $isOpen: boolean }>`
-	vertical-align: middle;
-	transform: rotate(-90deg);
-	transition: transform 0.3s;
-	${({ $isOpen }) =>
-		!$isOpen &&
-		css`
-			transform: rotate(90deg);
-		`}
+const StyledChevron = styled(RotatingChevronIcon)`
 	${({ theme }) =>
 		theme.darkMode &&
 		css`
diff --git a/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx b/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx
index c26d84802..58ee80db5 100644
--- a/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx
+++ b/site/source/pages/simulateurs/reduction-generale/components/RéductionGénéraleMoisParMoisRow.tsx
@@ -1,7 +1,7 @@
 import { formatValue, PublicodesExpression } from 'publicodes'
 import { useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { css, styled } from 'styled-components'
+import { styled } from 'styled-components'
 
 import NumberInput from '@/components/conversation/NumberInput'
 import { Condition } from '@/components/EngineValue/Condition'
@@ -10,7 +10,11 @@ import { useEngine } from '@/components/utils/EngineContext'
 import { Message, NumberField } from '@/design-system'
 import { Button, HelpButtonWithPopover } from '@/design-system/buttons'
 import { FlexCenter } from '@/design-system/global-style'
-import { ChevronIcon, SearchIcon, WarningIcon } from '@/design-system/icons'
+import {
+	RotatingChevronIcon,
+	SearchIcon,
+	WarningIcon,
+} from '@/design-system/icons'
 import { Tooltip } from '@/design-system/tooltip'
 import { Body, SmallBody } from '@/design-system/typography/paragraphs'
 
@@ -128,7 +132,7 @@ export default function RéductionGénéraleMoisParMoisRow({
 						aria-label={!isOptionVisible ? t('Déplier') : t('Replier')}
 					>
 						{t('Options')}&nbsp;
-						<StyledChevron aria-hidden $isOpen={isOptionVisible} />
+						<RotatingChevronIcon aria-hidden $isOpen={isOptionVisible} />
 					</Button>
 				</td>
 				<td
@@ -264,14 +268,3 @@ const OptionContainer = styled.div`
 const StyledSmallBody = styled(SmallBody)`
 	margin: 0;
 `
-
-const StyledChevron = styled(ChevronIcon)<{ $isOpen: boolean }>`
-	vertical-align: middle;
-	transform: rotate(-90deg);
-	transition: transform 0.3s;
-	${({ $isOpen }) =>
-		!$isOpen &&
-		css`
-			transform: rotate(90deg);
-		`}
-`