alphagov / govuk-design-system-backlog

GOV.UK Design System Community Backlog
31 stars 2 forks source link

Support for conditionally showing items / rows when passing data in macros #198

Open edwardhorsford opened 5 years ago

edwardhorsford commented 5 years ago

What

I've frequently wanted to conditionally show or hide a single item in an array used the macros - such as the summary list or radios. At the moment this is rather awkward to do - but could be much simpler, especially for prototyping.

You can almost achieve this by adding logic at the end of the item, like so:

items: [
  {
    value: "admin",
    text: "Edit, view and manage",
    checked: false,
    hint: {
      text: "Edit the full case as well as manage case permissions"
    }
  },
  {
    value: "edit",
    text: "Edit and view",
    checked: true,
    hint: {
      text: "Edit the full case"            
    }
  } if foo == "bar"
]

However, because of #1494 it doesn't work. Even if it did, it might not be so obvious.

@GrilloPress suggested a flag on the item might work:

"display": variableTrueOrNotMate

My use case:

I have a page of radios. When the user first runs through it, it has one less option than when they run through again (and have the option of removing). The page is the same - I want to be able to conditionally show the last option based on data.

First time:

Screenshot 2019-07-19 at 13 31 39

Second time:

Screenshot 2019-07-19 at 13 31 29

If #1494 does get fixed, it does support this sortof - I'm not sure it's obvious / explicit though. Would be good to see if this is an issue others have come across.

GrilloPress commented 5 years ago

As @edwardhorsford mentions I raised the question of a flag to set a row as true or not. This is because I have a prototype which based on a radio button selection, certain rows should be shown.

I've encountered #1494 as well.

My use case

Contact type = GMS/PMS/other means the dates are optional, and most practices won't include them. But if they are there they are mandated (by NHS Improvement and NHS England) as being shown as optional

Contact type = AMPS means the dates are mandatory and should be included underneath the contact type

What I would want to happen

When items should not be displayed, items in the main list are hidden:

localhost_3000_submit-your-edec_sections_practice-details_return-user_new-practice-details_end-day= end-month= end-year=(Laptop with MDPI screen)

When items should be displayed (AMPS = true), the items are shown underneath contract type:

localhost_3000_submit-your-edec_sections_practice-details_return-user_new-practice-details_end-day=10 end-month=10 end-year=2020(Laptop with MDPI screen)

What the display flag would allow me to do

Use a radio button value to display rows in a summary list if they are true or not