Merge pull request #6114 from department-of-veterans-affairs/db/remove-v3-label-4640

humancompanion-usds · web-flow · commit 5c45861544c0 · 2026-04-15T12:51:32.000-04:00
Remove USWDS v3 references from component documentation
diff --git a/src/_components/accordion.md b/src/_components/accordion.md
@@ -4,7 +4,6 @@ title: Accordion
 intro-text: "Accordions, which use the UX principle of progressive disclosure, are a list of headers that can be clicked to hide or reveal additional content. By default, accordions are multi-selectable and borderless, however, props can be added to make them bordered and single-select."
 research-title: Accordions
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1186
-uswds-v3: default
 web-component: va-accordion
 web: true
 mobile-app: false
diff --git a/src/_components/additional-info.md b/src/_components/additional-info.md
@@ -4,7 +4,6 @@ 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."
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=203-1254
-uswds-v3: default
 web-component: va-additional-info
 web: true
 mobile-app: false
@@ -23,13 +22,13 @@ anchors:
 
 ### Default
 
-{% include storybook-preview.html  story="uswds-va-additional-info--default" link_text="va-additional-info v3 default" %}
+{% include storybook-preview.html  story="uswds-va-additional-info--default" link_text="va-additional-info default" %}
 
 ### No Border
 
 * Adding in the `disable-border` prop removes the left blue border from the expanded state of the component.
 
-{% include storybook-preview.html story="uswds-va-additional-info--no-border" link_text="va-additional-info v3 no border" %}
+{% include storybook-preview.html story="uswds-va-additional-info--no-border" link_text="va-additional-info no border" %}
 
 ## Usage
 
diff --git a/src/_components/alert/index.md b/src/_components/alert/index.md
@@ -5,7 +5,6 @@ permalink: /components/alert/
 intro-text: "Alerts keep users informed of important and sometimes time-sensitive changes."
 research-title: "Alert boxes"
 figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=35%3A145&mode=design&t=ep6tlGT5gNsbWqGP-1
-uswds-v3: default
 web-component: va-alert
 web: true
 mobile-app: true
diff --git a/src/_components/banner/official-gov.md b/src/_components/banner/official-gov.md
@@ -29,7 +29,7 @@ anchors:
 ## Usage
 
 <va-featured-content>
-  <h3 slot="headline">USWDS v3 component</h3>
+  <h3 slot="headline">USWDS component</h3>
   <p>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.</p>
   <va-link-action
     href="https://designsystem.digital.gov/components/banner/"
diff --git a/src/_components/breadcrumbs.md b/src/_components/breadcrumbs.md
@@ -3,7 +3,6 @@ layout: component
 title: Breadcrumbs
 intro-text: "Breadcrumbs provide secondary navigation to help users understand where they are in a website. In addition, the breadcrumb tells search engines how the site is structured, and it can be displayed in search results (for unauthenticated content that doesn’t require users to be logged in). This can improve rankings, and provide users with additional context."
 figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=35%3A151&mode=design&t=ep6tlGT5gNsbWqGP-1
-uswds-v3: default
 web-component: va-breadcrumbs
 web: true
 mobile-app: false
@@ -28,11 +27,11 @@ anchors:
 
 ### Rerender state
 
-{% include storybook-preview.html story="uswds-va-breadcrumbs--rerender-state" link_text="va-breadcrumbs v3 and adjust state" scrollable="true" %}
+{% include storybook-preview.html story="uswds-va-breadcrumbs--rerender-state" link_text="va-breadcrumbs and adjust state" scrollable="true" %}
 
 ### Wrapping state
 
-{% include storybook-preview.html story="uswds-va-breadcrumbs--wrapping-state" link_text="va-breadcrumbs v3 wrapping state" %}
+{% include storybook-preview.html story="uswds-va-breadcrumbs--wrapping-state" link_text="va-breadcrumbs wrapping state" %}
 
 ## Usage
 
diff --git a/src/_components/button/button-group.md b/src/_components/button/button-group.md
@@ -8,7 +8,6 @@ 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.
 status: use-deployed
-uswds-v3: default
 web-component: va-button-pair
 web: true
 mobile-app: false
@@ -26,7 +25,7 @@ anchors:
 
 ### Default (Yes/No)
 
-{% include storybook-preview.html story="uswds-va-button-pair--default" link_text="Default v3 button pair along with additional variations" height="60px" %}
+{% include storybook-preview.html story="uswds-va-button-pair--default" link_text="Default button pair along with additional variations" height="60px" %}
 
 ### Update
 
