Form image updates for component usage page and pattern page (#2559)

* update images for form usage and patter

Updated:
Component:
• required pattern image
• optional pattern image

Pattern:
• required pattern image
• optional pattern image
• do and don't required form image

* trouble shooting image size

• optional/required images should be 6 columns not 8

• don't image missing

* trouble shooting images

added in caption markdown

* Update index.mdx

added break after when to use on pattern page

* updated capitalization

• updated do/don't capitalization in pattern section

* updated images

reuploaded the images at new sizes

* Update Elements.png

updated element image

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/pages/components/form/usage.mdx

@@ -291,29 +291,42 @@ characters."_
 
 ### Optional versus required fields
 
-When designing your form, consider the purpose and the use case, and note if the majority of the fields are **required** or **optional**. 
+When designing your form, consider the purpose and the use case, and note if the
+majority of the fields are **required** or **optional**.
 
-- If the majority of the fields are required, mark **only** the optional fields with (optional). 
-- If the majority of the fields are optional, mark **only** the required fields  with (required). 
+- If the majority of the fields are required, mark **only** the optional fields
+  with (optional).
+- If the majority of the fields are optional, mark **only** the required fields 
+  with (required).
 
-Using the appropriate pattern based on the use case will reduce visual noise and clutter; helping your users to more quickly and accurately complete the form. It will also ensure consistency through and across products. 
+Using the appropriate pattern based on the use case will reduce visual noise and
+clutter; helping your users to more quickly and accurately complete the form. It
+will also ensure consistency through and across products.
 
-If you choose to mark only optional form fields, it is recommended that an instruction precedes the form stating either “All fields are required” or “All fields are required unless marked optional”. 
+If you choose to mark only optional form fields, it is recommended that an
+instruction precedes the form stating either “All fields are required” or “All
+fields are required unless marked optional”.
 
 <Row>
 <Column colLg={8}>
 
-![Example of a short user sign-up form using the Optional pattern](https://user-images.githubusercontent.com/48838320/131397684-0882cf1e-90b8-4029-ac26-bc111329f323.png)
-Example of a short user sign-up form using the Optional pattern
+![Example of a short user sign-up form using the optional pattern](images/form-usage-optional.png)
+
+<Caption>
+  Example of a short user sign-up form using the optional pattern
+</Caption>
 
 </Column>
 </Row>
 
 <Row>
 <Column colLg={8}>
 
-![Example of product configuration properties using the Required pattern](https://user-images.githubusercontent.com/48838320/131397758-015ea0ea-e3ba-4a67-947b-e4215235e2b5.png)
-Example of product configuration properties using the Required pattern
+![Example of product configuration properties using the required pattern](images/form-usage-required.png)
+
+<Caption>
+  Example of product configuration properties using the required pattern
+</Caption>
 
 </Column>
 </Row>

src/pages/patterns/forms-pattern/index.mdx

@@ -122,61 +122,94 @@ Advantages:
 
 ### Optional vs. mandatory
 
-Forms items can be labeled as either optional or required depending on several factors. A common distinction in IBM products for using required or optional is the forms complexity.
-1. **Simple forms** - generally shorter and/or user- or consumer-oriented; such as sign-up and contact forms and checkout screens. Most of the fields will tend to be required.
-2. **Complex forms** - generally longer and product-oriented; contain properties and settings that are used to configure Enterprise software.  Although they will usually contain at least one required field, the majority of the fields will tend to be optional. 
+Forms items can be labeled as either optional or required depending on several
+factors. A common distinction in IBM products for using required or optional is
+the forms complexity.
+
+1. **Simple forms** - generally shorter and/or user- or consumer-oriented; such
+   as sign-up and contact forms and checkout screens. Most of the fields will
+   tend to be required.
+2. **Complex forms** - generally longer and product-oriented; contain properties
+   and settings that are used to configure Enterprise software.  Although they
+   will usually contain at least one required field, the majority of the fields
+   will tend to be optional.
+
+Note if the majority of the fields are **required** or **optional**, as the
+overall number of form fields for your entire product should inform your
+treatment. The pattern used should be consistent throughout your product, or at
+minimum, consistent between all of the same types of form within your product.
+
+- If the majority of the fields are required, mark **only** the optional field
+  labels with _(optional)_.
+- If the majority of the fields are optional, mark **only** the required field
+  labels with _(required)_.
+
+When designing your form, consider the purpose and the use case to reduce visual
+noise and clutter to allow your user to better complete their task. This will
+also ensure consistency through and across products.
+
+An excess of optional fields should be avoided. If it’s necessary to have a
+large number of optional fields, we recommend devoting an entire section to
+optional fields to avoid excessive repetition.
 
-
-Note if the majority of the fields are **required** or **optional**, as the overall number of form fields for your entire product should inform your treatment. The pattern used should be consistent throughout your product, or at minimum, consistent between all of the same types of form within your product. 
-- If the majority of the fields are required, mark **only** the optional field labels with *(optional)*. 
-- If the majority of the fields are optional, mark **only** the required field labels with *(required)*. 
-
-
-When designing your form, consider the purpose and the use case to reduce visual noise and clutter to allow your user to better complete their task. This will also ensure consistency through and across products. 
-
-
-An excess of optional fields should be avoided. If it’s necessary to have a large number of optional fields, we recommend devoting an entire section to optional fields to avoid excessive repetition.
 <Row>
 <Column colLg={8}>
 
-![Example of a short user sign-up form using the Optional pattern](https://user-images.githubusercontent.com/48838320/131423440-a369fc22-893b-4d9c-9950-adf837ea712a.png)
+![Example of a short user sign-up form using the optional pattern](images/form-usage-optional.png)
+
+<Caption>
+  Example of a short user sign-up form using the optional pattern
+</Caption>
 
 </Column>
 </Row>
+
 <Row>
 <Column colLg={8}>
 
-![Example of product configuration properties using the Required pattern](https://user-images.githubusercontent.com/48838320/131423528-58fa9767-6640-4878-bf02-9561886fef9a.png)
+![Example of product configuration properties using the required pattern](images/form-usage-required.png)
 
+<Caption>
+  Example of product configuration properties using the required pattern
+</Caption>
 
 </Column>
 </Row>
 
 #### When to use
 
+<br />
 
 <DoDontRow>
 <DoDont
+colMd={6} colLg={6}
 caption="DO mark fields (required) when the majority of the fields are optional.">
 
-![DO mark fields (required) when the majority of the fields are optional.](https://user-images.githubusercontent.com/48838320/131426053-89fb3cf7-d9e1-497e-a41f-a1e6b5035666.png)
+![Do mark fields (required) when the majority of the fields are optional.](images/Do-Form-required.png)
 
 </DoDont>
 <DoDont
+colMd={6} colLg={6}
 type="dont"
 caption="DON'T mark fields (optional) when the majority of the fields are optional.">
 
-![DON'T mark fields (optional) when the majority of the fields are optional.](https://user-images.githubusercontent.com/48838320/131426096-8fbcde66-9f0e-48f4-8e40-20311d88ba8b.png)
+![Don't mark fields (optional) when the majority of the fields are optional.](images/Dont-form-required.png)
 
 </DoDont>
 </DoDontRow>
 
 #### Best practices
 
-- Consider the overall number of required and optional fields in the forms for your entire product. The pattern used should be consistent throughout your product, or at minimum consistent between all of the same type of form within your product.
-  - For example, if you have 100 types of connections properties forms and the fields are optional in 85 of the 100 forms, all 100 should use the required pattern. 
-- Use the techniques illustrated below in the [Default Values](#default-values) and [Designing for Longer Forms](#designing-for-longer-forms) sections in order to make your forms easier and more efficient to use. 
-
+- Consider the overall number of required and optional fields in the forms for
+  your entire product. The pattern used should be consistent throughout your
+  product, or at minimum consistent between all of the same type of form within
+  your product.
+  - For example, if you have 100 types of connections properties forms and the
+    fields are optional in 85 of the 100 forms, all 100 should use the required
+    pattern.
+- Use the techniques illustrated below in the [Default Values](#default-values)
+  and [Designing for Longer Forms](#designing-for-longer-forms) sections in
+  order to make your forms easier and more efficient to use.
 
 ### Text inputs
 
@@ -386,13 +419,20 @@ the user or formatting is in question, use placeholder text.
 
 #### Default values
 
-Default values can be set for for all types of inputs. Ensure that if a default value is provided, it is something that would commonly be used anyway and would not cause disruption or errors if the user forgets or opts not to make any changes to it before submitting the form. Good default values reduce cognitive load.
-
+Default values can be set for for all types of inputs. Ensure that if a default
+value is provided, it is something that would commonly be used anyway and would
+not cause disruption or errors if the user forgets or opts not to make any
+changes to it before submitting the form. Good default values reduce cognitive
+load.
 
 For example:
-- If you can detect or determine where your users are from, have their country pre-selected in a "Country" dropdown.
-- If there is a common or minimum value (i.e., a quota or memory limit), pre-fill that value.
-- If a text input can be detected or determined in advance (i.e.-company name), pre-fill that value.
+
+- If you can detect or determine where your users are from, have their country
+  pre-selected in a "Country" dropdown.
+- If there is a common or minimum value (i.e., a quota or memory limit),
+  pre-fill that value.
+- If a text input can be detected or determined in advance (i.e.-company name),
+  pre-fill that value.
 - If a start date is required, use the current date as the default.
 
 ### Buttons
@@ -882,9 +922,12 @@ in-depth accessibility guidance for each form element.
 
 ### Further reading
 
-- Nick Babich, 
-  [The Power of Defaults](https://uxplanet.org/the-power-of-defaults-992d50b73968)(UX Planet, 2017)
-- Raluca Budiu, [Marking Required Fields in Forms](https://www.nngroup.com/articles/required-fields/) (Nielsen Norman Group, 2019)
+- Nick Babich,
+  [The Power of Defaults](https://uxplanet.org/the-power-of-defaults-992d50b73968)(UX
+  Planet, 2017)
+- Raluca Budiu,
+  [Marking Required Fields in Forms](https://www.nngroup.com/articles/required-fields/)
+  (Nielsen Norman Group, 2019)
 - Andrew Coyle,
   [Design Better Forms](https://uxdesign.cc/design-better-forms-96fadca0f49c),
   (UX Collective, 2016)
@@ -894,11 +937,11 @@ in-depth accessibility guidance for each form element.
 - Marieke McCloskey,
   [Accordions Are Not Always the Answer for Complex Content on Desktops](https://www.nngroup.com/articles/accordions-complex-content/),
   Nielsen Norman Group, 2014)
-- Jakob Nielsen, 
-  [The Power of Defaults](https://www.nngroup.com/articles/the-power-of-defaults/)(Nielsen Norman Group, 2015)
-- Preibusch et al., [*The privacy economics of voluntary
-over-disclosure in Web forms*](http://preibusch.de/publications/Preibusch-Krol-Beresford__voluntary_over-disclosure.pdf)(2013)
-
+- Jakob Nielsen,
+  [The Power of Defaults](https://www.nngroup.com/articles/the-power-of-defaults/)(Nielsen
+  Norman Group, 2015)
+- Preibusch et al.,
+  [_The privacy economics of voluntary over-disclosure in Web forms_](http://preibusch.de/publications/Preibusch-Krol-Beresford__voluntary_over-disclosure.pdf)(2013)
 
 ## Feedback