Include new stepper progress component

Author: Hector Arce De Las Heras

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",

src/components/index.ts

@@ -81,3 +81,4 @@ export * from './dropdownSelected';
 export * from './portal';
 export * from './tagV2';
 export * from './selectorBoxFile';
+export * from './stepperProgress';

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

@@ -0,0 +1,35 @@
+import { screen } from '@testing-library/react';
+import React from 'react';
+
+import { axe } from 'jest-axe';
+import { renderProvider } from 'tests/renderProvider/renderProvider.utility';
+
+import { StepperProgress } from '../index';
+
+const mockProps = {
+  dataTestId: 'testId',
+  ariaLabel: 'Content loading...',
+  maxSteps: 10,
+  currentStep: 3,
+  variant: 'DEFAULT',
+};
+
+describe('StepperProgress component', () => {
+  it('Should be display the component correctly', async () => {
+    const { container } = renderProvider(<StepperProgress {...mockProps} />);
+
+    const stepperProgress = screen.getByTestId(mockProps.dataTestId);
+    expect(stepperProgress).toBeInTheDocument();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+  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);
+  });
+});

src/components/stepperProgress/helpers/__tests__/currentPercentage.test.ts

@@ -0,0 +1,13 @@
+import { currentPercentage } from '../currentPercentage';
+
+describe('currentPercentage', () => {
+  it('currentPercentage default', () => {
+    expect(currentPercentage(1, 0, 2)).toBe(50);
+  });
+  it('currentPercentage with 0', () => {
+    expect(currentPercentage(0, 0, 2)).toBe(0);
+  });
+  it('currentPercentage with 100', () => {
+    expect(currentPercentage(2, 0, 2)).toBe(100);
+  });
+});

src/components/stepperProgress/helpers/currentPercentage.ts

@@ -0,0 +1,9 @@
+export const currentPercentage = (
+  currentStep: number,
+  initialStep: number,
+  maxSteps: number
+): number => {
+  const scaledValue = (currentStep - initialStep) / (maxSteps - initialStep);
+  const percentage = 100 * scaledValue;
+  return Math.round(percentage);
+};

src/components/stepperProgress/index.ts

@@ -0,0 +1,9 @@
+export type {
+  IStepperProgressStyled,
+  IStepperProgressStandAlone,
+  IStepperProgress,
+  StepperProgressCommonProps,
+  StepperProgressStylesType,
+} from './types';
+
+export { StepperProgress } from './stepperProgress';

src/components/stepperProgress/stepperProgress.styled.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+import { getStyles } from '@/utils';
+
+import { IStepperProgressStyled } from './types';
+
+export const StepperProgressContainerStyled = styled.div<IStepperProgressStyled>`
+  ${({ styles }) => getStyles(styles.container)};
+`;
+
+export const StepperProgressStyled = styled.progress<IStepperProgressStyled>`
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  ${({ styles }) => getStyles(styles.progress)};
+
+  &::-webkit-progress-bar {
+    ${({ styles }) => getStyles(styles.progress?.webkitProgressBar)};
+  }
+
+  &::-webkit-progress-value {
+    ${({ styles }) => getStyles(styles.progress?.webkitProgressValue)};
+  }
+
+  ::-moz-progress-bar {
+    ${({ styles }) => getStyles(styles.progress?.mozProgressBar)};
+  }
+`;
+
+export const StepperProgressHelpText = styled.div<IStepperProgressStyled>`
+  ${({ styles }) => getStyles(styles.helpTextContainer)};
+`;

src/components/stepperProgress/stepperProgress.tsx

@@ -0,0 +1,52 @@
+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 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,
+      props.variant,
+      ctv
+    );
+
+    return (
+      <StepperProgressStandAlone ref={ref} initialStep={initialStep} styles={styles} {...props} />
+    );
+  }
+);
+StepperProgressComponent.displayName = 'StepperProgressComponent';
+
+const StepperProgressBoundary = <V extends string | unknown>(
+  props: IStepperProgress<V>,
+  ref: React.ForwardedRef<HTMLDivElement> | undefined | null
+): JSX.Element => (
+  <ErrorBoundary
+    fallBackComponent={
+      <FallbackComponent>
+        <StepperProgressStandAlone
+          {...(props as unknown as IStepperProgressStandAlone)}
+          ref={ref}
+        />
+      </FallbackComponent>
+    }
+  >
+    <StepperProgressComponent {...props} ref={ref} />
+  </ErrorBoundary>
+);
+
+const StepperProgress = React.forwardRef(StepperProgressBoundary) as <V extends string | unknown>(
+  props: React.PropsWithChildren<IStepperProgress<V>> & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
+  }
+) => ReturnType<typeof StepperProgressBoundary>;
+
+export { StepperProgress };

