feat(slash): create ItemFormHelper component

apps/slash-stories/src/ItemFormHelper.stories.scss

@@ -0,0 +1,44 @@
+.helper {
+  position: relative;
+  width: 21.625rem;
+  padding: 1.25rem;
+}
+
+.helper::before {
+  position: absolute;
+  inset: 0;
+  border-radius: 5px;
+  background:
+    repeating-linear-gradient(
+        to right,
+        #9747ff 0 0.625rem,
+        transparent 0.625rem 1rem
+      )
+      top,
+    repeating-linear-gradient(
+        to right,
+        #9747ff 0 0.625rem,
+        transparent 0.625rem 1rem
+      )
+      bottom,
+    repeating-linear-gradient(
+        to bottom,
+        #9747ff 0 0.625rem,
+        transparent 0.625rem 1rem
+      )
+      left,
+    repeating-linear-gradient(
+        to bottom,
+        #9747ff 0 0.625rem,
+        transparent 0.625rem 1rem
+      )
+      right;
+  background-repeat: no-repeat;
+  background-size:
+    100% 0.1rem,
+    100% 0.1rem,
+    0.1rem 100%,
+    0.1rem 100%;
+  pointer-events: none;
+  content: "";
+}

apps/slash-stories/src/ItemFormHelper.stories.tsx

@@ -0,0 +1,25 @@
+import { ItemFormHelper } from "@axa-fr/design-system-slash-react";
+import { Meta, StoryObj } from "@storybook/react";
+import "./ItemFormHelper.stories.scss?inline";
+
+const meta: Meta<typeof ItemFormHelper> = {
+  title: "Components/ItemFormHelper",
+  component: ItemFormHelper,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof ItemFormHelper> = {
+  name: "Item Form Helper",
+  argTypes: {
+    variant: {
+      options: ["to-do", "wip", "validation"],
+      control: { type: "select" },
+    },
+  },
+  render: (args) => (
+    <div className="helper">
+      <ItemFormHelper {...args} />
+    </div>
+  ),
+};

slash/css/src/ItemFormHelper/ItemFormHelper.scss

@@ -0,0 +1,22 @@
+@use "sass:color";
+@use "sass:list";
+@use "../common/common" as common;
+
+.item {
+  font-family: "Source Sans Pro", sans-serif;
+  color: var(--grey80);
+
+  &__to-do {
+    fill: var(--axablue80);
+  }
+
+  &__wip {
+    fill: var(--axablue80);
+  }
+
+  &__validation {
+    margin: 0;
+    color: var(--green40);
+    fill: var(--green40);
+  }
+}

slash/react/src/ItemFormHelper/ItemFormHelper.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Svg } from "@axa-fr/design-system-slash-react";
+import checkSvg from "@material-symbols/svg-400/outlined/check.svg";
+import toDoSvg from "@material-symbols/svg-400/outlined/circle.svg";
+import wipSvg from "@material-symbols/svg-400/outlined/circle-fill.svg";
+import "@axa-fr/design-system-slash-css/dist/ItemFormHelper/ItemFormHelper.scss";
+
+interface ItemFormHelperProps {
+  variant: "to-do" | "wip" | "validation";
+  label?: string;
+}
+
+const variants = {
+  "to-do": {
+    icon: toDoSvg,
+    defaultLabel: "à compléter",
+  },
+  wip: {
+    icon: wipSvg,
+    defaultLabel: "en cours",
+  },
+  validation: {
+    icon: checkSvg,
+    defaultLabel: "validé",
+  },
+};
+
+export const ItemFormHelper: React.FC<ItemFormHelperProps> = ({
+  variant,
+  label,
+}) => {
+  const { icon, defaultLabel } = variants[variant];
+  const displayLabel = label || defaultLabel;
+
+  return (
+    <div className={`item__${variant}`}>
+      <Svg src={icon} width={12} height={12} style={{ marginRight: 8 }} />
+      <span>{displayLabel}</span>
+    </div>
+  );
+};

slash/react/src/ItemFormHelper/__tests__/ItemFormHelper.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { ItemFormHelper } from "../ItemFormHelper";
+
+describe("ItemFormHelper", () => {
+  it("affiche le bon label et la bonne couleur pour to-do", () => {
+    render(<ItemFormHelper variant="to-do" />);
+    expect(screen.getByText("à compléter")).toBeInTheDocument();
+    // Vérifier la couleur du span
+    const span = screen.getByText("à compléter");
+    expect(span).toHaveStyle({ color: "var(--fill)" }); // Ajustez si nécessaire
+  });
+
+  it("affiche le bon label et la bonne couleur pour wip", () => {
+    render(<ItemFormHelper variant="wip" />);
+    expect(screen.getByText("en cours")).toBeInTheDocument();
+    const span = screen.getByText("en cours");
+    expect(span).toHaveStyle({ color: "var(--fill)" }); // si la couleur est la même que to-do
+  });
+
+  it("affiche le bon label et la bonne couleur pour validation", () => {
+    render(<ItemFormHelper variant="validation" />);
+    expect(screen.getByText("validé")).toBeInTheDocument();
+    const span = screen.getByText("validé");
+    expect(span).toHaveStyle({ color: "var(--green40)" }); // couleur spécifique
+  });
+
+  it("affiche un label personnalisé si fourni", () => {
+    render(<ItemFormHelper variant="validation" label="Tâche terminée" />);
+    expect(screen.getByText("Tâche terminée")).toBeInTheDocument();
+  });
+});

slash/react/src/index.ts

@@ -82,3 +82,4 @@ export * from "./Table";
 
 export { HelpButton } from "./HelpButton";
 export { Loader } from "./Loader/Loader";
+export { ItemFormHelper } from "./ItemFormHelper/ItemFormHelper";