feat(slash): add ChildrenQuestion component

slash/css/src/Form/ChildrenQuestion/ChildrenQuestion.scss

@@ -0,0 +1,22 @@
+@use "../../common/common" as common;
+
+.af-form__children-question {
+  position: relative;
+  margin-bottom: 2rem;
+  padding: 1.5rem 1.25rem;
+  border: 1px solid common.$color-gray-1;
+  border-radius: 4px;
+  background-color: common.$white;
+
+  &-arrow {
+    position: absolute;
+    top: -0.75rem;
+    left: 4.5rem;
+    width: 1.3256rem;
+    height: 1.3256rem;
+    border-top: 1px solid common.$color-gray-1;
+    border-left: 1px solid common.$color-gray-1;
+    background-color: common.$white;
+    transform: rotate(45deg);
+  }
+}

slash/css/src/Form/ChildrenQuestion/ChildrenQuestion.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/html";
+import "./ChildrenQuestion.scss";
+
+const meta: Meta = {
+  title: "Components/Form/ChildrenQuestion",
+};
+
+export default meta;
+
+export const Primary: StoryObj = {
+  render: (args) => {
+    const container = document.createElement("div");
+    container.innerHTML = `<section class="af-form__children-question"><span class="af-form__children-question-arrow"></span><section>${args.content}</section></section>`;
+
+    return container;
+  },
+  args: {
+    content: "ChildrenQuestion",
+  },
+};

slash/css/src/slash.scss

@@ -10,6 +10,7 @@
 @use "./Form/MultiSelect/MultiSelect";
 @use "./Form/Text/Text";
 @use "./Form/Textarea/Textarea";
+@use "./Form/ChildrenQuestion/ChildrenQuestion";
 @use "./Modal/Modal";
 @use "./Title/Title";
 @use "./Layout/Footer/Footer";

slash/react/src/Form/ChildrenQuestion/ChildrenQuestion.mdx

@@ -0,0 +1,23 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs";
+import * as ChildrenQuestionStories from "./ChildrenQuestion.stories";
+
+<Meta of={ChildrenQuestionStories} name="ChildrenQuestion" />
+
+# ChildrenQuestion
+
+The `ChildrenQuestion` component is a form component that allows the user to add some children input bloc under an input.
+
+To use the ChildrenQuestion import it like that:
+
+```tsx
+import { ChildrenQuestion } from "@axa-fr/design-system-slash-react";
+
+const MyComponent = () => (
+  <ChildrenQuestion content={<p>Whatever you want here</p>} />
+);
+```
+
+## Playground
+
+<Canvas of={ChildrenQuestionStories.Playground} />
+<Controls of={ChildrenQuestionStories.Playground} />

slash/react/src/Form/ChildrenQuestion/ChildrenQuestion.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ChildrenQuestion } from "./ChildrenQuestion";
+import { TextInput } from "../Text";
+
+const meta: Meta<typeof ChildrenQuestion> = {
+  component: ChildrenQuestion,
+  title: "Components/Form/ChildrenQuestion",
+  args: { content: <TextInput label="Champ texte" /> },
+};
+
+export default meta;
+
+type StoryProps = React.ComponentProps<typeof ChildrenQuestion>;
+type Story = StoryObj<StoryProps>;
+
+export const Playground: Story = {
+  name: "ChildrenQuestion",
+  render: ({ content }) => <ChildrenQuestion content={content} />,
+  args: {
+    content: <TextInput label="Champ texte" />,
+  },
+};

slash/react/src/Form/ChildrenQuestion/ChildrenQuestion.tsx

@@ -0,0 +1,12 @@
+import "@axa-fr/design-system-slash-css/dist/Form/ChildrenQuestion/ChildrenQuestion.scss";
+
+export const ChildrenQuestion = ({ content }: { content: React.ReactNode }) => {
+  const componentClassName = "af-form__children-question";
+
+  return (
+    <section className={componentClassName}>
+      <div className={`${componentClassName}-arrow`} />
+      <section>{content}</section>
+    </section>
+  );
+};

slash/react/src/Form/ChildrenQuestion/__tests__/ChildrenQuestion.spec.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { ChildrenQuestion } from "../ChildrenQuestion";
+
+describe("ChildrenQuestion", () => {
+  it("should render ChildrenQuestion", () => {
+    // Act
+    render(<ChildrenQuestion content="Content of the children question" />);
+
+    // Assert
+    expect(
+      screen.getByText("Content of the children question"),
+    ).toBeInTheDocument();
+  });
+
+  it("shouldn't have an accessibility violation <ChildrenQuestion/>", async () => {
+    // Act
+    const { container } = render(
+      <ChildrenQuestion content="Content of the children question" />,
+    );
+
+    // Assert
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

slash/react/src/index.ts

@@ -32,6 +32,7 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
+export { ChildrenQuestion } from "./Form/ChildrenQuestion/ChildrenQuestion";
 export { Footer } from "./Layout/Footer";
 export {
   Header,