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:
parent
6630fd1cb4
commit
a789c84530
4 changed files with 63 additions and 2 deletions
|
@ -1,6 +1,6 @@
|
|||
import type {Meta, StoryObj} from '@storybook/react';
|
||||
|
||||
import Componeent from './Component';
|
||||
import Component from './Component';
|
||||
|
||||
const meta = {
|
||||
title: 'Group / Component',
|
||||
|
|
|
@ -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
|
||||
}
|
||||
};
|
|
@ -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;
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue