OPENEUROPA-1251: Add theme suggestions for the variants and behat tests.

behat.yml.dist

@@ -37,6 +37,10 @@ default:
         jumbotron: '.jumbotron'
         quote: '.quote'
         modal: '.modal-dialog'
+        preview: '.pattern-preview'
+        button_default: '.pattern-preview--default'
+        button_primary: '.pattern-preview--primary'
+        button_error: '.pattern-preview--error'
       selectors:
         error_message_selector: '.alert.alert-danger'
       text:

modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/button/pattern-button--error.html.twig

+{#
+/**
+ * @file
+ * Button pattern.
+ */
+#}
+<a href="{{ url }}" target="_blank" class="btn btn-{{ variant }} button">{{ 'Cancel'|t }}</a>

modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-overview-page.html.twig

@@ -33,10 +33,16 @@
 
         {# Rendered pattern preview. #}
         <div class="pattern-preview">
-          {% for variant in pattern.previews %}
-            <h3>{{ variant.meta['#variant'].label }}</h3><hr>
-            <span>{{ variant.meta['#variant'].description }}</span>
-              {{ variant.rendered }}
+          {% for preview in pattern.previews %}
+            {% if preview.meta['#variant'] is not empty %}
+              <div class="pattern-preview--{{ preview.meta['#variant'].name }}">
+              <h3>{{ preview.meta['#variant'].label }}</h3><hr>
+              <p>{{ preview.meta['#variant'].description }}</p>
+            {% endif %}
+            {{ preview.rendered }}
+            {% if preview.meta['#variant'] is not empty %}
+              </div>
+            {% endif %}
           {% endfor %}
         </div>
       </div>

modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-single-page.html.twig

@@ -10,10 +10,16 @@
   {{ pattern.meta }}
   {# Rendered pattern preview. #}
   <div class="pattern-preview">
-    {% for variant in pattern.previews %}
-      <h3>{{ variant.meta['#variant'].label }}</h3><hr>
-      <span>{{ variant.meta['#variant'].description }}</span>
-      {{ variant.rendered }}
+    {% for preview in pattern.previews %}
+      {% if preview.meta['#variant'] is not empty %}
+        <div class="pattern-preview--{{ preview.meta['#variant'].name }}">
+          <h3>{{ preview.meta['#variant'].label }}</h3><hr>
+          <p>{{ preview.meta['#variant'].description }}</p>
+      {% endif %}
+      {{ preview.rendered }}
+      {% if preview.meta['#variant'] is not empty %}
+          </div>
+      {% endif %}
     {% endfor %}
   </div>
 

tests/features/overview.feature

@@ -87,3 +87,20 @@ Feature: Overview
       | error messages                                                                 |
       | Pattern 'bad_pattern' is skipped because of the following validation error(s): |
       | Validation error on "bad_pattern.label": This value should not be null.        |
+
+  Scenario: Patterns simple page of button will show all button's variants with custom template.
+
+    Given I am logged in as a user with the "access patterns page" permission
+    And I am on "/patterns/button"
+
+    Then I should see the heading "Button"
+    And I should see "A simple button."
+
+    And I should see "Default" in the "preview"
+    And I should see "Submit" in the "button_default"
+
+    And I should see "Primary" in the "preview"
+    And I should see "Submit" in the "button_primary"
+
+    And I should see "Error" in the "preview"
+    And I should see "Cancel" in the "button_error"

ui_patterns.module

@@ -6,6 +6,7 @@
  */
 
 use Drupal\ui_patterns\UiPatterns;
+use Drupal\ui_patterns\Element\PatternContext;
 
 /**
  * Implements hook_theme().
@@ -44,7 +45,6 @@ function ui_patterns_library_info_build() {
  * Implements hook_theme_suggestions_HOOK_alter().
  */
 function ui_patterns_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {
-
   if (UiPatterns::getManager()->isPatternHook($hook)) {
     \Drupal::moduleHandler()->alter('ui_patterns_suggestions', $suggestions, $variables, $variables['context']);
   }
@@ -53,3 +53,15 @@ function ui_patterns_theme_suggestions_alter(array &$suggestions, array $variabl
     \Drupal::moduleHandler()->alter('ui_patterns_destination_suggestions', $suggestions, $variables, $variables['context']);
   }
 }
+
+/**
+ * Implements hook_ui_patterns_suggestions_alter().
+ */
+function ui_patterns_ui_patterns_suggestions_alter(array &$suggestions, array $variables, PatternContext $context) {
+  if ('' !== $variables['variant']) {
+    $hook = $variables['theme_hook_original'];
+    $variant = $variables['variant'];
+
+    $suggestions[] = $hook . '__' . $variant;
+  }
+}