Add NavigationRow component

Author: Hector Arce De Las Heras

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

@@ -0,0 +1,74 @@
+import userEvent from '@testing-library/user-event';
+
+import { screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { axe } from 'jest-axe';
+
+import { IconHighlightedSizeType, IconHighlightedType } from '@/components/iconHighlighted';
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+
+import { NavigationRow } from '../index';
+
+const mockProps = {
+  variant: 'DEFAULT',
+  altText: 'NavigationRow',
+  text: { content: 'text' },
+  arrowIcon: { icon: 'RIGHTICON', altText: 'arrowIconAltText' },
+};
+
+describe('NavigationRow component', () => {
+  it('Should show component', async () => {
+    const { container } = renderProvider(<NavigationRow {...mockProps} />);
+    const text = screen.getByText(mockProps.text.content);
+    expect(text).toBeInTheDocument();
+    const arrowIcon = screen.getByLabelText(mockProps.arrowIcon.altText);
+    expect(arrowIcon).toBeInTheDocument();
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Should call onClick function when provided', async () => {
+    const onClick = jest.fn();
+    renderProvider(<NavigationRow {...mockProps} onClick={onClick} />);
+    const navigationRow = screen.getByTestId('NavigationRow');
+    await userEvent.click(navigationRow);
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('Should show component with description', () => {
+    renderProvider(<NavigationRow {...mockProps} description={{ content: 'Description' }} />);
+    expect(screen.getByText('Description')).toBeInTheDocument();
+  });
+
+  it('Should show component with decorativeIcon', () => {
+    renderProvider(
+      <NavigationRow
+        {...mockProps}
+        decorativeIcon={{ icon: 'LEFTARROW', altText: 'decorativeIconAltText' }}
+        description={{ content: 'Description' }}
+      />
+    );
+    const decorativeIcon = screen.getByLabelText('decorativeIconAltText');
+    expect(decorativeIcon).toBeDefined();
+  });
+
+  it('Should show component with iconHighlighted', () => {
+    renderProvider(
+      <NavigationRow
+        {...mockProps}
+        decorativeIcon={undefined}
+        description={{ content: 'Description' }}
+        iconHighlighted={{
+          size: IconHighlightedSizeType.EXTRA_SMALL,
+          icon: 'CLOSE',
+          type: IconHighlightedType.INFORMATIVE,
+          altText: 'Alt Text',
+        }}
+      />
+    );
+    const iconHighlighted = screen.getByRole('img', { name: 'Alt Text', hidden: false });
+    expect(iconHighlighted).toBeDefined();
+  });
+});

src/components/navigationRow/index.ts

@@ -0,0 +1,2 @@
+export { NavigationRow } from './navigationRow';
+export * from './types';

src/components/navigationRow/navigationRow.styled.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+import {
+  LineSeparatorLinePropsStylesType,
+  LineSeparatorPositionType,
+} from '@/components/lineSeparator';
+import { getStyles } from '@/utils';
+
+import { INavigationRowStyled } from './types';
+
+type NavigationRowStylesProps = {
+  topLine?: boolean;
+  bottomLine?: boolean;
+  lineSeparatorLineStyles?: LineSeparatorLinePropsStylesType;
+};
+
+export const NavigationRowStyled = styled.button<INavigationRowStyled & NavigationRowStylesProps>`
+  ${({ styles }) => getStyles(styles?.container)};
+  ${({ lineSeparatorLineStyles, topLine }) =>
+    topLine && lineSeparatorLineStyles?.buildLineStyles?.(LineSeparatorPositionType.TOP)}
+  ${({ lineSeparatorLineStyles, bottomLine }) =>
+    bottomLine && lineSeparatorLineStyles?.buildLineStyles?.(LineSeparatorPositionType.BOTTOM)}
+`;
+
+export const TextSectionStyled = styled.span<INavigationRowStyled>`
+  ${({ styles }) => getStyles(styles?.textSectionContainer)}
+`;
+
+export const IconAndIconHighlightedContainerStyled = styled.span<INavigationRowStyled>`
+  ${({ styles }) => getStyles(styles?.iconTextContainer)}
+`;

src/components/navigationRow/navigationRow.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import { LineSeparatorLinePropsStylesType } from '@/components/lineSeparator';
+import { STYLES_NAME } from '@/constants';
+import { useStyles, useStylesV2 } from '@/hooks';
+import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
+
+import { NavigationRowStandalone } from './navigationRowStandAlone';
+import { INavigationRow, INavigationRowStandAlone, NavigationRowStylesPropsType } from './types';
+
+const NavigationRowComponent = React.forwardRef(
+  <V extends string | unknown>(
+    { variant, ctv, extraCt, ...props }: INavigationRow<V>,
+    ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
+  ): JSX.Element => {
+    const styles = useStyles<NavigationRowStylesPropsType, V>(
+      STYLES_NAME.NAVIGATION_ROW,
+      variant,
+      ctv
+    );
+    const lineSeparatorLineStyles = useStylesV2<LineSeparatorLinePropsStylesType>({
+      styleName: STYLES_NAME.LINE_SEPARATOR,
+      variantName: styles.lineSeparatorLineVariant,
+      customTokens: extraCt,
+      isOptional: true,
+    });
+
+    return (
+      <NavigationRowStandalone
+        ref={ref}
+        lineSeparatorLineStyles={lineSeparatorLineStyles}
+        styles={styles}
+        {...props}
+      />
+    );
+  }
+);
+NavigationRowComponent.displayName = 'NavigationRowComponent';
+
+const NavigationRowBoundary = <V extends string | unknown>(
+  props: INavigationRow<V>,
+  ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
+): JSX.Element => (
+  <ErrorBoundary
+    fallBackComponent={
+      <FallbackComponent>
+        <NavigationRowStandalone {...(props as unknown as INavigationRowStandAlone)} ref={ref} />
+      </FallbackComponent>
+    }
+  >
+    <NavigationRowComponent {...props} ref={ref} />
+  </ErrorBoundary>
+);
+
+const NavigationRow = React.forwardRef(NavigationRowBoundary) as <V extends string | unknown>(
+  props: React.PropsWithChildren<INavigationRow<V>> & {
+    ref?: React.ForwardedRef<HTMLButtonElement> | undefined | null;
+  }
+) => ReturnType<typeof NavigationRowBoundary>;
+
+export { NavigationRow };

src/components/navigationRow/navigationRowStandAlone.tsx

@@ -0,0 +1,82 @@
+import React, { forwardRef } from 'react';
+
+import { ButtonType } from '@/components/button';
+import { ElementOrIcon } from '@/components/elementOrIcon';
+import { Text, TextComponentType } from '@/components/text';
+
+import { IconHighlighted } from '../iconHighlighted';
+import {
+  IconAndIconHighlightedContainerStyled,
+  NavigationRowStyled,
+  TextSectionStyled,
+} from './navigationRow.styled';
+import { INavigationRowStandAlone } from './types';
+
+const NavigationRowStandaloneComponent = (
+  {
+    dataTestId = 'NavigationRow',
+    topLine = false,
+    bottomLine = false,
+    ...props
+  }: INavigationRowStandAlone,
+  ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
+): JSX.Element => {
+  const iconHighlightedSize = props.iconHighlighted?.size ?? props.styles.iconHighlighted?.size;
+  return (
+    <NavigationRowStyled
+      ref={ref}
+      bottomLine={bottomLine}
+      data-testid={dataTestId}
+      lineSeparatorLineStyles={props.lineSeparatorLineStyles}
+      styles={props.styles}
+      topLine={topLine}
+      type={ButtonType.BUTTON}
+      onClick={props.onClick}
+    >
+      <IconAndIconHighlightedContainerStyled styles={props.styles}>
+        {props.decorativeIcon && !props.iconHighlighted && (
+          <ElementOrIcon
+            customIconStyles={props.styles.decorativeIcon}
+            dataTestId={`${dataTestId}DecorativeIcon`}
+            {...props.decorativeIcon}
+          />
+        )}
+        {props.iconHighlighted && props.styles.iconHighlighted && iconHighlightedSize && (
+          <IconHighlighted
+            backgroundColor={props.styles.iconHighlighted?.backgroundColor}
+            color={props.styles.iconHighlighted?.color}
+            dataTestId={`${dataTestId}IconHighlighted`}
+            variant={props.styles.iconHighlighted?.variant}
+            {...props.iconHighlighted}
+            size={iconHighlightedSize}
+          />
+        )}
+      </IconAndIconHighlightedContainerStyled>
+      <TextSectionStyled styles={props.styles}>
+        <Text
+          component={TextComponentType.SPAN}
+          customTypography={props.styles.text}
+          dataTestId={`${dataTestId}Text`}
+          {...props.text}
+        >
+          {props.text.content}
+        </Text>
+        <Text
+          component={TextComponentType.SPAN}
+          customTypography={props.styles.description}
+          dataTestId={`${dataTestId}Description`}
+          {...props.description}
+        >
+          {props.description?.content}
+        </Text>
+      </TextSectionStyled>
+      <ElementOrIcon
+        customIconStyles={props.styles.arrowIcon}
+        dataTestId={`${dataTestId}ArrowIcon`}
+        {...props.arrowIcon}
+      />
+    </NavigationRowStyled>
+  );
+};
+
+export const NavigationRowStandalone = forwardRef(NavigationRowStandaloneComponent);