From d97b167746d99cc4e50f409308bf52651f53854c Mon Sep 17 00:00:00 2001
From: shan8851 <asamshan456@gmail.com>
Date: Fri, 11 Oct 2024 13:43:04 +0100
Subject: [PATCH 1/9] feat: Implement new children property to radio and
 checkbox cards as well as make description optional for radio

---
 .../checkboxCard/checkboxCard.stories.tsx     | 14 +++
 .../forms/checkboxCard/checkboxCard.tsx       | 85 ++++++++++++-------
 .../checkboxGroup/checkboxGroup.stories.tsx   | 35 ++++++++
 .../forms/radioCard/radioCard.stories.tsx     | 36 ++++++++
 .../components/forms/radioCard/radioCard.tsx  | 29 +++++--
 .../forms/radioGroup/radioGroup.stories.tsx   | 38 +++++++++
 6 files changed, 198 insertions(+), 39 deletions(-)

diff --git a/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx b/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
index 9562e7410..0c380aeef 100644
--- a/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
+++ b/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
@@ -30,6 +30,20 @@ export const Default: Story = {
     },
 };
 
+/**
+ * Usage of the CheckboxCard component with children when checked
+ */
+export const WithChildrenWhenChecked: Story = {
+    render: (props) => <CheckboxCard {...props} />,
+    args: {
+        avatar: 'https://assets-global.website-files.com/5e997428d0f2eb13a90aec8c/63f47db62df04b569e4e004e_icon_aragon.svg',
+        label: 'Checkbox label',
+        description: 'Checkbox description',
+        tag: { label: 'Tag', variant: 'info' },
+        children: <div>Children</div>,
+    },
+};
+
 /**
  * CheckboxCard in indeterminate state
  */
diff --git a/src/core/components/forms/checkboxCard/checkboxCard.tsx b/src/core/components/forms/checkboxCard/checkboxCard.tsx
index e42d09bf3..d4366b678 100644
--- a/src/core/components/forms/checkboxCard/checkboxCard.tsx
+++ b/src/core/components/forms/checkboxCard/checkboxCard.tsx
@@ -1,6 +1,6 @@
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import classNames from 'classnames';
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef, type ReactNode, type ComponentProps } from 'react';
 import { useRandomId } from '../../../hooks';
 import { Avatar } from '../../avatars';
 import { Icon, IconType } from '../../icon';
