Introduce lastChild Property to RadioButton Component

This commit introduces a new lastChild property to the RadioButton component and its associated interfaces. This property is used to control the bottom margin of each radio button in a group, ensuring that the last radio button does not have a bottom margin.

Key changes include:

radioButton.styled.ts: Added a new lastChild optional property to the IRadioButtonContentStyled interface. This property is then used in the RadioButtonStyled component to conditionally apply a bottom margin.
radioButtonStandAlone.tsx: The RadioButtonStandAlone component now accepts a lastChild prop and passes it to the RadioButtonStyled component.
radioButton.ts: The IRadioButtonStandAlone interface has been updated to include the lastChild optional property.
radioButtonGroupStandAlone.tsx: The RadioButtonGroupStandAloneComponent now calculates whether each option is the last child and passes the result as the lastChild prop to the RadioButtonStandAlone component.
This change improves the visual consistency and spacing within radio button groups.

Author: Hector Arce De Las Heras

src/components/radioButtonGroup/components/infoIconWithTooltipStandAlone/infoIconWithTooltipStandAlone.styled.ts

@@ -1,5 +1,9 @@
 import styled from 'styled-components';
 
-export const InfoIconWrapperStyled = styled.div`
-  display: flex;
+import { getStyles } from '@/utils';
+
+import { IRadioButtonGroupStyled, RadioButtonGroupStateType } from '../../types';
+
+export const InfoIconWrapperStyled = styled.div<IRadioButtonGroupStyled>`
+  ${({ styles }) => getStyles(styles?.[RadioButtonGroupStateType.DEFAULT]?.infoIconContainer)}
 `;

src/components/radioButtonGroup/components/infoIconWithTooltipStandAlone/infoIconWithTooltipStandAlone.tsx

@@ -17,7 +17,7 @@ export const InfoIconWithTooltipStandAlone = ({
     return null;
   }
   const infoIconWithoutTooltip = (
-    <InfoIconWrapperStyled>
+    <InfoIconWrapperStyled styles={styles}>
       <ElementOrIcon
         customIconStyles={styles[RadioButtonGroupStateType.DEFAULT]?.tooltip?.icon}
         dataTestId={dataTestId}

src/components/radioButtonGroup/components/radioButton/types/radioButtonTheme.ts

@@ -16,6 +16,7 @@ export type RadioButtonBaseStyles = {
   errorMessageIconContainer?: CommonStyleType;
   radioButtonContainer?: CommonStyleType;
   radioButton?: CommonStyleType;
+  infoIconContainer?: CommonStyleType;
   tooltip?: {
     icon?: IconTypes;
     variant?: string;

src/components/radioButtonGroup/radioButtonGroupStandAlone.tsx

@@ -37,19 +37,19 @@ const RadioButtonGroupStandAloneComponent = (
         <>
           <Text component={legendComponent} customTypography={props.styles?.[state]?.title}>
             {props.legend}
+            <InfoIconWithTooltipStandAlone
+              dataTestId={`${dataTestId}InfoIcon`}
+              infoIcon={props.infoIcon}
+              styles={props.styles}
+              tooltip={props.tooltip}
+            />
             {props.required && (
               <>
                 {requiredSymbol}
                 <ScreenReaderOnly>{props.requiredScreenReaderText}</ScreenReaderOnly>
               </>
             )}
           </Text>
-          <InfoIconWithTooltipStandAlone
-            dataTestId={`${dataTestId}InfoIcon`}
-            infoIcon={props.infoIcon}
-            styles={props.styles}
-            tooltip={props.tooltip}
-          />
         </>
       )}
       {props.options.map((o, index) => (

src/components/radioButtonGroup/stories/radioButtonGroup.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
+import { ICONS } from '@/assets';
 import { STYLES_NAME } from '@/constants';
 import { themesObject, variantsObject } from '@/designSystem/themesObject';
 
@@ -21,18 +23,27 @@ const meta = {
     figmaUrl:
       'https://www.figma.com/file/EYQkbENTFO5r8muvXlPoOy/Kubit-v.1.0.0?type=design&node-id=3922-29665&mode=dev',
   },
+  render: ({ ...args }) => <StoryWithHooks {...args} />,
 } satisfies Meta<typeof Story>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 
+const StoryWithHooks = args => {
+  return (
+    <div style={{ width: '32px' }}>
+      <Story {...args} />
+    </div>
+  );
+};
+
 export const RadioButtongroup: Story = {
   args: {
     variant: Object.values(
       variantsObject[themeSelected].RadioButtonGroupVariantType || {}
     )[0] as string,
-    legend: 'Select your favorite fruit',
+    legend: 'Select your favorite fruit. Make sure your decision',
     name: 'Name',
     options: [
       { label: 'Strawberry', value: 'S' },
@@ -45,6 +56,12 @@ export const RadioButtongroup: Story = {
       { label: 'Kiwis', value: 'K', disabled: true },
       { label: 'Coconut', value: 'C' },
     ],
+    infoIcon: { icon: ICONS.ICON_PLACEHOLDER },
+    tooltip: {
+      closeIcon: { icon: ICONS.ICON_CLOSE },
+      title: { content: 'Tooltip title' },
+      content: { content: 'Tooltip content' },
+    },
     themeArgs: themesObject[themeSelected][STYLES_NAME.RADIO_BUTTON_GROUP],
   },
 };