From 6aaa6840a9c9a5972b79242f7bfdd03a7d32c4d3 Mon Sep 17 00:00:00 2001 From: Jeana Date: Mon, 20 Apr 2026 16:11:46 -0500 Subject: [PATCH 01/14] update code usage links --- src/_components/accordion.md | 8 +++++++- src/_components/additional-info.md | 8 +++++++- src/_components/alert/alert-expandable.md | 8 +++++++- src/_components/alert/alert-sign-in.md | 8 +++++++- src/_components/alert/index.md | 14 +++++++++++++- src/_components/back-to-top.md | 1 - src/_components/banner/index.md | 10 ++++++++-- src/_components/banner/maintenance.md | 8 +++++++- src/_components/banner/official-gov.md | 8 +++++++- src/_components/breadcrumbs.md | 8 +++++++- src/_components/button/button-group.md | 8 +++++++- src/_components/button/button-icon.md | 8 +++++++- src/_components/button/button-segmented.md | 14 +++++++++++++- src/_components/button/index.md | 14 +++++++++++++- src/_components/card/card-status.md | 8 +++++++- src/_components/card/index.md | 8 +++++++- src/_components/critical-action.md | 8 +++++++- src/_components/details.md | 8 +++++++- src/_components/footer/minimal.md | 2 -- src/_components/form/checkbox.md | 14 +++++++++++++- src/_components/form/combo-box.md | 8 +++++++- src/_components/form/date-input.md | 10 ++++++++-- src/_components/form/file-input.md | 8 +++++++- src/_components/form/memorable-date.md | 10 ++++++++-- src/_components/form/need-help.md | 8 ++++++-- src/_components/form/prefill.md | 6 +----- src/_components/form/privacy-agreement.md | 10 ++++++++-- src/_components/form/progress-bar-segmented.md | 10 ++++++++-- src/_components/form/radio-button.md | 14 +++++++++++++- src/_components/form/select.md | 8 +++++++- src/_components/form/statement-of-truth.md | 8 +++++++- src/_components/form/telephone-input.md | 8 +++++++- src/_components/form/text-input.md | 8 +++++++- src/_components/form/textarea.md | 8 +++++++- src/_components/header/minimal.md | 8 +++++++- src/_components/icon.md | 16 ++++++++++++++-- src/_components/link/action.md | 8 +++++++- src/_components/link/index.md | 15 ++++++++++++++- src/_components/loading-indicator.md | 14 +++++++++++++- src/_components/modal/crisis-line-modal.md | 10 ++++++++-- src/_components/modal/index.md | 10 ++++++++-- src/_components/on-this-page.md | 8 +++++++- src/_components/pagination.md | 10 ++++++++-- src/_components/process-list.md | 8 +++++++- src/_components/progress-bar-activity.md | 10 ++++++++-- src/_components/search-filter.md | 8 +++++++- src/_components/search-input.md | 8 +++++++- src/_components/service-list-item.md | 8 +++++++- src/_components/sidenav.md | 8 +++++++- src/_components/snackbar.md | 8 +++++++- src/_components/sort.md | 8 +++++++- src/_components/summary-box.md | 6 +++++- src/_components/table.md | 8 +++++++- src/_components/tabs.md | 8 +++++++- src/_components/tag/tag-status.md | 8 +++++++- src/_components/telephone.md | 10 ++++++++-- src/_components/template.md | 8 +++++--- src/_components/text.md | 8 +++++++- 58 files changed, 441 insertions(+), 77 deletions(-) diff --git a/src/_components/accordion.md b/src/_components/accordion.md index f923350dd..89811dc68 100644 --- a/src/_components/accordion.md +++ b/src/_components/accordion.md @@ -76,7 +76,13 @@ anchors: * Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate. * Make sure interactive elements (such as links) within the collapsible region are far enough from the header that users don’t accidentally trigger a collapse. (The exact distance will depend on the device.) -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/additional-info.md b/src/_components/additional-info.md index ef660bfc9..9122478f2 100644 --- a/src/_components/additional-info.md +++ b/src/_components/additional-info.md @@ -74,7 +74,13 @@ The following are places where Additional info can be used: * **Disclosure widget**: The Additional Info component is an example of a [Disclosure widget](https://en.wikipedia.org/wiki/Disclosure_widget), as is the [<details> HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details). Disclosure widgets are sometimes considered examples of [staged or progressive disclosure](https://www.nngroup.com/articles/progressive-disclosure/). -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/alert/alert-expandable.md b/src/_components/alert/alert-expandable.md index 3cbb2883f..a3ec7de61 100644 --- a/src/_components/alert/alert-expandable.md +++ b/src/_components/alert/alert-expandable.md @@ -69,7 +69,13 @@ anchors: {% include component-example.html alt="Alert - Expandable in a desktop viewport." file="/images/components/alert-expandable/info-desktop.png" caption="Alert - Expandable, default variation, expanded in a Facility page in a wide viewport." width="50%" %} -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations diff --git a/src/_components/alert/alert-sign-in.md b/src/_components/alert/alert-sign-in.md index e61f2e81c..194ae793e 100644 --- a/src/_components/alert/alert-sign-in.md +++ b/src/_components/alert/alert-sign-in.md @@ -97,7 +97,13 @@ This variation was used as we sunset MyHealtheVet credentials. However, a new ve **NOTE:** DS Logon is to be sunset in September 2025. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/alert/index.md b/src/_components/alert/index.md index c691d6564..d2b6e4812 100644 --- a/src/_components/alert/index.md +++ b/src/_components/alert/index.md @@ -273,7 +273,19 @@ Displaying multiple alerts should be avoided. However, when you need to display * Use expandable alerts when the information is not a response to user feedback. * Use dismissible alerts when the content is informational and not specific to the user or their interaction. For example, displaying "what's new" content in the app. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + + + ## Content considerations diff --git a/src/_components/back-to-top.md b/src/_components/back-to-top.md index 869ad5cfb..6c595bb21 100644 --- a/src/_components/back-to-top.md +++ b/src/_components/back-to-top.md @@ -44,7 +44,6 @@ anchors: * The Back to top component stays fixed in the lower right edge of the main content area when the user reaches the bottom of the page. * Clicking Back to top takes the user to the top of the page. -{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/banner/index.md b/src/_components/banner/index.md index 4890516ac..245be28cd 100644 --- a/src/_components/banner/index.md +++ b/src/_components/banner/index.md @@ -73,9 +73,15 @@ anchors: * Content inside Banner remains aligned to the main page grid container. This might not be apparent on this site in smaller screens. * Can be used on homepage or, in true emergencies, on lower-level pages. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations * **Short and informative headlines.** Try to keep headlines to 70 characters maximum, with spaces. Titles become hard to scan when they’re too long. Eliminate unnecessary details or nuance in titles, and address them with more depth in the message copy. -* **Short messages with links for greater detail.** Try to keep message copy to 300 characters maximum, with spaces. When more detail is needed, link to another page that has all of the details. Pages that can be linked to might include Operating status or News releases. \ No newline at end of file +* **Short messages with links for greater detail.** Try to keep message copy to 300 characters maximum, with spaces. When more detail is needed, link to another page that has all of the details. Pages that can be linked to might include Operating status or News releases. diff --git a/src/_components/banner/maintenance.md b/src/_components/banner/maintenance.md index d18da8c41..e65c7f19b 100644 --- a/src/_components/banner/maintenance.md +++ b/src/_components/banner/maintenance.md @@ -50,4 +50,10 @@ The Public Website Team (Office of the CTO Digital Experience) publishes downtim * The banner automatically expires when downtime is complete. * A maximum of 3 banners can appear simultaneously. -{% include component-docs.html component_name=page.web-component %} \ No newline at end of file +## Code usage + + diff --git a/src/_components/banner/official-gov.md b/src/_components/banner/official-gov.md index fa7c69dc2..aab687310 100644 --- a/src/_components/banner/official-gov.md +++ b/src/_components/banner/official-gov.md @@ -50,7 +50,13 @@ anchors: **Above header.** The official government banner appears directly above the VA.gov header and -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations diff --git a/src/_components/breadcrumbs.md b/src/_components/breadcrumbs.md index a22958370..c6878d7fb 100644 --- a/src/_components/breadcrumbs.md +++ b/src/_components/breadcrumbs.md @@ -100,7 +100,13 @@ When a user starts a linear flow on the site (i.e. a form flow or task flow), th * In [2024, VFF/MY VA Form Status Research](https://github.com/department-of-veterans-affairs/VA.gov-team-forms/blob/main/Product/2024-05%20VFF%20and%20My%20VA%20Form%20Submission%20Research/Research/Research%20Findings%20for%202024-05%20VFF%20and%20My%20VA%20Form%20Submission%20Research%20Study.md) found that 5 of 12 participants indicated they would want to print a copy of their form submission. Breadcrumbs do not provide much value in the final printout so they should be excluded. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ### Router link support diff --git a/src/_components/button/button-group.md b/src/_components/button/button-group.md index 8cedcd767..9921c63c7 100644 --- a/src/_components/button/button-group.md +++ b/src/_components/button/button-group.md @@ -83,7 +83,13 @@ type="secondary" > The time to acquire a target is a function of the distance to and size of the target -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/button/button-icon.md b/src/_components/button/button-icon.md index bdf1d2fc5..20af28646 100644 --- a/src/_components/button/button-icon.md +++ b/src/_components/button/button-icon.md @@ -56,7 +56,13 @@ anchors: The 3 examples above are the only currently approved instances of this component. Use of icons in buttons of any type will be made on a case-by-case basis. If you feel you need an icon for a button, [follow the process for requesting a new icon]({{ site.baseurl }}/components/icon#requesting-a-new-icon) and indicate that you would like to use it in Button - Icon or another button type. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/button/button-segmented.md b/src/_components/button/button-segmented.md index 790822abb..51217e6bb 100644 --- a/src/_components/button/button-segmented.md +++ b/src/_components/button/button-segmented.md @@ -114,7 +114,19 @@ The component is often integrated into the top navigation bar (or just below it) * **Claims:** Using a control to switch between "Status" and "Details." This groups dissimilar content and should be handled with a different component, like [Tabs]({{ site.baseurl }}/components/tabs). -{% include component-docs.html component_name=page.web-component %} +## Code usage + + + + ## Content considerations diff --git a/src/_components/button/index.md b/src/_components/button/index.md index 592f3fa4d..6ea57dcc4 100644 --- a/src/_components/button/index.md +++ b/src/_components/button/index.md @@ -136,7 +136,19 @@ anchors: {% include component-example.html alt="Example of a primary button with a secondary link." file="/images/components/button/primary-with-secondary-link.png" caption="An example of a primary button used with a secondary link." reverse=true %} -{% include component-docs.html component_name=page.web-component %} +## Code usage + + + + ## Content considerations diff --git a/src/_components/card/card-status.md b/src/_components/card/card-status.md index 3dc4fe36e..4e4a9b386 100644 --- a/src/_components/card/card-status.md +++ b/src/_components/card/card-status.md @@ -90,7 +90,13 @@ This state is triggered when validation errors occur, such as when a user tries Card Status uses the same placement, dimensions, and layout as described in the [Card component]({{ site.baseurl }}/components/card#placement). -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/card/index.md b/src/_components/card/index.md index 8f7115951..ad38e0053 100644 --- a/src/_components/card/index.md +++ b/src/_components/card/index.md @@ -157,7 +157,13 @@ Cards use the following widths: Cards can sit inside or outside of a grid layout. Cards start with [1.5 spacing units (1.2rem/12px)]({{ site.baseurl }}/foundation/spacing-units) below each card to separate them. Then the spacing increases to [2 spacing units (1.6rem/16px)]({{ site.baseurl }}/foundation/spacing-units) of margin on all sides at the [$medium-screen and above breakpoint]({{ site.baseurl }}/foundation/breakpoints). -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Not a Card diff --git a/src/_components/critical-action.md b/src/_components/critical-action.md index a95022d1c..5f43a3c62 100644 --- a/src/_components/critical-action.md +++ b/src/_components/critical-action.md @@ -70,7 +70,13 @@ On the My VA page, Critical Action components can be placed within a card to cal caption="On dashboard pages like My VA, Critical Action components should appear within the cards, to highlight the most pressing actions users need to take." file="/images/components/critical-action/critical-action-in-my-va.png" %} -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/details.md b/src/_components/details.md index d585eba5b..0a1ee3deb 100644 --- a/src/_components/details.md +++ b/src/_components/details.md @@ -71,7 +71,13 @@ You can use Details in these places: **Note:** Placement of Details doesn't change the [content considerations](#content-considerations) for this component. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/footer/minimal.md b/src/_components/footer/minimal.md index 69d58e704..eb6c1a833 100644 --- a/src/_components/footer/minimal.md +++ b/src/_components/footer/minimal.md @@ -40,6 +40,4 @@ anchors: * **At the bottom of the page.** The minimal footer appears at the bottom of the page. -{% include component-docs.html component_name=page.web-component %} - {% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/form/checkbox.md b/src/_components/form/checkbox.md index 479cab2e6..35284b95a 100644 --- a/src/_components/form/checkbox.md +++ b/src/_components/form/checkbox.md @@ -240,10 +240,22 @@ anchors: type="secondary" > -{% include component-docs.html component_name=page.web-component %} +## Code usage + + {% include content/using-message-aria-describedby.md %} + + ### Native Events The native onBlur event is available on this component. It can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires. diff --git a/src/_components/form/combo-box.md b/src/_components/form/combo-box.md index a9fea6851..b26d1936f 100644 --- a/src/_components/form/combo-box.md +++ b/src/_components/form/combo-box.md @@ -79,7 +79,13 @@ anchors: type="secondary" > -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations diff --git a/src/_components/form/date-input.md b/src/_components/form/date-input.md index 8f4dc9408..ed31fb9ba 100644 --- a/src/_components/form/date-input.md +++ b/src/_components/form/date-input.md @@ -69,8 +69,14 @@ By default all date components have the following validation: The option to add [custom validation](#with-custom-validation) is available as well. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations -Follow text input and select box guidance. The component consists of two select boxes for month and day inputs and a text input for year input. \ No newline at end of file +Follow text input and select box guidance. The component consists of two select boxes for month and day inputs and a text input for year input. diff --git a/src/_components/form/file-input.md b/src/_components/form/file-input.md index 661335b24..1cd95201d 100644 --- a/src/_components/form/file-input.md +++ b/src/_components/form/file-input.md @@ -179,7 +179,13 @@ The file input component gives users a way to select and upload files. You have type="secondary" > -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/form/memorable-date.md b/src/_components/form/memorable-date.md index 4c0b748de..0638c4a43 100644 --- a/src/_components/form/memorable-date.md +++ b/src/_components/form/memorable-date.md @@ -97,7 +97,13 @@ anchors: type="secondary" > -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations @@ -107,4 +113,4 @@ anchors: type="secondary" > -{% include _component-checklist.html component_name=page.web-component %} \ No newline at end of file +{% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/form/need-help.md b/src/_components/form/need-help.md index 5ecdb3842..c99d4c57e 100644 --- a/src/_components/form/need-help.md +++ b/src/_components/form/need-help.md @@ -41,8 +41,12 @@ anchors: ## Code usage -Code for this component is shown in Storybook. Follow the link provided in [examples](#examples). + ## Content considerations -* Content can vary by form and should be discussed with the content team before deploying your application. \ No newline at end of file +* Content can vary by form and should be discussed with the content team before deploying your application. diff --git a/src/_components/form/prefill.md b/src/_components/form/prefill.md index b0005492b..b82967a75 100644 --- a/src/_components/form/prefill.md +++ b/src/_components/form/prefill.md @@ -14,7 +14,6 @@ anchors: - anchor: Examples - anchor: Usage - anchor: How to use - - anchor: Code usage - anchor: Content considerations --- @@ -44,10 +43,7 @@ anchors: * This component appears after the subtitle of the form and before the action link to start the form process on the authenticated variation of the [Form - Introduction]({{ site.baseurl }}/templates/forms/introduction#authenticated) page. -## Code usage - -Code for both variations of this component is shown in the [examples](#examples). ## Content considerations -Message content for both variations can be found in [engagement messages]({{ site.baseurl }}/content-style-guide/error-messages/engagement). \ No newline at end of file +Message content for both variations can be found in [engagement messages]({{ site.baseurl }}/content-style-guide/error-messages/engagement). diff --git a/src/_components/form/privacy-agreement.md b/src/_components/form/privacy-agreement.md index c19ed57ad..cda6a1dcf 100644 --- a/src/_components/form/privacy-agreement.md +++ b/src/_components/form/privacy-agreement.md @@ -57,10 +57,16 @@ This component appears at the bottom of a form, above the link to "Finish this a {% include component-example.html alt="An example of this component in use on VA.gov." file="/images/components/privacy-agreement/10-10EZ-privacy-agreement.png" caption="An example of this component in use on the 10-10EZ form on VA.gov" %} -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations **Privacy policy opens in new tab or window.** This component must detail to all users that the privacy policy link opens in a new window. This indication should be visible and auditory. -{% include _component-checklist.html component_name=page.web-component %} \ No newline at end of file +{% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/form/progress-bar-segmented.md b/src/_components/form/progress-bar-segmented.md index bfdb39c07..8a2211741 100644 --- a/src/_components/form/progress-bar-segmented.md +++ b/src/_components/form/progress-bar-segmented.md @@ -76,7 +76,13 @@ For additional guidance on using progress bars in form flows, see [Form template * The progress bar should appear directly below the h1 title of the process and before the form itself. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations @@ -89,4 +95,4 @@ For additional guidance on using progress bars in form flows, see [Form template ## Related * [Activity progress bar]({{ site.baseurl }}/components/progress-bar) -* [Process list]({{ site.baseurl }}/components/process-list) \ No newline at end of file +* [Process list]({{ site.baseurl }}/components/process-list) diff --git a/src/_components/form/radio-button.md b/src/_components/form/radio-button.md index 5f06c0705..6cc369bb2 100644 --- a/src/_components/form/radio-button.md +++ b/src/_components/form/radio-button.md @@ -132,7 +132,19 @@ anchors: type="secondary" > -{% include component-docs.html component_name=page.web-component %} +## Code usage + + + + ## Content considerations diff --git a/src/_components/form/select.md b/src/_components/form/select.md index f21204300..806c3a648 100644 --- a/src/_components/form/select.md +++ b/src/_components/form/select.md @@ -100,7 +100,13 @@ anchors: type="secondary" > -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ### Native Events diff --git a/src/_components/form/statement-of-truth.md b/src/_components/form/statement-of-truth.md index 941cc1e94..81c6dc7ed 100644 --- a/src/_components/form/statement-of-truth.md +++ b/src/_components/form/statement-of-truth.md @@ -63,7 +63,13 @@ The component works by asking the user to populate the text-input field with the * [Submit a lay or witness statement to support a VA claim - Lay/Witness Statement (VA Form 21-10210)](https://www.va.gov/supporting-forms-for-claims/lay-witness-statement-form-21-10210/introduction) * [Request personal records - Freedom of Information Act (FOIA) or Privacy Act (PA) Request (VA Form 20-10206)](https://www.va.gov/records/request-personal-records-form-20-10206/introduction) -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/form/telephone-input.md b/src/_components/form/telephone-input.md index db6c527c1..dc8b09522 100644 --- a/src/_components/form/telephone-input.md +++ b/src/_components/form/telephone-input.md @@ -53,7 +53,13 @@ By default, the telephone input component has these validation rules: - The phone number must match the valid pattern for the selected country code. For example: `Enter a United States of America phone number in a valid format, for example, (xxx) xxx-xxxx`. - The libphonenumber library validates phone numbers. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ### Event payload Whenever the component is modified it emits a `vaContact` event that includes the following properties: diff --git a/src/_components/form/text-input.md b/src/_components/form/text-input.md index 83a596aa4..ff1b402a8 100644 --- a/src/_components/form/text-input.md +++ b/src/_components/form/text-input.md @@ -158,7 +158,13 @@ See [form error handling]({{ site.baseurl }}/components/form/#error-handling) fo type="secondary" > -{% include component-docs.html component_name=page.web-component %} +## Code usage + + {% include content/using-message-aria-describedby.md %} diff --git a/src/_components/form/textarea.md b/src/_components/form/textarea.md index 115261b34..7830c6095 100644 --- a/src/_components/form/textarea.md +++ b/src/_components/form/textarea.md @@ -79,7 +79,13 @@ anchors: type="secondary" > -{% include component-docs.html component_name=page.web-component %} +## Code usage + + {% include content/using-message-aria-describedby.md %} diff --git a/src/_components/header/minimal.md b/src/_components/header/minimal.md index 0823076c1..bd595a51f 100644 --- a/src/_components/header/minimal.md +++ b/src/_components/header/minimal.md @@ -54,7 +54,13 @@ anchors: * **At the top of the page.** The minimal header appears at the top of the page. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/icon.md b/src/_components/icon.md index 4a278adf7..e319e9da4 100644 --- a/src/_components/icon.md +++ b/src/_components/icon.md @@ -213,7 +213,19 @@ Some icons may have specific placement guidance defined here. {% include component-docs.html %} -{% include component-docs.html component_name=page.web-component %} +## Code usage + + + + ## Accessibility considerations Icon usage typically falls into two categories, decorative and semantic. @@ -357,4 +369,4 @@ Avoid requesting a new icon when: renderIconTable(icons); -{% include _component-checklist.html component_name=page.web-component %} \ No newline at end of file +{% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/link/action.md b/src/_components/link/action.md index 14b2f104d..1167826b6 100644 --- a/src/_components/link/action.md +++ b/src/_components/link/action.md @@ -56,7 +56,13 @@ The action link is an eye-catching link to start a digital service. An action li * **Use a button for going to the next step in a form.** Use Button - Primary for moving between steps of an online application or tool. This is considered an action rather than navigation. Note that we prefer a [Back link]({{ site.baseurl }}/components/link/#back) for navigation backward in a flow but have instances of using a Button - Secondary in most forms. * **Don’t use Link - Action for non-actions.** Link - Action is not meant to replace all links. It should be used explicitly for actions. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/link/index.md b/src/_components/link/index.md index 514d2972e..e971ab8f1 100644 --- a/src/_components/link/index.md +++ b/src/_components/link/index.md @@ -324,7 +324,20 @@ The mobile app includes link variations that address platform-specific needs: * **Base link style.** The Base link style exists due to mobile app specific needs in dark mode. For example, the Alert component has a colored background for each variation. While working on dark mode, the mobile app team found that the Default link style did not meet color contrast requirements and clashed with the background colors. For this reason, a new Base style was created similar to the USWDS Base style. * **Content-specific link variants.** In Storybook, variants are available for content-specific links (add to calendar, get directions, etc.). These variants include the onPress logic for app teams, which ensures that the component always displays a native confirmation message when needed. -{% include component-docs.html component_name=page.web-component mobile_component_name="va-link" %} +## Code usage + + + + + ### Links to content in another language diff --git a/src/_components/loading-indicator.md b/src/_components/loading-indicator.md index e40f327b3..128d6dffb 100644 --- a/src/_components/loading-indicator.md +++ b/src/_components/loading-indicator.md @@ -52,7 +52,19 @@ anchors: * Use the [Standard progress bar]({{ site.baseurl }}/components/progress-bar) for file uploads where the wait time is determinate. * Use the [Segmented progress bar]({{ site.baseurl }}/components/progress-bar) in forms to communicate the number of steps required to complete the form. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + + + ## Content considerations diff --git a/src/_components/modal/crisis-line-modal.md b/src/_components/modal/crisis-line-modal.md index d59c567ca..f77a8906a 100644 --- a/src/_components/modal/crisis-line-modal.md +++ b/src/_components/modal/crisis-line-modal.md @@ -31,10 +31,16 @@ anchors: * This modal must always appear in the VA.gov header, including the [minimal variation]({{ site.baseurl }}/components/header/header-minimal). -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations * **Do not alter the contents of this component.** The contents of this component are governed by CAIA. -{% include _component-checklist.html component_name=page.web-component %} \ No newline at end of file +{% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/modal/index.md b/src/_components/modal/index.md index 787b3fee4..247e58c0d 100644 --- a/src/_components/modal/index.md +++ b/src/_components/modal/index.md @@ -83,7 +83,13 @@ anchors: * **Content that must be linkable (have a distinct URL) or searchable.** Modals cannot be linked to or searched. * **Modals should not contain long forms.** Modal content must be brief and not include complicated interactions. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations @@ -91,4 +97,4 @@ anchors: href="https://designsystem.digital.gov/components/modal/#accessibility-select" text="Refer to the U.S. Web Design System for accessibility guidance" type="secondary" -> \ No newline at end of file +> diff --git a/src/_components/on-this-page.md b/src/_components/on-this-page.md index 3cbe0cac8..4fe5be5f1 100644 --- a/src/_components/on-this-page.md +++ b/src/_components/on-this-page.md @@ -37,7 +37,13 @@ anchors: - **The content on the page must have a minimum of two H2 section titles to use the On this page jump links.** - **On this page jump links component pairs well with the Back to top component.** The [Back to top component]({{ site.baseurl }}/components/back-to-top) helps users quickly navigate back to the top of long pages of content. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations diff --git a/src/_components/pagination.md b/src/_components/pagination.md index e9a1705c6..ec8d4d30d 100644 --- a/src/_components/pagination.md +++ b/src/_components/pagination.md @@ -70,7 +70,13 @@ When using pagination, include a results description above the paginated content Make sure the results description updates whenever the set of results changes—for example, when the user moves to a different page of results or changes filters—so that the information stays accurate for all users. For more details on implementing search results with pagination, including placement of the results description, see the [Search results template]({{ site.baseurl }}/templates/search-results). -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations @@ -80,4 +86,4 @@ For more details on implementing search results with pagination, including place type="secondary" > -{% include _component-checklist.html component_name=page.web-component %} \ No newline at end of file +{% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/process-list.md b/src/_components/process-list.md index 270224f1b..2cb43b48a 100644 --- a/src/_components/process-list.md +++ b/src/_components/process-list.md @@ -66,7 +66,13 @@ The Process list appears after a start form link on the form [Introduction page] {% include component-example.html alt="An example of the process list component on an Education benefits application." file="/images/components/process-list/VEAP-benefits-2024.png" caption="The VEAP benefits application form uses a process list on the introduction page." width="50%" %} -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/progress-bar-activity.md b/src/_components/progress-bar-activity.md index cab6d3cbf..a1e26e672 100644 --- a/src/_components/progress-bar-activity.md +++ b/src/_components/progress-bar-activity.md @@ -47,9 +47,15 @@ anchors: > The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Related * [Progress bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented) -* [Loading indicator]({{ site.baseurl }}/components/loading-indicator) \ No newline at end of file +* [Loading indicator]({{ site.baseurl }}/components/loading-indicator) diff --git a/src/_components/search-filter.md b/src/_components/search-filter.md index cbe53b4d8..2b7639250 100644 --- a/src/_components/search-filter.md +++ b/src/_components/search-filter.md @@ -56,6 +56,12 @@ Faceted search is a way to filter search results by using attributes, or facets, {% include a11y/search-filters.md %} -{% include component-docs.html component_name=page.web-component %} +## Code usage + + {% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/search-input.md b/src/_components/search-input.md index b9e5d9ce6..d7ca75521 100644 --- a/src/_components/search-input.md +++ b/src/_components/search-input.md @@ -97,7 +97,13 @@ The suggestions are ranked using the following rules: Search.gov's implementation of type-ahead does support fuzzy string matching to help with typos. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ### API calls and dependent systems diff --git a/src/_components/service-list-item.md b/src/_components/service-list-item.md index 1e51ac999..728bb6771 100644 --- a/src/_components/service-list-item.md +++ b/src/_components/service-list-item.md @@ -92,7 +92,13 @@ Teams used the Card component before this component existed. When evaluating if Statuses should be normalized with the platform content team so that the same terms are used when the same meanings are intended (for example, “pending” versus “in-progress”). The platform content team will define which of those is correct across benefits and tools. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Accessibility considerations diff --git a/src/_components/sidenav.md b/src/_components/sidenav.md index 9c7a2e145..dc74d68f3 100644 --- a/src/_components/sidenav.md +++ b/src/_components/sidenav.md @@ -100,7 +100,13 @@ The component is composed of the following parts: This compositional structure allows developers to build complex navigation menus by slotting together the necessary child components. For single-page applications, the component supports router integration by firing a `vaRouteChange` event. This prevents native link routing and allows a routing library like React Router to handle the navigation. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/snackbar.md b/src/_components/snackbar.md index 9b4c0d881..d3289c79c 100644 --- a/src/_components/snackbar.md +++ b/src/_components/snackbar.md @@ -55,7 +55,13 @@ anchors: * "Undo" snackbar appears in Messages when moving a message to a folder. * "Try again" snackbar appears in Messages when a draft is not saved successfully. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/sort.md b/src/_components/sort.md index d4160f5a1..b5d620f44 100644 --- a/src/_components/sort.md +++ b/src/_components/sort.md @@ -109,7 +109,13 @@ anchors: * **Keep sort option naming consistent across mobile and desktop experiences.** -{% include component-docs.html component_name=page.web-component %} +## Code usage + + * **Using an API to sort and paginate data is acceptable.** If sorting data on the frontend is more efficient, remember to format times and dates in a way that will ensure a correct chronological sort. * Store date and time as an [ISO-formatted string](https://en.wikipedia.org/wiki/ISO_8601#:~:text=Date%20and%20time%0Ain,00%20UTC%E2%88%9212%3A00) (date and time in UTC or date and time with offset). diff --git a/src/_components/summary-box.md b/src/_components/summary-box.md index 0fbe5e074..3bae8fb88 100644 --- a/src/_components/summary-box.md +++ b/src/_components/summary-box.md @@ -88,7 +88,11 @@ Summary box is found towards the top of the page after the h1 title of the page ## Code usage -Code for this component is shown in Storybook. Follow the link provided in [examples](#examples). + ## Content considerations diff --git a/src/_components/table.md b/src/_components/table.md index 81715b6e5..57cb1969b 100644 --- a/src/_components/table.md +++ b/src/_components/table.md @@ -65,7 +65,13 @@ anchors: * For comparison tables, avoid horizontal scrolling and limit the number of columns to 3 or fewer. All column heading labels should total no more than 60 characters. * **Avoid using numerical data in a responsive stacked table.** All data in a stacked table should be left aligned. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/tabs.md b/src/_components/tabs.md index 87304da36..f2aa91aa8 100644 --- a/src/_components/tabs.md +++ b/src/_components/tabs.md @@ -96,7 +96,13 @@ Tab panels are used as a container for the content associated with the selected See the [tabs component discussion](https://github.com/department-of-veterans-affairs/vets-design-system-documentation/discussions/4443) for more information on tabs used in production. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/tag/tag-status.md b/src/_components/tag/tag-status.md index bb988e97e..0cd7138a0 100644 --- a/src/_components/tag/tag-status.md +++ b/src/_components/tag/tag-status.md @@ -81,7 +81,13 @@ Use the error status to indicate critical issues, failure states, or items that * **For status within Cards.** When using Tags to communicate status within card components, see the [Card Status guidance]({{ site.baseurl }}/components/card/card-status) for specific implementation details and best practices. * **Use sentence case.** While [Tags]({{ site.baseurl }}/components/tag/) without status are capitalized, status tags use sentence case to improve readability in case the status text is longer than 1–2 words. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations diff --git a/src/_components/telephone.md b/src/_components/telephone.md index 5f9c21556..71a83ffbd 100644 --- a/src/_components/telephone.md +++ b/src/_components/telephone.md @@ -83,7 +83,13 @@ mobile-app: true * Phone numbers can appear within a sentence or on their own line. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + ## Content considerations @@ -91,4 +97,4 @@ mobile-app: true ## Accessibility considerations -* Teams should not add aria labels on phone numbers or TTY. If you have questions, contact the Accessibility Design Experience (ADE) Team. \ No newline at end of file +* Teams should not add aria labels on phone numbers or TTY. If you have questions, contact the Accessibility Design Experience (ADE) Team. diff --git a/src/_components/template.md b/src/_components/template.md index c6fd37bb1..2f5f793aa 100644 --- a/src/_components/template.md +++ b/src/_components/template.md @@ -92,8 +92,10 @@ Images with captions that describe different instances of this component being u -This is the Code Usage section. Note that the header is inside this include. - +## Code usage + +* Use secondary action link to point to storybook doc page for this component. +* Include links for va.gov use and mobile app use as applicable. ## Content considerations @@ -109,4 +111,4 @@ This is the Code Usage section. Note that the header is inside this include. * Links to related components. This is the Component checklist section. Note that the header is inside this include. - \ No newline at end of file + diff --git a/src/_components/text.md b/src/_components/text.md index 0b1374041..6198e2bd7 100644 --- a/src/_components/text.md +++ b/src/_components/text.md @@ -54,4 +54,10 @@ There are 9 variations of the Text component. * Use a Body variation (large, medium, small, x-small) for body copy. * Use the Display variation for larger display text. -{% include component-docs.html component_name=page.web-component %} +## Code usage + + From c938700727d2b4d7d2b7d1ddd0f190b939543866 Mon Sep 17 00:00:00 2001 From: Jeana Date: Mon, 20 Apr 2026 16:32:39 -0500 Subject: [PATCH 02/14] Title case component names --- src/_components/additional-info.md | 20 ++++++++++---------- src/_components/address-block.md | 10 +++++----- src/_components/back-to-top.md | 8 ++++---- src/_components/button/button-group.md | 18 +++++++++--------- src/_components/form/date-input.md | 10 +++++----- src/_components/form/file-input.md | 22 +++++++++++----------- src/_components/form/index.md | 20 ++++++++++---------- src/_components/form/need-help.md | 2 +- src/_components/form/penalty-notice.md | 4 ++-- src/_components/form/statement-of-truth.md | 6 +++--- src/_components/form/telephone-input.md | 4 ++-- src/_components/form/text-input.md | 4 ++-- src/_components/language-toggle.md | 18 +++++++++--------- src/_components/on-this-page.md | 18 +++++++++--------- src/_components/process-list.md | 18 +++++++++--------- src/_components/progress-bar-activity.md | 4 ++-- src/_components/summary-box.md | 8 ++++---- 17 files changed, 97 insertions(+), 97 deletions(-) diff --git a/src/_components/additional-info.md b/src/_components/additional-info.md index 9122478f2..ad23e2d1e 100644 --- a/src/_components/additional-info.md +++ b/src/_components/additional-info.md @@ -1,8 +1,8 @@ --- layout: component -title: Additional info +title: Additional Info status: use-with-caution-candidate -intro-text: "Additional info makes content easier to scan as it hides information that may not be applicable to all users or situations. Use this component to situate plain language help at the point of the process where it is most relevant." +intro-text: "Additional Info makes content easier to scan as it hides information that may not be applicable to all users or situations. Use this component to situate plain language help at the point of the process where it is most relevant." figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=203-1254 web-component: va-additional-info web: true @@ -32,14 +32,14 @@ anchors: ## Usage -### When to use Additional info +### When to use Additional Info * **Revealing helpful background information**: When you have additional information you want to convey about an application, process, or a step or question in a form that is not critical. This component should be used in instances where a more prominent [Alert]({{ site.baseurl }}/components/alert) would not be appropriate. -* **Clarifying outcomes for an input**: In cases where a person's input can have large or complicated impact on outcomes we use contextual help in Additional info to locate expanded guidance next to the relevant interaction. +* **Clarifying outcomes for an input**: In cases where a person's input can have large or complicated impact on outcomes we use contextual help in Additional Info to locate expanded guidance next to the relevant interaction. * **Information closely tied to an input.** Use this component over an [Accordion]({{ site.baseurl }}/components/accordion) when the content is closely tied to a particular message or input on the screen. If the content is more tangentially related then use an Accordion. -* **Clarifying a form question**: If a form question needs clarification, and that clarification is brief, use Additional info. The lighter design prevents breaking up the visual progression as the user navigates the form. These can also serve as alternative to where accordions feel too heavy. Be sure to review the [hint text guidance]({{ site.baseurl }}/components/form/label#hint-text) for implementation details. If a form is a conversation, Additional info would be considered an aside. (This case study on structuring complex health care questions for healthcare.gov goes into greater detail on how to structure your form as a conversation.) +* **Clarifying a form question**: If a form question needs clarification, and that clarification is brief, use Additional Info. The lighter design prevents breaking up the visual progression as the user navigates the form. These can also serve as alternative to where accordions feel too heavy. Be sure to review the [hint text guidance]({{ site.baseurl }}/components/form/label#hint-text) for implementation details. If a form is a conversation, Additional Info would be considered an aside. (This case study on structuring complex health care questions for healthcare.gov goes into greater detail on how to structure your form as a conversation.) * **Content that can be organized under the current heading.** If you have additional content that provides context and makes sense under the same heading as the content nearby. -* **Information not applicable to all**: Additional info can hide details that may not be applicable to all users. +* **Information not applicable to all**: Additional Info can hide details that may not be applicable to all users. ### When to consider something else @@ -49,7 +49,7 @@ anchors: * **Content organized under a new heading.** If you have enough content that it makes sense to organize under a new heading that does not make sense under the same heading as the content nearby then use an [Accordion]({{ site.baseurl }}/components/accordion). * **Error messages or other immediate actions**: Do not use this component for error messages or other critical or timely information. * **Inside Alerts**: Use this component inside an [Alert]({{ site.baseurl }}/components/alert) only as a last resort and if approved in the Collaboration Cycle. Instead use the [Alert - Expandable]({{ site.baseurl }}/components/alert/alert-expandable) component, especially when the Alert is within the page content and not at the top of the page. -* **Floating in space**: Try to avoid using Additional info outside of the flow of the page, unattached to a section of content or another component. For example, there are instances of Additional info between a h1 and a Card. See [placement](#placement) for more. +* **Floating in space**: Try to avoid using Additional Info outside of the flow of the page, unattached to a section of content or another component. For example, there are instances of Additional Info between a h1 and a Card. See [placement](#placement) for more. ## Behavior @@ -57,11 +57,11 @@ The help is triggered by clicking on a uniquely styled text link with a plain la ### Choosing between variations -Choose the [No border](#no-border) variation when using Additional info inside of a bordered container as the border would be duplicative and unnecessary. Note however that the most common occurrence of this is using this component inside an Alert which is strongly discouraged. Consider instead linking to another page, especially if your content is long or complex, or reducing content. +Choose the [No border](#no-border) variation when using Additional Info inside of a bordered container as the border would be duplicative and unnecessary. Note however that the most common occurrence of this is using this component inside an Alert which is strongly discouraged. Consider instead linking to another page, especially if your content is long or complex, or reducing content. ### Placement -The following are places where Additional info can be used: +The following are places where Additional Info can be used: * After a header (h2, h3, h4) or paragraph to provide orthogonal details or provide an answer to a common question. * Within a [Process list]({{ site.baseurl }}/components/process-list) to shorten the length of content within a step. @@ -85,7 +85,7 @@ The following are places where Additional info can be used: ## Content considerations * **Use a statement, rather than a question.** Use a statement (like “Why we ask for this information”) rather than a question (like “Why does VA ask for this information?”) for the title (trigger text) of the component. Because we use questions to gather information from people in our forms, structuring additional information as questions as well can cause confusion. Keep titles to a single sentence or sentence fragment with no ending punctuation. -* **Limit the amount of expanded content.** Limit content to fewer than 500 characters (with spaces) when possible. If you need to provide more information, consider using one or more [Accordions]({{ site.baseurl }}/components/accordion) instead or providing a brief overview in the Additional info component with a link to another page with more information. Collaborate with a member of the Content and Information Architecture team to edit content and explore alternatives. +* **Limit the amount of expanded content.** Limit content to fewer than 500 characters (with spaces) when possible. If you need to provide more information, consider using one or more [Accordions]({{ site.baseurl }}/components/accordion) instead or providing a brief overview in the Additional Info component with a link to another page with more information. Collaborate with a member of the Content and Information Architecture team to edit content and explore alternatives. * **Use lists in expanded content as needed.** To make content easier to scan, we encourage you to use numbered (also called "ordered") and bulleted (also called "unordered") lists as needed. ## Accessibility considerations diff --git a/src/_components/address-block.md b/src/_components/address-block.md index 3d6799221..7f7ebdd97 100644 --- a/src/_components/address-block.md +++ b/src/_components/address-block.md @@ -1,7 +1,7 @@ --- layout: component -title: Address block -intro-text: "Address block is used to highlight mailing and physical addresses and contact information for VA facilities (with some notable exceptions). It can also be used to display personal information we may have for a Veteran." +title: Address Block +intro-text: "Address Block is used to highlight mailing and physical addresses and contact information for VA facilities (with some notable exceptions). It can also be used to display personal information we may have for a Veteran." github-title: va-address-block figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=1102%3A9228&mode=design&t=J32RmU6Fjbjuh9bD-1 status: use-best-practice @@ -34,7 +34,7 @@ anchors: ### Placement -* Address block can appear within a block of content following a paragraph, list, or header. +* Address Block can appear within a block of content following a paragraph, list, or header. ### Instances of this component in production @@ -54,7 +54,7 @@ anchors: ## Code usage -* The Address block component is created by applying the CSS class .va-address-block to a

HTML element. +* The Address Block component is created by applying the CSS class .va-address-block to a

HTML element. * Only use the

HTML element for contact information related to the current page.
is only intended for contact information and not physical addresses (e.g. not for a Health Center facility address). @@ -62,4 +62,4 @@ anchors: {% include content/addresses.md %} -{% include _component-checklist.html component_name="va-address-block" %} \ No newline at end of file +{% include _component-checklist.html component_name="va-address-block" %} diff --git a/src/_components/back-to-top.md b/src/_components/back-to-top.md index 6c595bb21..0b7094542 100644 --- a/src/_components/back-to-top.md +++ b/src/_components/back-to-top.md @@ -1,9 +1,9 @@ --- layout: component -sub_section: Back to top -title: "Back to top" +sub_section: Back to Top +title: "Back to Top" figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=1110%3A4128&mode=design&t=vNilCSI60pQBiKkM-1 -intro-text: "The Back to top component is a shortcut that allows the user to quickly navigate to the top of a long page of content." +intro-text: "The Back to Top component is a shortcut that allows the user to quickly navigate to the top of a long page of content." web-component: va-back-to-top web: true mobile-app: false @@ -22,7 +22,7 @@ anchors: ## Usage -* On large and medium screens, the Back to top component will have the label, “Back to top” with an arrow icon to the left of the label. On small screens, the Back to top component will only have the arrow icon. Use one Back to top component per page. +* On large and medium screens, the Back to Top component will have the label, “Back to Top” with an arrow icon to the left of the label. On small screens, the Back to top component will only have the arrow icon. Use one Back to top component per page. ### When to use Back to top diff --git a/src/_components/button/button-group.md b/src/_components/button/button-group.md index 9921c63c7..959483dc3 100644 --- a/src/_components/button/button-group.md +++ b/src/_components/button/button-group.md @@ -2,11 +2,11 @@ layout: component permalink: /components/button/button-group has-parent: /components/button/ -title: Button group -aka: Button pair +title: Button Group +aka: Button Pair research-link: Buttons figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=601-5424 -intro-text: The default button group arranges each button as a separate element with a gap between them. On mobile devices, the buttons are arranged vertically. +intro-text: The default Button Group arranges each button as a separate element with a gap between them. On mobile devices, the buttons are arranged vertically. status: use-deployed web-component: va-button-pair web: true @@ -39,7 +39,7 @@ anchors: @@ -62,20 +62,20 @@ type="secondary" - Buttons appear full width up to the [mobile-lg breakpoint]({{ site.baseurl }}/foundation/breakpoints#names-and-values), with the primary button on top of the secondary button. - At and above the [mobile-lg breakpoint]({{ site.baseurl }}/foundation/breakpoints#names-and-values), buttons left-align and revert to their natural width (i.e., as wide as they need to be to accommodate their label). The primary button continues to appear before the secondary button. -### Button groups in modals +### Button Groups in modals - Button groups within [default modals]({{ site.baseurl }}/components/modal/#default) always stack vertically at full width, regardless of breakpoint size. - Button groups within [**large** modals]({{ site.baseurl }}/components/modal/#large) stack vertically at full width until the [tablet breakpoint]({{ site.baseurl }}/foundation/breakpoints#names-and-values). Above that breakpoint, buttons revert to their natural width and appear inline, with the primary button before the secondary button. ### Choosing between variations -- Use the [default](#default-yesno) button group variation to provide primary and secondary response options to a question. -- Use the [Update/Cancel](#updatecancel) button group variation for saving form input on a form. -- Use the [Back/Continue](#backcontinue) button group variation for providing navigation options through a step by step flow of form pages. +- Use the [default](#default-yesno) Button Group variation to provide primary and secondary response options to a question. +- Use the [Update/Cancel](#updatecancel) Button Group variation for saving form input on a form. +- Use the [Back/Continue](#backcontinue) Button Group variation for providing navigation options through a step by step flow of form pages. ### Placement -- A button group appears at the bottom of a form. +- A Button Group appears at the bottom of a form. ### Design principles diff --git a/src/_components/form/date-input.md b/src/_components/form/date-input.md index ed31fb9ba..c85b2a3e2 100644 --- a/src/_components/form/date-input.md +++ b/src/_components/form/date-input.md @@ -2,10 +2,10 @@ layout: component permalink: /components/form/date-input has-parent: /components/form/ -title: Date input +title: Date Input research-title: Form controls figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=2000-2564 -intro-text: "Use the date input component to help users enter a date they would know or a date they can approximate." +intro-text: "Use the Date Input component to help users enter a date they would know or a date they can approximate." status: use-deployed anchors: - anchor: Examples @@ -43,14 +43,14 @@ mobile-app: false ## Usage -### When to use date input +### When to use Date Input - Use a month, day, year date input component for a date a user knows, like a date of birth or marriage. (Example: July 21, 1992). Or a date they can easily look up (for example, the expiration date of a credit card). - Use the [month year](#monthyear) variant for a date a user can approximate, like a date they graduated from high school or a GED equivalent. (Example: May 2010) ### When to consider something else -Do not use the date input component if users are unlikely to know the exact date of the event you’re asking about. You may consider using a date picker for scheduling, with the following caveats +Do not use the Date Input component if users are unlikely to know the exact date of the event you’re asking about. You may consider using a date picker for scheduling, with the following caveats - We do not currently have a calendar picker as part of the design system. For reference, visit the VA online scheduling tool (VAOS) to see an experimental version of a calendar picker. - Date pickers have not been tested for accessibility, and may lead to launch blocking issues for your product unless carefully designed with an accessibility specialist. We strongly recommend reaching out to #accessibility-help on slack for support before considering this pattern. @@ -61,7 +61,7 @@ Do not use the date input component if users are unlikely to know the exact date - For the month select box, provide the user unabbreviated months to choose from. Example: January ### Validation -By default all date components have the following validation: +By default all Date components have the following validation: - Cannot have blank values - Month and Day must be valid numbers - The Year cannot fall outside of the range of 1900 through the current year plus 100 years diff --git a/src/_components/form/file-input.md b/src/_components/form/file-input.md index 1cd95201d..a40c0d308 100644 --- a/src/_components/form/file-input.md +++ b/src/_components/form/file-input.md @@ -4,8 +4,8 @@ permalink: /components/form/file-input redirect_from: - /components/form/file-input-multiple has-parent: /components/form/ -title: File input -intro-text: "File input allows files to be attached and/or uploaded. Use the single file variation for one file at a time, or the multiple file variation to include several files in sequence." +title: File Input +intro-text: "File Input allows files to be attached and/or uploaded. Use the single file variation for one file at a time, or the multiple file variation to include several files in sequence." research-title: Form controls figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1212 github-discussion-url: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/discussions/4609 @@ -25,10 +25,10 @@ anchors: ## Overview -The file input component gives users a way to select and upload files. You have two options: +The File Input component gives users a way to select and upload files. You have two options: -* **Single file input** – Use when users need to upload one file at a time. -* **Multiple file input** – Use when users need to upload several files in sequence. +* **Single File Input** – Use when users need to upload one file at a time. +* **Multiple File Input** – Use when users need to upload several files in sequence. ## Examples @@ -79,7 +79,7 @@ The file input component gives users a way to select and upload files. You have #### File uploading with progress indicator An API must populate percentUploaded with a value to display the progress bar. -{% include component-example.html alt="File input component showing a progress bar at 50% while uploading a document" file="/images/components/file-input/file-input-uploading.png" caption="File input showing upload progress. (Screenshot)" class="x2" reverse="true" %} +{% include component-example.html alt="File Input component showing a progress bar at 50% while uploading a document" file="/images/components/file-input/file-input-uploading.png" caption="File Input showing upload progress. (Screenshot)" class="x2" reverse="true" %} @@ -101,7 +101,7 @@ The file input component gives users a way to select and upload files. You have #### File with an additional form input -{% include component-example.html alt="Additional form inputs" file="/images/components/file-input/additionalForm.png" caption="File input used with additional form field to complete the upload process. (Screenshot)" class="x2" reverse="true" %} +{% include component-example.html alt="Additional form inputs" file="/images/components/file-input/additionalForm.png" caption="File Input used with additional form field to complete the upload process. (Screenshot)" class="x2" reverse="true" %} @@ -115,19 +115,19 @@ The file input component gives users a way to select and upload files. You have Logic for detecting and decrypting PDF files is handled in a shared Platform utility. View Checking if an uploaded PDF is encrypted. -{% include component-example.html alt="File input password prompt" file="/images/components/file-input/file-input-password-prompt.png" caption="User prompted to enter password for encrypted PDF file. (Screenshot)" class="x2" reverse="true" %} +{% include component-example.html alt="File Input password prompt" file="/images/components/file-input/file-input-password-prompt.png" caption="User prompted to enter password for encrypted PDF file. (Screenshot)" class="x2" reverse="true" %} #### Password error -{% include component-example.html alt="File input field error" file="/images/components/file-input/file-input-password-error.png" caption="Error message shown when password is incorrect. (Screenshot)" class="x2" reverse="true" %} +{% include component-example.html alt="File Input field error" file="/images/components/file-input/file-input-password-error.png" caption="Error message shown when password is incorrect. (Screenshot)" class="x2" reverse="true" %} #### Password success -{% include component-example.html alt="File input password success" file="/images/components/file-input/file-input-password-success.png" caption="Confirmation shown when password-protected PDF is successfully decrypted. (Screenshot)" class="x2" reverse="true" %} +{% include component-example.html alt="File Input password success" file="/images/components/file-input/file-input-password-success.png" caption="Confirmation shown when password-protected PDF is successfully decrypted. (Screenshot)" class="x2" reverse="true" %} @@ -152,7 +152,7 @@ The file input component gives users a way to select and upload files. You have ### How file inputs work at VA -**Upload one file at a time.** The file input component uploads a single file per interaction. People cannot select multiple files at once because: +**Upload one file at a time.** The File Input component uploads a single file per interaction. People cannot select multiple files at once because: * Not everyone knows how to select multiple files in their OS file browser * Some mobile devices do not support selecting multiple files at once diff --git a/src/_components/form/index.md b/src/_components/form/index.md index a26a8a934..424da12f7 100644 --- a/src/_components/form/index.md +++ b/src/_components/form/index.md @@ -8,21 +8,21 @@ status: use-deployed sub-pages: - sub-page: Autosave - sub-page: Checkbox - - sub-page: Combo box - - sub-page: Date input - - sub-page: Memorable date - - sub-page: File input + - sub-page: Combo Box + - sub-page: Date Input + - sub-page: Memorable Date + - sub-page: File Input - sub-page: Label - - sub-page: Need help? - - sub-page: Penalty notice + - sub-page: Need Help? + - sub-page: Penalty Notice - sub-page: Prefill - sub-page: Privacy Agreement - sub-page: Progress bar - Segmented - - sub-page: Radio button + - sub-page: Radio Button - sub-page: Select - - sub-page: Statement of truth + - sub-page: Statement of Truth - sub-page: Telephone Input - - sub-page: Text input + - sub-page: Text Input - sub-page: Textarea anchors: - anchor: Usage @@ -66,4 +66,4 @@ anchors: ## Hint text -{% include components/hint-text.md %} \ No newline at end of file +{% include components/hint-text.md %} diff --git a/src/_components/form/need-help.md b/src/_components/form/need-help.md index c99d4c57e..583abe09f 100644 --- a/src/_components/form/need-help.md +++ b/src/_components/form/need-help.md @@ -2,7 +2,7 @@ layout: component permalink: /components/form/need-help has-parent: /components/form/ -title: Need help? +title: Need Help? intro-text: A footer found on application pages that provides contact information for the VA. research-title: Form controls figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1214 diff --git a/src/_components/form/penalty-notice.md b/src/_components/form/penalty-notice.md index 7ce797baa..a21166bd5 100644 --- a/src/_components/form/penalty-notice.md +++ b/src/_components/form/penalty-notice.md @@ -2,7 +2,7 @@ layout: component permalink: /components/form/penalty-notice has-parent: /components/form/ -title: Penalty notice +title: Penalty Notice intro-text: A required legal notice for all forms. research-title: Form controls figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1216 @@ -46,4 +46,4 @@ Code for this component is shown in the [examples](#examples). ## Content considerations -* Do not alter this content without legal review. \ No newline at end of file +* Do not alter this content without legal review. diff --git a/src/_components/form/statement-of-truth.md b/src/_components/form/statement-of-truth.md index 81c6dc7ed..a315bb660 100644 --- a/src/_components/form/statement-of-truth.md +++ b/src/_components/form/statement-of-truth.md @@ -2,9 +2,9 @@ layout: component permalink: /components/form/statement-of-truth has-parent: /components/form/ -title: Statement of truth +title: Statement of Truth contributor: Jeana Clark, Nick Sprinkle -intro-text: "The Statement of truth allows users to certify that the information they have provided in form is correct and true to the best of their knowledge and belief." +intro-text: "The Statement of Truth allows users to certify that the information they have provided in form is correct and true to the best of their knowledge and belief." research-title: Form - Statement of truth figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=5378-3634 status: use-deployed @@ -41,7 +41,7 @@ anchors: ## Usage -### When to use Component name +### When to use Statement of Truth * **To collect a signature.**: This component collects a digital signature from the user to certify their submission. This component is used in the [Ask users for a signature]({{ site.baseurl }}/patterns/ask-users-for/signature) pattern. diff --git a/src/_components/form/telephone-input.md b/src/_components/form/telephone-input.md index dc8b09522..a48c9cd6a 100644 --- a/src/_components/form/telephone-input.md +++ b/src/_components/form/telephone-input.md @@ -3,7 +3,7 @@ layout: component permalink: /components/form/telephone-input has-parent: /components/form/ title: Telephone Input -intro-text: "Use the telephone input component to help users enter a telephone number." +intro-text: "Use the Telephone Input component to help users enter a telephone number." figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=31366-83 web-component: va-telephone-input web: true @@ -28,7 +28,7 @@ anchors: Only ask for a phone number if you need it. -### When to use the telephone input +### When to use the Telephone Input * **Collect domestic United States and international phone numbers.** You can place more than one telephone input component on a page if you need to collect multiple numbers. Make each label unique. * **Let users enter telephone numbers in any format familiar to them.** Accept extra spaces, hyphens, brackets, and dashes. Allow country and area codes. diff --git a/src/_components/form/text-input.md b/src/_components/form/text-input.md index ff1b402a8..dda0a5d8b 100644 --- a/src/_components/form/text-input.md +++ b/src/_components/form/text-input.md @@ -2,8 +2,8 @@ layout: component permalink: /components/form/text-input has-parent: /components/form/ -title: Text input -intro-text: "Text input allows people to enter any type of text unless otherwise restricted." +title: Text Input +intro-text: "Text Input allows people to enter any type of text unless otherwise restricted." research-title: Form controls figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1223 status: use-best-practice diff --git a/src/_components/language-toggle.md b/src/_components/language-toggle.md index b0f71ed9d..986474bde 100644 --- a/src/_components/language-toggle.md +++ b/src/_components/language-toggle.md @@ -1,7 +1,7 @@ --- layout: component -title: Language toggle -intro-text: "The language toggle is our way of providing translated versions of select pages on va.gov." +title: Language Toggle +intro-text: "The Language Toggle is our way of providing translated versions of select pages on va.gov." github-title: va-language-toggle research-title: va-language-toggle figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=10077-912&t=hljp6A4V60A0rDms-1 @@ -22,13 +22,13 @@ anchors: ### Default -The language toggle provides a series of links that load the page in one of three languages. +The Language Toggle provides a series of links that load the page in one of three languages. -{% include storybook-preview.html story="components-va-language-toggle--default" link_text="Language toggle" %} +{% include storybook-preview.html story="components-va-language-toggle--default" link_text="Language Toggle" %} ### Two Languages -{% include storybook-preview.html story="components-va-language-toggle--two-languages" link_text="Language toggle" %} +{% include storybook-preview.html story="components-va-language-toggle--two-languages" link_text="Language Toggle" %} ## Usage @@ -43,14 +43,14 @@ The language toggle provides a series of links that load the page in one of thre ### How this component works -* **Provides navigation to the same page at a language-specific URL.** The language toggle uses links to navigate the user to the same page, in a different language, and at a language-specific URL. Currently, the language code does not match [ISO language codes](https://www.loc.gov/standards/iso639-2/php/code_list.php) but should conform in future. +* **Provides navigation to the same page at a language-specific URL.** The Language Toggle uses links to navigate the user to the same page, in a different language, and at a language-specific URL. Currently, the language code does not match [ISO language codes](https://www.loc.gov/standards/iso639-2/php/code_list.php) but should conform in future. * Example English (default) URL: [https://www.va.gov/health-care/covid-19-vaccine/](https://www.va.gov/health-care/covid-19-vaccine/) * Example Spanish URL: [https://www.va.gov/health-care/covid-19-vaccine-esp/](https://www.va.gov/health-care/covid-19-vaccine-esp/) * Example Tagalog URL: [https://www.va.gov/health-care/covid-19-vaccine-tag/](https://www.va.gov/health-care/covid-19-vaccine-tag/) ### Behavior -* **Navigates to the same page in a different language.** When selected, the language toggle brings the user to the alternate language version of the page they were on. +* **Navigates to the same page in a different language.** When selected, the Language Toggle brings the user to the alternate language version of the page they were on. * **Body content, side navigation, breadcrumbs, and any alerts are translated.** Currently (01/2024), the expectation is that the following sections of the page are translated: * Main content of the page * The parent and sibling pages within the [side navigation menu]({{ site.baseurl }}/components/sidenav) @@ -83,11 +83,11 @@ The component appears 32px below the "In this section" menu and 24px above the h ## Accessibility considerations * **The language of the page should be identified using the HTML lang attribute.** For example, `
`. The `lang` attribute is also added to the `
` element. This may disagree with the lang attribute of the `` element. Please see [H58: Using language attributes to identify changes in the human language](https://www.w3.org/WAI/WCAG21/Techniques/html/H58). -* **Label the language toggle code**. This ensures that it is spoken in the correct language if read aloud by assistive technologies. The `lang` value on the link should match that of the resulting page it links to. +* **Label the Language Toggle code**. This ensures that it is spoken in the correct language if read aloud by assistive technologies. The `lang` value on the link should match that of the resulting page it links to. ## Related * [Breadcrumbs]({{ site.baseurl }}/components/breadcrumbs) * [Sidenav]({{ site.baseurl }}/components/sidenav) -{% include _component-checklist.html component_name=page.web-component %} \ No newline at end of file +{% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/on-this-page.md b/src/_components/on-this-page.md index 4fe5be5f1..19161be97 100644 --- a/src/_components/on-this-page.md +++ b/src/_components/on-this-page.md @@ -1,7 +1,7 @@ --- layout: component -title: On this page -intro-text: "The On this page jump links component summarizes the sections (<h2>s) at the top of long pages and allows users to jump down the page to the respective section." +title: On this Page +intro-text: "The On this Page jump links component summarizes the sections (<h2>s) at the top of long pages and allows users to jump down the page to the respective section." research-title: "On this page jump link" figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=798-1500 status: use-best-practice @@ -21,21 +21,21 @@ anchors: ## Usage -### When to use the On this page jump links component +### When to use the On this Page jump links component - Use this component to quickly tell users what information they can get on that page. - This component is especially helpful for pages with a lot of content, as it helps users navigate longer pages and provides guideposts that bring users deeper into the content. ### When to consider something else -- Don't use the On this page jump links if the content on the page isn't very long. To display this component, the page must have a minimum of two H2 section titles. +- Don't use the On this Page jump links if the content on the page isn't very long. To display this component, the page must have a minimum of two H2 section titles. - If the content you want users to see is too far down the page, consider rearranging the content to achieve the desired hierarchy. -### How to use the On this page jump links component +### How to use the On this Page jump links component - **Keep the first link and its corresponding heading close together,** so users can more easily make the connection that the links correspond to the H2 section titles -- **The content on the page must have a minimum of two H2 section titles to use the On this page jump links.** -- **On this page jump links component pairs well with the Back to top component.** The [Back to top component]({{ site.baseurl }}/components/back-to-top) helps users quickly navigate back to the top of long pages of content. +- **The content on the page must have a minimum of two H2 section titles to use the On this Page jump links.** +- **On this Page jump links component pairs well with the Back to top component.** The [Back to top component]({{ site.baseurl }}/components/back-to-top) helps users quickly navigate back to the top of long pages of content. ## Code usage @@ -48,6 +48,6 @@ anchors: ## Accessibility considerations - **Heading levels should increase only by one.** The proper order of heading levels conveys the structure of the page for screen reader users and provides a natural hierarchy for your content. When heading elements are applied correctly, the page becomes much easier for both screen reader and sighted users to navigate. -- **The focus should be on the destination.** When a user clicks on an item on the On this page component, the focus should move to the heading that it links to. +- **The focus should be on the destination.** When a user clicks on an item on the On this Page component, the focus should move to the heading that it links to. - **Allow enough spacing between components.** Space should be 1.5 rem (36px) from the bottom of the descender to the top of the ascender. -- **On this page jump links should be contained in a navigation landmark** so it can be easily discovered by screen reader users. +- **On this Page jump links should be contained in a navigation landmark** so it can be easily discovered by screen reader users. diff --git a/src/_components/process-list.md b/src/_components/process-list.md index 2cb43b48a..59ce852d6 100644 --- a/src/_components/process-list.md +++ b/src/_components/process-list.md @@ -1,7 +1,7 @@ --- layout: component -title: "Process list" -intro-text: "The process list, also known as the subway map, is used in a static informational context to describe the process to apply for a benefit or to provide tracking information to a user where they are in a given process." +title: "Process List" +intro-text: "The Process List, also known as the subway map, is used in a static informational context to describe the process to apply for a benefit or to provide tracking information to a user where they are in a given process." figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=35%3A169&mode=design&t=J32RmU6Fjbjuh9bD-1 web-component: va-process-list web: true @@ -43,7 +43,7 @@ anchors: ### Additional guidance for VA -#### Additional uses of a process list +#### Additional uses of a Process List * **For multi-step processes.** In a multi-step process where the user may need to track progress over an extended period. @@ -53,18 +53,18 @@ anchors: ### How this component works -* **Be thoughtful about the number of steps.** A process list should include between three and ten steps to prevent it from getting too unwieldy or confusing. +* **Be thoughtful about the number of steps.** A Process List should include between three and ten steps to prevent it from getting too unwieldy or confusing. * **Do not stack.** Only one instance of this component should appear on a page. * **Do not mash up this component with other components.** The functionality of this component should not be combined with the functionality for other components. For example, using an Accordion to act as the header for a step in the process would be inappropriate usage. Content should be edited to fit the step, provide key information, and be visible by default. Use of the [Details]({{ site.baseurl }}/components/details) component to condense content within a step is permissible. * **Each step must have visible content.** Each step should have both a heading and content that helps describe the step in more detail. Do not collapse or hide all content within a step. An explanation of the step is minimally required. ### Placement -The Process list appears after a start form link on the form [Introduction page]({{ site.baseurl }}/templates/forms/introduction#process-list). Additional calls-to-action to start the application or process that the process list describes can be found within (in the case of apply) and below the list. +The Process List appears after a start form link on the form [Introduction page]({{ site.baseurl }}/templates/forms/introduction#process-list). Additional calls-to-action to start the application or process that the Process List describes can be found within (in the case of apply) and below the list. ### Instances of this component in production -{% include component-example.html alt="An example of the process list component on an Education benefits application." file="/images/components/process-list/VEAP-benefits-2024.png" caption="The VEAP benefits application form uses a process list on the introduction page." width="50%" %} +{% include component-example.html alt="An example of the Process List component on an Education benefits application." file="/images/components/process-list/VEAP-benefits-2024.png" caption="The VEAP benefits application form uses a Process List on the introduction page." width="50%" %} ## Code usage @@ -78,8 +78,8 @@ The Process list appears after a start form link on the form [Introduction page] * **List headings should start with a verb.** Examples include "Prepare", "Apply", "Review", etc. * **Make headings clear and concise.** You can always write more content in paragraphs and other HTML elements below the heading. -* **Make process step content clear and concise.** Process list should not be a container for many other components and text. Use plain language and briefly explain the step in the process. -* **Status eyebrow should match context.** When using the optional status eyebrow, make sure the status matches the context of the process list. The provided statuses are pending, active, complete. +* **Make process step content clear and concise.** Process List should not be a container for many other components and text. Use plain language and briefly explain the step in the process. +* **Status eyebrow should match context.** When using the optional status eyebrow, make sure the status matches the context of the Process List. The provided statuses are pending, active, complete. ## Accessibility considerations @@ -92,6 +92,6 @@ The Process list appears after a start form link on the form [Introduction page] ### Additional accessibility considerations for VA * **Don't use headings alone.** Each step should have both a heading and content that helps describe the step in more detail. -* **Use eyebrow status for update.** When using a process list that has a status update the eyebrow feature is required for accessibility. +* **Use eyebrow status for update.** When using a Process List that has a status update the eyebrow feature is required for accessibility. {% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/progress-bar-activity.md b/src/_components/progress-bar-activity.md index a1e26e672..ed2a4f768 100644 --- a/src/_components/progress-bar-activity.md +++ b/src/_components/progress-bar-activity.md @@ -1,7 +1,7 @@ --- layout: component permalink: /components/progress-bar/ -title: "Progress bar - Activity" +title: "Progress Bar - Activity" intro-text: "A progress bar provides status as the system is taking an action on behalf of the user." research-title: Progress bars figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1236 @@ -57,5 +57,5 @@ anchors: ## Related -* [Progress bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented) +* [Progress Bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented) * [Loading indicator]({{ site.baseurl }}/components/loading-indicator) diff --git a/src/_components/summary-box.md b/src/_components/summary-box.md index 3bae8fb88..629473d01 100644 --- a/src/_components/summary-box.md +++ b/src/_components/summary-box.md @@ -3,9 +3,9 @@ layout: component permalink: /components/summary-box redirect_from: - /components/featured-content -title: "Summary box" +title: "Summary Box" aka: Featured content -intro-text: "The summary box component helps Veterans quickly identify must-read information on a page. Use this component to highlight a small chunk of the most important information on a page, like eligibility criteria or coverage under a particular VA benefit." +intro-text: "The Summary Box component helps Veterans quickly identify must-read information on a page. Use this component to highlight a small chunk of the most important information on a page, like eligibility criteria or coverage under a particular VA benefit." figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=1192%3A4460&mode=design&t=vNilCSI60pQBiKkM-1 anchors: - anchor: Examples @@ -35,7 +35,7 @@ mobile-app: false ### Additional guidance for VA -### When to use summary box +### When to use Summary Box * **Highlight the most important information.** The Summary box component is for calling out key details that readers shouldn’t miss. It was originally intended to hold eligibility data exclusively. The content should be "evergreen", not time sensitive. @@ -64,7 +64,7 @@ Summary box is found towards the top of the page after the h1 title of the page #### Eligibility -{% include component-example.html alt="An example of an eligibility summary box block in the Health care eligibility page." file="/images/components/summary-box/eligibility.png" caption="The summary box block is mainly intended for use in highlighting eligibility on VA.gov." width="75%" %} +{% include component-example.html alt="An example of an eligibility Summary Box block in the Health care eligibility page." file="/images/components/summary-box/eligibility.png" caption="The Summary Box block is mainly intended for use in highlighting eligibility on VA.gov." width="75%" %} {% capture example_like_this_1 %} {% include component-example.html alt="Example of the Link, Collection, Related links component to show a list of links." file="/images/components/link/collection-major.png" caption="Use the Major links variation of the Link - Collection component for a collection of links." %} From bcaddb3a81b2a988195f1e28c2bb262d17676a4c Mon Sep 17 00:00:00 2001 From: Jeana Date: Mon, 20 Apr 2026 19:32:55 -0500 Subject: [PATCH 03/14] Copilot fixes --- src/_components/alert/index.md | 29 +++++++++------ src/_components/back-to-top.md | 1 - src/_components/banner/official-gov.md | 31 ++++++++++------ src/_components/button/button-segmented.md | 26 ++++++++------ src/_components/button/index.md | 26 ++++++++------ src/_components/footer/minimal.md | 1 - src/_components/form/checkbox.md | 24 +++++++------ src/_components/form/combo-box.md | 2 +- src/_components/form/memorable-date.md | 2 +- .../form/progress-bar-segmented.md | 4 +-- src/_components/form/radio-button.md | 28 ++++++++------- src/_components/icon.md | 29 ++++++++------- src/_components/language-toggle.md | 8 +++++ src/_components/link/index.md | 27 +++++++------- src/_components/loading-indicator.md | 36 ++++++++++--------- src/_components/omb-info.md | 9 +++++ src/_components/on-this-page.md | 10 +++--- src/_components/snackbar.md | 2 +- src/_components/tag/index.md | 6 +++- src/_components/text.md | 12 ++++--- 20 files changed, 190 insertions(+), 123 deletions(-) diff --git a/src/_components/alert/index.md b/src/_components/alert/index.md index d2b6e4812..74c0549f1 100644 --- a/src/_components/alert/index.md +++ b/src/_components/alert/index.md @@ -275,17 +275,21 @@ Displaying multiple alerts should be avoided. However, when you need to display ## Code usage - +

+ +

- +

+ +

## Content considerations @@ -316,6 +320,11 @@ Displaying multiple alerts should be avoided. However, when you need to display ## Accessibility considerations +

USWDS component

This component comes directly from the U.S. Web Design System (USWDS). Thus we follow the guidance and considerations documented in the USWDS for this component. The guidance below augments the USWDS guidance to give specifics on how we use the component at the VA.

- +

+ +

### When to use Banner - Official Gov @@ -52,11 +54,16 @@ anchors: ## Code usage - + + ## Accessibility considerations @@ -64,3 +71,7 @@ anchors: href="https://designsystem.digital.gov/components/banner/#accessibility-default-banner" text="Refer to the U.S. Web Design System for accessibility guidance" type="secondary"> + + diff --git a/src/_components/button/button-segmented.md b/src/_components/button/button-segmented.md index 51217e6bb..64b5f6d53 100644 --- a/src/_components/button/button-segmented.md +++ b/src/_components/button/button-segmented.md @@ -116,17 +116,21 @@ The component is often integrated into the top navigation bar (or just below it) ## Code usage - - - +

+ +

+ +

+ +

## Content considerations diff --git a/src/_components/button/index.md b/src/_components/button/index.md index 6ea57dcc4..eb5473476 100644 --- a/src/_components/button/index.md +++ b/src/_components/button/index.md @@ -138,17 +138,21 @@ anchors: ## Code usage - - - +

+ +

+ +

+ +

## Content considerations diff --git a/src/_components/footer/minimal.md b/src/_components/footer/minimal.md index eb6c1a833..5c7858ada 100644 --- a/src/_components/footer/minimal.md +++ b/src/_components/footer/minimal.md @@ -13,7 +13,6 @@ mobile-app: false anchors: - anchor: Examples - anchor: Usage - - anchor: Code usage - anchor: Content considerations - anchor: Component checklist --- diff --git a/src/_components/form/checkbox.md b/src/_components/form/checkbox.md index 35284b95a..0e0bb9c4c 100644 --- a/src/_components/form/checkbox.md +++ b/src/_components/form/checkbox.md @@ -242,19 +242,23 @@ anchors: ## Code usage - +

+ +

{% include content/using-message-aria-describedby.md %} - +

+ +

### Native Events diff --git a/src/_components/form/combo-box.md b/src/_components/form/combo-box.md index b26d1936f..fa6033266 100644 --- a/src/_components/form/combo-box.md +++ b/src/_components/form/combo-box.md @@ -2,7 +2,7 @@ layout: component permalink: /components/form/combo-box has-parent: /components/form/ -title: Combo box +title: Combo Box intro-text: "A combo box helps users select an item from a large list of options." research-title: Form controls status: use-with-caution-candidate diff --git a/src/_components/form/memorable-date.md b/src/_components/form/memorable-date.md index 0638c4a43..ec339ebe8 100644 --- a/src/_components/form/memorable-date.md +++ b/src/_components/form/memorable-date.md @@ -2,7 +2,7 @@ layout: component permalink: /components/form/memorable-date has-parent: /components/form/ -title: Memorable date +title: Memorable Date research-title: Memorable Date intro-text: "Three text fields are the easiest way for users to enter most dates." status: use-deployed diff --git a/src/_components/form/progress-bar-segmented.md b/src/_components/form/progress-bar-segmented.md index 8a2211741..022b1221f 100644 --- a/src/_components/form/progress-bar-segmented.md +++ b/src/_components/form/progress-bar-segmented.md @@ -2,7 +2,7 @@ layout: component permalink: /components/form/progress-bar-segmented has-parent: /components/form/ -title: "Progress bar - Segmented" +title: "Progress Bar - Segmented" intro-text: "A segmented progress bar updates users on their progress through a multi-step process." aka: Step indicator research-title: Progress bars @@ -62,7 +62,7 @@ anchors: ### Additional guidance for VA -The segmented progress bar is primarily used in multi-step form flows to show users their progress through the application process. +The Segmented Progress Bar is primarily used in multi-step form flows to show users their progress through the application process. For additional guidance on using progress bars in form flows, see [Form templates]({{ site.baseurl }}/templates/forms/) and [Form accessibility guidelines]({{ site.baseurl }}/templates/forms/accessibility-guidelines). diff --git a/src/_components/form/radio-button.md b/src/_components/form/radio-button.md index 6cc369bb2..dc0f01190 100644 --- a/src/_components/form/radio-button.md +++ b/src/_components/form/radio-button.md @@ -2,7 +2,7 @@ layout: component permalink: /components/form/radio-button has-parent: /components/form/ -title: Radio button +title: Radio Button research-title: Form controls intro-text: Radio buttons allow users to select exactly one choice from a group. figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=351-2593 @@ -134,17 +134,21 @@ anchors: ## Code usage - - - +

+ +

+ +

+ +

## Content considerations diff --git a/src/_components/icon.md b/src/_components/icon.md index e319e9da4..e69d87ea2 100644 --- a/src/_components/icon.md +++ b/src/_components/icon.md @@ -211,21 +211,22 @@ Some icons may have specific placement guidance defined here. - **Right-facing chevrons are reserved for links, but may be used on buttons that expand and collapse additional content.** In the latter case, the direction of the chevron should indicate the direction in which additional content expands and collapses, like in drawers, flyout menus, and dropdowns. - **Examples:** Nested menu items within "VA Benefits and Health Care" in the [Header]({{ site.baseurl }}/components/header/), [Additional Info]({{ site.baseurl }}/components/additional-info), and [Alert - Expandable]({{ site.baseurl }}/components/alert/alert-expandable/). -{% include component-docs.html %} - ## Code usage - - - +

+ +

+

+ +

## Accessibility considerations Icon usage typically falls into two categories, decorative and semantic. @@ -282,9 +283,11 @@ Avoid requesting a new icon when:
  • Submit Your Icon Request: If you've identified an icon that meets your needs and aligns with VADS guidelines, you can propose its addition to the Design System using the link below: +

    Request a new addition to the Design System

    + If your request is part of an experimental initiative, please link any related tickets to provide context and ensure visibility for the Design System team.
    • diff --git a/src/_components/language-toggle.md b/src/_components/language-toggle.md index 986474bde..c43106223 100644 --- a/src/_components/language-toggle.md +++ b/src/_components/language-toggle.md @@ -76,6 +76,14 @@ The component appears 32px below the "In this section" menu and 24px above the h * [La Ley PACT y sus beneficios de VA](https://www.va.gov/resources/the-pact-act-and-your-va-benefits-esp/) * [Ang PACT Act at ang iyong mga VA benefits](https://www.va.gov/resources/the-pact-act-and-your-va-benefits-tag/) +## Code Usage + + + ## Content considerations * **Link is in native language.** Links in this component should be in the native language. For example, "Español". **Note**: Sometimes the word is the same in both English and the target language, for example "Tagalog". diff --git a/src/_components/link/index.md b/src/_components/link/index.md index e971ab8f1..d1fdf144c 100644 --- a/src/_components/link/index.md +++ b/src/_components/link/index.md @@ -326,18 +326,21 @@ The mobile app includes link variations that address platform-specific needs: ## Code usage - - - - +

    + +

    + +

    + +

    ### Links to content in another language diff --git a/src/_components/loading-indicator.md b/src/_components/loading-indicator.md index 128d6dffb..308ca942f 100644 --- a/src/_components/loading-indicator.md +++ b/src/_components/loading-indicator.md @@ -1,6 +1,6 @@ --- layout: component -title: "Loading indicator" +title: "Loading Indicator" intro-text: "A loading indicator provides a clue to ongoing activity when the site needs to load additional content." research-title: "Loading indicators" figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=35%3A161&mode=design&t=vNilCSI60pQBiKkM-1 @@ -43,7 +43,7 @@ anchors: ## Usage -### When to use the Loading indicator +### When to use the Loading Indicator * When the wait time for a process, such as loading a page, is unknown. @@ -54,17 +54,21 @@ anchors: ## Code usage - - - +

    + +

    + +

    + +

    ## Content considerations @@ -74,11 +78,11 @@ anchors: 2. An object that is being acted upon 3. An ellipsis -* **Use present participle verbs (ending with "-ing"):** Start each loading indicator with the verb of the action that is happening. Consider what the system is actually doing. Remember that the loading indicator is supposed to inform the user what is happening while they’re waiting. The system isn’t always loading something. Sometimes it's sending something. Other times it's saving something. +* **Use present participle verbs (ending with "-ing"):** Start each Loading Indicator with the verb of the action that is happening. Consider what the system is actually doing. Remember that the Loading Indicator is supposed to inform the user what is happening while they’re waiting. The system isn’t always loading something. Sometimes it's sending something. Other times it's saving something. * **Describe the object being acted upon:** Follow the verb with the object that is being acted upon. For example, if the system is saving something, describe (in 1 or 2 words) what is being saved. If applicable, make the object personal to the user by using a possessive pronoun (your) instead of an article (a, the). -* **End with an ellipsis:** End each loading indicator with an ellipsis (3 periods). Do not use unnecessary words, such as "please" or "wait". +* **End with an ellipsis:** End each Loading Indicator with an ellipsis (3 periods). Do not use unnecessary words, such as "please" or "wait". Examples of loading indicator messages: @@ -88,5 +92,5 @@ Examples of loading indicator messages: ## Accessibility considerations -* On the web, the loading indicator component is used to notify user’s that the page content is loading. W3C WAI-ARIA `aria-live="polite"`, `aria-label` and `aria-valuetext` are used to ensure screen reader users are also provided the same information. +* On the web, the Loading Indicator component is used to notify user’s that the page content is loading. W3C WAI-ARIA `aria-live="polite"`, `aria-label` and `aria-valuetext` are used to ensure screen reader users are also provided the same information. * In the mobile app, use the equivalent accessibility hints and labels in React Native. diff --git a/src/_components/omb-info.md b/src/_components/omb-info.md index 1d2c58e3b..2ae052947 100644 --- a/src/_components/omb-info.md +++ b/src/_components/omb-info.md @@ -100,6 +100,15 @@ The respondent burden estimate should be included when available, however it is As mentioned above, the Paperwork Reduction Act is very specific about the placement of this information thus it must appear on the [form introduction page]({{ site.baseurl }}/templates/forms/introduction). + +## Code usage + + + ## Content considerations The content of this component should not be altered. Additional information may be provided the "With Custom Respondent Burden Benefit Type" and "With Children" variations of this component under specific circumstances. diff --git a/src/_components/on-this-page.md b/src/_components/on-this-page.md index 19161be97..58b261483 100644 --- a/src/_components/on-this-page.md +++ b/src/_components/on-this-page.md @@ -39,11 +39,11 @@ anchors: ## Code usage - + ## Accessibility considerations diff --git a/src/_components/snackbar.md b/src/_components/snackbar.md index d3289c79c..157d236e1 100644 --- a/src/_components/snackbar.md +++ b/src/_components/snackbar.md @@ -58,7 +58,7 @@ anchors: ## Code usage diff --git a/src/_components/tag/index.md b/src/_components/tag/index.md index fe625668b..32b213451 100644 --- a/src/_components/tag/index.md +++ b/src/_components/tag/index.md @@ -52,7 +52,11 @@ Used to draw attention to new or important content, categorize information, or i ## Code usage -Refer to the [Tag component in Storybook]({{ site.baseurl }}/storybook/?path=/docs/components-tag--docs) for detailed code usage documentation. + ## Accessibility considerations diff --git a/src/_components/text.md b/src/_components/text.md index 6198e2bd7..8ff99349c 100644 --- a/src/_components/text.md +++ b/src/_components/text.md @@ -56,8 +56,10 @@ There are 9 variations of the Text component. ## Code usage - +

    + +

    Date: Mon, 20 Apr 2026 19:43:58 -0500 Subject: [PATCH 04/14] More copilot fixes --- src/_components/alert/index.md | 5 ----- src/_components/banner/official-gov.md | 19 +++++-------------- src/_components/language-toggle.md | 4 ++-- src/_components/text.md | 4 ++-- 4 files changed, 9 insertions(+), 23 deletions(-) diff --git a/src/_components/alert/index.md b/src/_components/alert/index.md index 74c0549f1..61745bf8b 100644 --- a/src/_components/alert/index.md +++ b/src/_components/alert/index.md @@ -320,11 +320,6 @@ Displaying multiple alerts should be avoided. However, when you need to display ## Accessibility considerations - - + ## Accessibility considerations @@ -71,7 +66,3 @@ anchors: href="https://designsystem.digital.gov/components/banner/#accessibility-default-banner" text="Refer to the U.S. Web Design System for accessibility guidance" type="secondary"> - - diff --git a/src/_components/language-toggle.md b/src/_components/language-toggle.md index c43106223..560a8cf3d 100644 --- a/src/_components/language-toggle.md +++ b/src/_components/language-toggle.md @@ -76,10 +76,10 @@ The component appears 32px below the "In this section" menu and 24px above the h * [La Ley PACT y sus beneficios de VA](https://www.va.gov/resources/the-pact-act-and-your-va-benefits-esp/) * [Ang PACT Act at ang iyong mga VA benefits](https://www.va.gov/resources/the-pact-act-and-your-va-benefits-tag/) -## Code Usage +## Code usage diff --git a/src/_components/text.md b/src/_components/text.md index 8ff99349c..87f5368ef 100644 --- a/src/_components/text.md +++ b/src/_components/text.md @@ -59,7 +59,7 @@ There are 9 variations of the Text component.

    -

    From b0629566d9efe0aeef1d5f11f79b53adaa24d663 Mon Sep 17 00:00:00 2001 From: Jeana Date: Mon, 20 Apr 2026 19:54:40 -0500 Subject: [PATCH 05/14] More copilot fixes --- src/_components/button/button-segmented.md | 2 +- src/_components/form/prefill.md | 1 - src/_components/language-toggle.md | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/_components/button/button-segmented.md b/src/_components/button/button-segmented.md index 64b5f6d53..6356ee03e 100644 --- a/src/_components/button/button-segmented.md +++ b/src/_components/button/button-segmented.md @@ -127,7 +127,7 @@ The component is often integrated into the top navigation bar (or just below it)

    diff --git a/src/_components/form/prefill.md b/src/_components/form/prefill.md index b82967a75..41dc05b2d 100644 --- a/src/_components/form/prefill.md +++ b/src/_components/form/prefill.md @@ -13,7 +13,6 @@ mobile-app: false anchors: - anchor: Examples - anchor: Usage - - anchor: How to use - anchor: Content considerations --- diff --git a/src/_components/language-toggle.md b/src/_components/language-toggle.md index 560a8cf3d..f3f077ed7 100644 --- a/src/_components/language-toggle.md +++ b/src/_components/language-toggle.md @@ -79,7 +79,7 @@ The component appears 32px below the "In this section" menu and 24px above the h ## Code usage From 97964cafa77c9d15d9bdd9e19c7673628ac7922a Mon Sep 17 00:00:00 2001 From: Jeana Date: Mon, 20 Apr 2026 20:02:25 -0500 Subject: [PATCH 06/14] Update template guidance --- src/_about/contributing/contributing-to-docs.md | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/_about/contributing/contributing-to-docs.md b/src/_about/contributing/contributing-to-docs.md index c821c15ce..e9264c4b6 100644 --- a/src/_about/contributing/contributing-to-docs.md +++ b/src/_about/contributing/contributing-to-docs.md @@ -138,17 +138,10 @@ To display an image: {% endraw %} ``` -### Showing code props +### Showing links to code usage on Storybook -To show a table of code props: +Use `` to link to docs for the related compnent. -```markdown -{% raw %} -{% include component-docs.html component_name=page.web-component %} -{% endraw %} -``` - -Note that the header is included in the include file. ### Showing the component checklist From 7a74c9a41a9a2496d0cc0ea5e0923c768b32ef00 Mon Sep 17 00:00:00 2001 From: Jeana Date: Wed, 22 Apr 2026 16:13:42 -0500 Subject: [PATCH 07/14] fix findings from PR reviewers --- src/_about/contributing/contributing-to-docs.md | 2 +- src/_components/back-to-top.md | 8 ++++++++ src/_components/tag/index.md | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/_about/contributing/contributing-to-docs.md b/src/_about/contributing/contributing-to-docs.md index e9264c4b6..9bc842ed7 100644 --- a/src/_about/contributing/contributing-to-docs.md +++ b/src/_about/contributing/contributing-to-docs.md @@ -140,7 +140,7 @@ To display an image: ### Showing links to code usage on Storybook -Use `` to link to docs for the related compnent. +Use `` to link to Storybook docs for the related component. ### Showing the component checklist diff --git a/src/_components/back-to-top.md b/src/_components/back-to-top.md index f8f072bc8..7de18d802 100644 --- a/src/_components/back-to-top.md +++ b/src/_components/back-to-top.md @@ -10,6 +10,7 @@ mobile-app: false anchors: - anchor: Examples - anchor: Usage + - anchor: Code Usage - anchor: Accessibility considerations --- @@ -43,6 +44,13 @@ anchors: * The Back to top component stays fixed in the lower right edge of the main content area when the user reaches the bottom of the page. * Clicking Back to top takes the user to the top of the page. +## Code usage + + ## Accessibility considerations diff --git a/src/_components/tag/index.md b/src/_components/tag/index.md index 32b213451..56eb8c529 100644 --- a/src/_components/tag/index.md +++ b/src/_components/tag/index.md @@ -53,7 +53,7 @@ Used to draw attention to new or important content, categorize information, or i ## Code usage From 94144fa33b3706aacca45839509e404ee4848152 Mon Sep 17 00:00:00 2001 From: Jeana Date: Wed, 22 Apr 2026 17:18:51 -0500 Subject: [PATCH 08/14] Refactor code usage to be more DRY --- src/_components/accordion.md | 8 +- src/_components/additional-info.md | 8 +- src/_components/alert/alert-expandable.md | 7 +- src/_components/alert/alert-sign-in.md | 7 +- src/_components/alert/index.md | 17 +- src/_components/back-to-top.md | 8 +- src/_components/banner/index.md | 8 +- src/_components/banner/maintenance.md | 8 +- src/_components/banner/official-gov.md | 8 +- src/_components/breadcrumbs.md | 8 +- src/_components/button/button-group.md | 8 +- src/_components/button/button-icon.md | 8 +- src/_components/button/button-segmented.md | 18 +- src/_components/button/index.md | 18 +- src/_components/card/card-status.md | 7 +- src/_components/card/index.md | 8 +- src/_components/critical-action.md | 8 +- src/_components/details.md | 8 +- src/_components/footer/minimal.md | 3 + src/_components/form/checkbox.md | 18 +- src/_components/form/combo-box.md | 8 +- src/_components/form/date-input.md | 9 +- src/_components/form/file-input.md | 8 +- src/_components/form/memorable-date.md | 8 +- src/_components/form/need-help.md | 8 +- src/_components/form/privacy-agreement.md | 8 +- .../form/progress-bar-segmented.md | 8 +- src/_components/form/radio-button.md | 18 +- src/_components/form/select.md | 8 +- src/_components/form/statement-of-truth.md | 8 +- src/_components/form/telephone-input.md | 7 +- src/_components/form/text-input.md | 8 +- src/_components/form/textarea.md | 8 +- src/_components/header/minimal.md | 8 +- src/_components/icon.md | 17 +- src/_components/language-toggle.md | 8 +- src/_components/link/action.md | 8 +- src/_components/link/index.md | 18 +- src/_components/loading-indicator.md | 18 +- src/_components/modal/crisis-line-modal.md | 8 +- src/_components/modal/index.md | 8 +- src/_components/omb-info.md | 9 +- src/_components/on-this-page.md | 8 +- src/_components/pagination.md | 8 +- src/_components/process-list.md | 8 +- src/_components/progress-bar-activity.md | 8 +- src/_components/search-filter.md | 10 +- src/_components/search-input.md | 8 +- src/_components/service-list-item.md | 8 +- src/_components/sidenav.md | 8 +- src/_components/snackbar.md | 8 +- src/_components/sort.md | 9 +- src/_components/summary-box.md | 8 +- src/_components/table.md | 8 +- src/_components/tabs.md | 8 +- src/_components/tag/index.md | 7 +- src/_components/tag/tag-status.md | 8 +- src/_components/telephone.md | 8 +- src/_components/text.md | 10 +- src/_includes/component-docs.html | 284 +++--------------- 60 files changed, 106 insertions(+), 725 deletions(-) diff --git a/src/_components/accordion.md b/src/_components/accordion.md index 89811dc68..f923350dd 100644 --- a/src/_components/accordion.md +++ b/src/_components/accordion.md @@ -76,13 +76,7 @@ anchors: * Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate. * Make sure interactive elements (such as links) within the collapsible region are far enough from the header that users don’t accidentally trigger a collapse. (The exact distance will depend on the device.) -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/additional-info.md b/src/_components/additional-info.md index ad23e2d1e..2729c021e 100644 --- a/src/_components/additional-info.md +++ b/src/_components/additional-info.md @@ -74,13 +74,7 @@ The following are places where Additional Info can be used: * **Disclosure widget**: The Additional Info component is an example of a [Disclosure widget](https://en.wikipedia.org/wiki/Disclosure_widget), as is the [<details> HTML element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details). Disclosure widgets are sometimes considered examples of [staged or progressive disclosure](https://www.nngroup.com/articles/progressive-disclosure/). -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/alert/alert-expandable.md b/src/_components/alert/alert-expandable.md index a3ec7de61..8b00d60d8 100644 --- a/src/_components/alert/alert-expandable.md +++ b/src/_components/alert/alert-expandable.md @@ -69,13 +69,8 @@ anchors: {% include component-example.html alt="Alert - Expandable in a desktop viewport." file="/images/components/alert-expandable/info-desktop.png" caption="Alert - Expandable, default variation, expanded in a Facility page in a wide viewport." width="50%" %} -## Code usage +{% include component-docs.html component_name=page.web-component %} - ## Accessibility considerations diff --git a/src/_components/alert/alert-sign-in.md b/src/_components/alert/alert-sign-in.md index 194ae793e..071dcb568 100644 --- a/src/_components/alert/alert-sign-in.md +++ b/src/_components/alert/alert-sign-in.md @@ -97,13 +97,8 @@ This variation was used as we sunset MyHealtheVet credentials. However, a new ve **NOTE:** DS Logon is to be sunset in September 2025. -## Code usage +{% include component-docs.html component_name=page.web-component %} - ## Content considerations diff --git a/src/_components/alert/index.md b/src/_components/alert/index.md index 61745bf8b..b4dd48c64 100644 --- a/src/_components/alert/index.md +++ b/src/_components/alert/index.md @@ -273,23 +273,8 @@ Displaying multiple alerts should be avoided. However, when you need to display * Use expandable alerts when the information is not a response to user feedback. * Use dismissible alerts when the content is informational and not specific to the user or their interaction. For example, displaying "what's new" content in the app. -## Code usage +{% include component-docs.html component_name=page.web-component %} -

    - -

    - -

    - -

    ## Content considerations diff --git a/src/_components/back-to-top.md b/src/_components/back-to-top.md index 7de18d802..85e689641 100644 --- a/src/_components/back-to-top.md +++ b/src/_components/back-to-top.md @@ -44,13 +44,7 @@ anchors: * The Back to top component stays fixed in the lower right edge of the main content area when the user reaches the bottom of the page. * Clicking Back to top takes the user to the top of the page. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/banner/index.md b/src/_components/banner/index.md index 245be28cd..3e1d300f1 100644 --- a/src/_components/banner/index.md +++ b/src/_components/banner/index.md @@ -73,13 +73,7 @@ anchors: * Content inside Banner remains aligned to the main page grid container. This might not be apparent on this site in smaller screens. * Can be used on homepage or, in true emergencies, on lower-level pages. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/banner/maintenance.md b/src/_components/banner/maintenance.md index e65c7f19b..ffebbff52 100644 --- a/src/_components/banner/maintenance.md +++ b/src/_components/banner/maintenance.md @@ -50,10 +50,4 @@ The Public Website Team (Office of the CTO Digital Experience) publishes downtim * The banner automatically expires when downtime is complete. * A maximum of 3 banners can appear simultaneously. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} diff --git a/src/_components/banner/official-gov.md b/src/_components/banner/official-gov.md index 0d30f565a..60cefb241 100644 --- a/src/_components/banner/official-gov.md +++ b/src/_components/banner/official-gov.md @@ -52,13 +52,7 @@ anchors: **Above header.** The official government banner appears directly above the VA.gov header and -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/breadcrumbs.md b/src/_components/breadcrumbs.md index c6878d7fb..a22958370 100644 --- a/src/_components/breadcrumbs.md +++ b/src/_components/breadcrumbs.md @@ -100,13 +100,7 @@ When a user starts a linear flow on the site (i.e. a form flow or task flow), th * In [2024, VFF/MY VA Form Status Research](https://github.com/department-of-veterans-affairs/VA.gov-team-forms/blob/main/Product/2024-05%20VFF%20and%20My%20VA%20Form%20Submission%20Research/Research/Research%20Findings%20for%202024-05%20VFF%20and%20My%20VA%20Form%20Submission%20Research%20Study.md) found that 5 of 12 participants indicated they would want to print a copy of their form submission. Breadcrumbs do not provide much value in the final printout so they should be excluded. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ### Router link support diff --git a/src/_components/button/button-group.md b/src/_components/button/button-group.md index 959483dc3..09dc4de83 100644 --- a/src/_components/button/button-group.md +++ b/src/_components/button/button-group.md @@ -83,13 +83,7 @@ type="secondary" > The time to acquire a target is a function of the distance to and size of the target -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/button/button-icon.md b/src/_components/button/button-icon.md index 20af28646..bdf1d2fc5 100644 --- a/src/_components/button/button-icon.md +++ b/src/_components/button/button-icon.md @@ -56,13 +56,7 @@ anchors: The 3 examples above are the only currently approved instances of this component. Use of icons in buttons of any type will be made on a case-by-case basis. If you feel you need an icon for a button, [follow the process for requesting a new icon]({{ site.baseurl }}/components/icon#requesting-a-new-icon) and indicate that you would like to use it in Button - Icon or another button type. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/button/button-segmented.md b/src/_components/button/button-segmented.md index 6356ee03e..035840240 100644 --- a/src/_components/button/button-segmented.md +++ b/src/_components/button/button-segmented.md @@ -114,23 +114,7 @@ The component is often integrated into the top navigation bar (or just below it) * **Claims:** Using a control to switch between "Status" and "Details." This groups dissimilar content and should be handled with a different component, like [Tabs]({{ site.baseurl }}/components/tabs). -## Code usage - -

    - -

    - -

    - -

    +{% include component-docs.html component_name=page.web-component mobile_component_name="va-segmented-control" %} ## Content considerations diff --git a/src/_components/button/index.md b/src/_components/button/index.md index eb5473476..592f3fa4d 100644 --- a/src/_components/button/index.md +++ b/src/_components/button/index.md @@ -136,23 +136,7 @@ anchors: {% include component-example.html alt="Example of a primary button with a secondary link." file="/images/components/button/primary-with-secondary-link.png" caption="An example of a primary button used with a secondary link." reverse=true %} -## Code usage - -

    - -

    - -

    - -

    +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/card/card-status.md b/src/_components/card/card-status.md index 4e4a9b386..aa83fbfde 100644 --- a/src/_components/card/card-status.md +++ b/src/_components/card/card-status.md @@ -90,13 +90,8 @@ This state is triggered when validation errors occur, such as when a user tries Card Status uses the same placement, dimensions, and layout as described in the [Card component]({{ site.baseurl }}/components/card#placement). -## Code usage +{% include component-docs.html component_name=page.web-component %} - ## Content considerations diff --git a/src/_components/card/index.md b/src/_components/card/index.md index ad38e0053..8f7115951 100644 --- a/src/_components/card/index.md +++ b/src/_components/card/index.md @@ -157,13 +157,7 @@ Cards use the following widths: Cards can sit inside or outside of a grid layout. Cards start with [1.5 spacing units (1.2rem/12px)]({{ site.baseurl }}/foundation/spacing-units) below each card to separate them. Then the spacing increases to [2 spacing units (1.6rem/16px)]({{ site.baseurl }}/foundation/spacing-units) of margin on all sides at the [$medium-screen and above breakpoint]({{ site.baseurl }}/foundation/breakpoints). -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Not a Card diff --git a/src/_components/critical-action.md b/src/_components/critical-action.md index 5f43a3c62..a95022d1c 100644 --- a/src/_components/critical-action.md +++ b/src/_components/critical-action.md @@ -70,13 +70,7 @@ On the My VA page, Critical Action components can be placed within a card to cal caption="On dashboard pages like My VA, Critical Action components should appear within the cards, to highlight the most pressing actions users need to take." file="/images/components/critical-action/critical-action-in-my-va.png" %} -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/details.md b/src/_components/details.md index 0a1ee3deb..d585eba5b 100644 --- a/src/_components/details.md +++ b/src/_components/details.md @@ -71,13 +71,7 @@ You can use Details in these places: **Note:** Placement of Details doesn't change the [content considerations](#content-considerations) for this component. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/footer/minimal.md b/src/_components/footer/minimal.md index 5c7858ada..69d58e704 100644 --- a/src/_components/footer/minimal.md +++ b/src/_components/footer/minimal.md @@ -13,6 +13,7 @@ mobile-app: false anchors: - anchor: Examples - anchor: Usage + - anchor: Code usage - anchor: Content considerations - anchor: Component checklist --- @@ -39,4 +40,6 @@ anchors: * **At the bottom of the page.** The minimal footer appears at the bottom of the page. +{% include component-docs.html component_name=page.web-component %} + {% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/form/checkbox.md b/src/_components/form/checkbox.md index 0e0bb9c4c..479cab2e6 100644 --- a/src/_components/form/checkbox.md +++ b/src/_components/form/checkbox.md @@ -240,26 +240,10 @@ anchors: type="secondary" >     -## Code usage - -

    - -

    +{% include component-docs.html component_name=page.web-component %} {% include content/using-message-aria-describedby.md %} -

    - -

    - ### Native Events The native onBlur event is available on this component. It can be used by adding the event handler to your component and it will then listen to the event and respond accordingly when the event fires. diff --git a/src/_components/form/combo-box.md b/src/_components/form/combo-box.md index fa6033266..e8d08a235 100644 --- a/src/_components/form/combo-box.md +++ b/src/_components/form/combo-box.md @@ -79,13 +79,7 @@ anchors: type="secondary" >     -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/form/date-input.md b/src/_components/form/date-input.md index c85b2a3e2..d1ccd87bf 100644 --- a/src/_components/form/date-input.md +++ b/src/_components/form/date-input.md @@ -68,14 +68,7 @@ By default all Date components have the following validation: The option to add [custom validation](#with-custom-validation) is available as well. - -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/form/file-input.md b/src/_components/form/file-input.md index a40c0d308..092abfe56 100644 --- a/src/_components/form/file-input.md +++ b/src/_components/form/file-input.md @@ -179,13 +179,7 @@ The File Input component gives users a way to select and upload files. You have type="secondary" >     -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/form/memorable-date.md b/src/_components/form/memorable-date.md index ec339ebe8..aa658761a 100644 --- a/src/_components/form/memorable-date.md +++ b/src/_components/form/memorable-date.md @@ -97,13 +97,7 @@ anchors: type="secondary" > -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/form/need-help.md b/src/_components/form/need-help.md index 583abe09f..1c0738ac1 100644 --- a/src/_components/form/need-help.md +++ b/src/_components/form/need-help.md @@ -39,13 +39,7 @@ anchors: * This component appears at the bottom of the page, just before the standard VA footer. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/form/privacy-agreement.md b/src/_components/form/privacy-agreement.md index cda6a1dcf..b6ef4430b 100644 --- a/src/_components/form/privacy-agreement.md +++ b/src/_components/form/privacy-agreement.md @@ -57,13 +57,7 @@ This component appears at the bottom of a form, above the link to "Finish this a {% include component-example.html alt="An example of this component in use on VA.gov." file="/images/components/privacy-agreement/10-10EZ-privacy-agreement.png" caption="An example of this component in use on the 10-10EZ form on VA.gov" %} -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/form/progress-bar-segmented.md b/src/_components/form/progress-bar-segmented.md index 022b1221f..039b870cc 100644 --- a/src/_components/form/progress-bar-segmented.md +++ b/src/_components/form/progress-bar-segmented.md @@ -76,13 +76,7 @@ For additional guidance on using progress bars in form flows, see [Form template * The progress bar should appear directly below the h1 title of the process and before the form itself. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/form/radio-button.md b/src/_components/form/radio-button.md index dc0f01190..ef6bd9623 100644 --- a/src/_components/form/radio-button.md +++ b/src/_components/form/radio-button.md @@ -132,23 +132,7 @@ anchors: type="secondary" > -## Code usage - -

    - -

    - -

    - -

    +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/form/select.md b/src/_components/form/select.md index 806c3a648..f21204300 100644 --- a/src/_components/form/select.md +++ b/src/_components/form/select.md @@ -100,13 +100,7 @@ anchors: type="secondary" > -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ### Native Events diff --git a/src/_components/form/statement-of-truth.md b/src/_components/form/statement-of-truth.md index a315bb660..ecb589a95 100644 --- a/src/_components/form/statement-of-truth.md +++ b/src/_components/form/statement-of-truth.md @@ -63,13 +63,7 @@ The component works by asking the user to populate the text-input field with the * [Submit a lay or witness statement to support a VA claim - Lay/Witness Statement (VA Form 21-10210)](https://www.va.gov/supporting-forms-for-claims/lay-witness-statement-form-21-10210/introduction) * [Request personal records - Freedom of Information Act (FOIA) or Privacy Act (PA) Request (VA Form 20-10206)](https://www.va.gov/records/request-personal-records-form-20-10206/introduction) -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/form/telephone-input.md b/src/_components/form/telephone-input.md index a48c9cd6a..819dcc7cc 100644 --- a/src/_components/form/telephone-input.md +++ b/src/_components/form/telephone-input.md @@ -53,13 +53,8 @@ By default, the telephone input component has these validation rules: - The phone number must match the valid pattern for the selected country code. For example: `Enter a United States of America phone number in a valid format, for example, (xxx) xxx-xxxx`. - The libphonenumber library validates phone numbers. -## Code usage +{% include component-docs.html component_name=page.web-component %} - ### Event payload Whenever the component is modified it emits a `vaContact` event that includes the following properties: diff --git a/src/_components/form/text-input.md b/src/_components/form/text-input.md index dda0a5d8b..3257dbe2a 100644 --- a/src/_components/form/text-input.md +++ b/src/_components/form/text-input.md @@ -158,13 +158,7 @@ See [form error handling]({{ site.baseurl }}/components/form/#error-handling) fo type="secondary" > -## Code usage - - +{% include component-docs.html component_name=page.web-component %} {% include content/using-message-aria-describedby.md %} diff --git a/src/_components/form/textarea.md b/src/_components/form/textarea.md index 7830c6095..115261b34 100644 --- a/src/_components/form/textarea.md +++ b/src/_components/form/textarea.md @@ -79,13 +79,7 @@ anchors: type="secondary" > -## Code usage - - +{% include component-docs.html component_name=page.web-component %} {% include content/using-message-aria-describedby.md %} diff --git a/src/_components/header/minimal.md b/src/_components/header/minimal.md index bd595a51f..0823076c1 100644 --- a/src/_components/header/minimal.md +++ b/src/_components/header/minimal.md @@ -54,13 +54,7 @@ anchors: * **At the top of the page.** The minimal header appears at the top of the page. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/icon.md b/src/_components/icon.md index e69d87ea2..983f0f1c3 100644 --- a/src/_components/icon.md +++ b/src/_components/icon.md @@ -211,22 +211,7 @@ Some icons may have specific placement guidance defined here. - **Right-facing chevrons are reserved for links, but may be used on buttons that expand and collapse additional content.** In the latter case, the direction of the chevron should indicate the direction in which additional content expands and collapses, like in drawers, flyout menus, and dropdowns. - **Examples:** Nested menu items within "VA Benefits and Health Care" in the [Header]({{ site.baseurl }}/components/header/), [Additional Info]({{ site.baseurl }}/components/additional-info), and [Alert - Expandable]({{ site.baseurl }}/components/alert/alert-expandable/). -## Code usage - -

    - -

    -

    - -

    +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations Icon usage typically falls into two categories, decorative and semantic. diff --git a/src/_components/language-toggle.md b/src/_components/language-toggle.md index f3f077ed7..6a03aa0e6 100644 --- a/src/_components/language-toggle.md +++ b/src/_components/language-toggle.md @@ -76,13 +76,7 @@ The component appears 32px below the "In this section" menu and 24px above the h * [La Ley PACT y sus beneficios de VA](https://www.va.gov/resources/the-pact-act-and-your-va-benefits-esp/) * [Ang PACT Act at ang iyong mga VA benefits](https://www.va.gov/resources/the-pact-act-and-your-va-benefits-tag/) -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/link/action.md b/src/_components/link/action.md index 1167826b6..14b2f104d 100644 --- a/src/_components/link/action.md +++ b/src/_components/link/action.md @@ -56,13 +56,7 @@ The action link is an eye-catching link to start a digital service. An action li * **Use a button for going to the next step in a form.** Use Button - Primary for moving between steps of an online application or tool. This is considered an action rather than navigation. Note that we prefer a [Back link]({{ site.baseurl }}/components/link/#back) for navigation backward in a flow but have instances of using a Button - Secondary in most forms. * **Don’t use Link - Action for non-actions.** Link - Action is not meant to replace all links. It should be used explicitly for actions. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/link/index.md b/src/_components/link/index.md index d1fdf144c..f600a4e25 100644 --- a/src/_components/link/index.md +++ b/src/_components/link/index.md @@ -324,23 +324,7 @@ The mobile app includes link variations that address platform-specific needs: * **Base link style.** The Base link style exists due to mobile app specific needs in dark mode. For example, the Alert component has a colored background for each variation. While working on dark mode, the mobile app team found that the Default link style did not meet color contrast requirements and clashed with the background colors. For this reason, a new Base style was created similar to the USWDS Base style. * **Content-specific link variants.** In Storybook, variants are available for content-specific links (add to calendar, get directions, etc.). These variants include the onPress logic for app teams, which ensures that the component always displays a native confirmation message when needed. -## Code usage - -

    - -

    - -

    - -

    +{% include component-docs.html component_name=page.web-component %} ### Links to content in another language diff --git a/src/_components/loading-indicator.md b/src/_components/loading-indicator.md index 308ca942f..53e9bf45d 100644 --- a/src/_components/loading-indicator.md +++ b/src/_components/loading-indicator.md @@ -52,23 +52,7 @@ anchors: * Use the [Standard progress bar]({{ site.baseurl }}/components/progress-bar) for file uploads where the wait time is determinate. * Use the [Segmented progress bar]({{ site.baseurl }}/components/progress-bar) in forms to communicate the number of steps required to complete the form. -## Code usage - -

    - -

    - -

    - -

    +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/modal/crisis-line-modal.md b/src/_components/modal/crisis-line-modal.md index f77a8906a..c6399d65e 100644 --- a/src/_components/modal/crisis-line-modal.md +++ b/src/_components/modal/crisis-line-modal.md @@ -31,13 +31,7 @@ anchors: * This modal must always appear in the VA.gov header, including the [minimal variation]({{ site.baseurl }}/components/header/header-minimal). -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/modal/index.md b/src/_components/modal/index.md index 247e58c0d..7bc8dd7c4 100644 --- a/src/_components/modal/index.md +++ b/src/_components/modal/index.md @@ -83,13 +83,7 @@ anchors: * **Content that must be linkable (have a distinct URL) or searchable.** Modals cannot be linked to or searched. * **Modals should not contain long forms.** Modal content must be brief and not include complicated interactions. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/omb-info.md b/src/_components/omb-info.md index 2ae052947..dc0fae501 100644 --- a/src/_components/omb-info.md +++ b/src/_components/omb-info.md @@ -100,14 +100,7 @@ The respondent burden estimate should be included when available, however it is As mentioned above, the Paperwork Reduction Act is very specific about the placement of this information thus it must appear on the [form introduction page]({{ site.baseurl }}/templates/forms/introduction). - -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/on-this-page.md b/src/_components/on-this-page.md index 58b261483..f338ede8b 100644 --- a/src/_components/on-this-page.md +++ b/src/_components/on-this-page.md @@ -37,13 +37,7 @@ anchors: - **The content on the page must have a minimum of two H2 section titles to use the On this Page jump links.** - **On this Page jump links component pairs well with the Back to top component.** The [Back to top component]({{ site.baseurl }}/components/back-to-top) helps users quickly navigate back to the top of long pages of content. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/pagination.md b/src/_components/pagination.md index ec8d4d30d..59d0e54e5 100644 --- a/src/_components/pagination.md +++ b/src/_components/pagination.md @@ -70,13 +70,7 @@ When using pagination, include a results description above the paginated content Make sure the results description updates whenever the set of results changes—for example, when the user moves to a different page of results or changes filters—so that the information stays accurate for all users. For more details on implementing search results with pagination, including placement of the results description, see the [Search results template]({{ site.baseurl }}/templates/search-results). -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/process-list.md b/src/_components/process-list.md index 59ce852d6..54771b2a6 100644 --- a/src/_components/process-list.md +++ b/src/_components/process-list.md @@ -66,13 +66,7 @@ The Process List appears after a start form link on the form [Introduction page] {% include component-example.html alt="An example of the Process List component on an Education benefits application." file="/images/components/process-list/VEAP-benefits-2024.png" caption="The VEAP benefits application form uses a Process List on the introduction page." width="50%" %} -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/progress-bar-activity.md b/src/_components/progress-bar-activity.md index ed2a4f768..d4c03b0c2 100644 --- a/src/_components/progress-bar-activity.md +++ b/src/_components/progress-bar-activity.md @@ -47,13 +47,7 @@ anchors: > The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Related diff --git a/src/_components/search-filter.md b/src/_components/search-filter.md index 2b7639250..ee7601d40 100644 --- a/src/_components/search-filter.md +++ b/src/_components/search-filter.md @@ -10,6 +10,7 @@ anchors: - anchor: Examples - anchor: Usage - anchor: Behavior + - anchor: Accessibility considerations - anchor: Code usage - anchor: Component checklist --- @@ -52,16 +53,11 @@ Faceted search is a way to filter search results by using attributes, or facets, * **Desktop viewport widths:** Place the Search Filter component in the left-side rail, below a full-width Search Input component. * **Refer to the search results template.** Check out the [search results template]({{ site.baseurl }}/templates/search-results) examples for precise placement. +{% include component-docs.html component_name=page.web-component %} + ## Accessibility considerations {% include a11y/search-filters.md %} -## Code usage - - {% include _component-checklist.html component_name=page.web-component %} diff --git a/src/_components/search-input.md b/src/_components/search-input.md index d7ca75521..b9e5d9ce6 100644 --- a/src/_components/search-input.md +++ b/src/_components/search-input.md @@ -97,13 +97,7 @@ The suggestions are ranked using the following rules: Search.gov's implementation of type-ahead does support fuzzy string matching to help with typos. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ### API calls and dependent systems diff --git a/src/_components/service-list-item.md b/src/_components/service-list-item.md index 728bb6771..1e51ac999 100644 --- a/src/_components/service-list-item.md +++ b/src/_components/service-list-item.md @@ -92,13 +92,7 @@ Teams used the Card component before this component existed. When evaluating if Statuses should be normalized with the platform content team so that the same terms are used when the same meanings are intended (for example, “pending” versus “in-progress”). The platform content team will define which of those is correct across benefits and tools. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/sidenav.md b/src/_components/sidenav.md index dc74d68f3..9c7a2e145 100644 --- a/src/_components/sidenav.md +++ b/src/_components/sidenav.md @@ -100,13 +100,7 @@ The component is composed of the following parts: This compositional structure allows developers to build complex navigation menus by slotting together the necessary child components. For single-page applications, the component supports router integration by firing a `vaRouteChange` event. This prevents native link routing and allows a routing library like React Router to handle the navigation. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/snackbar.md b/src/_components/snackbar.md index 157d236e1..feffc1765 100644 --- a/src/_components/snackbar.md +++ b/src/_components/snackbar.md @@ -55,13 +55,7 @@ anchors: * "Undo" snackbar appears in Messages when moving a message to a folder. * "Try again" snackbar appears in Messages when a draft is not saved successfully. -## Code usage - - +{% include component-docs.html component_name="va-snackbar" %} ## Content considerations diff --git a/src/_components/sort.md b/src/_components/sort.md index b5d620f44..c81e88ea5 100644 --- a/src/_components/sort.md +++ b/src/_components/sort.md @@ -108,14 +108,7 @@ anchors: * **Keep sort option naming consistent across mobile and desktop experiences.** - -## Code usage - - +{% include component-docs.html component_name=page.web-component %} * **Using an API to sort and paginate data is acceptable.** If sorting data on the frontend is more efficient, remember to format times and dates in a way that will ensure a correct chronological sort. * Store date and time as an [ISO-formatted string](https://en.wikipedia.org/wiki/ISO_8601#:~:text=Date%20and%20time%0Ain,00%20UTC%E2%88%9212%3A00) (date and time in UTC or date and time with offset). diff --git a/src/_components/summary-box.md b/src/_components/summary-box.md index 629473d01..2b1560461 100644 --- a/src/_components/summary-box.md +++ b/src/_components/summary-box.md @@ -86,13 +86,7 @@ Summary box is found towards the top of the page after the h1 title of the page {% include _like-this-not-this.html like_this=example_like_this_2 not_this=example_not_this_2 %} -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/table.md b/src/_components/table.md index 57cb1969b..81715b6e5 100644 --- a/src/_components/table.md +++ b/src/_components/table.md @@ -65,13 +65,7 @@ anchors: * For comparison tables, avoid horizontal scrolling and limit the number of columns to 3 or fewer. All column heading labels should total no more than 60 characters. * **Avoid using numerical data in a responsive stacked table.** All data in a stacked table should be left aligned. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/tabs.md b/src/_components/tabs.md index f2aa91aa8..87304da36 100644 --- a/src/_components/tabs.md +++ b/src/_components/tabs.md @@ -96,13 +96,7 @@ Tab panels are used as a container for the content associated with the selected See the [tabs component discussion](https://github.com/department-of-veterans-affairs/vets-design-system-documentation/discussions/4443) for more information on tabs used in production. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/tag/index.md b/src/_components/tag/index.md index 56eb8c529..ca4103d69 100644 --- a/src/_components/tag/index.md +++ b/src/_components/tag/index.md @@ -50,13 +50,8 @@ Used to draw attention to new or important content, categorize information, or i * **Tags shouldn't be interactive.** Tags are designed to be static labels that convey information, not clickable elements. They shouldn't have hover, focus, or active states that suggest interactivity. * **Don't overdo it.** If everything on a page is called out as important, nothing is important. -## Code usage +{% include component-docs.html component_name=page.web-component %} - ## Accessibility considerations diff --git a/src/_components/tag/tag-status.md b/src/_components/tag/tag-status.md index 0cd7138a0..bb988e97e 100644 --- a/src/_components/tag/tag-status.md +++ b/src/_components/tag/tag-status.md @@ -81,13 +81,7 @@ Use the error status to indicate critical issues, failure states, or items that * **For status within Cards.** When using Tags to communicate status within card components, see the [Card Status guidance]({{ site.baseurl }}/components/card/card-status) for specific implementation details and best practices. * **Use sentence case.** While [Tags]({{ site.baseurl }}/components/tag/) without status are capitalized, status tags use sentence case to improve readability in case the status text is longer than 1–2 words. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/telephone.md b/src/_components/telephone.md index 71a83ffbd..4fbe620a0 100644 --- a/src/_components/telephone.md +++ b/src/_components/telephone.md @@ -83,13 +83,7 @@ mobile-app: true * Phone numbers can appear within a sentence or on their own line. -## Code usage - - +{% include component-docs.html component_name=page.web-component %} ## Content considerations diff --git a/src/_components/text.md b/src/_components/text.md index 87f5368ef..575ec3613 100644 --- a/src/_components/text.md +++ b/src/_components/text.md @@ -54,12 +54,4 @@ There are 9 variations of the Text component. * Use a Body variation (large, medium, small, x-small) for body copy. * Use the Display variation for larger display text. -## Code usage - -

    - -

    +{% include component-docs.html component_name="va-text" %} diff --git a/src/_includes/component-docs.html b/src/_includes/component-docs.html index 43714d577..85baa43cc 100644 --- a/src/_includes/component-docs.html +++ b/src/_includes/component-docs.html @@ -8,9 +8,11 @@ {% endfor %} {% comment %} Check if we have mobile app component data {% endcomment %} +{% comment %} Support optional mobile_component_name parameter for cases where mobile uses different naming {% endcomment %} +{% assign mobile_lookup_name = include.mobile_component_name | default: include.component_name %} {% assign has_mobile_component = false %} {% for mobile_app_component in site.data.mobile-app-component-docs-source.components %} - {% if mobile_app_component.tag == include.component_name %} + {% if mobile_app_component.tag == mobile_lookup_name %} {% assign has_mobile_component = true %} {% break %} {% endif %} @@ -21,257 +23,57 @@

    Code usage

    -{% comment %} Check if we have both web and mobile app to determine if we need tabs {% endcomment %} -{% assign has_web = false %} -{% assign has_mobile = false %} +{% comment %} + Generate Storybook documentation paths: + - Web components: components-{component-tag}--docs + - Mobile components: va-mobile_{component-name-without-va-prefix-with-underscores}--docs + + Note: Some USWDS components may use uswds- prefix instead of components-. + If the generated link doesn't work, you may need to manually specify the correct path. +{% endcomment %} {% if has_web_component and page.web == true %} + {% comment %} Generate web component Storybook path and extract plain language name {% endcomment %} + {% assign web_storybook_path = "components-" | append: include.component_name | append: "--docs" %} + {% assign web_component_name = include.component_name %} + + {% comment %} Extract componentName from docsTags for plain language display name {% endcomment %} {% for component in site.data.component-docs.components %} {% if component.tag == include.component_name %} - {% if component.props != empty or component.events != empty %} - {% assign has_web = true %} - {% endif %} - {% break %} - {% endif %} - {% endfor %} -{% endif %} - -{% if has_mobile_component and page.mobile-app == true %} - {% for mobile_app_component in site.data.mobile-app-component-docs-source.components %} - {% if mobile_app_component.tag == include.component_name %} - {% if mobile_app_component.props != empty or mobile_app_component.events != empty %} - {% assign has_mobile = true %} - {% endif %} - {% break %} - {% endif %} - {% endfor %} -{% endif %} - -{% if has_web and has_mobile %} - {% comment %} Use tabs when both platforms are supported {% endcomment %} - - - - -

    Web

    - - {% for component in site.data.component-docs.components %} - {% if component.tag == include.component_name %} - {% if component.props != empty %} -
    -

    Attributes and Properties

    - - - - Property - Attribute - Type - Default - Description - - {% for prop in component.props %} - - {{ prop.name }} - {{ prop.attr }} - {% if prop.type %}{{ prop.type }}{% endif %} - {% if prop.default %}{{ prop.default }}{% endif %} - {{ prop.docs | markdownify }} - - {% endfor %} - -
    - {% endif %} - - {% if component.events != empty %} -
    -

    Events

    - - - - Name - Description - - {% for event in component.events %} - - {{ event.event }} - {{ event.docs }} - - {% endfor %} - -
    - {% endif %} + {% for tag in component.docsTags %} + {% if tag.name == "componentName" %} + {% assign web_component_name = tag.text %} {% break %} {% endif %} {% endfor %} -     - - - - {% assign storybook_name = include.component_name | replace: 'va-', '' | replace: '-', '_' %} - - {% for mobile_app_component in site.data.mobile-app-component-docs-source.components %} - {% if mobile_app_component.tag == include.component_name %} - -

    Mobile app

    - - {% if mobile_app_component.props != empty %} -
    -

    Props

    - - - - Property - Type - Default - Description - - {% for prop in mobile_app_component.props %} - - {{ prop.name }} - {% if prop.type %}{{ prop.type }}{% endif %} - {% if prop.default %}{{ prop.default }}{% endif %} - {{ prop.docs | markdownify }} - - {% endfor %} - -
    - {% endif %} - - {% if mobile_app_component.events != empty %} -
    -

    Events

    - - - - Name - Description - - {% for event in mobile_app_component.events %} - - {{ event.name }} - {{ event.docs }} - - {% endfor %} - -
    - {% endif %} - - {% break %} + {% break %} {% endif %} - {% endfor %} -     -     - -{% else %} -{% comment %} Show individual sections when only one platform is supported {% endcomment %} -{% if page.web == true and has_web == true %} -

    Web

    -{% for component in site.data.component-docs.components %} -{% if component.tag == include.component_name %} -{% if component.props != empty %} -
    -

    Attributes and Properties

    - - - -Property -Attribute -Type -Default -Description - -{% for prop in component.props %} - -{{ prop.name }} -{{ prop.attr }} -{% if prop.type %}{{ prop.type }}{% endif %} -{% if prop.default %}{{ prop.default }}{% endif %} -{{ prop.docs | markdownify }} - -{% endfor %} - -
    -{% endif %} - -{% if component.events != empty %} -
    -

    Events

    - - -Name -Description - -{% for event in component.events %} - -{{ event.event }} -{{ event.docs }} - -{% endfor %} - -
    -{% endif %} -{% break %} -{% endif %} -{% endfor %} -{% endif %} -{% endif %} - -{% comment %} Mobile App Component Documentation - only show if not using tabs {% endcomment %} -{% if page.mobile-app == true and has_mobile == true %} -{% unless has_web == true %} -{% assign storybook_name = include.component_name | replace: 'va-', '' | replace: '-', '_' %} - -{% for mobile_app_component in site.data.mobile-app-component-docs-source.components %} -{% if mobile_app_component.tag == include.component_name %} - -

    Mobile app

    - -{% if mobile_app_component.props != empty %} -
    -

    Props

    - - - - Property - Type - Default - Description - - {% for prop in mobile_app_component.props %} - - {{ prop.name }} - {% if prop.type %}{{ prop.type }}{% endif %} - {% if prop.default %}{{ prop.default }}{% endif %} - {{ prop.docs | markdownify }} - - {% endfor %} - -
    -{% endif %} - -{% if mobile_app_component.events != empty %} -
    -

    Events

    + {% endfor %} - - - Name - Description - - {% for event in mobile_app_component.events %} - - {{ event.name }} - {{ event.docs }} - - {% endfor %} - -
    +

    + +

    {% endif %} - {% break %} - {% endif %} - {% endfor %} - {% endunless %} +{% if has_mobile_component and page.mobile-app == true %} + {% comment %} Generate mobile component Storybook path using mobile_lookup_name {% endcomment %} + {% assign mobile_component_name = mobile_lookup_name | replace: 'va-', '' | replace: '-', '_' %} + {% assign mobile_storybook_path = "va-mobile_" | append: mobile_component_name | append: "--docs" %} + + {% comment %} Create readable name for mobile component {% endcomment %} + {% assign mobile_display_name = mobile_lookup_name | replace: 'va-', '' | replace: '-', ' ' | capitalize %} + +

    + +

    {% endif %} {% endif %} From 7862794295f01d3b8be4f5dc1cdcbbb8b4a62e0a Mon Sep 17 00:00:00 2001 From: Jeana Date: Wed, 22 Apr 2026 21:23:32 -0500 Subject: [PATCH 09/14] Cleanup --- src/_components/card/card-status.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/_components/card/card-status.md b/src/_components/card/card-status.md index aa83fbfde..3dc4fe36e 100644 --- a/src/_components/card/card-status.md +++ b/src/_components/card/card-status.md @@ -92,7 +92,6 @@ Card Status uses the same placement, dimensions, and layout as described in the {% include component-docs.html component_name=page.web-component %} - ## Content considerations Card Status follows the same [content considerations as the Card component]({{ site.baseurl }}/components/card#content-considerations). From 9623319c6e428098958eced59180e11955a63fbd Mon Sep 17 00:00:00 2001 From: Jeana Date: Wed, 22 Apr 2026 22:28:01 -0500 Subject: [PATCH 10/14] revert changes to lower the edit count to review --- src/_components/alert/alert-expandable.md | 1 - src/_components/alert/alert-sign-in.md | 1 - src/_components/alert/index.md | 1 - src/_components/form/date-input.md | 1 + src/_components/form/telephone-input.md | 1 - src/_components/icon.md | 2 -- src/_components/sort.md | 1 + src/_components/template.md | 6 ++---- 8 files changed, 4 insertions(+), 10 deletions(-) diff --git a/src/_components/alert/alert-expandable.md b/src/_components/alert/alert-expandable.md index 8b00d60d8..3cbb2883f 100644 --- a/src/_components/alert/alert-expandable.md +++ b/src/_components/alert/alert-expandable.md @@ -71,7 +71,6 @@ anchors: {% include component-docs.html component_name=page.web-component %} - ## Accessibility considerations {% include a11y/alerts.md %} diff --git a/src/_components/alert/alert-sign-in.md b/src/_components/alert/alert-sign-in.md index 071dcb568..e61f2e81c 100644 --- a/src/_components/alert/alert-sign-in.md +++ b/src/_components/alert/alert-sign-in.md @@ -99,7 +99,6 @@ This variation was used as we sunset MyHealtheVet credentials. However, a new ve {% include component-docs.html component_name=page.web-component %} - ## Content considerations If your product fits one of these descriptions, you may need to adjust the standard sign-in alert component content for your situation: diff --git a/src/_components/alert/index.md b/src/_components/alert/index.md index b4dd48c64..c691d6564 100644 --- a/src/_components/alert/index.md +++ b/src/_components/alert/index.md @@ -275,7 +275,6 @@ Displaying multiple alerts should be avoided. However, when you need to display {% include component-docs.html component_name=page.web-component %} - ## Content considerations * Keep alert and error message titles (headings) to 50 characters (with spaces) when possible. Titles should follow the general guidelines for page and section titles.
    diff --git a/src/_components/form/date-input.md b/src/_components/form/date-input.md index d1ccd87bf..c95a47d64 100644 --- a/src/_components/form/date-input.md +++ b/src/_components/form/date-input.md @@ -68,6 +68,7 @@ By default all Date components have the following validation: The option to add [custom validation](#with-custom-validation) is available as well. + {% include component-docs.html component_name=page.web-component %} ## Accessibility considerations diff --git a/src/_components/form/telephone-input.md b/src/_components/form/telephone-input.md index 819dcc7cc..3fec41296 100644 --- a/src/_components/form/telephone-input.md +++ b/src/_components/form/telephone-input.md @@ -55,7 +55,6 @@ By default, the telephone input component has these validation rules: {% include component-docs.html component_name=page.web-component %} - ### Event payload Whenever the component is modified it emits a `vaContact` event that includes the following properties: * `contact`: the national phone number the user entered, e.g. `2345678910` diff --git a/src/_components/icon.md b/src/_components/icon.md index 983f0f1c3..524680147 100644 --- a/src/_components/icon.md +++ b/src/_components/icon.md @@ -268,11 +268,9 @@ Avoid requesting a new icon when:
  • Submit Your Icon Request: If you've identified an icon that meets your needs and aligns with VADS guidelines, you can propose its addition to the Design System using the link below: -

    Request a new addition to the Design System

    - If your request is part of an experimental initiative, please link any related tickets to provide context and ensure visibility for the Design System team.
    • diff --git a/src/_components/sort.md b/src/_components/sort.md index c81e88ea5..d4160f5a1 100644 --- a/src/_components/sort.md +++ b/src/_components/sort.md @@ -108,6 +108,7 @@ anchors: * **Keep sort option naming consistent across mobile and desktop experiences.** + {% include component-docs.html component_name=page.web-component %} * **Using an API to sort and paginate data is acceptable.** If sorting data on the frontend is more efficient, remember to format times and dates in a way that will ensure a correct chronological sort. diff --git a/src/_components/template.md b/src/_components/template.md index 2f5f793aa..388ff3c77 100644 --- a/src/_components/template.md +++ b/src/_components/template.md @@ -92,10 +92,8 @@ Images with captions that describe different instances of this component being u -## Code usage - -* Use secondary action link to point to storybook doc page for this component. -* Include links for va.gov use and mobile app use as applicable. +This is the Code Usage section. Note that the header is inside this include. + ## Content considerations From 8833c917cbe9370fa45391cd7082ee48dbcb1c26 Mon Sep 17 00:00:00 2001 From: Jeana Date: Wed, 22 Apr 2026 22:40:01 -0500 Subject: [PATCH 11/14] fixes bad links to storybook --- src/_includes/component-docs.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/_includes/component-docs.html b/src/_includes/component-docs.html index 85baa43cc..2feace723 100644 --- a/src/_includes/component-docs.html +++ b/src/_includes/component-docs.html @@ -1,3 +1,4 @@ + {% comment %} Check if we have web component data {% endcomment %} {% assign has_web_component = false %} {% for component in site.data.component-docs.components %} @@ -34,7 +35,14 @@

    Code usage

    {% if has_web_component and page.web == true %} {% comment %} Generate web component Storybook path and extract plain language name {% endcomment %} - {% assign web_storybook_path = "components-" | append: include.component_name | append: "--docs" %} + {% comment %} Determine prefix: USWDS-based components use 'uswds-', custom VA components use 'components-' {% endcomment %} + {% assign uswds_components = "va-accordion,va-additional-info,va-alert,va-breadcrumbs,va-button,va-button-pair,va-checkbox,va-combo-box,va-date,va-details,va-file-input,va-icon,va-memorable-date,va-modal,va-number-input,va-pagination,va-privacy-agreement,va-process-list,va-radio,va-search-input,va-segmented-progress-bar,va-select,va-statement-of-truth,va-summary-box,va-table,va-text-input,va-textarea" | split: "," %} + {% if uswds_components contains include.component_name %} + {% assign storybook_prefix = "uswds-" %} + {% else %} + {% assign storybook_prefix = "components-" %} + {% endif %} + {% assign web_storybook_path = storybook_prefix | append: include.component_name | append: "--docs" %} {% assign web_component_name = include.component_name %} {% comment %} Extract componentName from docsTags for plain language display name {% endcomment %} From 5e137633f557a48dc97b7f0274cac8357f36cbc4 Mon Sep 17 00:00:00 2001 From: Jeana Date: Wed, 22 Apr 2026 22:41:50 -0500 Subject: [PATCH 12/14] remove doctype --- src/_includes/component-docs.html | 1 - 1 file changed, 1 deletion(-) diff --git a/src/_includes/component-docs.html b/src/_includes/component-docs.html index 2feace723..8dc2ff74f 100644 --- a/src/_includes/component-docs.html +++ b/src/_includes/component-docs.html @@ -1,4 +1,3 @@ - {% comment %} Check if we have web component data {% endcomment %} {% assign has_web_component = false %} {% for component in site.data.component-docs.components %} From 3349ab2405e91ffa3cf703d5c2eec0c42f028137 Mon Sep 17 00:00:00 2001 From: Jeana Date: Wed, 22 Apr 2026 22:49:20 -0500 Subject: [PATCH 13/14] inconsisent naming is making url prediction hard --- src/_includes/component-docs.html | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/_includes/component-docs.html b/src/_includes/component-docs.html index 8dc2ff74f..0a42a6c08 100644 --- a/src/_includes/component-docs.html +++ b/src/_includes/component-docs.html @@ -1,4 +1,4 @@ -{% comment %} Check if we have web component data {% endcomment %} +t{% comment %} Check if we have web component data {% endcomment %} {% assign has_web_component = false %} {% for component in site.data.component-docs.components %} {% if component.tag == include.component_name %} @@ -34,14 +34,22 @@

    Code usage

    {% if has_web_component and page.web == true %} {% comment %} Generate web component Storybook path and extract plain language name {% endcomment %} - {% comment %} Determine prefix: USWDS-based components use 'uswds-', custom VA components use 'components-' {% endcomment %} + {% comment %} Determine Storybook prefix: {% endcomment %} + {% comment %} - USWDS-based components use 'uswds-' prefix {% endcomment %} + {% comment %} - Most custom VA components use 'components-' prefix {% endcomment %} + {% comment %} - Some newer components use no prefix, just the tag name {% endcomment %} + {% assign uswds_components = "va-accordion,va-additional-info,va-alert,va-breadcrumbs,va-button,va-button-pair,va-checkbox,va-combo-box,va-date,va-details,va-file-input,va-icon,va-memorable-date,va-modal,va-number-input,va-pagination,va-privacy-agreement,va-process-list,va-radio,va-search-input,va-segmented-progress-bar,va-select,va-statement-of-truth,va-summary-box,va-table,va-text-input,va-textarea" | split: "," %} - {% if uswds_components contains include.component_name %} - {% assign storybook_prefix = "uswds-" %} + {% assign no_prefix_components = "va-button-segmented" | split: "," %} + + {% if no_prefix_components contains include.component_name %} + {% assign web_storybook_path = include.component_name | append: "--docs" %} + {% elsif uswds_components contains include.component_name %} + {% assign web_storybook_path = "uswds-" | append: include.component_name | append: "--docs" %} {% else %} - {% assign storybook_prefix = "components-" %} + {% assign web_storybook_path = "components-" | append: include.component_name | append: "--docs" %} {% endif %} - {% assign web_storybook_path = storybook_prefix | append: include.component_name | append: "--docs" %} + {% assign web_component_name = include.component_name %} {% comment %} Extract componentName from docsTags for plain language display name {% endcomment %} From 858dfbfc55ef2f36709b83ef0e065b12839d6c3f Mon Sep 17 00:00:00 2001 From: Jeana Date: Wed, 22 Apr 2026 22:59:13 -0500 Subject: [PATCH 14/14] inconsisent naming is making url prediction hard --- src/_includes/component-docs.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/_includes/component-docs.html b/src/_includes/component-docs.html index 0a42a6c08..4b1f98c8f 100644 --- a/src/_includes/component-docs.html +++ b/src/_includes/component-docs.html @@ -1,4 +1,4 @@ -t{% comment %} Check if we have web component data {% endcomment %} +{% comment %} Check if we have web component data {% endcomment %} {% assign has_web_component = false %} {% for component in site.data.component-docs.components %} {% if component.tag == include.component_name %} @@ -34,12 +34,9 @@

    Code usage

    {% if has_web_component and page.web == true %} {% comment %} Generate web component Storybook path and extract plain language name {% endcomment %} - {% comment %} Determine Storybook prefix: {% endcomment %} - {% comment %} - USWDS-based components use 'uswds-' prefix {% endcomment %} - {% comment %} - Most custom VA components use 'components-' prefix {% endcomment %} - {% comment %} - Some newer components use no prefix, just the tag name {% endcomment %} + {% comment %} Use actual mappings extracted from existing storybook-preview includes {% endcomment %} - {% assign uswds_components = "va-accordion,va-additional-info,va-alert,va-breadcrumbs,va-button,va-button-pair,va-checkbox,va-combo-box,va-date,va-details,va-file-input,va-icon,va-memorable-date,va-modal,va-number-input,va-pagination,va-privacy-agreement,va-process-list,va-radio,va-search-input,va-segmented-progress-bar,va-select,va-statement-of-truth,va-summary-box,va-table,va-text-input,va-textarea" | split: "," %} + {% assign uswds_components = "va-accordion,va-additional-info,va-alert,va-breadcrumbs,va-button,va-button-pair,va-checkbox,va-checkbox-group,va-combo-box,va-file-input,va-memorable-date,va-modal,va-pagination,va-privacy-agreement,va-process-list,va-radio,va-search-input,va-segmented-progress-bar,va-select,va-statement-of-truth,va-summary-box,va-table,va-text-input,va-textarea" | split: "," %} {% assign no_prefix_components = "va-button-segmented" | split: "," %} {% if no_prefix_components contains include.component_name %}