Updated hint for admin-x publication language UI

refs https://github.com/TryGhost/Team/issues/3151

- updates hint to take both string and custom react node
- allows adding custom/more complex hints to text fields

ghost/admin-x-settings/src/admin-x-ds/global/Hint.tsx

@@ -6,9 +6,23 @@ interface HintProps {
 }
 
 const Hint: React.FC<HintProps> = ({children, color, ...props}) => {
-    return (
-        <span className={`mt-2 inline-block text-xs ${color ? `text-${color}` : `text-grey-700`}`} {...props}>{children}</span>
-    );
+    if (!children) {
+        return null;
+    }
+
+    if (typeof children === 'string') {
+        return (
+            <span className={`mt-2 inline-block text-xs ${color ? `text-${color}` : `text-grey-700`}`} {...props}>{children}</span>
+        );
+    }
+
+    if (React.isValidElement(children)) {
+        return (
+            <>{children}</>
+        );
+    }
+
+    return null;
 };
 
-export default Hint;
+export default Hint;

ghost/admin-x-settings/src/components/settings/general/PublicationLanguage.tsx

@@ -45,9 +45,17 @@ const PublicationLanguage: React.FC = () => {
         }
     ];
 
+    const hint = (
+        <p className={`text-grey-700 mt-2 inline-block text-xs`}>
+            Default: English (<strong>en</strong>); find out more about
+            <a className='text-green-400' href="https://ghost.org/docs/faq/translation/" rel="noopener noreferrer" target="_blank"> using Ghost in other languages</a>
+        </p>
+    );
+
     const inputFields = (
-        <SettingGroupContent columns={2}>
+        <SettingGroupContent columns={1}>
             <TextField
+                hint={hint}
                 inputRef={languageRef}
                 placeholder="Site language"
                 title='Site language'