vanilla-framework 4.33.0 → 4.34.1

package/README.md

@@ -24,7 +24,7 @@ Vanilla Framework is an extensible CSS framework, built using [Sass](http://sass
 You can link to the latest build to add directly into your markup like so, by replacing the x values with the [version number you wish to link](https://github.com/canonical/vanilla-framework/releases).
 
 ```html
-<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />
+<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla_framework_version_x_x_x_min.css" />
 ```
 
 ### Including Vanilla in your project via NPM or yarn

package/package.json

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

package/scss/_patterns_data-spotlight.scss

@@ -0,0 +1,50 @@
+@import 'settings';
+
+@mixin vf-p-data-spotlight {
+  .p-data-spotlight--2-blocks,
+  .p-data-spotlight--3-blocks,
+  .p-data-spotlight--4-blocks {
+    .p-equal-height-row--wrap .p-equal-height-row__col {
+      border: none;
+    }
+  }
+
+  @media (width > $breakpoint-large) {
+    .p-data-spotlight--2-blocks .p-data-spotlight__title {
+      height: 0;
+    }
+
+    .p-data-spotlight--2-blocks .p-data-spotlight__title-col {
+      // TODO: update the following after the equal height row is updated to use the new grid system
+      grid-column: span 6 !important;
+    }
+  }
+
+  @media (width > $breakpoint-small) {
+    .p-data-spotlight--3-blocks .p-data-spotlight__title {
+      height: 0;
+    }
+  }
+
+  @media (width < $breakpoint-small) {
+    // Apply padding to all blocks except the last one
+    .p-data-spotlight__block:not(:last-child) {
+      padding-bottom: $spv--strip-shallow;
+    }
+  }
+
+  @media (width > $breakpoint-small) and (width < $breakpoint-large) {
+    .p-data-spotlight--4-blocks .p-equal-height-row--wrap > .p-equal-height-row__col:nth-child(-n + 2) {
+      padding-bottom: $spv--strip-shallow;
+    }
+
+    .p-data-spotlight--3-blocks .p-equal-height-row--wrap > .p-equal-height-row__col:nth-child(2) {
+      padding-bottom: $spv--strip-shallow;
+    }
+
+    .p-data-spotlight--2-blocks .p-data-spotlight__title-col {
+      // TODO: update the following after the equal height row is updated to use the new grid system
+      grid-column: span 6 !important;
+    }
+  }
+}

package/scss/_patterns_logo-section.scss

@@ -5,7 +5,7 @@
   }
 
   $logo-section-item-size: 6.5rem; // height of the logos on large screens
-  $logo-section-item-size-small: 4rem; // height of the logos on small screens
+  $logo-section-item-size-small: 4.5rem; // height of the logos on small screens
 
   $logo-section-offset: 1rem; // offset by which rows are pulled closer together
   $logo-section-offset-small: 0.5rem; // height of the logos on small screens

package/scss/_patterns_modal.scss

@@ -8,7 +8,7 @@
     background: $colors--theme--background-overlay;
     bottom: 0;
     display: flex;
-    height: 100vh;
+    height: 100dvh;
     justify-content: center;
     left: 0;
     margin: 0;

package/scss/_settings.scss

@@ -7,8 +7,8 @@
 @import 'global_functions';
 
 // Settings
-@import 'settings_font';
 @import 'settings_spacing';
+@import 'settings_font';
 @import 'settings_animations';
 @import 'settings_assets';
 @import 'settings_breakpoints';

package/scss/_settings_font.scss

@@ -6,10 +6,10 @@ $font-display-option: fallback !default;
 $font-allow-cyrillic-greek-latin: false !default;
 $increase-font-size-on-larger-screens: true !default;
 $font-size-ratio--largescreen: 1.125 !default;
-$font-size-largescreen: #{$font-size-ratio--largescreen}rem;
+$font-size-largescreen: map-get($settings-text-default, font-size) * $font-size-ratio--largescreen;
 $base-font-sizes: (
-  base: 1rem,
-  large: $font-size-largescreen,
+  base: #{map-get($settings-text-default, font-size)}rem,
+  large: #{$font-size-largescreen}rem,
 ) !default;
 
 // TODO removeme? This variable is not used in Vanilla - worth seeing if it's used downstream.

package/scss/_vanilla.scss

@@ -12,6 +12,7 @@
 @import 'patterns_code-snippet';
 @import 'patterns_contextual-menu';
 @import 'patterns_cta';
+@import 'patterns_data-spotlight';
 @import 'patterns_divided-section';
 @import 'patterns_divider';
 @import 'patterns_equal-height-row';
@@ -110,6 +111,7 @@
   @include vf-p-code-snippet;
   @include vf-p-contextual-menu;
   @include vf-p-cta-block;
+  @include vf-p-data-spotlight;
   @include vf-p-divided-section;
   @include vf-p-divider;
   @include vf-p-equal-height-row;

package/templates/_macros/vf_data-spotlight.jinja

@@ -0,0 +1,65 @@
+{# 
+  Parameters:
+    - title (object) (required): A dictionary with the title configuration.
+      - text (string) (required): The text to be displayed as the title.
+      - link_attrs (object) (optional): A dictionary of link attributes for the title.
+    - blocks (array<object>) (required): List of stat blocks to be displayed in the section. Each block is an object with the following properties:
+      - stat (string) (required): The main statistic to be highlighted.
+      - headline (string) (optional): The headline text for the block.
+      - description (string) (optional): The description text for the block.
+      - link (object) (optional): A dictionary with 'url' and 'text' keys for the link.
+        - url (string) (required if link is provided): The URL for the link.
+        - text (string) (required if link is provided): The text for the link.
+#}
+{%- macro vf_data_spotlight(title={}, blocks=[]) -%}
+  {%- set variant = (blocks | length | string) + "-blocks" -%}
+  {%- if variant not in ['2-blocks', '3-blocks', '4-blocks'] -%}
+    {%- set variant = "4-blocks" -%}
+  {%- endif -%}
+  {%- macro _title(title={}) -%}
+    <h2 class="p-muted-heading">
+      {%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%}
+        <a {% for attr, value in title.get("link_attrs", {}).items() -%} {{ attr }}="{{ value }}" {%- endfor -%}>{{- title.get('text', '') -}}</a>
+      {%- else -%}
+        {{- title.get('text', '') -}}
+      {%- endif -%}
+    </h2>
+  {%- endmacro -%}
+  <section class="p-section p-data-spotlight--{{ variant }}">
+    {%- if variant == '4-blocks' -%}
+      <div class="u-fixed-width">{{- _title(title) -}}</div>
+    {%- endif -%}
+    <div class="p-equal-height-row--wrap">
+      {%- if variant in ['2-blocks', '3-blocks'] -%}
+        <div class="p-equal-height-row__col u-no-margin--bottom p-data-spotlight__title-col">
+          <div class="p-equal-height-row__item p-data-spotlight__title">{{- _title(title) -}}</div>
+        </div>
+      {%- endif -%}
+      {%- for block in blocks -%}
+        {%- set has_headline = block.get("headline", "") | trim -%}
+        {%- set has_description = block.get("description", "") | trim -%}
+        {%- set block_link = block.get("link", {}) -%}
+        {%- set has_block_link = "url" in block_link -%}
+        <div class="p-equal-height-row__col u-no-margin--bottom p-data-spotlight__block">
+          <div class="p-equal-height-row__item">
+            <hr class="p-rule--highlight" />
+            <p class="p-heading--1 u-no-margin u-no-padding">{{ block.stat | safe }}</p>
+          </div>
+          {%- if has_headline -%}
+            <p class="p-equal-height-row__item p-heading--3 u-no-margin u-no-padding">{{ block.headline | safe }}</p>
+          {%- endif -%}
+          {%- if has_description -%}
+            <div class="p-equal-height-row__item">
+              <p>{{ block.description | safe }}</p>
+            </div>
+          {%- endif -%}
+          {%- if has_block_link -%}
+            <div class="p-equal-height-row__item">
+              <a href="{{ block.link.url }}">{{ block.link.text | safe }}</a>
+            </div>
+          {%- endif -%}
+        </div>
+      {%- endfor -%}
+    </div>
+  </section>
+{%- endmacro -%}

package/templates/_macros/vf_logo-section.jinja

@@ -0,0 +1,82 @@
+{% from "_macros/vf_basic-section.jinja" import basic_section_item %}
+
+{#
+  Params
+  - logo_block_config (object): Configuration object for the logo block.
+    - item.logos (array<object>) (required): List of logo dictionaries. Each logo should include attributes for the <img> tag (e.g., src, alt).
+#}
+{%- macro _logo_block(logo_block_config={}) -%}
+  <div class="u-fixed-width">
+    <div class="p-logo-section">
+      <div class="p-logo-section__items">
+        {%- for logo in logo_block_config.get("item", {}).get("logos", []) -%}
+          <div class="p-logo-section__item">
+            <img class="p-logo-section__logo" 
+              {%- for attr, value in logo.items() -%} 
+                {% if attr != "class" %} 
+                  {{ attr }}="{{ value }}" 
+                {%- endif -%} 
+              {%- endfor -%} />
+          </div>
+        {%- endfor -%}
+      </div>
+    </div>
+  </div>
+{%- endmacro -%}
+
+{#
+  Params
+  - title (object) (required): A dictionary with the title configuration.
+    - text (string) (required): The text to be displayed as the title.
+    - link_attrs (object) (optional): A dictionary of link attributes for the title.
+  - padding (string) (optional): Type of padding to apply. Options are "deep", "default". Default is "default".
+  - blocks (array<object>) (required): List of blocks to be displayed in the section. Supported block types include:
+    - cta-block: Configuration for a call-to-action block.
+    - logo-block: Configuration for a logo block. Must include:
+      - item.logos (array): A list of logos to display.
+  
+  Slots
+  - description (optional): Paragraph-style content displayed below the title. Can include one or more paragraphs.
+#}
+{%- macro vf_logo_section(title, padding="regular", blocks=[], caller=None) -%}
+  {% set description_content = caller('description') %}
+  {% set has_description = description_content|trim|length > 0 %}
+  {%- set padding = padding | trim -%}
+  {%- if padding not in ["deep", "default"] -%}
+    {%- set padding = "default" -%}
+  {%- endif -%}
+  {%- if padding == "default" -%}  
+    {%- set padding_classes = "p-section" -%}  
+  {%- else -%}  
+    {%- set padding_classes = "p-section--" + padding -%}  
+  {%- endif -%}
+  {%- set cta_block = blocks | selectattr("type", "equalto", "cta-block") | first -%}
+  {%- set logo_block = blocks | selectattr("type", "equalto", "logo-block") | first -%}
+  {%- macro _title_block(title={}) -%}
+    <h2 class="p-text--small-caps">
+      {%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%}
+        <a {% for attr, value in title.get("link_attrs", {}).items() -%} 
+              {{ attr }}="{{ value }}" 
+          {%- endfor -%}>
+          {{- title.get('text', '') -}}
+        </a>
+      {%- else -%}
+        {{- title.get('text', '') -}}
+      {%- endif -%}
+    </h2>
+  {%- endmacro -%}
+  {%- macro _description_block() -%}
+    {% if has_description %}{{ description_content | safe }}{% endif %}
+  {%- endmacro -%}
+  <section class="{{ padding_classes }}">
+    <hr class="p-rule is-fixed-width" />
+    <div class="grid-row--50-50">
+      <div class="grid-col">{{- _title_block(title) -}}</div>
+      <div class="grid-col">
+        {{- _description_block() -}}
+        {% if cta_block %}{{- basic_section_item(cta_block) -}}{% endif %}
+      </div>
+    </div>
+    {{- _logo_block(logo_block) -}}
+  </section>
+{%- endmacro -%}

package/templates/_macros/vf_newsletter-signup.jinja

@@ -10,6 +10,7 @@
       @param return_url: URL to return to after form submission
       @param top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none".
       @param hide_newsletter_block_rule (boolean) (optional): Whether to hide the newsletter block rule on medium/small screens. Default is false.
+      @param submit_btn_class (string) (optional): Additional classes to add to the submit button.
 
     All Slots:
       @slot description: Description text, one or more paragraphs
@@ -17,7 +18,7 @@
       @slot hidden_fields: Additional hidden fields to include in the form
       @slot honeypot_fields: hidden honeypot fields for spam prevention
 #}
-{%- macro vf_newsletter_signup(form_id, return_url, title_text, form_action="https://ubuntu.com/marketo/submit", input_label="Work email", checkbox_id="canonicalUpdatesOptIn", checkbox_label="I agree to receive information about Canonical's products and services.", layout="25-75", top_rule_variant="default", hide_newsletter_block_rule=false, caller=None) -%}
+{%- macro vf_newsletter_signup(form_id, return_url, title_text, form_action="https://ubuntu.com/marketo/submit", input_label="Work email", checkbox_id="canonicalUpdatesOptIn", checkbox_label="I agree to receive information about Canonical's products and services.", layout="25-75", top_rule_variant="default", hide_newsletter_block_rule=false, submit_btn_class="js-submit-button", caller=None) -%}
   {% set layout = layout | trim %}
   {% if layout not in ['50-50', '25-75', '2-col', '4-col'] %}
     {% set layout = "25-75" %}
@@ -27,9 +28,13 @@
     {% set top_rule_variant = "default" %}
   {% endif %}
   {% set description = caller('description') %}
+  {% set has_description = description | trim | length > 0 %}
   {% set addendum = caller('addendum') %}
+  {% set has_addendum = addendum | trim | length > 0 %}
   {% set hidden_fields = caller('hidden_fields') %}
+  {% set has_hidden_fields = hidden_fields | trim | length > 0 %}
   {% set honeypot_fields = caller('honeypot_fields') %}
+  {% set has_honeypot_fields = honeypot_fields | trim | length > 0 %}
   {% set is_section_level = layout in ['50-50', '25-75'] %}
   {% set is_grid_level = layout in ['2-col', '4-col'] %}
   {% set heading_level = 'h2' if is_section_level else 'h3' %}
@@ -58,7 +63,7 @@
         <{{ heading_level }}>{{ title_text }}</{{ heading_level }}>
         {% if is_section_level %}</div>{% endif %}
       {% if is_section_level %}<div class="grid-col">{% endif %}
-        {{ description | safe }}
+        {% if has_description %}{{ description | safe }}{% endif %}
         <form action="{{ form_action }}" method="post" id="{{ form_id }}">
           <label class="is-required" for="email">{{ input_label }}:</label>
           <input required
@@ -77,15 +82,16 @@
                    type="checkbox" />
             <span class="p-checkbox__label" id="{{ checkbox_id }}">{{ checkbox_label }}</span>
           </label>
-          {% if addendum %}
+          {% if has_addendum %}
             {{ addendum | safe }}
           {% else %}
             <p>
               By submitting this form, I confirm that I have read and agree to <a href="https://ubuntu.com/legal/terms-and-policies/privacy-policy">Canonical's Privacy Policy</a>.
             </p>
           {% endif %}
-          <button type="submit" class="u-no-margin--bottom">Sign up</button>
-          {% if hidden_fields %}
+          <button type="submit"
+                  class="u-no-margin--bottom {{ submit_btn_class | safe }}">Sign up</button>
+          {% if has_hidden_fields %}
             {{ hidden_fields | safe }}
           {% else %}
             <input type="hidden"
@@ -154,7 +160,7 @@
                    maxlength="255"
                    value="" />
           {% endif %}
-          {% if honeypot_fields %}
+          {% if has_honeypot_fields %}
             {{ honeypot_fields | safe }}
           {% else %}
             <div class="u-off-screen">