Issue #3391309 by pdureau, Grimreaper: Remove nav_item, alert, dropdown and...

Issue #3391309 by pdureau, Grimreaper: Remove nav_item, alert, dropdown and parts of navbar preprocess hooks.

src/HookHandler/PreprocessMenuLocalTask.php

+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\ui_suite_bootstrap\HookHandler;
+
+use Drupal\Core\Url;
+
+/**
+ * Prepare local task link for component.
+ */
+class PreprocessMenuLocalTask {
+
+  /**
+   * Prepare local task link for component.
+   *
+   * @param array $variables
+   *   The preprocessed variables.
+   */
+  public function preprocess(array &$variables): void {
+    $variables['link'] = $this->convertLinkElement($variables['link']);
+  }
+
+  /**
+   * Convert link element, which is not welcomed in a component template.
+   *
+   * @param array $link
+   *   The link render element to transform.
+   *
+   * @return array
+   *   An html_tag render element.
+   */
+  protected function convertLinkElement(array $link): array {
+    if (!isset($link['#type'])) {
+      return $link;
+    }
+    if ($link['#type'] !== 'link' || !($link['#url'] instanceof Url)) {
+      return $link;
+    }
+
+    /** @var array $attributes */
+    $attributes = $link['#url']->getOption('attributes') ?: [];
+    $attributes['href'] = $link['#url']->toString();
+
+    $prepared_link = [
+      '#type' => 'html_tag',
+      '#tag' => 'a',
+      '#value' => $link['#title'] ?? '',
+      '#attributes' => $attributes,
+    ];
+    return $prepared_link;
+  }
+
+}

src/HookHandler/PreprocessPatternAlert.php

-<?php
-
-declare(strict_types = 1);
-
-namespace Drupal\ui_suite_bootstrap\HookHandler;
-
-use Drupal\Component\Render\MarkupInterface;
-use Drupal\Component\Utility\Html;
-use Drupal\Core\Render\Markup;
-
-/**
- * Handle links class in alert pattern.
- */
-class PreprocessPatternAlert {
-
-  /**
-   * Add 'alert-link' class to links.
-   *
-   * @param array $variables
-   *   The preprocessed variables.
-   */
-  public function preprocess(array &$variables): void {
-    if (!isset($variables['message']) || !($variables['message'] instanceof MarkupInterface)) {
-      return;
-    }
-
-    $message = (string) $variables['message'];
-    $dom = Html::load($message);
-
-    $links = $dom->getElementsByTagName('a');
-    foreach ($links as $link) {
-      $existing_class = $link->getAttribute('class');
-      $classes = \explode(' ', $existing_class);
-      $classes = \array_filter($classes);
-      $classes[] = 'alert-link';
-      $link->setAttribute('class', \implode(' ', $classes));
-    }
-
-    $variables['message'] = Markup::create(Html::serialize($dom));
-  }
-
-}

src/HookHandler/PreprocessPatternDropdown.php

-<?php
-
-declare(strict_types = 1);
-
-namespace Drupal\ui_suite_bootstrap\HookHandler;
-
-use Drupal\Component\Utility\Html;
-
-/**
- * Handle variables needed for the pattern.
- */
-class PreprocessPatternDropdown {
-
-  /**
-   * Handle variables needed for the pattern.
-   *
-   * @param array $variables
-   *   The preprocessed variables.
-   */
-  public function preprocess(array &$variables): void {
-    $variables['dropdown_id'] = Html::getUniqueId('bootstrap-dropdown');
-  }
-
-}

src/HookHandler/PreprocessPatternNavItem.php

