Add decorativeElement prop to navigationRow

Author: Kubit

src/components/navigationCard/navigationCardStandAlone.tsx

@@ -36,7 +36,7 @@ const NavigationCardStandaloneComponent = (
   return (
     // Can not be spread -> styled component breaks
     <NavigationCardStyled
-      ref={ref as any}
+      ref={ref as React.ForwardedRef<HTMLButtonElement>}
       aria-disabled={props['aria-disabled']}
       as={props.url ? props.component : 'button'}
       className={props.className}

src/components/navigationRow/__tests__/navigationRow.test.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 
 import { axe } from 'jest-axe';
 
+import { ElementOrIcon } from '@/components/elementOrIcon';
 import { IconHighlightedSizeType, IconHighlightedType } from '@/components/iconHighlighted';
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 
@@ -71,4 +72,18 @@ describe('NavigationRow component', () => {
     const iconHighlighted = screen.getByRole('img', { name: 'Alt Text', hidden: false });
     expect(iconHighlighted).toBeDefined();
   });
+  it('Should show component with decorativeElement', () => {
+    const decorativeElement = (
+      <ElementOrIcon icon={'ICON_PLACEHOLDER'} altText="decorativeElement" />
+    );
+    renderProvider(
+      <NavigationRow
+        {...mockProps}
+        decorativeElement={decorativeElement}
+        description={{ content: 'Description' }}
+      />
+    );
+    const iconHighlighted = screen.getByRole('img', { name: 'decorativeElement' });
+    expect(iconHighlighted).toBeDefined();
+  });
 });

src/components/navigationRow/navigationRow.styled.ts

@@ -29,3 +29,7 @@ export const TextSectionStyled = styled.span<INavigationRowStyled>`
 export const IconAndIconHighlightedContainerStyled = styled.span<INavigationRowStyled>`
   ${({ styles }) => getStyles(styles?.iconTextContainer)}
 `;
+
+export const DecorativeElementContainerStyled = styled.span<INavigationRowStyled>`
+  ${({ styles }) => getStyles(styles?.decorativeElementContainer)}
+`;

src/components/navigationRow/navigationRowStandAlone.tsx

@@ -7,6 +7,7 @@ import { TextComponentType } from '@/components/text/types/component';
 
 import { IconHighlighted } from '../iconHighlighted';
 import {
+  DecorativeElementContainerStyled,
   IconAndIconHighlightedContainerStyled,
   NavigationRowStyled,
   TextSectionStyled,
@@ -53,6 +54,9 @@ const NavigationRowStandaloneComponent = (
           />
         )}
       </IconAndIconHighlightedContainerStyled>
+      <DecorativeElementContainerStyled styles={props.styles}>
+        {props.decorativeElement}
+      </DecorativeElementContainerStyled>
       <TextSectionStyled styles={props.styles}>
         {props.text && (
           <Text

src/components/navigationRow/stories/argtypes.ts

@@ -54,6 +54,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    decorativeElement: {
+      description: 'Decorative element',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
     iconHighlighted: {
       description: 'Highlighted icon',
       type: { name: 'object' },

src/components/navigationRow/stories/navigationRow.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
 
 import { ICONS } from '@/assets';
+import { ElementOrIcon } from '@/components/elementOrIcon';
 import { STYLES_NAME } from '@/constants';
 import { themesObject, variantsObject } from '@/designSystem/themesObject';
 
@@ -26,7 +28,7 @@ const commonArgs: INavigationRow = {
   text: { content: 'Text' },
   description: { content: 'Lorem ipsum dolor sit amet lorem' },
   arrowIcon: { icon: ICONS.ICON_PLACEHOLDER },
-  decorativeIcon: { icon: ICONS.ICON_PLACEHOLDER },
+  decorativeElement: <ElementOrIcon icon={ICONS.ICON_PLACEHOLDER} altText="decorativeElement" />,
 };
 
 export const NavigationRow: Story = {

src/components/navigationRow/types/navigationRow.ts

@@ -25,8 +25,15 @@ export interface INavigationRowStandAlone {
   description?: NavigationRowTextAndDescriptionType;
   // icons
   arrowIcon: IElementOrIcon;
+  /**
+   * @deprecated this prop will be removed in the next major version. Use decorativeElement to send the IconHighlighted
+   */
   iconHighlighted?: NavigationRowIconHighlightedType;
+  /**
+   * @deprecated this prop will be removed in the next major version. Use decorativeElement to send the ElementOrIcon
+   */
   decorativeIcon?: IElementOrIcon;
+  decorativeElement?: React.ReactNode;
   // lines
   topLine?: boolean;
   bottomLine?: boolean;

src/components/navigationRow/types/navigationRowTheme.ts

@@ -10,9 +10,16 @@ export type NavigationRowStylesPropsType = {
   // description
   descriptionContainer?: CommonStyleType;
   description?: TypographyTypes;
+  decorativeElementContainer?: CommonStyleType;
   // icons
   arrowIcon?: IconTypes;
+  /**
+   * @deprecated remove when deconrativeIcon props is removed in the next major version.
+   */
   decorativeIcon?: IconTypes;
+  /**
+   * @deprecated remove when deconrativeIcon props is removed in the next major version.
+   */
   iconHighlighted?: {
     variant: string;
     color: string;