VAGOV-TEAM-103554: View-form page

docroot/modules/custom/va_gov_form_builder/css/single-column-with-buttons.css

@@ -0,0 +1,3 @@
+.form-builder-single-column-with-buttons__main-content > p {
+  margin-bottom: var(--units-3);
+}

docroot/modules/custom/va_gov_form_builder/src/Controller/VaGovFormBuilderController.php

@@ -26,6 +26,11 @@
  */
 class VaGovFormBuilderController extends ControllerBase {
 
+  /**
+   * The Form Builder's image directory.
+   */
+  const IMAGE_DIR = '/modules/custom/va_gov_form_builder/images/';
+
   /**
    * The prefix for the page-content theme definitions.
    */
@@ -34,7 +39,7 @@ class VaGovFormBuilderController extends ControllerBase {
   /**
    * The prefix for the page-specific style libraries.
    */
-  const LIBRARY_PREFIX = 'va_gov_form_builder/va_gov_form_builder_styles__';
+  const LIBRARY_PREFIX = 'va_gov_form_builder/';
 
   /**
    * The entity type manager service.
@@ -210,7 +215,7 @@ protected function getPage($pageContent, $subtitle, $breadcrumbs = [], $librarie
       // Add styles.
       '#attached' => [
         'library' => [
-          'va_gov_form_builder/va_gov_form_builder_styles',
+          self::LIBRARY_PREFIX . 'form_builder',
         ],
       ],
     ];
@@ -365,7 +370,7 @@ public function layout($nid) {
         'url' => '',
       ],
       '#view_form' => [
-        'url' => '',
+        'url' => $this->getPageUrl('view_form'),
       ],
     ];
     $subtitle = $this->digitalForm->getTitle();
@@ -391,20 +396,28 @@ public function nameAndDob($nid) {
       '#theme' => self::PAGE_CONTENT_THEME_PREFIX . 'name_and_dob',
       '#preview' => [
         'alt_text' => 'Name-and-date-of-birth preview',
-        'url' => '/modules/custom/va_gov_form_builder/images/name-and-dob.png',
+        'url' => self::IMAGE_DIR . 'name-and-dob.png',
       ],
-      '#primary_button' => [
-        'label' => 'Save and continue',
-        'url' => $this->getPageUrl('layout'),
-      ],
-      '#secondary_button' => [
-        'label' => 'Next page',
-        'url' => $this->getPageUrl('identification_info'),
+      '#buttons' => [
+        'primary' => [
+          'label' => 'Save and continue',
+          'url' => $this->getPageUrl('layout'),
+        ],
+        'secondary' => [
+          [
+            'label' => 'Next page',
+            'url' => $this->getPageUrl('identification_info'),
+          ],
+        ],
       ],
     ];
+
     $subtitle = $this->digitalForm->getTitle();
     $breadcrumbs = $this->generateBreadcrumbs('layout', 'Personal information');
-    $libraries = ['page_content__layout__non_editable_pattern'];
+    $libraries = [
+      'single_column_with_buttons',
+      'non_editable_pattern',
+    ];
 
     return $this->getPage($pageContent, $subtitle, $breadcrumbs, $libraries);
   }
@@ -425,20 +438,28 @@ public function identificationInfo($nid) {
       '#theme' => self::PAGE_CONTENT_THEME_PREFIX . 'identification_info',
       '#preview' => [
         'alt_text' => 'Identification-information preview',
-        'url' => '/modules/custom/va_gov_form_builder/images/identification-info.png',
+        'url' => self::IMAGE_DIR . 'identification-info.png',
       ],
-      '#primary_button' => [
-        'label' => 'Save and continue',
-        'url' => $this->getPageUrl('layout'),
-      ],
-      '#secondary_button' => [
-        'label' => 'Previous page',
-        'url' => $this->getPageUrl('name_and_dob'),
+      '#buttons' => [
+        'primary' => [
+          'label' => 'Save and continue',
+          'url' => $this->getPageUrl('layout'),
+        ],
+        'secondary' => [
+          [
+            'label' => 'Previous page',
+            'url' => $this->getPageUrl('name_and_dob'),
+          ],
+        ],
       ],
     ];
+
     $subtitle = $this->digitalForm->getTitle();
     $breadcrumbs = $this->generateBreadcrumbs('layout', 'Personal information');
-    $libraries = ['page_content__layout__non_editable_pattern'];
+    $libraries = [
+      'single_column_with_buttons',
+      'non_editable_pattern',
+    ];
 
     return $this->getPage($pageContent, $subtitle, $breadcrumbs, $libraries);
   }
@@ -459,16 +480,21 @@ public function addressInfo($nid) {
       '#theme' => self::PAGE_CONTENT_THEME_PREFIX . 'address_info',
       '#preview' => [
         'alt_text' => 'Address-information preview',
-        'url' => '/modules/custom/va_gov_form_builder/images/address-info.png',
+        'url' => self::IMAGE_DIR . 'address-info.png',
       ],
-      '#primary_button' => [
-        'label' => 'Save and continue',
-        'url' => $this->getPageUrl('layout'),
+      '#buttons' => [
+        'primary' => [
+          'label' => 'Save and continue',
+          'url' => $this->getPageUrl('layout'),
+        ],
       ],
     ];
     $subtitle = $this->digitalForm->getTitle();
     $breadcrumbs = $this->generateBreadcrumbs('layout', 'Address information');
-    $libraries = ['page_content__layout__non_editable_pattern'];
+    $libraries = [
+      'single_column_with_buttons',
+      'non_editable_pattern',
+    ];
 
     return $this->getPage($pageContent, $subtitle, $breadcrumbs, $libraries);
   }
@@ -488,17 +514,22 @@ public function contactInfo($nid) {
     $pageContent = [
       '#theme' => self::PAGE_CONTENT_THEME_PREFIX . 'contact_info',
       '#preview' => [
-        'alt_text' => 'Phone-and-email-address preview',
-        'url' => '/modules/custom/va_gov_form_builder/images/phone-and-email.png',
+        'alt_text' => 'Contact-information preview',
+        'url' => self::IMAGE_DIR . 'contact-info.png',
       ],
-      '#primary_button' => [
-        'label' => 'Save and continue',
-        'url' => $this->getPageUrl('layout'),
+      '#buttons' => [
+        'primary' => [
+          'label' => 'Save and continue',
+          'url' => $this->getPageUrl('layout'),
+        ],
       ],
     ];
     $subtitle = $this->digitalForm->getTitle();
     $breadcrumbs = $this->generateBreadcrumbs('layout', 'Contact information');
-    $libraries = ['page_content__layout__non_editable_pattern'];
+    $libraries = [
+      'single_column_with_buttons',
+      'non_editable_pattern',
+    ];
 
     return $this->getPage($pageContent, $subtitle, $breadcrumbs, $libraries);
   }
@@ -521,14 +552,74 @@ public function reviewAndSign($nid) {
         'alt_text' => 'Statement-of-truth preview',
         'url' => '/modules/custom/va_gov_form_builder/images/statement-of-truth.png',
       ],
-      '#primary_button' => [
-        'label' => 'Save and continue',
-        'url' => $this->getPageUrl('layout'),
+      '#buttons' => [
+        'primary' => [
+          'label' => 'Save and continue',
+          'url' => $this->getPageUrl('layout'),
+        ],
       ],
     ];
     $subtitle = $this->digitalForm->getTitle();
     $breadcrumbs = $this->generateBreadcrumbs('layout', 'Review page');
-    $libraries = ['page_content__layout__non_editable_pattern'];
+    $libraries = [
+      'single_column_with_buttons',
+      'non_editable_pattern',
+    ];
+
+    return $this->getPage($pageContent, $subtitle, $breadcrumbs, $libraries);
+  }
+
+  /**
+   * View-form page.
+   *
+   * @param string $nid
+   *   The node id of the Digital Form.
+   */
+  public function viewForm($nid) {
+    $nodeFound = $this->loadDigitalForm($nid);
+    if (!$nodeFound) {
+      throw new NotFoundHttpException();
+    }
+
+    // Note: We do not yet have the a field on the Digital Form
+    // node to store the form's staging url. Once we have that,
+    // this will be updated with logic to set `$isFormViewable`
+    // based on whether that field is populated. For now, the check
+    // for the form's title provides a mechanism to test both
+    // the available and unavailable contexts by changing between
+    // forms in Form Builder.
+    $isFormViewable = $this->digitalForm->getTitle() === 'Form 1';
+    $viewFormStatus = $isFormViewable ? 'available' : 'unavailable';
+
+    $buttons = $isFormViewable ? [
+      'primary' => [
+        'label' => 'Launch view',
+        // Temporary. Send somewhere other than layout page for now.
+        'url' => $this->getPageUrl('home'),
+      ],
+      'secondary' => [
+        [
+          'label' => 'Return',
+          'url' => $this->getPageUrl('layout'),
+        ],
+      ],
+    ] : [
+      'primary' => [
+        'label' => 'Return',
+        'url' => $this->getPageUrl('layout'),
+      ],
+    ];
+
+    $breadcrumbLabel = $isFormViewable ? 'View form' : 'Form not ready';
+
+    $pageContent = [
+      '#theme' => self::PAGE_CONTENT_THEME_PREFIX . 'view_form__' . $viewFormStatus,
+      '#buttons' => $buttons,
+    ];
+
+    $subtitle = $this->digitalForm->getTitle();
+    $breadcrumbs = $this->generateBreadcrumbs('layout', $breadcrumbLabel);
+    $libraries = ['single_column_with_buttons'];
 
     return $this->getPage($pageContent, $subtitle, $breadcrumbs, $libraries);
   }

docroot/modules/custom/va_gov_form_builder/templates/page-content/address-info.html.twig

@@ -0,0 +1,5 @@
+{% extends '@va_gov_form_builder/page-content/base/non-editable-pattern.html.twig' %}
+
+{% set page_id = 'address-info' %}
+{% set page_heading = 'Collecting address information' %}
+{% set step_label = 'Address information' %}

docroot/modules/custom/va_gov_form_builder/templates/page-content/layout/non-editable-pattern.html.twig → docroot/modules/custom/va_gov_form_builder/templates/page-content/base/non-editable-pattern.html.twig

@@ -1,6 +1,6 @@
-<div id="form-builder-content-{{ page_id }}" class="form-builder-content form-builder-single-column-content form-builder-page-content form-builder-content--non-editable-pattern">
-  <h2>{{ page_heading }}</h2>
+{% extends '@va_gov_form_builder/page-content/base/single-column-with-buttons.html.twig' %}
 
+{% block main_content %}
   {% include '@va_gov_form_builder/components/banner--non-editable-pattern.html.twig' with {
     heading_level: 3,
   } %}
@@ -18,7 +18,7 @@
 
     {% if block('step_description') is not empty %}
       <div class="form-builder-non-editable-pattern__step_description">
-        {% block step_description%}{% endblock %}
+        {% block step_description %}{% endblock %}
       </div>
     {% endif %}
 
@@ -27,29 +27,5 @@
       <p class="form-builder-hint-text">No edits are possible for this item</p>
       <img src="{{ preview.url }}" alt="{{ preview.alt_text }}">
     </section>
-
-    <section class="form-builder-button-group">
-      {% if secondary_button is defined %}
-        <a
-          id="form-builder-non-editable-pattern-secondary-button"
-          href="{{ secondary_button.url }}"
-          role="button"
-          class="form-builder-button form-builder-button--secondary"
-        >
-          {{ secondary_button.label }}
-        </a>
-      {% endif %}
-      {% if primary_button is defined %}
-        <a
-          id="form-builder-non-editable-pattern-primary-button"
-          href="{{ primary_button.url }}"
-          role="button"
-          class="form-builder-button form-builder-button--primary"
-        >
-          {{ primary_button.label }}
-        </a>
-      {% endif %}
-    </section>
   </section>
-
-</div>
+{% endblock %}

docroot/modules/custom/va_gov_form_builder/templates/page-content/base/single-column-with-buttons.html.twig

@@ -0,0 +1,34 @@
+<div id="form-builder-content-{{ page_id }}" class="form-builder-content form-builder-single-column-content form-builder-page-content form-builder-content--single-column-with-buttons">
+  <h2 class="form-builder-page-title">{{ page_heading }}</h2>
+
+  {% if block('main_content') is not empty %}
+    <div class="form-builder-single-column-with-buttons__main-content">
+      {% block main_content %}{% endblock %}
+    </div>
+  {% endif %}
+
+  <section class="form-builder-button-group">
+    {% if buttons.secondary is defined %}
+      {% for secondary_button in buttons.secondary %}
+        <a
+          id="form-builder-secondary-button-{{loop.index}}"
+          href="{{ secondary_button.url }}"
+          role="button"
+          class="form-builder-button form-builder-button--secondary"
+        >
+          {{ secondary_button.label }}
+        </a>
+      {% endfor %}
+    {% endif %}
+    {% if buttons.primary is defined %}
+      <a
+        id="form-builder-primary-button"
+        href="{{ buttons.primary.url }}"
+        role="button"
+        class="form-builder-button form-builder-button--primary"
+      >
+        {{ buttons.primary.label }}
+      </a>
+    {% endif %}
+  </section>
+</div>

docroot/modules/custom/va_gov_form_builder/templates/page-content/contact-info.html.twig

@@ -0,0 +1,5 @@
+{% extends '@va_gov_form_builder/page-content/base/non-editable-pattern.html.twig' %}
+
+{% set page_id = 'contact-info' %}
+{% set page_heading = 'Collecting contact information' %}
+{% set step_label = 'Contact information' %}

docroot/modules/custom/va_gov_form_builder/templates/page-content/page-content--va-gov-form-builder--home.html.twig → docroot/modules/custom/va_gov_form_builder/templates/page-content/home.html.twig

@@ -32,6 +32,4 @@
       {% endfor %}
     </ul>
   </section>
-
-
 </div>

docroot/modules/custom/va_gov_form_builder/templates/page-content/identification-info.html.twig

@@ -0,0 +1,16 @@
+{% extends '@va_gov_form_builder/page-content/base/non-editable-pattern.html.twig' %}
+
+{% set page_id = 'identification-info' %}
+{% set page_heading = 'Collecting identifying information' %}
+{% set step_label = 'Your personal information' %}
+
+{% block step_description %}
+  <p>
+    <strong>Note:</strong> Below is the default pattern for asking a submitter for this information.
+    Some forms may ask for other types of information. The guidance for this item can be found
+    here:
+    <a href="https://design.va.gov/patterns/ask-users-for/social-security-number#examples">
+      https://design.va.gov/patterns/ask-users-for/social-security-number#examples
+    </a>
+  </p>
+{% endblock %}

docroot/modules/custom/va_gov_form_builder/templates/page-content/page-content--va-gov-form-builder--layout.html.twig → docroot/modules/custom/va_gov_form_builder/templates/page-content/layout.html.twig

@@ -78,7 +78,7 @@
     <p class="form-builder-layout-step__help-text">Once all of the steps are complete, this form can be viewed by selecting View form.</p>
     <a
       id="form-builder-build-form-button"
-      href={{view_form.url}}
+      href="{{view_form.url}}"
       role="button"
       class="form-builder-layout-step__view-link form-builder-button form-builder-button--secondary form-builder-button--view-form"
     >

docroot/modules/custom/va_gov_form_builder/templates/page-content/name-and-dob.html.twig

@@ -0,0 +1,5 @@
+{% extends '@va_gov_form_builder/page-content/base/non-editable-pattern.html.twig' %}
+
+{% set page_id = 'name-and-dob' %}
+{% set page_heading = 'Collecting Name and Date of birth' %}
+{% set step_label = 'Your personal information' %}