Add selects with images

[alyblenkin]

Description

Add selects with images

---

Checklist

• Does it need UI/UX design?
  • If yes, describe the UI/UX requirements or attach a Figma link in the "Design" section.
• Does it need API design?
  • If yes, specify the endpoints, methods, or data structures needed.
• Does it need design around state flow?
  • If yes, outline the state flow requirements.
• Does it need a test plan?
  • If yes, add the test plan as a comment in this task or attach the document.

---

User Story

• As a form designer,
  I want add selects with images with different appearances
  so that so that data collectors can have a visual reference when selecting choices.

Appearances for select one/multiple

• No-appearance selects
  Changing from displaying all images in one column to multiple columns by default. Displaying in a comfortable view depending on the size of the device (Desktop 3 cards, tablet 2, phone 1)
  Figma link

• Images, no buttons
  Choices in a grid with no formal button in the label area, but the option is highlighted with a tick in the corner. The user can tap anywhere on the image. Enketo displays answer choices side by side with minimal padding and without radio buttons or checkboxes.
  Figma link

• Grid: columns appearance
  Same as regular selects, display the options in columns depending on the size of the device in a comfortable view (Desktop 3 cards, tablet 2, phone 1)
  Figma link

• Grid: columns-pack appearance
  Try to accommodate as many options as possible in a single line as possible (Displays max 5 for large devices, and scales down accordingly per screen size). For users who want to conserve space to prevent the user from scrolling to see more options. Not ideal for accessibility.
  Figma link TDB, Exploration

• Grid: columns-n appearance
  Users can decide the number of columns and enforce that number (2, 3, 3+), but it caps at 5.
  Figma link

• Long label
  We don't want to truncate information so the box will keep expanding. Other options should also expand so everything in that row should be the same height.
  Figma link

• Disabled state
  Images should still be partially visible with 60% opacity for the images with disabled text styles.
  Figma link

Design

• Figma Link
• UI/UX Design Doc: It's this GitHub issue, along with the Figma design linked previously.

---

Dependencies

• [dependency]
• [dependency]

---

Additional Notes

• [notes]
• [notes]

---

Related Issues

• [issue link]
• [epic issue link, if applicable]

[alyblenkin]

@lognaturel I've started to flesh this one out and added some questions to figma. I'm worried that adding more than 5 images when you have a label and button will be pushing it. I think we could squeeze 7 for selects without buttons.

I didn't include likert, but I assume that's out of scope for this one.

[lognaturel]

I didn't include likert, but I assume that's out of scope for this one.

That's right.