0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00

Added setting group value component to AdminX DS

refs. https://github.com/TryGhost/Team/issues/3150
This commit is contained in:
Peter Zimon 2023-05-17 12:02:47 +02:00
parent 6630fd1cb4
commit a789c84530
4 changed files with 63 additions and 2 deletions

View file

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

View file

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

View file

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

View file

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