Cleaned up headings in Admin design system

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

ghost/admin-x-settings/src/admin-x-ds/Boilerplate.stories

@@ -1,15 +1,15 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import Heading from './Heading';
+import Componeent from './Component';
 
 const meta = {
     title: 'Group / Component',
-    component: Heading,
+    component: Component,
     tags: ['autodocs']
-} satisfies Meta<typeof Heading>;
+} satisfies Meta<typeof Component>;
 
 export default meta;
-type Story = StoryObj<typeof Heading>;
+type Story = StoryObj<typeof Component>;
 
 export const Default: Story = {
     args: {}

ghost/admin-x-settings/src/admin-x-ds/global/BlockHeading.stories.tsx

@@ -1,32 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react';
-
-import BlockHeading from './BlockHeading';
-
-const meta = {
-    title: 'Global / Block heading',
-    component: BlockHeading,
-    tags: ['autodocs']
-} satisfies Meta<typeof BlockHeading>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        title: 'Block'
-    }
-};
-
-export const Grey: Story = {
-    args: {
-        title: 'Block',
-        grey: true
-    }
-};
-
-export const WithSeparator: Story = {
-    args: {
-        title: 'Block',
-        separator: true
-    }
-};

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

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import Heading from './Heading';
-import Separator from './Separator';
-
-interface BlockHeadingProps {
-    title: string,
-    grey?: boolean,
-    separator?: boolean
-}
-
-const BlockHeading: React.FC<BlockHeadingProps> = ({title, grey, separator, ...props}) => {
-    const CustomHeading = (
-        <Heading
-            grey={grey}
-            level={6}
-            {...props}
-        >
-            {title}
-        </Heading>
-    );
-
-    if (separator) {
-        return (
-            <div className='mb-3 flex flex-col gap-1'>
-                {CustomHeading}
-                <Separator />
-            </div>
-        );
-    } else {
-        return CustomHeading;
-    }
-};
-
-export default BlockHeading;

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

@@ -45,14 +45,30 @@ export const H4: Story = {
 
 export const H5: Story = {
     args: {
-        children: 'Heading 4',
+        children: 'Heading 5',
         level: 5
     }
 };
 
 export const H6: Story = {
     args: {
-        children: 'Heading 4',
+        children: 'Heading 6',
         level: 6
     }
+};
+
+export const H6Grey: Story = {
+    args: {
+        children: 'Grey heading 6 (only available here)',
+        level: 6,
+        grey: true
+    }
+};
+
+export const H6WithSeparator: Story = {
+    args: {
+        children: 'Heading 6 with separator',
+        level: 6,
+        separator: true
+    }
 };

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import Separator from './Separator';
 
 type THeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -6,24 +7,30 @@ interface IHeading {
     level?: THeadingLevels;
     children?: React.ReactNode;
     grey?: boolean;
+    separator?: boolean;
 }
 
-const Heading: React.FC<IHeading> = ({level, children, grey, ...props}) => {
-    const newElement = level ? `h${level}` : 'h1';
-
-    let styles = '';
-
-    switch (level) {
-    case 6:
-        styles += 'text-xs font-semibold uppercase tracking-wide ';
-        styles += grey && 'text-grey-700';
-        break;
-    
-    default:
-        break;
+const Heading: React.FC<IHeading> = ({level, children, grey, separator, ...props}) => {
+    if (!level) {
+        level = 1;
     }
 
-    return React.createElement(newElement, {className: styles, ...props}, children);
+    const newElement = `h${level}`;
+    let styles = (level === 6) ? (`text-xs 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;
+        return (
+            <div className={`gap-${gap} mb-3 flex flex-col`}>
+                {Element}
+                <Separator />
+            </div>
+        );
+    } else {
+        return Element;
+    }
 };
 
 export default Heading;

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

@@ -0,0 +1,18 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import SettingValue from './SettingValue';
+
+const meta = {
+    title: 'Settings / Setting Value',
+    component: SettingValue,
+    tags: ['autodocs']
+} satisfies Meta<typeof SettingValue>;
+
+export default meta;
+type Story = StoryObj<typeof SettingValue>;
+
+export const Default: Story = {
+    args: {
+        value: 'Hello'
+    }
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+// import Heading from '../global/Heading';
+
+interface ISettingValue {
+    heading?: string,
+    value: string,
+    help?: string
+}
+
+const SettingValue: React.FC<ISettingValue> = ({heading, value, help, ...props}) => {
+    return (
+        <div {...props}>
+            {heading}
+            {heading}
+            {value}
+            {help}
+        </div>
+    );
+};
+
+export default SettingValue;