Added static values to Admin X Settings

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

ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupHeader.tsx

@@ -13,7 +13,7 @@ const SettingGroupHeader: React.FC<Props> = ({title, description, children}) =>
             {(title || description) && 
                 <div>
                     <Heading level={5}>{title}</Heading>
-                    {description && <p className="max-w-lg text-sm">{description}</p>}
+                    {description && <p className="mt-0.5 max-w-lg text-sm">{description}</p>}
                 </div>
             }
             {children}

ghost/admin-x-settings/src/components/settings/email/DefaultRecipients.tsx

@@ -1,5 +1,7 @@
 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 {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const DefaultRecipients: React.FC = () => {
@@ -9,14 +11,32 @@ const DefaultRecipients: React.FC = () => {
         setCurrentState(newState);
     };
 
+    const values = (
+        <SettingGroupValues
+            values={[
+                {
+                    heading: 'Default Newsletter recipients',
+                    key: 'default-recipients',
+                    value: 'Whoever has access to the post'
+                }
+            ]}
+        />
+    );
+
+    const inputs = (
+        <SettingGroupInputs>
+            
+        </SettingGroupInputs>
+    );
+
     return (
         <SettingGroup 
             description='When you publish new content, who do you usually want to send it to?'
             state={currentState} 
-            title='Make site private' 
+            title='Default recipients' 
             onStateChange={handleStateChange}
         >
-            Values and inputs
+            {currentState === 'view' ? values : inputs}
         </SettingGroup>
     );
 };

ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx

@@ -1,6 +1,8 @@
 import Link from '../../../admin-x-ds/global/Link';
 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 {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const MailGun: React.FC = () => {
@@ -10,14 +12,33 @@ const MailGun: React.FC = () => {
         setCurrentState(newState);
     };
 
+    const values = (
+        <SettingGroupValues
+            columns={2}
+            values={[
+                {
+                    heading: 'Status',
+                    key: 'status',
+                    value: 'Mailgun is not set up'
+                }
+            ]}
+        />
+    );
+
+    const inputs = (
+        <SettingGroupInputs>
+            
+        </SettingGroupInputs>
+    );
+
     return (
         <SettingGroup 
             description={<>The Mailgun API is used for bulk email newsletter delivery. <Link href='https://ghost.org/docs/faq/mailgun-newsletters/' target='_blank'>Why is this required?</Link></>}
             state={currentState} 
-            title='Make site private' 
+            title='Mailgun' 
             onStateChange={handleStateChange}
         >
-            Values and inputs
+            {currentState === 'view' ? values : inputs}
         </SettingGroup>
     );
 };

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

@@ -39,7 +39,7 @@ const SocialAccounts: React.FC = () => {
             />
             <TextField
                 placeholder="https://twitter.com/ghost"
-                title="URL of your TWITTER PROFILE"
+                title="URL of your Twitter profile"
                 value="https://twitter.com/ghost"
                 onChange={() => {}}
             />

ghost/admin-x-settings/src/components/settings/membership/Access.tsx

@@ -1,5 +1,7 @@
 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 {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const Access: React.FC = () => {
@@ -9,6 +11,34 @@ const Access: React.FC = () => {
         setCurrentState(newState);
     };
 
+    const values = (
+        <SettingGroupValues
+            values={[
+                {
+                    heading: 'Subscription access',
+                    key: 'subscription-access',
+                    value: 'Anyone'
+                },
+                {
+                    heading: 'Default post access',
+                    key: 'default-post-access',
+                    value: 'Public'
+                },
+                {
+                    heading: 'Commenting',
+                    key: 'commenting',
+                    value: 'Nobody'
+                }
+            ]}
+        />
+    );
+
+    const inputs = (
+        <SettingGroupInputs>
+            
+        </SettingGroupInputs>
+    );
+
     return (
         <SettingGroup 
             description='Set up default access options for subscription and posts'
@@ -16,7 +46,7 @@ const Access: React.FC = () => {
             title='Access' 
             onStateChange={handleStateChange}
         >
-            Values and inputs
+            {currentState === 'view' ? values : inputs}
         </SettingGroup>
     );
 };

ghost/admin-x-settings/src/components/settings/membership/Analytics.tsx

@@ -1,5 +1,7 @@
 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 {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const Analytics: React.FC = () => {
@@ -9,6 +11,40 @@ const Analytics: React.FC = () => {
         setCurrentState(newState);
     };
 
+    const values = (
+        <SettingGroupValues
+            columns={2}
+            values={[
+                {
+                    heading: 'Newsletter opens',
+                    key: 'opens',
+                    value: 'Enabled'
+                },
+                {
+                    heading: 'Newsletter clicks',
+                    key: 'clicks',
+                    value: 'Enabled'
+                },
+                {
+                    heading: 'Member sources',
+                    key: 'sources',
+                    value: 'Disabled'
+                },
+                {
+                    heading: 'Outbound link tagging',
+                    key: 'taggin',
+                    value: 'Enabled'
+                }
+            ]}
+        />
+    );
+
+    const inputs = (
+        <SettingGroupInputs>
+            
+        </SettingGroupInputs>
+    );
+
     return (
         <SettingGroup 
             description='Decide what data you collect from your members'
@@ -16,7 +52,7 @@ const Analytics: React.FC = () => {
             title='Analytics' 
             onStateChange={handleStateChange}
         >
-            Values and inputs
+            {currentState === 'view' ? values : inputs}
         </SettingGroup>
     );
 };