Adding code usage links to point to Storybook

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
+
+<va-link-action
+  href="{{ site.storybook_path }}/?path=/docs/uswds-va-accordion--docs"
+  text="View Accordion guidance in Storybook for use on VA.gov"
+  type="secondary"
+></va-link-action>
 
 ## Content considerations
 

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.
@@ -74,12 +74,18 @@ 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 [&lt;details&gt; 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
+
+<va-link-action
+  href="{{ site.storybook_path }}/?path=/docs/uswds-va-additional-info--docs"
+  text="View Additional Info guidance in Storybook for use on VA.gov"
+  type="secondary"
+></va-link-action>
 
 ## 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/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
+
+<va-link-action
+  href="{{ site.storybook_path }}/?path=/docs/components-va-alert-expandable--docs"
+  text="View Alert - Expandable guidance in Storybook for use on VA.gov"
+  type="secondary"
+></va-link-action>
 
 ## Accessibility considerations
 

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
+
+<va-link-action
+  href="{{ site.storybook_path }}/?path=/docs/components-va-alert-sign-in--docs"
+  text="View Alert - Sign-in guidance in Storybook for use on VA.gov"
+  type="secondary"
+></va-link-action>
 
 ## Content considerations
 

src/_components/alert/index.md

@@ -273,7 +273,23 @@ 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
+
+<p>
+  <va-link-action
+    href="{{ site.storybook_path }}/?path=/docs/uswds-va-alert--docs"
+    text="View Alert guidance in Storybook for use on VA.gov"
+    type="secondary"
+  ></va-link-action>
+</p>
+
+<p>
+  <va-link-action
+    href="{{ site.storybook_path }}/?path=/docs/va-mobile_alert--docs"
+    text="View Alert guidance in Storybook for use on the VA Mobile app"
+    type="secondary"
+  ></va-link-action>
+</p>
 
 ## Content considerations
 
@@ -304,6 +320,11 @@ Displaying multiple alerts should be avoided. However, when you need to display
 
 ## Accessibility considerations
 
+<va-link-action
+  href="https://designsystem.digital.gov/components/alert/#accessibility-alert"
+  text="Refer to the U.S. Web Design System for accessibility guidance"
+  type="secondary"
+></va-link-action>
 <va-link-action
   href="https://designsystem.digital.gov/components/alert/#accessibility-alert"
   text="Refer to the U.S. Web Design System for accessibility guidance"

src/_components/back-to-top.md

@@ -1,16 +1,15 @@
 ---
 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: Accessibility considerations
 ---
 
@@ -22,7 +21,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
 
@@ -44,7 +43,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
 

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
+
+<va-link-action
+  href="{{ site.storybook_path }}/?path=/docs/components-va-banner--docs"
+  text="View Banner guidance in Storybook for use on VA.gov"
+  type="secondary"
+></va-link-action>
 
 ## 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,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 %}
+## Code usage
+
+<va-link-action
+  href="{{ site.storybook_path }}/?path=/docs/components-va-maintenance-banner--docs"
+  text="View Banner - Maintenance guidance in Storybook for use on VA.gov"
+  type="secondary"
+></va-link-action>

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
@@ -50,11 +52,26 @@ 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
+
+  <va-link-action
+    href="{{ site.storybook_path }}/?path=/docs/components-va-official-gov-banner--docs"
+    text="View Banner - Official Gov guidance in Storybook for use on VA.gov"
+    type="secondary"
+  ></va-link-action>
+  <va-link-action
+    href="{{ site.storybook_path }}/?path=/docs/components-va-official-gov-banner--docs"
+    text="View Banner - Official Gov guidance in Storybook for use on VA.gov"
+    type="secondary"
+  ></va-link-action>
 
 ## Accessibility considerations
 
 <va-link-action
   href="https://designsystem.digital.gov/components/banner/#accessibility-default-banner"
   text="Refer to the U.S. Web Design System for accessibility guidance" type="secondary">
 </va-link-action>
+<va-link-action
+  href="https://designsystem.digital.gov/components/banner/#accessibility-default-banner"
+  text="Refer to the U.S. Web Design System for accessibility guidance" type="secondary">
+</va-link-action>