-<?php
-
-declare(strict_types = 1);
-
-namespace Drupal\ui_suite_bootstrap\HookHandler;
-
-use Drupal\Component\Utility\NestedArray;
-use Drupal\Core\Url;
-
-/**
- * Handle variables needed for the pattern.
- */
-class PreprocessPatternNavItem {
-
-  /**
-   * Handle variables needed for the pattern.
-   *
-   * @param array $variables
-   *   The preprocessed variables.
-   */
-  public function preprocess(array &$variables): void {
-    $nav_item_options = [
-      'attributes' => [
-        'class' => [
-          'nav-link',
-        ],
-      ],
-    ];
-
-    // Manage active state.
-    if (isset($variables['active']) && $variables['active']) {
-      $nav_item_options = NestedArray::mergeDeep($nav_item_options, [
-        'attributes' => [
-          'class' => [
-            'active',
-          ],
-        ],
-      ]);
-    }
-
-    // Manage disabled state.
-    if (isset($variables['disabled']) && $variables['disabled']) {
-      $nav_item_options = NestedArray::mergeDeep($nav_item_options, [
-        'attributes' => [
-          'class' => [
-            'disabled',
-          ],
-        ],
-      ]);
-    }
-
-    if (\array_key_exists('link', $variables)) {
-      if (isset($variables['link']) && !empty($variables['link'])) {
-        if (!($variables['link']['#url'] instanceof Url)) {
-          $variables['link']['#url'] = Url::fromUri($variables['link']['#url']);
-        }
-
-        if (isset($variables['link']['#url']) && $variables['link']['#url'] instanceof Url) {
-          // Add 'nav-link' class.
-          $variables['link']['#url']->mergeOptions($nav_item_options);
-        }
-      }
-    }
-  }
-
-}

src/HookHandler/PreprocessPatternNavbar.php

@@ -4,7 +4,6 @@ declare(strict_types = 1);
 
 namespace Drupal\ui_suite_bootstrap\HookHandler;
 
