From 88b567f2b8fdf74d607652429e09e9b54b389171 Mon Sep 17 00:00:00 2001
From: Pixelastic <tim@pixelastic.com>
Date: Mon, 11 Apr 2016 14:27:38 +0200
Subject: [PATCH] fix(pagination): Disabled pagination link can no longer be
 clicked

Fixes #974.

`PaginationLinks` with the `isDisabled` props now render as `span` and
not as `a`. We also remove the now unwanted `href`, `aria-label` and
`onClick` props.

There were no tests files for PaginationLink, and I did not added one.
I'd like #948 to be merged before adding those kind of fine-grained
tests.
---
 src/components/Pagination/Pagination.js       |  1 +
 src/components/Pagination/PaginationLink.js   | 32 ++++++++++++++-----
 .../Pagination/__tests__/Pagination-test.js   |  2 ++
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/Pagination/Pagination.js b/src/components/Pagination/Pagination.js
index aaba8f38a5..9de0238007 100644
--- a/src/components/Pagination/Pagination.js
+++ b/src/components/Pagination/Pagination.js
@@ -32,6 +32,7 @@ class Pagination extends React.Component {
         ariaLabel={ariaLabel}
         cssClasses={cssClasses}
         handleClick={this.handleClick}
+        isDisabled={isDisabled}
         key={label + pageNumber}
         label={label}
         pageNumber={pageNumber}
diff --git a/src/components/Pagination/PaginationLink.js b/src/components/Pagination/PaginationLink.js
index b7bdbfe9f5..775469b0d1 100644
--- a/src/components/Pagination/PaginationLink.js
+++ b/src/components/Pagination/PaginationLink.js
@@ -16,17 +16,32 @@ class PaginationLink extends React.Component {
   }
 
   render() {
-    let {cssClasses, label, ariaLabel, url} = this.props;
+    let {cssClasses, label, ariaLabel, url, isDisabled} = this.props;
+
+    let tagName = 'span';
+    let attributes = {
+      className: cssClasses.link,
+      dangerouslySetInnerHTML: {
+        __html: label
+      }
+    };
+
+    // "Enable" the element, by making it a link
+    if (!isDisabled) {
+      tagName = 'a';
+      attributes = {
+        ...attributes,
+        ariaLabel,
+        href: url,
+        onClick: this.handleClick
+      };
+    }
+
+    let element = React.createElement(tagName, attributes);
 
     return (
       <li className={cssClasses.item}>
-        <a
-          ariaLabel={ariaLabel}
-          className={cssClasses.link}
-          dangerouslySetInnerHTML={{__html: label}}
-          href={url}
-          onClick={this.handleClick}
-        ></a>
+        {element}
       </li>
     );
   }
@@ -42,6 +57,7 @@ PaginationLink.propTypes = {
     link: React.PropTypes.string
   }),
   handleClick: React.PropTypes.func.isRequired,
+  isDisabled: React.PropTypes.bool,
   label: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.number
diff --git a/src/components/Pagination/__tests__/Pagination-test.js b/src/components/Pagination/__tests__/Pagination-test.js
index 9ed8fede40..4435c47c1f 100644
--- a/src/components/Pagination/__tests__/Pagination-test.js
+++ b/src/components/Pagination/__tests__/Pagination-test.js
@@ -71,6 +71,7 @@ describe('Pagination', () => {
         ariaLabel={undefined}
         cssClasses={{item: '', link: ''}}
         handleClick={() => {}}
+        isDisabled={false}
         key="test8"
         label="test"
         pageNumber={8}
@@ -93,6 +94,7 @@ describe('Pagination', () => {
         ariaLabel={undefined}
         cssClasses={{item: '', link: ''}}
         handleClick={() => {}}
+        isDisabled
         key="test8"
         label="test"
         pageNumber={8}