nodejs.org/packages/ui-components/src/Common/BasePagination/index.stories.tsx at 6bb7b42c09869ad1d4dc7ffb855dccf0c26828de · nodejs/nodejs.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import type { Meta as MetaObj, StoryObj } from '@storybook/react';

import BasePagination from '#ui/Common/BasePagination';

type Story = StoryObj<typeof BasePagination>;
type Meta = MetaObj<typeof BasePagination>;

export const Default: Story = {
  args: {
    currentPage: 1,
    currentPageSiblingsCount: 1,
    pages: [{ url: '1' }, { url: '2' }, { url: '3' }],
    getPageLabel: value => `Page: ${value}`,
    labels: {
      aria: 'Aria',
      prevAria: 'Previous Aria',
      prev: 'Previous',
      nextAria: 'Next Aria',
      next: 'Next',
    },
  },
};

export const LeftEllipsis: Story = {
  args: {
    ...Default.args,
    currentPage: 5,
    pages: [
      { url: '1' },
      { url: '2' },
      { url: '3' },
      { url: '4' },
      { url: '5' },
      { url: '6' },
      { url: '7' },
      { url: '8' },
    ],
  },
};

export const RightEllipsis: Story = {
  args: {
    ...LeftEllipsis.args,
    currentPage: 3,
  },
};

export const TwoEllipses: Story = {
  args: {
    ...Default.args,
    currentPage: 5,
    pages: [
      { url: '1' },
      { url: '2' },
      { url: '3' },
      { url: '4' },
      { url: '5' },
      { url: '6' },
      { url: '7' },
      { url: '8' },
      { url: '9' },
      { url: '10' },
    ],
  },
};

export default { component: BasePagination } as Meta;