feature/summary-component

packages/react/src/Summary/Summary.mdx

@@ -0,0 +1,30 @@
+import { Controls, Canvas, Meta } from "@storybook/blocks";
+import * as SummaryStories from "./Summary.stories.tsx";
+
+<Meta of={SummaryStories} />
+
+## Summary
+
+### Import
+
+```tsx title="test.js"
+import { Summary } from "@axa-fr/design-system-react/agent";
+```
+
+### Use
+
+```tsx title="test.js"
+export const SummaryForm = () => (
+  <Summary
+    messages={[
+      <span>Field Author is required</span>,
+      "Field PlaceName is required",
+    ]}
+  />
+);
+```
+
+### Playground
+
+<Canvas of={SummaryStories.Template} />
+<Controls of={SummaryStories.Template} />

packages/react/src/Summary/Summary.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Summary } from "./Summary";
+
+export default {
+  title: "Agent/Components/Summary",
+  component: Summary,
+  argTypes: {
+    classModifier: {
+      options: ["success", "info", "danger", "error"],
+      control: { type: "select" },
+    },
+  },
+} as Meta;
+
+const messages = [<>Field Author is required</>, "Field PlaceName is required"];
+
+type SummaryProps = React.ComponentProps<typeof Summary>;
+type Story = StoryObj<SummaryProps>;
+
+export const Template: Story = {
+  name: "Summary",
+  render: (args) => <Summary {...args} />,
+  args: {
+    messages,
+    isVisible: true,
+  },
+};

packages/react/src/Summary/Summary.tsx

@@ -0,0 +1,43 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { Alert } from "../agent";
+
+type SummaryProps = Omit<ComponentPropsWithoutRef<typeof Alert>, "title"> & {
+  title?: string;
+  messages?: ReactNode[];
+  isVisible?: boolean;
+};
+
+export const Summary = ({
+  messages = [],
+  isVisible = true,
+  title = "Invalid form",
+  ...args
+}: SummaryProps) => {
+  if (!messages || !isVisible) {
+    return null;
+  }
+
+  const messagesNotBlank = messages.filter((message) => Boolean(message));
+  if (!messagesNotBlank.length) {
+    return null;
+  }
+
+  return (
+    <Alert
+      iconClassName="glyphicon glyphicon-warning-sign"
+      title={title}
+      classModifier="error"
+      {...args}
+    >
+      <ul className="af-summary__message-list">
+        {messages.map((message) => {
+          return (
+            <li className="af-summary__message-item" key={`message_${message}`}>
+              {message}
+            </li>
+          );
+        })}
+      </ul>
+    </Alert>
+  );
+};

packages/react/src/agent.ts

@@ -12,6 +12,7 @@ export {
   CheckboxModes,
 } from "./Form/Checkbox/Agent";
 export { Choice, ChoiceInput } from "./Form/Choice";
+export { Summary } from "./Summary/Summary";
 export {
   Field,
   FieldError,