Added static social account settings in Admin X

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

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

@@ -11,12 +11,15 @@ interface LinkProps extends React.ComponentPropsWithoutRef<'a'> {
     children?: React.ReactNode;
 }
 
+/**
+ * Standard link with default styling
+ */
 const Link: React.FC<LinkProps> = ({href, color, classes, children, ...props}) => {
     if (!color) {
         color = 'green';
     }
 
-    let styles = (color === 'black') ? `text-black hover:text-black-700 ${classes}` : `text-${color} hover:text-${color}-400 ${classes}`;
+    let styles = (color === 'black') ? `transition text-black hover:text-black-700 ${classes}` : `text-${color} hover:text-${color}-400 ${classes}`;
 
     return <a className={styles} href={href} {...props}>{children}</a>;
 };

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

@@ -19,10 +19,10 @@ const TextField: React.FC<ITextField> = ({inputRef, title, value, error, placeho
             {title && <Heading grey={true} useLabelTag={true}>{title}</Heading>}
             <input
                 ref={inputRef} 
-                className={`-m-1 h-10 border-b ${error ? `border-red` : `border-grey-300 hover:border-grey-500 focus:border-grey-900`} px-1 py-2 ${title && `mt-0`}`} 
+                className={`-mx-1 h-10 border-b ${error ? `border-red` : `border-grey-300 hover:border-grey-500 focus:border-grey-900`} px-1 py-2 ${title && `mt-0`}`} 
+                defaultValue={value} 
                 placeholder={placeholder} 
-                type='text' 
+                type='text'
-                value={value}
                 onChange={onChange}
                 {...props} />
             {hint && <Hint color={error ? 'red' : ''}>{hint}</Hint>}

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

@@ -1,5 +1,8 @@
 import React, {useState} from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import SettingGroupInputs from '../../../admin-x-ds/settings/SettingGroupInputs';
+import SettingGroupValues from '../../../admin-x-ds/settings/SettingGroupValues';
+import TextField from '../../../admin-x-ds/global/TextField';
 import {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const SocialAccounts: React.FC = () => {
@@ -9,6 +12,40 @@ const SocialAccounts: React.FC = () => {
         setCurrentState(newState);
     };
 
+    const values = (
+        <SettingGroupValues
+            values={[
+                {
+                    heading: `URL of your publication's Facebook Page`,
+                    key: 'facebook',
+                    value: 'https://www.facebook.com/ghost'
+                },
+                {
+                    heading: 'URL of your TWITTER PROFILE',
+                    key: 'twitter',
+                    value: 'https://twitter.com/ghost'
+                }
+            ]}
+        />
+    );
+
+    const inputs = (
+        <SettingGroupInputs>
+            <TextField
+                placeholder="https://www.facebook.com/ghost"
+                title={`URL of your publication's Facebook Page`}
+                value='https://www.facebook.com/ghost'
+                onChange={() => {}}
+            />
+            <TextField
+                placeholder="https://twitter.com/ghost"
+                title="URL of your TWITTER PROFILE"
+                value="https://twitter.com/ghost"
+                onChange={() => {}}
+            />
+        </SettingGroupInputs>
+    );
+
     return (
         <SettingGroup 
             description='Link your social accounts for full structured data and rich card support' 
@@ -16,7 +53,7 @@ const SocialAccounts: React.FC = () => {
             title='Social accounts'
             onStateChange={handleStateChange}
         >
-            Values and inputs
+            {currentState === 'view' ? values : inputs}
         </SettingGroup>
     );
 };