feat(Pagination): add Pagination component aligned with Cyber skin

playroom/frame-component.tsx

@@ -22,6 +22,7 @@ import {
     VIVO_SKIN,
     BLAU_SKIN,
 } from '../src';
+import {CYBER_SKIN} from '../src/community';
 import {Movistar_New as defaultThemeConfig} from './themes';
 
 import type {ThemeConfig} from '../src';
@@ -62,6 +63,7 @@ const skinToLang: Record<string, string> = {
     [O2_SKIN]: 'en-GB',
     [O2_NEW_SKIN]: 'en-GB',
     [ESIMFLAG_SKIN]: 'es-ES',
+    [CYBER_SKIN]: 'es-ES',
 };
 
 const App = ({children, skinName}: {children: React.ReactNode; skinName: string}) => {

playroom/snippets.tsx

@@ -4583,6 +4583,27 @@ export default [
         name: 'NavigationBreadcrumbs',
         code: '<NavigationBreadcrumbs title="Facturas" breadcrumbs={[{title: "Cuenta", url: "/consumptions"}]} />',
     },
+    {
+        group: 'Pagination',
+        name: 'Pagination',
+        code: `
+            <Pagination
+                totalPages={10}
+                currentPage={getState("paginationPage", 3)}
+                onChange={(page) => setState("paginationPage", page)}
+            />`,
+    },
+    {
+        group: 'Pagination',
+        name: 'Pagination iconOnly',
+        code: `
+            <Pagination
+                totalPages={10}
+                mode="iconOnly"
+                currentPage={getState("paginationIconPage", 3)}
+                onChange={(page) => setState("paginationIconPage", page)}
+            />`,
+    },
     ...titlesSnippets,
     ...emptyStatesGroup,
     {

playroom/themes.tsx

@@ -16,10 +16,15 @@ export const O2_New: ThemeConfig = {...themes.O2_New, ...common};
 export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common};
 export const Blau: ThemeConfig = {...themes.Blau, ...common};
 export const Esimflag: ThemeConfig = {...themes.Esimflag, ...common};
+export const Community_Cyber: ThemeConfig = {...themes.Cyber, ...common};
 
 export const Movistar_New_iOS: ThemeConfig = {...Movistar_New, platformOverrides: {platform: 'ios'}};
 export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}};
 export const O2_New_iOS: ThemeConfig = {...O2_New, platformOverrides: {platform: 'ios'}};
 export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}};
 export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}};
 export const Esimflag_iOS: ThemeConfig = {...Esimflag, platformOverrides: {platform: 'ios'}};
+export const Community_Cyber_iOS: ThemeConfig = {
+    ...Community_Cyber,
+    platformOverrides: {platform: 'ios'},
+};

src/__screenshot_tests__/pagination-screenshot-test.tsx

