From eb0a770ba81af24484bce0a5016cb61dc888b068 Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Wed, 28 Aug 2024 12:44:18 -0400 Subject: [PATCH 01/10] Rename hero macro --- templates/_macros/vf_hero.jinja | 25 ++++++------------- .../hero/hero-50-50-split-on-medium.html | 4 +-- 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/templates/_macros/vf_hero.jinja b/templates/_macros/vf_hero.jinja index 3b4847455..a0018c211 100644 --- a/templates/_macros/vf_hero.jinja +++ b/templates/_macros/vf_hero.jinja @@ -1,6 +1,6 @@ # Params -# title_text: Hero title text (required) -# subtitle_text: Hero subtitle text +# title: Hero title text (required) +# subtitle: Hero subtitle text # layout: layout of hero section. Options are '50/50', '50/50-full-width-image', '75/25', '25/75', 'fallback' # is_split_on_medium: whether the layout is split on tablet in 50/50, 25/75, and 75/25 layouts. # If false, the layout is stacked on tablet. @@ -11,12 +11,12 @@ # image: slot for image content # signpost_image: slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout. {% macro vf_hero( - title_text, - subtitle_text='', + title, + subtitle='', layout="fallback", is_split_on_medium=false ) -%} - {% set has_subtitle = subtitle_text|trim|length > 0 %} + {% set has_subtitle = subtitle|trim|length > 0 %} {% set description_content = caller('description') %} {% set has_description = description_content|trim|length > 0 %} {% set cta_content = caller('cta') %} @@ -80,25 +80,22 @@ {% set title_class = "u-no-margin--bottom" %} {%- endif -%} - {#- Only add a class attribute if needed -#} 0 %} class="{{ title_class }}"{% endif %}> - {{ title_text }} + {{ title }} {%- endmacro %} {%- macro _hero_subtitle_block() -%} {% if has_subtitle %} -

- {{ subtitle_text }} + {{ subtitle }}

