TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Added setting group view mode to Admin X DS

Browse Source 
refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-17 12:36:15 +02:00
parent f58b9d3499
commit d8b1a715b4
6 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ghost/admin-x-settings/src/admin-x-ds/global/Button.tsx
View File

@ -28,7 +28,10 @@ const Button: React.FC<ButtonProps> = ({
...props
}) => {
let buttonColor: string;
const fontWeight: string = (link || (color !== ButtonColors.Clear && color)) ? 'font-bold' : 'font-medium';
if (!color) {
color = ButtonColors.Black;
}
const fontWeight: string = ((link && color !== ButtonColors.Black) || (!link && color !== ButtonColors.Clear)) ? 'font-bold' : 'font-semibold';
const padding: string = !link ? 'px-4 h-9' : '';
switch (color) {
@ -48,7 +51,7 @@ const Button: React.FC<ButtonProps> = ({
return (
<button
className={`flex items-center justify-center rounded-sm text-sm ${padding} ${fontWeight} ${fullWidth && !link ? 'w-full' : ''} ${buttonColor} `}
className={`flex cursor-pointer items-center justify-center rounded-sm text-sm ${padding} ${fontWeight} ${fullWidth && !link ? 'w-full' : ''} ${buttonColor} `}
type="button"
{...props}
>

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

@ -1,8 +1,10 @@
import type {Meta, StoryObj} from '@storybook/react';
import * as SettingGroupHeaderStories from './SettingGroupHeader.stories';
import * as SettingGroupValueStories from './SettingGroupValues.stories';
import SettingGroup from './SettingGroup';
import SettingGroupHeader from './SettingGroupHeader';
import {Default as DefaultGroupHeader} from './SettingGroupHeader.stories';
import SettingGroupValues from './SettingGroupValues';
const meta = {
title: 'Settings / Setting group',
@ -17,20 +19,24 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
state: 'view',
children: <SettingGroupHeader {...DefaultGroupHeader.args} />
children:
<div className='flex flex-col gap-6'>
<SettingGroupHeader {...SettingGroupHeaderStories.Default.args} />
<SettingGroupValues {...SettingGroupValueStories.SingleColumn.args} />
</div>
}
};
export const Editing: Story = {
args: {
state: 'edit',
children: <SettingGroupHeader {...DefaultGroupHeader.args} />
children: <SettingGroupHeader {...SettingGroupHeaderStories.Editing.args} />
}
};
export const Unsaved: Story = {
args: {
state: 'unsaved',
children: <SettingGroupHeader {...DefaultGroupHeader.args} />
children: <SettingGroupHeader {...SettingGroupHeaderStories.Editing.args} />
}
};

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

@ -14,17 +14,33 @@ const meta = {
export default meta;
type Story = StoryObj<typeof meta>;
const buttons = [
{
label: 'Edit',
color: ButtonColors.Green
}
];
export const Default: Story = {
args: {
title: 'Section group title',
description: 'Section group description',
children: <ButtonGroup buttons={buttons} link={true} />
children: <ButtonGroup
buttons={
[
{label: 'Edit', color: ButtonColors.Green}
]
}
link={true}
/>
}
};
export const Editing: Story = {
args: {
title: 'Section group title',
description: 'Section group description',
children: <ButtonGroup
buttons={
[
{label: 'Cancel'},
{label: 'Save', color: ButtonColors.Green}
]
}
link={true}
/>
}
};

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 Values',
title: 'Settings / Setting group values',
component: SettingGroupValues,
tags: ['autodocs']
} satisfies Meta<typeof SettingGroupValues>;

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

@ -5,7 +5,7 @@ import {ISettingValue} from './SettingValue';
interface ISettingGroupValues {
columns?: 1 | 2;
values: Array<ISettingValue>
values?: Array<ISettingValue>
}
const SettingGroupValues: React.FC<ISettingGroupValues> = ({columns, values}) => {

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>;