Adds pagination component to the styleguide

Author: MinThaMie

addon/components/es-pagination.hbs

@@ -0,0 +1,17 @@
+<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>
+    </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>
+    </div>
+  {{/if}}
+</div>

addon/styles/addon.css

@@ -27,3 +27,4 @@
 @import 'components/es-note.css';
 @import 'components/es-sidebar.css';
 @import 'components/es-progress-bar.css';
+@import 'components/es-pagination.css';

addon/styles/components/es-pagination.css

@@ -0,0 +1,60 @@
+.pagination-wrapper {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  gap: 0px 40px;
+  grid-template-areas:
+    "previous next";
+}
+
+.previous-wrapper{
+  grid-area: previous;
+}
+
+.next-wrapper {
+  grid-area: next;
+  text-align: right;
+}
+
+.pagination-link {
+  &::before,
+  &::after {
+    display: inline-block;
+    font-weight: 700;
+    margin: 0 0.5em;
+    transition: transform 0.3s;
+  }
+  &:hover, &:focus, &:active {
+    .pagination-text {
+      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 {
+  &::before {
+    content: "\2039";
+  }
+
+  &:hover::before {
+    transform: translateX(-0.5em);
+  }
+}
+
+.next {
+  &::after {
+    content: "\203A";
+  }
+
+  &:hover::after {
+    transform: translateX(0.5em);
+  }
+}

app/components/es-pagination.js

@@ -0,0 +1 @@
+export { default } from 'ember-styleguide/components/es-pagination';

docs/components/pagination.md

@@ -0,0 +1,29 @@
+# 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"
+}
+```
+
+## Usage
+
+Add the following code to the template
+
+```handlebars
+  <EsPagination @previous={{hash text="Older articles" route="prev"}} @next={{hash text="Newer articles" route="next"}}/>
+```
+
+The example below show what happens if you only provide the `previous` object when it's the last page you are on.
+
+```handlebars
+  <EsPagination @previous={{hash text="One before last article" route="prev"}}/>
+```
+The example below show what happens if you only provide the `next` object when it's the first page you are on.
+
+```handlebars
+  <EsPagination @next={{hash text="Second article" route="next"}}/>
+```

tests/integration/components/es-pagination-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | es-pagination', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<EsPagination />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <EsPagination>
+        template block text
+      </EsPagination>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});