✨(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

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>
-          <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>