feat(pagination): implement component

packages/ods/react/tests/_app/src/components/ods-pagination.tsx

@@ -0,0 +1,10 @@
+import React from 'react-dom/client';
+import { OdsPagination } from 'ods-components-react';
+
+const Pagination = () => {
+  return (
+    <OdsPagination defaultCurrentPage={3} totalPages={21} />
+  );
+};
+
+export default Pagination;

packages/ods/react/tests/e2e/ods-pagination.e2e.ts

@@ -0,0 +1,23 @@
+import type { Page } from 'puppeteer';
+import { goToComponentPage, setupBrowser } from '../setup';
+
+describe('ods-pagination react', () => {
+  const setup = setupBrowser();
+  let page: Page;
+
+  beforeAll(async () => {
+    page = setup().page;
+  });
+
+  beforeEach(async () => {
+    await goToComponentPage(page, 'ods-pagination');
+  });
+
+  it('render the component correctly', async () => {
+    const elem = await page.$('ods-pagination');
+    const boundingBox = await elem?.boundingBox();
+
+    expect(boundingBox?.height).toBeGreaterThan(0);
+    expect(boundingBox?.width).toBeGreaterThan(0);
+  });
+});

packages/ods/src/components/pagination/.gitignore

@@ -0,0 +1,5 @@
+# Local Stencil command generates external ods component build at the root of the project
+# Excluding them is a temporary solution to avoid pushing generated files
+# But the issue may cause main build (ods-component package) to fails, as it detects multiples occurences
+# of the same component and thus you have to delete all those generated dir manually
+*/src/

packages/ods/src/components/pagination/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@ovhcloud/ods-component-pagination",
+  "version": "17.1.0",
+  "private": true,
+  "description": "ODS Pagination component",
+  "main": "dist/index.cjs.js",
+  "collection": "dist/collection/collection-manifest.json",
+  "scripts": {
+    "clean": "rimraf .stencil coverage dist docs-api www",
+    "doc": "typedoc --pretty --plugin ../../../scripts/typedoc-plugin-decorator.js && node ../../../scripts/generate-typedoc-md.js",
+    "lint:scss": "stylelint 'src/components/**/*.scss'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}'",
+    "start": "stencil build --dev --watch --serve",
+    "test:e2e": "stencil test --e2e --config stencil.config.ts",
+    "test:e2e:ci": "tsc --noEmit && stencil test --e2e --ci --runInBand --config stencil.config.ts",
+    "test:spec": "stencil test --spec --config stencil.config.ts --coverage",
+    "test:spec:ci": "tsc --noEmit && stencil test --config stencil.config.ts  --spec --ci --coverage"
+  }
+}

packages/ods/src/components/pagination/src/components/ods-pagination/ods-pagination.scss

@@ -0,0 +1,51 @@
+:host(.ods-pagination) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  li {
+    list-style-type: none;
+    white-space: nowrap;
+  }
+}
+
+.ods-pagination {
+  &__results,
+  &__list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0;
+    list-style-type: none;
+  }
+
+  &__results {
+    gap: 8px;
+  }
+
+  &__list {
+    &__page,
+    &__arrow {
+      display: flex;
+      align-items: center;
+    }
+
+    &__arrow {
+      padding: 0 8px;
+    }
+
+    &__page {
+      &__ellipsis {
+        cursor: not-allowed;
+        pointer-events: auto;
+      }
+
+      &__button::part(button),
+      &__arrow__button::part(button) {
+        display: flex;
+        justify-content: center;
+        width: 2.25rem;
+      }
+    }
+  }
+}