Add a review element

css/localgov_forms_review_element.css

@@ -0,0 +1,41 @@
+.webform-localgov-review-element {
+  display: flex;
+  margin-bottom: var(--spacing);
+  padding-bottom: var(--spacing);
+  border-bottom: solid var(--border-width) var(--border-color);
+}
+
+.webform-localgov-review-element__label {
+  flex-basis: 40%;
+  padding-right: var(--spacing);
+}
+
+.webform-localgov-review-element__title {
+  font-weight: bold;
+}
+
+.webform-localgov-review-element__value {
+  flex-basis: 40%;
+}
+
+.webform-localgov-review-element__change {
+  flex-basis: 20%;
+  text-align: right;
+}
+
+.webform-localgov-review-element__change input[type="submit"] {
+  margin: 0;
+  padding: 0 0 0 var(--spacing);
+  text-align: right;
+  text-decoration: underline;
+  color: var(--color-link);
+  border: none;
+  background-color: transparent;
+  font-size: var(--font-size-medium);
+}
+
+.webform-localgov-review-element__value ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

localgov_forms.libraries.yml

@@ -6,6 +6,14 @@ localgov_forms_uk_address:
   dependencies:
     - webform/webform.composite
 
+localgov_forms_review_element:
+  version: VERSION
+  css:
+    theme:
+      css/localgov_forms_review_element.css: {}
+  dependencies:
+    - webform/webform.composite
+
 localgov_forms.form_errors:
   version: VERSION
   js:

localgov_forms.module

@@ -20,6 +20,9 @@ function localgov_forms_theme(): array {
     'localgov_forms_uk_address' => [
       'render element' => 'element',
     ],
+    'localgov_forms_review_element' => [
+      'render element' => 'element',
+    ],
   ];
 }
 

src/Element/ReviewElement.php

@@ -0,0 +1,103 @@
+<?php
+
+namespace Drupal\localgov_forms\Element;
+
+use Drupal\Component\Utility\Html;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Render\Element\Container;
+
+/**
+ * Provides a wrapper element to group one or more Review elements with buttons.
+ *
+ * @RenderElement("localgov_forms_review_element")
+ */
+class ReviewElement extends Container {
+
+  /**
+   * Buttons.
+   *
+   * @var string[]
+   */
+  public static $buttons = [
+    'wizard_prev',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getInfo() {
+    $class = get_class($this);
+    return [
+      '#process' => [
+        [$class, 'processWebformActions'],
+        [$class, 'processContainer'],
+      ],
+      '#theme_wrappers' => ['container'],
+    ];
+  }
+
+  /**
+   * Processes a form actions container element.
+   */
+  public static function processWebformActions(&$element, FormStateInterface $form_state, &$complete_form) {
+    if (empty($element['#value'])) {
+      return $element;
+    }
+
+    $prefix = ($element['#webform_key']) ? 'edit-' . $element['#webform_key'] . '-' : '';
+
+    $element['#attributes']['class'][] = 'preview-wrapper';
+    // Copy the form's actions to this element.
+    $element += $complete_form['actions'];
+
+    foreach (static::$buttons as $button_name) {
+      // Make sure the button exists.
+      if (!isset($element[$button_name])) {
+        continue;
+      }
+
+      // Get settings name.
+      $settings_name = $button_name;
+
+      // Set unique id for each button.
+      if ($prefix) {
+        $element[$button_name]['#id'] = Html::getUniqueId("$prefix$button_name");
+      }
+
+      // Hide buttons using #access.
+      if (!empty($element['#' . $settings_name . '_hide'])) {
+        $element[$button_name]['#access'] = FALSE;
+      }
+
+      // Apply custom label.
+      $element[$button_name]['#value'] = $element['#' . $settings_name . '__label'] ?? 'Change';
+
+      // The #name attribute needs to be unique so triggeringElement can be
+      // correctly associated with this button.
+      $element[$button_name]['#name'] = $prefix . $button_name;
+      $element[$button_name]['#identifier'] = 'change_wizard_prev';
+
+      // Apply attributes (class, style, properties).
+      if (!empty($element['#' . $settings_name . '__attributes'])) {
+        $element[$button_name] += ['#attributes' => []];
+        foreach ($element['#' . $settings_name . '__attributes'] as $attribute_name => $attribute_value) {
+          if ($attribute_name === 'class') {
+            $element[$button_name]['#attributes'] += ['class' => []];
+            // Merge class names.
+            $element[$button_name]['#attributes']['class'] = array_merge($element[$button_name]['#attributes']['class'], $attribute_value);
+          }
+          else {
+            $element[$button_name]['#attributes'][$attribute_name] = $attribute_value;
+          }
+        }
+      }
+
+      if (isset($element['#source_page'])) {
+        $element[$button_name]['#page'] = $element['#source_page'];
+      }
+    }
+
+    return $element;
+  }
+
+}