feat(in-app-messaging): Add modal UI component

[Samaritan1011001]

Description of changes

Adds the modal support to in-app-messaging. Similar to a Full Screen message with a slightly different layout.
A function in utils.ts is modified to fit the needed design for modal.
Tests have been modified and added to validated the changes.

PORTRAIT

LANDSCAPE

Issue #, if available

Description of how you validated changes

Different test cases as mentioned below were manually validated in addition to the unit tests for Modal.

• Only text of normal length
• Text (Header and Body) with max length
• Modal message with image
• Image + text
• Text + buttons
• Only a single button with action to open a url link
• Image + text + 2 buttons
• Image + long text + 2 buttons

Checklist

• PR description included
• yarn test passes
• Tests are changed or added
• Relevant documentation is changed or added (and PR referenced)

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[calebpollman]

@Samaritan1011001 Thanks for opening this! Can you please add screenshots similar to the In-App Messaging FullScreenMessage PR?

[calebpollman]

@Samaritan1011001 Looks like a great start! Left some minor feedback

[codecov-commenter]

Codecov Report

Merging #9712 (1b6b60d) into in-app-messaging/staging (5e454ad) will increase coverage by 0.82%.
The diff coverage is 100.00%.

@@                     Coverage Diff                      @@
##           in-app-messaging/staging    #9712      +/-   ##
============================================================
+ Coverage                     74.52%   75.34%   +0.82%     
============================================================
  Files                           318      319       +1     
  Lines                         20284    19750     -534     
  Branches                       4421     4312     -109     
============================================================
- Hits                          15117    14881     -236     
+ Misses                         5028     4763     -265     
+ Partials                        139      106      -33     

Impacted Files	Coverage Δ
.../InAppMessaging/components/BannerMessage/styles.ts	100.00% <ø> (ø)
...Messaging/components/ModalMessage/ModalMessage.tsx	100.00% <100.00%> (+100.00%)	⬆️
...c/InAppMessaging/components/ModalMessage/styles.ts	100.00% <100.00%> (ø)
...essaging/components/hooks/useMessageProps/utils.ts	98.21% <100.00%> (+0.06%)	⬆️
...vue/src/components/authenticator/ConfirmSignIn.vue	100.00% <0.00%> (+6.25%)	⬆️
...aws-amplify-vue/src/components/storage/S3Image.vue	100.00% <0.00%> (+7.14%)	⬆️
...vue/src/components/authenticator/ConfirmSignUp.vue	100.00% <0.00%> (+9.52%)	⬆️
...fy-vue/src/components/authenticator/PhoneField.vue	100.00% <0.00%> (+11.11%)	⬆️
...vue/src/components/authenticator/Authenticator.vue	100.00% <0.00%> (+12.50%)	⬆️
...plify-vue/src/components/authenticator/SignOut.vue	100.00% <0.00%> (+21.42%)	⬆️
... and 11 more

📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

[calebpollman]

Left mostly styling related comments. Thanks for addressing the feedback!

[calebpollman]

Wonder if we should remove this property so the top of the close button and the top of the image line up. Also, why do we need a flex property here?

[Samaritan1011001]

Yeah, removed marginVertical
Flex is needed to center the image while keeping the x mark at the end of the row.

[Samaritan1011001]

Hey @calebpollman, made the changes we discussed and the image is centered within the red box as shown below for reference. Let me know if that's what we had in mind.

[calebpollman]

Thanks for working through all the styling issues @Samaritan1011001 🚢

[cshfang]

Lgtm thanks!

[github-actions]

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server amplify-help forum.