Merge pull request #3428 from department-of-veterans-affairs/db/updat…

…e-alert-formatting-3239

Update formatting

src/_components/alert/alert-sign-in.md

@@ -19,21 +19,7 @@ anchors:
 ---
 
 ## Examples
-
-### Required sign-in (Verified)
-{% include component-example.html alt="An example of a sign-in alert for all products that require sign-in with a verified account." file="/images/components/alert-sign-in/required-sign-in-verified.png" caption="An example of a sign-in alert for all products that require sign-in with a verified account" reverse=true %}
-
-### Optional sign-in (Verified)
-{% include component-example.html alt="An example of a sign-in alert for forms that support optional sign-in with a verified account." file="/images/components/alert-sign-in/optional-sign-in-verified.png" caption="An example of a sign-in alert for forms that support optional sign-in with a verified account." reverse=true %}
-
-### Verify with ID.me
-{% include component-example.html alt="An example of a sign-in alert for unverified ID.me accounts" file="/images/components/alert-sign-in/verify-with-idme.png" caption="An example of a sign-in alert for unverified ID.me accounts" reverse=true %}
-
-### Verify with Login.gov
-{% include component-example.html alt="An example of a sign-in alert for unverified Login.gov accounts." file="/images/components/alert-sign-in/verify-with-logingov.png" caption="An example of a sign-in alert for unverified Login.gov accounts." reverse=true %}
-
-### Sign-in with another account
-{% include component-example.html alt="An example of a sign-in alert for unverified My HealtheVet accounts." file="/images/components/alert-sign-in/sign-in-with-a-different-account.png" caption="An example of a sign-in alert for unverified My HealtheVet accounts." reverse=true %}
+{% include content/file-upload.md %}
 
 ## Usage
 

src/_includes/content/sign-in-alert-examples.md

@@ -0,0 +1,14 @@
+### Required sign-in (Verified)
+{% include component-example.html alt="An example of a sign-in alert for all products that require sign-in with a verified account." file="/images/components/alert-sign-in/required-sign-in-verified.png" caption="An example of a sign-in alert for all products that require sign-in with a verified account" reverse=true %}
+
+### Optional sign-in (Verified)
+{% include component-example.html alt="An example of a sign-in alert for forms that support optional sign-in with a verified account." file="/images/components/alert-sign-in/optional-sign-in-verified.png" caption="An example of a sign-in alert for forms that support optional sign-in with a verified account." reverse=true %}
+
+### Verify with ID.me
+{% include component-example.html alt="An example of a sign-in alert for unverified ID.me accounts" file="/images/components/alert-sign-in/verify-with-idme.png" caption="An example of a sign-in alert for unverified ID.me accounts" reverse=true %}
+
+### Verify with Login.gov
+{% include component-example.html alt="An example of a sign-in alert for unverified Login.gov accounts." file="/images/components/alert-sign-in/verify-with-logingov.png" caption="An example of a sign-in alert for unverified Login.gov accounts." reverse=true %}
+
+### Sign-in with another account
+{% include component-example.html alt="An example of a sign-in alert for unverified My HealtheVet accounts." file="/images/components/alert-sign-in/sign-in-with-a-different-account.png" caption="An example of a sign-in alert for unverified My HealtheVet accounts." reverse=true %}

src/_patterns/help-users-to/sign-in.md

@@ -38,23 +38,11 @@ This pattern works differently depending on the product and the account type a p
 **To design and build, follow these steps:**
 
 1. Choose 1 of the 2 blue sign-in alert variations. If a person signs in with a verified account, they should only encounter an initial sign-in alert.
-  #### Required sign-in (Verified)
-  {% include component-example.html alt="An example of a sign-in alert for all products that require sign-in with a verified account." file="/images/components/alert-sign-in/required-sign-in-verified.png" caption="An example of a sign-in alert for all products that require sign-in with a verified account" reverse=true %}
-
-  #### Optional sign-in (Verified)
-  {% include component-example.html alt="An example of a sign-in alert for forms that support optional sign-in with a verified account." file="/images/components/alert-sign-in/optional-sign-in-verified.png" caption="An example of a sign-in alert for forms that support optional sign-in with a verified account." reverse=true %}
 
 2. Implement both of the yellow verification alerts. If a person signs in with an unverified account, they should encounter 1 of the 2 variations. One is for unverified **Login.gov** and **ID.me** accounts, and one is for unverified **My HealtheVet** accounts.
   **Note:** This pattern is currently tailored to products that require verified (LOA3 or IAL2) accounts. If your product accepts unverified (LOA1 or IAL1) accounts, you'll need to adjust the content in the blue sign-in alert. And you won't need to implement the yellow verification alerts. Work with CAIA and the identity team to adjust for your situation.
 
-  #### Verify with ID.me
-  {% include component-example.html alt="An example of a sign-in alert for unverified ID.me accounts" file="/images/components/alert-sign-in/verify-with-idme.png" caption="An example of a sign-in alert for unverified ID.me accounts" reverse=true %}
-
-  #### Verify with Login.gov
-  {% include component-example.html alt="An example of a sign-in alert for unverified Login.gov accounts." file="/images/components/alert-sign-in/verify-with-logingov.png" caption="An example of a sign-in alert for unverified Login.gov accounts." reverse=true %}
-
-  #### Sign-in with another account
-  {% include component-example.html alt="An example of a sign-in alert for unverified My HealtheVet accounts." file="/images/components/alert-sign-in/verify-with-logingov.png" caption="An example of a sign-in alert for unverified My HealtheVet accounts." reverse=true %}
+{% include content/file-sign-in-alert-examples.md %}
 
 **All teams should take these steps when using this pattern:**