Add word for plural steps to StepperProgress component

Author: Hector Arce De Las Heras

src/components/stepperProgress/__test__/stepperProgress.test.tsx

@@ -12,6 +12,20 @@ const mockProps = {
   maxSteps: 10,
   currentStep: 3,
   variant: 'DEFAULT',
+  prefixAriaLabel: {
+    step: 'step',
+    of: 'of',
+    completed: 'completed',
+    steps: 'steps',
+  },
+};
+
+const mockPropsDefault = {
+  dataTestId: 'testId',
+  ariaLabel: 'Content loading...',
+  maxSteps: 10,
+  currentStep: 3,
+  variant: 'DEFAULT',
 };
 
 describe('StepperProgress component', () => {
@@ -28,6 +42,13 @@ describe('StepperProgress component', () => {
   it('Should have a helper text', () => {
     renderProvider(<StepperProgress {...mockProps} />);
 
+    const helpTextContent = `${mockProps.currentStep} steps of ${mockProps.maxSteps} completed`;
+    const helpText = screen.getByTestId(mockProps.dataTestId + 'HelpText');
+    expect(helpText.textContent).toBe(helpTextContent);
+  });
+  it('Should have a defaulta configuration', () => {
+    renderProvider(<StepperProgress {...mockPropsDefault} />);
+
     const helpTextContent = `${mockProps.currentStep} steps of ${mockProps.maxSteps} completed`;
     const helpText = screen.getByTestId(mockProps.dataTestId + 'HelpText');
     expect(helpText.textContent).toBe(helpTextContent);

src/components/stepperProgress/stepperProgress.tsx

@@ -1,19 +1,20 @@
 import * as React from 'react';
 
-import { STYLES_NAME } from '@/constants';
 import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
 import { StepperProgressStandAlone } from './stepperProgressStandAlone';
 import { IStepperProgress, IStepperProgressStandAlone, StepperProgressCommonProps } from './types';
 
+const STEPPER_PROGRESS_STYLES = 'STEPPER_PROGRESS_STYLES';
+
 const StepperProgressComponent = React.forwardRef(
   <V extends string | unknown>(
     { initialStep = 0, ctv, ...props }: IStepperProgress<V>,
     ref: React.ForwardedRef<HTMLDivElement> | undefined | null
   ): JSX.Element => {
     const styles = useStyles<StepperProgressCommonProps, V>(
-      STYLES_NAME.STEPPER_PROGRESS,
+      STEPPER_PROGRESS_STYLES,
       props.variant,
       ctv
     );

src/components/stepperProgress/stepperProgressStandAlone.tsx

@@ -28,6 +28,7 @@ const StepperProgressStandAloneComponent = (
       step: 'step',
       of: 'of',
       completed: 'completed',
+      steps: 'steps',
     },
   }: IStepperProgressStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
@@ -37,7 +38,7 @@ const StepperProgressStandAloneComponent = (
   const uniqueId = useId('stepperProgress');
   const stepperProgressId = id ?? uniqueId;
 
-  prefixAriaLabel.step = _currentStep === 1 ? 'step' : 'steps';
+  prefixAriaLabel.step = _currentStep === 1 ? prefixAriaLabel.step : prefixAriaLabel.steps;
 
   return (
     <StepperProgressContainerStyled ref={ref} styles={styles}>
@@ -56,9 +57,9 @@ const StepperProgressStandAloneComponent = (
         styles={styles}
       >
         <Text component={TextComponentType.SPAN} customTypography={styles.currentStep}>
-          {`${_currentStep} ${prefixAriaLabel?.step} `}
+          {`${_currentStep} ${prefixAriaLabel?.step || ''} `}
           <Text component={TextComponentType.SPAN} customTypography={styles.maxStep}>
-            {`${prefixAriaLabel?.of} ${maxSteps} ${prefixAriaLabel?.completed}`}
+            {`${prefixAriaLabel?.of || ''} ${maxSteps} ${prefixAriaLabel?.completed || ''}`}
           </Text>
         </Text>
       </StepperProgressHelpText>

src/components/stepperProgress/stories/stepperProgress.stories.tsx

@@ -30,6 +30,7 @@ export const StepperProgress: Story = {
       step: 'step',
       of: 'of',
       completed: 'completed',
+      steps: 'steps',
     },
     themeArgs: themesObject[themeSelected][STYLES_NAME.STEPPER_PROGRESS],
   },

src/components/stepperProgress/types/stepperProgress.ts

@@ -12,7 +12,7 @@ export interface IStepperProgressStandAlone extends IStepperProgressStyled {
   ariaLabel?: string;
   initialStep: number;
   maxSteps: number;
-  prefixAriaLabel?: { step: string; of: string; completed?: 'completed' };
+  prefixAriaLabel?: { step?: string; of?: string; completed?: string; steps?: string };
   currentStep: number;
 }