vanilla-framework 4.52.0 → 4.55.0

package/package.json

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

package/scss/_patterns_content-card.scss

@@ -12,6 +12,8 @@
         Modifier for a 6-column width horizontal layout. Applied ONLY to the parent .p-content-card.
       "&.p-content-card--cols-8":
         Modifier for an 8-column (full-width) layout with 50/50 content and image split on desktop. Applied ONLY to the parent .p-content-card. Image is required.
+      "&.p-content-card--image-top":
+        Modifier that forces the image to appear above the content on all breakpoints and all column variants, overriding the default horizontal and grid layouts.
       "&.has-image":
         State class applied to the parent when the card includes an image.
       "&.has-desc":
@@ -642,5 +644,77 @@ $card-height-8col: 22rem;
       outline: 3px solid var(--color-focus, #0066cc);
       outline-offset: 2px;
     }
+
+    /* Forces image above content on all breakpoints,
+       overriding horizontal and grid layouts.*/
+    @include mq-min($breakpoint-small) {
+      &.p-content-card--image-top.p-content-card--cols-4,
+      &.p-content-card--image-top.p-content-card--cols-6 {
+        flex-direction: column;
+        height: auto;
+        min-height: $card-height-vertical;
+        padding: 0;
+        padding-top: var(--spacing-vertical-large, $sp-medium);
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4 .p-content-card__image-wrapper,
+      &.p-content-card--image-top.p-content-card--cols-6 .p-content-card__image-wrapper {
+        flex: unset;
+        width: 100%;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4 .p-content-card__image,
+      &.p-content-card--image-top.p-content-card--cols-6 .p-content-card__image {
+        height: auto;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4 .p-content-card__body,
+      &.p-content-card--image-top.p-content-card--cols-6 .p-content-card__body {
+        padding: 0 $sp-medium;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4 .p-content-card__footer-outer,
+      &.p-content-card--image-top.p-content-card--cols-6 .p-content-card__footer-outer {
+        padding: 0 $sp-medium var(--spacing-vertical-small, $sp-small) $sp-medium;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-4:not(.has-image),
+      &.p-content-card--image-top.p-content-card--cols-6:not(.has-image) {
+        height: $card-height-default;
+        min-height: $card-height-default;
+      }
+    }
+
+    @include mq-min($breakpoint-large) {
+      &.p-content-card--image-top.p-content-card--cols-6 {
+        height: auto;
+        min-height: $card-height-vertical;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-8.has-image {
+        display: flex;
+        flex-direction: column;
+        min-height: $card-height-8col;
+        padding-top: 0;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-8.has-image .p-content-card__image-wrapper {
+        grid-column: unset;
+        grid-row: unset;
+        height: auto;
+        padding: 0;
+        padding-bottom: var(--spacing-vertical-large, $sp-medium);
+        width: 100%;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-8.has-image .p-content-card__image {
+        aspect-ratio: 16/9;
+        height: auto;
+      }
+
+      &.p-content-card--image-top.p-content-card--cols-8.has-image .p-content-card__content {
+        grid-column: unset;
+      }
+    }
   }
 }

package/templates/_macros/vf_card.jinja

@@ -24,17 +24,19 @@
     Params: columns (8), heading (req), link (req), image (req), author (opt), date (opt), footer (opt), description (opt)
 #}
 
-{%- macro vf_card(columns="2", link=None, heading=None, image=None, author=None, date=None, footer=None, description=None) -%}
+{%- macro vf_card(columns="2", link=None, heading=None, image=None, author=None, date=None, footer=None, description=None, stacked_image=False) -%}
 
 {%- set col_str = columns | string -%}
 {%- set layout = 'p-content-card--cols-' ~ col_str -%}
 {%- set img_class = 'has-image' if image else '' -%}
 {%- set has_desc = 'has-desc' if description else '' -%}
 {%- set heading_extra_class = 'p-heading--1 ' if col_str == '8' else '' -%}
+{%- set stacked_image_class = 'p-content-card--image-top' if stacked_image else '' -%}
+{%- set content_types = [footer.content_type] if footer.content_type is string else footer.content_type -%}
 
 <div class="p-content-card-wrapper p-content-card-wrapper--{{ col_str }}">
 
-    <div class="p-content-card {{ layout }} {{ img_class }} {{ has_desc }}">
+    <div class="p-content-card {{ layout }} {{ img_class }} {{ has_desc }} {{ stacked_image_class }}">
 
         {%- if link -%}
             <a href="{{ link }}" class="p-content-card__overlay-link" tabindex="-1" aria-hidden="true"></a>
@@ -91,7 +93,9 @@
                         {%- endif -%}
 
                         {%- if footer.content_type %}
-                            <span class="p-chip--information is-readonly">{{ footer.content_type }}</span>
+                            {%- for type in content_types -%}
+                                <span class="p-chip--information u-no-margin--right is-readonly">{{ type }}</span>
+                            {%- endfor -%}
                         {%- endif -%}
                     </div>
                 </div>

package/templates/_macros/vf_equal-heights.jinja

@@ -66,6 +66,15 @@
     {%- if has_two_top_cols -%}
       </div>
     {%- endif -%}
+    {%- if has_cta -%}
+      <div class="grid-row">
+        <div class="grid-col-4 grid-col-medium-2 grid-col-start-large-5">
+          <p>
+            {{- cta_content -}}
+          </p>
+        </div>
+      </div>
+    {%- endif -%}
     </div>
 
     <div class="grid-row">
@@ -80,15 +89,5 @@
         ) }}
       </div>
     </div>
-    {%- if has_cta -%}
-      <div class="grid-row">
-        <hr class="p-rule--muted">
-        <div class="grid-col-4 grid-col-medium-2 grid-col-start-large-5 grid-col-start-medium-3">
-          <p>
-            {{- cta_content -}}
-          </p>
-        </div>
-      </div>
-    {%- endif -%}
   </div>
 {%- endmacro -%}

package/templates/_macros/vf_tiered-list.jinja

@@ -58,6 +58,15 @@
             </div>
           </div>
         {%- endif -%}
+        {% if has_cta == true -%}
+          <div class="grid-row">
+            <div class="grid-col-4 grid-col-start-large-5">
+              <p>
+                {{ cta_content }}
+              </p>
+            </div>
+          </div>
+        {%- endif %}
       {%- else -%}
         <div class="u-fixed-width">
           {{ title_content }}
@@ -69,9 +78,6 @@
       When there is a CTA, we use shallow spacing to space the list away from the CTA.
       When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space.
     -#}
-    {%- if has_cta -%}
-      <div class="p-section--shallow">
-      {%- endif -%}
       {%- for number in range(1, 25) -%}
         {%- set list_item_title_content = caller('list_item_title_' + number|string) -%}
         {%- set has_title_content = list_item_title_content|trim|length > 0 -%}
@@ -118,19 +124,5 @@
           {%- endif -%}
         {%- endif -%}
       {% endfor %}
-      {%- if has_cta -%}
-      </div>
-    {%- endif -%}
-
-    {% if has_cta == true -%}
-      <div class="grid-row">
-        <hr class="p-rule--muted">
-        <div class="grid-col-4 grid-col-start-large-5">
-          <p>
-            {{ cta_content }}
-          </p>
-        </div>
-      </div>
-    {%- endif %}
   </div>
 {%- endmacro %}