vanilla-framework 4.22.0 → 4.23.1

package/package.json

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

package/scss/_base_code.scss

@@ -50,7 +50,6 @@ $code-inline-padding: 0.25rem;
   pre code {
     background: none;
     box-shadow: none;
-    display: inline-block;
     line-height: map-get($line-heights, default-text);
     margin-left: 0;
     margin-right: 0;

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/_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 -%}