Merge pull request #5746 from canonical/WD-33213

feat: add customizable padding to tiered lists

Author: muhammad-ali-pk

releases.yml

@@ -4,6 +4,10 @@
       url: /docs/base/tables#sortable-updated
       status: Updated
       notes: We've added the table sort button, which enables keyboard-accessible table sorting.
+    - component: Tiered list
+      url: /docs/patterns/tiered-list
+      status: Updated
+      notes: Added a new <code>padding</code> parameter to customize the bottom padding.
 - version: 4.40.0
   features:
     - component: Logo section

templates/_macros/vf_tiered-list.jinja

@@ -3,22 +3,33 @@
 #   desktop vs. 50/50 split between title/description
 # is_list_full_width_on_tablet: whether list title/description each have their
 #   own row on tablet vs. 50/50 split between title/description
+# padding: Type of padding to apply. Options are "deep", "shallow", "default". Default is "default".
 # Slots
 # title: top-level title element
 # description: top-level description element
 # list_item_title_[1-25]: title element of each child list item
 # list_item_description_[1-25]: description element of each child list item
 # cta: CTA block element
 {% macro vf_tiered_list(
+  padding="default",
   is_description_full_width_on_desktop=true,
   is_list_full_width_on_tablet=true) -%}
   {%- set title_content = caller('title') -%}
   {%- set description_content = caller('description') -%}
   {%- set has_description = description_content|trim|length > 0 -%}
   {%- set cta_content = caller('cta') -%}
   {%- set has_cta = cta_content|trim|length > 0 -%}
+  {%- 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 -%}
 
-  <div class="p-section u-fixed-width">
+  <div class="{{ padding_classes }} u-fixed-width">
     <hr class="p-rule">
     <div class="p-section--shallow">
       {% if has_description == true -%}

templates/docs/patterns/tiered-list/index.md

@@ -155,6 +155,26 @@ The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern.
           Whether the list element should be full-width on tablet
         </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>