[CIVIC-1493] Updated webform templates and test.

tests/behat/features/webform.feedback.render.feature

@@ -0,0 +1,36 @@
+@p0 @civictheme @webform @test
+Feature: Webform render
+
+  @api @javascript
+  Scenario: Form inputs are correctly validated
+    Given I am an anonymous user
+    When I visit "/form/civictheme-feedback"
+    And I should see 3 ".progress-step" elements
+    And I should see the text "Personal information"
+    And I should see the text "Additional information"
+    And I should see an "[name='name']" element
+    And I should see an "[name='email']" element
+    And I should see an "[name='message']" element
+    And I fill in "Your Name" with "[TEST] Name"
+    And I fill in "Your Email" with "test@email.com"
+    And I fill in "edit-message" with "[TEST] Message"
+    And I should see the button "Next"
+    And I should not see the "Previous" button
+    And I press the "Next" button
+    And I should not see an "[name='name']" element
+    And I should not see an "[name='email']" element
+    And I should not see an "[name='message']" element
+    And I should see an "[name='reason']" element
+    And I should see the text "Reason for Contacting"
+    And I should see the text "Subscribe to Newsletter"
+    And I should see the text "Preferred Contact Method"
+    And I should not see the "Next" button
+    And I should see the button "Previous"
+    Then I select "support" from "reason"
+    And I should see an "[name='support_ticket_number']" element
+    And I should not see a visible "[name='how_did_you_hear']" element
+    Then I select "general" from "reason"
+    And I should not see a visible "[name='support_ticket_number']" element
+    And I should see an "[name='how_did_you_hear']" element
+    And I should see the button "Submit"
+

web/sites/default/default.settings.php

@@ -812,11 +812,11 @@
  *   site.
  * - migrate_file_public_path - The location of the source Drupal 6 or Drupal 7
  *   public files. This can be a local file directory containing the source
