Issue #3488777 by b-ry, jldust, ananya.k: Component: Update Figure Props

components/02-components/figure/figure.component.yml

 $schema: https://git.drupalcode.org/project/sdc/-/raw/1.x/src/metadata.schema.json
 name: Figure
 status: 'experimental'
-description: A simple image component
+description: 'A simple figure component'
 slots:
-  figure_media: {}
-  figure_caption_block: {}
+  media_block: {}
+  caption_block: {}
 props:
   type: object
   properties:
-    figure_media_caption:
+    media:
+      type: string
+      title: Rendered media
+      examples:
+        - '<img src="https://www.example.org/image.jpg" alt="Image description">'
+    caption:
       type: string
       title: Caption Text
       examples:

components/02-components/figure/figure.twig

-{% set figure_classes = ['c-figure']|merge(classes|default([])) %}
+{% set classes = ['c-figure']|merge(classes|default([])) %}
 
-<figure{{attributes.addClass(figure_classes)}}>
-  {{ figure_media }}
+<figure{{attributes.addClass(classes)}}>
+  {% block media_block %}
+    {{ media }}
+  {% endblock %}
 
-  {% block figure_caption_block %}
-    {% if figure_media_caption %}
+  {% block caption_block %}
+    {% if caption %}
       <figcaption class='c-figure__caption'>
-        {{figure_media_caption}}
+        {{caption}}
       </figcaption>
     {% endif %}
   {% endblock %}
-
 </figure>

templates/styleguide/styleguide-content.html.twig

@@ -76,8 +76,8 @@
 <h2 class='styleguide'>Figure</h2>
 <div class='styleguide'>
   {{ include('prototype:figure', {
-  figure_media_caption: 'Example caption',
-  figure_media: content.40['#content'],
+  caption: 'Example caption',
+  media: content.40['#content'],
   attr: attributes,
 }, with_context = false) }}
 </div>