Skip to content

Commit 28737c3

Browse files
yoshi6jpyoshi6jp
authored
feat(Pagination): Switch to Join Component (#368)
1 parent 20b6939 commit 28737c3

4 files changed

Lines changed: 174 additions & 20 deletions

File tree

‎src/Join/Join.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,19 +74,19 @@ CustomBorderRadius.args = {}
7474
export const RadioInputsWithBtnStyle: Story<JoinProps> = (args) => {
7575
return (
7676
<Join {...args}>
77-
<Input
77+
<input
7878
className="join-item btn"
7979
type="radio"
8080
name="options"
8181
aria-label="Radio 1"
8282
/>
83-
<Input
83+
<input
8484
className="join-item btn"
8585
type="radio"
8686
name="options"
8787
aria-label="Radio 2"
8888
/>
89-
<Input
89+
<input
9090
className="join-item btn"
9191
type="radio"
9292
name="options"

‎src/Pagination/Pagination.stories.tsx‎

Lines changed: 155 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,163 @@ export default {
1212
export const Default: Story<PaginationProps> = (args) => {
1313
return (
1414
<Pagination {...args}>
15-
<Button>1</Button>
16-
<Button active>2</Button>
17-
<Button>3</Button>
18-
<Button>4</Button>
15+
<Button className="join-item">1</Button>
16+
<Button className="join-item" active>
17+
2
18+
</Button>
19+
<Button className="join-item">3</Button>
20+
<Button className="join-item">4</Button>
1921
</Pagination>
2022
)
2123
}
2224

2325
Default.args = {}
26+
27+
export const Sizes: Story<PaginationProps> = (args) => {
28+
return (
29+
<div className="flex flex-col gap-2 items-center">
30+
<Pagination {...args}>
31+
<Button size="xs" className="join-item">
32+
1
33+
</Button>
34+
<Button size="xs" className="join-item" active>
35+
2
36+
</Button>
37+
<Button size="xs" className="join-item">
38+
3
39+
</Button>
40+
<Button size="xs" className="join-item">
41+
4
42+
</Button>
43+
</Pagination>
44+
45+
<Pagination {...args}>
46+
<Button size="sm" className="join-item">
47+
1
48+
</Button>
49+
<Button size="sm" className="join-item" active>
50+
2
51+
</Button>
52+
<Button size="sm" className="join-item">
53+
3
54+
</Button>
55+
<Button size="sm" className="join-item">
56+
4
57+
</Button>
58+
</Pagination>
59+
60+
<Pagination {...args}>
61+
<Button size="md" className="join-item">
62+
1
63+
</Button>
64+
<Button size="md" className="join-item" active>
65+
2
66+
</Button>
67+
<Button size="md" className="join-item">
68+
3
69+
</Button>
70+
<Button size="md" className="join-item">
71+
4
72+
</Button>
73+
</Pagination>
74+
75+
<Pagination {...args}>
76+
<Button size="lg" className="join-item">
77+
1
78+
</Button>
79+
<Button size="lg" className="join-item" active>
80+
2
81+
</Button>
82+
<Button size="lg" className="join-item">
83+
3
84+
</Button>
85+
<Button size="lg" className="join-item">
86+
4
87+
</Button>
88+
</Pagination>
89+
</div>
90+
)
91+
}
92+
93+
Sizes.args = {}
94+
95+
export const DisabledButton: Story<PaginationProps> = (args) => {
96+
return (
97+
<Pagination {...args}>
98+
<Button className="join-item">1</Button>
99+
<Button className="join-item">2</Button>
100+
<Button className="join-item" disabled>
101+
...
102+
</Button>
103+
<Button className="join-item">99</Button>
104+
<Button className="join-item">100</Button>
105+
</Pagination>
106+
)
107+
}
108+
109+
DisabledButton.args = {}
110+
111+
export const ExtraSmallButtons: Story<PaginationProps> = (args) => {
112+
return (
113+
<Pagination {...args}>
114+
<Button className="join-item">«</Button>
115+
<Button className="join-item">Page 22</Button>
116+
<Button className="join-item">»</Button>
117+
</Pagination>
118+
)
119+
}
120+
121+
ExtraSmallButtons.args = {}
122+
123+
export const NextPrevOutlineButtonsWithEqualWidth: Story<PaginationProps> = (
124+
args
125+
) => {
126+
return (
127+
<Pagination {...args}>
128+
<Button variant="outline" className="join-item">
129+
Previous page
130+
</Button>
131+
<Button variant="outline" className="join-item">
132+
Next
133+
</Button>
134+
</Pagination>
135+
)
136+
}
137+
138+
NextPrevOutlineButtonsWithEqualWidth.args = {
139+
className: 'grid grid-cols-2',
140+
}
141+
142+
export const UsingRadioInputs: Story<PaginationProps> = (args) => {
143+
return (
144+
<Pagination {...args}>
145+
<input
146+
className="join-item btn btn-square"
147+
type="radio"
148+
name="options"
149+
aria-label="1"
150+
defaultChecked={true}
151+
/>
152+
<input
153+
className="join-item btn btn-square"
154+
type="radio"
155+
name="options"
156+
aria-label="2"
157+
/>
158+
<input
159+
className="join-item btn btn-square"
160+
type="radio"
161+
name="options"
162+
aria-label="3"
163+
/>
164+
<input
165+
className="join-item btn btn-square"
166+
type="radio"
167+
name="options"
168+
aria-label="4"
169+
/>
170+
</Pagination>
171+
)
172+
}
173+
174+
UsingRadioInputs.args = {}

‎src/Pagination/Pagination.test.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react'
44
import Button from '../Button'
55
import Pagination from './'
66

7+
const testid = 'pagination'
78
const buttons = [
89
<Button key="1">Button 1</Button>,
910
<Button key="2">Button 2</Button>,
@@ -14,31 +15,33 @@ describe('Pagination', () => {
1415
it('Should render a group of buttons', () => {
1516
render(<Pagination>{buttons}</Pagination>)
1617

17-
expect(screen.getByLabelText('Group of 3 buttons')).toBeInTheDocument()
1818
expect(screen.getAllByRole('button')).toHaveLength(3)
1919
expect(screen.getByText('Button 1')).toBeInTheDocument()
2020
expect(screen.getByText('Button 2')).toBeInTheDocument()
2121
expect(screen.getByText('Button 3')).toBeInTheDocument()
2222
})
2323

2424
it('Should apply additional class namess', () => {
25-
render(<Pagination className="custom-class">{buttons}</Pagination>)
26-
expect(screen.getByLabelText('Group of 3 buttons')).toHaveClass(
27-
'btn-group',
28-
'custom-class'
25+
render(
26+
<Pagination className="custom-class" data-testid={testid}>
27+
{buttons}
28+
</Pagination>
2929
)
30+
expect(screen.getByTestId(testid)).toHaveClass('join', 'custom-class')
3031
})
3132

3233
it('Should apply vertical style when vertical prop is true', () => {
33-
render(<Pagination vertical>{buttons}</Pagination>)
34-
expect(screen.getByLabelText('Group of 3 buttons')).toHaveClass(
35-
'btn-group-vertical'
34+
render(
35+
<Pagination vertical data-testid={testid}>
36+
{buttons}
37+
</Pagination>
3638
)
39+
expect(screen.getByTestId(testid)).toHaveClass('join-vertical')
3740
})
3841

3942
it('Should allow passing extra props', () => {
40-
render(<Pagination data-testid="button-group">{buttons}</Pagination>)
41-
expect(screen.getByTestId('button-group')).toBeInTheDocument()
43+
render(<Pagination data-testid={testid}>{buttons}</Pagination>)
44+
expect(screen.getByTestId(testid)).toBeInTheDocument()
4245
})
4346

4447
it('Should forward the ref to the root element', () => {

‎src/Pagination/Pagination.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import ButtonGroup, { ButtonGroupProps } from '../ButtonGroup'
1+
import Join, { JoinProps } from '../Join'
22

3-
export type PaginationProps = ButtonGroupProps
4-
const Pagination = ButtonGroup
3+
export type PaginationProps = JoinProps
4+
const Pagination = Join
55
export default Pagination

0 commit comments

Comments
 (0)