From 20b8308af3deae424aeae9a0bff492f45531484c Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Thu, 23 Jan 2025 09:25:10 -0500 Subject: [PATCH] fix(hero): 50/50 with no image is laid out in split columns (#5450) * fix(hero): 50/50 with no image is laid out in split columns * drive-by: remove old change status labels --- package.json | 2 +- releases.yml | 6 +++++ templates/_macros/vf_hero.jinja | 8 +++--- .../docs/examples/patterns/hero/combined.html | 1 + .../patterns/hero/hero-50-50-no-image.html | 27 +++++++++++++++++++ templates/docs/patterns/hero/index.md | 13 +++++++-- templates/docs/patterns/tiered-list/index.md | 4 +-- templates/docs/utilities/align.md | 2 +- 8 files changed, 54 insertions(+), 9 deletions(-) create mode 100644 templates/docs/examples/patterns/hero/hero-50-50-no-image.html diff --git a/package.json b/package.json index d87bc1531..e8f7dc242 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-framework", - "version": "4.20.0", + "version": "4.20.1", "author": { "email": "webteam@canonical.com", "name": "Canonical Webteam" diff --git a/releases.yml b/releases.yml index 7113092ec..d21409997 100644 --- a/releases.yml +++ b/releases.yml @@ -1,3 +1,9 @@ +- version: 4.20.1 + features: + - component: Hero + url: /docs/patterns/hero#5050-with-no-image-new + status: Updated + notes: We've added support for 50/50 hero sections with no image. - version: 4.20.0 features: - component: List diff --git a/templates/_macros/vf_hero.jinja b/templates/_macros/vf_hero.jinja index 327143099..b6acc4c07 100644 --- a/templates/_macros/vf_hero.jinja +++ b/templates/_macros/vf_hero.jinja @@ -32,6 +32,8 @@ {% set layout = 'fallback' %} {% endif %} + {% set is_50_50_no_image = (layout == "50-50" and not has_image) %} + {% if layout == '50-50-full-width-image' and has_image %} {% set layout = '50-50' %} {% set has_full_width_image = true %} @@ -72,9 +74,9 @@ {% endif %} {%- macro _hero_title_block() -%} - {%- if has_full_width_image -%} + {%- if has_full_width_image or is_50_50_no_image -%} {%- if has_subtitle -%} - {#- On full-width-image, the h1 and h2 are in separate columns, so there must be no margin-bottom to keep h1 close to h2 on smaller screens -#} + {#- On full-width-image and 50/50 with no image, the h1 and h2 are in separate columns, so there must be no margin-bottom to keep h1 close to h2 on smaller screens -#} {% set title_class = "u-no-margin--bottom" %} {%- endif -%} {%- endif -%} @@ -139,7 +141,7 @@ {{ image_content }} {% endif -%} - {% elif has_full_width_image and not has_signpost_image %} + {% elif (has_full_width_image and not has_signpost_image) or is_50_50_no_image %}
{{ _hero_title_block() }}
diff --git a/templates/docs/examples/patterns/hero/combined.html b/templates/docs/examples/patterns/hero/combined.html index 607437d57..110a80b2f 100644 --- a/templates/docs/examples/patterns/hero/combined.html +++ b/templates/docs/examples/patterns/hero/combined.html @@ -23,5 +23,6 @@
{% include 'docs/examples/patterns/hero/hero-50-50-split-on-medium.html' %}
{% include 'docs/examples/patterns/hero/hero-75-25.html' %}
{% include 'docs/examples/patterns/hero/hero-fallback.html' %}
+
{% include 'docs/examples/patterns/hero/hero-50-50-no-image.html' %}
{% endwith %} {% endblock %} diff --git a/templates/docs/examples/patterns/hero/hero-50-50-no-image.html b/templates/docs/examples/patterns/hero/hero-50-50-no-image.html new file mode 100644 index 000000000..f6981107e --- /dev/null +++ b/templates/docs/examples/patterns/hero/hero-50-50-no-image.html @@ -0,0 +1,27 @@ +{% extends "_layouts/examples.html" %} +{% from "_macros/vf_hero.jinja" import vf_hero %} + +{% block title %}Hero / 50/50 / Without image{% endblock %} +{% block standalone_css %}patterns_all{% endblock %} + +{% set is_paper = true %} +{% block content %} + +{% call(slot) vf_hero( + title_text='H1 - ideally one line, up to two', + subtitle_text='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph', + layout='50/50' +) -%} + {%- if slot == 'description' -%} +

+ Generally, the height of the right hand side of a 50/50 split should contain more content than the left + hand side. +

+ {%- endif -%} + {%- if slot == 'cta' -%} + Learn more + Contact us › + {%- endif -%} +{% endcall -%} + +{% endblock %} diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md index b8db9d020..d2501bc75 100644 --- a/templates/docs/patterns/hero/index.md +++ b/templates/docs/patterns/hero/index.md @@ -13,6 +13,7 @@ Depending on the size and composition of your content, you can choose from a var - [50/50](#5050) - [50/50 with full-width image](#5050-with-full-width-image) +- [50/50 with no image](#5050-with-no-image-new) - [25/75 Signpost](#2575-signpost) - [75/25](#7525) - [Fallback](#fallback) @@ -64,6 +65,14 @@ This will make the image take up the full width of the hero. View example of the hero pattern in 50/50 split with a full-width image +### 50/50 with no image {{ status("new") }} + +This layout positions the title in the left half of the hero, and the rest of the text content in the right half. + +
+View example of the hero pattern in 50/50 split with no image +
+ ## 25/75 "signpost" If you have a small image that you want to associate with the hero title, you can use the "signpost" layout. @@ -104,7 +113,7 @@ This places the title and subtitle in their own row above the rest of the hero c View example of the hero pattern in fallback configuration -## Jinja Macro {{ status("new") }} +## Jinja Macro The `vf_hero` Jinja macro can be used to generate a hero pattern. The API for the macro is shown below. @@ -261,7 +270,7 @@ The `vf_hero` Jinja macro can be used to generate a hero pattern. The API for th -## Import {{ status("updated") }} +## Import ### Jinja Macro diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index d00ab9c9f..26792c6e0 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -103,7 +103,7 @@ View example of the tiered list pattern View example of the tiered list pattern -## Jinja Macro {{ status("new") }} +## Jinja Macro The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern. The API for the macro is shown below. @@ -231,7 +231,7 @@ The `vf_tiered_list` Jinja macro can be used to generate a tiered list pattern. -## Import {{ status("updated") }} +## Import ### Jinja Macro diff --git a/templates/docs/utilities/align.md b/templates/docs/utilities/align.md index 03ff0155d..7e79b39f6 100644 --- a/templates/docs/utilities/align.md +++ b/templates/docs/utilities/align.md @@ -22,7 +22,7 @@ If you only need text to be aligned, you can use the `u-align-text` utilities. View example of the text align utility -## Vertical alignment {{ status("new") }} +## Vertical alignment If you need to vertically align inline elements to the middle of their container, you can use the `u-vertical-align--middle` utility.