New props to NavigationCard

Include props url and component to change the component of NavigationCard between Link or Button

Author: Kubit

src/components/navigationCard/__tests__/navigationCard.test.tsx

@@ -7,6 +7,7 @@ import { ICONS, ILLUSTRATIONS } from '@/assets';
 import { DecorativePropsType, DecorativeType } from '@/components/decorativeElement';
 import { IIconHighlighted, IconHighlightedSizeType } from '@/components/iconHighlighted';
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+import { ROLES } from '@/types';
 
 import { NavigationCard } from '../index';
 
@@ -175,4 +176,16 @@ describe('NavigationCard component', () => {
 
     expect(iconHighlighted).toBeInTheDocument();
   });
+
+  it('When no url is specified, the rendered element is a button', async () => {
+    const { url, ..._mockProps } = mockProps;
+    const { container } = renderProvider(<NavigationCard {..._mockProps} variant="PRIMARY_ICON" />);
+
+    const navigationCard = screen.getByRole(ROLES.BUTTON);
+    expect(navigationCard).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
 });

src/components/navigationCard/fragments/navigationCardInfo.tsx

@@ -19,6 +19,7 @@ import {
 
 interface INavigationCardInfo {
   styles: NavigationCardStylesPropsType;
+  innerContainersComponent?: 'div' | 'span';
   title?: NavigationCardTextType;
   description?: NavigationCardTextType;
   tag?: NavigationCardTagType;
@@ -28,12 +29,17 @@ interface INavigationCardInfo {
 }
 
 export const NavigationCardInfo = (props: INavigationCardInfo): JSX.Element => (
-  <NavigationCardContentStyled>
+  <NavigationCardContentStyled as={props.innerContainersComponent}>
     <NavigationCardLinesTextStyled
+      as={props.innerContainersComponent}
       lines={props.styles.title?.[props.device]?.linesNumber ?? props.styles.title?.linesNumber}
     >
       <Text
-        component={props.styles.title?.[props.device]?.component ?? props.styles.title?.component}
+        component={
+          props.styles.title?.[props.device]?.component ??
+          props.styles.title?.component ??
+          TextComponentType.SPAN
+        }
         customTypography={props.styles.title}
         dataTestId={`${props.dataTestId}Text`}
         decoration={TextDecorationType.NONE}
@@ -43,8 +49,12 @@ export const NavigationCardInfo = (props: INavigationCardInfo): JSX.Element => (
       </Text>
     </NavigationCardLinesTextStyled>
     {props.description && (
-      <NavigationCardDescriptionContainerStyled styles={props.styles}>
+      <NavigationCardDescriptionContainerStyled
+        as={props.innerContainersComponent}
+        styles={props.styles}
+      >
         <NavigationCardLinesTextStyled
+          as={props.innerContainersComponent}
           lines={
             props.styles.description?.[props.device]?.linesNumber ??
             props.styles.description?.linesNumber
@@ -63,7 +73,7 @@ export const NavigationCardInfo = (props: INavigationCardInfo): JSX.Element => (
       </NavigationCardDescriptionContainerStyled>
     )}
     {props.tag && props.styles.containerExpandedContent && (
-      <NavigationCardTagContainer styles={props.styles}>
+      <NavigationCardTagContainer as={props.innerContainersComponent} styles={props.styles}>
         <Tag
           dataTestId={`${props.dataTestId}Tag`}
           option={props.styles.tag?.option}

src/components/navigationCard/navigationCard.tsx

@@ -11,7 +11,7 @@ import { INavigationCard, INavigationCardStandAlone, NavigationCardStylesPropsTy
 const NavigationCardComponent = React.forwardRef(
   <V extends string | unknown>(
     { variant, ctv, ...props }: INavigationCard<V>,
-    ref: React.ForwardedRef<HTMLAnchorElement> | undefined | null
+    ref: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement> | undefined | null
   ): JSX.Element => {
     const styles = useStyles<NavigationCardStylesPropsType, V>(
       STYLES_NAME.NAVIGATION_CARD,
@@ -36,7 +36,7 @@ NavigationCardComponent.displayName = 'NavigationCardComponent';
 
 const NavigationCardBoundary = <V extends string | unknown>(
   props: INavigationCard<V>,
-  ref: React.ForwardedRef<HTMLAnchorElement> | undefined | null
+  ref: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement> | undefined | null
 ): JSX.Element => (
   <ErrorBoundary
     fallBackComponent={
@@ -51,7 +51,7 @@ const NavigationCardBoundary = <V extends string | unknown>(
 
 const NavigationCard = React.forwardRef(NavigationCardBoundary) as <V extends string | unknown>(
   props: React.PropsWithChildren<INavigationCard<V>> & {
-    ref?: React.ForwardedRef<HTMLAnchorElement> | undefined | null;
+    ref?: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement> | undefined | null;
   }
 ) => ReturnType<typeof NavigationCardBoundary>;
 

src/components/navigationCard/navigationCardStandAlone.tsx

@@ -2,9 +2,10 @@ import * as React from 'react';
 
 import { DecorativeElement } from '@/components/decorativeElement';
 import { ElementOrIcon } from '@/components/elementOrIcon';
-import { Text } from '@/components/text';
+import { Text, TextComponentType } from '@/components/text';
 import { useId } from '@/hooks';
 
+import { ButtonType } from '../button';
 import { NavigationCardInfo } from './fragments';
 import { buildProps } from './helpers';
 import {
@@ -17,8 +18,8 @@ import {
 import { INavigationCardStandAlone } from './types';
 
 const NavigationCardStandaloneComponent = (
-  props: INavigationCardStandAlone,
-  ref: React.ForwardedRef<HTMLAnchorElement> | undefined | null
+  { type = ButtonType.BUTTON, ...props }: INavigationCardStandAlone,
+  ref: React.ForwardedRef<HTMLAnchorElement | HTMLButtonElement> | undefined | null
 ): JSX.Element => {
   const infoId = useId('infoId');
 
@@ -29,18 +30,21 @@ const NavigationCardStandaloneComponent = (
     props.dataTestId
   );
 
+  const innerContainersComponent = props.url ? 'div' : 'span';
+
   return (
     // Can not be spread -> styled component breaks
     <NavigationCardStyled
-      ref={ref}
+      ref={ref as React.ForwardedRef<HTMLButtonElement>}
       aria-disabled={props['aria-disabled']}
-      as={props.component}
+      as={props.url ? props.component : 'button'}
       className={props.className}
       dataTestId={props.dataTestId}
       draggable={props.draggable}
       role={props.role}
       styles={props.styles}
       target={props.target}
+      type={props.url ? undefined : type}
       url={props.url}
       onClick={props.onClick}
       onFocus={props.onFocus}
@@ -49,27 +53,44 @@ const NavigationCardStandaloneComponent = (
     >
       <>
         {props.decorative && (
-          <NavigationCardDecorativeContainer marginRight={marginRight} styles={props.styles}>
+          <NavigationCardDecorativeContainer
+            as={innerContainersComponent}
+            marginRight={marginRight}
+            styles={props.styles}
+          >
             <DecorativeElement additionalProps={additionalProps} element={props.decorative} />
           </NavigationCardDecorativeContainer>
         )}
         <NavigationCardInfoContentStyled
+          as={innerContainersComponent}
           id={infoId}
           isExpanded={props.styles.containerExpandedContent}
         >
-          <NavigationCardLeftContentStyled isExpanded={props.styles.containerExpandedContent}>
+          <NavigationCardLeftContentStyled
+            as={innerContainersComponent}
+            isExpanded={props.styles.containerExpandedContent}
+          >
             <NavigationCardInfo
               dataTestId={props.dataTestId}
               description={props.description}
               device={props.device}
+              innerContainersComponent={innerContainersComponent}
               styles={props.styles}
               tag={props.tag}
               title={props.title}
             />
           </NavigationCardLeftContentStyled>
-          <NavigationCardRightContentStyled aria-hidden={true} styles={props.styles}>
+          <NavigationCardRightContentStyled
+            aria-hidden={true}
+            as={innerContainersComponent}
+            styles={props.styles}
+          >
             {props.styles.containerExpandedContent && (
-              <Text customTypography={props.styles.arrowIconText} {...props.arrowIconText}>
+              <Text
+                component={TextComponentType.SPAN}
+                customTypography={props.styles.arrowIconText}
+                {...props.arrowIconText}
+              >
                 {props.arrowIconText?.content}
               </Text>
             )}

src/components/navigationCard/stories/argtypes.ts

@@ -1,3 +1,4 @@
+import { ButtonType } from '@/components/button';
 import { LinkTargetType } from '@/components/link';
 import { CATEGORY_CONTROL } from '@/constants/categoryControl';
 import { IThemeObjectVariants } from '@/designSystem/themesObject';
@@ -92,16 +93,32 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
       },
     },
     url: {
-      description: 'URL (part of the IGenericLink interface)',
+      description:
+        'URL (part of the IGenericLink interface), when no specify, the render component will be a button',
       control: { type: 'text' },
-      type: { name: 'string', required: true },
+      type: { name: 'string' },
       table: {
         type: {
           summary: 'string',
         },
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    tye: {
+      description: 'Type of the button (when no url is specified)',
+      control: { type: 'text' },
+      type: { name: 'string' },
+      table: {
+        defaultValue: {
+          summary: 'ButtonType.BUTTON',
+        },
+        type: {
+          summary: 'ButtonType',
+          detail: Object.keys(ButtonType).join(', '),
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     target: {
       description:
         'The target attribute specifies where to open the linked document (part of the IGenericLink interface)',
@@ -132,7 +149,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
       control: false,
       table: {
         type: {
-          summary: '() => void',
+          summary: 'React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>',
         },
         category: CATEGORY_CONTROL.FUNCTIONS,
       },

src/components/navigationCard/stories/navigationCard.stories.tsx

@@ -120,6 +120,14 @@ export const NavigationCard: Story = {
   },
 };
 
+export const NavigationCardButton: Story = {
+  args: {
+    ...commonArgs,
+    url: undefined,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.NAVIGATION_CARD],
+  },
+};
+
 export const NavigationCardWithCtv: Story = {
   args: {
     ...commonArgs,

src/components/navigationCard/types/navigationCard.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+import { ButtonType } from '@/components/button';
 import { DecorativePropsType } from '@/components/decorativeElement';
 import { IElementOrIcon } from '@/components/elementOrIcon';
 import { ITag } from '@/components/tag';
@@ -24,7 +25,8 @@ export type NavigationCardTagType = Omit<ITag, 'variant' | 'option' | 'children'
   screenReaderText?: string;
 };
 
-export interface INavigationCardStandAlone extends Omit<IGenericLink, 'children' | 'classname'> {
+export interface INavigationCardStandAlone
+  extends Omit<IGenericLink, 'children' | 'classname' | 'url' | 'onClick'> {
   styles: NavigationCardStylesPropsType;
   device: DeviceBreakpointsType;
   component: GenericLinkType;
@@ -34,7 +36,10 @@ export interface INavigationCardStandAlone extends Omit<IGenericLink, 'children'
   tag?: NavigationCardTagType;
   arrowIcon?: IElementOrIcon;
   arrowIconText?: NavigationCardTextType;
+  url?: string;
+  type?: ButtonType;
   dataTestId?: string;
+  onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
 }
 
 export interface INavigationCard<V = undefined extends string ? unknown : string>