From b530e966ae2e426dffe5e6520de07e4f32df879f Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 29 Aug 2023 17:37:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20textItems=20to=20Field?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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            |  5 +++++
 .../src/components/Forms/Checkbox/index.tsx   | 11 +++++++++-
 .../src/components/Forms/Field/index.scss     | 13 ++++++++++--
 .../components/Forms/Field/index.stories.tsx  |  5 +++++
 .../src/components/Forms/Field/index.tsx      | 19 +++++++++++++++---
 .../src/components/Forms/Input/index.spec.tsx | 20 +++++++++++++++++++
 .../components/Forms/Input/index.stories.tsx  | 15 ++++++++++++++
 .../src/components/Forms/Input/index.tsx      |  2 ++
 .../src/components/Forms/Radio/index.tsx      |  6 ++++--
 .../components/Forms/Select/mono-common.tsx   |  2 ++
 .../src/components/Forms/Switch/index.tsx     |  9 ++++++++-
 11 files changed, 98 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/fluffy-pandas-sneeze.md

diff --git a/.changeset/fluffy-pandas-sneeze.md b/.changeset/fluffy-pandas-sneeze.md
new file mode 100644
index 0000000..751750a
--- /dev/null
+++ b/.changeset/fluffy-pandas-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": major
+---
+
+add textItems to Field
diff --git a/packages/react/src/components/Forms/Checkbox/index.tsx b/packages/react/src/components/Forms/Checkbox/index.tsx
index dafa649..11414b1 100644
--- a/packages/react/src/components/Forms/Checkbox/index.tsx
+++ b/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>
diff --git a/packages/react/src/components/Forms/Field/index.scss b/packages/react/src/components/Forms/Field/index.scss
index 643255c..ccbfc43 100644
--- a/packages/react/src/components/Forms/Field/index.scss
+++ b/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 {
diff --git a/packages/react/src/components/Forms/Field/index.stories.tsx b/packages/react/src/components/Forms/Field/index.stories.tsx
index 75188fc..d426caa 100644
--- a/packages/react/src/components/Forms/Field/index.stories.tsx
+++ b/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",
   },
 };
diff --git a/packages/react/src/components/Forms/Field/index.tsx b/packages/react/src/components/Forms/Field/index.tsx
index f672be1..4481470 100644
--- a/packages/react/src/components/Forms/Field/index.tsx
+++ b/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>
-          <span className="c__field__text__right">{rightText}</span>
+          {(text || rightText) && (
+            <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>
diff --git a/packages/react/src/components/Forms/Input/index.spec.tsx b/packages/react/src/components/Forms/Input/index.spec.tsx
index 3b20025..a7e3af7 100644
--- a/packages/react/src/components/Forms/Input/index.spec.tsx
+++ b/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
diff --git a/packages/react/src/components/Forms/Input/index.stories.tsx b/packages/react/src/components/Forms/Input/index.stories.tsx
index 96d2fdc..d321db1 100644
--- a/packages/react/src/components/Forms/Input/index.stories.tsx
+++ b/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",
diff --git a/packages/react/src/components/Forms/Input/index.tsx b/packages/react/src/components/Forms/Input/index.tsx
index d02c857..5698345 100644
--- a/packages/react/src/components/Forms/Input/index.tsx
+++ b/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}
       >
diff --git a/packages/react/src/components/Forms/Radio/index.tsx b/packages/react/src/components/Forms/Radio/index.tsx
index b58754f..4836f7c 100644
--- a/packages/react/src/components/Forms/Radio/index.tsx
+++ b/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}
     >
diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
index cde627e..14b7d09 100644
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/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}
     >
diff --git a/packages/react/src/components/Forms/Switch/index.tsx b/packages/react/src/components/Forms/Switch/index.tsx
index f89a1f5..d8f3041 100644
--- a/packages/react/src/components/Forms/Switch/index.tsx
+++ b/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">