@defra/lis-infra-ui-services 0.19.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/lis-infra-ui-services",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "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,108 @@ 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('renders the summary text the caller supplies instead of the results count', () => {
+  const html = render({
+    caption: 'Animals',
+    columns,
+    rows,
+    baseHref: '/animals',
+    summary: { text: 'Showing 1 to 7 of 7 <cattle>' },
+    pagination: {
+      currentPage: 1,
+      totalPages: 1,
+      totalItems: 7,
+      itemsPerPage: 25
+    }
+  })
+
+  assert.match(html, /Showing 1 to 7 of 7 &lt;cattle&gt;</)
+  assert.doesNotMatch(html, /results/)
+})
+
+test('renders summary html the caller supplies unescaped', () => {
+  const html = render({
+    caption: 'Animals',
+    columns,
+    rows,
+    baseHref: '/animals',
+    summary: { html: 'Showing <strong>7</strong> cattle' },
+    pagination: {
+      currentPage: 1,
+      totalPages: 1,
+      totalItems: 7,
+      itemsPerPage: 25
+    }
+  })
+
+  assert.match(html, /Showing <strong>7<\/strong> cattle</)
+})
+
+test('puts the summary beside the pagination, below the table, when positioned below', () => {
+  const html = render({
+    caption: 'Animals',
+    columns,
+    rows,
+    baseHref: '/animals',
+    summary: { position: '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',
+    summary: { position: '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,11 +66,20 @@
   {%- 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>
-  {%- else -%}
-    <p class="govuk-body">Showing {{ totalItems }} result{{ "s" if totalItems != 1 else "" }}</p>
-  {%- endif -%}
+  {%- set summary = params.summary or {} -%}
+
+  {#- the caller may supply the summary wording; otherwise it is the results count -#}
+  {%- set summaryContent -%}
+    {%- if summary.html -%}
+      {{ summary.html | safe }}
+    {%- elif summary.text -%}
+      {{ summary.text }}
+    {%- elif totalPages > 1 -%}
+      Showing {{ startItem }} to {{ endItem }} of {{ totalItems }} results
+    {%- else -%}
+      Showing {{ totalItems }} result{{ "s" if totalItems != 1 else "" }}
+    {%- endif -%}
+  {%- endset -%}
 
   {%- if totalPages > 1 -%}
     {%- set items = [] -%}
@@ -82,10 +91,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 summary.position == "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">{{ summaryContent | safe }}</p>
+        </div>
+      </div>
+    {%- else -%}
+      <p class="govuk-body">{{ summaryContent | safe }}</p>
+    {%- endif -%}
+  {%- else -%}
+    <p class="govuk-body">{{ summaryContent | safe }}</p>
+    {%- if totalPages > 1 -%}
+      {{ paginationHtml | safe }}
+    {%- endif -%}
   {%- endif -%}
 {%- endif -%}