Merge pull request #457 from ember-learn/update-pagination

Make pagination work with multiline links + add arrow

Author: MinThaMie

addon/components/es-pagination.hbs

@@ -1,13 +1,15 @@
 <div class="pagination-wrapper">
-  {{#if (has-block "previous")}}
+  {{#if (and (has-block "previous") @showPrevious)}}
     <div class="previous-wrapper">
-      {{yield to='previous'}}
+      <img alt="left arrow" src="/images/icons/arrow-icon.svg" />
+      <div>{{yield to='previous'}}</div>
     </div>
   {{/if}}
 
-  {{#if (has-block "next")}}
+  {{#if (and (has-block "next") @showNext)}}
     <div class="next-wrapper">
-      {{yield to='next'}}
+      <div>{{yield to='next'}}</div>
+      <img alt="right arrow" src="/images/icons/arrow-icon.svg" />
     </div>
   {{/if}}
 </div>

addon/styles/components/es-pagination.css

@@ -6,61 +6,36 @@
   gap: 0px 40px;
   grid-template-areas:
     "previous next";
+  margin: var(--spacing-1) 0;
   & > .previous-wrapper{
     grid-area: previous;
-    &::before {
-      content: "\2039";
+    & > img {
+      transform: rotate(90deg);
     }
-
-    &:hover::before {
-      transform: translateX(-0.5em);
-      color: var(--color-link-hover);
+    &:hover > img {
+      transform: rotate(90deg) translateY(0.5em);
     }
   }
 
   & > .next-wrapper {
     grid-area: next;
+    justify-content: end;
     text-align: right;
-    &::after {
-      content: "\203A";
+    & > img {
+      transform: rotate(270deg);
     }
 
-    &:hover::after {
-      transform: translateX(0.5em);
-      color: var(--color-link-hover);
+    &:hover > img {
+      transform: rotate(270deg) translateY(0.5em);
     }
   }
 
   & > .previous-wrapper,  & > .next-wrapper {
-    &::before,
-    &::after {
-      color: var(--color-link);
-      display: inline-block;
-      font-weight: 700;
+    display: flex;
+    align-items: center;
+    & > img {
       margin: 0 0.5em;
       transition: transform 0.3s;
     }
   }
 }
-
-
-
-.previous {
-  &::before {
-    content: "\2039";
-  }
-
-  &:hover::before {
-    transform: translateX(-0.5em);
-  }
-}
-
-.next {
-  &::after {
-    content: "\203A";
-  }
-
-  &:hover::after {
-    transform: translateX(0.5em);
-  }
-}

docs/components/pagination.md

@@ -1,13 +1,13 @@
 # Pagination
 
-Adds back and forth pagination, using `named blocks`. You insert your previous link into a `<:previous></:previous>` block and the next link into a `<:next></:next>` block. This will add the underline styling to the link and an animated arrow to your link.
+Adds back and forth pagination, using `named blocks`. You insert your previous link into a `<:previous></:previous>` block and the next link into a `<:next></:next>` block. This will add the underline styling to the link and an animated arrow to your link. You will use the `showPrevious` and `showNext` prop to make sure the correct links are visible.
 
 ## Usage
 
 Add the following code to the template
 
 ```handlebars
-  <EsPagination>
+  <EsPagination @showPrevious={{true}} @showNext={{true}}>
     <:previous> 
         <LinkTo @route="page" @model={{this.previousId}}>
           Newer articles
@@ -21,21 +21,32 @@ Add the following code to the template
   </EsPagination>
 ```
 
-The example below show what happens if you only provide the `previous` block when it's the last page you are on.
+To only show the previous you've to pass `false` to the `showNext` prop.
 
 ```handlebars
-  <EsPagination>
+  <EsPagination @showPrevious={{true}} @showNext={{false}}>
     <:previous> 
         <LinkTo @route="page" @model={{this.previousId}}>
           Newer articles
         </LinkTo>
     </:previous>
+    <:next>
+      <LinkTo @route="page" @model={{this.nextId}}>
+        Older articles
+      </LinkTo>
+    </:next>
   </EsPagination>
 ```
-The example below show what happens if you only provide the `next` block when it's the first page you are on.
+
+To only show the previous you've to pass `false` to the `showPrevious` prop.
 
 ```handlebars
-  <EsPagination>
+  <EsPagination @showPrevious={{false}} @showNext={{true}}>
+    <:previous> 
+        <LinkTo @route="page" @model={{this.previousId}}>
+          Newer articles
+        </LinkTo>
+    </:previous>
     <:next>
       <LinkTo @route="page" @model={{this.nextId}}>
         Older articles

public/images/icons/arrow-icon.svg

@@ -8,7 +8,7 @@ module('Integration | Component | es-pagination', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`
-    <EsPagination>
+    <EsPagination @showPrevious={{true}} @showNext={{true}}>
       <:previous>
         Newer articles
       </:previous>
@@ -20,4 +20,34 @@ module('Integration | Component | es-pagination', function (hooks) {
 
     assert.dom(this.element).hasText('Newer articles Older articles');
   });
+  test('it renders only previous', async function (assert) {
+    await render(hbs`
+    <EsPagination @showPrevious={{true}} @showNext={{false}}>
+      <:previous>
+        Newer articles
+      </:previous>
+      <:next>
+        Older articles
+      </:next>
+    </EsPagination>
+    `);
+
+    assert.dom(this.element).hasText('Newer articles');
+    assert.dom(this.element).doesNotIncludeText('Older articles');
+  });
+  test('it renders only next', async function (assert) {
+    await render(hbs`
+    <EsPagination @showPrevious={{false}} @showNext={{true}}>
+      <:previous>
+        Newer articles
+      </:previous>
+      <:next>
+        Older articles
+      </:next>
+    </EsPagination>
+    `);
+
+    assert.dom(this.element).hasText('Older articles');
+    assert.dom(this.element).doesNotIncludeText('Newer articles');
+  });
 });