Issue #3415660 by govind.maloo: Arrows supporting Previous and Next buttons on webforms are not rendering as expected

.docker/cli.dockerfile

@@ -43,7 +43,7 @@ ENV WEBROOT=${WEBROOT} \
 
 # Adding more tools.
 RUN apk update \
-    && apk add pv python3 make gcc g++ diffutils ncurses=6.4_p20230506-r0 pv=1.6.20-r1 tzdata=2023d-r0 \
+    && apk add pv python3 make gcc g++ diffutils ncurses=6.4_p20230506-r0 pv=1.6.20-r1 tzdata=2024a-r0 \
     && ln -sf python3 /usr/bin/python \
     && rm -rf /var/cache/apk/*
 

.docker/cli.onlytheme.dockerfile

@@ -42,7 +42,7 @@ ENV WEBROOT=${WEBROOT} \
 
 # Adding more tools.
 RUN apk update \
-    && apk add pv python3 make gcc g++ diffutils ncurses=6.4_p20230506-r0 pv=1.6.20-r1 tzdata=2023d-r0 \
+    && apk add pv python3 make gcc g++ diffutils ncurses=6.4_p20230506-r0 pv=1.6.20-r1 tzdata=2024a-r0 \
     && ln -sf python3 /usr/bin/python \
     && rm -rf /var/cache/apk/*
 

.docker/cli.sibling.dockerfile

@@ -43,7 +43,7 @@ ENV WEBROOT=${WEBROOT} \
 
 # Adding more tools.
 RUN apk update \
-    && apk add pv python3 make gcc g++ diffutils ncurses=6.4_p20230506-r0 pv=1.6.20-r1 tzdata=2023d-r0 \
+    && apk add pv python3 make gcc g++ diffutils ncurses=6.4_p20230506-r0 pv=1.6.20-r1 tzdata=2024a-r0 \
     && ln -sf python3 /usr/bin/python \
     && rm -rf /var/cache/apk/*
 

.docker/nginx-drupal.dockerfile

@@ -13,6 +13,6 @@ FROM uselagoon/nginx-drupal:23.12.0
 ARG WEBROOT=web
 ENV WEBROOT=${WEBROOT}
 
-RUN apk add --no-cache tzdata=2023d-r0
+RUN apk add --no-cache tzdata=2024a-r0
 
 COPY --from=cli /app /app

.docker/php.dockerfile

@@ -10,6 +10,6 @@ FROM ${CLI_IMAGE:-cli} as cli
 # @see https://github.com/uselagoon/lagoon-images/tree/main/images/php-fpm
 FROM uselagoon/php-8.2-fpm:23.12.0
 
-RUN apk add --no-cache tzdata=2023d-r0
+RUN apk add --no-cache tzdata=2024a-r0
 
 COPY --from=cli /app /app

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 "[email protected]"
+    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/themes/contrib/civictheme/civictheme.info.yml

@@ -619,6 +619,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_starter_kit/templates/form/input--submit.html.twig

@@ -1,3 +1,15 @@
+{#
+/**
+ * @file
+ * CivicTheme implementation to display a 'submit' form element.
+ *
+ * Variables:
+ * - value: [string] value.
+ * - attributes: [string] Additional attributes.
+ * - modifier_class: [string] Additional classes.
+ */
+#}
+
 {% if 'secondary' in modifier_class %}
   {% set type = 'secondary' %}
 {% else %}
@@ -6,13 +18,15 @@
 {% set children %}
   {% include "@atoms/button/button.twig" with {
     type: type,
-    text: attributes.value,
+    text: value,
     modifier_class: modifier_class,
     attributes: attributes,
-    kind: 'submit'
+    kind: 'submit',
+    theme: theme
   } only %}
 {% endset %}
 {% include "@molecules/form-element/form-element.twig" with {
   type: 'submit',
   children: children,
 } only %}
+

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