@@ -40,10 +40,26 @@ export interface ICheckboxCardProps extends ComponentProps<'button'> {
      * Id of the checkbox.
      */
     id?: string;
+    /**
+     * Additional children to render when the checkbox is checked.
+     */
+    children?: ReactNode;
 }
 
 export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((props, ref) => {
-    const { id, avatar, label, description, tag, className, checked, onCheckedChange, disabled, ...otherProps } = props;
+    const {
+        id,
+        avatar,
+        label,
+        description,
+        tag,
+        className,
+        checked,
+        onCheckedChange,
+        disabled,
+        children,
+        ...otherProps
+    } = props;
 
     const randomId = useRandomId(id);
     const labelId = `${randomId}-label`;
@@ -57,7 +73,7 @@ export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((p
             onCheckedChange={onCheckedChange}
             disabled={disabled}
             className={classNames(
-                'group flex h-16 min-w-0 flex-row items-center gap-3 outline-none transition-all md:h-20', // Layout
+                'group flex min-w-0 flex-col gap-3 outline-none transition-all', // Layout
                 'rounded-xl border bg-neutral-0 px-4 py-3 md:gap-4 md:px-6 md:py-4', // Style
                 'focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset', // Focus
                 'border-primary-400 shadow-primary hover:shadow-primary-md', // Checked/indeterminate & hover
@@ -69,37 +85,44 @@ export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((p
             )}
             {...otherProps}
         >
-            {avatar && <Avatar size="sm" responsiveSize={{ md: 'md' }} src={avatar} />}
-            <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-sm font-normal leading-tight md:gap-1 md:text-base">
-                <p
-                    id={randomId}
-                    className={classNames(
-                        'max-w-full cursor-pointer truncate text-neutral-800 group-data-[state=unchecked]:text-neutral-800',
-                        'group-data-[disabled]:cursor-default group-data-[disabled]:group-data-[state=unchecked]:text-neutral-300',
-                    )}
-                >
-                    {label}
-                </p>
-                <p className="max-w-full truncate text-neutral-500 group-data-[disabled]:text-neutral-300">
-                    {description}
-                </p>
-            </div>
-            {tag && <Tag {...tag} className={classNames('self-start', tag.className)} />}
-            <Icon
-                icon={IconType.CHECKBOX}
-                size="md"
-                className={classNames(
-                    'mt-0.5 hidden self-start text-neutral-400 group-data-[state=unchecked]:block group-data-[disabled]:text-neutral-300 md:mt-1',
-                )}
-            />
-            <RadixCheckbox.Indicator className="mt-0.5 self-start text-primary-400 group-data-[disabled]:text-neutral-500 md:mt-1">
-                <Icon icon={IconType.CHECKBOX_SELECTED} size="md" className="hidden group-data-[state=checked]:block" />
+            <div className="flex w-full min-w-0 flex-row gap-3">
+                {avatar && <Avatar size="sm" responsiveSize={{ md: 'md' }} src={avatar} />}
+                <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-sm font-normal leading-tight md:gap-1 md:text-base">
+                    <p
+                        id={randomId}
+                        className={classNames(
+                            'max-w-full cursor-pointer truncate text-neutral-800 group-data-[state=unchecked]:text-neutral-800',
+                            'group-data-[disabled]:cursor-default group-data-[disabled]:group-data-[state=unchecked]:text-neutral-300',
+                        )}
+                    >
+                        {label}
+                    </p>
+                    <p className="max-w-full truncate text-neutral-500 group-data-[disabled]:text-neutral-300">
+                        {description}
+                    </p>
+                </div>
+                {tag && <Tag {...tag} className={classNames('self-start', tag.className)} />}
                 <Icon
-                    icon={IconType.CHECKBOX_INDETERMINATE}
+                    icon={IconType.CHECKBOX}
                     size="md"
-                    className="hidden group-data-[state=indeterminate]:block"
+                    className={classNames(
+                        'mt-0.5 hidden self-start text-neutral-400 group-data-[state=unchecked]:block group-data-[disabled]:text-neutral-300 md:mt-1',
+                    )}
                 />
-            </RadixCheckbox.Indicator>
+                <RadixCheckbox.Indicator className="mt-0.5 self-start text-primary-400 group-data-[disabled]:text-neutral-500 md:mt-1">
+                    <Icon
+                        icon={IconType.CHECKBOX_SELECTED}
+                        size="md"
+                        className="hidden group-data-[state=checked]:block"
+                    />
+                    <Icon
+                        icon={IconType.CHECKBOX_INDETERMINATE}
+                        size="md"
+                        className="hidden group-data-[state=indeterminate]:block"
+                    />
+                </RadixCheckbox.Indicator>
+            </div>
+            {children && <div className="hidden group-data-[state=checked]:block">{children}</div>}
         </RadixCheckbox.Root>
     );
 });
diff --git a/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx b/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
index 631856c84..9a241b0ee 100644
--- a/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
+++ b/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from '../checkbox';
 import { CheckboxCard } from '../checkboxCard';
 import { CheckboxGroup } from './checkboxGroup';
+import { InputNumber } from '../inputNumber';
 
 const meta: Meta<typeof CheckboxGroup> = {
     title: 'Core/Components/Forms/CheckboxGroup',
@@ -57,4 +58,38 @@ export const CheckboxCardVariant: Story = {
     ),
 };
 
+/**
+ * Usage of the CheckboxGroup component with CheckboxCard variant and additional content when checked.
+ */
+export const CheckboxCardVariantWithChildren: Story = {
+    render: (props) => (
+        <CheckboxGroup {...props}>
+            <CheckboxCard
+                label="First label"
+                description="First description"
+                avatar="first"
+                tag={{ label: 'First', variant: 'info' }}
+            >
+                <InputNumber placeholder="0" />
+            </CheckboxCard>
+            <CheckboxCard
+                label="Second label"
+                description="Longer description for second checkbox"
+                avatar="second"
+                tag={{ label: 'Second', variant: 'warning' }}
+            >
+                <div>Some additional content</div>
+            </CheckboxCard>
+            <CheckboxCard
+                label="Third label"
+                description="First description"
+                avatar="third"
+                tag={{ label: 'First', variant: 'primary' }}
+            >
+                <div>Some additional content</div>
+            </CheckboxCard>
+        </CheckboxGroup>
+    ),
+};
+
 export default meta;
diff --git a/src/core/components/forms/radioCard/radioCard.stories.tsx b/src/core/components/forms/radioCard/radioCard.stories.tsx
index b520241ff..f5edeb4ca 100644
--- a/src/core/components/forms/radioCard/radioCard.stories.tsx
+++ b/src/core/components/forms/radioCard/radioCard.stories.tsx
@@ -22,6 +22,41 @@ type Story = StoryObj<typeof RadioCard>;
  * Default usage of the `RadioCard` component
  */
 export const Default: Story = {
+    render: (props) => (
+        <RadioGroup>
+            <RadioCard {...props} />
+        </RadioGroup>
+    ),
+    args: {
+        avatar: 'https://assets-global.website-files.com/5e997428d0f2eb13a90aec8c/63f47db62df04b569e4e004e_icon_aragon.svg',
+        value: '1',
+        label: 'Option one',
+        tag: { label: 'Platinum' },
+    },
+};
+
+/**
+ * Default usage of the `RadioCard` component with description
+ */
+export const WithDescription: Story = {
+    render: (props) => (
+        <RadioGroup>
+            <RadioCard {...props} />
+        </RadioGroup>
+    ),
+    args: {
+        avatar: 'https://assets-global.website-files.com/5e997428d0f2eb13a90aec8c/63f47db62df04b569e4e004e_icon_aragon.svg',
+        value: '1',
+        label: 'Option one',
+        description: 'The best option ever',
+        tag: { label: 'Platinum' },
+    },
+};
+
+/**
+ * Usage of the `RadioCard` component with children when selected
+ */
+export const WithChildrenWhenCSelected: Story = {
     render: (props) => (
         <RadioGroup>
             <RadioCard {...props} />
@@ -33,6 +68,7 @@ export const Default: Story = {
         label: 'Option one',
         description: 'The best option ever',
         tag: { label: 'Platinum' },
+        children: <div>Children</div>,
     },
 };
 
diff --git a/src/core/components/forms/radioCard/radioCard.tsx b/src/core/components/forms/radioCard/radioCard.tsx
index 23733d7a9..475a11e2c 100644
--- a/src/core/components/forms/radioCard/radioCard.tsx
+++ b/src/core/components/forms/radioCard/radioCard.tsx
@@ -1,6 +1,6 @@
 import { RadioGroupIndicator, RadioGroupItem } from '@radix-ui/react-radio-group';
 import classNames from 'classnames';
-import { forwardRef, type ComponentProps } from 'react';
+import { forwardRef, type ReactNode, type ComponentProps } from 'react';
 import { useRandomId } from '../../../hooks';
 import { Avatar } from '../../avatars';
 import { Icon, IconType } from '../../icon';
@@ -14,7 +14,7 @@ export interface IRadioCardProps extends ComponentProps<'button'> {
     /**
      * Description
      */
-    description: string;
+    description?: string;
     /**
      * Radio label
      */
@@ -31,16 +31,20 @@ export interface IRadioCardProps extends ComponentProps<'button'> {
      * Indicates if the radio is disabled.
      */
     disabled?: boolean;
+    /**
+     * Additional children to render when the radio is selected.
+     */
+    children?: ReactNode;
 }
 
 export const RadioCard = forwardRef<HTMLButtonElement, IRadioCardProps>((props, ref) => {
-    const { value, id, className, tag, avatar, label, description, disabled, ...rest } = props;
+    const { value, id, className, tag, avatar, label, description, disabled, children, ...rest } = props;
 
     const randomId = useRandomId(id);
     const labelId = `${randomId}-label`;
 
     const containerClasses = classNames(
-        'group h-16 rounded-xl border border-neutral-100 bg-neutral-0 px-4 py-3 shadow-neutral-sm outline-none transition-all md:h-20 md:rounded-2xl md:px-6 md:py-4', // default
+        'group flex w-full flex-col gap-3 rounded-xl border border-neutral-100 bg-neutral-0 px-4 py-3 shadow-neutral-sm outline-none transition-all md:rounded-2xl md:px-6 md:py-4', // default
         'data-[state=checked]:border-primary-400 data-[state=checked]:shadow-primary', // checked
         'focus:outline-none focus-visible:ring focus-visible:ring-primary focus-visible:ring-offset', // focus
         'hover:border-neutral-200 hover:shadow-neutral hover:data-[state=checked]:shadow-primary-md', // hover
@@ -67,18 +71,26 @@ export const RadioCard = forwardRef<HTMLButtonElement, IRadioCardProps>((props,
             aria-labelledby={labelId}
             {...rest}
         >
-            <div className="flex h-full items-center gap-x-3 md:gap-x-4">
+            <div className="flex size-full items-center gap-x-3 md:gap-x-4">
                 {avatar && <Avatar size="sm" responsiveSize={{ md: 'md' }} src={avatar} />}
-                <div className="flex min-w-0 flex-1 gap-x-0.5 md:gap-x-4">
+                <div
+                    className={classNames('flex min-w-0 flex-1 gap-x-0.5 md:gap-x-4', {
+                        'items-center': !description,
+                    })}
+                >
                     <div className="flex min-w-0 flex-1 flex-col gap-y-0.5 md:gap-y-1">
                         <p className={labelClasses} id={labelId}>
                             {label}
                         </p>
-                        <p className={baseTextClasses}>{description}</p>
+                        {description && <p className={baseTextClasses}>{description}</p>}
                     </div>
                     {tag && <Tag {...tag} />}
                 </div>
-                <span className="h-full">
+                <span
+                    className={classNames({
+                        'h-full': description,
+                    })}
+                >
                     <Icon icon={IconType.RADIO} className="text-neutral-300 group-data-[state=checked]:hidden" />
                     <RadioGroupIndicator>
                         <Icon
@@ -88,6 +100,7 @@ export const RadioCard = forwardRef<HTMLButtonElement, IRadioCardProps>((props,
                     </RadioGroupIndicator>
                 </span>
             </div>
+            {children && <div className="hidden group-data-[state=checked]:block">{children}</div>}
         </RadioGroupItem>
     );
 });
diff --git a/src/core/components/forms/radioGroup/radioGroup.stories.tsx b/src/core/components/forms/radioGroup/radioGroup.stories.tsx
index 5596070e6..1abb849a8 100644
--- a/src/core/components/forms/radioGroup/radioGroup.stories.tsx
+++ b/src/core/components/forms/radioGroup/radioGroup.stories.tsx
@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Radio } from '../radio';
 import { RadioCard } from '../radioCard';
 import { RadioGroup } from './radioGroup';
+import { InputNumber } from '../inputNumber';
 
 const meta: Meta<typeof RadioGroup> = {
     title: 'Core/Components/Forms/RadioGroup',
@@ -73,6 +74,43 @@ export const RadioCardVariant: Story = {
     },
 };
 
+/**
+ * Usage of the `RadioGroup` component with the RadioCard and children when selected
+ */
+export const RadioCardVariantWithChildren: Story = {
+    render: (props) => (
+        <RadioGroup {...props}>
+            <RadioCard
+                label="Option one"
+                description="The best option"
+                value="1"
+                avatar="gold"
+                tag={{ label: 'Gold', variant: 'success' }}
+            >
+                <InputNumber placeholder="0" />
+            </RadioCard>
+            <RadioCard label="Option two" value="2" avatar="silver" tag={{ label: 'Silver' }}>
+                <div>Some additional content</div>
+            </RadioCard>
+            <RadioCard
+                label="Option three"
+                description="The 3rd best option"
+                value="3"
+                avatar="bronze"
+                tag={{ label: 'Bronze', variant: 'warning' }}
+            >
+                <div>Some additional content</div>
+            </RadioCard>
+        </RadioGroup>
+    ),
+    args: {
+        defaultValue: '2',
+        name: 'Options',
+        disabled: false,
+        onValueChange: undefined,
+    },
+};
+
 /**
  * Usage example of a controlled `RadioGroup` component.
  */

From ff602f82e6d3c1788725d8acf2736efc25207106 Mon Sep 17 00:00:00 2001
From: shan8851 <asamshan456@gmail.com>
Date: Fri, 11 Oct 2024 13:45:28 +0100
Subject: [PATCH 2/9] chore: update changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 000482d91..582fe44f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,8 +7,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   Added optional `children` property to `RadioCard` and `CheckboxCard` core components. When selected children will be rendered
+
 ### Changed
 
+-   Update core component `RadioCard` to have optional description property and correct alignment when no description provided
 -   Bump `actions/checkout` from 4.2.0 to 4.2.1
 -   Update minor and patch NPM dependencies
 

From 81507ef97cfb9e3b66b9ab5ee9ea553219c0cc4b Mon Sep 17 00:00:00 2001
From: shan8851 <asamshan456@gmail.com>
Date: Fri, 11 Oct 2024 14:07:27 +0100
Subject: [PATCH 3/9] chore: linting

---
 CHANGELOG.md                                    |  6 ++++--
 .../forms/checkboxCard/checkboxCard.test.tsx    |  6 ++++++
 .../forms/checkboxCard/checkboxCard.tsx         |  2 +-
 .../checkboxGroup/checkboxGroup.stories.tsx     |  2 +-
 .../forms/radioCard/radioCard.test.tsx          | 17 +++++++++++++++++
 .../components/forms/radioCard/radioCard.tsx    |  2 +-
 .../forms/radioGroup/radioGroup.stories.tsx     |  2 +-
 7 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 582fe44f2..f827c1068 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,11 +9,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
--   Added optional `children` property to `RadioCard` and `CheckboxCard` core components. When selected children will be rendered
+-   Added optional `children` property to `RadioCard` and `CheckboxCard` core components. When selected children will be
+    rendered
 
 ### Changed
 
--   Update core component `RadioCard` to have optional description property and correct alignment when no description provided
+-   Update core component `RadioCard` to have optional description property and correct alignment when no description
+    provided
 -   Bump `actions/checkout` from 4.2.0 to 4.2.1
 -   Update minor and patch NPM dependencies
 
diff --git a/src/core/components/forms/checkboxCard/checkboxCard.test.tsx b/src/core/components/forms/checkboxCard/checkboxCard.test.tsx
index 69c3ad06c..1b273c5f7 100644
--- a/src/core/components/forms/checkboxCard/checkboxCard.test.tsx
+++ b/src/core/components/forms/checkboxCard/checkboxCard.test.tsx
@@ -62,4 +62,10 @@ describe('<CheckboxCard /> component', () => {
         render(createTestComponent({ checked }));
         expect(screen.getByTestId(IconType.CHECKBOX_INDETERMINATE)).toBeVisible();
     });
+
+    it('renders the children when checkbox is checked', () => {
+        const checked = true;
+        render(createTestComponent({ checked, children: <div data-testid="children" /> }));
+        expect(screen.getByTestId('children')).toBeVisible();
+    });
 });
diff --git a/src/core/components/forms/checkboxCard/checkboxCard.tsx b/src/core/components/forms/checkboxCard/checkboxCard.tsx
index d4366b678..0322e8672 100644
--- a/src/core/components/forms/checkboxCard/checkboxCard.tsx
+++ b/src/core/components/forms/checkboxCard/checkboxCard.tsx
@@ -1,6 +1,6 @@
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import classNames from 'classnames';
-import { forwardRef, type ReactNode, type ComponentProps } from 'react';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
 import { useRandomId } from '../../../hooks';
 import { Avatar } from '../../avatars';
 import { Icon, IconType } from '../../icon';
diff --git a/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx b/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
index 9a241b0ee..72cd2f37a 100644
--- a/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
+++ b/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from '../checkbox';
 import { CheckboxCard } from '../checkboxCard';
-import { CheckboxGroup } from './checkboxGroup';
 import { InputNumber } from '../inputNumber';
+import { CheckboxGroup } from './checkboxGroup';
 
 const meta: Meta<typeof CheckboxGroup> = {
     title: 'Core/Components/Forms/CheckboxGroup',
diff --git a/src/core/components/forms/radioCard/radioCard.test.tsx b/src/core/components/forms/radioCard/radioCard.test.tsx
index eab8e2c80..de1f000da 100644
--- a/src/core/components/forms/radioCard/radioCard.test.tsx
+++ b/src/core/components/forms/radioCard/radioCard.test.tsx
@@ -72,4 +72,21 @@ describe('<RadioCard/> component', () => {
 
         expect(screen.getByRole('radio')).toHaveValue(value);
     });
+
+    it('renders children when radio button is checked', async () => {
+        const user = userEvent.setup();
+        render(
+            createTestComponent({
+                children: <div data-testid="child-content">child content</div>,
+            }),
+        );
+
+        const radioButton = screen.getByRole('radio');
+
+        await user.click(radioButton);
+        const childContent = screen.getByTestId('child-content');
+
+        expect(childContent).toBeVisible();
+        expect(screen.getByRole('radio')).toBeChecked();
+    });
 });
diff --git a/src/core/components/forms/radioCard/radioCard.tsx b/src/core/components/forms/radioCard/radioCard.tsx
index 475a11e2c..cb241700d 100644
--- a/src/core/components/forms/radioCard/radioCard.tsx
+++ b/src/core/components/forms/radioCard/radioCard.tsx
@@ -1,6 +1,6 @@
 import { RadioGroupIndicator, RadioGroupItem } from '@radix-ui/react-radio-group';
 import classNames from 'classnames';
-import { forwardRef, type ReactNode, type ComponentProps } from 'react';
+import { forwardRef, type ComponentProps, type ReactNode } from 'react';
 import { useRandomId } from '../../../hooks';
 import { Avatar } from '../../avatars';
 import { Icon, IconType } from '../../icon';
diff --git a/src/core/components/forms/radioGroup/radioGroup.stories.tsx b/src/core/components/forms/radioGroup/radioGroup.stories.tsx
index 1abb849a8..a03098204 100644
--- a/src/core/components/forms/radioGroup/radioGroup.stories.tsx
+++ b/src/core/components/forms/radioGroup/radioGroup.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
+import { InputNumber } from '../inputNumber';
 import { Radio } from '../radio';
 import { RadioCard } from '../radioCard';
 import { RadioGroup } from './radioGroup';
-import { InputNumber } from '../inputNumber';
 
 const meta: Meta<typeof RadioGroup> = {
     title: 'Core/Components/Forms/RadioGroup',

From 73a6accdcd170c6e1449929a4bcf772e39658790 Mon Sep 17 00:00:00 2001
From: "Shan8851.eth" <asamshan456@gmail.com>
Date: Fri, 11 Oct 2024 17:08:42 +0100
Subject: [PATCH 4/9] Update CHANGELOG.md

Co-authored-by: cgero.eth <ruggero.cino@gmail.com>
---
 CHANGELOG.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f827c1068..22e95ec2a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,8 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
--   Added optional `children` property to `RadioCard` and `CheckboxCard` core components. When selected children will be
-    rendered
+-   Add optional `children` property to `RadioCard` and `CheckboxCard` core components displayed only when component is selected
 
 ### Changed
 

From d01f7bcbb0329a16e94c0da95cd6bb2c48f11d01 Mon Sep 17 00:00:00 2001
From: "Shan8851.eth" <asamshan456@gmail.com>
Date: Fri, 11 Oct 2024 17:08:57 +0100
Subject: [PATCH 5/9] Update src/core/components/forms/radioCard/radioCard.tsx

Co-authored-by: cgero.eth <ruggero.cino@gmail.com>
---
 src/core/components/forms/radioCard/radioCard.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/core/components/forms/radioCard/radioCard.tsx b/src/core/components/forms/radioCard/radioCard.tsx
index cb241700d..ae0afaf2e 100644
--- a/src/core/components/forms/radioCard/radioCard.tsx
+++ b/src/core/components/forms/radioCard/radioCard.tsx
@@ -86,11 +86,7 @@ export const RadioCard = forwardRef<HTMLButtonElement, IRadioCardProps>((props,
                     </div>
                     {tag && <Tag {...tag} />}
                 </div>
-                <span
-                    className={classNames({
-                        'h-full': description,
-                    })}
-                >
+                <span className={classNames({ 'h-full': description })}>
                     <Icon icon={IconType.RADIO} className="text-neutral-300 group-data-[state=checked]:hidden" />
                     <RadioGroupIndicator>
                         <Icon

From 43c6eb32cfe7829020b4a5c6b52cf1ef3a40a7fe Mon Sep 17 00:00:00 2001
From: "Shan8851.eth" <asamshan456@gmail.com>
Date: Fri, 11 Oct 2024 17:09:15 +0100
Subject: [PATCH 6/9] Update
 src/core/components/forms/radioCard/radioCard.stories.tsx

Co-authored-by: cgero.eth <ruggero.cino@gmail.com>
---
 src/core/components/forms/radioCard/radioCard.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/forms/radioCard/radioCard.stories.tsx b/src/core/components/forms/radioCard/radioCard.stories.tsx
index f5edeb4ca..c133842ee 100644
--- a/src/core/components/forms/radioCard/radioCard.stories.tsx
+++ b/src/core/components/forms/radioCard/radioCard.stories.tsx
@@ -56,7 +56,7 @@ export const WithDescription: Story = {
 /**
  * Usage of the `RadioCard` component with children when selected
  */
-export const WithChildrenWhenCSelected: Story = {
+export const WithChildrenWhenSelected: Story = {
     render: (props) => (
         <RadioGroup>
             <RadioCard {...props} />

From 8ddeafdcc950fb5be3c9eb28c47277a660750fb2 Mon Sep 17 00:00:00 2001
From: shan8851 <asamshan456@gmail.com>
Date: Fri, 11 Oct 2024 19:19:21 +0100
Subject: [PATCH 7/9] chore: Add optional description to checkbox component and
 relevant styling

---
 CHANGELOG.md                                  |  2 +-
 .../checkboxCard/checkboxCard.stories.tsx     | 12 ++++++
 .../forms/checkboxCard/checkboxCard.tsx       | 23 +++++++----
 .../checkboxGroup/checkboxGroup.stories.tsx   | 35 -----------------
 .../forms/radioCard/radioCard.test.tsx        | 12 ++----
 .../forms/radioGroup/radioGroup.stories.tsx   | 38 -------------------
 6 files changed, 32 insertions(+), 90 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22e95ec2a..73315cba9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,7 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
--   Update core component `RadioCard` to have optional description property and correct alignment when no description
+-   Update core components `RadioCard` and `CheckboxCard` to have optional description property and correct alignment when no description
     provided
 -   Bump `actions/checkout` from 4.2.0 to 4.2.1
 -   Update minor and patch NPM dependencies
diff --git a/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx b/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
index 0c380aeef..23cecc900 100644
--- a/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
+++ b/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
@@ -21,6 +21,18 @@ type Story = StoryObj<typeof CheckboxCard>;
  * Default usage of the CheckboxCard component
  */
 export const Default: Story = {
+    render: (props) => <CheckboxCard {...props} />,
+    args: {
+        avatar: 'https://assets-global.website-files.com/5e997428d0f2eb13a90aec8c/63f47db62df04b569e4e004e_icon_aragon.svg',
+        label: 'Checkbox label',
+        tag: { label: 'Tag', variant: 'info' },
+    },
+};
+
+/**
+ * Default usage of the CheckboxCard component
+ */
+export const WithDescription: Story = {
     render: (props) => <CheckboxCard {...props} />,
     args: {
         avatar: 'https://assets-global.website-files.com/5e997428d0f2eb13a90aec8c/63f47db62df04b569e4e004e_icon_aragon.svg',
diff --git a/src/core/components/forms/checkboxCard/checkboxCard.tsx b/src/core/components/forms/checkboxCard/checkboxCard.tsx
index 0322e8672..f46c194e9 100644
--- a/src/core/components/forms/checkboxCard/checkboxCard.tsx
+++ b/src/core/components/forms/checkboxCard/checkboxCard.tsx
@@ -19,7 +19,7 @@ export interface ICheckboxCardProps extends ComponentProps<'button'> {
     /**
      * Description of the checkbox.
      */
-    description: string;
+    description?: string;
     /**
      * Optional tag for the checkbox.
      */
@@ -85,7 +85,7 @@ export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((p
             )}
             {...otherProps}
         >
-            <div className="flex w-full min-w-0 flex-row gap-3">
+            <div className={classNames('flex w-full min-w-0 flex-row gap-3', { 'items-center': !description })}>
                 {avatar && <Avatar size="sm" responsiveSize={{ md: 'md' }} src={avatar} />}
                 <div className="flex min-w-0 flex-1 flex-col items-start gap-0.5 text-sm font-normal leading-tight md:gap-1 md:text-base">
                     <p
@@ -97,19 +97,26 @@ export const CheckboxCard = forwardRef<HTMLButtonElement, ICheckboxCardProps>((p
                     >
                         {label}
                     </p>
-                    <p className="max-w-full truncate text-neutral-500 group-data-[disabled]:text-neutral-300">
-                        {description}
-                    </p>
+                    {description && (
+                        <p className="max-w-full truncate text-neutral-500 group-data-[disabled]:text-neutral-300">
+                            {description}
+                        </p>
+                    )}
                 </div>
-                {tag && <Tag {...tag} className={classNames('self-start', tag.className)} />}
+                {tag && <Tag {...tag} className={classNames(tag.className, { 'self-start': description })} />}
                 <Icon
                     icon={IconType.CHECKBOX}
                     size="md"
                     className={classNames(
-                        'mt-0.5 hidden self-start text-neutral-400 group-data-[state=unchecked]:block group-data-[disabled]:text-neutral-300 md:mt-1',
+                        'mt-0.5 hidden text-neutral-400 group-data-[state=unchecked]:block group-data-[disabled]:text-neutral-300 md:mt-1',
+                        { 'self-start': description },
                     )}
                 />
-                <RadixCheckbox.Indicator className="mt-0.5 self-start text-primary-400 group-data-[disabled]:text-neutral-500 md:mt-1">
+                <RadixCheckbox.Indicator
+                    className={classNames('mt-0.5 text-primary-400 group-data-[disabled]:text-neutral-500 md:mt-1', {
+                        'self-start': description,
+                    })}
+                >
                     <Icon
                         icon={IconType.CHECKBOX_SELECTED}
                         size="md"
diff --git a/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx b/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
index 72cd2f37a..631856c84 100644
--- a/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
+++ b/src/core/components/forms/checkboxGroup/checkboxGroup.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from '../checkbox';
 import { CheckboxCard } from '../checkboxCard';
-import { InputNumber } from '../inputNumber';
 import { CheckboxGroup } from './checkboxGroup';
 
 const meta: Meta<typeof CheckboxGroup> = {
@@ -58,38 +57,4 @@ export const CheckboxCardVariant: Story = {
     ),
 };
 
-/**
- * Usage of the CheckboxGroup component with CheckboxCard variant and additional content when checked.
- */
-export const CheckboxCardVariantWithChildren: Story = {
-    render: (props) => (
-        <CheckboxGroup {...props}>
-            <CheckboxCard
-                label="First label"
-                description="First description"
-                avatar="first"
-                tag={{ label: 'First', variant: 'info' }}
-            >
-                <InputNumber placeholder="0" />
-            </CheckboxCard>
-            <CheckboxCard
-                label="Second label"
-                description="Longer description for second checkbox"
-                avatar="second"
-                tag={{ label: 'Second', variant: 'warning' }}
-            >
-                <div>Some additional content</div>
-            </CheckboxCard>
-            <CheckboxCard
-                label="Third label"
-                description="First description"
-                avatar="third"
-                tag={{ label: 'First', variant: 'primary' }}
-            >
-                <div>Some additional content</div>
-            </CheckboxCard>
-        </CheckboxGroup>
-    ),
-};
-
 export default meta;
diff --git a/src/core/components/forms/radioCard/radioCard.test.tsx b/src/core/components/forms/radioCard/radioCard.test.tsx
index de1f000da..881cadbb5 100644
--- a/src/core/components/forms/radioCard/radioCard.test.tsx
+++ b/src/core/components/forms/radioCard/radioCard.test.tsx
@@ -75,18 +75,14 @@ describe('<RadioCard/> component', () => {
 
     it('renders children when radio button is checked', async () => {
         const user = userEvent.setup();
-        render(
-            createTestComponent({
-                children: <div data-testid="child-content">child content</div>,
-            }),
-        );
+
+        const children = 'test-children';
+        render(createTestComponent({ children }));
 
         const radioButton = screen.getByRole('radio');
 
         await user.click(radioButton);
-        const childContent = screen.getByTestId('child-content');
-
-        expect(childContent).toBeVisible();
+        expect(screen.getByText(children)).toBeVisible();
         expect(screen.getByRole('radio')).toBeChecked();
     });
 });
diff --git a/src/core/components/forms/radioGroup/radioGroup.stories.tsx b/src/core/components/forms/radioGroup/radioGroup.stories.tsx
index a03098204..5596070e6 100644
--- a/src/core/components/forms/radioGroup/radioGroup.stories.tsx
+++ b/src/core/components/forms/radioGroup/radioGroup.stories.tsx
@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { InputNumber } from '../inputNumber';
 import { Radio } from '../radio';
 import { RadioCard } from '../radioCard';
 import { RadioGroup } from './radioGroup';
@@ -74,43 +73,6 @@ export const RadioCardVariant: Story = {
     },
 };
 
-/**
- * Usage of the `RadioGroup` component with the RadioCard and children when selected
- */
-export const RadioCardVariantWithChildren: Story = {
-    render: (props) => (
-        <RadioGroup {...props}>
-            <RadioCard
-                label="Option one"
-                description="The best option"
-                value="1"
-                avatar="gold"
-                tag={{ label: 'Gold', variant: 'success' }}
-            >
-                <InputNumber placeholder="0" />
-            </RadioCard>
-            <RadioCard label="Option two" value="2" avatar="silver" tag={{ label: 'Silver' }}>
-                <div>Some additional content</div>
-            </RadioCard>
-            <RadioCard
-                label="Option three"
-                description="The 3rd best option"
-                value="3"
-                avatar="bronze"
-                tag={{ label: 'Bronze', variant: 'warning' }}
-            >
-                <div>Some additional content</div>
-            </RadioCard>
-        </RadioGroup>
-    ),
-    args: {
-        defaultValue: '2',
-        name: 'Options',
-        disabled: false,
-        onValueChange: undefined,
-    },
-};
-
 /**
  * Usage example of a controlled `RadioGroup` component.
  */

From 3732bdac884bdc7437279154fa5e497ec2e843d0 Mon Sep 17 00:00:00 2001
From: shan8851 <asamshan456@gmail.com>
Date: Fri, 11 Oct 2024 19:23:01 +0100
Subject: [PATCH 8/9] chore: prettier

---
 CHANGELOG.md | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73315cba9..153b46b65 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,12 +9,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
--   Add optional `children` property to `RadioCard` and `CheckboxCard` core components displayed only when component is selected
+-   Add optional `children` property to `RadioCard` and `CheckboxCard` core components displayed only when component is
+    selected
 
 ### Changed
 
--   Update core components `RadioCard` and `CheckboxCard` to have optional description property and correct alignment when no description
-    provided
+-   Update core components `RadioCard` and `CheckboxCard` to have optional description property and correct alignment
+    when no description provided
 -   Bump `actions/checkout` from 4.2.0 to 4.2.1
 -   Update minor and patch NPM dependencies
 

From 9dbe990dab6de083d82c9fd34b7c38cf95d1dda6 Mon Sep 17 00:00:00 2001
From: shan8851 <asamshan456@gmail.com>
Date: Mon, 14 Oct 2024 11:06:15 +0300
Subject: [PATCH 9/9] remove redundant render args in stories

---
 .../components/forms/checkboxCard/checkboxCard.stories.tsx     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx b/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
index 23cecc900..ff48ee813 100644
--- a/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
+++ b/src/core/components/forms/checkboxCard/checkboxCard.stories.tsx
@@ -21,7 +21,6 @@ type Story = StoryObj<typeof CheckboxCard>;
  * Default usage of the CheckboxCard component
  */
 export const Default: Story = {
-    render: (props) => <CheckboxCard {...props} />,
     args: {
         avatar: 'https://assets-global.website-files.com/5e997428d0f2eb13a90aec8c/63f47db62df04b569e4e004e_icon_aragon.svg',
         label: 'Checkbox label',
@@ -33,7 +32,6 @@ export const Default: Story = {
  * Default usage of the CheckboxCard component
  */
 export const WithDescription: Story = {
-    render: (props) => <CheckboxCard {...props} />,
     args: {
         avatar: 'https://assets-global.website-files.com/5e997428d0f2eb13a90aec8c/63f47db62df04b569e4e004e_icon_aragon.svg',
         label: 'Checkbox label',
@@ -46,7 +44,6 @@ export const WithDescription: Story = {
  * Usage of the CheckboxCard component with children when checked
  */
 export const WithChildrenWhenChecked: Story = {
-    render: (props) => <CheckboxCard {...props} />,
     args: {
         avatar: 'https://assets-global.website-files.com/5e997428d0f2eb13a90aec8c/63f47db62df04b569e4e004e_icon_aragon.svg',
         label: 'Checkbox label',