diff --git a/releases.yml b/releases.yml index 1dcca29ad..8e0735500 100644 --- a/releases.yml +++ b/releases.yml @@ -4,6 +4,14 @@ url: /docs/patterns/cta-section status: Updated notes: Added attrs parameter to the section element. + - component: Equal height row component + url: /docs/patterns/equal-height-row + status: Updated + notes: Update from legacy grid to 8 column grid. + - component: Equal heights + url: /docs/patterns/equal-heights + status: Updated + notes: Added support to link item titles. - version: 4.38.0 features: - component: Basic section diff --git a/scss/_patterns_data-spotlight.scss b/scss/_patterns_data-spotlight.scss index 2aa0f3500..681037c37 100644 --- a/scss/_patterns_data-spotlight.scss +++ b/scss/_patterns_data-spotlight.scss @@ -15,8 +15,7 @@ } .p-data-spotlight--2-blocks .p-data-spotlight__title-col { - // TODO: update the following after the equal height row is updated to use the new grid system - grid-column: span 6 !important; + grid-column: span 4 !important; } } @@ -44,7 +43,7 @@ .p-data-spotlight--2-blocks .p-data-spotlight__title-col { // TODO: update the following after the equal height row is updated to use the new grid system - grid-column: span 6 !important; + grid-column: span 4 !important; } } } diff --git a/scss/_patterns_equal-height-row.scss b/scss/_patterns_equal-height-row.scss index 4b6b37162..108b0f9fd 100644 --- a/scss/_patterns_equal-height-row.scss +++ b/scss/_patterns_equal-height-row.scss @@ -22,13 +22,13 @@ Item element within an equal height row column. */ +@use 'sass:math'; @import 'settings'; @mixin vf-p-equal-height-row { .p-equal-height-row, .p-equal-height-row--wrap { - // TODO use new 4/4/8 grid (`%vf-grid-row`) - @extend %vf-row; + @extend %vf-grid-row; position: relative; @@ -38,20 +38,20 @@ border-top-style: solid; border-top-width: 1px; display: grid; - grid-column: span $grid-columns-small; + grid-column: span $grid-8-columns-small; grid-row: span 4; grid-template-rows: subgrid; margin-bottom: $spv--small; position: relative; @media screen and ($breakpoint-small <= width < $breakpoint-large) { - grid-column: span $grid-columns-medium; + grid-column: span $grid-8-columns-medium; grid-template-columns: subgrid; // At medium size, each column item will take half of the available // cols from the parent grid .p-equal-height-row__item { - grid-column: span calc($grid-columns-medium / 2); + grid-column: span calc($grid-8-columns-medium / 2); } // At medium size, position the first column item on the left of the @@ -65,7 +65,7 @@ @media screen and (width >= $breakpoint-large) { border: none; - grid-column: span calc($grid-columns / 4); + grid-column: span calc($grid-8-columns / 4); margin-bottom: 0; } } @@ -89,7 +89,7 @@ background-color: $colors--theme--border-low-contrast; // Row-level dividers are not visible on smaller screen sizes display: none; - grid-column-end: span 12; + grid-column-end: span $grid-8-columns; grid-column-start: 1; margin: auto; @@ -129,7 +129,7 @@ .p-equal-height-row__col { @media screen and ($breakpoint-small <= width < $breakpoint-large) { // Fit 2 columns onto each row at medium size - grid-column: span calc($grid-columns-medium / 2); + grid-column: span calc($grid-8-columns-medium / 2); grid-template-columns: none; .p-equal-height-row__item { @@ -146,23 +146,30 @@ // ADVANCED GRID SUPPORT // Support for 25-75 split on large screen size - // TODO implement with new 4/4/8 grid (.grid-row) + // The equal height row has been moved to the 8-column grid, but we still support the equal height row component + // being placed inside legacy grid row to ensure backward compatibility, this works since the ratio of columns + // remains the same. + // This would break if legacy grid is used inside the component itself. + .grid-row--25-75-on-large > .grid-col, + .grid-row > .grid-col-6, .row--25-75-on-large > .col, .row > .col-9 { & .p-equal-height-row, & .p-equal-height-row--wrap { @media screen and (width >= $breakpoint-large) { - grid-template-columns: repeat(9, minmax(0, 1fr)); + grid-template-columns: repeat(#{(math.div($grid-8-columns, 4) * 3)}, minmax(0, 1fr)); } } } + .grid-row--50-50-on-large > .grid-col, + .grid-row > .grid-col-4, .row--50-50-on-large > .col, .row > .col-6 { & .p-equal-height-row, & .p-equal-height-row--wrap { @media screen and (width >= $breakpoint-large) { - grid-template-columns: repeat(6, minmax(0, 1fr)); + grid-template-columns: repeat(#{math.div($grid-8-columns, 2)}, minmax(0, 1fr)); } } } diff --git a/templates/_macros/shared/vf_equal-heights-block.jinja b/templates/_macros/shared/vf_equal-heights-block.jinja new file mode 100644 index 000000000..aaaefd5af --- /dev/null +++ b/templates/_macros/shared/vf_equal-heights-block.jinja @@ -0,0 +1,68 @@ +{#- + vf_equal_heights_block + Renders the inner Equal Heights grid (no outer section/rows), suitable for embedding in other patterns (e.g. tab panels). + + Params: + - items (array) (required): Each item may include 'image_html', 'title_text', 'title_link', 'description_html', and 'cta_html'. + - subtitle_heading_level (int) (optional): 4 or 5 (default 5) — used for item titles. + - highlight_images (boolean) (optional): Whether to add a subtle grey background behind images. + - image_aspect_ratio_small (string) (optional): "square" | "2-3" | "3-2" | "16-9" | "cinematic" | "auto" (default: "square"). + - image_aspect_ratio_medium (string) (optional): same options as above (default: "square"). + - image_aspect_ratio_large (string) (optional): same options as above (default: "2-3"). +-#} +{%- macro vf_equal_heights_block( + items=[], + subtitle_heading_level=5, + highlight_images=false, + image_aspect_ratio_small="square", + image_aspect_ratio_medium="square", + image_aspect_ratio_large="2-3" +) -%} +
+ {%- for item in items -%} + {%- set image = item.get("image_html", "") | trim -%} + {%- set title = item.get("title_text", "") | trim -%} + {%- set title_link_attrs = item.get("title_link_attrs", {}) -%} + {%- set description = item.get("description_html", "") | trim -%} + {%- set cta = item.get("cta_html", "") | trim -%} +
+ {#- Image item -#} +
+ {%- if image | length > 0 %} +
+ {{- image | safe -}} +
+
+ {%- endif -%} +
+ {#- Title item -#} +
+ {%- if title | length > 0 -%} +

+ {%- if title_link_attrs and "href" in title_link_attrs -%} + + {%- endif -%} + {{- title -}} + {%- if title_link_attrs and "href" in title_link_attrs -%} + + {%- endif -%} +

+ {%- endif -%} +
+ {#- Description item (optional) -#} +
+ {{- description | safe -}} +
+ {#- CTA item (optional) -#} +
+ {%- if cta | length > 0 -%} +

+ {{- cta | safe -}} +

+ {%- endif -%} +
+
+ {%- endfor -%} +
+{%- endmacro -%} diff --git a/templates/_macros/vf_equal-heights.jinja b/templates/_macros/vf_equal-heights.jinja index d17779849..474a0c1a4 100644 --- a/templates/_macros/vf_equal-heights.jinja +++ b/templates/_macros/vf_equal-heights.jinja @@ -1,3 +1,5 @@ +{#- The vf_equal-heights-block has been abstracted to _macros/shared/ folder so that it can be nested and used in other components -#} +{% from "_macros/shared/vf_equal-heights-block.jinja" import vf_equal_heights_block %} {#- Params - title_text (string) (required): The text to be displayed as the heading @@ -9,7 +11,8 @@ - image_aspect_ratio_medium (string) (optional): The aspect ratio for item images on medium screens. Defaults to "square". Can be "square", "2-3", "3-2", "16-9", "cinematic" or "auto". Defaults to "square". - image_aspect_ratio_large (string) (optional): The aspect ratio for item images on large screens. Defaults to "2-3". Can be "square", "2-3", "3-2", "16-9", "cinematic" or "auto". Defaults to "2-3". - items (array) (required): An array of items, each including 'image_html', 'title_text', 'description_html', and 'cta_html'. - -#} +-#} + {%- macro vf_equal_heights( title_text, attrs={}, @@ -33,9 +36,9 @@ {% set subtitle_heading_level=5 %} {%- endif -%} -
{%- if has_two_top_cols -%} -
-
+
+
{%- endif -%} {{ title_text }} {%- if has_two_top_cols -%}
{%- endif -%} {%- if has_two_top_cols -%} -
+
{%- if has_subtitle -%}

{{ subtitle_text }}

{%- endif -%} @@ -65,53 +68,22 @@ {%- endif -%}
-
-
-
- {%- for item in items -%} - {% set image = item.get("image_html", "") | trim %} - {% set title = item.get("title_text", "") | trim %} - {% set description = item.get("description_html", "") | trim %} - {% set cta = item.get("cta_html", "") | trim %} -
- {#- Image item -#} -
- {%- if image | length > 0 %} -
- {#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#} - {{- image | safe -}} -
-
- {%- endif -%} -
- {#- Title item -#} -
- {%- if title | length > 0 -%} -

{{- title -}}

- {%- endif -%} -
- {#- Description item (optional) -#} -
- {{- description | safe -}} -
- {#- CTA item (optional) -#} -
- {%- if cta | length > 0 -%} -

- {{- cta | safe -}} -

- {%- endif -%} -
-
- {%- endfor -%} -
+
+
+ {{ vf_equal_heights_block( + items=items, + subtitle_heading_level=subtitle_heading_level, + highlight_images=highlight_images, + image_aspect_ratio_small=image_aspect_ratio_small, + image_aspect_ratio_medium=image_aspect_ratio_medium, + image_aspect_ratio_large=image_aspect_ratio_large + ) }}
{%- if has_cta -%} -
+
-
+

{{- cta_content -}}

diff --git a/templates/docs/examples/patterns/equal-heights/4-columns-highlighted-images.html b/templates/docs/examples/patterns/equal-heights/4-columns-highlighted-images.html index bddc80d44..8aa3d27a1 100644 --- a/templates/docs/examples/patterns/equal-heights/4-columns-highlighted-images.html +++ b/templates/docs/examples/patterns/equal-heights/4-columns-highlighted-images.html @@ -14,8 +14,8 @@ highlight_images=True, items=[ { - "title_text": "One solution, any cloud - ", + "title_text": "One solution, any cloud", + "title_link_attrs": {'href': '#', 'aria-label': 'Learn more about One solution, any cloud'}, "image_html": '` of individual item properties. | | items[].title_text | The title for the item. | +| items[].title_link_attrs | Object of attributes of an anchor element to link the title of item. | | items[].description_html | The description for the item. | | items[].image_html | The image element for the item. | | items[].cta_html | The call to action element for the item. | @@ -59,6 +60,14 @@ At a minimum, you should provide a title, at least 3 items, and a title and imag View example of the equal heights pattern
+## Highlighted Images + +To [highlight](https://vanillaframework.io/docs/patterns/images#highlighted-image) images within the pattern, set `highlight_images=True`. This is generally used when images are illustrations. The example also displays linked item headings. + +
+View example of the equal heights pattern +
+ ## Parameter consistency The presence of an element in one of the items establishes a visual rhythm that should be upheld by the other items. @@ -72,14 +81,6 @@ This demonstrates what **not** to do with this pattern. View example of the equal heights pattern
-## Highlighted Images - -To [highlight](https://vanillaframework.io/docs/patterns/images#highlighted-image) images within the pattern, set `highlight_images=True`. This is generally used when images are illustrations. - -
-View example of the equal heights pattern -
- ## Jinja Macro The `vf_equal_heights` Jinja macro can be used to generate an equal heights pattern. The API for the macro is @@ -255,6 +256,21 @@ shown below. The title for the item. + + + items[].title_link_attrs + + + No + + Object + + N/A + + + Attributes of an anchor element, as a dictionary. See attribute forwarding docs for more info. Links the title of the item. + + items[].description_html