diff --git a/src/_components/button/button-icon.md b/src/_components/button/button-icon.md
@@ -10,7 +10,6 @@ research-link: Buttons
 figma-link-web: https://www.figma.com/file/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?type=design&node-id=6554%3A11058&mode=design&t=4Zo01aEkp6l4faTn-1
 intro-text: The button icon variation acts as a tertiary button which has equal visual prominence to Link - Action and thus can be used in contexts that require a mix of links and buttons. 
 status: use-with-caution-available
-uswds-v3: default
 web-component: va-button-icon
 web: true
 mobile-app: false
diff --git a/src/_components/button/index.md b/src/_components/button/index.md
@@ -12,7 +12,6 @@ sub-pages:
   - sub-page: Button group
   - sub-page: Button - Segmented
   - sub-page: Button - Icon
-uswds-v3: primary
 web-component: va-button
 web: true
 mobile-app: true
diff --git a/src/_components/details.md b/src/_components/details.md
@@ -4,7 +4,6 @@ title: Details
 status: use-with-caution-candidate
 intro-text: "The Details component reveals optional, supporting information that isn't required for most users to complete a task. It is used to provide plain language help at the point where it is most relevant."
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=42924-290
-uswds-v3: default
 web-component: va-details
 web: true
 mobile-app: false
diff --git a/src/_components/form/checkbox.md b/src/_components/form/checkbox.md
@@ -7,7 +7,6 @@ research-title: Form controls
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=137-17116
 intro-text: "Allows users to select one or more items from a list. Checkboxes are an easily understandable way to indicate that users can select one or more answers to a question or items from a list."
 status: use-deployed
-uswds-v3: default
 web-component: va-checkbox-group
 web: true
 mobile-app: true
diff --git a/src/_components/form/combo-box.md b/src/_components/form/combo-box.md
@@ -7,7 +7,6 @@ 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
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=19200-2377
-uswds-v3: default
 web-component: va-combo-box
 web: true
 mobile-app: false
diff --git a/src/_components/form/file-input.md b/src/_components/form/file-input.md
@@ -10,7 +10,6 @@ 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
 status: use-with-caution-available
-uswds-v3: default
 web-component: va-file-input
 web: true
 mobile-app: false
diff --git a/src/_components/form/memorable-date.md b/src/_components/form/memorable-date.md
@@ -7,7 +7,6 @@ research-title: Memorable Date
 intro-text: "Three text fields are the easiest way for users to enter most dates."
 status: use-deployed
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=1534-2806
-uswds-v3: default
 web-component: va-memorable-date
 web: true
 mobile-app: false
diff --git a/src/_components/form/privacy-agreement.md b/src/_components/form/privacy-agreement.md
@@ -8,7 +8,6 @@ title: Privacy Agreement
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1218
 intro-text: "Used on the review step of a form flow to provide a link to the privacy policy content and provide a confirmation checkbox."
 status: use-deployed
-uswds-v3: default
 web-component: va-privacy-agreement
 web: true
 mobile-app: false
diff --git a/src/_components/form/progress-bar-segmented.md b/src/_components/form/progress-bar-segmented.md
@@ -8,7 +8,6 @@ aka: Step indicator
 research-title: Progress bars
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=769-10091
 status: use-deployed
-uswds-v3: default
 web-component: va-segmented-progress-bar
 web: true
 mobile-app: false
@@ -23,7 +22,7 @@ anchors:
 
 ### Default
 
-{% include storybook-preview.html story="uswds-va-segmented-progress-bar--default" link_text="va-segmented-progress-bar v3 default" height="145px" auto_resize=false %}
+{% include storybook-preview.html story="uswds-va-segmented-progress-bar--default" link_text="va-segmented-progress-bar default" height="145px" auto_resize=false %}
 
 ### Step Labels
 
diff --git a/src/_components/form/radio-button.md b/src/_components/form/radio-button.md
@@ -7,7 +7,6 @@ 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
 status: use-best-practice
-uswds-v3: default
 web-component: va-radio
 web: true
 mobile-app: true
diff --git a/src/_components/form/select.md b/src/_components/form/select.md
@@ -7,7 +7,6 @@ intro-text: "A select component allows users to choose one option from a menu."
 research-title: Form controls
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=293-4969
 status: use-best-practice
-uswds-v3: default
 web-component: va-select
 web: true
 mobile-app: false
diff --git a/src/_components/form/statement-of-truth.md b/src/_components/form/statement-of-truth.md
@@ -8,7 +8,6 @@ intro-text: "The Statement of truth allows users to certify that the information
 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