- *   Drupal 6 or Drupal 7 site (e.g /var/www/web), or the site address
+ *   Drupal 6 or Drupal 7 site (e.g /var/www/docroot), or the site address
  *   (e.g http://example.com).
  * - migrate_file_private_path - The location of the source Drupal 7 private
  *   files. This can be a local file directory containing the source Drupal 7
- *   site (e.g /var/www/web), or empty to use the same value as Public
+ *   site (e.g /var/www/docroot), or empty to use the same value as Public
  *   files directory.
  *
  * Sample configuration for a drupal 6 source site with the source files in a

web/themes/contrib/civictheme/civictheme.info.yml

@@ -620,6 +620,7 @@ config_devel:
     - views.view.civictheme_alerts
     - views.view.civictheme_automated_list
     - webform.webform.civictheme_enquiry
+    - webform.webform.civictheme_feedback
   optional:
     - block.block.civictheme_banner
     - block.block.civictheme_footer_acknowledgment_of_country

web/themes/contrib/civictheme/civictheme_library/components/03-organisms/webform/webform.scss

@@ -5,8 +5,8 @@
 .ct-webform {
   $root: &;
 
-  .form-checkboxes,
-  .form-radios {
+  #{$root}__checkboxes,
+  #{$root}__radios {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

web/themes/contrib/civictheme/civictheme_starter_kit/templates/form/input--submit.html.twig

@@ -4,7 +4,6 @@
  * CivicTheme implementation to display a 'submit' form element.
  *
  * Variables:
- * - value: [string] value.
  * - attributes: [string] Additional attributes.
  * - modifier_class: [string] Additional classes.
  */
@@ -18,7 +17,7 @@
 {% set children %}
 {% include "@atoms/button/button.twig" with {
     type: type,
-    text: value,
+    text: attributes.value,
     modifier_class: modifier_class,
     attributes: attributes,
     kind: 'submit'

web/themes/contrib/civictheme/config/install/webform.webform.civictheme_feedback.yml

@@ -0,0 +1,80 @@
+langcode: en
+status: open
+dependencies: {  }
+open: null
+close: null
+weight: 0
+uid: 1
+template: false
+archive: false
+id: civictheme_feedback
+title: 'General form'
+description: 'A simple multi-step form.'
+categories: {  }
+elements: |-
+  personal_information:
+    '#type': webform_wizard_page
+    '#title': 'Personal information'
+    '#prev_button_label': Previous
+    '#next_button_label': Next
+    name:
+      '#type': textfield
+      '#title': 'Your Name'
+      '#required': true
+    email:
+      '#type': email
+      '#title': 'Your Email'
+      '#required': true
+    message:
+      '#type': textarea
+      '#title': 'Your Message'
+      '#rows': 5
+      '#required': true
+  additional_information:
+    '#type': webform_wizard_page
+    '#title': 'Additional information'
+    reason:
+      '#type': select
+      '#title': 'Reason for Contacting'
+      '#options':
+        general: 'General Inquiry'
+        support: 'Technical Support'
+        feedback: Feedback
+      '#required': true
+    support_ticket_number:
+      '#type': textfield
+      '#title': 'Support Ticket Number'
+      '#states':
+        visible:
+          ':input[name="reason"]':
+            value: support
+      '#required_states':
+        visible:
+          ':input[name="reason"]':
+            value: support
+    how_did_you_hear:
+      '#type': textfield
+      '#title': 'How did you hear about us?'
+      '#states':
+        visible:
+          ':input[name="reason"]':
+            value: general
+    subscription:
+      '#type': checkboxes
+      '#title': 'Subscribe to Newsletter'
+      '#options':
+        newsletter: Newsletter
+        promotions: Promotions
+    preferred_contact_method:
+      '#type': radios
+      '#title': 'Preferred Contact Method'
+      '#options':
+        email: Email
+        phone: Phone
+        mail: Mail
+css: ''
+javascript: ''
+settings: {  }
+access: {  }
+handlers: {  }
+variants: {  }

web/themes/contrib/civictheme/includes/form.inc

@@ -45,13 +45,6 @@ function civictheme_preprocess_input(array &$variables): void {
   if (isset($variables['attributes']['#civictheme_theme'])) {
     unset($variables['attributes']['#civictheme_theme']);
   }
-
-  // Fix htmlentity in submit button text.
-  $element = $variables['element'];
-
-  if (isset($element['#type']) && $element['#type'] == 'submit' && !empty($variables['attributes']['value'])) {
-    $variables['value'] = $variables['attributes']['value'];
-  }
 }
 
 /**

web/themes/contrib/civictheme/templates/form/checkboxes.html.twig

@@ -15,6 +15,6 @@
   errors: errors,
 } %}
   {% block children %}
-    <div class="form-checkboxes">{{ children }}</div>
+    <div class="ct-webform__checkboxes">{{ children }}</div>
   {% endblock %}
 {% endembed %}

web/themes/contrib/civictheme/templates/form/fieldset.html.twig

@@ -4,5 +4,6 @@
  * CivicTheme theme implementation to display a fieldset.
  */
 #}
-{% include '@atoms/fieldset/fieldset.twig' %}
-
+{% include '@atoms/fieldset/fieldset.twig' with {
+  legend: legend.title
+} %}

web/themes/contrib/civictheme/templates/form/input--submit.html.twig

@@ -4,7 +4,6 @@
  * CivicTheme implementation to display a 'submit' form element.
  *
  * Variables:
- * - value: [string] value.
  * - attributes: [string] Additional attributes.
  * - modifier_class: [string] Additional classes.
  */
@@ -18,7 +17,7 @@
 {% set children %}
 {% include "@atoms/button/button.twig" with {
     type: type,
-    text: value,
+    text: attributes.value,
     modifier_class: modifier_class,
     attributes: attributes,
     kind: 'submit'

web/themes/contrib/civictheme/templates/form/radios.html.twig

@@ -15,6 +15,6 @@
   errors: errors,
 } %}
   {% block children %}
-    <div class="form-radios">{{ children }}</div>
+    <div class="ct-webform__radios">{{ children }}</div>
   {% endblock %}
 {% endembed %}