Add lastChild Property to RadioButton Component

This commit introduces a new lastChild property to the RadioButton component to manage the bottom margin of radio buttons within a group. The lastChild property identifies the last radio button in a group and removes its bottom margin. Key changes include:

Addition of lastChild property to the IRadioButtonContentStyled interface in radioButton.styled.ts, used to conditionally set the margin-bottom in the RadioButtonStyled component.
Update to RadioButtonStandAlone component in radioButtonStandAlone.tsx to pass the lastChild property to the RadioButtonStyled component.
Addition of lastChild property to the IRadioButtonStandAlone interface in radioButton.ts.
Calculation of the lastChild property in the RadioButtonGroupStandAloneComponent in radioButtonGroupStandAlone.tsx, passed to the RadioButtonStandAlone component.
These changes improve the visual consistency and spacing within radio button groups.

Author: Hector Arce De Las Heras

src/components/radioButtonGroup/components/radioButton/radioButton.styled.ts

@@ -15,6 +15,11 @@ interface IRadioButtonContentStyled {
   styles: VariantStyles<RadioButtonStylesType>;
   state: RadioButtonStateType;
   hasLabel?: boolean;
+  lastChild?: boolean;
+}
+
+interface IRadioButtonErrorStyled {
+  styles?: RadioButtonBaseStyles;
 }
 
 interface IRadioButtonErrorStyled {
@@ -58,7 +63,7 @@ export const RadioButtonStyled = styled.div<IRadioButtonContentStyled>`
   display: ${props => (props.hasLabel ? 'grid' : 'block')};
   grid-template-columns: auto 1fr;
   ${props => getStyles(props.styles?.[props.state]?.rowContainer)}
-
+  margin-bottom: ${props => (props.lastChild ? 0 : undefined)};
   & > :nth-child(3) {
     grid-column: 2;
   }

src/components/radioButtonGroup/components/radioButton/radioButtonStandAlone.tsx

@@ -33,7 +33,12 @@ export const RadioButtonStandAlone = (props: IRadioButtonStandAlone): JSX.Elemen
       : props.styles?.[props.state]?.label?.font_weight;
 
   return (
-    <RadioButtonStyled hasLabel={!!props.label} state={props.state} styles={props.styles}>
+    <RadioButtonStyled
+      hasLabel={!!props.label}
+      lastChild={props.lastChild}
+      state={props.state}
+      styles={props.styles}
+    >
       <RadioButtonContainerInput styles={props.styles}>
         <RadioButtonInputStyled
           aria-describedby={
@@ -64,7 +69,7 @@ export const RadioButtonStandAlone = (props: IRadioButtonStandAlone): JSX.Elemen
           <Label
             color={props.styles?.[props.state]?.label?.color}
             cursor={props.disabled ? CURSOR_DEFAULT : CURSOR_POINTER}
-            data-testid={`${props.dataTestId}Label`}
+            dataTestId={`${props.dataTestId}Label`}
             inputId={inputId}
             textVariant={props.styles?.[props.state]?.label?.font_variant}
             weight={getLabelFontWeight()}

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

@@ -40,6 +40,7 @@ export interface IRadioButtonStandAlone extends IRadioButtonStyled {
   dataTestId?: string;
   screenReaderId?: string;
   id?: string;
+  lastChild?: boolean;
 }
 /**
  * @description

src/components/radioButtonGroup/radioButtonGroupStandAlone.tsx

@@ -63,6 +63,7 @@ const RadioButtonGroupStandAloneComponent = (
           errorIcon={o.errorIcon}
           errorMessage={o.errorMessage}
           label={{ content: o.label }}
+          lastChild={index === props.options.length - 1}
           name={props.name}
           screenReaderId={o.screenReader ? screenReaderId : undefined}
           state={o.state}