-use Drupal\Component\Utility\Html;
 use Drupal\Core\Render\Element;
 
 /**
@@ -32,12 +31,6 @@ class PreprocessPatternNavbar {
    *   The preprocessed variables.
    */
   public function preprocess(array &$variables): void {
-    $variables['navbar_id'] = Html::getUniqueId('bootstrap-navbar');
-
-    if (\array_key_exists('brand', $variables) && \is_array($variables['brand'])) {
-      $variables['brand'] = \_ui_suite_bootstrap_add_class($variables['brand'], 'navbar-brand');
-    }
-
     if (\substr($variables['variant'], 0, self::DARK_LENGTH) === 'dark') {
       foreach (self::REGIONS_FIELDS as $region) {
         if (isset($variables[$region])) {

templates/patterns/alert/alert.ui_patterns.yml

@@ -39,3 +39,8 @@ alert:
       label: "Message"
       description: "The alert message."
       preview: "A simple alert. Check it out!"
+  libraries:
+    - alert:
+        css:
+          component:
+            styles/alert.css: {}

templates/patterns/alert/styles/alert.css

+/*
+ * Not possible to add alert-link class correctly in alert content.
+ *
+ * Reproduce style from Bootstrap.
+ */
+.alert a {
+  color: var(--bs-alert-link-color);
+  font-weight: 700;
+}

templates/patterns/dropdown/dropdown.ui_patterns.yml

@@ -18,6 +18,10 @@ dropdown:
     btn_group__dropstart:
       label: "Button group dropstart"
   settings:
+    dropdown_id:
+      type: "textfield"
+      label: "ID"
+      description: "Must start with a letter. Randomly generated if empty."
     button_type:
       type: "select"
       label: "Dropdown button type"

templates/patterns/dropdown/pattern-dropdown.html.twig

@@ -3,14 +3,12 @@
   {% set attributes = attributes.addClass(variants) %}
 {% endif %}
 
+{% set dropdown_id = dropdown_id|default("dropdown-" ~ random()) %}
 {% set button_type = button_type|default('button') %}
 {% set button_color = button_color|default('secondary') %}
 {% set button_size = button_size|default('default') %}
-{% set button_split = button_split|default(false) %}
-{% set dark = dark|default(false) %}
 {% set auto_close = auto_close|default('true') %}
 {% set dropdown_tag = dropdown_tag|default('div') %}
-{% set dropdown_navbar = dropdown_navbar|default(false) %}
 {# Force button_type as button when splitting. #}
 {% set button_type = button_split ? 'button' : button_type %}
 {% if dropdown_navbar %}

templates/patterns/nav_item/nav_item.ui_patterns.yml

@@ -15,11 +15,12 @@ nav_item:
       description: "Html attribute to render the link unclickable."
   fields:
     link:
-      type: "Link"
+      type: "render"
       label: "Link"
       description: "The link item."
       preview:
-        type: 'link'
-        title: 'Link'
-        # It should be a URL object, preprocessed for the preview.
-        url: 'https://example.com'
+        type: 'html_tag'
+        tag: 'a'
+        value: 'Link'
+        attributes:
+          href: 'https://example.com'

templates/patterns/nav_item/pattern-nav-item.html.twig

 <li{{ attributes.addClass('nav-item') }}>
-  {{ link }}
+  {% set link = active ? link|add_class('active') : link %}
+  {% set link = disabled ? link|add_class('disabled') : link %}
+  {{ link|add_class('nav-link') }}
 </li>

templates/patterns/navbar/navbar.ui_patterns.yml

@@ -30,6 +30,10 @@ navbar:
     dark__expand_xxl:
       label: "Dark expand extra extra large (deprecated)"
   settings:
+    navbar_id:
+      type: "textfield"
+      label: "ID"
+      description: "Must start with a letter. Randomly generated if empty."
     placement:
       type: "select"
       label: "Placement"

templates/patterns/navbar/pattern-navbar.html.twig

@@ -5,6 +5,7 @@
 
 {% set attributes = attributes.addClass('navbar') %}
 
+{% set navbar_id = navbar_id|default("navbar-" ~ random()) %}
 {% set placement = placement|default('default') %}
 {% set toggler_position = toggler_position|default('start') %}
 {% set toggle_action = toggle_action|default('collapse') %}
@@ -28,7 +29,7 @@
     {% if navigation_collapsible and toggler_position == 'start' %}
       {{ toggler }}
     {% endif %}
-    {{ brand }}
+    {{ brand|add_class('navbar-brand') }}
     {{ navigation }}
     {% if navigation_collapsible and toggler_position == 'end' %}
       {{ toggler }}

ui_suite_bootstrap.info.yml

@@ -42,10 +42,10 @@ libraries-extend:
     - ui_suite_bootstrap/drupal.ajax
   core/drupal.checkbox:
     - ui_suite_bootstrap/drupal.checkbox
-#  core/drupal.dialog:
-#    - ui_suite_bootstrap/drupal.dialog
-#  core/drupal.dialog.ajax:
-#    - ui_suite_bootstrap/drupal.dialog.ajax
+  #  core/drupal.dialog:
+  #    - ui_suite_bootstrap/drupal.dialog
+  #  core/drupal.dialog.ajax:
+  #    - ui_suite_bootstrap/drupal.dialog.ajax
   core/drupal.dialog.off_canvas:
     - ui_suite_bootstrap/drupal.dialog.off_canvas
   core/drupal.progress:

ui_suite_bootstrap.theme

@@ -8,8 +8,6 @@
 declare(strict_types = 1);
 
 use Drupal\Core\Form\FormStateInterface;
-use Drupal\Core\Template\Attribute;
-use Drupal\Core\Template\AttributeHelper;
 use Drupal\ui_suite_bootstrap\HookHandler\ElementInfoAlter;
 use Drupal\ui_suite_bootstrap\HookHandler\FormAlter;
 use Drupal\ui_suite_bootstrap\HookHandler\FormCommerceCheckoutFlowMultistepDefaultAlter;
@@ -20,13 +18,11 @@ use Drupal\ui_suite_bootstrap\HookHandler\PreprocessFieldset;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessFormElement;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessInput;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessMenuLocalAction;
+use Drupal\ui_suite_bootstrap\HookHandler\PreprocessMenuLocalTask;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessPage;
-use Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternAlert;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternCard;
-use Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternDropdown;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternNavbar;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternNavbarNav;
-use Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternNavItem;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessSelect;
 use Drupal\ui_suite_bootstrap\HookHandler\PreprocessTextarea;
 use Drupal\ui_suite_bootstrap\HookHandler\ThemeSuggestionsAlter;
@@ -157,12 +153,12 @@ function ui_suite_bootstrap_preprocess_page(array &$variables): void {
 }
 
 /**
- * Implements hook_preprocess_HOOK() for 'pattern_alert'.
+ * Implements hook_preprocess_HOOK() for 'menu_local_task'.
  */
-function ui_suite_bootstrap_preprocess_pattern_alert(array &$variables): void {
-  /** @var \Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternAlert $instance */
+function ui_suite_bootstrap_preprocess_menu_local_task(array &$variables): void {
+  /** @var \Drupal\ui_suite_bootstrap\HookHandler\PreprocessMenuLocalTask $instance */
   $instance = \Drupal::service('class_resolver')
-    ->getInstanceFromDefinition(PreprocessPatternAlert::class);
+    ->getInstanceFromDefinition(PreprocessMenuLocalTask::class);
   $instance->preprocess($variables);
 }
 
@@ -176,16 +172,6 @@ function ui_suite_bootstrap_preprocess_pattern_card(array &$variables): void {
   $instance->preprocess($variables);
 }
 
-/**
- * Implements hook_preprocess_HOOK() for 'pattern_dropdown'.
- */
-function ui_suite_bootstrap_preprocess_pattern_dropdown(array &$variables): void {
-  /** @var \Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternDropdown $instance */
-  $instance = \Drupal::service('class_resolver')
-    ->getInstanceFromDefinition(PreprocessPatternDropdown::class);
-  $instance->preprocess($variables);
-}
-
 /**
  * Implements hook_preprocess_HOOK() for 'pattern_navbar'.
  */
@@ -206,16 +192,6 @@ function ui_suite_bootstrap_preprocess_pattern_navbar_nav(array &$variables): vo
   $instance->preprocess($variables);
 }
 
-/**
- * Implements hook_preprocess_HOOK() for 'pattern_nav_item'.
- */
-function ui_suite_bootstrap_preprocess_pattern_nav_item(array &$variables): void {
-  /** @var \Drupal\ui_suite_bootstrap\HookHandler\PreprocessPatternNavItem $instance */
-  $instance = \Drupal::service('class_resolver')
-    ->getInstanceFromDefinition(PreprocessPatternNavItem::class);
-  $instance->preprocess($variables);
-}
-
 /**
  * Implements hook_preprocess_HOOK() for 'select'.
  */
@@ -255,85 +231,3 @@ function ui_suite_bootstrap_theme_suggestions_input_alter(array &$suggestions, a
     ->getInstanceFromDefinition(ThemeSuggestionsAlter::class);
   $instance->input($suggestions, $variables);
 }
-
-/**
- * Add a value into the class attributes of a given element.
- *
- * Assumes element is an array.
- * Inspired by: https://www.drupal.org/node/3334294
- *
- * @param array $element
- *   An array.
- * @param string[]|string ...$classes
- *   The classes to add on element. Arguments can include string keys directly,
- *   or arrays of string keys.
- *
- * @return array
- *   The element with the given class(es) in attributes.
- */
-function _ui_suite_bootstrap_add_class(array $element, ...$classes): array {
-  if (_ui_suite_bootstrap_is_numeric_array($element)) {
-    foreach ($element as $index => $item) {
-      if (!\is_array($item)) {
-        continue;
-      }
-      $element[$index] = _ui_suite_bootstrap_add_class($item, ...$classes);
-    }
-    return $element;
-  }
-  $attributes = new Attribute($element['#attributes'] ?? []);
-  $attributes->addClass(...$classes);
-  $element['#attributes'] = $attributes->toArray();
-  return $element;
-}
-
-/**
- * Set attribute on a given element.
- *
- * Assumes element is an array.
- * Inspired by: https://www.drupal.org/node/3334294
- *
- * @param array $element
- *   An array.
- * @param string $name
- *   The attribute name.
- * @param mixed $value
- *   (optional) The attribute value.
- *
- * @return array
- *   The element with the given sanitized attribute's value.
- */
-function _ui_suite_bootstrap_set_attribute(array $element, string $name, mixed $value): array {
-  if (_ui_suite_bootstrap_is_numeric_array($element)) {
-    foreach ($element as $index => $item) {
-      if (!\is_array($item)) {
-        continue;
-      }
-      $element[$index] = _ui_suite_bootstrap_set_attribute($item, $name, $value);
-    }
-    return $element;
-  }
-  $element['#attributes'] = AttributeHelper::mergeCollections(
-    $element['#attributes'] ?? [],
-    new Attribute([$name => $value])
-  );
-  return $element;
-}
-
-/**
- * Check if an array is numeric.
- *
- * @param array $array
- *   The array to check.
- *
- * @return bool
- *   TRUE if the array is numeric. FALSE in case of associative array.
- */
-function _ui_suite_bootstrap_is_numeric_array(array $array): bool {
-  foreach (array_keys($array) as $a) {
-    if (!is_int($a)) {
-      return FALSE;
-    }
-  }
-  return TRUE;
-}