Skip to content

Commit

Permalink
feat(pagination-links): added props for first and last. changed caret…
Browse files Browse the repository at this point in the history 
…s… (#1410)

Currently the `next` and `previous` props on the `PaginationLink` component have default carets that symbolize `first` and `last`. I added new props for `first` and `last` in order to have both features for navigating to any of these.

BREAKING CHANGE: Now the `next` and `previous` props are displaying single carets instead of double caret. To get the old style, use `first` and `last` props instead of `previous` and `next` respectfully and set `aria-label` to `Next` or `Previous`.
  • Loading branch information
@GoPro16 @TheSharpieOne
GoPro16 authored and TheSharpieOne committed Feb 22, 2019
1 parent 8d8390a commit 70cfca2
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 6 deletions.
2 changes: 2 additions & 0 deletions docs/lib/Components/PaginationPage.js
View file
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
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
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
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
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
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
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');
});

});

0 comments on commit 70cfca2

Please sign in to comment.