Merge pull request #433 from ember-learn/pagination

Adds pagination component to the styleguide

Author: mansona

addon/components/es-pagination.hbs

@@ -0,0 +1,13 @@
+<div class="pagination-wrapper">
+  {{#if (has-block "previous")}}
+    <div class="previous-wrapper">
+      {{yield to='previous'}}
+    </div>
+  {{/if}}
+
+  {{#if (has-block "next")}}
+    <div class="next-wrapper">
+      {{yield to='next'}}
+    </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,66 @@
+.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;
+    &::before {
+      content: "\2039";
+    }
+
+    &:hover::before {
+      transform: translateX(-0.5em);
+      color: var(--color-link-hover);
+    }
+  }
+
+  & > .next-wrapper {
+    grid-area: next;
+    text-align: right;
+    &::after {
+      content: "\203A";
+    }
+
+    &:hover::after {
+      transform: translateX(0.5em);
+      color: var(--color-link-hover);
+    }
+  }
+
+  & > .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";
+  }
+
+  &: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,45 @@
+# 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> 
+        <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` block when it's the last page you are on.
+
+```handlebars
+  <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` block when it's the first page you are on.
+
+```handlebars
+  <EsPagination>
+    <:next>
+      <LinkTo @route="page" @model={{this.nextId}}>
+        Older articles
+      </LinkTo>
+    </:next>
+  </EsPagination>
+```

package-lock.json

@@ -47,6 +47,7 @@
     "normalize.css": "^8.0.1",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.7.0",
+    "ember-named-blocks-polyfill": "^0.2.5",
     "static-postcss-addon-tree": "^2.0.0"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,23 @@
+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) {
+    await render(hbs`
+    <EsPagination>
+      <:previous>
+        Newer articles
+      </:previous>
+      <:next>
+        Older articles
+      </:next>
+    </EsPagination>
+    `);
+
+    assert.dom(this.element).hasText('Newer articles Older articles');
+  });
+});