Issue #278 - replace <a> links with <A>

components/pagination/package.json

@@ -25,7 +25,8 @@
   ],
   "dependencies": {
     "@hods/sass-base": "workspace:^0.1.13",
-    "@not-govuk/component-helpers": "^0.2.15"
+    "@not-govuk/component-helpers": "^0.2.15",
+    "@not-govuk/link": "^0.2.15"
   },
   "peerDependencies": {
     "@not-govuk/docs-components": "^0.2.0",

components/pagination/spec/Pagination.ts

@@ -12,15 +12,15 @@ describe('Pagination', () => {
 
     let current;
     beforeAll(() => {
-      expect(current = pagination.find('.hods-pagination__link--current')).toHaveLength(1);
+      expect(current = pagination.find('a.hods-pagination__link--current')).toHaveLength(1);
     });
 
     it('is on the correct page', () => {
       expect(current.text()).toEqual('3');
     });
 
     it('should not have a link', () => {
-      expect(current.html()).toContain('href=""');
+      expect(current.html()).not.toContain('href=');
     });
 
     const summary = pagination.find('.hods-pagination__summary').text();
@@ -59,15 +59,15 @@ describe('Pagination', () => {
 
     let current;
     beforeAll(() => {
-      expect(current = pagination.find('.hods-pagination__link--current')).toHaveLength(1);
+      expect(current = pagination.find('a.hods-pagination__link--current')).toHaveLength(1);
     });
 
     it('is on the correct page', () => {
       expect(current.text()).toEqual('1');
     });
 
     it('should not have a link', () => {
-      expect(current.html()).toContain('href=""');
+      expect(current.html()).not.toContain('href=');
     });
 
     const summary = pagination.find('.hods-pagination__summary').text();
@@ -102,7 +102,7 @@ describe('Pagination', () => {
 
     let current;
     beforeAll(() => {
-      expect(current = pagination.find('.hods-pagination__link--current')).toHaveLength(0);
+      expect(current = pagination.find('a.hods-pagination__link--current')).toHaveLength(0);
     });
   });
 });

components/pagination/src/Pagination.tsx

@@ -1,5 +1,6 @@
 import React, { FC, createElement as h } from 'react';
 import { StandardProps, classBuilder } from '@not-govuk/component-helpers';
+import { A } from '@not-govuk/link';
 
 import '../assets/Pagination.scss';
 
@@ -53,21 +54,26 @@ export const Pagination: FC<PaginationProps> = ({
         <ul className={ classes('list-items') }>
           { page > 1 ?
             <li className={ classes('item') } id="prevButton" key="prev">
-              <a className={ classes('link') } href={ page > 1 ? hl[1] : "" }>
+              <A className={ classes('link') } href={hl[1]}>
                 <span aria-hidden="true" role="presentation">&laquo;</span> Previous
-              </a>
+              </A>
             </li>
           : null }
           { it.map( i => (
             <li className={ classes('item') } key={i}>
-              { pages[i] < 1 || pages[i] > maxPages ? null : <a className={classes('link', pages[i] === page ? 'current' : undefined)} href={hl[i]}>{pages[i]}</a>}
+              { pages[i] < 1 || pages[i] > maxPages
+                ? null
+                : pages[i]!==page
+                  ? <A className={ classes('link') } href={ hl[i] }>{ pages[i] }</A>
+                  : <a className={ classes('link', 'current') }>{ pages[i] }</a>
+              }
             </li>
           ))}
           { resultsTo == results ? null :
             <li className={ classes('item') } id="nextButton" key="next">
-              <a className={ classes('link') } href={ resultsTo == results ? "" : hl[3] }>
+              <A className={ classes('link') } href={hl[3]}>
                  Next <span aria-hidden="true" role="presentation">&raquo;</span>
-              </a>
+              </A>
             </li>
           }
         </ul>
@@ -76,3 +82,47 @@ export const Pagination: FC<PaginationProps> = ({
 };
 
 export default Pagination;
+
+// hods-pagination__link
+
+/*
+
+
+Expected substring: "href=\"\""
+Received string:    "href=\"/\""
+
+
+
+
+{ it.map( i => (
+  <li className={ classes('item') } key={i}>
+    { pages[i] < 1 || pages[i] > maxPages ? null : <a className={classes('link', pages[i] === page ? 'current' : undefined)} href={hl[i]}>{pages[i]}</a>}
+  </li>
+))}
+
+
+return (
+    <div className={ classes() }>
+      <div className={ classes('summary') }>Showing { resultsFrom } - { resultsTo } of { results } results</div>
+      <ul className={ classes('list-items') }>
+        { page > 1 ?
+          <li className={ classes('item') } id="prevButton" key="prev">
+            <A href="#">Previous</A>
+          </li>
+        : null }
+          <li className={ classes('item') }>
+            <A href="#" classBlock="hods-pagination__link">1</A>
+            <A href="#" classBlock="hods-pagination__link">2</A>
+            <A href="#" classBlock="hods-pagination__link hods-pagination__link--current">3</A>
+            <A href="#" classBlock="hods-pagination__link">4</A>
+            <A href="#" classBlock="hods-pagination__link">5</A>
+          </li>
+        { resultsTo == results ? null :
+          <li className={ classes('item') } id="nextButton" key="next">
+            <A href="#">Next</A>
+          </li>
+        }
+      </ul>
+    </div>
+);
+*/