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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/lis-infra-ui-services",
-  "version": "0.20.0-lreg-596.alpha.1",
+  "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

@@ -245,13 +245,13 @@ test('renders the summary above the pagination by default', () => {
   assert.doesNotMatch(html, /govuk-grid-row/)
 })
 
-test('always states the range, without "results", in the range summary format', () => {
+test('renders the summary text the caller supplies instead of the results count', () => {
   const html = render({
     caption: 'Animals',
     columns,
     rows,
     baseHref: '/animals',
-    summaryFormat: 'range',
+    summary: { text: 'Showing 1 to 7 of 7 <cattle>' },
     pagination: {
       currentPage: 1,
       totalPages: 1,
@@ -260,17 +260,35 @@ test('always states the range, without "results", in the range summary format',
     }
   })
 
-  assert.match(html, /Showing 1 to 7 of 7</)
+  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',
-    summaryPosition: 'below',
+    summary: { position: 'below' },
     pagination: {
       currentPage: 1,
       totalPages: 2,
@@ -295,7 +313,7 @@ test('puts the summary alone below the table when positioned below with a single
     columns,
     rows,
     baseHref: '/animals',
-    summaryPosition: 'below',
+    summary: { position: 'below' },
     pagination: {
       currentPage: 1,
       totalPages: 1,

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

@@ -66,14 +66,20 @@
   {%- set lastItemOnPage = currentPage * itemsPerPage -%}
   {%- set endItem = totalItems if lastItemOnPage > totalItems else lastItemOnPage -%}
 
-  {#- "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 -%}
-    {%- set summaryText = "Showing " ~ totalItems ~ (" results" if totalItems != 1 else " result") -%}
-  {%- 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 = [] -%}
@@ -95,21 +101,21 @@
   {%- endif -%}
 
   {#- "below" puts the summary under the table, beside the page links when there are any -#}
-  {%- if params.summaryPosition == "below" -%}
+  {%- 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">{{ summaryText }}</p>
+          <p class="govuk-body govuk-!-margin-top-2">{{ summaryContent | safe }}</p>
         </div>
       </div>
     {%- else -%}
-      <p class="govuk-body">{{ summaryText }}</p>
+      <p class="govuk-body">{{ summaryContent | safe }}</p>
     {%- endif -%}
   {%- else -%}
-    <p class="govuk-body">{{ summaryText }}</p>
+    <p class="govuk-body">{{ summaryContent | safe }}</p>
     {%- if totalPages > 1 -%}
       {{ paginationHtml | safe }}
     {%- endif -%}