VAGOV-TEAM-97922: Adds sidebar placeholder to Form Builder pages.

department-of-veterans-affairs · Dec 22, 2024 · d9a6cfb · d9a6cfb
1 parent ab92cd4
commit d9a6cfb
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 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
@@ -1,5 +1,8 @@
 /* page container */
 .form-builder-page-container {
+  --vads-color-divider: #a9aeb1;
+  --color-shadow: #00000040;
+
   font-family: var(--font-family-serif);
 }
 
@@ -42,7 +45,7 @@
 
 /* layout container */
 .form-builder-layout-container {
-  margin: 0 var(--units-7);
+  margin: var(--units-2p5) var(--units-7);
 }
 
 /* title */
@@ -90,3 +93,23 @@
 .form-builder-navbar__tab--active .form-builder-navbar__link:hover {
   color: var(--uswds-system-color-gold-vivid-20);
 }
+
+/* two-column layout */
+.form-builder-two-column-layout {
+  display: flex;
+  gap: var(--units-5);
+  justify-content: space-between;
+  width: 100%;
+}
+
+.form-builder-right-column {
+  padding-top: var(--units-2);
+}
+
+/* sidebar */
+.form-builder-sidebar {
+  border: 1px solid var(--vads-color-divider);
+  box-shadow: 0 4px 4px 0 var(--color-shadow);
+  padding: var(--units-2p5);
+  width: 340px;
+}
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
@@ -57,12 +57,21 @@
   </header>
 
   <div class="form-builder-layout-container">
-    <main class="page-content clearfix" role="main">
-      <div class="visually-hidden"><a id="main-content" tabindex="-1"></a></div>
-
-      {# The form content #}
-      {{ page.content }}
-
-    </main>
+    <div class="form-builder-two-column-layout">
+      <div class="form-builder-left-column">
+        <main class="page-content clearfix" role="main">
+          <div class="visually-hidden">
+            <a id="main-content" tabindex="-1"></a>
+          </div>
+          {{ page.content }}
+        </main>
+      </div>
+      <div class="form-builder-right-column">
+        <aside class="form-builder-sidebar">
+          <p>Sidebar content goes here.</p>
+        </aside>
+      </div>
+    </div>
   </div>
+
 </div>
diff --git a/tests/phpunit/va_gov_form_builder/functional/templates/FormBuilderPageTemplateTest.php b/tests/phpunit/va_gov_form_builder/functional/templates/FormBuilderPageTemplateTest.php
@@ -51,6 +51,9 @@ public function testExpectedElementsExist() {
 
     $navbarElement = $this->cssSelect('.form-builder-navbar');
     $this->assertCount(1, $navbarElement);
+
+    $sidebarElement = $this->cssSelect('.form-builder-sidebar');
+    $this->assertCount(1, $sidebarElement);
   }
 
   /**