OPENEUROPA-1251: Update overview and single page to see the variants.

modules/ui_patterns_library/src/Controller/PatternsLibraryController.php

@@ -54,12 +54,34 @@ class PatternsLibraryController extends ControllerBase {
    *   Return render array.
    */
   public function single($name) {
+    /** @var \Drupal\ui_patterns\Definition\PatternDefinition $definition */
+
     $definition = [];
-    $definition['rendered']['#type'] = 'pattern_preview';
-    $definition['rendered']['#id'] = $name;
     $definition['meta']['#theme'] = 'patterns_meta_information';
     $definition['meta']['#pattern'] = $this->patternsManager->getDefinition($name)->toArray();
 
+    if ($this->patternsManager->getDefinition($name)->hasVariants()) {
+      $variants = $this->patternsManager->getDefinition($name)->getVariants();
+      $definition['meta']['#variant'] = $variants;
+
+      foreach ($variants as $id => $variant) {
+        $preview = [];
+        $preview['rendered']['#type'] = 'pattern_preview';
+        $preview['rendered']['#id'] = $name;
+        $preview['rendered']['#variant'] = $id;
+        $preview['meta']['#variant'] = $variant->toArray();
+
+        $definition['previews'][$id] = $preview;
+      }
+    }
+    else {
+      $preview = [];
+      $preview['rendered']['#type'] = 'pattern_preview';
+      $preview['rendered']['#id'] = $name;
+
+      $definition['previews'][] = $preview;
+    }
+
     return [
       '#theme' => 'patterns_single_page',
       '#pattern' => $definition,
@@ -76,12 +98,32 @@ class PatternsLibraryController extends ControllerBase {
     /** @var \Drupal\ui_patterns\Definition\PatternDefinition $definition */
 
     $definitions = [];
-    foreach ($this->patternsManager->getDefinitions() as $id => $definition) {
-      $definitions[$id] = $definition->toArray();
-      $definitions[$id]['rendered']['#type'] = 'pattern_preview';
-      $definitions[$id]['rendered']['#id'] = $definition->id();
-      $definitions[$id]['meta']['#theme'] = 'patterns_meta_information';
-      $definitions[$id]['meta']['#pattern'] = $definition->toArray();
+    foreach ($this->patternsManager->getDefinitions() as $id_pattern => $definition) {
+      $definitions[$id_pattern] = $definition->toArray();
+      $definitions[$id_pattern]['meta']['#theme'] = 'patterns_meta_information';
+      $definitions[$id_pattern]['meta']['#pattern'] = $this->patternsManager->getDefinition($id_pattern)->toArray();
+
+      if ($this->patternsManager->getDefinition($id_pattern)->hasVariants()) {
+        $variants = $this->patternsManager->getDefinition($id_pattern)->getVariants();
+        $definitions[$id_pattern]['meta']['#variant'] = $variants;
+
+        foreach ($variants as $id_variant => $variant) {
+          $preview = [];
+          $preview['rendered']['#type'] = 'pattern_preview';
+          $preview['rendered']['#id'] = $id_pattern;
+          $preview['rendered']['#variant'] = $id_variant;
+          $preview['meta']['#variant'] = $variant->toArray();
+
+          $definitions[$id_pattern]["previews"][$id_variant] = $preview;
+        }
+      }
+      else {
+        $preview = [];
+        $preview['rendered']['#type'] = 'pattern_preview';
+        $preview['rendered']['#id'] = $id_pattern;
+
+        $definitions[$id_pattern]["previews"][] = $preview;
+      }
     }
 
     return [

modules/ui_patterns_test/templates/button/pattern-button.html.twig

@@ -4,4 +4,4 @@
  * Button pattern.
  */
 #}
-<a href="{{ url }}" target="_blank" class="btn btn-primary button">{{ title }}</a>
+<a href="{{ url }}" target="_blank" class="btn btn-{{ variant }} button">{{ title }}</a>

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

@@ -33,7 +33,11 @@
 
         {# Rendered pattern preview. #}
         <div class="pattern-preview">
-          {{ pattern.rendered }}
+          {% for variant in pattern.previews %}
+            <h3>{{ variant.meta['#variant'].label }}</h3><hr>
+            <span>{{ variant.meta['#variant'].description }}</span>
+              {{ variant.rendered }}
+          {% endfor %}
         </div>
       </div>
       {% endfor %}

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

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

src/Definition/PatternDefinition.php

@@ -91,6 +91,7 @@ class PatternDefinition extends PluginDefinition implements DerivablePluginDefin
     foreach ($this->getVariants() as $variant) {
       $definition['variants'][$variant->getName()] = $variant->toArray();
     }
+
     return $definition;
   }
 

src/Element/Pattern.php

@@ -95,6 +95,11 @@ class Pattern extends RenderElement {
     else {
       $element['#markup'] = '';
     }
+
+    if (!isset($element['#variant'])) {
+      $element['#variant'] = "";
+    }
+
     return $element;
   }
 

src/Plugin/PatternBase.php

@@ -157,6 +157,7 @@ abstract class PatternBase extends PluginBase implements PatternInterface, Conta
     }
     $return['variables']['attributes'] = [];
     $return['variables']['context'] = [];
+    $return['variables']['variant'] = '';
     $return['variables']['use'] = '';
     return $return;
   }

src/Template/TwigExtension.php

@@ -33,17 +33,20 @@ class TwigExtension extends \Twig_Extension {
    *   Pattern ID.
    * @param array $fields
    *   Pattern fields.
+   * @param string $variant
+   *   Variant name.
    *
    * @return array
    *   Pattern render array.
    *
    * @see \Drupal\ui_patterns\Element\Pattern
    */
-  public function renderPattern($id, array $fields = []) {
+  public function renderPattern($id, array $fields = [], $variant = "") {
     return [
       '#type' => 'pattern',
       '#id' => $id,
       '#fields' => $fields,
+      '#variant' => $variant,
     ];
   }
 
@@ -52,16 +55,19 @@ class TwigExtension extends \Twig_Extension {
    *
    * @param string $id
    *   Pattern ID.
+   * @param string $variant
+   *   Variant name.
    *
    * @return array
    *   Pattern render array.
    *
    * @see \Drupal\ui_patterns\Element\Pattern
    */
-  public function renderPatternPreview($id) {
+  public function renderPatternPreview($id, $variant = "") {
     return [
       '#type' => 'pattern_preview',
       '#id' => $id,
+      '#variant' => $variant,
     ];
   }