FOUR-19136 | CSS Updates for Screen Templates Panel

[mcraeteisha]

Issue

Ticket: FOUR-19136

This PR adds updated styling to Screen Template Cards in the Screen Templates Panel. Updates include:

• Adds a b-collapse to ScreenTemplateCards.vue that reveals 'Apply Options' when a card is clicked.
• Adds icons and checkboxes for 'Apply Options' (Css, Fields, Layout).
• Adds 'Apply' and 'Cancel' button to each Screen Template Card.

How to Test

1. Go to branch observation/FOUR-19136 in screen-builder and processmaker.
2. Open a Screen in the Screen Builder.
3. Select 'Templates' from the top menu.
   • Screen Template Cards should appear for the templates in your environment.
4. Select a Screen Template Card.
   • The card should expand and the contents of the card should match the Figma file.
   • Note: if you select one of the options in the card, the 'Apply' button will become enabled.

ci:next
ci:screen-builder:observation/FOUR-19136
ci:deploy

Code Review Checklist

• I have pulled this code locally and tested it on my instance, along with any associated packages.
• This code adheres to ProcessMaker Coding Guidelines.
• This code includes a unit test or an E2E test that tests its functionality, or is covered by an existing test.
• This solution fixes the bug reported in the original ticket.
• This solution does not alter the expected output of a component in a way that would break existing Processes.
• This solution does not implement any breaking changes that would invalidate documentation or cause existing Processes to fail.
• This solution has been tested with enterprise packages that rely on its functionality and does not introduce bugs in those packages.
• This code does not duplicate functionality that already exists in the framework or in ProcessMaker.
• This ticket conforms to the PRD associated with this part of ProcessMaker.

[tokensPM]

QA server K8S was successfully deployed https://ci-bedd5a3bf4.engk8s.processmaker.net

[estebangallego]

Works as expected!