@ministryofjustice/frontend 3.3.1 → 3.4.0

package/moj/components/sortable-table/sortable-table.spec.js

@@ -0,0 +1,362 @@
+/* eslint-disable no-new */
+
+const { queryByRole } = require('@testing-library/dom')
+const { userEvent } = require('@testing-library/user-event')
+
+require('./sortable-table.js')
+
+const user = userEvent.setup()
+
+const createComponent = (options = {}) => {
+  const html = `
+    <div>
+      <table class="govuk-table" data-module="moj-sortable-table">
+        <thead class="govuk-table__head">
+          <tr class="govuk-table__row">
+            <th scope="col" class="govuk-table__header" aria-sort="ascending">Name</th>
+            <th scope="col" class="govuk-table__header" aria-sort="none">Elevation</th>
+            <th scope="col" class="govuk-table__header" aria-sort="none">Continent</th>
+            <th scope="col" class="govuk-table__header govuk-table__header--numeric" aria-sort="none">First summit</th>
+            <th scope="col" class="govuk-table__header" aria-sort="none">Test nickname</th>
+          </tr>
+        </thead>
+        <tbody class="govuk-table__body">
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">Aconcagua</td>
+            <td class="govuk-table__cell" data-sort-value="6961">6,961 meters</td>
+            <td class="govuk-table__cell">South America</td>
+            <td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1897">1897</td>
+            <td class="govuk-table__cell"></td>
+          </tr>
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">Everest</td>
+            <td class="govuk-table__cell" data-sort-value="8850">8,850 meters</td>
+            <td class="govuk-table__cell">Asia</td>
+            <td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1953">1953</td>
+            <td class="govuk-table__cell">1Tallest</td>
+          </tr>
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">Kilimanjaro</td>
+            <td class="govuk-table__cell" data-sort-value="5895">5,895 meters</td>
+            <td class="govuk-table__cell">Africa</td>
+            <td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1889">1889</td>
+            <td class="govuk-table__cell">KiliJ89</td>
+          </tr>
+          <tr class="govuk-table__row">
+            <td class="govuk-table__cell">K2</td>
+            <td class="govuk-table__cell" data-sort-value="8611">8,611 meters</td>
+            <td class="govuk-table__cell">Asia</td>
+            <td class="govuk-table__cell govuk-table__cell--numeric" data-sort-value="1889">1954</td>
+            <td class="govuk-table__cell">1NearlyTallest</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>`
+
+  document.body.insertAdjacentHTML('afterbegin', html)
+  const component = document.querySelector('[data-module="moj-sortable-table"]')
+  options.table = component
+  return { component, options }
+}
+
+describe('sortable table', () => {
+  let component
+
+  beforeEach(() => {
+    ;({ component } = createComponent())
+    new MOJFrontend.SortableTable({
+      table: component
+    })
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('initialises with buttons in headers', () => {
+    const headers = Array.from(component.querySelectorAll('th')).filter(
+      (header) => header.getAttribute('aria-sort')
+    )
+
+    for (const header of headers) {
+      const button = header.querySelector('button')
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveTextContent(header.textContent)
+    }
+  })
+
+  test('creates status box for announcements', () => {
+    const statusBox = queryByRole(component.parentElement, 'status')
+    expect(statusBox).toBeInTheDocument()
+    expect(statusBox).toHaveClass('govuk-visually-hidden')
+  })
+
+  test('sorts ascending by Name on initial load', () => {
+    const tbody = component.querySelector('tbody')
+    const cells = tbody.querySelectorAll('tr td:first-child')
+    const values = Array.from(cells).map((cell) => cell.textContent.trim())
+
+    expect(component.querySelector('th')).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    )
+    expect(values).toEqual(['Aconcagua', 'Everest', 'K2', 'Kilimanjaro'])
+  })
+
+  test('sorts string column in descending order when clicked', async () => {
+    const nameHeaderButton = queryByRole(component, 'button', { name: 'Name' })
+    const tbody = component.querySelector('tbody')
+
+    await user.click(nameHeaderButton)
+
+    const descCells = tbody.querySelectorAll('tr td:first-child')
+    const descValues = Array.from(descCells).map((cell) =>
+      cell.textContent.trim()
+    )
+
+    expect(descValues).toEqual(['Kilimanjaro', 'K2', 'Everest', 'Aconcagua'])
+    expect(nameHeaderButton.parentElement).toHaveAttribute(
+      'aria-sort',
+      'descending'
+    )
+
+    await user.click(nameHeaderButton)
+
+    const ascCells = tbody.querySelectorAll('tr td:first-child')
+    const ascValues = Array.from(ascCells).map((cell) =>
+      cell.textContent.trim()
+    )
+
+    expect(ascValues).toEqual(['Aconcagua', 'Everest', 'K2', 'Kilimanjaro'])
+    expect(nameHeaderButton.parentElement).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    )
+  })
+
+  test('sorts numeric column using data-sort-value', async () => {
+    const elevationHeaderButton = queryByRole(component, 'button', {
+      name: 'Elevation'
+    })
+    const tbody = component.querySelector('tbody')
+
+    await user.click(elevationHeaderButton)
+
+    const ascCells = tbody.querySelectorAll('tr td:nth-child(2)')
+    const ascValues = Array.from(ascCells).map((cell) =>
+      parseInt(cell.getAttribute('data-sort-value'))
+    )
+
+    expect(ascValues).toEqual([5895, 6961, 8611, 8850])
+    expect(elevationHeaderButton.parentElement).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    )
+
+    await user.click(elevationHeaderButton)
+
+    const descCells = tbody.querySelectorAll('tr td:nth-child(2)')
+    const descValues = Array.from(descCells).map((cell) =>
+      parseInt(cell.getAttribute('data-sort-value'))
+    )
+
+    expect(descValues).toEqual([8850, 8611, 6961, 5895])
+    expect(elevationHeaderButton.parentElement).toHaveAttribute(
+      'aria-sort',
+      'descending'
+    )
+  })
+
+  test('sorts mixed data column without specified data-sort-value', async () => {
+    const nicknameHeaderButton = queryByRole(component, 'button', {
+      name: 'Test nickname'
+    })
+    const tbody = component.querySelector('tbody')
+
+    await user.click(nicknameHeaderButton)
+
+    const ascCells = tbody.querySelectorAll('tr td:nth-child(5)')
+    const ascValues = Array.from(ascCells).map((cell) =>
+      cell.textContent.trim()
+    )
+    // Values converted to numbers in getCellValue function for comparison
+
+    expect(ascValues).toEqual(['', '1NearlyTallest', '1Tallest', 'KiliJ89'])
+    expect(nicknameHeaderButton.parentElement).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    )
+  })
+
+  test('updates status message when sorting', async () => {
+    const elevationHeaderButton = queryByRole(component, 'button', {
+      name: 'Elevation'
+    })
+    const statusBox = queryByRole(component.parentElement, 'status')
+
+    await user.click(elevationHeaderButton)
+
+    expect(statusBox).toHaveTextContent('Sort by Elevation (ascending)')
+
+    await user.click(elevationHeaderButton)
+
+    expect(statusBox).toHaveTextContent('Sort by Elevation (descending)')
+  })
+
+  test('removes sort state from other columns when sorting a new column', async () => {
+    const nameHeaderButton = queryByRole(component, 'button', { name: 'Name' })
+    const elevationHeaderButton = queryByRole(component, 'button', {
+      name: 'Elevation'
+    })
+
+    await user.click(elevationHeaderButton)
+
+    expect(nameHeaderButton.parentElement).toHaveAttribute('aria-sort', 'none')
+    expect(elevationHeaderButton.parentElement).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    )
+  })
+
+  test('cycles through sort states: none -> ascending -> descending', async () => {
+    const headerButton = queryByRole(component, 'button', { name: 'Continent' })
+    const header = headerButton.parentElement
+
+    expect(header).toHaveAttribute('aria-sort', 'none')
+
+    await user.click(headerButton)
+    expect(header).toHaveAttribute('aria-sort', 'ascending')
+
+    await user.click(headerButton)
+    expect(header).toHaveAttribute('aria-sort', 'descending')
+
+    await user.click(headerButton)
+    expect(header).toHaveAttribute('aria-sort', 'ascending')
+  })
+})
+
+describe('sortable table options', () => {
+  let component
+  let options
+
+  beforeEach(() => {
+    ;({ component, options } = createComponent())
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('uses default status message when no options provided', async () => {
+    new MOJFrontend.SortableTable(options)
+
+    const elevationHeaderButton = queryByRole(component, 'button', {
+      name: 'Elevation'
+    })
+    const statusBox = queryByRole(component.parentElement, 'status')
+
+    await user.click(elevationHeaderButton)
+    expect(statusBox).toHaveTextContent('Sort by Elevation (ascending)')
+  })
+
+  test('uses custom status message when provided', async () => {
+    options.statusMessage = 'Sorted column: %heading% (order: %direction%)'
+    new MOJFrontend.SortableTable(options)
+
+    const elevationHeaderButton = queryByRole(component, 'button', {
+      name: 'Elevation'
+    })
+    const statusBox = queryByRole(component.parentElement, 'status')
+
+    await user.click(elevationHeaderButton)
+    expect(statusBox).toHaveTextContent(
+      'Sorted column: Elevation (order: ascending)'
+    )
+  })
+
+  test('uses custom ascending text when provided', async () => {
+    options.ascendingText = 'A to Z'
+    new MOJFrontend.SortableTable(options)
+
+    const nameHeaderButton = queryByRole(component, 'button', { name: 'Name' })
+    const statusBox = queryByRole(component.parentElement, 'status')
+
+    await user.click(nameHeaderButton)
+    await user.click(nameHeaderButton)
+
+    expect(statusBox).toHaveTextContent('Sort by Name (A to Z)')
+  })
+
+  test('uses custom descending text when provided', async () => {
+    options.descendingText = 'Z to A'
+    new MOJFrontend.SortableTable(options)
+
+    const nameHeaderButton = queryByRole(component, 'button', { name: 'Name' })
+    const statusBox = queryByRole(component.parentElement, 'status')
+
+    await user.click(nameHeaderButton)
+
+    expect(statusBox).toHaveTextContent('Sort by Name (Z to A)')
+  })
+
+  test('uses all custom options together', async () => {
+    options = {
+      table: component,
+      statusMessage: 'component sorted by %heading% in %direction% order',
+      ascendingText: 'lowest to highest',
+      descendingText: 'highest to lowest'
+    }
+    new MOJFrontend.SortableTable(options)
+
+    const elevationHeaderButton = queryByRole(component, 'button', {
+      name: 'Elevation'
+    })
+    const statusBox = queryByRole(component.parentElement, 'status')
+
+    await user.click(elevationHeaderButton)
+    expect(statusBox).toHaveTextContent(
+      'component sorted by Elevation in lowest to highest order'
+    )
+
+    await user.click(elevationHeaderButton)
+    expect(statusBox).toHaveTextContent(
+      'component sorted by Elevation in highest to lowest order'
+    )
+  })
+
+  test('allows reinitialization of component without duplicating functionality', () => {
+    const { component, options } = createComponent()
+    new MOJFrontend.SortableTable(options)
+    new MOJFrontend.SortableTable(options) // Initialize again
+
+    // Check that we don't have duplicate buttons in headers
+    const headers = component.querySelectorAll('th[aria-sort]')
+    headers.forEach((header) => {
+      const buttons = header.querySelectorAll('button')
+      expect(buttons).toHaveLength(1)
+    })
+  })
+
+  test('maintains original sort when reinitialized', async () => {
+    const { component, options } = createComponent()
+    new MOJFrontend.SortableTable(options)
+
+    const elevationHeaderButton = queryByRole(component, 'button', {
+      name: 'Elevation'
+    })
+    await user.click(elevationHeaderButton)
+
+    new MOJFrontend.SortableTable(options) // Reinitialize
+
+    const cells = component.querySelectorAll('tbody tr td:nth-child(2)')
+    const values = Array.from(cells).map((cell) =>
+      parseInt(cell.getAttribute('data-sort-value'))
+    )
+
+    expect(values).toEqual([5895, 6961, 8611, 8850])
+    expect(elevationHeaderButton.parentElement).toHaveAttribute(
+      'aria-sort',
+      'ascending'
+    )
+  })
+})

package/moj/components/sub-navigation/_sub-navigation.scss

@@ -6,49 +6,45 @@
   margin-bottom: govuk-spacing(7);
 }
 
-
 .moj-sub-navigation__list {
-  font-size: 0; // Removes white space when using inline-block on child element.
-  list-style: none;
   margin: 0;
   padding: 0;
+  font-size: 0; // Removes white space when using inline-block on child element.
+  list-style: none;
 
   @include govuk-media-query($from: tablet) {
-    box-shadow: inset 0 -1px 0 $govuk-border-colour;
     width: 100%;
+    box-shadow: inset 0 -1px 0 $govuk-border-colour;
   }
 }
 
-
 .moj-sub-navigation__item {
   @include govuk-font(19);
-  box-shadow: inset 0 -1px 0 $govuk-border-colour;
   display: block;
   margin-top: -1px;
+  box-shadow: inset 0 -1px 0 $govuk-border-colour;
 
   &:last-child {
     box-shadow: none;
   }
 
   @include govuk-media-query($from: tablet) {
-    box-shadow: none;
     display: inline-block;
-    margin-right: govuk-spacing(4);
     margin-top: 0;
+    margin-right: govuk-spacing(4);
+    box-shadow: none;
   }
-
 }
 
-
 .moj-sub-navigation__link {
   @include govuk-link-common;
   @include govuk-link-style-default;
   display: block;
+  position: relative;
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: govuk-spacing(3);
   text-decoration: none;
-  position: relative;
 
   @include govuk-media-query($from: tablet) {
     padding-left: 0;
@@ -64,54 +60,54 @@
   }
 
   &:focus {
-    color: govuk-colour("black"); // Focus colour on yellow should really be black.
     position: relative; // Ensure focus sits above everything else.
+    color: govuk-colour("black"); // Focus colour on yellow should really be black.
     box-shadow: none;
   }
 
-  &:focus:before {
-    background-color: govuk-colour("black");
+  &:focus::before {
     content: "";
     display: block;
-    height: 100%;
-    position: absolute; bottom: 0; left: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
     width: 5px;
+    height: 100%;
+    background-color: govuk-colour("black");
 
     @include govuk-media-query($from: tablet) {
-      height: 5px;
       width: 100%;
+      height: 5px;
     }
   }
-
 }
 
-
 .moj-sub-navigation__link[aria-current="page"] {
-  color: $govuk-link-active-colour;
   position: relative;
+  color: $govuk-link-active-colour;
   text-decoration: none;
 
-  &:before {
-    background-color: $govuk-link-colour;
+  &::before {
     content: "";
     display: block;
-    height: 100%;
-    position: absolute; bottom: 0; left: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
     width: 5px;
+    height: 100%;
+    background-color: $govuk-link-colour;
 
     @include govuk-media-query($from: tablet) {
-      height: 5px;
       width: 100%;
+      height: 5px;
     }
-
   }
 
   &:hover {
     color: $govuk-link-hover-colour;
   }
 
-  &:focus:before {
+  &:focus::before {
     background-color: govuk-colour("black");
   }
-
 }

package/moj/components/tag/_tag.scss

@@ -4,52 +4,51 @@
 
 .moj-tag {
   border: 2px solid $govuk-brand-colour;
-  background-color: $govuk-brand-colour;
   color: govuk-colour("white");
+  background-color: $govuk-brand-colour;
 
   &--purple {
     border: 2px solid govuk-colour("purple");
-    background-color: govuk-colour("purple");
     color: govuk-colour("white");
+    background-color: govuk-colour("purple");
   }
 
   &--bright-purple {
     border: 2px solid govuk-colour("bright-purple");
-    background-color: govuk-colour("bright-purple");
     color: govuk-colour("white");
+    background-color: govuk-colour("bright-purple");
   }
 
   &--red,
   &--error {
     border: 2px solid govuk-colour("red");
-    background-color: govuk-colour("red");
     color: govuk-colour("white");
+    background-color: govuk-colour("red");
   }
 
   &--green,
   &--success {
     border: 2px solid govuk-colour("green");
-    background-color: govuk-colour("green");
     color: govuk-colour("white");
+    background-color: govuk-colour("green");
   }
 
   &--blue,
   &--information {
     border: 2px solid govuk-colour("blue");
-    background-color: govuk-colour("blue");
     color: govuk-colour("white");
+    background-color: govuk-colour("blue");
   }
 
   &--black {
     border: 2px solid govuk-colour("black");
-    background-color: govuk-colour("black");
     color: govuk-colour("white");
+    background-color: govuk-colour("black");
   }
 
   &--grey {
     border: 2px solid govuk-colour("dark-grey");
-    background-color: govuk-colour("dark-grey");
     color: govuk-colour("white");
+    background-color: govuk-colour("dark-grey");
   }
-
 }

package/moj/components/task-list/_task-list.scss

@@ -3,10 +3,10 @@
    ========================================================================== */
 
 .moj-task-list {
-  list-style-type: none;
-  padding-left: 0;
   margin-top: 0;
   margin-bottom: 0;
+  padding-left: 0;
+  list-style-type: none;
   @include govuk-media-query($from: tablet) {
     min-width: 550px;
   }
@@ -14,7 +14,7 @@
 
 .moj-task-list__section {
   display: table;
-  @include govuk-font($size:24, $weight: bold);
+  @include govuk-font($size: 24, $weight: bold);
 }
 
 .moj-task-list__section-number {
@@ -29,18 +29,19 @@
 .moj-task-list__items {
   @include govuk-font($size: 19);
   @include govuk-responsive-margin(9, "bottom");
-  list-style: none;
   padding-left: 0;
+  list-style: none;
   @include govuk-media-query($from: tablet) {
     padding-left: govuk-spacing(6);
   }
 }
 
 .moj-task-list__item {
-  border-bottom: 1px solid $govuk-border-colour;
+  // stylelint-disable-next-line declaration-no-important
   margin-bottom: 0 !important;
   padding-top: govuk-spacing(2);
   padding-bottom: govuk-spacing(2);
+  border-bottom: 1px solid $govuk-border-colour;
   @include govuk-clearfix;
 }
 
@@ -51,8 +52,8 @@
 .moj-task-list__task-name {
   display: block;
   @include govuk-media-query($from: 450px) {
-    float: left;
     width: 75%;
+    float: left;
   }
 }
 
@@ -61,8 +62,8 @@
   margin-bottom: govuk-spacing(1);
 
   @include govuk-media-query($from: 450px) {
-    float: right;
     margin-top: 0;
     margin-bottom: 0;
+    float: right;
   }
 }

package/moj/components/ticket-panel/_ticket-panel.scss

@@ -11,10 +11,12 @@
     @include govuk-media-query($from: desktop) {
       display: flex;
       flex-wrap: nowrap;
+    }
+  }
 
-      & > * + * {
-        margin-left: govuk-spacing(3);
-      }
+  &--inline > * + * {
+    @include govuk-media-query($from: desktop) {
+      margin-left: govuk-spacing(3);
     }
   }
 
@@ -25,30 +27,36 @@
   &__content {
     display: block;
     position: relative;
-    background-color: govuk-colour("light-grey");
-    padding: govuk-spacing(4);
     margin-bottom: govuk-spacing(3);
-    flex-grow: 1;
+    padding: govuk-spacing(4);
     border-left: 4px solid transparent;
+    background-color: govuk-colour("light-grey");
+    flex-grow: 1;
 
     &--grey {
       border-left-color: $govuk-border-colour;
     }
+
     &--blue {
       border-left-color: govuk-colour("blue");
     }
+
     &--red {
       border-left-color: govuk-colour("red");
     }
+
     &--yellow {
       border-left-color: govuk-colour("yellow");
     }
+
     &--green {
       border-left-color: govuk-colour("green");
     }
+
     &--purple {
       border-left-color: govuk-colour("purple");
     }
+
     &--orange {
       border-left-color: govuk-colour("orange");
     }