From 96401006ff7453c4d3042b06291dc0e8276d5e5e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 2 May 2022 21:57:20 -0500
Subject: [PATCH] Streamfield: support label and hint text

---
 .../components/ui/form-group/form-group.tsx     |  4 ++--
 .../components/ui/streamfield/streamfield.tsx   | 17 +++++++++++++++++
 app/soapbox/features/edit_profile/index.tsx     |  2 ++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index fe78d4615..e70bc5836 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -3,9 +3,9 @@ import { v4 as uuidv4 } from 'uuid';
 
 interface IFormGroup {
   /** Input label message. */
-  hintText?: string | React.ReactNode,
+  labelText: React.ReactNode,
   /** Input hint message. */
-  labelText: string | React.ReactNode,
+  hintText?: React.ReactNode,
   /** Input errors. */
   errors?: string[]
 }
diff --git a/app/soapbox/components/ui/streamfield/streamfield.tsx b/app/soapbox/components/ui/streamfield/streamfield.tsx
index b64c8936f..efddd24d8 100644
--- a/app/soapbox/components/ui/streamfield/streamfield.tsx
+++ b/app/soapbox/components/ui/streamfield/streamfield.tsx
@@ -4,19 +4,32 @@ import Button from '../button/button';
 import HStack from '../hstack/hstack';
 import IconButton from '../icon-button/icon-button';
 import Stack from '../stack/stack';
+import Text from '../text/text';
 
 interface IStreamfield {
+  /** Array of values for the streamfield. */
   values: any[],
+  /** Input label message. */
+  labelText?: React.ReactNode,
+  /** Input hint message. */
+  hintText?: React.ReactNode,
+  /** Callback to add an item. */
   onAddItem?: () => void,
+  /** Callback to remove an item by index. */
   onRemoveItem?: (i: number) => void,
+  /** Callback when values are changed. */
   onChange: (values: any[]) => void,
+  /** Input to render for each value. */
   component: React.ComponentType<{ onChange: (value: any) => void, value: any }>,
+  /** Maximum number of allowed inputs. */
   maxItems?: number,
 }
 
 /** List of inputs that can be added or removed. */
 const Streamfield: React.FC<IStreamfield> = ({
   values,
+  labelText,
+  hintText,
   onAddItem,
   onRemoveItem,
   onChange,
@@ -34,6 +47,10 @@ const Streamfield: React.FC<IStreamfield> = ({
 
   return (
     <Stack space={4}>
+      <Stack>
+        {labelText && <Text size='sm' weight='medium'>{labelText}</Text>}
+        {hintText && <Text size='xs' theme='muted'>{hintText}</Text>}
+      </Stack>
 
       <Stack>
         {values.map((value, i) => (
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 6ee820eca..97396cd33 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -423,6 +423,8 @@ const EditProfile: React.FC = () => {
         </div>
 
         <Streamfield
+          labelText={<FormattedMessage id='edit_profile.fields.meta_fields_label' defaultMessage='Profile fields' />}
+          hintText={<FormattedMessage id='edit_profile.hints.meta_fields' defaultMessage='You can have up to {count, plural, one {# custom field} other {# custom fields}} displayed on your profile.' values={{ count: maxFields }} />}
           values={data.fields_attributes || []}
           onChange={handleFieldsChange}
           onAddItem={handleAddField}