Added static userlist to AdminX Settings

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

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

@@ -14,14 +14,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-const listItemProps = {
-    title: ListItemStories.HiddenActions.args?.title,
-    detail: ListItemStories.HiddenActions.args?.detail,
-    action: ListItemStories.HiddenActions.args?.action,
-    hideActions: ListItemStories.HiddenActions.args?.hideActions,
-    separator: true,
-    onClick: ListItemStories.HiddenActions.args?.onClick
-};
+const {id, ...listItemProps} = ListItemStories.HiddenActions.args || {};
 
 const listItems = (
     <>

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

@@ -19,8 +19,10 @@ const ListItem: React.FC<ListItemProps> = ({id, title, detail, action, hideActio
         onClick?.(e);
     };
 
+    separator = (separator === undefined) ? true : separator;
+
     return (
-        <div className={`group flex items-center justify-between hover:bg-gradient-to-r hover:from-white hover:to-grey-50 ${separator ? 'border-b border-grey-100 last-of-type:border-none' : ''}`}>
+        <div className={`group flex items-center justify-between ${onClick && 'hover:bg-gradient-to-r hover:from-white hover:to-grey-50'} ${separator ? 'border-b border-grey-100 last-of-type:border-none' : ''}`}>
             <div className={`flex grow flex-col pr-6 ${separator ? 'py-3' : 'py-2'} ${onClick && 'cursor-pointer'}`} id={id} onClick={handleClick}>
                 <span>{title}</span>
                 {detail && <span className='text-xs text-grey-700'>{detail}</span>}

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

@@ -12,6 +12,10 @@ interface SettingGroupProps {
     customHeader?: React.ReactNode;
     customButtons?: React.ReactNode;
     children?: React.ReactNode;
+
+    /**
+     * Default buttons only appear if onStateChange is implemented
+     */
     onStateChange?: (newState: TSettingGroupStates) => void
     onSave?: () => void
 }
@@ -84,8 +88,8 @@ const SettingGroup: React.FC<SettingGroupProps> = ({title, description, state, c
         <div className={`flex flex-col gap-6 rounded border p-5 md:p-7 ${styles}`}>
             {customHeader ? customHeader :
                 <SettingGroupHeader description={description} title={title!}>
-                    {customButtons ? customButtons :
-                        <ButtonGroup buttons={state === 'view' ? viewButtons : editButtons} link={true} />}
+                    {customButtons ? customButtons : 
+                        (onStateChange && <ButtonGroup buttons={state === 'view' ? viewButtons : editButtons} link={true} />)}
                 </SettingGroupHeader>
             }
             {children}

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

@@ -14,7 +14,7 @@ interface ISettingGroupContent {
 }
 
 const SettingGroupContent: React.FC<ISettingGroupContent> = ({columns, values, children}) => {
-    let styles = 'flex flex-col gap-x-6 gap-y-8';
+    let styles = 'flex flex-col gap-x-6 gap-y-7';
     if (columns === 2) {
         styles = 'grid grid-cols-2 gap-6';
     }

ghost/admin-x-settings/src/components/settings/general/GeneralSettings.tsx

@@ -6,6 +6,7 @@ import SettingSection from '../../../admin-x-ds/settings/SettingSection';
 import SocialAccounts from './SocialAccounts';
 import TimeZone from './TimeZone';
 import TitleAndDescription from './TitleAndDescription';
+import Users from './Users';
 
 const GeneralSettings: React.FC = () => {
     return (
@@ -16,6 +17,7 @@ const GeneralSettings: React.FC = () => {
                 <PublicationLanguage />
                 <SocialAccounts />
                 <LockSite />
+                <Users />
             </SettingSection>
         </>
     );

ghost/admin-x-settings/src/components/settings/general/Users.tsx

@@ -0,0 +1,47 @@
+import Button from '../../../admin-x-ds/global/Button';
+import List from '../../../admin-x-ds/global/List';
+import ListItem from '../../../admin-x-ds/global/ListItem';
+import React from 'react';
+import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+
+const Users: React.FC = () => {
+    const buttons = (
+        <Button color='green' label='Invite users' link={true} />
+    );
+
+    const owner = (
+        <div className='flex flex-col'>
+            <span className='text-sm'>Cristofer Vaccaro — <strong>Owner</strong></span>
+            <span className='text-xs text-grey-700'>cristofer@example.com</span>
+        </div>
+    );
+
+    const list = (
+        <List title='Users'>
+            <ListItem 
+                action={<Button color='green' label='Edit' link={true} />}
+                detail='alena@press.com'
+                hideActions={true}
+                id='list-item-1'
+                title='Alena Press' />
+            <ListItem 
+                action={<Button color='green' label='Edit' link={true} />}
+                detail='martin@culhane.com'
+                hideActions={true}
+                id='list-item-1'
+                title='Martin Culhane' />
+        </List>
+    );
+
+    return (
+        <SettingGroup 
+            customButtons={buttons}
+            title='Users and permissions'
+        >
+            {owner}
+            {list}
+        </SettingGroup>
+    );
+};
+
+export default Users;