Added static input field to Admin X Design System

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

ghost/admin-x-settings/.storybook/preview.tsx

@@ -15,7 +15,7 @@ const preview: Preview = {
 	},
 	decorators: [
 		(Story) => (
-			<div className="admin-x-settings">
+			<div className="admin-x-settings" style={{padding: '24px'}}>
 				{/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
 				<Story />
 			</div>

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

@@ -8,15 +8,16 @@ interface IHeading {
     children?: React.ReactNode;
     grey?: boolean;
     separator?: boolean;
+    formLabel?: boolean;
 }
 
-const Heading: React.FC<IHeading> = ({level, children, grey, separator, ...props}) => {
+const Heading: React.FC<IHeading> = ({level, children, grey, separator, formLabel, ...props}) => {
     if (!level) {
         level = 1;
     }
 
-    const newElement = `h${level}`;
-    let styles = (level === 6) ? (`text-2xs font-semibold uppercase tracking-wide ${(grey && 'text-grey-700')}`) : '';
+    const newElement = `${formLabel ? 'label' : `h${level}`}`;
+    let styles = (level === 6 || formLabel) ? (`text-2xs font-semibold uppercase tracking-wide ${(grey && 'text-grey-700')}`) : '';
 
     const Element = React.createElement(newElement, {className: styles, ...props}, children);
 

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

@@ -0,0 +1,40 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import TextField from './TextField';
+
+const meta = {
+    title: 'Global / Input / TextField',
+    component: TextField,
+    tags: ['autodocs']
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+type Story = StoryObj<typeof TextField>;
+
+export const Default: Story = {
+    args: {
+        placeholder: 'Enter something'
+    }
+};
+
+export const WithValue: Story = {
+    args: {
+        placeholder: 'Enter something',
+        value: 'Value'
+    }
+};
+
+export const WithHeading: Story = {
+    args: {
+        title: 'Title',
+        placeholder: 'Enter something'
+    }
+};
+
+export const WithHelp: Story = {
+    args: {
+        title: 'Title',
+        placeholder: 'Enter something',
+        help: 'Here\'s some help'
+    }
+};

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Heading from './Heading';
+
+interface ITextField {
+    title?: string,
+    value?: string,
+    placeholder?: string,
+    help?: React.ReactNode
+}
+
+const TextField: React.FC<ITextField> = ({title, value, placeholder, help}) => {
+    return (
+        <div className='flex flex-col gap-2'>
+            {title && <Heading formLabel={true} grey={true}>{title}</Heading>}
+            <input className='-m-1 border-b border-grey-300 px-1 py-2 focus:border-grey-900' placeholder={placeholder} type='text' value={value} />
+            <span className='text-xs text-grey-700'>{help}</span>
+        </div>
+    );
+};
+
+export default TextField;