TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 13:54:35 +03:00
Code Issues Projects Releases Wiki Activity

Added setting group input component to Admin X DS

Browse Source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-17 13:35:54 +02:00
parent 347f331d63
commit 82999ee144
14 changed files with 103 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin-x-settings/src/admin-x-ds/global/ButtonGroup.stories.tsx
View File

@ -4,7 +4,7 @@ import ButtonGroup from './ButtonGroup';
import {ButtonColors} from './Button';
const ButtonGroupMeta = {
title: 'Global / Button group',
title: 'Global / Button Group',
component: ButtonGroup,
tags: ['autodocs']
} satisfies Meta<typeof ButtonGroup>;

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

@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
import TextField from './TextField';
const meta = {
title: 'Global / Input / TextField',
title: 'Global / Input / Textfield',
component: TextField,
tags: ['autodocs']
} satisfies Meta<typeof TextField>;

34
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.stories.tsx
View File

@ -1,13 +1,16 @@
import type {Meta, StoryObj} from '@storybook/react';
import * as SettingGroupHeaderStories from './SettingGroupHeader.stories';
import * as SettingGroupInputStories from './SettingGroupInputs.stories';
import * as SettingGroupValueStories from './SettingGroupValues.stories';
import SettingGroup from './SettingGroup';
import SettingGroupHeader from './SettingGroupHeader';
import SettingGroupInputs from './SettingGroupInputs';
import SettingGroupValues from './SettingGroupValues';
const meta = {
title: 'Settings / Setting group',
title: 'Settings / Setting Group',
component: SettingGroup,
tags: ['autodocs'],
decorators: [(_story: any) => <div style={{maxWidth: '780px'}}>{_story()}</div>]
@ -16,27 +19,46 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
export const SingleColumn: Story = {
args: {
state: 'view',
children:
<div className='flex flex-col gap-6'>
<>
<SettingGroupHeader {...SettingGroupHeaderStories.Default.args} />
<SettingGroupValues {...SettingGroupValueStories.SingleColumn.args} />
</div>
</>
}
};
export const TwoColumns: Story = {
args: {
state: 'view',
children:
<>
<SettingGroupHeader {...SettingGroupHeaderStories.Default.args} />
<SettingGroupValues {...SettingGroupValueStories.TwoColumns.args} />
</>
}
};
export const Editing: Story = {
args: {
state: 'edit',
children: <SettingGroupHeader {...SettingGroupHeaderStories.Editing.args} />
children:
<>
<SettingGroupHeader {...SettingGroupHeaderStories.Editing.args} />
<SettingGroupInputs {...SettingGroupInputStories.TwoColumns.args} />
</>
}
};
export const Unsaved: Story = {
args: {
state: 'unsaved',
children: <SettingGroupHeader {...SettingGroupHeaderStories.Editing.args} />
children:
<>
<SettingGroupHeader {...SettingGroupHeaderStories.Editing.args} />
<SettingGroupInputs {...SettingGroupInputStories.TwoColumns.args} />
</>
}
};

2
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroup.tsx
View File

@ -31,7 +31,7 @@ const SettingGroup: React.FC<SettingGroupProps> = ({state, children}) => {
}
return (
<div className={`rounded border p-5 md:p-7 ${styles}`}>
<div className={`flex flex-col gap-6 rounded border p-5 md:p-7 ${styles}`}>
{children}
</div>
);

2
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupHeader.stories.tsx
View File

@ -6,7 +6,7 @@ import SettingGroupHeader from './SettingGroupHeader';
import {ButtonColors} from '../global/Button';
const meta = {
title: 'Settings / Setting group header',
title: 'Settings / Setting Group Header',
component: SettingGroupHeader,
tags: ['autodocs']
} satisfies Meta<typeof SettingGroupHeader>;

40
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.stories.tsx Normal file
View File

@ -0,0 +1,40 @@
import type {Meta, StoryObj} from '@storybook/react';
import SettingGroupInputs from './SettingGroupInputs';
import TextField from '../global/TextField';
import * as TextFieldStories from '../global/TextField.stories';
const meta = {
title: 'Settings / Setting Group Inputs',
component: SettingGroupInputs,
tags: ['autodocs']
} satisfies Meta<typeof SettingGroupInputs>;
export default meta;
type Story = StoryObj<typeof SettingGroupInputs>;
export const SingleColumn: Story = {
args: {
children:
<>
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
</>
}
};
export const TwoColumns: Story = {
args: {
columns: 2,
children:
<>
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
<TextField {...TextFieldStories.WithHeading.args} />
</>
}
};

21
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupInputs.tsx Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
interface ISettingGroupInputs {
columns?: 1 | 2;
children?: React.ReactNode;
}
const SettingGroupInputs: React.FC<ISettingGroupInputs> = ({columns, children}) => {
let styles = 'flex flex-col gap-6';
if (columns === 2) {
styles = 'grid grid-cols-2 gap-6';
}
return (
<div className={styles}>
{children}
</div>
);
};
export default SettingGroupInputs;

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

@ -5,7 +5,7 @@ import SettingGroupValues from './SettingGroupValues';
import * as SettingValueStories from './SettingValue.stories';
const meta = {
title: 'Settings / Setting group values',
title: 'Settings / Setting Group Values',
component: SettingGroupValues,
tags: ['autodocs']
} satisfies Meta<typeof SettingGroupValues>;

6
ghost/admin-x-settings/src/admin-x-ds/settings/SettingGroupValues.tsx
View File

@ -5,10 +5,11 @@ import {ISettingValue} from './SettingValue';
interface ISettingGroupValues {
columns?: 1 | 2;
values?: Array<ISettingValue>
values?: Array<ISettingValue>;
children?: React.ReactNode;
}
const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values}) => {
const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values, children}) => {
let styles = 'flex flex-col gap-6';
if (columns === 2) {
styles = 'grid grid-cols-2 gap-6';
@ -19,6 +20,7 @@ const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values}) =>
{values && values.map(value => (
<SettingValue key={value.key} heading={value.heading} value={value.value} />
))}
{children}
</div>
);
};

