wip create component BorderedSection

libs/react-design-system/src/immersionFacile/components/bordered-section/BorderedSection.stories.tsx

@@ -0,0 +1,35 @@
+import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { BorderedSection, BorderedSectionProperties } from "./BorderedSection";
+
+const Component = BorderedSection;
+type Story = StoryObj<typeof Component>;
+const argTypes: Partial<ArgTypes<BorderedSectionProperties>> | undefined = {};
+
+const componentDescription = `
+Affiche un élément section ayant une bordure et contenant un titre.
+
+\`\`\`tsx  
+import { BorderedSection } from "react-design-system";
+\`\`\`
+`;
+
+export default {
+  title: "BorderedSection",
+  component: Component,
+  argTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: componentDescription,
+      },
+    },
+  },
+} as Meta<typeof Component>;
+
+export const Default: Story = {
+  args: {
+    title: "Titre de la section",
+    children: <></>,
+  },
+};

libs/react-design-system/src/immersionFacile/components/bordered-section/BorderedSection.tsx

@@ -0,0 +1,34 @@
+import { fr } from "@codegouvfr/react-dsfr";
+import React, { ReactNode } from "react";
+
+export type BorderedSectionProperties = {
+  title: string;
+  children: ReactNode;
+};
+
+// Inspired by https://github.com/MinooTavakoli/crisp-react
+export const BorderedSection = ({
+  title,
+  children,
+}: BorderedSectionProperties) => {
+  return (
+    <section
+      className={fr.cx("fr-mb-2w", "fr-p-2w")}
+      style={{
+        border: "1px solid var(--grey-900-175)",
+        borderRadius: "5px",
+      }}
+    >
+      <h2
+        className={fr.cx("fr-mb-2w", "fr-pb-1w")}
+        style={{
+          color: "var(--text-title-blue-france)",
+          borderBottom: "1px solid var(--grey-900-175)",
+        }}
+      >
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+};

libs/react-design-system/src/immersionFacile/components/bordered-section/index.ts

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