Skip to content

Convert tables with single fields to unordered lists#5995

Open
kr8n3r wants to merge 2 commits into
mainfrom
convert-tables-to-lists
Open

Convert tables with single fields to unordered lists#5995
kr8n3r wants to merge 2 commits into
mainfrom
convert-tables-to-lists

Conversation

@kr8n3r

@kr8n3r kr8n3r commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

What

Convert tables with single fields to use an unordered list.

  • app/templates/views/uploads/contact-list/contact-list.html
  • app/templates/views/returned-letter-summary.html

utilising the Design system's govuk-list and extending it to create a border list and list with metadata

Review

To test the contact-list, upload a CSV or phone number or email addresses.

To test the list of returned letters you can use the below script to insert some dummy data in your local DB

INSERT INTO returned_letters (
    id, 
    reported_at, 
    service_id, 
    notification_id, 
    created_at, 
    updated_at
) VALUES 
(
    '8517c43e-63fa-4921-bdd0-eef86683f23d', 
    '2026-07-01', 
    'yourserviceid', 
    'cd44b76e-bdf3-44e2-94ad-88e86c75fd59', 
    '2026-07-01 12:51:28.011264', 
    NULL
),
(
    '06f55df0-5d51-4fce-a7c2-c50331027dd2', 
    '2026-07-01', 
    'yourserviceid', 
    '39b579c0-ec0e-4365-86e3-8ad9e34ee02f', 
    '2026-07-01 08:02:42.989609', 
    NULL
);

and then view the list on services/<serviceID>/returned-letters

Visuals

Before
list-before

After
list-after

Before
metadatalist-before

After
metadatalist-after

@kr8n3r
kr8n3r force-pushed the convert-tables-to-lists branch 3 times, most recently from bd62344 to 5263833 Compare July 18, 2026 15:30
A list is a more appropriate way to display one
item at a time as there is no relationship.

To achieve the visual of separating items, the
govuk-list was extended with a 'bordered' variant.

Includes updates to tests
@kr8n3r
kr8n3r force-pushed the convert-tables-to-lists branch from 5263833 to 3a4376c Compare July 19, 2026 06:23
A list is a more appropriate way to display one
item at a time as there is no relationship.

The base markup of this is bordered govuk-list
variant created here for the contact-list and then
extended with `govuk-list__with-link-and-metadata`
modifier which styles the link and paragraph.

For styling, I was torn between applying overriding
classes that are available, such as .hint and
govuk-!-font-16 directly in markup vs
adding styling in SCSS. There are pros and cons
for both approaches.
@kr8n3r
kr8n3r force-pushed the convert-tables-to-lists branch from 3a4376c to d79847a Compare July 19, 2026 10:31
@kr8n3r
kr8n3r marked this pull request as ready for review July 20, 2026 06:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant