hasura/graphql-engine
1
0
Fork 0
mirror of https://github.com/hasura/graphql-engine.git synced 2024-12-14 17:02:49 +03:00
Code Issues Projects Releases Wiki Activity

storybook: modify existing CardRadioGroup component for vertical alignment of radio cards

Browse Source 
This PR modifies the existing storybook component `CardRadioGroup` for vertical of radio cards. Earlier we have radio group card which are aligned horizontally.
Run the storybook from this branch locally
See the storybook component [here ](http://localhost:4400/?path=/story/components-cardradiogroup--with-three-card-vertical-without-value)

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8141
GitOrigin-RevId: 6f460dbe0cb7ada5814e3ceb8be3e9ce7a3759d3
This commit is contained in:
Varun Choudhary 2023-03-01 15:55:06 +05:30 committed by hasura-bot
parent a53a2115dc
commit 11587fd546
2 changed files with 47 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.stories.tsx
View File

@ -9,7 +9,7 @@ export default {
component: CardRadioGroup,
} as ComponentMeta<typeof CardRadioGroup>;
type Value = '1' | '2' | '3';
type Value = '1' | '2' | '3' | '4' | '5' | '6' | '7';
const data: { value: Value; title: string; body: string }[] = [
{ value: '1', title: 'Radio-1', body: 'Description of radio-1' },
@ -33,12 +33,51 @@ export const WithThreeCardWithoutValue: Story = () => {
return <CardRadioGroup<Value> onChange={action('select')} items={data} />;
};
export const WithThreeCardVerticalWithoutValue: Story = () => {
return (
<CardRadioGroup<Value>
onChange={action('select')}
items={data}
orientation="vertical"
/>
);
};
export const WithThreeCardWithValue: Story = () => {
return (
<CardRadioGroup<Value> onChange={action('select')} items={data} value="1" />
);
};
export const WithThreeCardVerticalWithValue: Story = () => {
return (
<CardRadioGroup<Value>
onChange={action('select')}
items={data}
value="1"
orientation="vertical"
/>
);
};
export const WithSevenCardWithValue: Story = () => {
return (
<CardRadioGroup<Value>
onChange={action('select')}
items={[
{ value: '1', title: 'Radio-1', body: 'Description of radio-1' },
{ value: '2', title: 'Radio-2', body: 'Description of radio-2' },
{ value: '3', title: 'Radio-3', body: 'Description of radio-3' },
{ value: '4', title: 'Radio-4', body: 'Description of radio-4' },
{ value: '5', title: 'Radio-5', body: 'Description of radio-5' },
{ value: '6', title: 'Radio-6', body: 'Description of radio-6' },
{ value: '7', title: 'Radio-7', body: 'Description of radio-7' },
]}
value="1"
/>
);
};
export const Playground: Story = () => {
const [selected, setSelected] = React.useState<string | undefined>(undefined);

11
frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.tsx
View File

@ -11,6 +11,7 @@ interface CardRadioGroupProps<T> {
value?: T;
items: Array<CardRadioGroupItem<T>>;
disabled?: boolean;
orientation?: 'horizontal' | 'vertical';
onChange: (option: T) => void;
}
@ -18,13 +19,15 @@ export const CardRadioGroup = <T extends string = string>(
props: CardRadioGroupProps<T>
) => {
const { value, items, disabled = false, onChange } = props;
const isCardNumberLessThenThree = items?.length === 1 || items?.length === 2;
return (
<div
className={`grid gap-sm grid-cols-2 ${
isCardNumberLessThenThree ? `sm:grid-cols-2` : `sm:grid-cols-3`
}`}
className={clsx(
'grid gap-sm',
props.orientation === 'vertical'
? 'grid-cols-1'
: 'grid-cols-[repeat(_auto-fit,_minmax(300px,_1fr))]'
)}
>
{items.map(item => {
const { value: iValue, title, body } = item;