VAGOV-TEAM-97909: Adds start of a theme to Form Builder.

- Declares a Form Builder library tied to a new css file. - Imports external VADS token css from UNPKG.
department-of-veterans-affairs · Dec 10, 2024 · afc8edb · afc8edb
1 parent d9c222d
commit afc8edb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 0 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
@@ -0,0 +1,4 @@
+/* page container */
+.va-gov-form-builder-page-container {
+  font-family: var(--font-family-serif);
+}
diff --git a/docroot/modules/custom/va_gov_form_builder/src/Form/Base/FormBuilderBase.php b/docroot/modules/custom/va_gov_form_builder/src/Form/Base/FormBuilderBase.php
@@ -14,8 +14,22 @@ abstract class FormBuilderBase extends FormBase {
    * {@inheritdoc}
    */
   public function buildForm(array $form, FormStateInterface $form_state) {
+    $form['#theme'] = 'va_gov_form_builder';
     $form['#title'] = $this->t('Form Builder');
 
+    // Add styles.
+    $form['#attached']['html_head'][] = [
+      [
+        '#tag' => 'link',
+        '#attributes' => [
+          'rel' => 'stylesheet',
+          'href' => 'https://unpkg.com/@department-of-veterans-affairs/css-library@0.16.0/dist/tokens/css/variables.css',
+        ],
+      ],
+      'external_stylesheet',
+    ];
+    $form['#attached']['library'][] = 'va_gov_form_builder/va_gov_form_builder_styles';
+
     return $form;
   }
 

diff --git a/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.libraries.yml b/docroot/modules/custom/va_gov_form_builder/va_gov_form_builder.libraries.yml
@@ -0,0 +1,5 @@
+va_gov_form_builder_styles:
+  version: 1.x
+  css:
+    theme:
+      css/va_gov_form_builder.css: {}
diff --git a/tests/phpunit/va_gov_form_builder/unit/Form/Base/FormBuilderBaseTest.php b/tests/phpunit/va_gov_form_builder/unit/Form/Base/FormBuilderBaseTest.php
@@ -45,8 +45,32 @@ public function testBuildForm() {
 
     $form = $this->classInstance->buildForm($form, $formStateMock);
 
+    // Title.
     $this->assertArrayHasKey('#title', $form);
     $this->assertEquals($form['#title'], 'Form Builder');
+
+    // CSS.
+    $this->assertArrayHasKey('#attached', $form);
+
+    // 1. Form Builder Library.
+    $this->assertArrayHasKey('html_head', $form['#attached']);
+    $this->assertNotEmpty($form['#attached']['html_head']);
+
+    $found = FALSE;
+    foreach ($form['#attached']['html_head'] as $html_head_item) {
+      if (
+        isset($html_head_item[0]['#attributes']['href']) &&
+        $html_head_item[0]['#attributes']['href'] === 'https://unpkg.com/@department-of-veterans-affairs/css-library@0.16.0/dist/tokens/css/variables.css'
+      ) {
+        $found = TRUE;
+        break;
+      }
+    }
+    $this->assertTrue($found, 'The html_head array contains a link with the unpkg token url.');
+
+    // 2. External CSS.
+    $this->assertArrayHasKey('library', $form['#attached']);
+    $this->assertContains('va_gov_form_builder/va_gov_form_builder_styles', $form['#attached']['library']);
   }
 
 }