diff --git a/docs/lib/Components/PaginationPage.js b/docs/lib/Components/PaginationPage.js
index eae50604c..1d5131600 100644
--- a/docs/lib/Components/PaginationPage.js
+++ b/docs/lib/Components/PaginationPage.js
@@ -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
};
diff --git a/docs/lib/examples/Pagination.js b/docs/lib/examples/Pagination.js
index 7e734aca3..a2f413763 100644
--- a/docs/lib/examples/Pagination.js
+++ b/docs/lib/examples/Pagination.js
@@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
+
+
+
@@ -36,6 +39,9 @@ export default class Example extends React.Component {
+
+
+
);
}
diff --git a/docs/lib/examples/PaginationSizingLarge.js b/docs/lib/examples/PaginationSizingLarge.js
index ab8d392c7..faaf355e4 100644
--- a/docs/lib/examples/PaginationSizingLarge.js
+++ b/docs/lib/examples/PaginationSizingLarge.js
@@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
+
+
+
@@ -26,6 +29,9 @@ export default class Example extends React.Component {
+
+
+
);
}
diff --git a/docs/lib/examples/PaginationSizingSmall.js b/docs/lib/examples/PaginationSizingSmall.js
index b96035c68..da302fa05 100644
--- a/docs/lib/examples/PaginationSizingSmall.js
+++ b/docs/lib/examples/PaginationSizingSmall.js
@@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
+
+
+
@@ -26,6 +29,9 @@ export default class Example extends React.Component {
+
+
+
);
}
diff --git a/docs/lib/examples/PaginationState.js b/docs/lib/examples/PaginationState.js
index 9004d52ec..0010458e5 100644
--- a/docs/lib/examples/PaginationState.js
+++ b/docs/lib/examples/PaginationState.js
@@ -5,6 +5,9 @@ export default class Example extends React.Component {
render() {
return (
+
+
+
@@ -36,6 +39,9 @@ export default class Example extends React.Component {
+
+
+
);
}
diff --git a/src/PaginationLink.js b/src/PaginationLink.js
index 1ef1570b8..ea5b27f29 100644
--- a/src/PaginationLink.js
+++ b/src/PaginationLink.js
@@ -10,6 +10,8 @@ const propTypes = {
cssModule: PropTypes.object,
next: PropTypes.bool,
previous: PropTypes.bool,
+ first: PropTypes.bool,
+ last: PropTypes.bool,
tag: tagPropType,
};
@@ -23,6 +25,8 @@ const PaginationLink = (props) => {
cssModule,
next,
previous,
+ first,
+ last,
tag: Tag,
...attributes
} = props;
@@ -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';
}
@@ -56,7 +69,7 @@ const PaginationLink = (props) => {
Tag = 'button';
}
- if (previous || next) {
+ if (previous || next || first || last) {
children = [
{
const wrapper = shallow();
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');
});
@@ -39,7 +39,7 @@ describe('PaginationLink', () => {
const wrapper = shallow();
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');
});
@@ -47,7 +47,7 @@ describe('PaginationLink', () => {
const wrapper = shallow();
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');
});
@@ -55,7 +55,7 @@ describe('PaginationLink', () => {
const wrapper = shallow();
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');
});
@@ -77,4 +77,37 @@ describe('PaginationLink', () => {
expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('Yo');
});
+
+ it('should render first', () => {
+ const wrapper = shallow();
+
+ 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();
+
+ 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();
+
+ 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();
+
+ expect(wrapper.prop('aria-label')).toBe('Last');
+ expect(wrapper.find({ 'aria-hidden': 'true' }).text()).toBe('\u00bb');
+ expect(wrapper.find('.sr-only').text()).toBe('Last');
+ });
+
});