Merge pull request #30 from palantirnet/add-classes-to-pager

Add pager classes for customization
palantirnet · Mar 13, 2019 · 40f9873 · 40f9873
2 parents 45af4d5 + c5b3566
commit 40f9873
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/components/results/pagination.js b/src/components/results/pagination.js
@@ -24,7 +24,7 @@ class FederatedPagination extends React.Component {
     let isCurrentPage = page === currentPage;
     return (
       <li className={cx("search-pager__item", (isCurrentPage ? 'is-active' : 'not-active'))} key={key}>
-        <a role="button" tabIndex="0" onClick={this.onPageChange.bind(this, page)} onKeyPress={this.buildHandleEnterKeyPress(this.onPageChange.bind(this, page))} title={isCurrentPage ? "Current page" : `Go to page ${page + 1}`} aria-current={isCurrentPage ? page + 1 : undefined}>
+        <a className={cx("search-pager__item-link")} role="button" tabIndex="0" onClick={this.onPageChange.bind(this, page)} onKeyPress={this.buildHandleEnterKeyPress(this.onPageChange.bind(this, page))} title={isCurrentPage ? "Current page" : `Go to page ${page + 1}`} aria-current={isCurrentPage ? page + 1 : undefined}>
           <span className="element-invisible">Page</span>{page + 1}
         </a>
       </li>
@@ -63,33 +63,33 @@ class FederatedPagination extends React.Component {
       <nav className="search-pager" aria-labelledby="pagination-heading">
         <h4 id="pagination-heading" className="element-invisible">Pagination</h4>
         <ul className="search-pager__items">
-          <li className={cx("search-pager__item", {"element-invisible": firstPageHidden})} key="start">
-            <a role="button" tabIndex={firstPageHidden ? "-1" : "0"} onClick={this.onPageChange.bind(this, 0)} onKeyPress={ this.buildHandleEnterKeyPress(this.onPageChange.bind(this, 0)) } title="Go to first page">
+          <li className={cx("search-pager__item search-pager__item--first", {"element-invisible": firstPageHidden})} key="start">
+            <a className={cx("search-pager__item-link")} role="button" tabIndex={firstPageHidden ? "-1" : "0"} onClick={this.onPageChange.bind(this, 0)} onKeyPress={ this.buildHandleEnterKeyPress(this.onPageChange.bind(this, 0)) } title="Go to first page">
               <span className="element-invisible">First page</span>
               <span aria-hidden={firstPageHidden ? "true" : "false"}>
                 <DoubleChevronLeft/>
               </span>
             </a>
           </li>
-          <li className={cx("search-pager__item", {"element-invisible": prevPageHidden})} key="prev">
-            <a role="button" tabIndex={prevPageHidden ? "-1" : "0"} onClick={this.onPageChange.bind(this, currentPage - 1)} onKeyPress={ this.buildHandleEnterKeyPress(this.onPageChange.bind(this, currentPage - 1)) }title="Go to previous page" rel="next">
+          <li className={cx("search-pager__item search-pager__item--previous", {"element-invisible": prevPageHidden})} key="prev">
+            <a className={cx("search-pager__item-link")} role="button" tabIndex={prevPageHidden ? "-1" : "0"} onClick={this.onPageChange.bind(this, currentPage - 1)} onKeyPress={ this.buildHandleEnterKeyPress(this.onPageChange.bind(this, currentPage - 1)) }title="Go to previous page" rel="next">
               <span className="element-invisible">Previous page</span>
               <span aria-hidden={prevPageHidden  ? "true" : "false"}>
                 <ChevronLeft/>
               </span>
             </a>
           </li>
           {pages.map((page, idx) => this.renderPage(page, currentPage, idx))}
-          <li className={cx("search-pager__item", {"element-invisible": nextPageHidden})} key="next">
-            <a role="button" tabIndex={nextPageHidden ? "-1" : "0"} onClick={this.onPageChange.bind(this, currentPage + 1, pageAmt)} onKeyPress={ this.buildHandleEnterKeyPress(this.onPageChange.bind(this, currentPage + 1, pageAmt)) } title="Go to next page" rel="next">
+          <li className={cx("search-pager__item search-pager__item--next", {"element-invisible": nextPageHidden})} key="next">
+            <a className={cx("search-pager__item-link")} role="button" tabIndex={nextPageHidden ? "-1" : "0"} onClick={this.onPageChange.bind(this, currentPage + 1, pageAmt)} onKeyPress={ this.buildHandleEnterKeyPress(this.onPageChange.bind(this, currentPage + 1, pageAmt)) } title="Go to next page" rel="next">
               <span className="element-invisible">Next page</span>
               <span aria-hidden={nextPageHidden ? "true" : "false"}>
                 <ChevronRight/>
               </span>
             </a>
           </li>
-          <li className={cx("search-pager__item", {"element-invisible": lastPageHidden})} key="end">
-            <a role="button" tabIndex={lastPageHidden ? "-1" : "0"} onClick={this.onPageChange.bind(this, pageAmt - 1)} onKeyPress={ this.buildHandleEnterKeyPress(this.onPageChange.bind(this, pageAmt - 1)) } title="Go to last page">
+          <li className={cx("search-pager__item search-pager__item--last", {"element-invisible": lastPageHidden})} key="end">
+            <a className={cx("search-pager__item-link")} role="button" tabIndex={lastPageHidden ? "-1" : "0"} onClick={this.onPageChange.bind(this, pageAmt - 1)} onKeyPress={ this.buildHandleEnterKeyPress(this.onPageChange.bind(this, pageAmt - 1)) } title="Go to last page">
               <span className="element-invisible">Last page</span>
               <span aria-hidden={lastPageHidden ? "true" : "false"}>
                 <DoubleChevronRight/>

diff --git a/src/components/results/result.js b/src/components/results/result.js
@@ -85,12 +85,12 @@ class FederatedResult extends React.Component {
       <li onClick={() => this.props.onSelect(doc)}>
         {doc.ss_federated_image &&
         <div className="search-results__container--left">
-          <img src={doc.ss_federated_image} alt=""/>
+          <img className="search-results__image" src={doc.ss_federated_image} alt=""/>
         </div>
         }
         <div className="search-results__container--right">
           <span className="search-results__label">{doc.ss_federated_type}</span>
-          <h3 className="search-results__heading"><a href={this.getCanonicalLink(doc.sm_urls, doc.ss_url)} dangerouslySetInnerHTML={{__html: doc.ss_federated_title}} /></h3>
+          <h3 className="search-results__heading"><a className="search-results__heading-link" href={this.getCanonicalLink(doc.sm_urls, doc.ss_url)} dangerouslySetInnerHTML={{__html: doc.ss_federated_title}} /></h3>
           <div className="search-results__meta">
             <cite className="search-results__citation">{this.renderSitenameLinks(doc.sm_site_name, doc.sm_urls, doc.ss_site_name)}</cite>
             {this.dateFormat(doc.ds_federated_date)}