src/components/stepperProgress/stepperProgressStandAlone.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+
+import { Text, TextComponentType } from '@/components/text';
+import { useId } from '@/hooks';
+import { AriaLiveOptionType } from '@/types';
+
+// helpers
+import { currentPercentage } from './helpers/currentPercentage';
+// styles
+import {
+  StepperProgressContainerStyled,
+  StepperProgressHelpText,
+  StepperProgressStyled,
+} from './stepperProgress.styled';
+import { IStepperProgressStandAlone } from './types/stepperProgress';
+
+const maxProgress = 100;
+
+const StepperProgressStandAloneComponent = (
+  {
+    dataTestId,
+    id,
+    styles,
+    initialStep,
+    maxSteps,
+    currentStep,
+    prefixAriaLabel = {
+      step: 'step',
+      of: 'of',
+      completed: 'completed',
+    },
+  }: IStepperProgressStandAlone,
+  ref: React.ForwardedRef<HTMLDivElement> | undefined | null
+): JSX.Element => {
+  const _currentStep = Math.min(Math.max(currentStep, initialStep), maxSteps);
+  const currentProgress = currentPercentage(_currentStep, initialStep, maxSteps);
+  const uniqueId = useId('stepperProgress');
+  const stepperProgressId = id ?? uniqueId;
+
+  prefixAriaLabel.step = _currentStep === 1 ? 'step' : 'steps';
+
+  return (
+    <StepperProgressContainerStyled ref={ref} styles={styles}>
+      <StepperProgressStyled
+        aria-hidden
+        data-testid={dataTestId}
+        id={stepperProgressId}
+        max={maxProgress}
+        styles={styles}
+        value={currentProgress}
+      />
+      <StepperProgressHelpText
+        aria-describedby={stepperProgressId}
+        aria-live={AriaLiveOptionType.POLITE}
+        data-testid={dataTestId + 'HelpText'}
+        styles={styles}
+      >
+        <Text component={TextComponentType.SPAN} customTypography={styles.currentStep}>
+          {`${_currentStep} ${prefixAriaLabel?.step} `}
+          <Text component={TextComponentType.SPAN} customTypography={styles.maxStep}>
+            {`${prefixAriaLabel?.of} ${maxSteps} ${prefixAriaLabel?.completed}`}
+          </Text>
+        </Text>
+      </StepperProgressHelpText>
+    </StepperProgressContainerStyled>
+  );
+};
+
+export const StepperProgressStandAlone = React.forwardRef(StepperProgressStandAloneComponent);

src/components/stepperProgress/stories/argtypes.ts

@@ -0,0 +1,115 @@
+import { CATEGORY_CONTROL } from '@/constants/categoryControl';
+import { IThemeObjectVariants } from '@/designSystem/themesObject';
+import { ArgTypesReturn } from '@/types';
+
+export const argtypes = (
+  variantsObject: IThemeObjectVariants,
+  themeSelected: string
+): ArgTypesReturn => {
+  return {
+    variant: {
+      description: 'Select the component theme',
+      type: { name: 'string', required: true },
+      control: { type: 'select' },
+      options: Object.keys(variantsObject[themeSelected].StepperProgressVariants || {}),
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    maxSteps: {
+      description: 'Max steps numbers. Max value: 10',
+      type: { name: 'number', required: true },
+      control: { type: 'number', min: 0, max: 10 },
+      table: {
+        type: {
+          summary: 'number',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    initialStep: {
+      description: 'Initial Step',
+      type: { name: 'number' },
+      control: { type: 'number' },
+      table: {
+        type: {
+          summary: 'number',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    currentStep: {
+      description: 'Current step number, It shouldnt be greater than maximum value of maxSteps',
+      type: { name: 'number', required: true },
+      control: { type: 'number', min: 0, max: 10 },
+      table: {
+        type: {
+          summary: 'number',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    ariaLabel: {
+      description: 'Aria label text for progress bar',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    prefixAriaLabel: {
+      description: 'Prefixes for creating the visual text',
+      type: { name: '{ step: string; of: string, completed: string }' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: '{ step: string; of: string, completed: string }',
+        },
+        defaultValue: {
+          // eslint-disable-next-line quotes
+          summary: "{ step: 'step', of: 'of', completed: 'completed' }",
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    id: {
+      description: 'Id',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    dataTestId: {
+      description: 'Test id',
+      type: { name: 'string' },
+      control: false,
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.TESTING,
+      },
+    },
+    ctv: {
+      description: 'Object used for update variant styles',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'object',
+        },
+        category: CATEGORY_CONTROL.CUSTOMIZATION,
+      },
+    },
+  };
+};