Added setting value to AdminX design system

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

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

@@ -16,14 +16,15 @@ const Heading: React.FC<IHeading> = ({level, children, grey, separator, ...props
     }
 
     const newElement = `h${level}`;
-    let styles = (level === 6) ? (`text-xs font-semibold uppercase tracking-wide ${(grey && 'text-grey-700')}`) : '';
+    let styles = (level === 6) ? (`text-2xs font-semibold uppercase tracking-wide ${(grey && 'text-grey-700')}`) : '';
 
     const Element = React.createElement(newElement, {className: styles, ...props}, children);
 
     if (separator) {
         let gap = (!level || level === 1) ? 2 : 1;
+        let bottomMargin = (level === 6) ? 2 : 3;
         return (
-            <div className={`gap-${gap} mb-3 flex flex-col`}>
+            <div className={`gap-${gap} mb-${bottomMargin} flex flex-col`}>
                 {Element}
                 <Separator />
             </div>

ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.stories.tsx

@@ -13,6 +13,22 @@ type Story = StoryObj<typeof SettingValue>;
 
 export const Default: Story = {
     args: {
-        value: 'Hello'
+        heading: 'Setting',
+        value: 'Setting value'
+    }
+};
+
+export const WithHelp: Story = {
+    args: {
+        heading: 'Setting',
+        value: 'Setting value',
+        help: 'Setting help text'
+    }
+};
+
+export const NoHeading: Story = {
+    args: {
+        value: 'Setting value',
+        help: 'Help text'
     }
 };

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

@@ -1,20 +1,19 @@
-import React from 'react';
+import React, {ReactNode} from 'react';
 
-// import Heading from '../global/Heading';
+import Heading from '../global/Heading';
 
 interface ISettingValue {
     heading?: string,
-    value: string,
-    help?: string
+    value: ReactNode,
+    help?: ReactNode
 }
 
 const SettingValue: React.FC<ISettingValue> = ({heading, value, help, ...props}) => {
     return (
-        <div {...props}>
-            {heading}
-            {heading}
-            {value}
-            {help}
+        <div className='flex flex-col' {...props}>
+            {heading && <Heading grey={true} level={6}>{heading}</Heading>}
+            <div className='mt-1'>{value}</div>
+            {help && <p className='mt-0.5 text-xs'>{help}</p>}
         </div>
     );
 };