Add new styles and features to Pagination

Author: Kubit

src/components/pagination/helpers/getMaxCountersNumber.ts

@@ -20,7 +20,7 @@ export const buildstepsNumber = (
 
   let currentPosition = currentStep + 1;
 
-  if (currentPosition >= maxCounters) {
+  if (currentPosition >= maxCounters && maxSteps !== maxCounters) {
     maxCounters--;
     startWith = [1, '...'];
   }

src/components/pagination/pagination.tsx

@@ -22,10 +22,18 @@ const PaginationComponent = React.forwardRef(
 
     const limitCurrentStep = Math.max(0, Math.min(currentStep, maxStepsNumber - 1));
 
+    let paginationCountersNumber = styles.paginationCountersNumber?.[device]?.counters ?? 5;
+
+    if (maxCountersNumber && maxCountersNumber < maxStepsNumber) {
+      paginationCountersNumber = maxCountersNumber;
+    } else {
+      paginationCountersNumber = Math.min(maxStepsNumber, paginationCountersNumber);
+    }
+
     const stepsNumber = buildstepsNumber(
       limitCurrentStep,
       maxStepsNumber,
-      styles.paginationCountersNumber?.[device]?.counters,
+      paginationCountersNumber,
       maxCountersNumber
     );
     const stepActive = stepsNumber.indexOf(limitCurrentStep + 1);

src/components/pagination/stories/argtypes.ts

@@ -24,7 +24,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
     currentStep: {
       control: { type: 'number' },
       type: { name: 'number', required: true },
-      description: 'Indicate the parent current position',
+      description: 'Indicate the parent current position. The max value is maxStepsNumber',
       table: {
         type: {
           summary: 'number',
@@ -33,9 +33,9 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
       },
     },
     maxStepsNumber: {
-      control: { type: 'number' },
+      control: { type: 'number', min: 2 },
       type: { name: 'number', required: true },
-      description: 'Set the max steps number',
+      description: 'Set the max steps number. The min value is 2',
       table: {
         type: {
           summary: 'number',
@@ -46,7 +46,7 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
     maxCountersNumber: {
       control: { type: 'number' },
       type: { name: 'number' },
-      description: 'Set the custom steps number to show',
+      description: 'Set the custom steps number to show. The min value is 2',
       table: {
         type: {
           summary: 'number',

src/components/pagination/stories/pagination.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import * as React from 'react';
+import React, { useEffect } from 'react';
 
 import { ICONS } from '@/assets';
 import { STYLES_NAME } from '@/constants';
@@ -17,6 +17,12 @@ const meta = {
   component: Story,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Pagination is a controlled component. This story is an example of how to use it. To see other examples or modify the component behavior, visit the other stories in Pagination section or change the props in the controls.',
+      },
+    },
   },
   tags: ['autodocs'],
   argTypes: argtypes(variantsObject, themeSelected),
@@ -29,7 +35,13 @@ type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
 
 const StoryWithHooks = args => {
   const [step, setStep] = React.useState(0);
-  const maxSteps = 10;
+  const maxSteps = args.maxStepsNumber ? args.maxStepsNumber : 35;
+
+  useEffect(() => {
+    if (args.currentStep) {
+      setStep(args.currentStep - 1);
+    }
+  }, [args.currentStep]);
 
   const leftEdge = step <= 0;
   const rightEdge = step >= maxSteps;
@@ -80,6 +92,33 @@ export const Pagination = {
       variantsObject[themeSelected].PaginationVariantsTheme || {}
     )[0] as string,
     themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
+    currentStep: 1,
+    maxStepsNumber: 35,
+    maxCountersNumber: 5,
+  },
+};
+
+export const PaginationWithTwoSteps = {
+  args: {
+    variant: Object.values(
+      variantsObject[themeSelected].PaginationVariantsTheme || {}
+    )[0] as string,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
+    currentStep: 1,
+    maxStepsNumber: 2,
+    maxCountersNumber: 2,
+  },
+};
+
+export const PaginationWithFiveSteps = {
+  args: {
+    variant: Object.values(
+      variantsObject[themeSelected].PaginationVariantsTheme || {}
+    )[0] as string,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.PAGINATION],
+    currentStep: 1,
+    maxStepsNumber: 5,
+    maxCountersNumber: 5,
   },
 };