Issue #3444822 by Christian.wiedemann: [2.0.0-alpha3] Add allow_variant_expose source plugin

src/ComponentPluginManager.php

@@ -125,6 +125,9 @@ class ComponentPluginManager extends SdcPluginManager implements CategorizingPlu
     if (!isset($definition['props']['properties'])) {
       return $definition;
     }
+    if (isset($definition["variants"])) {
+      $definition['props']['properties']['variant'] = $this->buildVariantProp($definition);
+    }
     foreach ($definition['props']['properties'] as $prop_id => $prop) {
       $definition["title"] = $definition["title"] ?? $prop_id;
       $prop_type = $this->propTypePluginManager->guessFromSchema($prop);
@@ -163,10 +166,25 @@ class ComponentPluginManager extends SdcPluginManager implements CategorizingPlu
         $definition['slots'][$slot_id] = $slot;
       }
     }
-
     return $definition;
   }
 
+  private function buildVariantProp(array $definition): array {
+    $enums = [];
+    $meta_enums = [];
+    foreach ($definition["variants"] as $variant_id => $variant) {
+      $enums[] = $variant_id;
+      $meta_enums[$variant_id] = $variant['title'] ?? $variant_id;
+    }
+    return [
+      'title' => 'Variant',
+      'type' => 'string',
+      '$ref' => "ui-patterns://variant",
+      'enum' => $enums,
+      'meta:enum' => $meta_enums
+    ];
+  }
+
   /**
    * Finds assets related to the provided metadata file.
    *

src/Element/ComponentElementBuilder.php

@@ -57,12 +57,14 @@ class ComponentElementBuilder implements TrustedCallbackInterface {
   protected function buildProps(array $build, Component $component, array $configuration, array $contexts): array {
     $props = $component->metadata->schema['properties'] ?? [];
     foreach ($props as $prop_id => $prop_definition) {
-      $prop_configuration = $configuration['props'][$prop_id] ?? [];
+      if ($prop_id === 'variant') {
+        $prop_configuration = $configuration['variant_id'] ?? [];
+      }
+      else {
+        $prop_configuration = $configuration['props'][$prop_id] ?? [];
+      }
       $build = $this->buildProp($build, $prop_id, $prop_definition, $prop_configuration, $contexts);
     }
-    if (isset($configuration["variant_id"])) {
-      $build['#props']["variant"] = $configuration["variant_id"];
-    }
     return $build;
   }
 

src/Element/ComponentForm.php

@@ -146,10 +146,13 @@ class ComponentForm extends ComponentFormBase {
     if (!$component_id) {
       return $element;
     }
-    $element['variant_id'] = self::buildComponentVariantSelectorForm(
-      $element,
-      $element['#default_value']['variant_id'] ?? NULL,
-    );
+    $component = static::getComponent($element);
+    if (isset($component->metadata->schema['properties']['variant'])) {
+      $element['variant_id'] = self::buildComponentVariantSelectorForm(
+        $component_id,
+        $element['#default_value']['variant_id'] ?? NULL,
+      );
+    }
     $element['slots'] = self::buildSlotsForm($element, $component_id);
     $element['props'] = self::buildPropsForm($element, $component_id);
   }
@@ -195,22 +198,15 @@ class ComponentForm extends ComponentFormBase {
    *   The variant select.
    */
   private static function buildComponentVariantSelectorForm(
-    array $element,
-    string|NULL $default_variant_id,
+    string $component_id,
+    array|NULL $default_variant_id,
   ): array {
-    $component = static::getComponent($element);
-    $definition = $component->getPluginDefinition();
-    if (!isset($definition["variants"])) {
-      return [];
-    }
-    $options = [];
-    foreach ($definition["variants"] as $variant_id => $variant) {
-      $options[$variant_id] = $variant["title"] ?? $variant_id;
-    }
+
     return [
-      "#type" => "select",
+      "#type" => "component_prop_form",
       "#title" => t("Variant"),
-      "#options" => $options,
+      "#component_id" => $component_id,
+      "#prop_id" => 'variant',
       '#default_value' => $default_variant_id,
     ];
   }

src/Element/ComponentPropsForm.php

@@ -73,6 +73,9 @@ class ComponentPropsForm extends ComponentFormBase {
     }
     $configuration = $element['#default_value']['props'] ?? [];
     foreach ($props as $prop_id => $prop) {
+      if ($prop_id === 'variant') {
+        continue;
+      }
       $prop_type = $prop['ui_patterns']['type_definition'];
       $element[$prop_id] = [
         '#type' => 'component_prop_form',

src/Plugin/UiPatterns/PropType/VariantPropType.php

+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\ui_patterns\Plugin\UiPatterns\PropType;
+
+use Drupal\Component\Render\MarkupInterface;
+use Drupal\Core\Render\RenderableInterface;
+use Drupal\ui_patterns\PropTypePluginBase;
+
+/**
+ * Provides a 'Variant' PropType.
+ *
+ * @PropType(
+ *   id = "variant",
+ *   label = @Translation("Variant"),
+ *   description = @Translation("Prop Type for component variants."),
+ *   priority = 10,
+ *   default_source = "select",
+ *   schema = {
+ *   },
+ * )
+ */
+class VariantPropType extends PropTypePluginBase {
+
+}

src/Plugin/UiPatterns/Source/SelectWidget.php

@@ -15,7 +15,8 @@ use Drupal\ui_patterns\SourcePluginPropValue;
  *   label = @Translation("Select"),
  *   description = @Translation("A drop-down menu or scrolling selection box."),
  *   prop_types = {
- *     "enum"
+ *     "enum",
+ *     "variant"
  *   },
  *   tags = { "widget" }
  * )

tests/modules/ui_patterns_test/components/card/card.component.yml

@@ -9,9 +9,9 @@ icon_map:
   - [rectangle_vertical, square_four, square_five]
 variants:
   default:
-    title: "Default"
+    title: "Default title"
   horizontal:
-    title: "Horizontal"
+    title: "Horizontal title"
 props:
   type: object
   properties:

tests/modules/ui_patterns_test/components/card/card.twig

 {% set attributes = (variant and variant|lower != 'default') ? attributes.addClass('card--' ~ variant) : attributes %}
+Variant: {{ variant }}
 <div{{ attributes.addClass('card') }}>
   {% if image and image_position != 'bottom' %}
     {{ image|add_class('card-img-top') }}