[Feature] Add a placeholder_color param to Figure

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+- **Figure**
+  - Add the `placeholder_color` param to Figure ([51f625d](https://github.com/studiometa/ui/commit/51f625d), [#100](https://github.com/studiometa/ui/issues/100))
+
 ## v0.2.23 (2022-11-17)
 
 ### Added

packages/docs/components/atoms/Figure/twig-api.md

@@ -76,6 +76,30 @@ Use absolute position on the image holder instead of relative.
 
 Wether to enable the display of the figure inline or not. When `inline`, the root element will have a max-width set corresponding to the `width` given. Use with caution.
 
+### `placeholder`
+
+- Type: `string`
+
+Use a custom placeholder instead of the generic placeholder :
+```twig
+{%- set placeholder_markup -%}
+  <svg xmlns="http://www.w3.org/2000/svg"
+    viewbox="0 0 {{ width }} {{ height }}"
+    width="{{ width }}"
+    height="{{ height }}">
+    <rect x="0" y="0" width="{{ width }}" height="{{ height }}" fill="{{ placeholder_color }}" />
+  </svg>
+{%- endset -%}
+{% set generic_placeholder = 'data:image/svg+xml,%s'|format(placeholder_markup|url_encode) %}
+```
+
+### `placeholder_color`
+
+- Type: `string`
+- Default: `"#eee"`
+
+Set an hexadecimal custom color for the generic placeholder.
+
 ### `attr`
 
 - Type: `array`
@@ -100,7 +124,6 @@ Custom attributes for the image element.
 
 Custom attributes for the caption element.
 
-
 ## Blocks
 
 ### `caption`

packages/ui/atoms/Figure/Figure.twig

@@ -18,6 +18,10 @@
  * @param boolean $inline
  *   Wether to enable the display of the figure inline or not. When `inline`, the root element
  *   will have a max-width set corresponding to the `width` given. Use with caution.
+ * @param string $placeholder
+ *   Use a custom placeholder.
+ * @param string $placeholder_color
+ *   Set an hexadecimal custom color for the generic placeholder.
  * @param array $attr
  *   Custom attributes for the root element.
  * @param array $inner_attr
@@ -44,12 +48,13 @@
 {% set width = width|default(100) %}
 {% set lazy = lazy ?? true %}
 
+{% set placeholder_color = placeholder_color|default('#eee') %}
 {%- set placeholder_markup -%}
   <svg xmlns="http://www.w3.org/2000/svg"
     viewbox="0 0 {{ width }} {{ height }}"
     width="{{ width }}"
     height="{{ height }}">
-    <rect x="0" y="0" width="{{ width }}" height="{{ height }}" fill="#eee" />
+    <rect x="0" y="0" width="{{ width }}" height="{{ height }}" fill="{{ placeholder_color }}" />
   </svg>
 {%- endset -%}
 {% set generic_placeholder = 'data:image/svg+xml,%s'|format(placeholder_markup|url_encode) %}