diff --git a/package.json b/package.json index 119570ac6..8bdc3453a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vanilla-framework", - "version": "4.37.2", + "version": "4.38.0", "author": { "email": "webteam@canonical.com", "name": "Canonical Webteam" diff --git a/releases.yml b/releases.yml index dfe3533dd..7c5f9f113 100644 --- a/releases.yml +++ b/releases.yml @@ -1,3 +1,17 @@ +- version: 4.38.0 + features: + - component: Basic section + url: /docs/patterns/basic-section + status: Updated + notes: Added attrs parameter to the section element. + - component: Pricing block + url: /docs/patterns/pricing-block + status: Updated + notes: Added attrs parameter to the section element. + - component: Equal heights + url: /docs/patterns/equal-heights + status: Updated + notes: Added attrs parameter to the section element. - version: 4.37.0 features: - component: Icon diff --git a/templates/_macros/vf_basic-section.jinja b/templates/_macros/vf_basic-section.jinja index 36b782051..5d9545184 100644 --- a/templates/_macros/vf_basic-section.jinja +++ b/templates/_macros/vf_basic-section.jinja @@ -300,6 +300,7 @@ # 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"). +# attrs: A dictionary of attributes to apply to the section element. {% macro vf_basic_section( title={}, label_text="", @@ -307,7 +308,8 @@ items=[], padding="default", is_split_on_medium=false, - top_rule_variant="default" + top_rule_variant="default", + attrs={} ) -%} {%- set padding = padding | trim -%} @@ -330,7 +332,13 @@ {%- set has_label = label_text|length > 0 -%} {%- set has_subtitle = subtitle_text|length > 0 -%} -
+
{{ vf_section_top_rule(top_rule_variant) }}
diff --git a/templates/_macros/vf_equal-heights.jinja b/templates/_macros/vf_equal-heights.jinja index 88bf59dd1..d17779849 100644 --- a/templates/_macros/vf_equal-heights.jinja +++ b/templates/_macros/vf_equal-heights.jinja @@ -1,6 +1,7 @@ {#- Params - title_text (string) (required): The text to be displayed as the heading + - attrs (dictionary) (optional): A dictionary of attributes to apply to the equal heights pattern. - subtitle_text (string) (optional): The text to be displayed as the subtitle - subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5. - highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default. @@ -11,6 +12,7 @@ -#} {%- macro vf_equal_heights( title_text, + attrs={}, subtitle_text="", subtitle_heading_level=5, highlight_images=false, @@ -31,7 +33,13 @@ {% set subtitle_heading_level=5 %} {%- endif -%} -
+

{%- if has_two_top_cols -%} diff --git a/templates/_macros/vf_pricing-block.jinja b/templates/_macros/vf_pricing-block.jinja index ebcb33b82..3c9efeb07 100644 --- a/templates/_macros/vf_pricing-block.jinja +++ b/templates/_macros/vf_pricing-block.jinja @@ -2,6 +2,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 "default". Options are "muted", "highlighted", "default", "none". + - attrs (dictionary) (optional): A dictionary of attributes to apply to the Pricing block section. - tiers (Array<{ tier_name_text: String (optional), tier_price_text: String, @@ -20,6 +21,7 @@ {%- macro vf_pricing_block( top_rule_variant="default", title_text="", + attrs={}, tiers=[] ) -%} {% set top_rule_variant = top_rule_variant | trim %} @@ -86,7 +88,13 @@
{% endif %} {%- endmacro -%} -
+
{{ _top_rule() }}
diff --git a/templates/docs/examples/patterns/basic-section/mixed-content.html b/templates/docs/examples/patterns/basic-section/mixed-content.html index a16040fe2..b62615b01 100644 --- a/templates/docs/examples/patterns/basic-section/mixed-content.html +++ b/templates/docs/examples/patterns/basic-section/mixed-content.html @@ -124,7 +124,8 @@ } } } - ] + ], + attrs= {"id": "mixed-content-section"} ) }} {% endblock %} \ No newline at end of file diff --git a/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html index 193466238..057c46465 100644 --- a/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/2-columns-responsive.html @@ -8,6 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", + attrs={ "id": "2-columns-responsive" }, subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html index cc8100992..1facf66d5 100644 --- a/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/3-columns-responsive.html @@ -8,6 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", + attrs={ "id": "3-columns-responsive" }, subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html b/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html index 7efef0a7a..f172ce2c4 100644 --- a/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html +++ b/templates/docs/examples/patterns/equal-heights/4-columns-responsive.html @@ -8,6 +8,7 @@ {% call(slot) vf_equal_heights( title_text="Keep this heading to 2 lines on large screens.", + attrs={ "id": "4-columns-responsive" }, subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.", items=[ { diff --git a/templates/docs/examples/patterns/pricing-block/1-block.html b/templates/docs/examples/patterns/pricing-block/1-block.html index 46731347e..87440e51e 100644 --- a/templates/docs/examples/patterns/pricing-block/1-block.html +++ b/templates/docs/examples/patterns/pricing-block/1-block.html @@ -5,6 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', + attrs={"id": "1-block"}, tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/2-blocks.html b/templates/docs/examples/patterns/pricing-block/2-blocks.html index 6d213431d..7090d4929 100644 --- a/templates/docs/examples/patterns/pricing-block/2-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/2-blocks.html @@ -5,6 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', + attrs={"id": "2-blocks"}, tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/3-blocks.html b/templates/docs/examples/patterns/pricing-block/3-blocks.html index 30de805ee..edc36cbaf 100644 --- a/templates/docs/examples/patterns/pricing-block/3-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/3-blocks.html @@ -5,6 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', + attrs={"id": "3-blocks"}, tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/examples/patterns/pricing-block/4-blocks.html b/templates/docs/examples/patterns/pricing-block/4-blocks.html index ea6dfbe0a..a0f3b018b 100644 --- a/templates/docs/examples/patterns/pricing-block/4-blocks.html +++ b/templates/docs/examples/patterns/pricing-block/4-blocks.html @@ -5,6 +5,7 @@ {% block content %} {% call(slot) vf_pricing_block( title_text='Kubernetes pricing', + attrs={"id": "4-blocks"}, tiers=[ { 'tier_name_text': 'Kubernetes Explorer', diff --git a/templates/docs/patterns/basic-section/index.md b/templates/docs/patterns/basic-section/index.md index 51965ceb9..afa0f0e1b 100644 --- a/templates/docs/patterns/basic-section/index.md +++ b/templates/docs/patterns/basic-section/index.md @@ -454,7 +454,7 @@ below. The main title text (rendered as h2) - + title.link_attrs @@ -614,6 +614,23 @@ below. Variant of horizontal rule to display at the top of the section." + + + attrs + + + No + + + <Object> + + + N/A + + + Attributes to apply to the basic section. See attribute forwarding docs for more info. + +
diff --git a/templates/docs/patterns/equal-heights/index.md b/templates/docs/patterns/equal-heights/index.md index c1464b69e..841d76bb1 100644 --- a/templates/docs/patterns/equal-heights/index.md +++ b/templates/docs/patterns/equal-heights/index.md @@ -113,6 +113,23 @@ shown below. H2 title text. + + + attrs + + + No + + + <Object> + + + N/A + + + Attributes to apply to the equal heights pattern. See attribute forwarding docs for more info. + + subtitle_text diff --git a/templates/docs/patterns/pricing-block/index.md b/templates/docs/patterns/pricing-block/index.md index 8b3c301de..96fb1ddb5 100644 --- a/templates/docs/patterns/pricing-block/index.md +++ b/templates/docs/patterns/pricing-block/index.md @@ -122,6 +122,23 @@ The `vf_pricing_block` Jinja macro can be used to generate a pricing tier compar Title of the pricing section. + + + attrs + + + No + + + <Object> + + + N/A + + + Attributes to apply to the Pricing block pattern. See attribute forwarding docs for more info. + + top_rule_variant