`. The `lang` attribute is also added to the `` element. This may disagree with the lang attribute of the `` element. Please see [H58: Using language attributes to identify changes in the human language](https://www.w3.org/WAI/WCAG21/Techniques/html/H58).
-* **Label the language toggle code**. This ensures that it is spoken in the correct language if read aloud by assistive technologies. The `lang` value on the link should match that of the resulting page it links to.
+* **Label the Language Toggle code**. This ensures that it is spoken in the correct language if read aloud by assistive technologies. The `lang` value on the link should match that of the resulting page it links to.
## Related
* [Breadcrumbs]({{ site.baseurl }}/components/breadcrumbs)
* [Sidenav]({{ site.baseurl }}/components/sidenav)
-{% include _component-checklist.html component_name=page.web-component %}
\ No newline at end of file
+{% include _component-checklist.html component_name=page.web-component %}
diff --git a/src/_components/link/index.md b/src/_components/link/index.md
index 514d2972e..f600a4e25 100644
--- a/src/_components/link/index.md
+++ b/src/_components/link/index.md
@@ -324,7 +324,7 @@ The mobile app includes link variations that address platform-specific needs:
* **Base link style.** The Base link style exists due to mobile app specific needs in dark mode. For example, the Alert component has a colored background for each variation. While working on dark mode, the mobile app team found that the Default link style did not meet color contrast requirements and clashed with the background colors. For this reason, a new Base style was created similar to the USWDS Base style.
* **Content-specific link variants.** In Storybook, variants are available for content-specific links (add to calendar, get directions, etc.). These variants include the onPress logic for app teams, which ensures that the component always displays a native confirmation message when needed.
-{% include component-docs.html component_name=page.web-component mobile_component_name="va-link" %}
+{% include component-docs.html component_name=page.web-component %}
### Links to content in another language
diff --git a/src/_components/loading-indicator.md b/src/_components/loading-indicator.md
index e40f327b3..53e9bf45d 100644
--- a/src/_components/loading-indicator.md
+++ b/src/_components/loading-indicator.md
@@ -1,6 +1,6 @@
---
layout: component
-title: "Loading indicator"
+title: "Loading Indicator"
intro-text: "A loading indicator provides a clue to ongoing activity when the site needs to load additional content."
research-title: "Loading indicators"
figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=35%3A161&mode=design&t=vNilCSI60pQBiKkM-1
@@ -43,7 +43,7 @@ anchors:
## Usage
-### When to use the Loading indicator
+### When to use the Loading Indicator
* When the wait time for a process, such as loading a page, is unknown.
@@ -62,11 +62,11 @@ anchors:
2. An object that is being acted upon
3. An ellipsis
-* **Use present participle verbs (ending with "-ing"):** Start each loading indicator with the verb of the action that is happening. Consider what the system is actually doing. Remember that the loading indicator is supposed to inform the user what is happening while they’re waiting. The system isn’t always loading something. Sometimes it's sending something. Other times it's saving something.
+* **Use present participle verbs (ending with "-ing"):** Start each Loading Indicator with the verb of the action that is happening. Consider what the system is actually doing. Remember that the Loading Indicator is supposed to inform the user what is happening while they’re waiting. The system isn’t always loading something. Sometimes it's sending something. Other times it's saving something.
* **Describe the object being acted upon:** Follow the verb with the object that is being acted upon. For example, if the system is saving something, describe (in 1 or 2 words) what is being saved. If applicable, make the object personal to the user by using a possessive pronoun (your) instead of an article (a, the).
-* **End with an ellipsis:** End each loading indicator with an ellipsis (3 periods). Do not use unnecessary words, such as "please" or "wait".
+* **End with an ellipsis:** End each Loading Indicator with an ellipsis (3 periods). Do not use unnecessary words, such as "please" or "wait".
Examples of loading indicator messages:
@@ -76,5 +76,5 @@ Examples of loading indicator messages:
## Accessibility considerations
-* On the web, the loading indicator component is used to notify user’s that the page content is loading. W3C WAI-ARIA `aria-live="polite"`, `aria-label` and `aria-valuetext` are used to ensure screen reader users are also provided the same information.
+* On the web, the Loading Indicator component is used to notify user’s that the page content is loading. W3C WAI-ARIA `aria-live="polite"`, `aria-label` and `aria-valuetext` are used to ensure screen reader users are also provided the same information.
* In the mobile app, use the equivalent accessibility hints and labels in React Native.
diff --git a/src/_components/modal/crisis-line-modal.md b/src/_components/modal/crisis-line-modal.md
index d59c567ca..c6399d65e 100644
--- a/src/_components/modal/crisis-line-modal.md
+++ b/src/_components/modal/crisis-line-modal.md
@@ -37,4 +37,4 @@ anchors:
* **Do not alter the contents of this component.** The contents of this component are governed by CAIA.
-{% include _component-checklist.html component_name=page.web-component %}
\ No newline at end of file
+{% include _component-checklist.html component_name=page.web-component %}
diff --git a/src/_components/modal/index.md b/src/_components/modal/index.md
index 787b3fee4..7bc8dd7c4 100644
--- a/src/_components/modal/index.md
+++ b/src/_components/modal/index.md
@@ -91,4 +91,4 @@ anchors:
href="https://designsystem.digital.gov/components/modal/#accessibility-select"
text="Refer to the U.S. Web Design System for accessibility guidance"
type="secondary"
->
\ No newline at end of file
+>
diff --git a/src/_components/omb-info.md b/src/_components/omb-info.md
index 1d2c58e3b..dc0fae501 100644
--- a/src/_components/omb-info.md
+++ b/src/_components/omb-info.md
@@ -100,6 +100,8 @@ The respondent burden estimate should be included when available, however it is
As mentioned above, the Paperwork Reduction Act is very specific about the placement of this information thus it must appear on the [form introduction page]({{ site.baseurl }}/templates/forms/introduction).
+{% include component-docs.html component_name=page.web-component %}
+
## Content considerations
The content of this component should not be altered. Additional information may be provided the "With Custom Respondent Burden Benefit Type" and "With Children" variations of this component under specific circumstances.
diff --git a/src/_components/on-this-page.md b/src/_components/on-this-page.md
index 3cbe0cac8..f338ede8b 100644
--- a/src/_components/on-this-page.md
+++ b/src/_components/on-this-page.md
@@ -1,7 +1,7 @@
---
layout: component
-title: On this page
-intro-text: "The On this page jump links component summarizes the sections (<h2>s) at the top of long pages and allows users to jump down the page to the respective section."
+title: On this Page
+intro-text: "The On this Page jump links component summarizes the sections (<h2>s) at the top of long pages and allows users to jump down the page to the respective section."
research-title: "On this page jump link"
figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=798-1500
status: use-best-practice
@@ -21,27 +21,27 @@ anchors:
## Usage
-### When to use the On this page jump links component
+### When to use the On this Page jump links component
- Use this component to quickly tell users what information they can get on that page.
- This component is especially helpful for pages with a lot of content, as it helps users navigate longer pages and provides guideposts that bring users deeper into the content.
### When to consider something else
-- Don't use the On this page jump links if the content on the page isn't very long. To display this component, the page must have a minimum of two H2 section titles.
+- Don't use the On this Page jump links if the content on the page isn't very long. To display this component, the page must have a minimum of two H2 section titles.
- If the content you want users to see is too far down the page, consider rearranging the content to achieve the desired hierarchy.
-### How to use the On this page jump links component
+### How to use the On this Page jump links component
- **Keep the first link and its corresponding heading close together,** so users can more easily make the connection that the links correspond to the H2 section titles
-- **The content on the page must have a minimum of two H2 section titles to use the On this page jump links.**
-- **On this page jump links component pairs well with the Back to top component.** The [Back to top component]({{ site.baseurl }}/components/back-to-top) helps users quickly navigate back to the top of long pages of content.
+- **The content on the page must have a minimum of two H2 section titles to use the On this Page jump links.**
+- **On this Page jump links component pairs well with the Back to top component.** The [Back to top component]({{ site.baseurl }}/components/back-to-top) helps users quickly navigate back to the top of long pages of content.
{% include component-docs.html component_name=page.web-component %}
## Accessibility considerations
- **Heading levels should increase only by one.** The proper order of heading levels conveys the structure of the page for screen reader users and provides a natural hierarchy for your content. When heading elements are applied correctly, the page becomes much easier for both screen reader and sighted users to navigate.
-- **The focus should be on the destination.** When a user clicks on an item on the On this page component, the focus should move to the heading that it links to.
+- **The focus should be on the destination.** When a user clicks on an item on the On this Page component, the focus should move to the heading that it links to.
- **Allow enough spacing between components.** Space should be 1.5 rem (36px) from the bottom of the descender to the top of the ascender.
-- **On this page jump links should be contained in a navigation landmark** so it can be easily discovered by screen reader users.
+- **On this Page jump links should be contained in a navigation landmark** so it can be easily discovered by screen reader users.
diff --git a/src/_components/pagination.md b/src/_components/pagination.md
index e9a1705c6..59d0e54e5 100644
--- a/src/_components/pagination.md
+++ b/src/_components/pagination.md
@@ -80,4 +80,4 @@ For more details on implementing search results with pagination, including place
type="secondary"
>
-{% include _component-checklist.html component_name=page.web-component %}
\ No newline at end of file
+{% include _component-checklist.html component_name=page.web-component %}
diff --git a/src/_components/process-list.md b/src/_components/process-list.md
index 270224f1b..54771b2a6 100644
--- a/src/_components/process-list.md
+++ b/src/_components/process-list.md
@@ -1,7 +1,7 @@
---
layout: component
-title: "Process list"
-intro-text: "The process list, also known as the subway map, is used in a static informational context to describe the process to apply for a benefit or to provide tracking information to a user where they are in a given process."
+title: "Process List"
+intro-text: "The Process List, also known as the subway map, is used in a static informational context to describe the process to apply for a benefit or to provide tracking information to a user where they are in a given process."
figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=35%3A169&mode=design&t=J32RmU6Fjbjuh9bD-1
web-component: va-process-list
web: true
@@ -43,7 +43,7 @@ anchors:
### Additional guidance for VA
-#### Additional uses of a process list
+#### Additional uses of a Process List
* **For multi-step processes.** In a multi-step process where the user may need to track progress over an extended period.
@@ -53,18 +53,18 @@ anchors:
### How this component works
-* **Be thoughtful about the number of steps.** A process list should include between three and ten steps to prevent it from getting too unwieldy or confusing.
+* **Be thoughtful about the number of steps.** A Process List should include between three and ten steps to prevent it from getting too unwieldy or confusing.
* **Do not stack.** Only one instance of this component should appear on a page.
* **Do not mash up this component with other components.** The functionality of this component should not be combined with the functionality for other components. For example, using an Accordion to act as the header for a step in the process would be inappropriate usage. Content should be edited to fit the step, provide key information, and be visible by default. Use of the [Details]({{ site.baseurl }}/components/details) component to condense content within a step is permissible.
* **Each step must have visible content.** Each step should have both a heading and content that helps describe the step in more detail. Do not collapse or hide all content within a step. An explanation of the step is minimally required.
### Placement
-The Process list appears after a start form link on the form [Introduction page]({{ site.baseurl }}/templates/forms/introduction#process-list). Additional calls-to-action to start the application or process that the process list describes can be found within (in the case of apply) and below the list.
+The Process List appears after a start form link on the form [Introduction page]({{ site.baseurl }}/templates/forms/introduction#process-list). Additional calls-to-action to start the application or process that the Process List describes can be found within (in the case of apply) and below the list.
### Instances of this component in production
-{% include component-example.html alt="An example of the process list component on an Education benefits application." file="/images/components/process-list/VEAP-benefits-2024.png" caption="The VEAP benefits application form uses a process list on the introduction page." width="50%" %}
+{% include component-example.html alt="An example of the Process List component on an Education benefits application." file="/images/components/process-list/VEAP-benefits-2024.png" caption="The VEAP benefits application form uses a Process List on the introduction page." width="50%" %}
{% include component-docs.html component_name=page.web-component %}
@@ -72,8 +72,8 @@ The Process list appears after a start form link on the form [Introduction page]
* **List headings should start with a verb.** Examples include "Prepare", "Apply", "Review", etc.
* **Make headings clear and concise.** You can always write more content in paragraphs and other HTML elements below the heading.
-* **Make process step content clear and concise.** Process list should not be a container for many other components and text. Use plain language and briefly explain the step in the process.
-* **Status eyebrow should match context.** When using the optional status eyebrow, make sure the status matches the context of the process list. The provided statuses are pending, active, complete.
+* **Make process step content clear and concise.** Process List should not be a container for many other components and text. Use plain language and briefly explain the step in the process.
+* **Status eyebrow should match context.** When using the optional status eyebrow, make sure the status matches the context of the Process List. The provided statuses are pending, active, complete.
## Accessibility considerations
@@ -86,6 +86,6 @@ The Process list appears after a start form link on the form [Introduction page]
### Additional accessibility considerations for VA
* **Don't use headings alone.** Each step should have both a heading and content that helps describe the step in more detail.
-* **Use eyebrow status for update.** When using a process list that has a status update the eyebrow feature is required for accessibility.
+* **Use eyebrow status for update.** When using a Process List that has a status update the eyebrow feature is required for accessibility.
{% include _component-checklist.html component_name=page.web-component %}
diff --git a/src/_components/progress-bar-activity.md b/src/_components/progress-bar-activity.md
index cab6d3cbf..d4c03b0c2 100644
--- a/src/_components/progress-bar-activity.md
+++ b/src/_components/progress-bar-activity.md
@@ -1,7 +1,7 @@
---
layout: component
permalink: /components/progress-bar/
-title: "Progress bar - Activity"
+title: "Progress Bar - Activity"
intro-text: "A progress bar provides status as the system is taking an action on behalf of the user."
research-title: Progress bars
figma-link-web: https://www.figma.com/design/afurtw4iqQe6y4gXfNfkkk/VADS-Component-Library?node-id=199-1236
@@ -51,5 +51,5 @@ anchors:
## Related
-* [Progress bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented)
-* [Loading indicator]({{ site.baseurl }}/components/loading-indicator)
\ No newline at end of file
+* [Progress Bar - Segmented]({{ site.baseurl }}/components/form/progress-bar-segmented)
+* [Loading indicator]({{ site.baseurl }}/components/loading-indicator)
diff --git a/src/_components/search-filter.md b/src/_components/search-filter.md
index cbe53b4d8..ee7601d40 100644
--- a/src/_components/search-filter.md
+++ b/src/_components/search-filter.md
@@ -10,6 +10,7 @@ anchors:
- anchor: Examples
- anchor: Usage
- anchor: Behavior
+ - anchor: Accessibility considerations
- anchor: Code usage
- anchor: Component checklist
---
@@ -52,10 +53,11 @@ Faceted search is a way to filter search results by using attributes, or facets,
* **Desktop viewport widths:** Place the Search Filter component in the left-side rail, below a full-width Search Input component.
* **Refer to the search results template.** Check out the [search results template]({{ site.baseurl }}/templates/search-results) examples for precise placement.
+{% include component-docs.html component_name=page.web-component %}
+
## Accessibility considerations
{% include a11y/search-filters.md %}
-{% include component-docs.html component_name=page.web-component %}
{% include _component-checklist.html component_name=page.web-component %}
diff --git a/src/_components/snackbar.md b/src/_components/snackbar.md
index 9b4c0d881..feffc1765 100644
--- a/src/_components/snackbar.md
+++ b/src/_components/snackbar.md
@@ -55,7 +55,7 @@ anchors:
* "Undo" snackbar appears in Messages when moving a message to a folder.
* "Try again" snackbar appears in Messages when a draft is not saved successfully.
-{% include component-docs.html component_name=page.web-component %}
+{% include component-docs.html component_name="va-snackbar" %}
## Content considerations
diff --git a/src/_components/summary-box.md b/src/_components/summary-box.md
index 0fbe5e074..2b1560461 100644
--- a/src/_components/summary-box.md
+++ b/src/_components/summary-box.md
@@ -3,9 +3,9 @@ layout: component
permalink: /components/summary-box
redirect_from:
- /components/featured-content
-title: "Summary box"
+title: "Summary Box"
aka: Featured content
-intro-text: "The summary box component helps Veterans quickly identify must-read information on a page. Use this component to highlight a small chunk of the most important information on a page, like eligibility criteria or coverage under a particular VA benefit."
+intro-text: "The Summary Box component helps Veterans quickly identify must-read information on a page. Use this component to highlight a small chunk of the most important information on a page, like eligibility criteria or coverage under a particular VA benefit."
figma-link-web: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Component-Example-Library?type=design&node-id=1192%3A4460&mode=design&t=vNilCSI60pQBiKkM-1
anchors:
- anchor: Examples
@@ -35,7 +35,7 @@ mobile-app: false
### Additional guidance for VA
-### When to use summary box
+### When to use Summary Box
* **Highlight the most important information.** The Summary box component is for calling out key details that readers shouldn’t miss. It was originally intended to hold eligibility data exclusively. The content should be "evergreen", not time sensitive.
@@ -64,7 +64,7 @@ Summary box is found towards the top of the page after the h1 title of the page
#### Eligibility
-{% include component-example.html alt="An example of an eligibility summary box block in the Health care eligibility page." file="/images/components/summary-box/eligibility.png" caption="The summary box block is mainly intended for use in highlighting eligibility on VA.gov." width="75%" %}
+{% include component-example.html alt="An example of an eligibility Summary Box block in the Health care eligibility page." file="/images/components/summary-box/eligibility.png" caption="The Summary Box block is mainly intended for use in highlighting eligibility on VA.gov." width="75%" %}
{% capture example_like_this_1 %}
{% include component-example.html alt="Example of the Link, Collection, Related links component to show a list of links." file="/images/components/link/collection-major.png" caption="Use the Major links variation of the Link - Collection component for a collection of links." %}
@@ -86,9 +86,7 @@ Summary box is found towards the top of the page after the h1 title of the page
{% include _like-this-not-this.html like_this=example_like_this_2 not_this=example_not_this_2 %}
-## Code usage
-
-Code for this component is shown in Storybook. Follow the link provided in [examples](#examples).
+{% include component-docs.html component_name=page.web-component %}
## Content considerations
diff --git a/src/_components/tag/index.md b/src/_components/tag/index.md
index fe625668b..ca4103d69 100644
--- a/src/_components/tag/index.md
+++ b/src/_components/tag/index.md
@@ -50,9 +50,8 @@ Used to draw attention to new or important content, categorize information, or i
* **Tags shouldn't be interactive.** Tags are designed to be static labels that convey information, not clickable elements. They shouldn't have hover, focus, or active states that suggest interactivity.
* **Don't overdo it.** If everything on a page is called out as important, nothing is important.
-## Code usage
+{% include component-docs.html component_name=page.web-component %}
-Refer to the [Tag component in Storybook]({{ site.baseurl }}/storybook/?path=/docs/components-tag--docs) for detailed code usage documentation.
## Accessibility considerations
diff --git a/src/_components/telephone.md b/src/_components/telephone.md
index 5f9c21556..4fbe620a0 100644
--- a/src/_components/telephone.md
+++ b/src/_components/telephone.md
@@ -91,4 +91,4 @@ mobile-app: true
## Accessibility considerations
-* Teams should not add aria labels on phone numbers or TTY. If you have questions, contact the Accessibility Design Experience (ADE) Team.
\ No newline at end of file
+* Teams should not add aria labels on phone numbers or TTY. If you have questions, contact the Accessibility Design Experience (ADE) Team.
diff --git a/src/_components/template.md b/src/_components/template.md
index c6fd37bb1..388ff3c77 100644
--- a/src/_components/template.md
+++ b/src/_components/template.md
@@ -109,4 +109,4 @@ This is the Code Usage section. Note that the header is inside this include.
* Links to related components.
This is the Component checklist section. Note that the header is inside this include.
-
\ No newline at end of file
+
diff --git a/src/_components/text.md b/src/_components/text.md
index 0b1374041..575ec3613 100644
--- a/src/_components/text.md
+++ b/src/_components/text.md
@@ -54,4 +54,4 @@ There are 9 variations of the Text component.
* Use a Body variation (large, medium, small, x-small) for body copy.
* Use the Display variation for larger display text.
-{% include component-docs.html component_name=page.web-component %}
+{% include component-docs.html component_name="va-text" %}
diff --git a/src/_includes/component-docs.html b/src/_includes/component-docs.html
index 43714d577..4b1f98c8f 100644
--- a/src/_includes/component-docs.html
+++ b/src/_includes/component-docs.html
@@ -8,9 +8,11 @@
{% endfor %}
{% comment %} Check if we have mobile app component data {% endcomment %}
+{% comment %} Support optional mobile_component_name parameter for cases where mobile uses different naming {% endcomment %}
+{% assign mobile_lookup_name = include.mobile_component_name | default: include.component_name %}
{% assign has_mobile_component = false %}
{% for mobile_app_component in site.data.mobile-app-component-docs-source.components %}
- {% if mobile_app_component.tag == include.component_name %}
+ {% if mobile_app_component.tag == mobile_lookup_name %}
{% assign has_mobile_component = true %}
{% break %}
{% endif %}
@@ -21,257 +23,69 @@
Code usage
-{% comment %} Check if we have both web and mobile app to determine if we need tabs {% endcomment %}
-{% assign has_web = false %}
-{% assign has_mobile = false %}
+{% comment %}
+ Generate Storybook documentation paths:
+ - Web components: components-{component-tag}--docs
+ - Mobile components: va-mobile_{component-name-without-va-prefix-with-underscores}--docs
+
+ Note: Some USWDS components may use uswds- prefix instead of components-.
+ If the generated link doesn't work, you may need to manually specify the correct path.
+{% endcomment %}
{% if has_web_component and page.web == true %}
+ {% comment %} Generate web component Storybook path and extract plain language name {% endcomment %}
+ {% comment %} Use actual mappings extracted from existing storybook-preview includes {% endcomment %}
+
+ {% assign uswds_components = "va-accordion,va-additional-info,va-alert,va-breadcrumbs,va-button,va-button-pair,va-checkbox,va-checkbox-group,va-combo-box,va-file-input,va-memorable-date,va-modal,va-pagination,va-privacy-agreement,va-process-list,va-radio,va-search-input,va-segmented-progress-bar,va-select,va-statement-of-truth,va-summary-box,va-table,va-text-input,va-textarea" | split: "," %}
+ {% assign no_prefix_components = "va-button-segmented" | split: "," %}
+
+ {% if no_prefix_components contains include.component_name %}
+ {% assign web_storybook_path = include.component_name | append: "--docs" %}
+ {% elsif uswds_components contains include.component_name %}
+ {% assign web_storybook_path = "uswds-" | append: include.component_name | append: "--docs" %}
+ {% else %}
+ {% assign web_storybook_path = "components-" | append: include.component_name | append: "--docs" %}
+ {% endif %}
+
+ {% assign web_component_name = include.component_name %}
+
+ {% comment %} Extract componentName from docsTags for plain language display name {% endcomment %}
{% for component in site.data.component-docs.components %}
{% if component.tag == include.component_name %}
- {% if component.props != empty or component.events != empty %}
- {% assign has_web = true %}
- {% endif %}
- {% break %}
- {% endif %}
- {% endfor %}
-{% endif %}
-
-{% if has_mobile_component and page.mobile-app == true %}
- {% for mobile_app_component in site.data.mobile-app-component-docs-source.components %}
- {% if mobile_app_component.tag == include.component_name %}
- {% if mobile_app_component.props != empty or mobile_app_component.events != empty %}
- {% assign has_mobile = true %}
- {% endif %}
- {% break %}
- {% endif %}
- {% endfor %}
-{% endif %}
-
-{% if has_web and has_mobile %}
- {% comment %} Use tabs when both platforms are supported {% endcomment %}
-
-
-
-
- Web
-
- {% for component in site.data.component-docs.components %}
- {% if component.tag == include.component_name %}
- {% if component.props != empty %}
-
-
Attributes and Properties
-
-
-
- Property
- Attribute
- Type
- Default
- Description
-
- {% for prop in component.props %}
-
- {{ prop.name }}
- {{ prop.attr }}
- {% if prop.type %}{{ prop.type }}{% endif %}
- {% if prop.default %}{{ prop.default }}{% endif %}
- {{ prop.docs | markdownify }}
-
- {% endfor %}
-
-
- {% endif %}
-
- {% if component.events != empty %}
-
-
Events
-
-
-
- Name
- Description
-
- {% for event in component.events %}
-
- {{ event.event }}
- {{ event.docs }}
-
- {% endfor %}
-
-
- {% endif %}
+ {% for tag in component.docsTags %}
+ {% if tag.name == "componentName" %}
+ {% assign web_component_name = tag.text %}
{% break %}
{% endif %}
{% endfor %}
-
-
-
-
- {% assign storybook_name = include.component_name | replace: 'va-', '' | replace: '-', '_' %}
-
- {% for mobile_app_component in site.data.mobile-app-component-docs-source.components %}
- {% if mobile_app_component.tag == include.component_name %}
-
- Mobile app
-
- {% if mobile_app_component.props != empty %}
-
-
Props
-
-
-
- Property
- Type
- Default
- Description
-
- {% for prop in mobile_app_component.props %}
-
- {{ prop.name }}
- {% if prop.type %}{{ prop.type }}{% endif %}
- {% if prop.default %}{{ prop.default }}{% endif %}
- {{ prop.docs | markdownify }}
-
- {% endfor %}
-
-
- {% endif %}
-
- {% if mobile_app_component.events != empty %}
-
-
Events
-
-
-
- Name
- Description
-
- {% for event in mobile_app_component.events %}
-
- {{ event.name }}
- {{ event.docs }}
-
- {% endfor %}
-
-
- {% endif %}
-
- {% break %}
+ {% break %}
{% endif %}
- {% endfor %}
-
-
-
-{% else %}
-{% comment %} Show individual sections when only one platform is supported {% endcomment %}
-{% if page.web == true and has_web == true %}
-Web
-{% for component in site.data.component-docs.components %}
-{% if component.tag == include.component_name %}
-{% if component.props != empty %}
-
-
Attributes and Properties
-
-
-
-Property
-Attribute
-Type
-Default
-Description
-
-{% for prop in component.props %}
-
-{{ prop.name }}
-{{ prop.attr }}
-{% if prop.type %}{{ prop.type }}{% endif %}
-{% if prop.default %}{{ prop.default }}{% endif %}
-{{ prop.docs | markdownify }}
-
-{% endfor %}
-
-
-{% endif %}
-
-{% if component.events != empty %}
-
-
Events
-
-
-Name
-Description
-
-{% for event in component.events %}
-
-{{ event.event }}
-{{ event.docs }}
-
-{% endfor %}
-
-
-{% endif %}
-{% break %}
-{% endif %}
-{% endfor %}
-{% endif %}
-{% endif %}
-
-{% comment %} Mobile App Component Documentation - only show if not using tabs {% endcomment %}
-{% if page.mobile-app == true and has_mobile == true %}
-{% unless has_web == true %}
-{% assign storybook_name = include.component_name | replace: 'va-', '' | replace: '-', '_' %}
-
-{% for mobile_app_component in site.data.mobile-app-component-docs-source.components %}
-{% if mobile_app_component.tag == include.component_name %}
-
-Mobile app
-
-{% if mobile_app_component.props != empty %}
-
-
Props
-
-
-
- Property
- Type
- Default
- Description
-
- {% for prop in mobile_app_component.props %}
-
- {{ prop.name }}
- {% if prop.type %}{{ prop.type }}{% endif %}
- {% if prop.default %}{{ prop.default }}{% endif %}
- {{ prop.docs | markdownify }}
-
- {% endfor %}
-
-
-{% endif %}
-
-{% if mobile_app_component.events != empty %}
-
-
Events
+ {% endfor %}
-
-
- Name
- Description
-
- {% for event in mobile_app_component.events %}
-
- {{ event.name }}
- {{ event.docs }}
-
- {% endfor %}
-
-
+
+
+
{% endif %}
- {% break %}
- {% endif %}
- {% endfor %}
- {% endunless %}
+{% if has_mobile_component and page.mobile-app == true %}
+ {% comment %} Generate mobile component Storybook path using mobile_lookup_name {% endcomment %}
+ {% assign mobile_component_name = mobile_lookup_name | replace: 'va-', '' | replace: '-', '_' %}
+ {% assign mobile_storybook_path = "va-mobile_" | append: mobile_component_name | append: "--docs" %}
+
+ {% comment %} Create readable name for mobile component {% endcomment %}
+ {% assign mobile_display_name = mobile_lookup_name | replace: 'va-', '' | replace: '-', ' ' | capitalize %}
+
+
+
+
{% endif %}
{% endif %}
