feat: add padding variants for Resources pattern

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.41.0",
+  "version": "4.42.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.42.0
+  features:
+    - component: Resources
+      url: /docs/patterns/resources
+      status: Updated
+      notes: Added a new <code>padding</code> parameter to customize the section padding.
 - version: 4.41.0
   features:
     - component: Table

templates/_macros/vf_resources.jinja

@@ -319,14 +319,23 @@
       }
     ]
 #}
-{% macro vf_resources(title={}, blocks=[], caller=None) %}
+{% macro vf_resources(title={}, blocks=[], caller=None, padding="default") %}
   {%- set description = blocks | selectattr("type", "equalto", "description") | first -%}
   {%- set cta = blocks | selectattr("type", "equalto", "cta-block") | first -%}
   {%- set resources = blocks | selectattr("type", "equalto", "resources") | first -%}
   {%- set render_images = resources.get("render_images", true) -%}
   {%- set render_categories = resources.get("render_categories", true) -%}
   {%- set is_text_only = not (render_images or render_categories) -%}
-  <section class="p-section">
+  {%- set padding = padding | trim -%}
+  {%- if padding not in ["deep", "shallow", "default"] -%}
+    {%- set padding = "default" -%}
+  {%- endif -%}
+  {%- if padding == "default" -%}  
+    {%- set padding_classes = "p-section" -%}  
+  {%- else -%}  
+    {%- set padding_classes = "p-section--" + padding -%}  
+  {%- endif -%}
+  <section class="{{ padding_classes }}">
     <div class="grid-row--50-50{% if is_text_only %}-on-large{% endif %}{% if not is_text_only %} p-section--shallow{% endif %}">
       {{- vf_section_top_rule("default") -}}
       <div class="grid-col">{{- _title_block(title) -}}</div>

templates/docs/patterns/resources/index.md

@@ -566,6 +566,26 @@ The Resources block allows you to specify categories and resource items to appea
           Time element attributes object, see <a href="/docs/building-vanilla#attribute-forwarding">attribute forwarding</a>
         </td>
       </tr>
+      <tr>
+        <td>
+          <code>padding</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          One of:<br>
+          <code>'deep'</code>,<br>
+          <code>'shallow'</code>,<br>
+          <code>'default'</code>
+        </td>
+        <td>
+          <code>'default'</code>
+        </td>
+        <td>
+          Padding variant for the section
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>