-uswds-v3: default
 web-component: va-statement-of-truth
 web: true
 mobile-app: false
diff --git a/src/_components/form/text-input.md b/src/_components/form/text-input.md
@@ -7,7 +7,6 @@ intro-text: "Text input allows people to enter any type of text unless otherwise
 research-title: Form controls
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1223
 status: use-best-practice
-uswds-v3: default
 web-component: va-text-input
 web: true
 mobile-app: false
diff --git a/src/_components/form/textarea.md b/src/_components/form/textarea.md
@@ -7,7 +7,6 @@ intro-text: "Textarea allows people to enter any type of text."
 research-title: Form controls
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1222
 status: use-best-practice
-uswds-v3: default
 web-component: va-textarea
 web: true
 mobile-app: false
diff --git a/src/_components/index.md b/src/_components/index.md
@@ -11,28 +11,22 @@ index: true
   Components are interactive and non-interactive UI elements that can be grouped together or presented individually. They are independent, reusable chunks of a user interface.
 </div>
 
-## Upgrade to U.S. Web Design System v3
+## How to use the components
 
-Components the VA shares with the USWDS have been synced to the design, styling, and functionality of the US System while retaining elements necessary to the VA. Components that have been converted are marked with a badge <a class="site-component-badge-link site-component-badge-link--uswds" href="{{ site.uswds_link }}"><img src="{{ site.baseurl }}/assets/img/uswds-logo.svg" class="site-component-badge-link__img" width="16px" height="16px" /> USWDS v3</a> at the top of their component page.
+### Designers
 
