Rewrite API to use named blocks

Author: MinThaMie

addon/components/es-pagination.hbs

@@ -1,17 +1,13 @@
 <div class="pagination-wrapper">
-  {{#if @previous}}
-    <div class="previous-wrapper bg-none">
-      <LinkTo class="pagination-link previous" @route={{@previous.route}} @model={{@previous.model}}>
-        <span class="pagination-text">{{@previous.text}}</span>
-      </LinkTo>
+  {{#if (has-block "previous")}}
+    <div class="previous-wrapper">
+      {{yield to='previous'}}
     </div>
   {{/if}}
 
-  {{#if @next}}
-    <div class="next-wrapper bg-none">
-      <LinkTo class="pagination-link next" @route={{@next.route}} @model={{@next.model}}>
-        <span class="pagination-text">{{@next.text}}</span>
-      </LinkTo>
+  {{#if (has-block "next")}}
+    <div class="next-wrapper">
+      {{yield to='next'}}
     </div>
   {{/if}}
 </div>

addon/styles/components/es-pagination.css

@@ -6,39 +6,45 @@
   gap: 0px 40px;
   grid-template-areas:
     "previous next";
-}
+  & > .previous-wrapper{
+    grid-area: previous;
+    &::before {
+      content: "\2039";
+    }
 
-.previous-wrapper{
-  grid-area: previous;
-}
+    &:hover::before {
+      transform: translateX(-0.5em);
+      color: var(--color-link-hover);
+    }
+  }
 
-.next-wrapper {
-  grid-area: next;
-  text-align: right;
-}
+  & > .next-wrapper {
+    grid-area: next;
+    text-align: right;
+    &::after {
+      content: "\203A";
+    }
 
-.pagination-link {
-  &::before,
-  &::after {
-    display: inline-block;
-    font-weight: 700;
-    margin: 0 0.5em;
-    transition: transform 0.3s;
-  }
-  &:hover, &:focus, &:active {
-    .pagination-text {
+    &:hover::after {
+      transform: translateX(0.5em);
       color: var(--color-link-hover);
     }
   }
-}
 
-.pagination-text {
-  color: var(--color-link);
-  background: no-repeat left bottom
-  linear-gradient(var(--color-brand-40), var(--color-brand-40));
-  background-size: 100% 0.1875rem;
+  & > .previous-wrapper,  & > .next-wrapper {
+    &::before,
+    &::after {
+      color: var(--color-link);
+      display: inline-block;
+      font-weight: 700;
+      margin: 0 0.5em;
+      transition: transform 0.3s;
+    }
+  }
 }
 
+
+
 .previous {
   &::before {
     content: "\2039";

docs/components/pagination.md

@@ -1,29 +1,45 @@
 # Pagination
 
-Adds back and forth pagination, when provided with a `previous` object and a `next` object. These objects should look like this: 
-```js
-const object = {
-  route: "String",
-  model: {},
-  text: "The text that will show in the 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.
 
 ## Usage
 
 Add the following code to the template
 
 ```handlebars
-  <EsPagination @previous={{hash text="Older articles" route="prev"}} @next={{hash text="Newer articles" route="next"}}/>
+  <EsPagination>
+    <: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 `previous` object when it's the last page you are on.
+The example below show what happens if you only provide the `previous` block when it's the last page you are on.
 
 ```handlebars
-  <EsPagination @previous={{hash text="One before last article" route="prev"}}/>
+  <EsPagination>
+    <:previous> 
+        <LinkTo @route="page" @model={{this.previousId}}>
+          Newer articles
+        </LinkTo>
+    </:previous>
+  </EsPagination>
 ```
-The example below show what happens if you only provide the `next` object when it's the first page you are on.
+The example below show what happens if you only provide the `next` block when it's the first page you are on.
 
 ```handlebars
-  <EsPagination @next={{hash text="Second article" route="next"}}/>
+  <EsPagination>
+    <:next>
+      <LinkTo @route="page" @model={{this.nextId}}>
+        Older articles
+      </LinkTo>
+    </:next>
+  </EsPagination>
 ```