From 0d010fc204607bcecf55161f838786ee5f1992a1 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 18 Nov 2021 08:53:56 -0500
Subject: [PATCH] Add headings and spacing to component test page.

---
 src/layouts/componentTest/componentTest.vue | 40 +++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
index 8f5316d14..e577eed59 100644
--- a/src/layouts/componentTest/componentTest.vue
+++ b/src/layouts/componentTest/componentTest.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="container-fluid container-shadow p-2 rounded-3">
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
+      </div>
+    </div>
     <div class="row g-2">
       <radioCard
       radioLabel="Windshield"
@@ -23,6 +28,11 @@
       radioID="backglass"
       />
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <buttonPrimary
@@ -37,6 +47,11 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <listButton
@@ -45,6 +60,11 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
+      </div>
+    </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
       <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
@@ -70,11 +90,21 @@
         />
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
+      </div>
+    </div>
     <div class="row">
       <div class="col my-3 d-flex align-items-center">
         <a href="#">Text Link</a>
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
+      </div>
+    </div>
     <div class="row my-2">
       <div class="col">
         <p>This is default body copy font size/weight</p>
@@ -82,6 +112,11 @@
         <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
+      </div>
+    </div>
     <div class="row my-2">
       <div class="col">
         <h1>h1 Heading</h1>
@@ -112,6 +147,11 @@
         <h6>h6 Heading</h6>
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
+      </div>
+    </div>
     <div class="row my-2">
       <div class="col">
         <alert