wip storybook component

libs/react-design-system/src/immersionFacile/components/convention-summary/ConventionSummary.scss

@@ -0,0 +1,18 @@
+@import "../../../config/responsive";
+
+.im-convention-summary {
+  &__section {
+    border: 1px solid var(--grey-900-175);
+    border-radius: 8px;
+  }
+
+  &__subsection {
+    &--highlight {
+      background-color: var(--background-alt-blue-france),
+    }
+  }
+
+  &__subsection__value {
+    font-weight: 700;
+  }
+}

libs/react-design-system/src/immersionFacile/components/bordered-section/BorderedSection.stories.tsx → libs/react-design-system/src/immersionFacile/components/convention-summary/ConventionSummary.stories.tsx

@@ -1,21 +1,23 @@
 import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { BorderedSection, BorderedSectionProperties } from "./BorderedSection";
+import {
+  ConventionSummary,
+  ConventionSummaryProperties,
+} from "./ConventionSummary";
 
-const Component = BorderedSection;
+const Component = ConventionSummary;
 type Story = StoryObj<typeof Component>;
-const argTypes: Partial<ArgTypes<BorderedSectionProperties>> | undefined = {};
+const argTypes: Partial<ArgTypes<ConventionSummaryProperties>> | undefined = {};
 
 const componentDescription = `
 Affiche un élément section ayant une bordure et contenant un titre.
 
 \`\`\`tsx  
-import { BorderedSection } from "react-design-system";
+import { ConventionSummary } from "react-design-system";
 \`\`\`
 `;
 
 export default {
-  title: "BorderedSection",
+  title: "ConventionSummary",
   component: Component,
   argTypes,
   parameters: {
@@ -29,7 +31,8 @@ export default {
 
 export const Default: Story = {
   args: {
-    title: "Titre de la section",
-    children: <></>,
+    conventionId: "Titre de la section",
+    submittedAt: "",
+    summary: [],
   },
 };

libs/react-design-system/src/immersionFacile/components/convention-summary/ConventionSummary.styles.ts

@@ -0,0 +1,7 @@
+import "./ConventionSummary.scss";
+
+export default {
+  section: "im-convention-summary__section",
+  subsectionHighlight: "im-convention-summary__subsection--highlight",
+  subsectionValue: "im-convention-summary__subsection__value",
+};

libs/react-design-system/src/immersionFacile/components/convention-summary/ConventionSummary.tsx

@@ -0,0 +1,132 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import { Badge } from "@codegouvfr/react-dsfr/Badge";
+import React, { ReactNode } from "react";
+import { useStyles } from "tss-react/dsfr";
+import Styles from "./ConventionSummary.styles";
+
+export type ConventionSummaryProperties = {
+  conventionId?: string;
+  submittedAt: string;
+  summary: ConventionSummarySection[];
+};
+
+export type ConventionSummarySection = {
+  title: string;
+  subSections: ConventionSummarySubSection[];
+};
+
+export type ConventionSummarySubSection = {
+  title?: string;
+  fields: ConventionSummaryField[];
+  isFullWidthDisplay?: boolean;
+  hasBackgroundColor?: boolean;
+  isSchedule?: boolean;
+};
+
+export type ConventionSummaryField = { id: string } & (
+  | {
+      label: string;
+      value: string | ReactNode;
+      copyButton?: string | ReactNode;
+      hasBackgroundColor?: boolean;
+    }
+  | {
+      value: string | ReactNode;
+      badgeSeverity: "success" | "warning";
+    }
+);
+
+// Inspired by https://github.com/MinooTavakoli/crisp-react
+export const ConventionSummary = ({
+  conventionId,
+  submittedAt,
+  summary,
+}: ConventionSummaryProperties) => {
+  const { cx } = useStyles();
+
+  return (
+    <>
+      <section className={cx(fr.cx("fr-mb-3w", "fr-p-2w"), Styles.section)}>
+        <div>
+          <h2>Convention</h2>
+          <div>Date de soumission : {submittedAt}</div>
+          <div>
+            <span>ID : </span>
+            {conventionId}
+          </div>
+        </div>
+      </section>
+      {summary.map((section) => {
+        return (
+          <section
+            className={cx(fr.cx("fr-mb-3w", "fr-p-2w"), Styles.section)}
+            key={section.title}
+          >
+            <h2 className={fr.cx("fr-mt-3v", "fr-mb-0")}>{section.title}</h2>
+            <div className={fr.cx("fr-grid-row")}>
+              {section.subSections.map((subSection) => {
+                return (
+                  <section
+                    key={subSection.title}
+                    className={cx(
+                      fr.cx(
+                        "fr-col-12",
+                        !subSection.isFullWidthDisplay && "fr-col-md-6",
+                        subSection.hasBackgroundColor && "fr-p-2w",
+                        subSection.hasBackgroundColor && "fr-mt-2w",
+                      ),
+                      subSection.hasBackgroundColor &&
+                        Styles.subsectionHighlight,
+                    )}
+                  >
+                    <h3>{subSection.title}</h3>
+                    <div className={fr.cx("fr-grid-row")}>
+                      {subSection.fields.map((field) => {
+                        if ("badgeSeverity" in field) {
+                          return (
+                            <div
+                              key={field.id}
+                              className={fr.cx("fr-col-12", "fr-mb-2w")}
+                            >
+                              <Badge severity={field.badgeSeverity}>
+                                {field.badgeSeverity === "success"
+                                  ? `Signée - Le ${field.value}`
+                                  : "Signature en attente"}
+                              </Badge>
+                            </div>
+                          );
+                        }
+                        return (
+                          <div
+                            className={fr.cx(
+                              "fr-col-12",
+                              "fr-col-sm-6",
+                              "fr-mb-2w",
+                            )}
+                            key={field.id}
+                          >
+                            {"label" in field && (
+                              <div className={fr.cx("fr-text--xs", "fr-m-0")}>
+                                <div className={fr.cx("fr-text--xs", "fr-m-0")}>
+                                  {field.label}
+                                </div>
+                                <div className={cx(Styles.subsectionValue)}>
+                                  {field.value}
+                                  {field.copyButton}
+                                </div>
+                              </div>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </section>
+                );
+              })}
+            </div>
+          </section>
+        );
+      })}
+    </>
+  );
+};

libs/react-design-system/src/immersionFacile/components/convention-summary/index.ts

@@ -0,0 +1 @@
+export * from "./ConventionSummary";

shared/src/utils.ts

@@ -57,9 +57,8 @@ export const keys = <T extends string | number | symbol>(
 type Falsy = false | 0 | "" | null | undefined;
 export const filterNotFalsy = <T>(arg: T | Falsy): arg is T => !!arg;
 
-export const removeUndefinedElements = <T>(
-  unfilteredList: (T | undefined)[],
-): T[] => unfilteredList.filter(filterNotFalsy);
+export const removeEmptyValue = <T>(unfilteredList: (T | null)[]): T[] =>
+  unfilteredList.flatMap((element) => (element ? [element] : []));
 
 export const replaceArrayElement = <T>(
   original: Array<T>,