Issue #3430431 - Added ci and compatibility to drupal 11

.cspell-project-words.txt

+Anwoon
+collapsibles
+Ecedi
+Iannone

.gitlab-ci.yml

+################
+# GitLabCI template for Drupal projects.
+#
+# This template is designed to give any Contrib maintainer everything they need to test, without requiring modification.
+# It is also designed to keep up to date with Core Development automatically through the use of include files that can be centrally maintained.
+# As long as you include the project, ref and three files below, any future updates added by the Drupal Association will be used in your
+# pipelines automatically. However, you can modify this template if you have additional needs for your project.
+# The full documentation is on https://project.pages.drupalcode.org/gitlab_templates/
+################
+
+# For information on alternative values for 'ref' see https://project.pages.drupalcode.org/gitlab_templates/info/templates-version/
+# To test a Drupal 7 project, change the first include filename from .main.yml to .main-d7.yml
+include:
+  - project: $_GITLAB_TEMPLATES_REPO
+    ref: $_GITLAB_TEMPLATES_REF
+    file:
+      - "/includes/include.drupalci.main.yml"
+      - "/includes/include.drupalci.variables.yml"
+      - "/includes/include.drupalci.workflows.yml"
+
+################
+# Pipeline configuration variables are defined with default values and descriptions in the file
+# https://git.drupalcode.org/project/gitlab_templates/-/blob/main/includes/include.drupalci.variables.yml
+# Uncomment the lines below if you want to override any of the variables. The following is just an example.
+################
+# variables:
+#   SKIP_ESLINT: '1'
+#   OPT_IN_TEST_NEXT_MAJOR: '1'
+#   _CURL_TEMPLATES_REF: 'main'

README.md

@@ -4,6 +4,7 @@ CONTENTS OF THIS FILE
 * Introduction
 * Recommended modules
 * Installation
+* Usage example
 * Maintainers
 
 INTRODUCTION
@@ -20,6 +21,20 @@ INSTALLATION
   https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-modules
   for further information.
 
+USAGE EXAMPLE
+-----
+```php
+$form['author'] = [
+  '#type' => 'collapsible',
+  '#title' => $this->t('Author'),
+];
+
+$form['author']['name'] = [
+  '#type' => 'textfield',
+  '#title' => $this->t('Name'),
+];
+```
+
 MAINTAINERS
 -----------
 

js/collapsible.js

@@ -8,29 +8,27 @@
  * @see https://www.drupal.org/docs/8/api/javascript-api/javascript-api-overview
  */
 
-'use strict';
-
 (function ($, Drupal) {
-
   Drupal.behaviors.collapsible = {
-    attach: function (context) {
-
+    attach(context) {
       // Use the jQuery once plugin to execute code once.
       once('collapsible', 'body').forEach(function () {
-        var $body = $('body');
+        const $body = $('body');
 
         // Toggle on click on the button.
         $body.on('click', '.js-collapsible-cta', function (event) {
-          var $cta = $(this);
-          var $parent = $cta.closest('.js-collapsible');
-          var rel = $parent.attr('data-collapsible-rel');
-          var $others;
+          const $cta = $(this);
+          const $parent = $cta.closest('.js-collapsible');
+          const rel = $parent.attr('data-collapsible-rel');
+          let $others;
 
           if ($cta.attr('aria-expanded') === 'false') {
             if (rel) {
-              // Close others if they are in relation (data-collapsible-rel attribute).
-              $others = $('[data-collapsible-rel="' + rel + '"].is-expanded');
-              $others.find('.js-collapsible-cta').first().attr('aria-expanded', 'false');
+              $others = $(`[data-collapsible-rel="${rel}"].is-expanded`);
+              $others
+                .find('.js-collapsible-cta')
+                .first()
+                .attr('aria-expanded', 'false');
               $others.removeClass('is-expanded');
               $others.trigger('collapsible-close');
             }
@@ -40,8 +38,7 @@
 
             // Custom event.
             $parent.trigger('collapsible-open');
-          }
-          else {
+          } else {
             $cta.attr('aria-expanded', 'false');
             $parent.removeClass('is-expanded');
 
@@ -52,28 +49,30 @@
 
         // Close on click somewhere else.
         $body.on('click focusin', function (event) {
-          var $target = $(event.target);
+          const $target = $(event.target);
           // Maybe the click is somewhere inside a collapsible.
-          var $parent = $target.parents('.js-collapsible');
+          const $parent = $target.parents('.js-collapsible');
 
           // For all open collapsibles, but not the one where the click happens.
-          $('.js-collapsible.is-expanded').not($parent).each(function () {
-            var $collapsible = $(this);
+          $('.js-collapsible.is-expanded')
+            .not($parent)
+            .each(function () {
+              const $collapsible = $(this);
 
-            // Only if their data-collapsible-close==true.
-            if ($collapsible.attr('data-collapsible-close') === 'true') {
-              var $cta = $collapsible.find('.js-collapsible-cta');
+              // Only if their data-collapsible-close==true.
+              if ($collapsible.attr('data-collapsible-close') === 'true') {
+                const $cta = $collapsible.find('.js-collapsible-cta');
 
-              // Close them.
-              $cta.attr('aria-expanded', 'false');
-              $collapsible.removeClass('is-expanded');
+                // Close them.
+                $cta.attr('aria-expanded', 'false');
+                $collapsible.removeClass('is-expanded');
 
-              // Custom event.
-              $collapsible.trigger('collapsible-close');
-            }
-          });
+                // Custom event.
+                $collapsible.trigger('collapsible-close');
+              }
+            });
         });
       });
-    }
-  }
-}(jQuery, Drupal));
+    },
+  };
+})(jQuery, Drupal);

src/Element/Collapsible.php

@@ -3,24 +3,10 @@
 namespace Drupal\fapi_collapsible\Element;
 
 use Drupal\Core\Form\FormStateInterface;
-use Drupal\Core\Render\Annotation\RenderElement;
 use Drupal\Core\Render\Element\Fieldset;
 
 /**
- * Provides a render element for a group of form elements with collapsible action.
- *
- * Usage example:
- * @code
- * $form['author'] = array(
- *   '#type' => 'collapsible',
- *   '#title' => $this->t('Author'),
- * );
- *
- * $form['author']['name'] = array(
- *   '#type' => 'textfield',
- *   '#title' => $this->t('Name'),
- * );
- * @endcode
+ * Provides a render element for group of form elements with collapsible action.
  *
  * @see \Drupal\Core\Render\Element\Fieldgroup
  * @see \Drupal\Core\Render\Element\Details