@@ -0,0 +1,86 @@
+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'
+    '#prev_button_label': '< Previous'
+    '#next_button_label': 'Next >'
+    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
+  actions:
+    '#type': webform_actions
+    '#title': 'Submit button(s)'
+    '#submit__label': Submit
+css: ''
+javascript: ''
+settings: {  }
+access: {  }
+handlers: {  }
+variants: {  }

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

@@ -45,6 +45,13 @@ 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']) && in_array($element['#type'], ['submit', 'button'])) {
+    $variables['value'] = $variables['attributes']['value'] ?? 'Submit';
+  }
 }
 
 /**

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

@@ -138,7 +138,7 @@ function _civictheme_process_html_content_links_emails(string $html): string {
   }
 
   foreach ($text_nodes as $text_node) {
-    if (preg_match_all(_civictheme_process_html_content_links_get_email_regex(), $text_node->nodeValue, $matches)) {
+    if (preg_match_all(_civictheme_process_html_content_links_get_email_regex(), (string) $text_node->nodeValue, $matches)) {
       $emails = $matches[0];
       foreach ($emails as $email) {
         $replacement = $dom->createDocumentFragment();

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

@@ -90,7 +90,7 @@ function civictheme_media_get_variables(MediaInterface $media): ?array {
 
   return [
     'name' => t('@name', ['@name' => $file->label()]),
-    'ext' => pathinfo($file->getFileUri(), PATHINFO_EXTENSION) ?: '',
+    'ext' => pathinfo((string) $file->getFileUri(), PATHINFO_EXTENSION) ?: '',
     'url' => civictheme_media_get_url($media),
     // @phpstan-ignore-next-line
     'size' => DeprecationHelper::backwardsCompatibleCall(\Drupal::VERSION, '10.2.0', static fn(): TranslatableMarkup => ByteSizeMarkup::create($file->getSize()), static fn() => format_size($file->getSize())),

web/themes/contrib/civictheme/templates/block/block.html.twig

@@ -8,6 +8,7 @@
   'block',
   'block-' ~ configuration.provider|clean_class,
   'block-' ~ plugin_id|clean_class,
+  modifier_class ? modifier_class : '',
 ] %}
 <div{{ attributes.addClass(classes) }}>
   {{ title_prefix }}

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/container.html.twig

@@ -0,0 +1,14 @@
+{#
+/**
+ * @file
+ * CivicTheme implementation of a container used to wrap child elements.
+ */
+#}
+{% set classes = [
+    'container',
+    has_parent ? 'js-form-wrapper form-wrapper',
+    'ct-contianer',
+  ] %}
+<div {{ attributes.addClass(classes) }}>
+  {{ children }}
+</div>

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

@@ -0,0 +1,9 @@
+{#
+/**
+ * @file
+ * CivicTheme theme implementation to display a fieldset.
+ */
+#}
+{% include '@atoms/fieldset/fieldset.twig' with {
+  legend: legend.title
+} %}

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

@@ -2,8 +2,14 @@
 /**
  * @file
  * CivicTheme implementation to display a 'submit' form element.
+ *
+ * Variables:
+ * - value: [string] value.
+ * - attributes: [string] Additional attributes.
+ * - modifier_class: [string] Additional classes.
  */
 #}
+
 {% if 'secondary' in modifier_class %}
   {% set type = 'secondary' %}
 {% else %}
@@ -12,7 +18,7 @@
 {% set children %}
   {% include "@atoms/button/button.twig" with {
     type: type,
-    text: attributes.value,
+    text: value,
     modifier_class: modifier_class,
     attributes: attributes,
     kind: 'submit',
@@ -23,3 +29,4 @@
   type: 'submit',
   children: children,
 } only %}
+

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 %}

web/themes/contrib/civictheme/templates/webform/webform.html.twig

@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Webform component.
+ *
+ * Variables:
+ * - attributes: [string] Additional attributes.
+ * - modifier_class: [string] Additional classes.
+ */
+#}
+
+{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
+{% set modifier_class = '%s %s'|format(theme_class, modifier_class) %}
+
+<form class="ct-webform {{ modifier_class }}" {{ attributes }}>
+  {{ title_prefix }}
+  {{ children }}
+  {{ title_suffix }}
+</form>