From 11587fd54682c1388573614ced0c772537a6a860 Mon Sep 17 00:00:00 2001
From: Varun Choudhary <68095256+Varun-Choudhary@users.noreply.github.com>
Date: Wed, 1 Mar 2023 15:55:06 +0530
Subject: [PATCH] storybook: modify existing CardRadioGroup component for
 vertical alignment of radio cards

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
---
 .../CardRadioGroup/CardRadioGroup.stories.tsx | 41 ++++++++++++++++++-
 .../CardRadioGroup/CardRadioGroup.tsx         | 11 +++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.stories.tsx b/frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.stories.tsx
index 7ad246deaa6..99457b6c3b9 100644
--- a/frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.stories.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.stories.tsx
@@ -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);
 
diff --git a/frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.tsx b/frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.tsx
index bfdfffa2475..ec02162f859 100644
--- a/frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/new-components/CardRadioGroup/CardRadioGroup.tsx
@@ -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;