#362

Author: garronej

src/Alert.tsx

@@ -27,8 +27,13 @@ export type AlertProps = {
     as?: `h${2 | 3 | 4 | 5 | 6}`;
     classes?: Partial<Record<"root" | "title" | "description" | "close", string>>;
     style?: CSSProperties;
-} & (AlertProps.DefaultSize | AlertProps.Small) &
-    (AlertProps.NonClosable | AlertProps.Closable);
+
+    /** Display the cross icon (understand isClosableByUser) */
+    closable?: boolean;
+    /** To provide if you want the Alert to be controlled */
+    isClosed?: boolean;
+    onClose?: () => void;
+} & (AlertProps.DefaultSize | AlertProps.Small);
 
 export namespace AlertProps {
     export type DefaultSize = {
@@ -45,30 +50,6 @@ export namespace AlertProps {
         description: NonNullable<ReactNode>;
     };
 
-    export type NonClosable = {
-        /** Default false */
-        closable?: false;
-        isClosed?: never;
-        onClose?: never;
-    };
-
-    export type Closable = {
-        /** Default false */
-        closable: true;
-    } & (Closable.Controlled | Closable.Uncontrolled);
-
-    export namespace Closable {
-        export type Controlled = {
-            isClosed: boolean;
-            onClose: () => void;
-        };
-
-        export type Uncontrolled = {
-            isClosed?: never;
-            onClose?: () => void;
-        };
-    }
-
     type ExtractSeverity<FrClassName> = FrClassName extends `fr-alert--${infer Severity}`
         ? Exclude<Severity, "sm">
         : never;
@@ -89,7 +70,7 @@ export const Alert = memo(
             small: isSmall,
             title,
             description,
-            closable: isClosable = false,
+            closable: isClosableByUser = false,
             isClosed: props_isClosed,
             onClose,
             ...rest
@@ -145,7 +126,7 @@ export const Alert = memo(
                 onClose?.();
             } else {
                 //Controlled
-                onClose();
+                onClose?.();
             }
         });
 
@@ -174,7 +155,7 @@ export const Alert = memo(
                     </HtmlTitleTag>
                 )}
                 <DescriptionTag className={classes.description}>{description}</DescriptionTag>
-                {isClosable && (
+                {isClosableByUser && (
                     <button
                         ref={setButtonElement}
                         className={cx(fr.cx("fr-link--close", "fr-link"), classes.close)}

stories/Alert.stories.tsx

@@ -9,7 +9,45 @@ const { meta, getStory } = getStoryFactory({
     "wrappedComponent": { Alert },
     "description": `
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte)
-- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Alert.tsx)`,
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Alert.tsx)
+
+## Uncontrolled mode  
+
+\`\`\`tsx
+import { Alert } from "@codegouvfr/react-dsfr/Alert";
+
+<Alert
+    severity="success"
+    title="Message successfully sent"
+    description="Everything went well"
+    closable
+    onClose={()=> alert("The user clicked the close button on the modal")}
+/>
+\`\`\`
+
+## Controlled mode
+
+\`\`\`tsx
+import { Alert } from "@codegouvfr/react-dsfr/Alert";
+import { useState } from "react";
+
+const [ isClosed, setIsClosed ] = useState(false);
+
+<Alert
+    severity="success"
+    title="Message successfully sent"
+    description="Everything went well"
+    isClosed={isClosed}
+    // If the use should be able to close the modal manually
+    closable
+    // This is called only when the user clicks the close button
+    onClose={()=> setIsClosed(true)}
+/>
+<button onClick={()=> setIsClosed(false)}>Open alert</button>
+<button onClick={()=> setIsClosed(true)}>Close alert</button>
+\`\`\`
+
+`,
     "argTypes": {
         "severity": {
             "options": (() => {

test/integration/vite/index.html

@@ -22,7 +22,7 @@
     <!--<link rel="preload" href="/dsfr/fonts/Spectral-Regular.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
     <!--<link rel="preload" href="/dsfr/fonts/Spectral-ExtraBold.woff2?v=1.12.1" as="font" crossorigin="anonymous" />-->
 
-    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=f7c9104e" />
+    <link rel="stylesheet" href="/dsfr/utility/icons/icons.min.css?hash=e7b25a4c" />
     <link rel="stylesheet" href="/dsfr/dsfr.min.css?v=1.12.1" />
 
     <title>Vite + React + TS</title>