vanilla-framework 4.40.0 → 4.42.0

package/package.json

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

package/scss/_patterns_table-sortable.scss

@@ -22,9 +22,38 @@
   // stylelint-disable selector-max-type -- table elements can use selector types
   table th {
     &[aria-sort] {
-      align-items: center;
       cursor: pointer;
+      outline-color: $colors--theme--focus;
       white-space: nowrap;
+
+      &:hover,
+      &:focus-visible {
+        color: $colors--theme--link-default;
+      }
+
+      .p-table__sort-button {
+        // "inherit" styles are used to ensure this uses th styles instead of button defaults
+        background: inherit;
+        border: none;
+        color: inherit;
+        display: inline-block;
+        font: inherit;
+        // Cancel the focus outline space to avoid affecting layout
+        margin: -2px -#{$sph--x-small};
+        max-width: 100%;
+        outline-color: inherit;
+        overflow: inherit;
+        // Small spacer for the focus outline
+        padding: 2px $sph--x-small;
+        text-align: inherit;
+        text-decoration: inherit;
+        text-indent: inherit;
+        text-overflow: inherit;
+        text-transform: inherit;
+        text-wrap: inherit;
+        vertical-align: inherit;
+        white-space: inherit;
+      }
     }
 
     &[aria-sort='ascending']::after {
@@ -39,7 +68,6 @@
     }
 
     &[aria-sort]:hover {
-      color: $colors--theme--link-default;
       text-decoration: underline;
     }
   }

package/templates/_macros/vf_resources.jinja

@@ -318,15 +318,25 @@
         ]
       }
     ]
+  @param padding (string) - Optional bottom padding for the section
 #}
-{% 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>

package/templates/_macros/vf_tiered-list.jinja

@@ -3,6 +3,7 @@
 #   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
@@ -10,6 +11,7 @@
 # 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') -%}
@@ -17,8 +19,17 @@
   {%- 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 -%}