Layout Update and Style Enhancement for Accordion Component

This commit focuses on updating the layout of the AccordionStandAlone component and enhancing the styles of the accordion component across multiple files in the designSystem directory. Specifically, the headerRightContent element has been moved inside the AccordionHeaderMainContainerStyled component in two places within the AccordionStandAloneComponent function.

Author: Hector Arce De Las Heras

src/components/accordion/accordionStandAlone.tsx

@@ -149,6 +149,14 @@ const AccordionStandAloneComponent = (
             <AccordionHeaderTitleHeadlineStyled as={props.triggerComponent}>
               {renderTitle()}
             </AccordionHeaderTitleHeadlineStyled>
+            {props.headerRightContent && (
+              <AccordionHeaderRightContentStyled
+                data-testid={`${props.dataTestId}RightContent`}
+                styles={props.styles.headerRightContentContainer}
+              >
+                {props.headerRightContent}
+              </AccordionHeaderRightContentStyled>
+            )}
           </AccordionHeaderMainContainerStyled>
           {props.subHeaderContent && (
             <AccordionSubHeaderContainerStyled
@@ -159,14 +167,6 @@ const AccordionStandAloneComponent = (
             </AccordionSubHeaderContainerStyled>
           )}
         </AccordionHeaderInternalContainerStyled>
-        {props.headerRightContent && (
-          <AccordionHeaderRightContentStyled
-            data-testid={`${props.dataTestId}RightContent`}
-            styles={props.styles.headerRightContentContainer}
-          >
-            {props.headerRightContent}
-          </AccordionHeaderRightContentStyled>
-        )}
       </AccordionHeaderExternalContainerStyled>
       <AccordionContentStyled
         aria-labelledby={TRIGGER_ID}

src/designSystem/kubit/components/accordion/styles.ts

@@ -36,6 +36,7 @@ export const ACCORDION_STYLES: AccordionStylesType<AccordionVariantType> = {
     },
     headerMainContainer: {
       width: '100%',
+      display: 'flex',
     },
     subHeader: {
       margin_top: SPACINGS.spacing_150,