@@ -0,0 +1,58 @@
+import {openStoryPage, screen} from '../test-utils';
+
+import type {Device, StoryArgs} from '../test-utils';
+
+const STORY_ID = 'components-pagination--default';
+
+const CASES: ReadonlyArray<{name: string; args: StoryArgs}> = [
+    {name: 'Default', args: {totalPages: 9, currentPage: 3}},
+    {name: 'FirstPage', args: {totalPages: 10, currentPage: 1}},
+    {name: 'LastPage', args: {totalPages: 10, currentPage: 10}},
+    {name: 'WithEllipsis', args: {totalPages: 20, currentPage: 10}},
+    {
+        name: 'NavOnlyResponsive',
+        args: {totalPages: 10, currentPage: 5, hidePageList: true},
+    },
+    {
+        name: 'PagesOnly',
+        args: {totalPages: 5, currentPage: 3, hideNavigationControls: true},
+    },
+    {
+        name: 'IconOnlyControls',
+        args: {totalPages: 10, currentPage: 5, mode: 'iconOnly', hidePageList: true},
+    },
+    {
+        name: 'NextChapterLink',
+        args: {
+            totalPages: 10,
+            currentPage: 1,
+            hidePageList: true,
+            navLeftLabel: 'Anterior capítulo',
+            navRightLabel: 'Siguiente capítulo',
+        },
+    },
+];
+
+const DEVICES: ReadonlyArray<Device> = ['DESKTOP', 'MOBILE_IOS'];
+
+const TABLE = CASES.flatMap((c) => DEVICES.map((device) => ({...c, device})));
+
+test.each(TABLE)('Pagination $name - $device', async ({args, device}) => {
+    await openStoryPage({id: STORY_ID, device, args});
+
+    const pagination = await screen.findByTestId('Pagination');
+    const image = await pagination.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test('Pagination CompactView - MOBILE_IOS_SMALL', async () => {
+    await openStoryPage({
+        id: STORY_ID,
+        device: 'MOBILE_IOS_SMALL',
+        args: {totalPages: 50, currentPage: 24},
+    });
+
+    const pagination = await screen.findByTestId('Pagination');
+    const image = await pagination.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

src/__stories__/pagination-story.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {Pagination} from '..';
+
+export default {
+    title: 'Components/Pagination',
+    argTypes: {
+        mode: {
+            options: ['default', 'iconOnly'],
+            control: {type: 'select'},
+        },
+        totalPages: {control: {type: 'number'}},
+        currentPage: {control: {type: 'number'}},
+        dynamicCount: {control: {type: 'number'}},
+        showEllipsis: {control: {type: 'boolean'}},
+        hideNavigationControls: {control: {type: 'boolean'}},
+        hidePageList: {control: {type: 'boolean'}},
+        disabled: {control: {type: 'boolean'}},
+        navLeftLabel: {control: {type: 'text'}},
+        navRightLabel: {control: {type: 'text'}},
+    },
+};
+
+type Args = {
+    totalPages: number;
+    currentPage: number;
+    dynamicCount: number;
+    showEllipsis: boolean;
+    hideNavigationControls: boolean;
+    hidePageList: boolean;
+    disabled: boolean;
+    mode: 'default' | 'iconOnly';
+    navLeftLabel: string;
+    navRightLabel: string;
+};
+
+export const Default: StoryComponent<Args> = ({
+    totalPages,
+    currentPage,
+    dynamicCount,
+    showEllipsis,
+    hideNavigationControls,
+    hidePageList,
+    disabled,
+    mode,
+    navLeftLabel,
+    navRightLabel,
+}) => (
+    <Pagination
+        totalPages={totalPages}
+        currentPage={currentPage}
+        dynamicCount={dynamicCount}
+        showEllipsis={showEllipsis}
+        hideNavigationControls={hideNavigationControls}
+        hidePageList={hidePageList}
+        disabled={disabled}
+        mode={mode}
+        navLeftLabel={navLeftLabel || undefined}
+        navRightLabel={navRightLabel || undefined}
+    />
+);
+
+Default.storyName = 'Pagination';
+Default.args = {
+    totalPages: 9,
+    currentPage: 3,
+    dynamicCount: 3,
+    showEllipsis: true,
+    hideNavigationControls: false,
+    hidePageList: false,
+    disabled: false,
+    mode: 'default',
+    navLeftLabel: '',
+    navRightLabel: '',
+};

src/__tests__/pagination-test.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ThemeContextProvider from '../theme-context-provider';
+import {makeTheme} from './test-utils';
+import Pagination, {getPaginationItems} from '../pagination';
+
+test('renders pagination navigation landmark', () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Pagination totalPages={5} defaultPage={1} />
+        </ThemeContextProvider>
+    );
+
+    expect(screen.getByRole('navigation', {name: 'Paginación - Página 1 de 5'})).toBeInTheDocument();
+});
+
+test('does not render when there is a single page', () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Pagination totalPages={1} />
+        </ThemeContextProvider>
+    );
+
+    expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
+});
+
+test('calls onChange when a page button is clicked (uncontrolled)', async () => {
+    const onChange = jest.fn();
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Pagination totalPages={5} defaultPage={1} onChange={onChange} />
+        </ThemeContextProvider>
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Ir a la página 3'}));
+
+    expect(onChange).toHaveBeenCalledWith(3);
+});
+
+test('calls onChange when Next is clicked', async () => {
+    const onChange = jest.fn();
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Pagination totalPages={5} defaultPage={2} onChange={onChange} />
+        </ThemeContextProvider>
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Página siguiente'}));
+
+    expect(onChange).toHaveBeenCalledWith(3);
+});
+
+test('does not change page when disabled', async () => {
+    const onChange = jest.fn();
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Pagination totalPages={5} defaultPage={1} onChange={onChange} disabled />
+        </ThemeContextProvider>
+    );
+
+    await userEvent.click(screen.getByRole('button', {name: 'Ir a la página 3'}));
+
+    expect(onChange).not.toHaveBeenCalled();
+});
+
+test('keeps Previous and Next visible at page boundaries (aria-disabled)', async () => {
+    const onChange = jest.fn();
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Pagination totalPages={5} defaultPage={1} onChange={onChange} />
+        </ThemeContextProvider>
+    );
+
+    // At the first page, Previous is rendered but marked aria-disabled and
+    // clicking it should not change pages. Next stays interactive.
+    const prev = screen.getByRole('button', {name: 'Página anterior'});
+    const next = screen.getByRole('button', {name: 'Página siguiente'});
+    expect(prev).toHaveAttribute('aria-disabled', 'true');
+    expect(next).not.toHaveAttribute('aria-disabled');
+
+    await userEvent.click(prev);
+    expect(onChange).not.toHaveBeenCalled();
+});
+
+test('honors controlled currentPage', () => {
+    render(
+        <ThemeContextProvider theme={makeTheme()}>
+            <Pagination totalPages={5} currentPage={3} />
+        </ThemeContextProvider>
+    );
+
+    // The current page is rendered as an aria-disabled button so VoiceOver can
+    // still land on it and announce "Página 3, página actual" — but the
+    // "Ir a la página 3" navigation button is absent (it's not navigable).
+    expect(screen.queryByRole('button', {name: 'Ir a la página 3'})).not.toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Página 3, página actual'})).toBeInTheDocument();
+    expect(screen.getByRole('button', {name: 'Ir a la página 2'})).toBeInTheDocument();
+});
+
+describe('getPaginationItems', () => {
+    test('returns an empty array for a single page', () => {
+        expect(getPaginationItems({totalPages: 1, currentPage: 1})).toEqual([]);
+    });
+
+    test('returns all pages when total fits without ellipsis', () => {
+        const items = getPaginationItems({totalPages: 5, currentPage: 3});
+        expect(items.filter((i) => i.type === 'ellipsis')).toHaveLength(0);
+        expect(items).toHaveLength(5);
+    });
+
+    test('inserts ellipsis when middle pages are skipped', () => {
+        const items = getPaginationItems({totalPages: 20, currentPage: 10});
+        expect(items.some((i) => i.type === 'ellipsis')).toBe(true);
+        expect(items[0]).toMatchObject({type: 'page', page: 1});
+        expect(items[items.length - 1]).toMatchObject({type: 'page', page: 20});
+    });
+});

src/index.tsx

@@ -63,6 +63,7 @@ export {default as Inline} from './inline';
 export {default as HorizontalScroll} from './horizontal-scroll';
 export {default as Stepper} from './stepper';
 export {ProgressBar, ProgressBarStepped} from './progress-bar';
+export {default as Pagination} from './pagination';
 export {default as Meter} from './meter';
 export {Rating, InfoRating} from './rating';
 export {VerticalMosaic, HorizontalMosaic} from './mosaic';