Increase customisability of storyies

Author: garronej

docs/Alert.stories.tsx

@@ -8,6 +8,9 @@ import type { Equals } from "tsafe";
 const { meta, getStory } = getStoryFactory({
     sectionName,
     "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)`,
     "argTypes": {
         "severity": {
             "options": (() => {
@@ -19,19 +22,26 @@ const { meta, getStory } = getStoryFactory({
             })(),
             "control": { "type": "radio" }
         },
+        "title": {
+            "description": `Required when the \`<Alert isSmall={false} />\` 
+            (which is the default if \`isSmall\` isn't specified).  
+            `
+        },
+        "description": {
+            "description": "Required when the `<Alert isSmall />`"
+        },
         "isClosable": {
             "description": "If the modal should have a close button"
         },
         "onClose": {
             "description": "Called when the user clicks the close button"
         },
         "isClosed": {
-            "description": [
-                "If specified the `<Alert />` is in [controlled mode](https://reactjs.org/docs/forms.html#controlled-components)",
-                "this means that when the close button is clicked",
-                "the `onClose()` callback will be called but you are responsible",
-                "for setting `isClosed` to `false`, the `<Alert />` wont close itself."
-            ].join(" "),
+            "description": `If specified the \`<Alert />\` is in 
+                [controlled mode](https://reactjs.org/docs/forms.html#controlled-components)
+                this means that when the close button is clicked
+                the \`onClose()\` callback will be called but you are responsible
+                for setting \`isClosed\` to \`false\`, the \`<Alert />\` wont close itself.`,
             "control": { "type": null }
         }
     }
@@ -41,16 +51,38 @@ export default meta;
 
 export const Default = getStory({
     "severity": "success",
+    "isSmall": false,
     "title": "Message successfully sent",
     "description": "Everything went well",
     "isClosable": true,
     "isClosed": undefined,
     ...logCallbacks(["onClose"])
 });
 
-export const Small = getStory({
-    "severity": "info",
-    "isSmall": true,
-    "title": "Info: this is a small alert",
-    "description": "This is the description"
+export const SmallDescriptionOnlyInfo = getStory(
+    {
+        "severity": "info",
+        "isSmall": true,
+        "description": "This is the description"
+    },
+    {
+        "description": "Small info `Alert` with only a description"
+    }
+);
+
+export const TitleOnlyWarning = getStory(
+    {
+        "severity": "warning",
+        "title": "This is the title"
+    },
+    {
+        "description": "Warning `Alert` with only a title"
+    }
+);
+
+export const Error = getStory({
+    "severity": "error",
+    "title": "This is the title",
+    "description": "This is the description",
+    "isClosable": true
 });

docs/getStory.tsx

@@ -10,12 +10,19 @@ startDsfrReact({ "defaultColorScheme": "system" });
 
 export function getStoryFactory<Props extends Record<string, any>>(params: {
     sectionName: string;
+    description?: string;
     wrappedComponent: Record<string, (props: Props) => JSX.Element | null>;
     /** https://storybook.js.org/docs/react/essentials/controls */
     argTypes?: Partial<Record<keyof Props, ArgType>>;
     defaultContainerWidth?: number;
 }) {
-    const { sectionName, wrappedComponent, argTypes = {}, defaultContainerWidth } = params;
+    const {
+        sectionName,
+        wrappedComponent,
+        description,
+        argTypes = {},
+        defaultContainerWidth
+    } = params;
 
     const Component: any = Object.entries(wrappedComponent).map(([, component]) => component)[0];
 
@@ -47,7 +54,9 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
 
     let isFirstStory = true;
 
-    function getStory(props: Props): typeof Template {
+    function getStory(props: Props, params?: { description?: string }): typeof Template {
+        const { description } = params ?? {};
+
         const out = Template.bind({});
 
         out.args = {
@@ -60,9 +69,9 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
         isFirstStory = false;
 
         out.parameters = {
-            docs: {
-                description: {
-                    story: "Some story **markdown**"
+            "docs": {
+                "description": {
+                    "story": description
                 }
             }
         };
@@ -74,10 +83,10 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
         "meta": id<Meta>({
             "title": `${sectionName}/${symToStr(wrappedComponent)}`,
             "component": Component,
-            parameters: {
-                docs: {
-                    description: {
-                        component: "Some component _markdown_"
+            "parameters": {
+                "docs": {
+                    "description": {
+                        "component": description
                     }
                 }
             },

src/Alert.tsx

@@ -88,7 +88,8 @@ export const Alert = memo(
 
         const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null);
 
-        const refShouldButtonGetFocus = useRef<boolean>(false);
+        const refShouldButtonGetFocus = useRef(false);
+        const refShouldSetRole = useRef(false);
 
         useEffect(() => {
             if (props_isClosed === undefined) {
@@ -97,6 +98,7 @@ export const Alert = memo(
             setIsClosed(isClosed => {
                 if (isClosed && !props_isClosed) {
                     refShouldButtonGetFocus.current = true;
+                    refShouldSetRole.current = true;
                 }
 
                 return props_isClosed;
@@ -142,6 +144,7 @@ export const Alert = memo(
                     className
                 )}
                 ref={ref}
+                {...(refShouldSetRole.current && { "role": "alert" })}
                 {...rest}
             >
                 <HtmlTitleTag className={cx(fr.cx("fr-alert__title"), classes.title)}>