vanilla-framework 4.21.2 → 4.23.0

package/package.json

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

package/scss/_base_grid-definitions.scss

@@ -112,6 +112,19 @@
     }
   }
 
+  %vf-grid-row-subgrid {
+    @extend %vf-grid-row;
+
+    @supports (display: grid) {
+      & > * {
+        display: grid;
+        grid-column: span calc($grid-8-columns / 4);
+        grid-row: span 100;
+        grid-template-rows: subgrid;
+      }
+    }
+  }
+
   %vf-grid-container-padding {
     // set static outside padding per breakpoint
     padding-left: map-get($grid-margin-widths, small);

package/scss/_base_icon-definitions.scss

@@ -1486,3 +1486,30 @@
 @mixin vf-icon-credit-card-themed {
   @include vf-themed-icon($light-value: vf-icon-credit-card-url($colors--light-theme--icon), $dark-value: vf-icon-credit-card-url($colors--dark-theme--icon));
 }
+
+// ICONS ADDED IN MARCH 2025 v4.22.0
+// heading
+@function vf-icon-heading-url($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='M3.704 13.544V2.456h1.648v4.592h5.296V2.456h1.648v11.088h-1.648V8.456H5.352v5.088z'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-heading($color: $colors--light-theme--icon) {
+  background-image: vf-icon-heading-url($color);
+}
+
+@mixin vf-icon-heading-themed {
+  @include vf-themed-icon($light-value: vf-icon-heading-url($colors--light-theme--icon), $dark-value: vf-icon-heading-url($colors--dark-theme--icon));
+}
+
+// quote
+@function vf-icon-quote-url($color) {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='#{vf-url-friendly-color($color)}'  d='m3.623 12.782-2.026-.856q1.17-2.206 1.576-4.008.45-1.846.45-3.378v-.766q0-.36-.045-.765h3.018v.495q0 2.522-.72 4.82-.721 2.25-2.253 4.458m7.477 0-2.027-.856q1.125-2.206 1.531-4.008.45-1.846.45-3.378v-.766q0-.36-.045-.765h3.018q.045.135.045.27v.225q0 2.522-.766 4.82-.72 2.25-2.206 4.458'/%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-quote($color: $colors--light-theme--icon) {
+  background-image: vf-icon-quote-url($color);
+}
+
+@mixin vf-icon-quote-themed {
+  @include vf-themed-icon($light-value: vf-icon-quote-url($colors--light-theme--icon), $dark-value: vf-icon-quote-url($colors--dark-theme--icon));
+}

package/scss/_patterns_icons.scss

@@ -2051,4 +2051,20 @@
   }
 }
 
-// **Base and Pattern mixins accurate as of October 2024**
+// ICONS ADDED IN MARCH 2025
+
+@mixin vf-p-icon-heading {
+  .p-icon--heading {
+    @extend %icon;
+    @include vf-icon-heading-themed;
+  }
+}
+
+@mixin vf-p-icon-quote {
+  .p-icon--quote {
+    @extend %icon;
+    @include vf-icon-quote-themed;
+  }
+}
+
+// **Base and Pattern mixins accurate as of March 2025**

package/scss/_patterns_pricing-block.scss

@@ -0,0 +1,47 @@
+/*
+  @classreference
+  pricing-block:
+    Pricing block:
+      .p-pricing-block:
+        Main element of the pricing block component, to represent 4 cards.
+      .p-pricing-block--25-75:
+        Modifier class for 3 cards with a 25-75 split. The first 25% row is empty.
+      .p-pricing-block--50-50:
+        Modifier class for 2 cards, where each card takes up 50% of the row.
+    Column:
+      .p-pricing-block__tier:
+        Column element within a pricing block. Each column represents a card.
+*/
+
+@import 'settings';
+
+@mixin vf-p-pricing-block {
+  .p-pricing-block,
+  .p-pricing-block--25-75,
+  .p-pricing-block--50-50 {
+    @extend %vf-grid-row-subgrid;
+
+    .p-pricing-block__tier {
+      grid-column: span $grid-8-columns-small;
+      padding-bottom: $spv--x-large;
+
+      @media (min-width: $threshold-4-6-col) {
+        grid-column: span calc($grid-8-columns-medium / 2);
+      }
+    }
+  }
+
+  .p-pricing-block--25-75 .p-pricing-block__tier {
+    @media (min-width: $threshold-6-12-col) {
+      &:first-child {
+        grid-column: calc($grid-8-columns / 4 + 1) / span calc($grid-8-columns / 4); // Shift the first card to the right
+      }
+    }
+  }
+
+  .p-pricing-block--50-50 .p-pricing-block__tier {
+    @media (min-width: $threshold-6-12-col) {
+      grid-column: span $grid-8-columns-small;
+    }
+  }
+}

package/scss/_vanilla.scss

@@ -38,6 +38,7 @@
 @import 'patterns_navigation-reduced';
 @import 'patterns_notifications';
 @import 'patterns_pagination';
+@import 'patterns_pricing-block';
 @import 'patterns_pull-quotes';
 @import 'patterns_rule';
 @import 'patterns_search-and-filter';
@@ -134,6 +135,7 @@
   @include vf-p-navigation-reduced;
   @include vf-p-notification;
   @include vf-p-pagination;
+  @include vf-p-pricing-block;
   @include vf-p-pull-quotes;
   @include vf-p-rule;
   @include vf-p-search-and-filter;

package/templates/_macros/vf_linked-logo-section.jinja

@@ -0,0 +1,75 @@
+{#
+  Params
+  - title_text (string) (required): The text to be displayed as the heading
+  - layout: layout of linked logo section. Options are '50/50', '25/75', 'full-width'
+  - links (array) (required) : Array of links, each including 'href', 'label', 'text', and 'image_html'
+#}
+
+{% macro vf_linked_logo_section(title_text, links, layout="full-width") -%}
+  {% set layout = layout | trim | replace('/', '-') %}
+
+  {% if layout not in ['50-50', '25-75', 'full-width'] %}
+    {% set layout = 'full-width' %}
+  {% endif %}
+
+  {% set max_logos_map = {
+    "full-width": 8,
+    "50-50": 6,
+    "25-75": 9
+  } %}
+
+  {% set max_logos = max_logos_map[layout] or 8 %}
+  {% set links = links[:max_logos] %}
+
+  {% macro _list(links, cols_per_item=2) %}
+    {%- if links|length > 1 -%}
+      <div class="grid-row">
+        {%- for link in links -%}
+          <div class="grid-col-{{ cols_per_item }} grid-col-medium-{{ cols_per_item }}">
+            <a href="{{ link.href }}" aria-label="{{ link.label }}">
+              <div class="p-image-container--16-9 is-highlighted">
+                {{ link.image_html | safe }}
+              </div>
+              <hr class="p-rule--muted">
+              <p>{{ link.text }}</p>
+            </a>
+          </div>
+        {%- endfor -%}
+      </div>
+    {%- endif -%}
+  {% endmacro %}
+
+  <section class="p-section">
+    <hr class="p-rule is-fixed-width"/>
+    {%- if layout == "50-50" -%}
+      <div class="p-section--shallow">
+        <div class="grid-row">
+          <div class="grid-col-4">
+            <h2>{{ title_text }}</h2>
+          </div>
+          <div class="grid-col-4 grid-col-medium-4">
+            {{ _list(links) }}
+          </div>
+        </div>
+      </div>
+    {%- elif layout == "25-75" -%}
+      <div class="p-section--shallow">
+        <div class="grid-row">
+          <div class="grid-col-2">
+            <h2>{{ title_text }}</h2>
+          </div>
+          <div class="grid-col-6">
+            {{ _list(links) }}
+          </div>
+        </div>
+      </div>
+    {%- else -%}
+      <div class="p-section--shallow">
+        <div class="grid-row">
+          <h2>{{- title_text -}}</h2>
+        </div>
+      </div>
+      {{ _list(links) }}
+    {%- endif -%}
+  </section>
+{%- endmacro %}

package/templates/_macros/vf_pricing-block.jinja

@@ -0,0 +1,88 @@
+{#
+  Params
+  - title_text (string) (required): The text to be displayed as the heading
+  - tiers (Array<{
+      tier_name_text: String,
+      tier_price_text: String,
+      tier_price_explanation: String,
+      tier_description_html?: String,
+      tier_label_text: String,
+      tier_offerings: Array<{
+        list_item_style?: ‘ticked’ | ‘crossed’,
+        list_item_content_html: string
+      }>‘,
+      cta_html?: String
+    }>) (required)
+  Slots
+  - description (optional): paragraph-style content below the title
+#}
+{%- macro vf_pricing_block(
+  title_text="",
+  tiers=[]
+  ) -%}
+  {% set section_description = caller('section_description') %}
+  {% set has_tier_descriptions = (tiers | selectattr("tier_description_html") | list | length) > 0 %}
+  {% if tiers|length == 2 %}
+    {% set base_class_name = "p-pricing-block--50-50" %}
+  {% elif tiers|length == 3 %}
+    {% set base_class_name = "p-pricing-block--25-75" %}
+  {% else %}
+    {% set base_class_name = "p-pricing-block" %}
+  {% endif %}
+
+  {%- macro _tier_offerings_list(tier) %}
+    <p class="u-text--muted">What's included</p>
+    <hr class="p-rule--muted u-no-margin--bottom" />
+    <ul class="p-list--divided">
+      {%- for offering in tier.get("tier_offerings") %}
+        {%- set item_style = offering.get('list_item_style', 'undefined') -%}
+        {% if item_style == 'ticked' -%}
+          {% set item_class = "is-ticked" -%}
+        {% elif item_style == 'crossed' -%}
+          {% set item_class = "is-crossed u-text--muted" -%}
+        {% else -%}
+          {% set item_class = "has-bullet" -%}
+        {%- endif -%}
+        <li class="p-list__item {{ item_class }}">{{ offering.list_item_content_html }}</li>
+      {% endfor -%}
+    </ul>
+  {%- endmacro -%}
+
+  <div class="p-section">
+    <div class="p-section--shallow">
+      <hr class="p-rule--highlight is-fixed-width" />
+      <div class="grid-row">
+        <div class="grid-col-4 grid-col-medium-4 grid-col-small-4">
+          <h2>{{ title_text }}</h2>
+        </div>
+        {%- if section_description -%}
+          <div class="grid-col-4 grid-col-medium-4 grid-col-small-4">{{ section_description }}</div>
+        {%- endif -%}
+      </div>
+    </div>
+
+    <div class="{{ base_class_name }}">
+      {%- for tier in tiers %}
+        <div class="p-pricing-block__tier">
+          <div class="p-pricing-block__section">
+            <div class="p-section--shallow">
+              <h3 class="p-heading--4">
+                {{ tier.get("tier_name_text") }}
+                <br />
+                <strong>{{ tier.get("tier_price_text") }}</strong>
+                <span class="u-text--muted">{{ tier.get("tier_price_explanation") }}</span>
+              </h3>
+            </div>
+          </div>
+          {%- if has_tier_descriptions -%}
+            {% set description = tier.get("tier_description_html") if tier.get("tier_description_html") else '' %}
+            <div class="p-pricing-block__section"
+                 {% if not description %}role="presentation"{% endif %}>{{ description }}</div>
+          {%- endif %}
+          <div class="p-pricing-block__section">{{ _tier_offerings_list(tier) }}</div>
+          {% if tier.cta_html %}<div class="p-pricing-block__section">{{ tier.cta_html }}</div>{% endif -%}
+        </div>
+      {%- endfor -%}
+    </div>
+  </div>
+{% endmacro -%}