[Design] Redesign skip logic UI (hide/show questions)

[nichole-aquino]

Overview

Form builders can easily add hide/show logic within the edit component screen.

Context

Reference:

• Eng ticket: TK
• Implement skip logic (hiding/showing questions based on previous answers) #367
• Figma

Revisit the logic UI to address the following issues:

• With the addition of the optional help text and information box, the overall height of the edit screen increases, making it cumbersome for builders to set logic. With the UI proposed here, builders must add a rule at the bottom, scroll up to the preview to read instructions, then scroll back down to set the action.
• The accordion to unfurl the hide/show logic can be mistaken for the accordion of the information box.

Solution:

• Simplify this experience by allowing builders to add logic within the question/answer option UI
• To add a rule: Click 'Add rule' next to either answer option to open a modal. Set the rule(s) and save.
  
  
  
• To edit a rule: Click the link to the right of the answer option to open the modal, where you can edit the rule.
  

Acceptance Criteria

The changes should be made to the following question types:

• Single select (aka radio buttons)
• Checkbox
• Future component (number field like date or zipcode)

Research Questions

• Optional: Any initial questions for research

Tasks

Research, design, and engineering work needed to complete the story.

• [ ]

Definition of done

The "definition of done" ensures our quality standards are met with each bit of user-facing behavior we add. Everything that can be done incrementally should be done incrementally, while the context and details are fresh. If it’s inefficient or “hard” to do so, the team should figure out why and add OPEX/DEVEX backlog items to make it easier and more efficient.

• Behavior
  • Acceptance criteria met
  • Implementation matches design decisions
• Documentation
  • ADRs (/documents/adr folder)
  • Relevant README.md(s)
• Code quality
  • Code refactored for clarity and no design/technical debt
  • Adhere to separation of concerns; code is not tightly coupled, especially to 3rd party dependencies; dependency rule followed
  • Code is reviewed by team member
  • Code quality checks passed
• Security and privacy
  • Automated security and privacy gates passed
• Testing tasks completed
  • Automated tests pass
  • Unit test coverage of our code >= 90%
• Build and deploy
  • Build process updated
  • API(s) are versioned
  • Feature toggles created and/or deleted. Document the feature toggle
  • Source code is merged to the main branch

Decisions

• Optional: Any decisions we've made while working on this story