VAGOV-TEAM-100673: Removes navbar and replaces with subtitle. (#20268)

* VAGOV-TEAM-100673: Removes navbar and replaces with subtitle. * Replace `div` with `p` on subtitle.
department-of-veterans-affairs · Jan 13, 2025 · 88bdc2a · 88bdc2a
1 parent b2e3941
commit 88bdc2a
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 113 deletions.
diff --git a/docroot/modules/custom/va_gov_form_builder/css/va_gov_form_builder.css b/docroot/modules/custom/va_gov_form_builder/css/va_gov_form_builder.css
@@ -16,10 +16,6 @@
   font-size: var(--vads-font-size-heading-level-2);
 }
 
-.form-builder-page-container h2 {
-  font-size: var(--vads-font-size-heading-level-2);
-}
-
 .form-builder-page-container h3 {
   font-size: var(--vads-font-size-heading-level-3);
 }
@@ -53,43 +49,10 @@
   margin-bottom: var(--units-1p5);
 }
 
-/* navbar */
-.form-builder-navbar__nav {
-  display: flex;
-}
-
-.form-builder-navbar__tabs {
-  display: flex;
-  gap: var(--units-5);
-  list-style: none;
-  margin: 0;
-}
-
-.form-builder-navbar__tab {
-  min-width: 100px;
-  padding: var(--units-1);
-  position: relative;
-  text-align: center;
-}
-
-.form-builder-navbar__tab--active {
-  border-bottom: var(--units-0p5) solid var(--uswds-system-color-gold-vivid-20);
-}
-
-.form-builder-navbar__link {
-  color: var(--vads-color-white);
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-bold);
-  line-height: var(--vads-font-line-height-default);
-  text-decoration: none;
-}
-
-.form-builder-navbar__link:hover {
-  background: transparent;
-  color: var(--vads-color-white);
-}
-
-.form-builder-navbar__tab--active .form-builder-navbar__link,
-.form-builder-navbar__tab--active .form-builder-navbar__link:hover {
-  color: var(--uswds-system-color-gold-vivid-20);
+/* subtitle */
+.form-builder-subtitle {
+  font-size: var(--vads-font-size-heading-level-3);
+  font-weight: 700;
+  line-height: var(--units-3);
+  padding: var(--units-1p5);
 }
diff --git a/docroot/modules/custom/va_gov_form_builder/src/Controller/VaGovFormBuilderController.php b/docroot/modules/custom/va_gov_form_builder/src/Controller/VaGovFormBuilderController.php
@@ -32,11 +32,11 @@ class VaGovFormBuilderController extends ControllerBase {
   private $drupalFormBuilder;
 
   /**
-   * The active tab in the form builder.
+   * The page subtitle.
    *
-   * @var 'forms'|'content'|'layout'
+   * @var string
    */
-  private $activeTab;
+  private $subtitle;
 
   /**
    * {@inheritdoc}
@@ -65,7 +65,7 @@ private function getFormPage($formName, $nid = NULL) {
       'content' => $form,
       // Add custom data.
       'form_builder_page_data' => [
-        'active_tab' => $this->activeTab,
+        'subtitle' => $this->subtitle,
       ],
       // Add styles.
       '#attached' => [
@@ -87,23 +87,23 @@ public function entry() {
    * Intro page.
    */
   public function intro() {
-    $this->activeTab = 'forms';
+    $this->subtitle = 'Subtitle Placeholder';
     return $this->getFormPage('Intro');
   }
 
   /**
    * Start-conversion page.
    */
   public function startConversion() {
-    $this->activeTab = 'forms';
+    $this->subtitle = 'Subtitle Placeholder';
     return $this->getFormPage('StartConversion');
   }
 
   /**
    * Name-and-date-of-birth page.
    */
   public function nameAndDob($nid) {
-    $this->activeTab = 'content';
+    $this->subtitle = 'Subtitle Placeholder';
     return $this->getFormPage('NameAndDob', $nid);
   }
 

diff --git a/docroot/modules/custom/va_gov_form_builder/templates/page--va-gov-form-builder.html.twig b/docroot/modules/custom/va_gov_form_builder/templates/page--va-gov-form-builder.html.twig
@@ -15,44 +15,8 @@
 <div class="form-builder-page-container">
   <header class="form-builder-header">
     <div class="form-builder-layout-container">
-
-      <div class="form-builder-title">
-        <h1 class="form-builder-title__page-title">Form Builder</h1>
-      </div>
-
-      {% set active_tab = page.form_builder_page_data.active_tab %}
-      <div class="form-builder-navbar">
-        <nav class="form-builder-navbar__nav">
-          <ul class="form-builder-navbar__tabs">
-
-            <li class="form-builder-navbar__tab form-builder-navbar__tab--forms
-              {{
-                active_tab == 'forms' ? 'form-builder-navbar__tab--active'
-                : ''
-              }}"
-            >
-              <a href="#" class="form-builder-navbar__link">Forms</a>
-            </li>
-
-            <li class="form-builder-navbar__tab form-builder-navbar__tab--content
-              {{
-                active_tab == 'content' ? 'form-builder-navbar__tab--active'
-                : ''
-              }}">
-              <a href="#" class="form-builder-navbar__link">Content</a>
-            </li>
-
-            <li class="form-builder-navbar__tab form-builder-navbar__tab--layout
-              {{
-                active_tab == 'layout' ? 'form-builder-navbar__tab--active'
-                : ''
-              }}"
-            >
-              <a href="#" class="form-builder-navbar__link">Layout</a>
-            </li>
-          </ul>
-        </nav>
-      </div>
+      <h1 class="form-builder-title">Form Builder</h1>
+      <p class="form-builder-subtitle">{{ page.form_builder_page_data.subtitle }}</p>
     </div>
   </header>
 

diff --git a/tests/phpunit/va_gov_form_builder/functional/Form/IntroTest.php b/tests/phpunit/va_gov_form_builder/functional/Form/IntroTest.php
@@ -52,14 +52,6 @@ public function testFormDoesNotLoad() {
     $this->sharedTestFormDoesNotLoad($this->getFormPageUrl());
   }
 
-  /**
-   * Test that the active tab is correct.
-   */
-  public function testActiveTab() {
-    $activeTab = $this->getSession()->getPage()->find('css', '.form-builder-navbar__tab--active');
-    $this->assertTrue($activeTab->hasClass('form-builder-navbar__tab--forms'), 'The expected tab is active.');
-  }
-
   /**
    * Test the 'Start conversion' button.
    */

diff --git a/tests/phpunit/va_gov_form_builder/functional/Form/NameAndDobTest.php b/tests/phpunit/va_gov_form_builder/functional/Form/NameAndDobTest.php
@@ -78,14 +78,6 @@ public function testFormDoesNotLoad() {
     $this->sharedTestFormDoesNotLoad($this->getFormPageUrl());
   }
 
-  /**
-   * Test that the active tab is correct.
-   */
-  public function testActiveTab() {
-    $activeTab = $this->getSession()->getPage()->find('css', '.form-builder-navbar__tab--active');
-    $this->assertTrue($activeTab->hasClass('form-builder-navbar__tab--content'), 'The expected tab is active.');
-  }
-
   /**
    * Test that the form submission adds a chapter when not already present.
    */

diff --git a/tests/phpunit/va_gov_form_builder/functional/Form/StartConversionTest.php b/tests/phpunit/va_gov_form_builder/functional/Form/StartConversionTest.php
@@ -55,14 +55,6 @@ public function testFormDoesNotLoad() {
     $this->sharedTestFormDoesNotLoad($this->getFormPageUrl());
   }
 
-  /**
-   * Test that the active tab is correct.
-   */
-  public function testActiveTab() {
-    $activeTab = $this->getSession()->getPage()->find('css', '.form-builder-navbar__tab--active');
-    $this->assertTrue($activeTab->hasClass('form-builder-navbar__tab--forms'), 'The expected tab is active.');
-  }
-
   /**
    * Test that the form submission succeeds.
    *

diff --git a/tests/phpunit/va_gov_form_builder/functional/templates/FormBuilderPageTemplateTest.php b/tests/phpunit/va_gov_form_builder/functional/templates/FormBuilderPageTemplateTest.php
@@ -49,7 +49,7 @@ public function testExpectedElementsExist() {
     $containerElement = $this->cssSelect('.form-builder-page-container');
     $this->assertCount(1, $containerElement);
 
-    $navbarElement = $this->cssSelect('.form-builder-navbar');
+    $navbarElement = $this->cssSelect('.form-builder-subtitle');
     $this->assertCount(1, $navbarElement);
   }