{% endif %} {%- endmacro %} {%- macro _hero_cta_block() -%} {% if has_cta -%} -
{{ cta_content }}
@@ -107,7 +104,6 @@ {%- macro _hero_description_block() -%} {% if has_description %} -
{{ description_content }}
@@ -116,7 +112,6 @@ {%- macro _hero_signpost_image_block() -%} {% if layout == '25-75' and has_signpost_image -%} -
{{ signpost_image_content }}
@@ -135,13 +130,12 @@ {% endif -%}
- {%- if is_fallback -%} + {%- if is_fallback %}
{{- _hero_description_block() -}} {{ _hero_cta_block() -}}
{% if has_image -%} -
{{ image_content }}
@@ -157,7 +151,6 @@ {{- _hero_description_block() -}} {{- _hero_cta_block() -}}
- {{ image_content -}} {% elif has_signpost_image %} {#- 25/75 Signpost layout -#} @@ -174,7 +167,6 @@ {% if has_image %} {#- Signpost with image is always full-width, so set it after the columns -#} - {{- image_content }} {% endif -%} {% else %} @@ -187,7 +179,6 @@ {{- _hero_cta_block() -}} {% if has_image -%} -
{{ image_content }}
diff --git a/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html b/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html index 27d483f23..d455bde4b 100644 --- a/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html +++ b/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html @@ -8,8 +8,8 @@ {% 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', + title='H1 - ideally one line, up to two', + subtitle='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph', layout='50/50', is_split_on_medium=true ) -%} From 331aaaded72fa9cf0de9d564b8090f0cf3fb38c0 Mon Sep 17 00:00:00 2001 From: Julie Muzina Date: Wed, 4 Sep 2024 08:37:17 -0400 Subject: [PATCH 02/10] Document hero macro (#5325) * Add macro install instructions to docs pages (#5330) * Update building-vanilla.md * Update pattern docs * Roll back pattern docs * Update building-vanilla.md * Add macros directory to published files * Rename hero macro * Rename tiered list macro * Update releases.yml * End hero title and subtitle params with _text per new naming convention * Add html block comments to hero macro * Add hero macro docn * Add Hero macro import instructions * Add link to @pastelcyborg jinja macros installation guide * Fix hero title_text being renamed from rebase * Adjust jinja parameters column order * lowercase param types * adjust slots column ordering * Adjust slots is required per code review * Markup params table * Markup slots table * parameter & slot tables horizontally scroll rather than using mobile cards * Param/slot table widths set by percentage * More consistent whitespace control chars around jinja macro import * Revise hero element/description table word choice around title/substitle/description * comma-separated string with line breaks for hero layout type options * Update is required column by @bartaz Co-authored-by: Bartek Szopka <83575+bartaz@users.noreply.github.com> * Code review suggestions from @bartaz Co-authored-by: Bartek Szopka <83575+bartaz@users.noreply.github.com> --------- Co-authored-by: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Co-authored-by: Bartek Szopka <83575+bartaz@users.noreply.github.com> --- templates/_macros/vf_hero.jinja | 25 +++++++++++++------ .../hero/hero-50-50-split-on-medium.html | 4 +-- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/templates/_macros/vf_hero.jinja b/templates/_macros/vf_hero.jinja index a0018c211..3b4847455 100644 --- a/templates/_macros/vf_hero.jinja +++ b/templates/_macros/vf_hero.jinja @@ -1,6 +1,6 @@ # Params -# title: Hero title text (required) -# subtitle: Hero subtitle text +# title_text: Hero title text (required) +# subtitle_text: Hero subtitle text # layout: layout of hero section. Options are '50/50', '50/50-full-width-image', '75/25', '25/75', 'fallback' # is_split_on_medium: whether the layout is split on tablet in 50/50, 25/75, and 75/25 layouts. # If false, the layout is stacked on tablet. @@ -11,12 +11,12 @@ # image: slot for image content # signpost_image: slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout. {% macro vf_hero( - title, - subtitle='', + title_text, + subtitle_text='', layout="fallback", is_split_on_medium=false ) -%} - {% set has_subtitle = subtitle|trim|length > 0 %} + {% set has_subtitle = subtitle_text|trim|length > 0 %} {% set description_content = caller('description') %} {% set has_description = description_content|trim|length > 0 %} {% set cta_content = caller('cta') %} @@ -80,22 +80,25 @@ {% set title_class = "u-no-margin--bottom" %} {%- endif -%} + {#- Only add a class attribute if needed -#} 0 %} class="{{ title_class }}"{% endif %}> - {{ title }} + {{ title_text }} {%- endmacro %} {%- macro _hero_subtitle_block() -%} {% if has_subtitle %} +

- {{ subtitle }} + {{ subtitle_text }}

{% endif %} {%- endmacro %} {%- macro _hero_cta_block() -%} {% if has_cta -%} +
{{ cta_content }}
@@ -104,6 +107,7 @@ {%- macro _hero_description_block() -%} {% if has_description %} +
{{ description_content }}
@@ -112,6 +116,7 @@ {%- macro _hero_signpost_image_block() -%} {% if layout == '25-75' and has_signpost_image -%} +
{{ signpost_image_content }}
@@ -130,12 +135,13 @@ {% endif -%}
- {%- if is_fallback %} + {%- if is_fallback -%}
{{- _hero_description_block() -}} {{ _hero_cta_block() -}}
{% if has_image -%} +
{{ image_content }}
@@ -151,6 +157,7 @@ {{- _hero_description_block() -}} {{- _hero_cta_block() -}}
+ {{ image_content -}} {% elif has_signpost_image %} {#- 25/75 Signpost layout -#} @@ -167,6 +174,7 @@ {% if has_image %} {#- Signpost with image is always full-width, so set it after the columns -#} + {{- image_content }} {% endif -%} {% else %} @@ -179,6 +187,7 @@ {{- _hero_cta_block() -}} {% if has_image -%} +
{{ image_content }}
diff --git a/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html b/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html index d455bde4b..27d483f23 100644 --- a/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html +++ b/templates/docs/examples/patterns/hero/hero-50-50-split-on-medium.html @@ -8,8 +8,8 @@ {% block content %} {% call(slot) vf_hero( - title='H1 - ideally one line, up to two', - subtitle='H2 placeholder - aim for one line, 2 is acceptable, more - use a paragraph', + 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', is_split_on_medium=true ) -%} From da0dc364c40f60c4e145ebd4957b9dd25dbf3366 Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:06:58 -0400 Subject: [PATCH 03/10] Update _index.scss --- _index.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_index.scss b/_index.scss index 19c912824..e9ff0ac6d 100644 --- a/_index.scss +++ b/_index.scss @@ -1 +1,3 @@ @import './scss/vanilla'; + +// test From c720584b7a1f15ec15f54302c915caa844d8c080 Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:11:01 -0400 Subject: [PATCH 04/10] Update _index.scss --- _index.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/_index.scss b/_index.scss index e9ff0ac6d..19c912824 100644 --- a/_index.scss +++ b/_index.scss @@ -1,3 +1 @@ @import './scss/vanilla'; - -// test From 98e5a44d2f8e9143267cd7fcb94e9244782dda89 Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:37:07 -0400 Subject: [PATCH 05/10] Add tiered list docs; minor formatting updates --- templates/docs/patterns/hero/index.md | 28 ++-- templates/docs/patterns/tiered-list/index.md | 128 +++++++++++++++++++ 2 files changed, 143 insertions(+), 13 deletions(-) diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md index e0bda1c51..675979754 100644 --- a/templates/docs/patterns/hero/index.md +++ b/templates/docs/patterns/hero/index.md @@ -28,11 +28,11 @@ The hero pattern is composed of the following elements: ### Parameters
- +
- + @@ -43,15 +43,15 @@ The hero pattern is composed of the following elements: - + @@ -72,7 +72,7 @@ The hero pattern is composed of the following elements: - +
NameIs requiredRequired? Type Default Descriptionlayout Yes - One of: - '50/50', - '50/50-full-width-image', - '75/25', - '25/75', + One of:
+ '50/50',
+ '50/50-full-width-image',
+ '75/25',
+ '25/75',
'fallback' 		'fallback'Choice of hero layout.Choice of hero layout
title_textYes boolean falseWhether the layout is split on tablet-sized devices.Whether the layout is split on tablet-sized devices
@@ -81,11 +81,11 @@ The hero pattern is composed of the following elements: ### Slots
- +
- + @@ -195,7 +195,8 @@ View example of the hero pattern in fallback configuration ### Jinja Macro -To import the Hero Jinja macro, copy the following import statement into your Jinja template. +To import the Hero Jinja macro, copy the following import statement into your +Jinja template. ```jinja {% raw -%} @@ -203,7 +204,8 @@ To import the Hero Jinja macro, copy the following import statement into your Ji {%- endraw -%} ``` -View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros) for macro installation instructions. +View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros) +for macro installation instructions. ### SCSS diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 9487731e0..5613f6ca0 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -27,6 +27,120 @@ The tiered list pattern is composed of the following elements: | List item description | Description text/content with optional [CTA block](/docs/patterns/cta-block) | | Call to action block | [CTA block](/docs/patterns/cta-block) beneath the list | +## Jinja Macro + +### Parameters + +
+
NameIs requiredRequired? Description
+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameRequired?TypeDefaultDescription
+ is_description_full_width_on_desktop + + Yes + + boolean + + true + + Whether the description element should be full-width on desktop +
+ is_list_full_width_on_tablet + + Yes + + boolean + + true + + Whether the list element should be full-width on tablet +
+
+ +### Slots + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameRequired?Description
+ title + + Yes + + Title sentence displayed at the top of the pattern +
+ description + + No + + Description paragraph displayed below the title +
+ list_item_title_[1-25] + + Yes, at least 1 + + Title element of each child list item; max of 25 +
+ list_item_description_[1-25] + + Yes, at least 1 + + Description element of each child list item; max of 25 +
+
+ ## 50/50 on desktop with description This variant contains a top-level description which is presented side-by-side @@ -101,6 +215,20 @@ View example of the tiered list pattern ## Import +### Jinja Macro + +To import the Tiered List Jinja macro, copy the following import statement into +your Jinja template: + +```jinja +{% raw -%} +{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %} +{%- endraw -%} +``` + +View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros) +for macro installation instructions. + Since Patterns leverage many other parts of Vanilla in their composition and content, we recommend [importing the entirety of Vanilla](/docs#install) for full support. From a4f833400139e87e795886fdb1a003d25875cf30 Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:41:26 -0400 Subject: [PATCH 06/10] File formatting fixes --- templates/docs/patterns/hero/index.md | 138 +++++++++++++++++++------- 1 file changed, 101 insertions(+), 37 deletions(-) diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md index 675979754..d723e7293 100644 --- a/templates/docs/patterns/hero/index.md +++ b/templates/docs/patterns/hero/index.md @@ -40,39 +40,77 @@ The hero pattern is composed of the following elements: - layout - Yes + + layout + + + Yes + One of:
- '50/50',
- '50/50-full-width-image',
- '75/25',
- '25/75',
- 'fallback' - - 'fallback' - Choice of hero layout + '50/50',
+ '50/50-full-width-image',
+ '75/25',
+ '25/75',
+ 'fallback' + + + 'fallback' + + + Choice of hero layout + - title_text - Yes - string - N/A - h1 title text + + title_text + + + Yes + + + string + + + N/A + + + h1 title text + - subtitle_text - No - string - N/A - h2 subtitle text + + subtitle_text + + + No + + + string + + + N/A + + + h2 subtitle text + - is_split_on_medium - Yes - boolean - false - Whether the layout is split on tablet-sized devices + + is_split_on_medium + + + Yes + + + boolean + + + false + + + Whether the layout is split on tablet-sized devices + @@ -91,24 +129,50 @@ The hero pattern is composed of the following elements: - description - No - Paragraph-style content below the title and subtitle. + + description + + + No + + + Paragraph-style content below the title and subtitle + - cta - Yes - Contents of a Call to action block beneath the title and description. + + cta + + + Yes + + + Contents of a Call to action + block beneath the title and description + - image - Yes, when layout='50/50-full-width-image' - Image content. + + image + + + Yes, when layout='50/50-full-width-image' + + + Image content + - signpost_image - Yes, when layout='25/75' - Small image (such as a logo) to place in the left column of the 25/75 Hero. + + signpost_image + + + Yes, when layout='25/75' + + + Small image (such as a logo) to place in the left column of the + 25/75 Hero + From 57750859f5bea1ce30e15d32e0a2c3b3c9eb3dc6 Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:43:16 -0400 Subject: [PATCH 07/10] Change "call to action block" to "CTA block" --- templates/docs/patterns/hero/index.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md index d723e7293..f0346bc6d 100644 --- a/templates/docs/patterns/hero/index.md +++ b/templates/docs/patterns/hero/index.md @@ -15,13 +15,13 @@ Depending on the size and composition of your content, you can choose from a var The hero pattern is composed of the following elements: -| Element | Description | -| -------------------- | ------------------------------------------------------------------------ | -| Title (**required**) | Title text (to be placed in `h1` heading) | -| Subtitle | Subtitle text (using `h2` style) | -| Description | Description text (one or more paragraphs) | -| Call to action block | [Call to action block](/docs/patterns/cta-block) beneath the description | -| Image | Main hero visual | +| Element | Description | +| -------------------- | ------------------------------------------------------------- | +| Title (**required**) | Title text (to be placed in `h1` heading) | +| Subtitle | Subtitle text (using `h2` style) | +| Description | Description text (one or more paragraphs) | +| Call to action block | [CTA block](/docs/patterns/cta-block) beneath the description | +| Image | Main hero visual | ## Jinja Macro @@ -147,8 +147,8 @@ The hero pattern is composed of the following elements: Yes - Contents of a Call to action - block beneath the title and description + Contents of a CTA block beneath + the title and description From b588d5282fb27041f2857bcf6869459b190a98a9 Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:47:38 -0400 Subject: [PATCH 08/10] Add cta block slot docs --- templates/docs/patterns/tiered-list/index.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 5613f6ca0..3ceac6beb 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -137,6 +137,18 @@ The tiered list pattern is composed of the following elements: Description element of each child list item; max of 25 + + + cta + + + No + + + Contents of a CTA block at the + bottom of the pattern + +
From d6a1e1cbd09cceeda6b6f810447c87bfabc73ca8 Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:51:43 -0400 Subject: [PATCH 09/10] Add code comments --- templates/_macros/vf_tiered-list.jinja | 2 ++ 1 file changed, 2 insertions(+) diff --git a/templates/_macros/vf_tiered-list.jinja b/templates/_macros/vf_tiered-list.jinja index ea4dbabb9..c68b2e3f8 100644 --- a/templates/_macros/vf_tiered-list.jinja +++ b/templates/_macros/vf_tiered-list.jinja @@ -62,6 +62,8 @@ {%- set list_item_description_content = caller('list_item_description_' + number|string) -%} {%- set has_description_content = list_item_description_content|trim|length > 0 -%} + {#- Check to see if title/description content exist, since we're + iterating through 25 potential list items -#} {%- if has_title_content and has_description_content -%} {%- if is_list_full_width_on_tablet == true %}
From a2140c0b2f080f0fe8fa1efe9feb4b48de4360fb Mon Sep 17 00:00:00 2001 From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com> Date: Tue, 17 Sep 2024 15:23:07 -0400 Subject: [PATCH 10/10] Apply static widths to table columns --- templates/docs/patterns/hero/index.md | 20 ++++++++++---------- templates/docs/patterns/tiered-list/index.md | 20 ++++++++++---------- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/templates/docs/patterns/hero/index.md b/templates/docs/patterns/hero/index.md index f0346bc6d..d052e687a 100644 --- a/templates/docs/patterns/hero/index.md +++ b/templates/docs/patterns/hero/index.md @@ -28,14 +28,14 @@ The hero pattern is composed of the following elements: ### Parameters
- +
- - - - - + + + + + @@ -119,12 +119,12 @@ The hero pattern is composed of the following elements: ### Slots
-
NameRequired?TypeDefaultDescriptionNameRequired?TypeDefaultDescription
+
- - - + + + diff --git a/templates/docs/patterns/tiered-list/index.md b/templates/docs/patterns/tiered-list/index.md index 3ceac6beb..cd4b364ed 100644 --- a/templates/docs/patterns/tiered-list/index.md +++ b/templates/docs/patterns/tiered-list/index.md @@ -32,14 +32,14 @@ The tiered list pattern is composed of the following elements: ### Parameters
-
NameRequired?DescriptionNameRequired?Description
+
- - - - - + + + + + @@ -84,12 +84,12 @@ The tiered list pattern is composed of the following elements: ### Slots
-
NameRequired?TypeDefaultDescriptionNameRequired?TypeDefaultDescription
+
- - - + + +
NameRequired?DescriptionNameRequired?Description