Update modal.mdx

Added modal images

Author: Ingrid Hagelund

docs/components/modal.mdx

@@ -20,33 +20,37 @@ thoughtfully and sparingly.
 
 ## Options
 
-### Title
-
-All dialogs must have a title. Titles appear in bold at the top of the dialog and use a few words to convey the outcome
-of what will happen if a user continues with an action.
+<Guideline title="Title" image="modal-options-title.svg">
+  All modals must have a title. Titles appear in bold at the top of the dialog and use a few words to convey the outcome
+  of what will happen if a user continues with an action.
+</Guideline>
 
 ## Behaviors
 
+<Guideline title="Behaviors" image="modal-behaviors.svg">
 Modals should:
 
 - Require that the user take an action.
 - Close when the user presses the `X` button, the `Cancel` button, the `Esc` key, or when they complete the main action.
 - Make all content behind the overlay become inactive.
+ 
+</Guideline>
 
 ## Usage guidelines
 
-### Keep it simple
-
-Use modals when merchants must complete an action before they can continue with the main workflow. Avoid using modals to
+<Guideline title="Keep it simple" image="modal-usage-guidelines-1-do.svg" good>
+  Use modals when merchants must complete an action before they can continue with the main workflow. Avoid using modals to
 display complex forms or large amounts of information.
+</Guideline>
 
-### Two buttons only
-
+<Guideline title="Two buttons only" image="modal-usage-guidelines-2-do.svg" good>
 Don't use more than two buttons (primary and secondary) at the bottom. This prevents unclear action hierarchy and
 crowding on mobile screens. Since modals are for focused tasks, they should have focused actions. In some cases however,
 a tertiary action may be appropriate.
+</Guideline>
+<Guideline image="modal-usage-guidelines-2-dont.svg" bad></Guideline>
 
-### Button layout
-
+<Guideline title="Button layout" image="modal-usage-guidelines-3-do.svg" good>
 The cancel action should always be to the left, while the main action is to the right. Buttons are placed at the bottom
 of the box.
+</Guideline>