From 34e9a47a738d20308f666cd061f203a66c9fb7d5 Mon Sep 17 00:00:00 2001
From: Matthew Dingee <52176351+humancompanion-usds@users.noreply.github.com>
Date: Wed, 15 Jan 2025 17:47:16 -0500
Subject: [PATCH] Creates a path for mobile examples. [Amends #2391]

---
 _config.yml                          | 3 ++-
 src/_components/button/index.md      | 6 +++---
 src/_includes/storybook-preview.html | 8 ++++++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/_config.yml b/_config.yml
index 599b321a2..8afd0a713 100644
--- a/_config.yml
+++ b/_config.yml
@@ -91,5 +91,6 @@ exclude:
 
 # Default for building locally.
 # See configuration files in jekyll-configs/ for environment overrides.
-storybook_path: "http://127.0.0.1:6006"
+storybook_path: "http://localhost:6006"
 storybook_prod_uswds_path: "https://design.va.gov/storybook/?path=/docs/uswds"
+storybook_mobile_path: "https://department-of-veterans-affairs.github.io/va-mobile-library"
diff --git a/src/_components/button/index.md b/src/_components/button/index.md
index bb5adcbcb..bda6e8de4 100644
--- a/src/_components/button/index.md
+++ b/src/_components/button/index.md
@@ -54,15 +54,15 @@ anchors:
 
 #### Base - Primary
 
-{% include storybook-preview.html height="100px" story="va-mobile_button--base" link_text="va-mobile__button--base" %}
+{% include storybook-preview.html height="100px" story="button--base" base_path=site.storybook_mobile_path link_text="va-mobile__button--base" %}
 
 #### Base - Secondary
 
-{% include storybook-preview.html height="100px" story="va-mobile_button--base-secondary" link_text="va-mobile__button--base-secondary" %}
+{% include storybook-preview.html height="100px" story="button--base-secondary" base_path=site.storybook_mobile_path link_text="va-mobile__button--base-secondary" %}
 
 #### Destructive
 
-{% include storybook-preview.html height="100px" story="va-mobile_button--destructive" link_text="va-mobile__button--base-secondary" %}
+{% include storybook-preview.html height="100px" story="button--destructive" base_path=site.storybook_mobile_path  link_text="va-mobile__button--destructive" %}
 
 ## Usage
 
diff --git a/src/_includes/storybook-preview.html b/src/_includes/storybook-preview.html
index cbe2c6101..d43f85c7f 100644
--- a/src/_includes/storybook-preview.html
+++ b/src/_includes/storybook-preview.html
@@ -1,3 +1,7 @@
+{% assign storybook_path = site.storybook_path %}
+{% if include.base_path %}
+  {% assign storybook_path = include.base_path %}
+{% endif %}
 <div
   class="site-showcase"
   style="max-width: {{ include.width | default: '100%' }}"
@@ -5,8 +9,8 @@
   <iframe
     width="100%"
     height="{{ include.height }}"
-    src="{{ site.storybook_path }}/iframe.html?id={{ include.story }}&viewMode=story"
+    src="{{ storybook_path }}/iframe.html?id={{ include.story }}&amp;viewMode=story"
   ></iframe>
 </div>
 
-[{% 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]({{ site.storybook_path }}/?path=/docs/{{ include.story }})
+[{% 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 }})