📝(react) add Alert doc

Add the Alert doc with various examples and use cases.

packages/react/src/components/Alert/index.mdx

@@ -0,0 +1,109 @@
+import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
+import { Alert } from "./index";
+import * as Stories from './index.stories';
+
+<Meta of={Stories}/>
+
+# Alert
+
+Cunningham provides a versatile Alert component for displaying any kind of information.
+
+<Canvas of={Stories.All}/>
+
+<Source
+  language='ts'
+  dark
+  format={false}
+  code={`import { Alert } from "@openfun/cunningham-react";`}
+/>
+
+## Types
+
+You can use the `type` prop to change the style of the alert.
+
+<Canvas of={Stories.Info}/>
+<Canvas of={Stories.Success}/>
+<Canvas of={Stories.Warning}/>
+<Canvas of={Stories.Error}/>
+<Canvas of={Stories.Neutral}/>
+
+## Format
+
+There are 3 possible formats for the alert, the one line, the multi line one and the expandable one.
+
+
+#### The one line format
+
+<Canvas of={Stories.Info}/>
+
+#### The multi line format
+
+> This one is automatically applied when you provide `additionalInformation` prop.
+
+<Canvas of={Stories.InfoAdditionalInformation}/>
+
+#### The expandable format
+
+> This one is automatically applied when you provide `additionalInformation` and `expandable` prop.
+
+<Canvas of={Stories.InfoExpandable}/>
+
+## Actions
+
+As you can see in the examples above, you can display buttons on the alerts. You can use the following prop to do so:
+
+- `primaryLabel`
+- `primaryOnClick`
+- `primaryProps`
+
+Those props are shortcuts props provided to the `Button` component.
+
+<Canvas of={Stories.Info}/>
+
+The same goes for the tertiary button:
+
+- `tertiaryLabel`
+- `tertiaryOnClick`
+- `tertiaryProps`
+
+<Canvas of={Stories.InfoWithTertiary}/>
+
+> Those buttons automatically adapt according to the alert format.
+
+### Customize actions
+
+If the default provided buttons are not enough for you, you can provide your own buttons and any `ReactNode` you want.
+To achieve that, you can use the `buttons` prop.
+
+> We strongly recommend you to stick to the default `primaryLabel` and `tertiaryLabel` props to match the design system.
+
+<Canvas of={Stories.CustomButtons}/>
+
+## Controlled / Non Controlled
+
+There are two different props that can be used to control the alert: `expanded`, `closed`.
+
+When using those props, you must provide `onExpand` and `onClose` callbacks to handle the state of the alert.
+
+<Canvas of={Stories.Controlled}/>
+<Canvas of={Stories.ExpandableControlled}/>
+
+## Props
+
+<ArgTypes of={Alert} />
+
+
+
+## Design tokens
+
+Here are the custom design tokens defined by the Alert.
+
+| Token        	| Description                 	|
+|---------------	|-----------------------------	|
+| background-color 	| Default background color 	|
+| border-radius 	| Border radius of the Alert 	|
+| font-weight 	| Font weight of the main content 	|
+| color 	| Color of the main content	|
+| additional-font-weight 	| Font weight of the additional information	|
+| additional-color 	| Color of the additional content	|
+| icon-size 	| Size of the left icon	|

packages/react/src/components/Alert/index.stories.tsx

@@ -0,0 +1,163 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Alert, AlertProps, AlertType } from ":/components/Alert";
+import { Button } from ":/components/Button";
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Alert",
+  component: Alert,
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const All: Story = {
+  render: (args) => {
+    const customProps: AlertProps = { type: args.type ?? AlertType.INFO };
+    return (
+      <div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
+        <Alert {...Info.args} primaryLabel={undefined} {...customProps} />
+        <Alert {...Info.args} {...customProps} />
+        <Alert {...InfoAdditionalInformation.args} {...customProps} />
+        <Alert
+          {...Info.args}
+          additional="Additional information"
+          expandable={true}
+          expanded={true}
+          {...customProps}
+        />
+      </div>
+    );
+  },
+  argTypes: {
+    type: {
+      options: ["info", "success", "warning", "error", "neutral"],
+    },
+  },
+};
+
+export const Info: Story = {
+  args: {
+    children: "Alert component info",
+    canClose: true,
+    primaryLabel: "Primary",
+  },
+};
+export const InfoWithTertiary: Story = {
+  args: {
+    children: "Alert component info",
+    canClose: true,
+    primaryLabel: "Primary",
+    tertiaryLabel: "Tertiary",
+  },
+};
+export const CustomButtons: Story = {
+  args: {
+    children: "Alert component info",
+    canClose: true,
+    buttons: (
+      <div style={{ display: "flex", gap: "0.5rem" }}>
+        <Button color="primary">Primary</Button>
+        <Button color="secondary">Secondary</Button>
+      </div>
+    ),
+  },
+};
+
+export const Success: Story = {
+  args: {
+    children: "Alert component Success",
+    canClose: true,
+    primaryLabel: "Primary",
+    type: AlertType.SUCCESS,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    children: "Alert component Warning",
+    canClose: true,
+    primaryLabel: "Primary",
+    type: AlertType.WARNING,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    children: "Alert component Error",
+    canClose: true,
+    primaryLabel: "Primary",
+    type: AlertType.ERROR,
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    children: "Alert component Neutral",
+    canClose: true,
+    primaryLabel: "Primary",
+    type: AlertType.NEUTRAL,
+  },
+};
+
+export const InfoAdditionalInformation: Story = {
+  args: {
+    children: "Alert component info",
+    additional: "Additional information",
+    canClose: true,
+    primaryLabel: "Primary",
+    tertiaryLabel: "Tertiary  ",
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [closed, setClosed] = React.useState(false);
+    return (
+      <div>
+        <Alert {...Info.args} closed={closed} onClose={() => setClosed(true)} />
+        <div>closed: {closed ? "true" : "false"}</div>
+        <Button onClick={() => setClosed(false)}>Open</Button>
+        <Button onClick={() => setClosed(true)}>Close</Button>
+      </div>
+    );
+  },
+};
+
+export const InfoExpandable: Story = {
+  render: () => {
+    return (
+      <Alert
+        {...Info.args}
+        additional="Additional information"
+        expandable={true}
+      />
+    );
+  },
+};
+
+export const ExpandableControlled: Story = {
+  render: () => {
+    const [closed, setClosed] = React.useState(false);
+    const [expanded, setExpanded] = React.useState(false);
+    return (
+      <div>
+        <Alert
+          {...Info.args}
+          additional="Additional information"
+          closed={closed}
+          onClose={() => setClosed(true)}
+          expandable={true}
+          expanded={expanded}
+          onExpand={(value) => setExpanded(value)}
+        />
+        <div>closed: {closed ? "true" : "false"}</div>
+        <Button onClick={() => setClosed(false)}>Open</Button>
+        <Button onClick={() => setClosed(true)}>Close</Button>
+        <div>expanded: {expanded ? "true" : "false"}</div>
+        <Button onClick={() => setExpanded(true)}>Expand</Button>
+        <Button onClick={() => setExpanded(false)}>Shrink</Button>
+      </div>
+    );
+  },
+};