-All teams must now be using the v3 versions of our web-components. The Design System Team continues to roll out the new v3-based System including syncing color, typography, and spacing with the U.S. System.
+[Add the {{ site.design_library_name }}]({{ site.baseurl }}/about/designers/design-libraries#add-the-vads-component-library-to-your-project) in Figma to be able to use the versions of our components.
 
-### How to use the new v3-based components
+### Developers
 
-#### Designers
-
-[Add the {{ site.design_library_name }}]({{ site.baseurl }}/about/designers/design-libraries#add-the-vads-component-library-to-your-project) in Figma to be able to use the new v3-based versions of our components.
-
-#### Migration strategy
-
-[Instructions are available for developers]({{ site.baseurl }}/about/developers/using-web-components) to be able to migrate components onto their v3-based version.
+[Instructions are available for developers]({{ site.baseurl }}/about/developers/using-web-components) to be able to use web components.
 
 ### Governance rules for using components, patterns, and templates
 
 To ensure consistency and quality across our applications, all teams must follow these rules when using design system components:
 
-* Do not use v1 components. Only use v3 components in your applications and pages. **Using a v1 component will be considered a launch-blocking issue and must be fixed before your team can launch to production.**
-  * The only exception is if there is no v3 equivalent available.
+* Do not use v1 components. Only use our latest web components in your applications and pages. **Using a v1 component will be considered a launch-blocking issue and must be fixed before your team can launch to production.**
+  * The only exception is if there is no equivalent available.
 * If your team is using a user interface element outside of the [design system web components](https://design.va.gov/storybook/), that is coded to look and function like a design system web component, that is considered an imposter component and will be listed as a violation at your Staging Review. Any user interface element that can use a design system web component should use it. **Any use of an imposter component will be considered a launch-blocking issue and must be fixed before your team can launch to production.**
   * Exceptions to this are default links and buttons. HTML elements `<button>` and `<a>`, with the appropriate classes added for styling consistency, may be used. This only applies to elements styled as **[Button - Default]({{ site.baseurl }}/components/button/)** and **[Link - Default]({{ site.baseurl }}/components/link)** variations. HTML elements styled as any other variation will be considered imposter components.
 * Follow the established patterns and templates in the VA Design System without modification. All sections and components must be included as defined. Do not replace or substitute components unless the guidance explicitly permits it.
diff --git a/src/_components/link/index.md b/src/_components/link/index.md
@@ -321,7 +321,7 @@ Review "[Usage](#usage)" for guidance.
 
 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 v3 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.
+* **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" %}
diff --git a/src/_components/modal/index.md b/src/_components/modal/index.md
@@ -6,7 +6,6 @@ intro-text: "A modal disables page content and focuses the user’s attention on
 figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=861%3A1708&mode=design&t=jMcVWkPlFhZu3RTh-1
 sub-pages:
   - sub-page: Crisis Line Modal
-uswds-v3: default
 web-component: va-modal
 web: true
 mobile-app: false
diff --git a/src/_components/pagination.md b/src/_components/pagination.md
@@ -5,7 +5,6 @@ status: use-deployed
 figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=1047%3A3408&mode=design&t=VuR2cBxP21GQYVZc-1
 intro-text: "Pagination is navigation for paginated content."
 web-component: va-pagination
-uswds-v3: default
 web: true
 mobile-app: false
 anchors:
@@ -20,39 +19,39 @@ anchors:
 
 ### Default
 
-{% include storybook-preview.html story="uswds-va-pagination--default" link_text="va-pagination v3 default" %}
+{% include storybook-preview.html story="uswds-va-pagination--default" link_text="va-pagination default" %}
 
 ### With Middle
 
-{% include storybook-preview.html story="uswds-va-pagination--with-middle" link_text="va-pagination v3 with middle" %}
+{% include storybook-preview.html story="uswds-va-pagination--with-middle" link_text="va-pagination with middle" %}
 
 ### With Last
 
-{% include storybook-preview.html story="uswds-va-pagination--with-last" link_text="va-pagination v3 with last" %}
+{% include storybook-preview.html story="uswds-va-pagination--with-last" link_text="va-pagination with last" %}
 
 ### With Unbounded First
 
-{% include storybook-preview.html story="uswds-va-pagination--with-unbounded-first" link_text="va-pagination v3 with unbounded first" %}
+{% include storybook-preview.html story="uswds-va-pagination--with-unbounded-first" link_text="va-pagination with unbounded first" %}
 
 ### With Unbounded Middle
 
-{% include storybook-preview.html story="uswds-va-pagination--with-unbounded-middle" link_text="va-pagination v3 with unbounded middle" %}
+{% include storybook-preview.html story="uswds-va-pagination--with-unbounded-middle" link_text="va-pagination with unbounded middle" %}
 
 ### With Seven or Less
 
-{% include storybook-preview.html story="uswds-va-pagination--with-seven-or-less" link_text="va-pagination v3 with seven or less" %}
+{% include storybook-preview.html story="uswds-va-pagination--with-seven-or-less" link_text="va-pagination with seven or less" %}
 
 ### With Seven or Less Middle
 
-{% include storybook-preview.html story="uswds-va-pagination--with-seven-or-less-middle" link_text="va-pagination v3 with seven or less middle" %}
+{% include storybook-preview.html story="uswds-va-pagination--with-seven-or-less-middle" link_text="va-pagination with seven or less middle" %}
 
 ### With Seven or Less Last
 
 {% include storybook-preview.html story="uswds-va-pagination--with-seven-or-less-last" link_text="va-pagination with seven or less last" %}
 
 ### Internationalization
 
-{% include storybook-preview.html height="300px" story="uswds-va-pagination--internationalization" link_text="va-pagination v3 internationalization" %}
+{% include storybook-preview.html height="300px" story="uswds-va-pagination--internationalization" link_text="va-pagination internationalization" %}
 
 ## Usage
 
diff --git a/src/_components/process-list.md b/src/_components/process-list.md
@@ -3,7 +3,6 @@ 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."
 figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=35%3A169&mode=design&t=J32RmU6Fjbjuh9bD-1
-uswds-v3: default
 web-component: va-process-list
 web: true
 mobile-app: false
diff --git a/src/_components/search-input.md b/src/_components/search-input.md
@@ -3,7 +3,6 @@ layout: component
 title: Search Input
 intro-text: "The Search Input component lives in the global header of VA.gov and on search results pages, and can be paired with type-ahead functionality. Type-ahead displays up to five suggested search terms in a dropdown below the search input field while the user is typing a query. The goal of type-ahead is to help Veterans navigate to relevant content more quickly by providing them with suggestions that match the characters they type."
 figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=3895-86985
-uswds-v3: primary
 anchors:
   - anchor: Examples
   - anchor: Usage
diff --git a/src/_components/summary-box.md b/src/_components/summary-box.md
@@ -7,7 +7,6 @@ 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."
 figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=1192%3A4460&mode=design&t=vNilCSI60pQBiKkM-1
-uswds-v3: default
 anchors:
   - anchor: Examples
   - anchor: Usage
diff --git a/src/_components/table.md b/src/_components/table.md
diff --git a/src/_includes/_component-uswds.html b/src/_includes/_component-uswds.html
diff --git a/src/_layouts/component.html b/src/_layouts/component.html
