@sb1/ffe-pagination-react 100.8.3 → 100.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +68 -14
  2. package/package.json +9 -9
package/README.md CHANGED
@@ -1,28 +1,82 @@
1
1
  # @sb1/ffe-pagination-react
2
2
 
3
- ## Install
3
+ ## Beskrivelse
4
4
 
5
+ Pagineringskomponent for navigering gjennom sider med innhold.
6
+
7
+ ## Installasjon
8
+
9
+ ```bash
10
+ npm install --save @sb1/ffe-pagination-react
5
11
  ```
6
- npm install --save @sb1/ffe-modals-react
12
+
13
+ ## Bruk
14
+
15
+ Full dokumentasjon: https://sparebank1.github.io/designsystem/
16
+
17
+ Avhengig av `@sb1/ffe-buttons-react`, `@sb1/ffe-dropdown-react` og `@sb1/ffe-icons-react`.
18
+
19
+ ```css
20
+ @import '@sb1/ffe-pagination/css/pagination.css';
7
21
  ```
8
22
 
9
- ## Usage
23
+ ### Eksporterte komponenter og hooks
10
24
 
11
- Full documentation on lists usage is available at https://design.sparebank1.no/komponenter/paginering/.
25
+ ```tsx
26
+ import { Pagination, usePagination } from '@sb1/ffe-pagination-react';
27
+ import type { PaginationProps } from '@sb1/ffe-pagination-react';
28
+ ```
12
29
 
13
- This package depends on `@sb1/ffe-buttons-react`, `@sb1/ffe-dropdown-react` and `@sb1/ffe-icons-react`.
14
- Make sure you import the less-files.
30
+ ## Eksempler
15
31
 
16
- ## Development
32
+ ### Grunnleggende bruk med usePagination hook
17
33
 
18
- To start a local development server, run the following from the designsystem root folder:
34
+ ```tsx
35
+ import { Pagination, usePagination } from '@sb1/ffe-pagination-react';
19
36
 
20
- ```bash
21
- npm install
22
- npm run build
23
- npm start
37
+ function MyComponent() {
38
+ const paginationControls = usePagination(134, 10);
39
+
40
+ return (
41
+ <Pagination
42
+ ariaLabel="Paginering av innhold"
43
+ paginationControls={paginationControls}
44
+ rowsPerPageOptions={[10, 20, 50, 100]}
45
+ />
46
+ );
47
+ }
24
48
  ```
25
49
 
26
- A local instance of `Storybook` with live reloading will run at http://localhost:6006/.
50
+ ### Bruk med tabell og datafiltrering
51
+
52
+ ```tsx
53
+ import { Pagination, usePagination } from '@sb1/ffe-pagination-react';
27
54
 
28
- Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.
55
+ function TableWithPagination() {
56
+ const data = [
57
+ { id: 1, name: 'Anders' },
58
+ { id: 2, name: 'Erik' },
59
+ ];
60
+ const paginationControls = usePagination(data.length, 10);
61
+
62
+ const currentPageData = data.slice(
63
+ paginationControls.pageStart,
64
+ paginationControls.pageStart + paginationControls.currentPageSize,
65
+ );
66
+
67
+ return (
68
+ <>
69
+ <ul>
70
+ {currentPageData.map(item => (
71
+ <li key={item.id}>{item.name}</li>
72
+ ))}
73
+ </ul>
74
+ <Pagination
75
+ ariaLabel="Paginering av tabell"
76
+ paginationControls={paginationControls}
77
+ rowsPerPageOptions={[10, 20, 50]}
78
+ />
79
+ </>
80
+ );
81
+ }
82
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-pagination-react",
3
- "version": "100.8.3",
3
+ "version": "100.9.0",
4
4
  "license": "MIT",
5
5
  "author": "SpareBank 1",
6
6
  "files": [
@@ -24,16 +24,16 @@
24
24
  "test:watch": "ffe-buildtool jest --watch"
25
25
  },
26
26
  "dependencies": {
27
- "@sb1/ffe-buttons-react": "^100.8.3",
28
- "@sb1/ffe-core": "^100.8.3",
29
- "@sb1/ffe-core-react": "^100.8.3",
30
- "@sb1/ffe-dropdown-react": "^100.8.3",
31
- "@sb1/ffe-icons-react": "^100.8.3",
32
- "@sb1/ffe-pagination": "^100.8.3",
27
+ "@sb1/ffe-buttons-react": "^100.9.0",
28
+ "@sb1/ffe-core": "^100.9.0",
29
+ "@sb1/ffe-core-react": "^100.9.0",
30
+ "@sb1/ffe-dropdown-react": "^100.9.0",
31
+ "@sb1/ffe-icons-react": "^100.9.0",
32
+ "@sb1/ffe-pagination": "^100.9.0",
33
33
  "classnames": "^2.5.1"
34
34
  },
35
35
  "devDependencies": {
36
- "@sb1/ffe-buildtool": "^100.8.3",
36
+ "@sb1/ffe-buildtool": "^100.9.0",
37
37
  "eslint": "^9.22.0",
38
38
  "react": "^18.2.0",
39
39
  "react-dom": "^18.2.0"
@@ -44,5 +44,5 @@
44
44
  "publishConfig": {
45
45
  "access": "public"
46
46
  },
47
- "gitHead": "f33cf64a467cb430540d1320e763a4f223a8012c"
47
+ "gitHead": "41f20cf10bec5ebe53036c282690983d2114fb45"
48
48
  }