Add VA Design System Storybook link for mobile components #3810
Conversation
| @@ -54,15 +54,15 @@ anchors: | |||
|
|
|||
| #### Base - Primary | |||
|
|
|||
| {% include storybook-preview.html height="100px" story="button--base" base_path=site.storybook_mobile_path link_text="va-mobile__button--base" %} | |||
| {% include storybook-preview.html height="100px" story="button--base" link_text="va-mobile__button--base" is_mobile=true %} | |||
There was a problem hiding this comment.
When a component is flagged as is_mobile=true like this, iframe preview and Storybook documentation links will automatically adjust depending on the component type in the storybook-preview.html file. In both cases, the Storybook link will bring the user to the design.va.gov Storybook instance.
| {% endif %} | ||
| {% if include.is_mobile %}{% assign storybook_path = site.storybook_mobile_path %}{% endif %} | ||
| {% assign storybook_iframe_path = storybook_path | append: '/iframe.html?id=' | append: include.story | append: '&viewMode=story' %} | ||
|
|
There was a problem hiding this comment.
The main difference here between the web and mobile component iframe preview is the base link which will be from either https://department-of-veterans-affairs.github.io/va-mobile-library/ or https://design.va.gov.
These root URLs are not clickable or displayed visually in the documentation. They are only used to load the component in the iframe.
There was a problem hiding this comment.
Hmm. We eventually want https://department-of-veterans-affairs.github.io/va-mobile-library/ to go away and be rolled into design.va.gov. What do we need to do to not be dependent on the deployed github mobile "design system"?
There was a problem hiding this comment.
What do we need to do to not be dependent on the deployed github mobile "design system"?
@humancompanion-usds I am working on a discovery for that now! :) I see this approach as a bridge until a full integration can be done. There are a few different ways we can do it that look promising.
| [{% if include.link_text %}<img aria-hidden="true" role="img" src="{{ site.baseurl }}/images/storybook.svg" class="site-component-resources-links__icon" width="16px" alt="Storybook logo">View {{ include.link_text}}{% else %}See this{% endif %} in Storybook]({{ storybook_path }}/?path=/docs/{{ include.story }}) | ||
| {% assign story_name_prefix = '' %} | ||
| {% if include.is_mobile %}{% assign story_name_prefix = 'va-mobile_' %}{% endif %} | ||
| {% assign storybook_preview_path = site.storybook_path | append: '/?path=/story/' | append: story_name_prefix | append: include.story %} |
There was a problem hiding this comment.
The condition here is to add the va-mobile_ prefix to the story name so that we can navigate to the design.va.gov Storybook documentation page for mobile components.
For both web and mobile components, all of the documentation Storybook links will point to the design.va.gov Storybook with this update (instead of the mobile Storybook instance).
Preview link: https://dev-design.va.gov/3810/components/button/
Navigates to: https://design.va.gov/storybook/?path=/story/uswds-va-button--primary
Navigates to: https://design.va.gov/storybook/?path=/story/va-mobile_button--base
related issue: #3716