Merge branch 'admin_cfg' of https://gitlab.com/soapbox-pub/soapbox-fe into admin_cfg

app/soapbox/features/forms/index.js

@@ -42,7 +42,7 @@ InputContainer.propTypes = {
   extraClass: PropTypes.string,
 };
 
-export const LabelInputContainer = ({ label, children, ...props }) => {
+export const LabelInputContainer = ({ label, hint, children, ...props }) => {
   const [id] = useState(uuidv4());
   const childrenWithProps = React.Children.map(children, child => (
     React.cloneElement(child, { id: id, key: id })
@@ -54,12 +54,14 @@ export const LabelInputContainer = ({ label, children, ...props }) => {
       <div className='label_input__wrapper'>
         {childrenWithProps}
       </div>
+      {hint && <span className='hint'>{hint}</span>}
     </div>
   );
 };
 
 LabelInputContainer.propTypes = {
   label: FormPropTypes.label.isRequired,
+  hint: PropTypes.node,
   children: PropTypes.node,
 };
 
@@ -321,11 +323,12 @@ export class SelectDropdown extends ImmutablePureComponent {
 
   static propTypes = {
     label: FormPropTypes.label,
+    hint: PropTypes.node,
     items: PropTypes.object.isRequired,
   }
 
   render() {
-    const { label, items, ...props } = this.props;
+    const { label, hint, items, ...props } = this.props;
 
     const optionElems = Object.keys(items).map(item => (
       <option key={item} value={item}>{items[item]}</option>
@@ -334,7 +337,7 @@ export class SelectDropdown extends ImmutablePureComponent {
     const selectElem = <select {...props}>{optionElems}</select>;
 
     return label ? (
-      <LabelInputContainer label={label}>{selectElem}</LabelInputContainer>
+      <LabelInputContainer label={label} hint={hint}>{selectElem}</LabelInputContainer>
     ) : selectElem;
   }