Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(pagination-links): added props for first and last. changed carets… #1410

Merged
merged 1 commit into from Feb 22, 2019
Merged

feat(pagination-links): added props for first and last. changed carets… #1410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/lib/Components/PaginationPage.js
View file
Open in desktop
Expand Up @@ -58,6 +58,8 @@ PaginationLink.propTypes = {
cssModule: PropTypes.object,
next: PropTypes.bool,
previous: PropTypes.bool,
first: PropTypes.bool,
last: PropTypes.bool,
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
'aria-label': PropTypes.string
};
Expand Down
6 changes: 6 additions & 0 deletions docs/lib/examples/Pagination.js
View file
Open in desktop
Expand Up @@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
<Pagination aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
Expand Down Expand Up @@ -36,6 +39,9 @@ export default class Example extends React.Component {
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Expand Down
6 changes: 6 additions & 0 deletions docs/lib/examples/PaginationSizingLarge.js
View file
Open in desktop
Expand Up @@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
<Pagination size="lg" aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
Expand All @@ -26,6 +29,9 @@ export default class Example extends React.Component {
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Expand Down
6 changes: 6 additions & 0 deletions docs/lib/examples/PaginationSizingSmall.js
View file
Open in desktop
Expand Up @@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
<Pagination size="sm" aria-label="Page navigation example">
<PaginationItem>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink previous href="#" />
</PaginationItem>
Expand All @@ -26,6 +29,9 @@ export default class Example extends React.Component {
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Expand Down
6 changes: 6 additions & 0 deletions docs/lib/examples/PaginationState.js
View file
Open in desktop
Expand Up @@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
<Pagination aria-label="Page navigation example">
<PaginationItem disabled>
<PaginationLink first href="#" />
</PaginationItem>
<PaginationItem disabled>
<PaginationLink previous href="#" />
</PaginationItem>
Expand Down Expand Up @@ -36,6 +39,9 @@ export default class Example extends React.Component {
<PaginationItem>
<PaginationLink next href="#" />
</PaginationItem>
<PaginationItem>
<PaginationLink last href="#" />
</PaginationItem>
</Pagination>
);
}
Expand Down
17 changes: 15 additions & 2 deletions src/PaginationLink.js
View file
Open in desktop
Expand Up @@ -10,6 +10,8 @@ const propTypes = {
cssModule: PropTypes.object,
next: PropTypes.bool,
previous: PropTypes.bool,
first: PropTypes.bool,
last: PropTypes.bool,
tag: tagPropType,
};

Expand All @@ -23,6 +25,8 @@ const PaginationLink = (props) => {
cssModule,
next,
previous,
first,
last,
tag: Tag,
...attributes
} = props;
Expand All @@ -37,13 +41,22 @@ const PaginationLink = (props) => {
defaultAriaLabel = 'Previous';
} else if (next) {
defaultAriaLabel = 'Next';
} else if (first) {
defaultAriaLabel = 'First';
} else if (last) {
defaultAriaLabel = 'Last';
}

const ariaLabel = props['aria-label'] || defaultAriaLabel;

let defaultCaret;
if (previous) {
defaultCaret = '\u00ab';
defaultCaret = '\u2039';
} else if (next) {
defaultCaret = '\u203A';
} else if (first) {
defaultCaret = '\u00ab';
} else if (last) {
defaultCaret = '\u00bb';
}

Expand All @@ -56,7 +69,7 @@ const PaginationLink = (props) => {
Tag = 'button';
}

if (previous || next) {
if (previous || next || first || last) {
children = [
<span
aria-hidden="true"
Expand Down
41 changes: 37 additions & 4 deletions src/__tests__/PaginationLink.spec.js
View file
Open in desktop
Expand Up @@ -31,31 +31,31 @@ describe('PaginationLink', () => {
const wrapper = shallow(<PaginationLink previous />);

expect(wrapper.prop('aria-label')).toBe('Previous');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00ab');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u2039');
expect(wrapper.find('.sr-only').text()).toBe('Previous');
});

it('should render next', () => {
const wrapper = shallow(<PaginationLink next />);

expect(wrapper.prop('aria-label')).toBe('Next');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00bb');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u203A');
expect(wrapper.find('.sr-only').text()).toBe('Next');
});

it('should render default previous caret with children as an empty array', () => {
const wrapper = shallow(<PaginationLink previous children={[]} />);

expect(wrapper.prop('aria-label')).toBe('Previous');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00ab');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u2039');
expect(wrapper.find('.sr-only').text()).toBe('Previous');
});

it('should render default next caret with children as an empty array', () => {
const wrapper = shallow(<PaginationLink next children={[]} />);

expect(wrapper.prop('aria-label')).toBe('Next');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00bb');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u203A');
expect(wrapper.find('.sr-only').text()).toBe('Next');
});

Expand All @@ -77,4 +77,37 @@ describe('PaginationLink', () => {

expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('Yo');
});

it('should render first', () => {
const wrapper = shallow(<PaginationLink first />);

expect(wrapper.prop('aria-label')).toBe('First');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00ab');
expect(wrapper.find('.sr-only').text()).toBe('First');
});

it('should render last', () => {
const wrapper = shallow(<PaginationLink last />);

expect(wrapper.prop('aria-label')).toBe('Last');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00bb');
expect(wrapper.find('.sr-only').text()).toBe('Last');
});

it('should render default first caret with children as an empty array', () => {
const wrapper = shallow(<PaginationLink first children={[]} />);

expect(wrapper.prop('aria-label')).toBe('First');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00ab');
expect(wrapper.find('.sr-only').text()).toBe('First');
});

it('should render default last caret with children as an empty array', () => {
const wrapper = shallow(<PaginationLink last children={[]} />);

expect(wrapper.prop('aria-label')).toBe('Last');
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00bb');
expect(wrapper.find('.sr-only').text()).toBe('Last');
});

});