Added blockheading component to Admin X Settings

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

ghost/admin-x-settings/src/components/design-system/globals/BlockHeading.stories.tsx

@@ -0,0 +1,32 @@
+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',
+        color: 'grey'
+    }
+};
+
+export const Separator: Story = {
+    args: {
+        title: 'Block',
+        separator: true
+    }
+};

ghost/admin-x-settings/src/components/design-system/globals/BlockHeading.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+type BlockHeadingColors = 'black' | 'grey';
+
+interface BlockHeadingProps {
+    title: string,
+    color?: BlockHeadingColors,
+    separator?: boolean
+}
+
+const BlockHeading: React.FC<BlockHeadingProps> = ({title, color, separator, ...props}) => {
+    let styles = '';
+
+    switch (color) {
+    case 'grey':
+        styles += 'text-grey-700 ';
+        break;
+    
+    default:
+        styles += 'text-black ';
+        break;
+    }
+
+    if (separator) {
+        styles += 'pb-1 border-b border-grey-300';
+    }
+
+    return (
+        <h4 className={`text-xs font-semibold uppercase tracking-wide ${styles}`} {...props}>{title}</h4>
+    );
+};
+
+export default BlockHeading;