feat(infiniteHits): add previous button (#101)

Author: yannickcr

content/widgets/infinite-hits.md

@@ -31,9 +31,42 @@ html: |
     </ol>
     <button class="ais-InfiniteHits-loadMore">Show more results</button>
   </div>
-alt1: Show more disabled
+alt1: Show previous enabled
 althtml1: |
   <div class="ais-InfiniteHits">
+    <button class="ais-InfiniteHits-loadPrevious">Show previous results</button>
+    <ul class="ais-InfiniteHits-list">
+      <li class="ais-InfiniteHits-item">
+        Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+      </li>
+      <li class="ais-InfiniteHits-item">
+        Hit 4397400: Google - Chromecast - Black
+      </li>
+      <li class="ais-InfiniteHits-item">
+        Hit 4397400: Google - Chromecast - Black
+      </li>
+      <li class="ais-InfiniteHits-item">
+        Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+      </li>
+      <li class="ais-InfiniteHits-item">
+        Hit 4397400: Google - Chromecast - Black
+      </li>
+      <li class="ais-InfiniteHits-item">
+        Hit 4397400: Google - Chromecast - Black
+      </li>
+      <li class="ais-InfiniteHits-item">
+        Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
+      </li>
+      <li class="ais-InfiniteHits-item">
+        Hit 4397400: Google - Chromecast - Black
+      </li>
+    </ul>
+    <button class="ais-InfiniteHits-loadMore ais-InfiniteHits-loadMore--disabled" disabled>Show more results</button>
+  </div>
+alt2: Show previous and show more disabled
+althtml2: |
+  <div class="ais-InfiniteHits">
+    <button class="ais-InfiniteHits-loadPrevious ais-InfiniteHits-loadPrevious--disabled" disabled>Show previous results</button>
     <ul class="ais-InfiniteHits-list">
       <li class="ais-InfiniteHits-item">
         Hit 5477500: Amazon - Fire TV Stick with Alexa Voice Remote - Black
@@ -69,6 +102,10 @@ classes:
     description: the list of hits
   - name: .ais-InfiniteHits-item
     description: the hit list item
+  - name: .ais-InfiniteHits-loadPrevious
+    description: the button used to display previous results
+  - name: .ais-InfiniteHits-loadPrevious--disabled
+    description: the disabled button used to display previous results
   - name: .ais-InfiniteHits-loadMore
     description: the button used to display more results
   - name: .ais-InfiniteHits-loadMore--disabled

src/scss/themes/algolia.scss

@@ -80,6 +80,7 @@ a[class^='ais-'] {
 .ais-GeoSearch-redo,
 .ais-GeoSearch-reset,
 .ais-HierarchicalMenu-showMore,
+.ais-InfiniteHits-loadPrevious,
 .ais-InfiniteHits-loadMore,
 .ais-InfiniteResults-loadMore,
 .ais-Menu-showMore,
@@ -115,6 +116,10 @@ a[class^='ais-'] {
   }
 }
 
+.ais-InfiniteHits-loadPrevious--disabled {
+  display: none;
+}
+
 .ais-CurrentRefinements {
   margin-top: -0.3rem;
   display: flex;
@@ -304,6 +309,10 @@ a[class^='ais-'] {
   margin-top: 1rem;
 }
 
+.ais-InfiniteHits-loadPrevious {
+  margin-bottom: 1rem;
+}
+
 .ais-MenuSelect-select,
 .ais-NumericSelector-select,
 .ais-HitsPerPage-select,

src/scss/themes/reset.scss

@@ -26,6 +26,7 @@
 .ais-GeoSearch-redo,
 .ais-GeoSearch-reset,
 .ais-HierarchicalMenu-showMore,
+.ais-InfiniteHits-loadPrevious,
 .ais-InfiniteHits-loadMore,
 .ais-InfiniteResults-loadMore,
 .ais-Menu-showMore,