Merge pull request #3533 from department-of-veterans-affairs/fix-minimal-header-guidance

Adds an example link and removes Code usage table which was broken on this page.

Author: humancompanion-usds

src/_components/header/minimal.md

@@ -6,12 +6,12 @@ has-parent: /components/header/
 contributors: Ben Brasso (Agile 6), Ya-ching Tsao (CivicActions), Zach Park (Agile 6), Kristen McConnell (Ad Hoc)
 intro-text: The minimal header can be used when navigating away would prevent the user from easily accomplishing their main task.
 figma-link: https://www.figma.com/file/JDFpGLIojfuQwANXScQjqe/VADS-Example-Library?type=design&node-id=988%3A1384&mode=design&t=jMcVWkPlFhZu3RTh-1
+example-link: https://staging.va.gov/mock-form-minimal-header/
 status: use-with-caution-candidate
 web-component: va-header-minimal
 anchors:
   - anchor: Examples
   - anchor: Usage
-  - anchor: Code usage
   - anchor: Content considerations
   - anchor: Component checklist
 ---
@@ -22,6 +22,10 @@ anchors:
 
 {% include storybook-preview.html story="components-va-header-minimal--default" link_text=page.web-component %}
 
+<a class="vads-c-action-link--blue" href="{{ page.example-link }}">
+  View an example
+</a>
+
 ### With Subheader
 
 {% include storybook-preview.html story="components-va-header-minimal--with-subheader" link_text="View va-header-minimal with subheader variation" %}
@@ -46,8 +50,6 @@ anchors:
 
 * **At the top of the page.** The minimal header appears at the top of the page.
 
-{% include component-docs.html component_name=page.web-component %}
-
 ## Content considerations
 
 * For form titles:

src/_includes/component-docs.html

@@ -1,8 +1,8 @@
-{% for component in site.data.component-docs.components %} {% if component.tag
-  == include.component_name %}
-{% if component.props != empty or component.events != empty %}
+{% for component in site.data.component-docs.components %} 
+  {% if component.tag == include.component_name %}
+    {% if component.props != empty or component.events != empty %}
 <h2 id="code-usage">Code usage</h2>
-{% if component.props != empty %}
+      {% if component.props != empty %}
 <h3>Attributes and Properties</h3>
 <table>
   <tr>
@@ -13,40 +13,43 @@ <h3>Attributes and Properties</h3>
     <th><strong>Description</strong></th>
   </tr>
   <div>
-    {% for prop in component.props %}
+        {% for prop in component.props %}
     <tr>
       <th><code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ prop.name }}</code></th>
       <th><code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ prop.attr }}</code></th>
       <th>{% if prop.type %}<code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ prop.type }}</code>{% endif %}</th>
       <th>{% if prop.default %}<code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ prop.default }}</code>{% endif %}</th>
       <th>{{ prop.docs }}</th>
     </tr>
-    {% endfor %}
+        {% endfor %}
   </div>
 </table>
-{% endif %}
+      {% endif %}
 
-{% if component.events != empty %}
+      {% if component.events != empty %}
 <h3>Events</h3>
 <table>
   <tr>
     <th><strong>Name</strong></th>
     <th><strong>Description</strong></th>
   </tr>
   <div>
-    {% for event in component.events %}
+        {% for event in component.events %}
     <tr>
       <th><code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ event.event }}</code></th>
       <th>{{ event.docs }}</th>
     </tr>
-    {% endfor %} {% for listener in component.listeners %} {% assign docs =
-    component.docsTags | where: "name", listener.event %}
+        {% endfor %} 
+        {% for listener in component.listeners %} 
+          {% assign docs = component.docsTags | where: "name", listener.event %}
     <tr>
       <th><code class="code vads-u-border--1px vads-u-border-color--gray-light">{{ listener.event }}</code></th>
       <th>{% for doc in docs %} {{ doc.text }} {% endfor %}</th>
     </tr>
-    {% endfor %}
+        {% endfor %}
   </div>
 </table>
-{% endif %}
-{% endif %} {% endif %} {% endfor %}
+      {% endif %}
+    {% endif %} 
+  {% endif %} 
+{% endfor %}