Adding code usage links to point to Storybook

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 `<va-link-action>` to link to Storybook docs for the related component.
 
-```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
 

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 <a href="https://blog.navapbc.com/structuring-a-complex-eligibility-form-for-healthcare-gov-37d79a5ad6">case study on structuring complex health care questions for healthcare.gov</a> 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 <a href="https://blog.navapbc.com/structuring-a-complex-eligibility-form-for-healthcare-gov-37d79a5ad6">case study on structuring complex health care questions for healthcare.gov</a> 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,19 +49,19 @@ 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
 
 The help is triggered by clicking on a uniquely styled text link with a plain language hook. The helper text is revealed with a sliding drawer type animation (like the accordion) and is typically 1-3 short paragraphs. Shorter is better, and references to static content pages is encouraged when the situation is complicated.
 
 ### 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.
@@ -79,7 +79,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

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,12 +54,12 @@ anchors:
 
 ## Code usage
 
-* The Address block component is created by applying the CSS class <code>.va-address-block</code> to a <code><p></code> HTML element.
+* The Address Block component is created by applying the CSS class <code>.va-address-block</code> to a <code><p></code> HTML element.
 * Only use the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address"><code><address></code></a> HTML element for contact information related to the current page. <code><address></code> is only intended for contact information and not physical addresses (e.g. not for a Health Center facility address).
 
 
 ## Content considerations
 
 {% include content/addresses.md %}
 
-{% include _component-checklist.html component_name="va-address-block" %}
+{% include _component-checklist.html component_name="va-address-block" %}

src/_components/back-to-top.md

@@ -1,16 +1,16 @@
 ---
 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
 anchors:
   - anchor: Examples
   - anchor: Usage
-  - anchor: Code usage
+  - anchor: Code Usage
   - anchor: Accessibility considerations
 ---
 
@@ -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
 

src/_components/banner/index.md

@@ -78,4 +78,4 @@ anchors:
 ## 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.
+* **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.

src/_components/banner/maintenance.md

@@ -50,4 +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.
 
-{% include component-docs.html component_name=page.web-component %}
+{% include component-docs.html component_name=page.web-component %}

src/_components/banner/official-gov.md

@@ -31,11 +31,13 @@ anchors:
 <va-featured-content>
   <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/"
-    text="View USWDS guidance on Banner"
-    type="secondary"
-  ></va-link-action>
+  <p>
+    <va-link-action
+      href="https://designsystem.digital.gov/components/banner/"
+      text="View USWDS guidance on Banner"
+      type="secondary"
+    ></va-link-action>
+  </p>
 </va-featured-content>
 
 ### When to use Banner - Official Gov

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:
 
 <va-link-action
 href="https://designsystem.digital.gov/components/button-group/"
-text="Refer to the U.S. Web Design System for usage guidance for the Default button group"
+text="Refer to the U.S. Web Design System for usage guidance for the Default Button Group"
 type="secondary"
 
 > </va-link-action>
@@ -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
 

src/_components/button/button-segmented.md

@@ -114,7 +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).
 
-{% include component-docs.html component_name=page.web-component %}
+{% include component-docs.html component_name=page.web-component mobile_component_name="va-segmented-control" %}
 
 ## Content considerations
 

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