vanilla-framework 4.29.0 → 4.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.29.0",
+  "version": "4.31.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -58,7 +58,7 @@
   ],
   "devDependencies": {
     "@canonical/cookie-policy": "3.6.5",
-    "@canonical/latest-news": "1.5.0",
+    "@canonical/latest-news": "1.6.0",
     "@percy/cli": "1.30.7",
     "@testing-library/cypress": "10.0.3",
     "autoprefixer": "10.4.20",

package/scss/_patterns_newsletter-signup.scss

@@ -0,0 +1,39 @@
+/*
+  @classreference
+  newsletter-signup:
+    Newsletter signup:
+      .p-newsletter-signup:
+        Main element of the newsletter signup component.
+      .p-newsletter-signup--25-75:
+        Modifier class for a 25-75 split layout.
+      .p-newsletter-signup--50-50:
+        Modifier class for a 50-50 split layout.
+      .p-newsletter-signup--2-col:
+        Modifier class for a 2 column layout.
+        Takes at most 2 columns on large and medium dimensions.
+        Takes full width  on small dimensions.
+      .p-newsletter-signup--4-col:
+        Modifier class for a 4 column layout.
+        Takes at most 4 columns on large and medium dimensions.
+        Takes full width  on small dimensions.
+*/
+
+@import 'settings';
+
+@mixin vf-p-newsletter-signup {
+  .p-newsletter-signup--2-col {
+    padding-bottom: 0;
+
+    @media (width < $breakpoint-small) {
+      padding-bottom: $spv--strip-regular * 0.5;
+    }
+  }
+
+  .p-newsletter-signup--4-col {
+    padding-bottom: 0;
+
+    @media (width < $breakpoint-large) {
+      padding-bottom: $spv--strip-regular * 0.5;
+    }
+  }
+}

package/scss/_vanilla.scss

@@ -39,6 +39,7 @@
 @import 'patterns_notifications';
 @import 'patterns_pagination';
 @import 'patterns_pricing-block';
+@import 'patterns_newsletter-signup';
 @import 'patterns_pull-quotes';
 @import 'patterns_rule';
 @import 'patterns_search-and-filter';
@@ -133,6 +134,7 @@
   @include vf-p-muted-heading;
   @include vf-p-navigation;
   @include vf-p-navigation-reduced;
+  @include vf-p-newsletter-signup;
   @include vf-p-notification;
   @include vf-p-pagination;
   @include vf-p-pricing-block;

package/templates/_macros/shared/vf_dedent.jinja

@@ -0,0 +1,36 @@
+{#-
+ Shared Dedent macro for Jinja templates.
+ Determines the minimum indentation of a block of text and removes it from each line.
+ This allows multi-line strings to be passed as parameters while maintaining readability in the template code and retaining the original formatting.
+ Usage: {{ vf_dedent(text_block='
+        This is a multi-line string
+          that will be dedented
+            to remove the minimum indentation.
+ ') }} ->
+ This is a multi-line string
+    that will be dedented
+      to remove the minimum indentation.
+ -#}
+{% macro vf_dedent(text_block) -%}
+  {%- set lines = text_block.split('\n') -%}
+  {%- set ns = namespace(min_indent=none) -%}
+
+  {#- Find the minimum indentation of all non-empty lines -#}
+  {%- for line in lines -%}
+    {%- if line | trim | length > 0 -%}
+      {%- set indent = (line | length) - (line | trim | length) -%}
+      {%- if ns.min_indent is none or indent < ns.min_indent -%}
+        {%- set ns.min_indent = indent -%}
+      {%- endif -%}
+    {%- endif -%}
+  {%- endfor -%}
+
+  {#- Rebuild the string with the minimum indentation removed -#}
+  {%- if ns.min_indent and ns.min_indent > 0 -%}
+    {%- for line in lines -%}
+      {{- line[ns.min_indent:] -}}{%- if not loop.last and not loop.first %}<br/>{% endif -%}
+    {%- endfor -%}
+  {%- else -%}
+    {{- text_block -}}
+  {%- endif -%}
+{%- endmacro %}

package/templates/_macros/vf_basic-section.jinja

@@ -0,0 +1,368 @@
+{% from "_macros/shared/vf_dedent.jinja" import vf_dedent %}
+{% from "_macros/vf_linked-logo-section.jinja" import vf_linked_logo_section %}
+
+# description_config
+# - type: "text" | "html" (default is "text")
+# - content: The content of the description. Could be plain text (if type is "text") or HTML (if type is "html").
+{% macro _basic_section_description(description_config={}) %}
+  {%- set type = (description_config.get("type", "text")) | trim -%}
+  {%- if type not in ["text", "html"] -%}
+    {%- set type = "text" -%}
+  {%- endif -%}
+
+  {%- if type == "text" -%}
+    <p>{{- description_config.get("content", "") -}}</p>
+  {%- elif type == "html" -%}
+    {{- description_config.get("content", "") | safe -}}
+  {%- endif -%}
+{% endmacro %}
+
+# image_config
+# - aspect_ratio: "16-9" | "3-2" | "" (default is "")
+# - caption_html: The HTML content for the caption of the image (optional). Will be wrapped in <figcaption>, and the image and caption will be wrapped in a <figure>.
+# - attrs: A dictionary of attributes to apply to the image
+{% macro _basic_section_image(image_config={}) %}
+  {%- set aspect_ratio = image_config.get("aspect_ratio", "") | trim -%}
+  {%- if aspect_ratio not in ["16-9", "3-2"] -%}
+    {%- set aspect_ratio = "" -%}
+  {%- endif -%}
+
+  {%- set caption_html = image_config.get("caption_html", "") | trim -%}
+  {%- set has_caption = caption_html | length > 0 -%}
+
+  {%- if has_caption -%}
+  <figure>
+  {%- endif -%}
+  <div class="p-image-container{%- if aspect_ratio | length > 0 -%}--{{- aspect_ratio -}}{%- endif %} is-highlighted">
+    <img class="p-image-container__image {{ image_config.get("attrs", {}).get("class", "") -}}"
+      {%- for attr, value in image_config.get("attrs", {}).items() -%}
+        {% if attr != "class" %}
+          {{ attr }}="{{ value }}"
+        {%- endif -%}
+      {%- endfor -%}
+    />
+  </div>
+  {%- if has_caption -%}
+    <figcaption>
+      {{- caption_html | safe -}}
+    </figcaption>
+  </figure>
+  {%- endif -%}
+{% endmacro %}
+
+# video_config
+# - attrs: A dictionary of attributes to apply to the video iframe
+{% macro _basic_section_video(video_config={}) %}
+  <div class="u-embedded-media">
+    <iframe class="u-embedded-media__element {{ video_config.get("attrs", {}).get("class", "") -}}"
+      {%- for attr, value in video_config.get("attrs", {}).items() -%}
+        {% if attr != "class" %}
+          {{ attr }}="{{ value }}"
+        {%- endif -%}
+      {%- endfor -%}
+    ></iframe>
+  </div>
+{% endmacro %}
+
+# list_config
+# - list_item_type: "bullet" | "tick" | "cross" | "number" | "" (default is "")
+# - list_items: A list of items to be displayed in the section.
+# - - content: The HTML content of the list item.
+# - - sublist: A nested list configuration
+{% macro _basic_section_list(list_config={}) %}
+  {%- if list_config.get("list_items", []) | length > 0 -%}
+    {#- Note: namespace() requires jinja2 2.10 or later -#}
+    {%- set ns = namespace(list_tag="ul") -%}
+
+    {#- If any of the list items is numbered, the entire list is numbered -#}
+    {%- for list_item in list_config.get("list_items", []) -%}
+      {%- if list_item.get("list_item_type", "")|trim|lower == "number" -%}
+        {%- set ns.list_tag = "ol" -%}
+      {%- endif -%}
+    {%- endfor -%}
+
+    <{{ ns.list_tag }} class="p-list--divided">
+    {%- for list_item in list_config.get("list_items", []) -%}
+      {%- set list_item_type=list_item.get("list_item_type", "") | trim | lower -%}
+      {#- If the list is ordered, ignore list item type. Prevents from drawing both a tick and a number, for example. -#}
+      {%- if ns.list_tag == "ol" -%}
+        {%- set list_item_type = 'number' -%}
+      {%- elif list_item_type|length > 0 and list_item_type not in ['bullet', 'tick', 'number', 'cross'] -%}
+        {%- set list_item_type = '' -%}
+      {%- endif -%}
+
+      {%- set list_item_style_class = "" -%}
+      {%- if list_item_type == "bullet" -%}
+        {%- set list_item_style_class = "has-bullet" -%}
+      {%- elif list_item_type == "tick" -%}
+        {%- set list_item_style_class = "is-ticked" -%}
+      {%- elif list_item_type == "cross" -%}
+        {%- set list_item_style_class = "is-crossed u-text--muted" -%}
+      {%- endif -%}
+
+      <li class="p-list__item {{ list_item_style_class }}">
+        {{- list_item.get("content", "") | safe -}}
+        {%- if "sublist" in list_item -%}
+          {{- _basic_section_list(list_config=list_item["sublist"]) -}}
+        {%- endif -%}
+      </li>
+    {%- endfor -%}
+    </{{ ns.list_tag }}>
+  {%- endif -%}
+{% endmacro %}
+
+# code_block_config
+# - content: The HTML content to be displayed in the code block. Will be wrapped in a <pre> tag.
+# - is_code_snippet: Boolean to indicate if the content is a code snippet (default is false). If true, the content will be wrapped in a <code> tag, within the <pre> tag.
+{% macro _basic_section_code_block(code_block_config={}) %}
+  {%- set is_code_snippet = code_block_config.get("is_code_snippet", False) -%}
+  <pre>
+    {%- if is_code_snippet -%}
+    <code>
+    {%- endif -%}
+    {{- vf_dedent(code_block_config.get("content", "")) | safe -}}
+    {%- if is_code_snippet -%}
+    </code>
+    {%- endif -%}
+  </pre>
+{% endmacro %}
+
+# logo_block_config
+# - logos: A list of logos to be displayed in the section.
+# - - attrs: A dictionary of attributes to apply to the logo
+# - - is_fixed_width: Boolean to indicate if the logo should be wrapped in a fixed-width container (default is true).
+# - - has_line_break_after: Boolean to indicate if a line break should be included after the logo (default is false). This will be hidden on small screens.
+#       See https://vanillaframework.io/docs/patterns/logo-section#line-breaks
+{% macro _basic_section_logo_block(logo_block_config={}) %}
+  {%- set is_fixed_width = logo_block_config.get("is_fixed_width", true) != false -%}
+  {%- if is_fixed_width -%}<div class="u-fixed-width">{%- endif -%}
+    <div class="p-logo-section">
+      {%- for logo in logo_block_config.get("logos", []) -%}
+        <div class="p-logo-section__item">
+          <img class="p-logo-section__logo {{ logo.get("attrs", {}).get("class", "") -}}"
+            {%- for attr, value in logo.get("attrs", {}).items() -%}
+              {% if attr != "class" %}
+                {{ attr }}="{{ value }}"
+              {%- endif -%}
+            {%- endfor -%}
+          />
+          {%- if logo.get("has_line_break_after", false) -%}
+            <br class="u-hide--small">
+          {%- endif -%}
+        </div>
+      {%- endfor -%}
+    </div>
+  {%- if is_fixed_width -%}</div>{%- endif -%}
+{% endmacro %}
+
+# linked_logo_block_config
+#   - links (array) (required) : Array of links, each including 'href', 'label', 'text', and 'image_attrs'
+{% macro _basic_section_linked_logo_block(linked_logo_block_config={}) %}
+  {{- vf_linked_logo_section(
+    links=linked_logo_block_config.get("links", []),
+    top_rule_variant="none",
+    padding="none"
+  ) -}}
+{% endmacro %}
+
+# content_html: The inner HTML for the call-to-action button.
+# button_type: "primary" | "secondary" (default is "primary")
+# attrs: A dictionary of attributes to apply to the button or link.
+{% macro _cta_button(content_html, button_type="", attrs={}) %}
+  {%- set cta_element_tag = "button" -%}
+  {%- if "href" in attrs and attrs.get("href", "") | length > 0 -%}
+    {%- set cta_element_tag = "a" -%}
+  {%- endif -%}
+
+  {%- if button_type not in ["primary", "secondary"] -%}
+    {%- set button_type = "" -%}
+  {%- endif -%}
+
+  {%- set cta_class = "" -%}
+  {%- if button_type == "primary" -%}
+    {%- set cta_class = "p-button--positive" -%}
+  {%- elif button_type == "secondary" -%}
+    {%- set cta_class = "p-button" -%}
+  {%- endif -%}
+
+  <{{ cta_element_tag }} class="{{ cta_class }} {{ attrs.get("class", "") }}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != "class" %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
+    {{- content_html | safe -}}
+  </{{ cta_element_tag }}>
+{% endmacro %}
+
+# cta_block_config
+# - primary
+#  - content_html: The inner HTML for the primary call-to-action button.
+#  - attrs: A dictionary of attributes to apply to the primary button.
+# - secondaries (generally, we recommend using 2):
+#  - content_html: The inner HTML for the secondary call-to-action button.
+#  - attrs: A dictionary of attributes to apply to the secondary button.
+# - link
+#  - content_html: The inner HTML for the link.
+#  - attrs: A dictionary of attributes to apply to the link.
+{% macro _basic_section_cta_block(cta_block_config={}) %}
+  <div class="p-cta-block u-no-padding--bottom">
+    {%- if "primary" in cta_block_config %}
+      {{ _cta_button(
+        content_html=cta_block_config["primary"].get("content_html", ""),
+        attrs=cta_block_config["primary"].get("attrs", {}),
+        button_type="primary"
+      ) }}
+    {%- endif -%}
+    {%- if "secondaries" in cta_block_config %}
+      {%- for secondary in cta_block_config["secondaries"] -%}
+        {{ _cta_button(
+          content_html=secondary.get("content_html", ""),
+          attrs=secondary.get("attrs", {}),
+          button_type="secondary"
+        ) }}
+      {%- endfor -%}
+    {%- endif -%}
+    {%- if "link" in cta_block_config %}
+      {{ _cta_button(
+        content_html=cta_block_config["link"].get("content_html", ""),
+        attrs=cta_block_config["link"].get("attrs", {})
+      ) }}
+    {%- endif -%}
+  </div>
+{% endmacro %}
+
+# item_config
+# - type: "description" | "image" | "video" | "list" | "code-block" | "logo-block" | "liked-logo-block" | "cta-block"
+# - item: The configuration for the item, which varies based on the type.
+{% macro _basic_section_item(item_config={}) %}
+  {%- set type = (item_config.get("type", "")) | trim -%}
+
+  {%- if type == "description" -%}
+    {{- _basic_section_description(item_config.get("item", {})) -}}
+  {%- elif type == "image" -%}
+    {{- _basic_section_image(item_config.get("item", {})) -}}
+  {%- elif type == "video" -%}
+    {{- _basic_section_video(item_config.get("item", {})) -}}
+  {%- elif type == "list"  -%}
+    {{- _basic_section_list(item_config.get("item", {})) -}}
+  {%- elif type == "code-block" -%}
+    {{- _basic_section_code_block(item_config.get("item", {})) -}}
+  {%- elif type =="logo-block" -%}
+    {{- _basic_section_logo_block(item_config.get("item", {})) -}}
+  {%- elif type == "linked-logo-block" -%}
+    {{- _basic_section_linked_logo_block(item_config.get("item", {})) -}}
+  {%- elif type == "cta-block" -%}
+    {{- _basic_section_cta_block(item_config.get("item", {})) -}}
+  {%- endif -%}
+{% endmacro %}
+
+# Params
+# title: A dictionary with "text" and optional "link_attrs" (a dictionary of link attributes for the title).
+# subtitle: A dictionary with "text" (required) and optional "heading_level" (default is 4).
+# label_text: Muted heading above the title.
+# items: A list of items to be displayed in the section.
+# padding: Type of padding to apply to the pattern - "deep", "shallow", "default" (default is "default").
+# is_split_on_medium: Boolean to indicate if the section should be split on medium screens (default is false).
+# top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" (default is "default").
+{% macro vf_basic_section(
+  title={},
+  label_text="",
+  subtitle={},
+  items=[],
+  padding="default",
+  is_split_on_medium=false,
+  top_rule_variant="default"
+) -%}
+
+  {%- set padding = padding | trim -%}
+  {%- if padding not in ["deep", "shallow", "default"] -%}
+    {%- set padding = "default" -%}
+  {%- endif -%}
+
+  {%- set top_rule_variant = top_rule_variant | trim -%}
+  {%- if top_rule_variant not in ["default", "muted", "highlighted", "none"] -%}
+    {%- set top_rule_variant = "default" -%}
+  {%- endif -%}
+
+  {%- if top_rule_variant != "none" -%}
+    {%- set top_rule_classes = "p-rule" -%}
+    {%- if top_rule_variant != "default" -%}
+      {#-
+        p-rule--highlighted doesn't exist (use p-rule--highlight instead), but p-rule--muted does.
+        We keep the external API here consistent ("-ed" suffix) for simplicity but need to handle this internally.
+      -#}
+      {%- if top_rule_variant == "highlighted" -%}
+        {%- set top_rule_classes = "p-rule--highlight" -%}
+      {%- else -%}
+        {#- Other cases: just append the top_rule_variant to the p-rule class. -#}
+        {%- set top_rule_classes = top_rule_classes + "--" + top_rule_variant -%}
+      {%- endif -%}
+    {%- endif -%}
+  {%- endif -%}
+
+  {%- set padding_classes = "p-section--" + padding -%}
+  {%- if padding == "default" -%}
+  {%- set padding_classes = "p-section" -%}
+  {%- endif -%}
+
+  {%- set label_text=label_text|trim -%}
+  {%- set subtitle_text = subtitle.get("text", "") | trim -%}
+  {%- set subtitle_heading_level = subtitle.get("heading_level", 4) -%}
+  {%- if subtitle_heading_level not in [4, 5] -%}
+    {%- set subtitle_heading_level = 4 -%}
+  {%- endif -%}
+
+  {%- set has_label = label_text|length > 0 -%}
+  {%- set has_subtitle = subtitle_text|length > 0 -%}
+
+<section class="{{ padding_classes }}">
+  <div class="grid-row--50-50{%- if not is_split_on_medium -%}-on-large{%- endif -%}">
+    {%- if top_rule_variant != "none" %}
+    <hr class="{{- top_rule_classes -}}"/>
+    {%- endif -%}
+    <div class="grid-col">
+      {%- if has_label -%}
+        <h3 class="p-muted-heading u-no-padding--top u-no-margin--bottom">{{- label_text -}}</h3>
+      {%- endif -%}
+      <h2>
+        {%- 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>
+    </div>
+    <div class="grid-col">
+      {%- if has_subtitle -%}
+        <p class="p-heading--{{ subtitle_heading_level }}">{{- subtitle_text -}}</p>
+      {%- endif -%}
+      {%- for item in items -%}
+        {%- set item_padding = (item.get("padding", "")) | trim -%}
+        {%- if item_padding not in ["shallow"] -%}
+          {%- set item_padding="" -%}
+        {%- endif -%}
+
+        {%- set item_classes = "" -%}
+        {%- if item_padding | length > 0 -%}
+          {%- set item_classes = "p-section--" + item_padding -%}
+        {%- endif -%}
+
+        {#- Last item should not have any additional padding - the pattern itself already has bottom padding -#}
+        {%- if loop.last -%}
+         {%- set item_classes = "" -%}
+        {%- endif -%}
+        <div{%- if item_classes | length > 0 %} class="{{ item_classes }}"{%- endif -%}>
+        {{- _basic_section_item(item) -}}
+        </div>
+      {%- endfor -%}
+    </div>
+  </div>
+</section>
+
+{%- endmacro %}

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

@@ -1,13 +1,18 @@
 {#
   Params
-  - title_text (string) (required): The text to be displayed as the heading
+  - title_text (string): 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'
+  - if present, `image_attrs` will be used over `image_html` as it provides a more flexible way to pass image attributes.
+  - top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" | "highlighted" | "none" (default is "default").
+  - padding: Type of padding to apply to the pattern - "deep", "shallow", "default", "none" (default is "default").
 #}
 
-{% macro vf_linked_logo_section(title_text, links, layout="full-width") -%}
+{% macro vf_linked_logo_section(title_text="", links=[], layout="full-width", top_rule_variant="default", padding="default") -%}
   {% set layout = layout | trim | replace('/', '-') %}
 
+  {% set has_title = title_text | trim | length > 0 %}
+
   {% if layout not in ['50-50', '25-75', 'full-width'] %}
     {% set layout = 'full-width' %}
   {% endif %}
@@ -21,6 +26,39 @@
   {% set max_logos = max_logos_map[layout] or 8 %}
   {% set links = links[:max_logos] %}
 
+  {% set top_rule_variant = top_rule_variant | trim -%}
+  {%- if top_rule_variant not in ["default", "muted", "highlighted", "none"] -%}
+    {%- set top_rule_variant = "default" -%}
+  {%- endif -%}
+
+  {%- if top_rule_variant != "none" -%}
+    {%- set top_rule_classes = "p-rule" -%}
+    {%- if top_rule_variant != "default" -%}
+      {#-
+        p-rule--highlighted doesn't exist (use p-rule--highlight instead), but p-rule--muted does.
+        We keep the external API here consistent ("-ed" suffix) for simplicity but need to handle this internally.
+      -#}
+      {%- if top_rule_variant == "highlighted" -%}
+        {%- set top_rule_classes = "p-rule--highlight" -%}
+      {%- else -%}
+        {#- Other cases: just append the top_rule_variant to the p-rule class. -#}
+        {%- set top_rule_classes = top_rule_classes + "--" + top_rule_variant -%}
+      {%- endif -%}
+    {%- endif -%}
+  {%- endif -%}
+
+  {%- set padding = padding | trim -%}
+  {%- if padding not in ["deep", "shallow", "default", "none"] -%}
+    {%- set padding = "default" -%}
+  {%- endif -%}
+
+  {%- set padding_classes = "p-section--" + padding -%}
+  {%- if padding == "default" -%}
+  {%- set padding_classes = "p-section" -%}
+  {%- elif padding == "none" -%}
+  {%- set padding_classes = "" -%}
+  {%- endif -%}
+
   {% macro _list(links, cols_per_item=2) %}
     {%- if links|length > 1 -%}
       <div class="grid-row">
@@ -28,7 +66,18 @@
           <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">
+              {#- If image_attrs is present, use it to generate the image HTML -#}
+              {%- if "image_attrs" in link -%}
+                <img class="p-image-container__image {{ link["image_attrs"]["class"] }}"
+                  {% for attr, value in link["image_attrs"].items() %}
+                    {% if attr != "class" %}
+                      {{ attr }}="{{ value }}"
+                    {% endif %}
+                  {% endfor %}
+                >
+              {% else %}
                 {{ link.image_html | safe }}
+              {% endif %}
               </div>
               <hr class="p-rule--muted">
               <p>{{ link.text }}</p>
@@ -39,15 +88,23 @@
     {%- endif -%}
   {% endmacro %}
 
-  <section class="p-section">
-    <hr class="p-rule is-fixed-width"/>
+  {%- if padding == "none" -%}
+  <div>
+  {%- else -%}
+  <section{%- if padding_classes | length > 0 %} class="{{ padding_classes }}"{%- endif -%}>
+  {%- endif -%}
+    {%- if top_rule_variant != "none" -%}
+      <hr class="is-fixed-width {{ top_rule_classes -}}"/>
+    {%- endif -%}
     {%- if layout == "50-50" -%}
       <div class="p-section--shallow">
         <div class="grid-row">
+          {% if has_title %}
           <div class="grid-col-4">
             <h2>{{ title_text }}</h2>
           </div>
-          <div class="grid-col-4 grid-col-medium-4">
+          {% endif %}
+          <div class="grid-col-4 grid-col-start-large-5 grid-col-medium-4 grid-col-start-medium-5">
             {{ _list(links) }}
           </div>
         </div>
@@ -55,21 +112,29 @@
     {%- elif layout == "25-75" -%}
       <div class="p-section--shallow">
         <div class="grid-row">
+          {% if has_title %}
           <div class="grid-col-2">
             <h2>{{ title_text }}</h2>
           </div>
-          <div class="grid-col-6">
+          {% endif %}
+          <div class="grid-col-6 grid-col-start-large-3">
             {{ _list(links) }}
           </div>
         </div>
       </div>
     {%- else -%}
-      <div class="p-section--shallow">
-        <div class="grid-row">
-          <h2>{{- title_text -}}</h2>
+      {% if has_title %}
+        <div class="p-section--shallow">
+          <div class="grid-row">
+            <h2>{{- title_text -}}</h2>
+          </div>
         </div>
-      </div>
+      {% endif %}
       {{ _list(links) }}
     {%- endif -%}
+  {%- if padding == "none" -%}
+  </div>
+  {%- else -%}
   </section>
+  {%- endif -%}
 {%- endmacro %}

package/templates/_macros/vf_newsletter-signup.jinja

@@ -0,0 +1,160 @@
+{#
+    All Params:
+      @param title_text: H2 title text
+      @param input_label: Label for the input field
+      @param checkbox_id: Name for the checkbox field, used for agreeing to something before submitting the form. This may vary based on the backend used to collect form responses.
+      @param checkbox_label: Label for the checkbox
+      @param layout: Layout variant for the section. Options are "50-50", "25-75", "2-col", and "4-col". Default is "25-75".
+      @param form_id: Form ID
+      @param form_action: Action URL for the form submission, typically the form endpoint.
+      @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".
+
+    All Slots:
+      @slot description: Description text, one or more paragraphs
+      @slot addendum: Additional content to include in the form, such as a disclaimer or additional information
+      @slot hidden_fields: Additional hidden fields to include in the form
+#}
+{%- 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", caller=None) -%}
+  {% set layout = layout | trim %}
+  {% if layout not in ['50-50', '25-75', '2-col', '4-col'] %}
+    {% set layout = "25-75" %}
+  {% endif %}
+  {% set top_rule_variant = top_rule_variant | trim %}
+  {% if top_rule_variant not in ['muted', 'highlighted', 'default', 'none'] %}
+    {% set top_rule_variant = "default" %}
+  {% endif %}
+  {% set description = caller('description') %}
+  {% set addendum = caller('addendum') %}
+  {% set hidden_fields = caller('hidden_fields') %}
+  {% 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' %}
+  {%- macro _top_rule() -%}
+    {% if top_rule_variant != 'none' %}
+      {% set rule_class = 'muted' if top_rule_variant == 'muted' else 'highlight' if top_rule_variant == 'highlighted' %}
+      <hr class="p-rule{% if top_rule_variant != 'default' %}--{{ rule_class }}{% endif %} is-fixed-width" />
+    {% endif %}
+  {%- endmacro -%}
+  {%- if is_section_level -%}
+    <section class="p-section">
+    {%- endif -%}
+    {{ _top_rule() | safe }}
+    <div class="grid-row--{% if is_section_level %}{{ layout }}-on-large{% else %}25-25-25-25{% endif %}">
+      {% if is_grid_level %}
+        {%- set upper_limit = 4 if layout == '2-col' else 3 -%}
+        {%- for number in range(1, upper_limit) -%}
+          {%- set col_content = caller('col_' + number|string) -%}
+          <div class="grid-col">{{ col_content | safe }}</div>
+        {%- endfor -%}
+      {% endif %}
+      <div class="grid-col{% if layout == '4-col' %}-4{% endif %} {% if is_grid_level %}p-newsletter-signup--{{ layout }}{% endif %}">
+        {%- if is_grid_level -%}
+          <hr class="p-rule--muted u-hide--large {% if layout == '2-col' %}u-hide--medium{% endif %}" />
+        {%- endif -%}
+        <{{ heading_level }}>{{ title_text }}</{{ heading_level }}>
+        {% if is_section_level %}</div>{% endif %}
+      {% if is_section_level %}<div class="grid-col">{% endif %}
+        {{ description | safe }}
+        <form action="{{ form_action }}" method="post" id="{{ form_id }}">
+          <label class="is-required" for="email">{{ input_label }}:</label>
+          <input required
+                 id="email"
+                 name="email"
+                 maxlength="255"
+                 type="email"
+                 pattern="^[^ ]+@[^ ]+\.[a-z]{2,26}$"
+                 required="required" />
+          <label class="p-checkbox is-required">
+            <input required
+                   class="p-checkbox__input"
+                   value="yes"
+                   aria-labelledby="{{ checkbox_id }}"
+                   name="{{ checkbox_id }}"
+                   type="checkbox" />
+            <span class="p-checkbox__label" id="{{ checkbox_id }}">{{ checkbox_label }}</span>
+          </label>
+          {% if 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 %}
+            {{ hidden_fields | safe }}
+          {% else %}
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="returnURL"
+                   value="{{ return_url }}" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="formid"
+                   value="{{ form_id }}" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="productContext"
+                   id="product-context"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_campaign"
+                   id="utm_campaign"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_medium"
+                   id="utm_medium"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_source"
+                   id="utm_source"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_content"
+                   id="utm_content"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="utm_term"
+                   id="utm_term"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="GCLID__c"
+                   id="GCLID__c"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   name="Facebook_Click_ID__c"
+                   id="Facebook_Click_ID__c"
+                   value="" />
+            <input type="hidden"
+                   aria-hidden="true"
+                   aria-label="hidden field"
+                   id="preferredLanguage"
+                   name="preferredLanguage"
+                   maxlength="255"
+                   value="" />
+          {% endif %}
+        </form>
+      </div>
+    </div>
+    {%- if is_section_level -%}
+    </section>
+  {%- endif -%}
+{%- endmacro -%}

package/templates/_macros/vf_pricing-block.jinja

@@ -1,7 +1,7 @@
 {#
   Params
   - title_text (string) (required): The text to be displayed as the heading
-  - top_rule_variant (string) (optional): Variant of the top rule, default is "highlighted". Options are "muted", "highlighted", "none".
+  - top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none".
   - tiers (Array<{
       tier_name_text: String (optional),
       tier_price_text: String,
@@ -18,12 +18,12 @@
   - description (optional): paragraph-style content below the title
 #}
 {%- macro vf_pricing_block(
-  top_rule_variant="highlighted",
+  top_rule_variant="default",
   title_text="",
   tiers=[]
   ) -%}
   {% set top_rule_variant = top_rule_variant | trim %}
-  {% if top_rule_variant not in ['muted', 'highlighted', 'none'] %}
+  {% if top_rule_variant not in ['muted', 'highlighted', 'default', 'none'] %}
     {% set top_rule_variant = "highlighted" %}
   {% endif %}
   {% set section_description = caller('section_description') %}
@@ -80,12 +80,9 @@
     {%- endfor -%}
   {%- endmacro -%}
   {%- macro _top_rule() -%}
-    {% if top_rule_variant == 'muted' %}
-      <hr class="p-rule--muted is-fixed-width" />
-    {% elif top_rule_variant == 'highlighted' %}
-      <hr class="p-rule--highlight is-fixed-width" />
-    {% elif top_rule_variant == 'none' %}
-      {# No rule #}
+    {% if top_rule_variant != 'none' %}
+      {% set rule_class = 'muted' if top_rule_variant == 'muted' else 'highlight' if top_rule_variant == 'highlighted' %}
+      <hr class="p-rule{% if top_rule_variant != 'default' %}--{{ rule_class }}{% endif %} is-fixed-width" />
     {% endif %}
   {%- endmacro -%}
   <div class="p-section">

package/templates/_macros/vf_text-spotlight.jinja

@@ -3,9 +3,14 @@
       @param title_text: H2 title text
       @param list_items (Array<string>)
       An array of HTML strings to be rendered
+      @param item_heading_level: Level of the heading to use, defaults to 2. Can be 2, or 4.
 #}
-{%- macro vf_text_spotlight(title_text, list_items=[], caller=None) -%}
+{%- macro vf_text_spotlight(title_text, item_heading_level=2, list_items=[], caller=None) -%}
   {% set has_list = list_items | length >= 2 and list_items | length <= 7 %}
+  {% set item_heading_level = item_heading_level | trim %}
+  {%- if item_heading_level not in [2, 4] -%}
+    {%- set item_heading_level = 2 -%}
+  {%- endif -%}
   <section class="p-section">
     <hr class="p-rule is-fixed-width" />
     <div class="grid-row--25-75-on-large">
@@ -15,7 +20,7 @@
       <div class="grid-col">
         {%- if has_list -%}
           {%- for list_item in list_items -%}
-            <p class="p-heading--2">{{- list_item -}}</p>
+            <p class="p-heading--{{ item_heading_level }}">{{- list_item -}}</p>
             {%- if not loop.last %}<hr class="p-rule--muted" />{%- endif %}
           {%- endfor -%}
         {%- else -%}