Merge branch 'main' into authed-patterns/aw/184/prefill-pattern-code-…

…samples-content-updates

README.md

@@ -102,6 +102,20 @@ When a PR is created, a preview of those changes will be available after the [Pr
 
 The preview link can also be accessed directly using this pattern: `https://dev-design.va.gov/PR_NUMBER`. For example, `https://dev-design.va.gov/3435` where `3435` is the unique PR number visible in the PR title.
 
+### Preview Troubleshooting
+
+#### Check the branch name
+
+A preview environment will generate only when the PR has been created from a direct branch from the main repository. It does not work if the PR was created from a fork.
+
+You can confirm if your PR was created from a fork by looking at the branch name at the top of the PR. If you see your Github username in front of your branch name, this means the PR was created from a fork and the preview will not generate.
+
+![The top of a PR showing the branch to be merged into main. There is a Github username at the front of a branch name which means the branch is from a fork](https://raw.githubusercontent.com/department-of-veterans-affairs/vets-design-system-documentation/refs/heads/main/src/images/readme/pr-branch-from-fork.png)
+
+If this was done because you don't have write access to this repository, you can request that access by submitting a support request in the #vfs-platform-support Slack channel.
+
+#### Re-running the preview workflow
+
 If the preview has stopped working (for example if you're only seeing a 403 Forbidden error or similar), re-run the preview workflow by clicking "Details" next to the Preview check:
 
 ![A list of PR checks with an arrow pointing to the details link for the Preview workflow](https://raw.githubusercontent.com/department-of-veterans-affairs/vets-design-system-documentation/refs/heads/main/src/images/readme/pr-checks-preview-details.png)

src/_about/whats-new.md

@@ -9,12 +9,6 @@ title: What’s new?
   The latest news and updates on the Design System, Forms library and the Content style guide.
 </div>
 
-<va-alert
-  close-btn-aria-label="Close notification"
-  status="warning"
-  visible
-  uswds
->
   <h2 slot="headline">
     v1 components have now been deprecated
   </h2>
@@ -25,6 +19,47 @@ title: What’s new?
   </div>
 </va-alert>
 
+## Fall 2024
+
+### New and updated components
+* va-process-list-item: Add text to describe status by @powellkerry in #1362
+* Add custom message to va-file-input and update message in va-file-input-multiple by @ataker in #1367
+* va-table: add sorting variation by @it-harrison in #1358
+* va-file-input: add support for read-only mode by @pennja in #1300
+* va-date: add prop to make month optional by @it-harrison in #1377
+
+### Bug fixes
+* va-modal: set box-sizing to border-box to prevent text overflow by @powellkerry in #1357
+* va-accordion: open accordion when media is print by @ataker in #1363
+* va-process-list: update status eyebrow text to uppercase by @powellkerry in #1365
+* va-process-list: change color variable from usa to vads by @powellkerry in #1368
+* va-table: show table header for non-stacked & stacked small screen by @harshil1793 in #1364
+* va-table: update va-table-inner to properly scope table header row to columns by @1Copenut in #1370
+* va-select: add import for focusable mixin by @powellkerry in #1376
+* va-modal: set overflow-wrap:anywhere on modal content by @powellkerry in #1372
+* focusable: add tabindex selector by @powellkerry in #1380
+
+### Other changes
+* CSS Library: replace FA icons for action link and alert classes by @jamigibbs in #1371
+* CSS Library: style and image path updates for alert and action link modules by @jamigibbs in #1378
+* CSS Library: remove the /alerts image path by @jamigibbs in #1381
+
+### Design updates
+* [Design] Table variations #3137 
+* [Design]Update Alert spacing in Figma #3231 
+* Update breadcrumb spacing in Page templates - Design #3049 
+
+### Documentation updates  
+* Update guidance for Keep a record of submitted information pattern #3054 
+* Add List guidance to VADS #3206 
+* Alerts - Sign in - Documentation 
+* Issue with downloading logos (PNG format)
+* Update va-link External link variation guidance #3224
+* Multiple responses pattern and flow chart #3219
+* Update guidance for select component - Documentation #3251
+* Guidance for international phone numbers #3316
+* Update gender pattern #3289 
+
 ## Summer 2024
 
 The team synced up typography with USWDS v3 and continues to focus on syncing up iconography and replacing v1 components with their v3 equivalents.

src/_components/breadcrumbs.md

@@ -63,6 +63,11 @@ Start with "VA.gov home". Clearly indicate that the home page is the VA.gov home
 
 * The breadcrumb should be placed below the header and above the main content.
 * The placement of the breadcrumb must be consistent from page to page.
+* Spacing for the breadcrumb is built in to the component and should be consistent throughout all layouts. The correct spacing is specified in the images below:
+
+{% include component-example.html alt="Breadcrumbs have 20px / 2.5 spacing units above and 32px / 4 spacing units below at a mobile breakpoint." file="/images/components/breadcrumbs/breadcrumbs-spacing-mobile.png" caption="Breadcrumbs have 20px or 2.5 spacing units above and 32px or 4 spacing units below at a mobile breakpoint." %}
+
+{% include component-example.html alt="Breadcrumbs have 20px / 2.5 spacing units above and 48px / 6 spacing units below at a desktop breakpoint." file="/images/components/breadcrumbs/breadcrumbs-spacing-desktop.png" caption="Breadcrumbs have 20px or 2.5 spacing units above and 48px or 6 spacing units below at a desktop breakpoint." %}
 
 ### Behavior
 
@@ -90,4 +95,4 @@ To use React Router with this component [follow these instructions](https://desi
 
 ### Additional accessibility guidance for VA
 
-* **Make current page a link.** Use a link for the current page for robustness. While it may sound counterintuitive to link to the current page in this component, it makes sense to include this as a link so screen readers voice the current page link whether the user navigates by element or by tabbing. Making the current page a link rather than text makes it a focusable and clickable element. It also follows [WAI-ARIA Authoring Practices Guide (APG) guidances](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/) which states that an `a` element with `aria-current="page"` should represent the current page.
+* **Make current page a link.** Use a link for the current page for robustness. While it may sound counterintuitive to link to the current page in this component, it makes sense to include this as a link so screen readers voice the current page link whether the user navigates by element or by tabbing. Making the current page a link rather than text makes it a focusable and clickable element. It also follows [WAI-ARIA Authoring Practices Guide (APG) guidances](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/) which states that an `a` element with `aria-current="page"` should represent the current page.

src/_components/form/prefill.md

@@ -15,6 +15,17 @@ anchors:
   - anchor: Content considerations
 ---
 
+<va-alert
+  status="warning"
+  slim
+>
+    <div class="vads-u-margin-y--0">
+    <p class="vads-u-margin-y--0">
+      We may be replacing this page soon. <va-link href="/patterns/help-users-to/know-when-their-information-is-prefilled" text="See the new prefill pattern page for up-to-date guidance." ></va-link>
+    </p>
+    </div>
+</va-alert>
+
 ## Examples
 
 ### Intro
@@ -23,7 +34,7 @@ anchors:
   {% include_relative html/prefill-intro.html %}
 </div>
 
-### Step 
+### Step
 
 <div class="site-showcase">
   {% include_relative html/prefill-step.html %}
@@ -42,7 +53,7 @@ anchors:
 ### How this component works
 
 * **Intro variation uses Alert - Informational.** The Intro variation of this component is an instance of the [Alert - Informational]({{ site.baseurl }}/components/alert#informational-alert) component, but without a header.
-* **Step variation uses Alert - Background-only Informational.** The Step variations of this component is an instance of the [Alert - Background-only with icon - Informational]({{ site.baseurl }}/components/alert#background-color-only-alert-with-icon) component. 
+* **Step variation uses Alert - Background-only Informational.** The Step variations of this component is an instance of the [Alert - Background-only with icon - Informational]({{ site.baseurl }}/components/alert#background-color-only-alert-with-icon) component.
 
 ### Placement
 

src/_patterns/help-users-to/know-how-their-information-is-updated.md

@@ -12,6 +12,17 @@ anchors:
   - anchor: Research findings
 ---
 
+<va-alert
+  status="warning"
+  slim
+>
+    <div class="vads-u-margin-y--0">
+    <p class="vads-u-margin-y--0">
+      We are updating this pattern. Please note that some guidance may be out of date. <va-link href="/patterns/help-users-to/know-when-their-information-is-prefilled" text="See the new prefill pattern page for up-to-date guidance." ></va-link>
+    </p>
+    </div>
+</va-alert>
+
 ## Usage
 
 ### When to use this pattern
@@ -25,7 +36,7 @@ anchors:
 
 ### When not to use this pattern
 
-* **When an update in this form will not update their VA.gov profile.**  If a contact information addition or change will **not** update the user's VA.gov profile then use the text "*Any updates you make here to your [type of contact information] will only apply to this application.*" 
+* **When an update in this form will not update their VA.gov profile.**  If a contact information addition or change will **not** update the user's VA.gov profile then use the text "*Any updates you make here to your [type of contact information] will only apply to this application.*"
 
 ### When to use caution
 
@@ -47,7 +58,7 @@ However, some forms show a set of data taken from VA.gov profile and display the
 
 * In this example, at the start of the Request a Board Appeal process, the user is shown information that we have on file but that cannot be changed in this application. A note below the information calls out how to get the information updated.
 
-#### Communicate information that can be edited 
+#### Communicate information that can be edited
 
 {% include component-example.html alt="Contact information from the Request a Board Appeal application." file="/images/patterns/help-users-to/know-how-their-information-is-updated/board-appeal-contact-information.png" caption="The user is shown contact information stored in their profile that can be edited before continuing with the process." width="50%" %}
 

src/_patterns/help-users-to/stay-informed-of-their-application-status.md

@@ -23,7 +23,7 @@ anchors:
 
 ### Email notifications
 
-{% include component-example.html alt="Screen shots of 3 email templates." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/email-templates.png" caption="Three template examples for email notification touch points sent via VA Notify." class="x2" %}
+{% include component-example.html alt="Screen shots of 5 email templates." file="/images/patterns/help-users-to/stay-informed-of-their-application-status/email-templates.png" caption="Five template examples for email notification touch points sent via VA Notify." class="x2" %}
 
 ### Form submission status in My VA
 
@@ -49,7 +49,7 @@ If there's a lag time between when someone submits the form and when VA receives
 
 1. **Submission in progress**: The notification we send immediately after someone selects the **Submit** button on an online form. This means that the form submission has successfully started, but it has not yet reached the system of record. During this time, data submitted by the person may travel through several systems.
 2. **Received**: The notification we send when we've received a submitted form in the system of record. This means the form is ready for processing. **Only send this status notification when we have confirmation that the request has reached the system of record.**
-3. **Action needed:** The error notification we send if a form submission fails to reach the system of record. This means we need the person to resubmit or take another action before we can process their form. This notification must include instructions for the person to recover from the error.
+3. **Action needed:** The error notification we send if a form submission fails to reach the system of record. This means we need the person to resubmit or take another action before we can process their form. This notification must include instructions for the person to recover from the error. There are different templates available based on the remediation steps specific to the form.
 
 Submit a [VA Notify intake ticket](https://github.com/department-of-Veterans-affairs/va.gov-team/issues/new?assignees=christy-tongty%2C+mjones-oddball%2C+GitSamJennings&labels=vanotify-intake&template=VANotify-Business-Intake.md&title=Business+intake+form+for+%5BBusiness+or+team%5D) to start the process of activating email notifications for your application.