From bfd65816968652ecfe2fe409690c3923ec6e7a1b Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 17 May 2023 11:34:56 +0200
Subject: [PATCH] Added setting value to AdminX design system

refs. https://github.com/TryGhost/Team/issues/3150
---
 .../src/admin-x-ds/global/Heading.tsx          |  5 +++--
 .../settings/SettingValue.stories.tsx          | 18 +++++++++++++++++-
 .../src/admin-x-ds/settings/SettingValue.tsx   | 17 ++++++++---------
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Heading.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Heading.tsx
index 22f2903f18..e3c728d737 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Heading.tsx
+++ b/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>
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.stories.tsx
index 46bc83403d..99a99d708c 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.stories.tsx
+++ b/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'
     }
 };
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.tsx b/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.tsx
index e14c0ec3b3..6b676799f2 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/settings/SettingValue.tsx
+++ b/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>
     );
 };