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

Author: jmuzina

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"

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

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 }}
           </div>
         {% 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 %}
         <div class="{{ col_classes[0] }}">
           {{ _hero_title_block() }}
         </div>

templates/docs/examples/patterns/hero/combined.html

@@ -23,5 +23,6 @@
 <section>{% include 'docs/examples/patterns/hero/hero-50-50-split-on-medium.html' %}</section>
 <section>{% include 'docs/examples/patterns/hero/hero-75-25.html' %}</section>
 <section>{% include 'docs/examples/patterns/hero/hero-fallback.html' %}</section>
+<section>{% include 'docs/examples/patterns/hero/hero-50-50-no-image.html' %}</section>
 {% endwith %}
 {% endblock %}

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' -%}
+      <p>
+        Generally, the height of the right hand side of a 50/50 split should contain more content than the left
+        hand side.
+      </p>
+    {%- endif -%}
+    {%- if slot == 'cta' -%}
+      <a href="#" class="p-button--positive">Learn more</a>
+      <a href="#">Contact us ›</a>
+    {%- endif -%}
+{% endcall -%}
+
+{% endblock %}

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
 </a></div>
 
+### 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.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/hero/hero-50-50-no-image" class="js-example" data-lang="jinja">
+View example of the hero pattern in 50/50 split with no image
+</a></div>
+
 ## 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
 </a></div>
 
-## 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
   </table>
 </div>
 
-## Import {{ status("updated") }}
+## Import
 
 ### Jinja Macro
 

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
 </a></div>
 
-## 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.
   </table>
 </div>
 
-## Import {{ status("updated") }}
+## Import
 
 ### Jinja Macro
 

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
 </a></div>
 
-## 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.