From 70cfca20979d8060b309286246dc6b7043cc0754 Mon Sep 17 00:00:00 2001
From: Kyle Gray <kgray1497@gmail.com>
Date: Fri, 22 Feb 2019 14:16:40 -0500
Subject: [PATCH] =?UTF-8?q?feat(pagination-links):=20added=20props=20for?=
 =?UTF-8?q?=20first=20and=20last.=20changed=20carets=E2=80=A6=20(#1410)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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`.
---
 docs/lib/Components/PaginationPage.js      |  2 ++
 docs/lib/examples/Pagination.js            |  6 ++++
 docs/lib/examples/PaginationSizingLarge.js |  6 ++++
 docs/lib/examples/PaginationSizingSmall.js |  6 ++++
 docs/lib/examples/PaginationState.js       |  6 ++++
 src/PaginationLink.js                      | 17 +++++++--
 src/__tests__/PaginationLink.spec.js       | 41 +++++++++++++++++++---
 7 files changed, 78 insertions(+), 6 deletions(-)

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 (
       <Pagination aria-label="Page navigation example">
+      <PaginationItem>
+          <PaginationLink first href="#" />
+        </PaginationItem>
         <PaginationItem>
           <PaginationLink previous href="#" />
         </PaginationItem>
@@ -36,6 +39,9 @@ export default class Example extends React.Component {
         <PaginationItem>
           <PaginationLink next href="#" />
         </PaginationItem>
+        <PaginationItem>
+          <PaginationLink last href="#" />
+        </PaginationItem>
       </Pagination>
     );
   }
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 (
       <Pagination size="lg" aria-label="Page navigation example">
+        <PaginationItem>
+          <PaginationLink first href="#" />
+        </PaginationItem>
         <PaginationItem>
           <PaginationLink previous href="#" />
         </PaginationItem>
@@ -26,6 +29,9 @@ export default class Example extends React.Component {
         <PaginationItem>
           <PaginationLink next href="#" />
         </PaginationItem>
+        <PaginationItem>
+          <PaginationLink last href="#" />
+        </PaginationItem>
       </Pagination>
     );
   }
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 (
       <Pagination size="sm" aria-label="Page navigation example">
+      <PaginationItem>
+          <PaginationLink first href="#" />
+        </PaginationItem>
         <PaginationItem>
           <PaginationLink previous href="#" />
         </PaginationItem>
@@ -26,6 +29,9 @@ export default class Example extends React.Component {
         <PaginationItem>
           <PaginationLink next href="#" />
         </PaginationItem>
+        <PaginationItem>
+          <PaginationLink last href="#" />
+        </PaginationItem>
       </Pagination>
     );
   }
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 (
       <Pagination aria-label="Page navigation example">
+      <PaginationItem disabled>
+          <PaginationLink first href="#" />
+        </PaginationItem>
         <PaginationItem disabled>
           <PaginationLink previous href="#" />
         </PaginationItem>
@@ -36,6 +39,9 @@ export default class Example extends React.Component {
         <PaginationItem>
           <PaginationLink next href="#" />
         </PaginationItem>
+        <PaginationItem>
+          <PaginationLink last href="#" />
+        </PaginationItem>
       </Pagination>
     );
   }
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 = [
       <span
         aria-hidden="true"
diff --git a/src/__tests__/PaginationLink.spec.js b/src/__tests__/PaginationLink.spec.js
index 1b62ac61b..47b2defdd 100644
--- a/src/__tests__/PaginationLink.spec.js
+++ b/src/__tests__/PaginationLink.spec.js
@@ -31,7 +31,7 @@ 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');
   });
 
@@ -39,7 +39,7 @@ describe('PaginationLink', () => {
     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');
   });
 
@@ -47,7 +47,7 @@ describe('PaginationLink', () => {
     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');
   });
 
@@ -55,7 +55,7 @@ describe('PaginationLink', () => {
     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');
   });
 
@@ -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');
+  });
+
 });