Added basic Facebook settings in AdminX Settings

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

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
+import TextField from '../../../admin-x-ds/global/TextField';
+import useSettingGroup from '../../../hooks/useSettingGroup';
+
+const Facebook: React.FC = () => {
+    const {
+        currentState,
+        focusRef,
+        handleSave,
+        handleCancel,
+        updateSetting,
+        getSettingValues,
+        handleStateChange
+    } = useSettingGroup();
+
+    const [facebookTitle, facebookDescription, siteTitle, siteDescription] = getSettingValues(['og_title', 'og_description', 'title', 'description']) as string[];
+
+    const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        updateSetting('og_title', e.target.value);
+    };
+
+    const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        updateSetting('og_description', e.target.value);
+    };
+
+    const values = (
+        <div>
+            [TBD: facebook card preview]
+        </div>
+    );
+
+    const inputFields = (
+        <SettingGroupContent>
+            <TextField
+                inputRef={focusRef}
+                placeholder={siteTitle}
+                title="Facebook title"
+                value={facebookTitle}
+                onChange={handleTitleChange}
+            />
+            <TextField
+                placeholder={siteDescription}
+                title="Facebook description"
+                value={facebookDescription}
+                onChange={handleDescriptionChange}
+            />
+        </SettingGroupContent>
+    );
+
+    return (
+        <SettingGroup
+            description='Customize structured data of your site'
+            navid='facebook'
+            state={currentState}
+            title='Facebook card'
+            onCancel={handleCancel}
+            onSave={handleSave}
+            onStateChange={handleStateChange}
+        >
+            {values}
+            {currentState !== 'view' ? inputFields : ''}
+        </SettingGroup>
+    );
+};
+
+export default Facebook;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import Facebook from './Facebook';
 import LockSite from './LockSite';
 import Metadata from './Metadata';
 import PublicationLanguage from './PublicationLanguage';
@@ -17,6 +18,7 @@ const GeneralSettings: React.FC = () => {
                 <TimeZone />
                 <PublicationLanguage />
                 <Metadata />
+                <Facebook />
                 <SocialAccounts />
                 <LockSite />
                 <Users />

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

@@ -15,7 +15,7 @@ const Metadata: React.FC = () => {
         handleStateChange
     } = useSettingGroup();
 
-    const [metaTitle, metaDescription] = getSettingValues(['meta_title', 'meta_description']) as string[];
+    const [metaTitle, metaDescription, siteTitle, siteDescription] = getSettingValues(['meta_title', 'meta_description', 'title', 'description']) as string[];
 
     const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         updateSetting('meta_title', e.target.value);
@@ -36,14 +36,14 @@ const Metadata: React.FC = () => {
             <TextField
                 hint="Recommended: 70 characters"
                 inputRef={focusRef}
-                placeholder="[TBD: site title]"
+                placeholder={siteTitle}
                 title="Meta title"
                 value={metaTitle}
                 onChange={handleTitleChange}
             />
             <TextField
                 hint="Recommended: 156 characters"
-                placeholder="[TBD: site description]"
+                placeholder={siteDescription}
                 title="Meta description"
                 value={metaDescription}
                 onChange={handleDescriptionChange}