diff --git a/.github/ISSUE_TEMPLATE/DST-component_design.md b/.github/ISSUE_TEMPLATE/DST-component_design.md index 8f34dd5c3..d4de32b4a 100644 --- a/.github/ISSUE_TEMPLATE/DST-component_design.md +++ b/.github/ISSUE_TEMPLATE/DST-component_design.md @@ -3,7 +3,7 @@ name: "DST - Component design" about: INTERNAL DST USE ONLY title: "[component name] - Design" labels: platform-design-system-team -assignees: babsdenney, LillyBoot +assignees: babsdenney, danbrady, lwwright7 --- @@ -27,8 +27,8 @@ If this is a pattern or component that is already in existence, conduct a small- - [ ] Conduct small audit if necessary (if component already exists and we are building a new version) - [ ] Review DST backlog for outstanding design issues with this component, if necessary (if this component already exists and we are building a new version) - [ ] Create designs for component -- [ ] Review designs with PO and/or DSC -- [ ] Review designs with an accessibility specialist +- [ ] Review designs with PO and DST designers +- [ ] Review designs with developers and accessibility specialist - [ ] Review designs with DST members (Carol can help schedule this) - [ ] Address any comments from reviews, if necessary - [ ] Comment on this ticket with any accessibility considerations engineers may need to know @@ -37,6 +37,6 @@ If this is a pattern or component that is already in existence, conduct a small- ## Acceptance Criteria - [ ] Component design is complete and has been reviewed -- [ ] Accessibility considerations have been added to this ticket, if necessary +- [ ] Accessibility and development considerations have been added to this ticket, if necessary - [ ] Content specifications have been added to this ticket, if necessary - [ ] Link to design has been added to this ticket and shared in Slack diff --git a/.gitignore b/.gitignore index 4a764f679..729bc26ba 100644 --- a/.gitignore +++ b/.gitignore @@ -9,7 +9,6 @@ tmp_remote_assets src/.jekyll-cache src/assets/stylesheets/component-library.css src/formation.min.css -src/img src/vendor src/_data/component-docs.json src/_includes/react \ No newline at end of file diff --git a/package.json b/package.json index 5b384c683..1d9191e6e 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ }, "homepage": "https://github.com/department-of-veterans-affairs/vets-design-system-documentation#readme", "devDependencies": { - "@department-of-veterans-affairs/component-library": "^38.0.4", + "@department-of-veterans-affairs/component-library": "^40.0.0", "gulp": "^4.0.2", "gulp-clean": "^0.4.0", "gulp-rename": "^2.0.0", diff --git a/src/_about/developers/using-web-components.md b/src/_about/developers/using-web-components.md index 3569dd186..431d03f0c 100644 --- a/src/_about/developers/using-web-components.md +++ b/src/_about/developers/using-web-components.md @@ -226,11 +226,11 @@ Here is a list of each Web Component and the migration available: Font Awesome icons will be deprecated in late-May 2024 in favor of the `va-icon` web component which uses USWDS icons. USWDS icons are a combination of Material Icons and [custom icons](https://github.com/department-of-veterans-affairs/dst-uswds-compile/tree/main/assets/icons). A searchable set can be viewed on the [USWDS Icon page](https://designsystem.digital.gov/components/icon/). ### Quick References +- [Icon Name Mapping](https://design.va.gov/foundation/icons) - [va-icon on Storybook](https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default) -- [USWDS Icon list](https://designsystem.digital.gov/components/icon/) - Slack channel: `#platform-design-system` -### ESLint Auto-Migration + ### The va-icon Web Component API @@ -263,8 +262,7 @@ Examples and details for the va-icon web component can be found on [Storybook](h - 8: 64px - 9: 72px - srtext: Screen-reader text if the icon has semantic meaning and is not purely decorative -- color: The fill color of the icon (coming soon) ### Mapping Icon Names -Icon names can be referenced on [Storybook](https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default), the [USWDS Icon page](https://designsystem.digital.gov/components/icon/), or reach out in the
`#platform-design-system` Slack channel for help deciding on a mapping name. \ No newline at end of file +Icon name mapping from Font Awesome to USWDS can be found on the [Icons Foundation page](https://design.va.gov/foundation/icons). Icon names can also be referenced on [Storybook](https://design.va.gov/storybook/?path=/docs/uswds-va-icon--default) or the [USWDS Icon page](https://designsystem.digital.gov/components/icon/). \ No newline at end of file diff --git a/src/_about/whats-new.md b/src/_about/whats-new.md index 3f2bc9e7b..eb6530ad3 100644 --- a/src/_about/whats-new.md +++ b/src/_about/whats-new.md @@ -25,6 +25,48 @@ title: What’s new? +## April 2024 +The team continued to synch to USWDS v3 and updated and fixed v3 components while the Figma Library continued to be built out. + +### New features and compopnents +* Icon Button Component (#2641) +* Formation Deprecation - Add 768px Breakpoint to CSS Library (#2533) +* Conversion to USWDS v3 Borderless table component (#1860) + +### Updated components and bug fixes +* [Alert] - Remove background-only prop from Alert In Figma (#2394) +* Review & submit - fix accordion error styling (#77064) +* Injected Header - Add eslint warning & inline comments for React Modals that should not be touched (#2541) +* Remove V1 Memorable Date from Component Library and Storybook (#2660) +* Search Typeahead component does not close as expected when the component loads with a value prefilled (#2676) +* Formation Deprecation - Typography base size migration QA vets-website, content-build and vagov-content (#2525) +* Formation Deprecation - Typography base size migration QA component-library (#2566) +* Rename medium-mobile breakpoint to tablet (#2679) +* va-summary-box should require that a header be present (#2557) +* Update components section in Storybook(#2589) +* Update remaining Formation color variables to their css-library counterparts (#79489) +* Review & submit - fix accordion error styling(#77064) +* Update remaining Formation color variables to their css-library counterparts (#79489) +* Formation Deprecation - Migrate font settings from Formation to CSS Library (#2537) +* Remove Font Awesome icon overrides in USWDS components (#2577) + +### Figma Library updates +* Figma rebuild: Templates - How to apply (Forms (#2464) +* Figma rebuild: Templates - Multiple Responses (Patterns) (#2457) +* Add missing icons for texting/mobile device and external link (#2381) +* Figma rebuild: Templates - Confirmation (Forms) (2466) +* Icons - Update Figma Components to use USWDS icons (#2624) + +### Documentation updates +* Icon web component - Documentation (#2197) +* Create documentation about web component analytics (#2625) + +### Accessibility updates +* Discovery: Research and propose aria-describedby alternatives
(#2619) +* Icon web component - Accessibility review (#1365) +* va-select needs describedby property (#2587) + + ## March 2024 The team continued to synch to USWDS v3 and made updates and fixes to v3 components while the Figma Library continues to be built out. diff --git a/src/_components/form/checkbox.md b/src/_components/form/checkbox.md index 4f27e1add..368fad089 100644 --- a/src/_components/form/checkbox.md +++ b/src/_components/form/checkbox.md @@ -128,8 +128,8 @@ anchors: #### When to consider something else -- If there are too many options to display on a mobile screen. -- If a user can only select one option from a list (use radio buttons instead). +* If there are too many options to display on a mobile screen. +* If a user can only select one option from a list (use radio buttons instead). {% include content/conditionally-revealed-fields.md %} @@ -153,12 +153,13 @@ anchors: {% include snippet.html content='html/error-checkbox-group.html' %} - {% 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. +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. ## Accessibility considerations diff --git a/src/_components/form/number-input.md b/src/_components/form/number-input.md index 5b5c8e13a..94df89091 100644 --- a/src/_components/form/number-input.md +++ b/src/_components/form/number-input.md @@ -80,21 +80,21 @@ anchors: ### When to use number input -- When a number should be the only accepted value within an input element. -- If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers. -- When users want to be able to paste in a response. +* When a number should be the only accepted value within an input element. +* If you can’t reasonably predict a user’s answer to a prompt and there might be wide variability in users’ answers. +* When users want to be able to paste in a response. ### When to consider something else -- When users are choosing from a specific set of options. -- A number is not the only accepted value for the input. -- The number should be a type other than number, ie: telephone numbers +* When users are choosing from a specific set of options. +* A number is not the only accepted value for the input. +* The number should be a type other than number, ie: telephone numbers -### How to use +### How to use -- Number input always has the type of `number` and provides a `min` and `max` attribute to set a range on the component. -- Only show error validation messages or stylings after a user has interacted with a particular field. -- Avoid using placeholder text that appears within a input field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries. (People who have cognitive or visual disabilities have additional problems with placeholder text.) +* Number input always has the type of `number` and provides a `min` and `max` attribute to set a range on the component. +* Only show error validation messages or stylings after a user has interacted with a particular field. +* Avoid using placeholder text that appears within a input field before a user starts typing. If placeholder text is no longer visible after a user clicks into the field, users will no longer have that text available when they need to review their entries. (People who have cognitive or visual disabilities have additional problems with placeholder text.) ### Choosing between variations @@ -106,13 +106,15 @@ anchors: * **With Currency.** Indicates to the user the expected input is US currency. * **Widths.** Indicates to the user the expected length of text input by sizing the field relative to what is expected. -### Native Events +{% include component-docs.html component_name=page.web-component %} -- Native onInput and onBlur events are available on this component. They 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. +{% include content/using-message-aria-describedby.md %} -{% include component-docs.html component_name=page.web-component %} +### Native Events + +Native onInput and onBlur events are available on this component. They 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. ## Accessibility considerations -- Avoid `placeholder` text for accessibility reasons. Most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio. -- Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful. +* Avoid `placeholder` text for accessibility reasons. Most browsers’ default rendering of placeholder text does not provide a high enough contrast ratio. +* Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful. diff --git a/src/_components/form/text-input.md b/src/_components/form/text-input.md index 14a76f51b..10daa3f5d 100644 --- a/src/_components/form/text-input.md +++ b/src/_components/form/text-input.md @@ -113,6 +113,8 @@ See [form error handling]({{ site.baseurl }}/components/form/#error-handling) fo {% include component-docs.html component_name=page.web-component %} +{% include content/using-message-aria-describedby.md %} + ### Native Events * Native onInput and onBlur events are available on this component. They 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/textarea.md b/src/_components/form/textarea.md index 518227e3e..9c8530833 100644 --- a/src/_components/form/textarea.md +++ b/src/_components/form/textarea.md @@ -75,6 +75,8 @@ See [form error handling]({{ site.baseurl }}/components/form/#error-handling) fo {% include component-docs.html component_name=page.web-component %} +{% include content/using-message-aria-describedby.md %} + ### Native Events * Native onInput and onBlur events are available on this component. They 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/template.md b/src/_components/template.md index e5cc990ab..e394011e3 100644 --- a/src/_components/template.md +++ b/src/_components/template.md @@ -25,12 +25,10 @@ anchors: {% include storybook-preview.html story="components-va-component-name--default" link_text=page.web-component %} - ### Variation 1 Add Storybook examples as necessary. - ### Variation 2 Add Storybook examples as necessary. @@ -42,7 +40,6 @@ Add Storybook examples as necessary. * **In this context**: Explain the scenario or user context where this component is, or could be, used. * **In this task**: Explain the user task or tasks where this component is, or could be, used. - ### When to consider something else * **Not in this context**: Explain which scenarios or user context where this component is not, or should not, be used. @@ -80,7 +77,6 @@ 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. @@ -97,6 +93,5 @@ 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/_content-style-guide/links.md b/src/_content-style-guide/links.md index b2d296453..02c63a357 100644 --- a/src/_content-style-guide/links.md +++ b/src/_content-style-guide/links.md @@ -127,21 +127,5 @@ You can apply online or mail your [Application for Burial Benefits (VA Form 21P- ## Linking to external sites * **Use text that tells the reader where the link takes them.** Example: [Check COVID-19 symptoms on the CDC website](https://www.cdc.gov/coronavirus/2019-ncov/symptoms-testing/symptoms.html) -* **Open external links in a new tab or window.** Links to external sites should have an attribute in the source code to open in a new tab. (This is what that looks like: `target="_blank"` .) External links should also have `rel="noreferrer"` as an attribute. * **Consider using an aria-label to create a screen reader-only label.** Aria-labels can be helpful in specialized instances where there's a clear reason to use separate text for people who use screen readers. The aria-label may append or replace text within a link to provide context about where the link goes. -* **Don’t use the “new window” icon for external links since it can cause confusion.** In content we avoid use of the "new window" icon. Within components, for brevity, use of the icon is acceptable. -* **Open internal links in the same tab or window.** Links within the VA.gov domain should open in the current tab or window. Exception: Some VA sub-domains provide a distinct experience from VA.gov, so they open in a new tab. For these exceptions, add “(opens in new tab)” to the link text. - -### VA sub-domain exceptions that open in a new tab or window - -These sub-domains currently open in a new tab, and we should clarify that in the link text. Example: “Learn more on our ebenefits website (opens in new tab)” This list is periodically re-evaluated and updated. - - * [myhealth.va.gov](http://myhealth.va.gov/) - * [ebenefits.va.gov](http://ebenefits.va.gov/) - * [www.accesstocare.va.gov](http://www.accesstocare.va.gov/) - * [www.gibill.va.gov/wave](http://www.gibill.va.gov/wave) - * [www.blogs.va.gov](http://www.blogs.va.gov/) - * [www.data.va.gov](http://www.data.va.gov/) - * [mobile.va.gov](http://mobile.va.gov/) - * [www.accesstocare.va.gov](http://www.accesstocare.va.gov/) - * [www.oit.va.gov](http://www.oit.va.gov/) +* **Explain when a link is opening in a new tab with text, not an icon.** Add "(opens in new tab)" to notify users when a link is opening in a new tab. In standard link text, we avoid using the new window icon, since it can cause confusion. Within components that have space constraints, the icon is acceptable. diff --git a/src/_data/content/patterns/ask-users-for/addresses.csv b/src/_data/content/patterns/ask-users-for/addresses.csv index 889b44817..b4840cc4a 100644 --- a/src/_data/content/patterns/ask-users-for/addresses.csv +++ b/src/_data/content/patterns/ask-users-for/addresses.csv @@ -1,11 +1,13 @@ section,subsection,pattern-or-component,label,label-text,hint-text,sub-questions,error-scenario-1,error-message-1,error-scenario-2,error-message-2,error-scenario-3,error-message-3,label-variations,notes-on-updates /patterns,/ask-users-for,/addresses,address,Mailing address,,,,,,,,,, -/patterns,/ask-users-for,/addresses,address,Physical address,,,,,,,,,,"Changing ""home address"" to ""physical address"" to align with USWDS" +/patterns,/ask-users-for,/addresses,address,Home address,,,,,,,,,, /patterns,/ask-users-for,/addresses,address,Country,,,No selection,Select a country,,,,,,"Changing from ""Country is required"" to ""Select a country"" to avoid passive" /patterns,/ask-users-for,/addresses,address,Street address,,,No entry,Enter a street address,,,,,,Slight adjustment to avoid passive voice -/patterns,/ask-users-for,/addresses,address,Street address line 2,,,,,,,,,Apartment or unit number, +/patterns,/ask-users-for,/addresses,address,Street address line 2,,,,,,,,,, /patterns,/ask-users-for,/addresses,address,Street address line 3,,,,,,,,,, /patterns,/ask-users-for,/addresses,address,City,,,No entry,Enter a city,,,,,,Slight adjustment to avoid passive voice -/patterns,/ask-users-for,/addresses,address,"State, province, or region",,,"No entry and user lives in the U.S. (If user lives outside of the U.S., this field should remain optional.)",Select a state or territory,,,,,,"Slight adjustment to lowercase province and region. Changed the error message for ""no entry"" to align with standards and be more relevant for U.S. audiences." +/patterns,/ask-users-for,/addresses,address,"State, province, or region",,,,,,,,,,"Slight adjustment to lowercase province and region. Changed the error message for ""no entry"" to align with standards and be more relevant for U.S. audiences." /patterns,/ask-users-for,/addresses,address,Postal code,,,No entry and country is unknown,Enter a postal code,No entry and user lives outside of the U.S.,"Enter a postal code that meets your country’s requirements. If your country doesn’t require a postal code, enter NA.",No entry and user lives in the U.S.,Enter a valid 5- or 9-digit zip code,,"Slight adjustment to make zip lowercase. And include ""5- or 9-digit"" when user has indicated that they live in the U.S." -/patterns,/ask-users-for,/addresses,address,"APO, FPO, or DPO",,,No entry and user has selected military base checkbox,"Select a type of post office: APO, FPO, or DPO",,,,,, +/patterns,/ask-users-for,/addresses,address,"APO, FPO, or DPO",,,No entry,"Select a type of post office: APO, FPO, or DPO",,,,,, +/patterns,/ask-users-for,/addresses,address,Military post,,,No entry,"Select a military post",,,,,, +/patterns,/ask-users-for,/addresses,address,State or territory,,,No entry,"Select a state or territory",,,,,, diff --git a/src/_data/icons.yml b/src/_data/icons.yml index 73e011dfc..9f823bd58 100644 --- a/src/_data/icons.yml +++ b/src/_data/icons.yml @@ -30,9 +30,7 @@ Feedback: unicode: "#xf05a;" additional-usage: Alert - Info - name: Confirmation or completion - icon-name: check - fa-class: "fas fa-check" - unicode: "#xf00c;" + icon-name: check_circle additional-usage: Alert - Success - name: Warning icon-name: warning @@ -44,6 +42,15 @@ Feedback: icon-name: error unicode: "#xf06a;" additional-usage: Alert - Error + - name: Sign in or tool prompt + fa-class: "fas fa-lock" + icon-name: lock + additional-usage: Alert - Continue + - name: Confirmation or completion + icon-name: check + fa-class: "fas fa-check" + unicode: "#xf00c;" + additional-usage: Process List Health: - name: Lab and test results (Facilities) @@ -181,6 +188,12 @@ Interaction: icon-name: delete fa-class: "fas fa-trash-alt" unicode: "#xf1f8;" + - name: Cancel an action + icon-name: cancel + - name: Loading indicator + icon-name: autorenew + fa-class: "fas fa-spinner" + unicode: "#xf1f8;" Messaging: - name: Attachment diff --git a/src/_foundation/icons.html b/src/_foundation/icons.html index ccad60063..b8607bbf2 100644 --- a/src/_foundation/icons.html +++ b/src/_foundation/icons.html @@ -13,6 +13,7 @@ - anchor: Notifications - anchor: Profile - anchor: Social + - anchor: Requesting a new icon - anchor: Accessibility considerations --- @@ -24,7 +25,8 @@

Icons

Use icons to communicate meaning, action, status, or feedback.

- We currently leverage Font Awesome (v1) v5.15.4 but are migrating to USWDS icons (v3) with some additions for VA-specific use cases. + VADS icons are adapted from USWDS icons and also + includes additional icons for VA-specific use cases. Our v1/legacy icon set used Font Awesome v5.15.4.

{% include _site-on-this-page.html %} @@ -66,6 +68,41 @@

{{ section[0] }}

{% endfor %} +

Requesting a new icon

+

+ If your team needs a new icon and wants to suggest adding it to the design system, follow these steps: +

+ +
    +
  1. + Check Existing VADS Icons: + Look through the current icon set to ensure a similar icon does not already exist. We aim to maintain consistency in + semantic use by avoiding duplicating similar icons. +
    2. + +
  2. + Explore USWDS Icons: + Search + USWDS Icon to see if another existing icon suits your + needs. Preferably, choose generic icons that could be reused in various applications. + +

    If VADS and USWDS do not contain a suitable icon, you + may search Material + Icons or browse the official Material Design Icons + Figma + plugin by Google. Note that we typically use the "filled" icon style.

    +
    3. +
  3. + Submit Your Icon: + Once you've found a suitable icon for VADS, submit it using the following link: +

    Request a new addition to the Design + System

    +
    4. +
+ +

These steps should streamline the process for suggesting and adding new icons to the design system.

+

Accessibility considerations

Icon usage typically falls into two categories, decorative and semantic. @@ -103,7 +140,7 @@

Non-interactive icons

Non-interactive example
   
-<i aria-hidden="true" class="fas fa-car" title="Time to complete"></i> 
+<i aria-hidden="true" class="fas fa-car" title="Time to complete"></i>
 <span class="sr-only"/>Time to complete:</span>
 <span>4 minutes</span>
   
diff --git a/src/_includes/content/conditionally-revealed-fields.md b/src/_includes/content/conditionally-revealed-fields.md
index a8837b486..477e3d839 100644
--- a/src/_includes/content/conditionally-revealed-fields.md
+++ b/src/_includes/content/conditionally-revealed-fields.md
@@ -1,4 +1,4 @@
-### Conditionally revealed fields
+#### Conditionally revealed fields
 
 In the radio button and checkbox components, we offer an option to conditionally reveal fields when the user selects an answer. These fields are often used to group related questions together by revealing a single follow-up question only when they’re relevant to the user.
 
diff --git a/src/_includes/content/using-message-aria-describedby.md b/src/_includes/content/using-message-aria-describedby.md
new file mode 100644
index 000000000..df1e0cf72
--- /dev/null
+++ b/src/_includes/content/using-message-aria-describedby.md
@@ -0,0 +1,5 @@
+### Using message-aria-describedby
+
+In HTML, the attribute `aria-describedby` accepts `id`s of the elements that describe an object. This is used to establish a relationship between an element and text elsewhere that describes it for screen readers.
+
+However, the VA.gov Design System uses web components and the shadow DOM, which prevents HTML's `aria-describedby` from being able to establish the relationship between elements. Because of that, the `message-aria-describedby` prop is used in our components instead. Instead of accepting `id`s, it accepts a message string to read out. This message is placed inside the shadow DOM, hidden visually, but made accessible to screen readers. This allows it to function similarly to `aria-describedby` and have the descriptive text read out when the element is focused.
\ No newline at end of file
diff --git a/src/_patterns/ask-users-for/addresses.md b/src/_patterns/ask-users-for/addresses.md
index 6585eb1e4..307b0d97c 100644
--- a/src/_patterns/ask-users-for/addresses.md
+++ b/src/_patterns/ask-users-for/addresses.md
@@ -50,23 +50,7 @@ anchors:
 
 ### Layout details
 
-#### Single address layout
-
-Here is the content structure for asking a user for a single address:
-
-* Checkbox for military address (if applicable)
-* Additional info component (if applicable)
-* Country select box
-* Street address text input
-* Street address line 2 text input
-* Street address line 3 text input (if applicable)
-* City text input
-* State/Province/Region select box
-* Postal code text input
-
-#### Multiple addresses layout
-
-Here is the content structure for asking a user for multiple addresses:
+Here is the content structure for asking a user for an address:
 
 * Header - Mailing or Home Address
 * Relevant information regarding this form and the user’s address (if applicable)
@@ -79,7 +63,7 @@ Here is the content structure for asking a user for multiple addresses:
 * City text input
 * State/Province/Region select box
 * Postal code text input
-* Radio button component for mailing address same as home address (this is on mailing address page only) 
+* Radio button component for mailing address same as home address (if applicable; this is on mailing address page only) 
 
 ### How this pattern works
 
@@ -130,4 +114,4 @@ Use the [VADS templates (Patterns & Forms) for Addresses in Figma]({{ page.figma
 
 ### Labels, error messages, and hint text
 
-{% include _field-labels.html labels=site.data.content.patterns.ask-users-for.addresses %}
\ No newline at end of file
+{% include _field-labels.html labels=site.data.content.patterns.ask-users-for.addresses %}
diff --git a/src/img/sprite.svg b/src/img/sprite.svg
new file mode 100644
index 000000000..d3f43aa2e
--- /dev/null
+++ b/src/img/sprite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 7520eef8e..242a7de5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,13 +9,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@department-of-veterans-affairs/component-library@^38.0.4":
-  version "38.0.4"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-38.0.4.tgz#4b4c30309bf6b3ca1dac1001ce8e7abfe0fe561b"
-  integrity sha512-QXa8lK3hD8z3rn68Jya3+i8QoxMUr1JQkAYJWnct452mIiyvjKgzAFqd5u57pbwNHi7im5kfIkbtex9Vu/CyCA==
+"@department-of-veterans-affairs/component-library@^40.0.0":
+  version "40.0.0"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/component-library/-/component-library-40.0.0.tgz#5d89c62b78112557d2cb6d75c1f3af7798b97b20"
+  integrity sha512-cuNnlfYC2PDsnYgV4anRQdMfb/mOzoGwjWceDsLL4Ur8YM7OD8rmnFoKrjlxFFVYrKFqEGVWRNziIryOaOtYvA==
   dependencies:
     "@department-of-veterans-affairs/react-components" "28.0.0"
-    "@department-of-veterans-affairs/web-components" "6.0.7"
+    "@department-of-veterans-affairs/web-components" "7.2.1"
     i18next "^21.6.14"
     i18next-browser-languagedetector "^6.1.4"
     react-focus-on "^3.5.1"
@@ -56,10 +56,10 @@
     react-transition-group "1"
     recast "^0.14.4"
 
-"@department-of-veterans-affairs/web-components@6.0.7":
-  version "6.0.7"
-  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-6.0.7.tgz#17f6a0ba47f5d1498bbe929ef457d0ee4c62da0a"
-  integrity sha512-TPdOcdkF967C0wS3FBWBezzNqXvOREwrc8SYRofFrEJriZiOm6Mb9SXDyZG6v0CWIiGVESdlzBWwColPuL7dRA==
+"@department-of-veterans-affairs/web-components@7.2.1":
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/@department-of-veterans-affairs/web-components/-/web-components-7.2.1.tgz#10d562776b7490e4726650c5715ed754b4ff6ad2"
+  integrity sha512-TbTtcBmDncS9OrI9JMq+0Yk1OmgO3/lbehOhuogHJSolvauRqV+zdKNAFmnUZF87qRbkMa0hiIop6ife7taRrA==
   dependencies:
     "@department-of-veterans-affairs/css-library" "^0.5.1"
     "@stencil/core" "^2.19.2"