2
ghost/admin-x-settings/src/admin-x-ds/settings/SettingNavItem.stories.tsx
View File

@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
import SettingNavItem from './SettingNavItem';
const meta = {
title: 'Settings / Sidebar navigation item',
title: 'Settings / Sidebar Navigation Item',
component: SettingNavItem,
tags: ['autodocs']
} satisfies Meta<typeof SettingNavItem>;

2
ghost/admin-x-settings/src/admin-x-ds/settings/SettingNavSection.stories.tsx
View File

@ -6,7 +6,7 @@ import SettingNavSection from './SettingNavSection';
import {Default as DefaultNavItem} from './SettingNavItem.stories';
const meta = {
title: 'Settings / Sidebar navigation section',
title: 'Settings / Sidebar Navigation Section',
component: SettingNavSection,
tags: ['autodocs']
} satisfies Meta<typeof SettingNavSection>;

2
ghost/admin-x-settings/src/admin-x-ds/settings/SettingSection.stories.tsx
View File

@ -5,7 +5,7 @@ import SettingGroup from './SettingGroup';
import SettingSection from './SettingSection';
const meta = {
title: 'Settings / Setting section',
title: 'Settings / Setting Section',
component: SettingSection,
tags: ['autodocs'],
decorators: [(_story: any) => <div style={{maxWidth: '780px'}}>{_story()}</div>]

2
ghost/admin-x-settings/src/admin-x-ds/settings/SettingSectionHeader.stories.tsx
View File

@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
import SettingSectionHeader from './SettingSectionHeader';
const meta = {
title: 'Settings / Section header',
title: 'Settings / Setting Section Header',
component: SettingSectionHeader,
tags: ['autodocs']
} satisfies Meta<typeof SettingSectionHeader>;

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

@ -3,7 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
import SettingValue from './SettingValue';
const meta = {
title: 'Settings / Setting value',
title: 'Settings / Setting Value',
component: SettingValue,
tags: ['autodocs']
} satisfies Meta<typeof SettingValue>;