diff --git a/modules/ui_patterns_library/src/Controller/PatternsLibraryController.php b/modules/ui_patterns_library/src/Controller/PatternsLibraryController.php
index 132d266303e3ced3728c3f96fbb2638af29adf48..3c7d3d5d85dfbacc2e8e2ef6bab19d77ebb9b431 100644
--- a/modules/ui_patterns_library/src/Controller/PatternsLibraryController.php
+++ b/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 [
diff --git a/modules/ui_patterns_test/templates/button/pattern-button.html.twig b/modules/ui_patterns_test/templates/button/pattern-button.html.twig
index 84df300bd92af18debba0bff8084a7cd73060bcb..e505158689c39eb314277dc34f2e7ca29c0909c8 100644
--- a/modules/ui_patterns_test/templates/button/pattern-button.html.twig
+++ b/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>
diff --git a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-overview-page.html.twig b/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-overview-page.html.twig
index 1832f95d11585eaf6606dac30ec28ef241532565..d1f2bab188cc335f5f20878f087cde527b877e86 100644
--- a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-overview-page.html.twig
+++ b/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 %}
diff --git a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-single-page.html.twig b/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-single-page.html.twig
index 3f11283fdfb837dc8bf1e03d7f4ec765e6ee83d8..958f6d949cd22ba5b3cb6cc19c6233004d0c0739 100644
--- a/modules/ui_patterns_test/ui_patterns_test_theme/templates/patterns/patterns-single-page.html.twig
+++ b/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 %}
diff --git a/src/Definition/PatternDefinition.php b/src/Definition/PatternDefinition.php
index 71f72202c930a0a7ed924d76ef9713bfde58f08d..69b14287e5ef4f9f915b15cc7ed36e4ad43cf80f 100644
--- a/src/Definition/PatternDefinition.php
+++ b/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;
}
diff --git a/src/Element/Pattern.php b/src/Element/Pattern.php
index 1f8047597d6e43150ce39b9baeffcfc34335ff87..2d4b340ea7cc7c3e7ba24e7cc92ea699941b85e8 100644
--- a/src/Element/Pattern.php
+++ b/src/Element/Pattern.php
@@ -95,6 +95,11 @@ class Pattern extends RenderElement {
else {
$element['#markup'] = '';
}
+
+ if (!isset($element['#variant'])) {
+ $element['#variant'] = "";
+ }
+
return $element;
}
diff --git a/src/Plugin/PatternBase.php b/src/Plugin/PatternBase.php
index 2cc71fd2dcde08f9978080c933c671b45c8975eb..bd773d96376b2573698e1fbba51bd8ca3f3b9e1e 100644
--- a/src/Plugin/PatternBase.php
+++ b/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;
}
diff --git a/src/Template/TwigExtension.php b/src/Template/TwigExtension.php
index 6f1dd93fbbb1ca36d7a30fb86d34e4c255dc1920..a7d393d9b2e71113e29900b8c08ad0902f26e255 100644
--- a/src/Template/TwigExtension.php
+++ b/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,
];
}