✨(react) add textItems to Field

This allow to add bullet points lists below inputs, the best example
is when we want to list multiple errors from form validation.

Fixes #147

.changeset/fluffy-pandas-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": major
+---
+
+add textItems to Field

packages/react/src/components/Forms/Checkbox/index.tsx

@@ -23,6 +23,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       checked,
       label,
       text,
+      textItems,
       rightText,
       state,
       ...props
@@ -48,7 +49,13 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
           "c__checkbox--disabled": props.disabled,
         })}
       >
-        <Field text={text} rightText={rightText} compact={true} state={state}>
+        <Field
+          text={text}
+          rightText={rightText}
+          compact={true}
+          state={state}
+          textItems={textItems}
+        >
           <div className="c__checkbox__container">
             <div className="c__checkbox__wrapper">
               <input
@@ -82,6 +89,7 @@ export const CheckboxGroup = ({
   children,
   state,
   text,
+  textItems,
   rightText,
 }: PropsWithChildren & FieldProps) => {
   return (
@@ -89,6 +97,7 @@ export const CheckboxGroup = ({
       className="c__checkbox__group"
       state={state}
       text={text}
+      textItems={textItems}
       rightText={rightText}
     >
       <div className="c__checkbox__group__list">{children}</div>

packages/react/src/components/Forms/Field/index.scss

@@ -9,8 +9,17 @@
   &__footer {
     font-size: var(--c--components--forms-field--font-size);
     padding: 0.25rem calc(1rem + 2px) 0 calc(1rem + 2px);
-    display: flex;
+
-    justify-content: space-between;
+    &__top {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    ul {
+      margin: 0.20rem 0 0 0;
+      padding: 0 0 0 1rem;
+      line-height: 1rem;
+    }
   }
 
   &__text, &__text-right {

packages/react/src/components/Forms/Field/index.stories.tsx

@@ -38,6 +38,11 @@ export const Error = {
   args: {
     state: "error",
     text: "This is an optional error message",
+    textItems: [
+      "Text too long",
+      "Wrong choice",
+      "Must contain at least 9 characters, uppercase and digits",
+    ],
     rightText: "Right text",
   },
 };

packages/react/src/components/Forms/Field/index.tsx

@@ -6,6 +6,7 @@ export type FieldState = "success" | "error" | "default";
 export type FieldProps = {
   state?: FieldState | undefined;
   text?: string | undefined;
+  textItems?: string[] | undefined;
   rightText?: string | undefined;
   fullWidth?: boolean | undefined;
   compact?: boolean | undefined;
@@ -18,6 +19,7 @@ export const Field = ({
   children,
   state = "default",
   text,
+  textItems,
   rightText,
   fullWidth,
   compact,
@@ -31,10 +33,21 @@ export const Field = ({
       })}
     >
       {children}
-      {(text || rightText) && (
+      {(text || rightText || textItems) && (
         <div className="c__field__footer">
-          <span className="c__field__text">{text}</span>
+          {(text || rightText) && (
-          <span className="c__field__text__right">{rightText}</span>
+            <div className="c__field__footer__top">
+              <span className="c__field__text">{text}</span>
+              <span className="c__field__text__right">{rightText}</span>
+            </div>
+          )}
+          {textItems && (
+            <ul className="c__field__footer__items">
+              {textItems.map((textItem) => (
+                <li key={textItem}>{textItem}</li>
+              ))}
+            </ul>
+          )}
         </div>
       )}
     </div>

packages/react/src/components/Forms/Input/index.spec.tsx

@@ -119,6 +119,26 @@ describe("<Input/>", () => {
     );
     screen.getByText("Some text");
   });
+  it("renders with text items", async () => {
+    render(
+      <Input
+        label="First name"
+        rightIcon={<span className="material-icons">apartment</span>}
+        textItems={[
+          "Text too long",
+          "Wrong choice",
+          "Must contain at least 9 characters, uppercase and digits",
+        ]}
+      />,
+    );
+    expect(
+      screen.getAllByRole("listitem").map((item) => item.textContent),
+    ).toEqual([
+      "Text too long",
+      "Wrong choice",
+      "Must contain at least 9 characters, uppercase and digits",
+    ]);
+  });
   it("renders with text and text right", async () => {
     render(
       <Input

packages/react/src/components/Forms/Input/index.stories.tsx

@@ -43,6 +43,21 @@ export const Error = {
   },
 };
 
+export const ErrorItems = {
+  args: {
+    defaultValue: "Hello world",
+    label: "Your name",
+    state: "error",
+    icon: <span className="material-icons">person</span>,
+    text: "This is an optional error message",
+    textItems: [
+      "Text too long",
+      "Wrong choice",
+      "Must contain at least 9 characters, uppercase and digits",
+    ],
+  },
+};
+
 export const DisabledEmpty = {
   args: {
     label: "Your name",

packages/react/src/components/Forms/Input/index.tsx

@@ -31,6 +31,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       rightIcon,
       state = "default",
       text,
+      textItems,
       rightText,
       fullWidth,
       charCounter,
@@ -76,6 +77,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       <Field
         state={state}
         text={text}
+        textItems={textItems}
         rightText={rightTextToUse}
         fullWidth={fullWidth}
       >

packages/react/src/components/Forms/Radio/index.tsx

@@ -12,14 +12,14 @@ export type RadioProps = InputHTMLAttributes<HTMLInputElement> &
   };
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>(
-  ({ label, text, state, ...props }: RadioProps, ref) => {
+  ({ label, text, textItems, state, ...props }: RadioProps, ref) => {
     return (
       <label
         className={classNames("c__checkbox", "c__radio", {
           "c__checkbox--disabled": props.disabled,
         })}
       >
-        <Field text={text} compact={true} state={state}>
+        <Field text={text} compact={true} state={state} textItems={textItems}>
           <div className="c__checkbox__container">
             <input type="radio" {...props} ref={ref} />
             {label && <div className="c__checkbox__label">{label}</div>}
@@ -34,6 +34,7 @@ export const RadioGroup = ({
   children,
   state,
   text,
+  textItems,
   rightText,
   style,
 }: PropsWithChildren & FieldProps & { style?: React.CSSProperties }) => {
@@ -42,6 +43,7 @@ export const RadioGroup = ({
       className="c__radio__group c__checkbox__group"
       state={state}
       text={text}
+      textItems={textItems}
       rightText={rightText}
       compact={true}
     >

packages/react/src/components/Forms/Select/mono-common.tsx

@@ -58,6 +58,7 @@ export const SelectMonoAux = ({
   children,
   state = "default",
   text,
+  textItems,
   rightText,
   fullWidth,
   options,
@@ -90,6 +91,7 @@ export const SelectMonoAux = ({
     <Field
       state={state}
       text={text}
+      textItems={textItems}
       rightText={rightText}
       fullWidth={fullWidth}
     >

packages/react/src/components/Forms/Switch/index.tsx

@@ -13,6 +13,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
     {
       label,
       text,
+      textItems,
       state,
       fullWidth,
       labelSide = "left",
@@ -32,7 +33,13 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
           },
         )}
       >
-        <Field text={text} compact={true} state={state} fullWidth={fullWidth}>
+        <Field
+          text={text}
+          textItems={textItems}
+          compact={true}
+          state={state}
+          fullWidth={fullWidth}
+        >
           <div className="c__checkbox__container">
             {label && <div className="c__checkbox__label">{label}</div>}
             <div className="c__switch__rail__wrapper">