|
| 1 | +{% from "_macros/shared/vf_cta-block.jinja" import vf_cta_block %} |
| 2 | +{% from "_macros/vf_basic-section.jinja" import vf_basic_section_blocks %} |
| 3 | + |
1 | 4 | # Params |
2 | 5 | # title_text: Hero title text (required) |
3 | 6 | # subtitle_text: Hero subtitle text |
4 | 7 | # layout: layout of hero section. Options are '50/50', '50/50-full-width-image', '75/25', '25/75', 'fallback' |
5 | 8 | # is_split_on_medium: whether the layout is split on tablet in 50/50, 25/75, and 75/25 layouts. |
6 | 9 | # If false, the layout is stacked on tablet. |
7 | 10 | # If true, the layout is split on tablet. |
8 | | -# Slots |
9 | | -# description: paragraph-style content below the title and subtitle |
10 | | -# cta: call-to-action block below the description |
11 | | -# image: slot for image content |
12 | | -# signpost_image: slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout. |
13 | 11 | # display_blank_signpost_image_space: whether to indent the content for 25/75 layout on large screens. |
| 12 | +# blocks: list of content blocks for the hero section. Includes description, cta, image, and signpost_image blocks. |
| 13 | +# Slots |
| 14 | +# description (deprecated): paragraph-style content below the title and subtitle |
| 15 | +# cta (deprecated): call-to-action block below the description |
| 16 | +# image (deprecated): slot for image content |
| 17 | +# signpost_image (deprecated): slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout. |
14 | 18 | {% macro vf_hero( |
15 | 19 | title_text, |
16 | 20 | subtitle_text='', |
17 | 21 | layout="fallback", |
18 | 22 | is_split_on_medium=false, |
19 | | - display_blank_signpost_image_space=false |
| 23 | + display_blank_signpost_image_space=false, |
| 24 | + blocks=[] |
20 | 25 | ) -%} |
| 26 | + {%- set description_blocks = blocks | selectattr("type", "equalto", "description") | list -%} |
| 27 | + {%- set cta_block = blocks | selectattr("type", "equalto", "cta-block") | list | first | default(None) -%} |
| 28 | + {%- set image_block = blocks | selectattr("type", "equalto", "image") | list | first | default(None) -%} |
| 29 | + {%- set signpost_image_block = blocks | selectattr("type", "equalto", "signpost_image") | list | first | default(None) -%} |
| 30 | + |
21 | 31 | {% set has_subtitle = subtitle_text|trim|length > 0 %} |
22 | 32 | {% set description_content = caller('description') %} |
23 | | - {% set has_description = description_content|trim|length > 0 %} |
| 33 | + {% set has_description = description_blocks | length > 0 or description_content|trim|length > 0 %} |
24 | 34 | {% set cta_content = caller('cta') %} |
25 | | - {% set has_cta = cta_content|trim|length > 0 %} |
| 35 | + {% set has_cta = cta_block or cta_content|trim|length > 0 %} |
26 | 36 | {% set image_content = caller('image') %} |
27 | | - {% set has_image = image_content|trim|length > 0 %} |
| 37 | + {% set has_image = image_block or image_content|trim|length > 0 %} |
28 | 38 | {% set signpost_image_content = caller('signpost_image') %} |
29 | | - {% set has_signpost_image = signpost_image_content|trim|length > 0 or display_blank_signpost_image_space %} |
| 39 | + {% set has_signpost_image = signpost_image_block or signpost_image_content|trim|length > 0 or display_blank_signpost_image_space %} |
30 | 40 |
|
31 | 41 | {#- User can pass layout as "X-Y" or "X/Y" -#} |
32 | 42 | {% set layout = layout | trim | replace('/', '-') %} |
|
98 | 108 | {%- endmacro %} |
99 | 109 |
|
100 | 110 | {%- macro _hero_cta_block() -%} |
101 | | - {% if has_cta -%} |
| 111 | + {%- if cta_block -%} |
| 112 | + {{- vf_basic_section_blocks(items=[cta_block], override_last_item_padding=true) -}} |
| 113 | + {% elif has_cta -%} |
102 | 114 | <div class="p-cta-block"> |
103 | 115 | {{ cta_content }} |
104 | 116 | </div> |
105 | 117 | {% endif %} |
106 | 118 | {%- endmacro %} |
107 | 119 |
|
108 | 120 | {%- macro _hero_description_block() -%} |
109 | | - {% if has_description %} |
| 121 | + {%- if description_blocks | length > 0 -%} |
| 122 | + {% for description_block in description_blocks %} |
| 123 | + {{ vf_basic_section_blocks(items=[description_block], override_last_item_padding=true) }} |
| 124 | + {% endfor %} |
| 125 | + {% elif has_description %} |
110 | 126 | <div class="p-section--shallow"> |
111 | 127 | {{ description_content }} |
112 | 128 | </div> |
113 | 129 | {% endif %} |
114 | 130 | {%- endmacro %} |
115 | 131 |
|
| 132 | + {%- macro _hero_image_block() -%} |
| 133 | + {%- if image_block -%} |
| 134 | + {{- vf_basic_section_blocks(items=[image_block], override_last_item_padding=true) -}} |
| 135 | + {% elif has_image -%} |
| 136 | + {{ image_content }} |
| 137 | + {% endif %} |
| 138 | + {%- endmacro %} |
| 139 | + |
116 | 140 | {%- macro _hero_signpost_image_block() -%} |
117 | | - {% if layout == '25-75' and has_signpost_image -%} |
118 | | - <div class="p-section--shallow"> |
| 141 | + <div class="p-section--shallow"> |
| 142 | + {%- if signpost_image_block -%} |
| 143 | + {% set _ = signpost_image_block.update(type="image") %} |
| 144 | + {% set _ = signpost_image_block.item.attrs.update({"class": "u-no-margin"}) %} |
| 145 | + {{- vf_basic_section_blocks(items=[signpost_image_block], override_last_item_padding=true) -}} |
| 146 | + {% else -%} |
119 | 147 | {{ signpost_image_content }} |
120 | | - </div> |
121 | | - {% endif %} |
| 148 | + {% endif %} |
| 149 | + </div> |
122 | 150 | {%- endmacro %} |
123 | 151 |
|
124 | 152 | <section class="p-section--hero"> |
|
140 | 168 | </div> |
141 | 169 | {% if has_image -%} |
142 | 170 | <div class="{{ col_classes[1] }}"> |
143 | | - {{ image_content }} |
| 171 | + {{ _hero_image_block() }} |
144 | 172 | </div> |
145 | 173 | {% endif -%} |
146 | 174 | {% elif (has_full_width_image and not has_signpost_image) or is_50_50_no_image %} |
|
156 | 184 | {{- _hero_description_block() -}} |
157 | 185 | {{- _hero_cta_block() -}} |
158 | 186 | </div> |
159 | | - {{ image_content -}} |
160 | | - {% elif has_signpost_image %} |
| 187 | + {{ _hero_image_block() }} |
| 188 | + {% elif has_signpost_image and layout == '25-75' %} |
161 | 189 | {#- 25/75 Signpost layout -#} |
162 | 190 | <div class="{{ col_classes[0] }}"> |
163 | 191 | {{ _hero_signpost_image_block() -}} |
|
172 | 200 | </div> |
173 | 201 | {% if has_image %} |
174 | 202 | {#- Signpost with image is always full-width, so set it after the columns -#} |
175 | | - {{- image_content }} |
| 203 | + {{- _hero_image_block() }} |
176 | 204 | {% endif -%} |
177 | 205 | {% else %} |
178 | 206 | <div class="{{ col_classes[0] }}"> |
|
185 | 213 | </div> |
186 | 214 | {% if has_image -%} |
187 | 215 | <div class="{{ col_classes[1] }}"> |
188 | | - {{ image_content }} |
| 216 | + {{ _hero_image_block() }} |
189 | 217 | </div> |
190 | 218 | {% endif -%} |
191 | 219 | {% endif -%} |
|
0 commit comments