Add classes to action items in the summary list component

[danboscaro]

handy for adding things like govuk-link--no-visited-state to action items

the docs look like the classes description is for the action wrapper but its listed under action items, i've rejigged the current description and added a new one for the action.item classes

[NickColley]

@danboscaro thanks for the pull request!

From a design point of view, have you thought about when you would want to add the no visited state?

There may be some improvements we could make to the default classes on this component, or even the guidance.

That aside, this looks like a reasonable feature, we will discuss this with the team as soon as we can. 👍

[danboscaro]

Hi @NickColley, our particular use case for this is...

on our service we have a set of pages that gather information on a users job.

the user then can "loop" around these pages to enter however many jobs they have.

on the check your answers page the list of jobs is played back with an index incorporated in the action link to denote which loop they went through if they need to jump back to a page and change something for that particular loop.

there is also an action to remove all details entered for a job

if for example they enter 2 jobs and on the check your answers page they update the job at index 0

then they remove the job at index 0, the job that was at index 1 becomes index 0, and the change links now show as visited even though the links they did visit relate to a different job

its a pretty edge case but we want to remove the visit state so not to cause confusion

thats where this has stemmed from anyways, but we're open to suggestions if there is a better way to handle this.

it was just an example to use this class, but there might be different classes that might be helpful for multiple action links so you could target individual links separately?

[NickColley]

I've made a note of what you've found in the backlog so others can comment on any possible guidance improvements: alphagov/govuk-design-system-backlog#182

We've discussed this feature as a team and are happy to get this in to a future release :)

I'm going to do another review now.

[danboscaro]

nice one, cheers @NickColley

Ill keep an eye on that backlog item

[NickColley]

I have pulled this locally and tested this macro:

Input macro code

{{ govukSummaryList({
  rows: [
    {
      key: {
        text: "Name"
      },
      value: {
        text: "Sarah Philips"
      },
      actions: {
        classes: 'govuk-!-width-one-half',
        items: [
          {
            classes: 'govuk-!-font-weight-bold',
            href: "#",
            text: "Change",
            visuallyHiddenText: "name"
          }
        ]
      }
    }
  ]
}) }}

Output HTML

<dl class="govuk-summary-list">
    <div class="govuk-summary-list__row">
      <dt class="govuk-summary-list__key">
        Name
      </dt>
      <dd class="govuk-summary-list__value">
        Sarah Philips
      </dd>
        <dd class="govuk-summary-list__actions govuk-!-width-one-half">
            <a class="govuk-link govuk-!-font-weight-bold" href="#">
                Change<span class="govuk-visually-hidden"> name</span>
            </a>
        </dd>
    </div>
</dl>

Output screenshot

[NickColley]

This looks excellent to me! Thanks for this contribution.

We'll need another review from the team and once they're happy we can merge this and get it released.

It looks like you need to rebase this branch to bring it up to date, if you want me to do this for you let me know!

[danboscaro]

updated...

[NickColley]

Nice! Thanks for doing that, ready for a second review.

[hannalaakso]

Looks great, thanks @danboscaro 🙌