Added setting group value component to AdminX DS

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

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

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/react';
 
-import Componeent from './Component';
+import Component from './Component';
 
 const meta = {
     title: 'Group / Component',

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

@@ -0,0 +1,34 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import SettingGroupValues from './SettingGroupValues';
+
+import * as SettingValueStories from './SettingValue.stories';
+
+const meta = {
+    title: 'Settings / Setting Values',
+    component: SettingGroupValues,
+    tags: ['autodocs']
+} satisfies Meta<typeof SettingGroupValues>;
+
+export default meta;
+type Story = StoryObj<typeof SettingGroupValues>;
+
+const values = [
+    {...SettingValueStories.Default.args, key: '1', heading: 'Setting one', value: 'Value one'},
+    {...SettingValueStories.Default.args, key: '2', heading: 'Setting two', value: 'Value two'},
+    {...SettingValueStories.Default.args, key: '3', heading: 'Setting three', value: 'Value three'},
+    {...SettingValueStories.Default.args, key: '4', heading: 'Setting four', value: 'Value four'}
+];
+
+export const SingleColumn: Story = {
+    args: {
+        values: values
+    }
+};
+
+export const TwoColumns: Story = {
+    args: {
+        values: values,
+        columns: 2
+    }
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import SettingValue from './SettingValue';
+import {ISettingValue} from './SettingValue';
+
+interface ISettingGroupValues {
+    columns?: 1 | 2;
+    values: Array<ISettingValue>
+}
+
+const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values}) => {
+    let styles = 'flex flex-col gap-6';
+    if (columns === 2) {
+        styles = 'grid grid-cols-2 gap-6';
+    }
+
+    return (
+        <div className={styles}>
+            {values && values.map(value => (
+                <SettingValue key={value.key} heading={value.heading} value={value.value} />
+            ))}
+        </div>
+    );
+};
+
+export default SettingGroupValues;

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

@@ -2,7 +2,8 @@ import React, {ReactNode} from 'react';
 
 import Heading from '../global/Heading';
 
-interface ISettingValue {
+export interface ISettingValue {
+    key: string,
     heading?: string,
     value: ReactNode,
     help?: ReactNode