@defra/lis-infra-ui-services 0.19.0 → 0.20.0-lreg-596.alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/lis-infra-ui-services",
-  "version": "0.19.0",
+  "version": "0.20.0-lreg-596.alpha.1",
   "description": "UI-Services shared definitions for the livestock taxonomy topology.",
   "main": "src/index.js",
   "repository": {

package/src/nunjucks/components/sortable-paginated-table/sortable-paginated-table.test.js

@@ -225,6 +225,90 @@ test('shows the results range for the current page', () => {
   assert.match(html, /Showing 6 to 7 of 7 results/)
 })
 
+test('renders the summary above the pagination by default', () => {
+  const html = render({
+    caption: 'Animals',
+    columns,
+    rows,
+    baseHref: '/animals',
+    pagination: {
+      currentPage: 1,
+      totalPages: 2,
+      totalItems: 7,
+      itemsPerPage: 5
+    }
+  })
+
+  assert.ok(
+    html.indexOf('Showing 1 to 5 of 7') < html.indexOf('govuk-pagination')
+  )
+  assert.doesNotMatch(html, /govuk-grid-row/)
+})
+
+test('always states the range, without "results", in the range summary format', () => {
+  const html = render({
+    caption: 'Animals',
+    columns,
+    rows,
+    baseHref: '/animals',
+    summaryFormat: 'range',
+    pagination: {
+      currentPage: 1,
+      totalPages: 1,
+      totalItems: 7,
+      itemsPerPage: 25
+    }
+  })
+
+  assert.match(html, /Showing 1 to 7 of 7</)
+  assert.doesNotMatch(html, /results/)
+})
+
+test('puts the summary beside the pagination, below the table, when positioned below', () => {
+  const html = render({
+    caption: 'Animals',
+    columns,
+    rows,
+    baseHref: '/animals',
+    summaryPosition: 'below',
+    pagination: {
+      currentPage: 1,
+      totalPages: 2,
+      totalItems: 7,
+      itemsPerPage: 5
+    }
+  })
+
+  assert.ok(html.indexOf('</table>') < html.indexOf('govuk-pagination'))
+  assert.ok(
+    html.indexOf('govuk-pagination') < html.indexOf('Showing 1 to 5 of 7')
+  )
+  assert.match(
+    html,
+    /govuk-grid-column-one-third govuk-!-text-align-right">\s*<p class="govuk-body govuk-!-margin-top-2">Showing 1 to 5 of 7 results<\/p>/
+  )
+})
+
+test('puts the summary alone below the table when positioned below with a single page', () => {
+  const html = render({
+    caption: 'Animals',
+    columns,
+    rows,
+    baseHref: '/animals',
+    summaryPosition: 'below',
+    pagination: {
+      currentPage: 1,
+      totalPages: 1,
+      totalItems: 7,
+      itemsPerPage: 25
+    }
+  })
+
+  assert.ok(html.indexOf('</table>') < html.indexOf('Showing 7 results'))
+  assert.doesNotMatch(html, /govuk-grid-row/)
+  assert.doesNotMatch(html, /govuk-pagination/)
+})
+
 test('renders pagination items and next but no previous on the first page', () => {
   const html = render({
     caption: 'Animals',

package/src/nunjucks/components/sortable-paginated-table/template.njk

@@ -66,10 +66,13 @@
   {%- set lastItemOnPage = currentPage * itemsPerPage -%}
   {%- set endItem = totalItems if lastItemOnPage > totalItems else lastItemOnPage -%}
 
-  {%- if totalPages > 1 -%}
-    <p class="govuk-body">Showing {{ startItem }} to {{ endItem }} of {{ totalItems }} results</p>
+  {#- "range" always states the range, even on a single page: "Showing 1 to 7 of 7" -#}
+  {%- if params.summaryFormat == "range" -%}
+    {%- set summaryText = "Showing " ~ startItem ~ " to " ~ endItem ~ " of " ~ totalItems -%}
+  {%- elif totalPages > 1 -%}
+    {%- set summaryText = "Showing " ~ startItem ~ " to " ~ endItem ~ " of " ~ totalItems ~ " results" -%}
   {%- else -%}
-    <p class="govuk-body">Showing {{ totalItems }} result{{ "s" if totalItems != 1 else "" }}</p>
+    {%- set summaryText = "Showing " ~ totalItems ~ (" results" if totalItems != 1 else " result") -%}
   {%- endif -%}
 
   {%- if totalPages > 1 -%}
@@ -82,10 +85,33 @@
     {%- set previousHref = params.baseHref ~ "?" ~ (query | assign({ sort: params.sort, direction: params.direction, page: currentPage - 1 }) | queryString) -%}
     {%- set nextHref = params.baseHref ~ "?" ~ (query | assign({ sort: params.sort, direction: params.direction, page: currentPage + 1 }) | queryString) -%}
 
-    {{ govukPagination({
-      items: items,
-      previous: { href: previousHref } if currentPage > 1 else undefined,
-      next: { href: nextHref } if currentPage < totalPages else undefined
-    }) }}
+    {%- set paginationHtml -%}
+      {{ govukPagination({
+        items: items,
+        previous: { href: previousHref } if currentPage > 1 else undefined,
+        next: { href: nextHref } if currentPage < totalPages else undefined
+      }) }}
+    {%- endset -%}
+  {%- endif -%}
+
+  {#- "below" puts the summary under the table, beside the page links when there are any -#}
+  {%- if params.summaryPosition == "below" -%}
+    {%- if totalPages > 1 -%}
+      <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+          {{ paginationHtml | safe }}
+        </div>
+        <div class="govuk-grid-column-one-third govuk-!-text-align-right">
+          <p class="govuk-body govuk-!-margin-top-2">{{ summaryText }}</p>
+        </div>
+      </div>
+    {%- else -%}
+      <p class="govuk-body">{{ summaryText }}</p>
+    {%- endif -%}
+  {%- else -%}
+    <p class="govuk-body">{{ summaryText }}</p>
+    {%- if totalPages > 1 -%}
+      {{ paginationHtml | safe }}
+    {%- endif -%}
   {%- endif -%}
 {%- endif -%}