Skip to content

Commit

Permalink
OEL-3354: Retain default order classes.
Browse files Browse the repository at this point in the history
  • Loading branch information
@drishu
drishu committed Nov 19, 2024
1 parent ed2d62f commit 04635fb
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 40 deletions.
10 changes: 8 additions & 2 deletions templates/patterns/featured_media/pattern-featured-media.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,18 @@

<div{{ attributes.addClass('bcl-featured-media') }}>
{% if subtitle or text or link %}
{% set text_alignment_class = 'order-1' %}
{% set video_alignment_class = 'order-2' %}
{% if text_position == 'right' %}
{% set text_alignment_class = 'order-2' %}
{% set video_alignment_class = 'order-1' %}
{% endif %}

{# Backward compatibily setting: Text always on top in mobile viewports. #}
{% if featured_media_mobile_text_top %}
{# Backward compatibily setting: Text always on top in mobile viewports. #}
{% if featured_media_mobile_text_top %}
{% set text_alignment_class = 'order-md-1' %}
{% set video_alignment_class = 'order-md-2' %}
{% if text_position == 'right' %}
{% set text_alignment_class = 'order-md-2' %}
{% set video_alignment_class = 'order-md-1' %}
{% endif %}
Expand Down
75 changes: 37 additions & 38 deletions tests/src/Kernel/fixtures/markup_rendering_patterns/featured_media.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ featured_media_image_not_wrapper:
'h2': 0
'h5': 0
'a': 0
'.md-6,.order-md-1,.order-md-2': 0
'.md-6,.order-1,.order-2': 0
equals:
'figcaption': 'Media description text goes here.'
featured_media_image_with_title_tag:
Expand All @@ -45,17 +45,17 @@ featured_media_image_with_title_tag:
count:
'div.bcl-featured-media': 1
'div.row': 1
'div.col-12.col-md-6.order-md-1': 1
'div.col-12.col-md-6.order-md-2': 1
'div.col-12.col-md-6.order-1': 1
'div.col-12.col-md-6.order-2': 1
'figure': 1
'figcaption': 1
'img': 1
'img[src="https://picsum.photos/1200/600/"][alt="Alternative text for paragraph image"][title="Example"]': 1
'div.bcl-featured-media > h1.mb-4': 1
'div.bcl-featured-media > div.row': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2 > figure': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2 > figure': 1
'figure > img.img-fluid': 1
'figure > figcaption.bg-light.p-3': 1
'h1.mb-4': 1
Expand All @@ -64,7 +64,7 @@ featured_media_image_with_title_tag:
'.md-6': 0
equals:
'h1.bcl-heading': 'Title'
'div.col-12.col-md-6.order-md-1': 'Lorem Ipsum dolor sit amet.'
'div.col-12.col-md-6.order-1': 'Lorem Ipsum dolor sit amet.'
'figcaption': 'Media description text goes here.'
featured_media_image_with_text_aligned_left:
render:
Expand All @@ -83,17 +83,17 @@ featured_media_image_with_text_aligned_left:
count:
'div.bcl-featured-media': 1
'div.row': 1
'div.col-12.col-md-6.order-md-1': 1
'div.col-12.col-md-6.order-md-2': 1
'div.col-12.col-md-6.order-1': 1
'div.col-12.col-md-6.order-2': 1
'figure': 1
'figcaption': 1
'img': 1
'img[src="https://picsum.photos/1200/600/"][alt="Alternative text for paragraph image"][title="Example"]': 1
'div.bcl-featured-media > h2.mb-4': 1
'div.bcl-featured-media > div.row': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2 > figure': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2 > figure': 1
'figure > img.img-fluid': 1
'figure > figcaption.bg-light.p-3': 1
'h2.mb-4': 1
Expand All @@ -102,7 +102,7 @@ featured_media_image_with_text_aligned_left:
'.md-6': 0
equals:
'h2.bcl-heading': 'Title'
'div.col-12.col-md-6.order-md-1': 'Lorem Ipsum dolor sit amet.'
'div.col-12.col-md-6.order-1': 'Lorem Ipsum dolor sit amet.'
'figcaption': 'Media description text goes here.'
featured_media_image_with_text_aligned_right:
render:
Expand All @@ -121,17 +121,17 @@ featured_media_image_with_text_aligned_right:
count:
'div.bcl-featured-media': 1
'div.row': 1
'div.col-12.col-md-6.order-md-1': 1
'div.col-12.col-md-6.order-md-2': 1
'div.col-12.col-md-6.order-1': 1
'div.col-12.col-md-6.order-2': 1
'figure': 1
'figcaption': 1
'img': 1
'img[src="https://picsum.photos/1200/600/"][alt="Alternative text for paragraph image"][title="Example"]': 1
'div.bcl-featured-media > h2.mb-4': 1
'div.bcl-featured-media > div.row': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-1 > figure': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-1 > figure': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'figure > img.img-fluid': 1
'figure > figcaption.bg-light.p-3': 1
'h2.mb-4': 1
Expand All @@ -140,7 +140,7 @@ featured_media_image_with_text_aligned_right:
'.md-6': 0
equals:
'h2': 'Title'
'div.col-12.col-md-6.order-md-2': 'Lorem Ipsum dolor sit amet.'
'div.col-12.col-md-6.order-2': 'Lorem Ipsum dolor sit amet.'
'figcaption': 'Media description text goes here.'
featured_media_iframe_not_wrapper:
render:
Expand Down Expand Up @@ -172,7 +172,7 @@ featured_media_iframe_not_wrapper:
'h2': 0
'h5': 0
'a': 0
'.md-6,.order-md-1,.order-md-2': 0
'.md-6,.order-1,.order-2': 0
equals:
'figcaption': 'Media description text goes here.'
featured_media_iframe_with_text_container_left_aligned_with_default_ratio:
Expand All @@ -193,18 +193,18 @@ featured_media_iframe_with_text_container_left_aligned_with_default_ratio:
count:
'div.bcl-featured-media': 1
'div.row': 1
'div.col-12.col-md-6.order-md-1': 1
'div.col-12.col-md-6.order-md-2': 1
'div.col-12.col-md-6.order-1': 1
'div.col-12.col-md-6.order-2': 1
'figure': 1
'figcaption': 1
'img': 0
'iframe': 1
'div.ratio.ratio-16x9': 1
'iframe[src="https://www.youtube.com/watch?v=nWpgO1EPO_Y"]': 1
'div.bcl-featured-media > div.row': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2 > figure': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2 > figure': 1
'figure > div.ratio.ratio-16x9': 1
'figure > figcaption.bg-light.p-3': 1
'h2.mb-4': 1
Expand All @@ -213,7 +213,7 @@ featured_media_iframe_with_text_container_left_aligned_with_default_ratio:
'.md-6': 0
equals:
'h2': 'Title'
'div.col-12.col-md-6.order-md-1': 'Lorem Ipsum dolor sit amet.'
'div.col-12.col-md-6.order-1': 'Lorem Ipsum dolor sit amet.'
'figcaption': 'Media description text goes here.'
featured_media_iframe_with_text_container_right_aligned_with_link_ratio_21x9:
render:
Expand All @@ -237,19 +237,19 @@ featured_media_iframe_with_text_container_right_aligned_with_link_ratio_21x9:
count:
'div.bcl-featured-media': 1
'div.row': 1
'div.col-12.col-md-6.order-md-1': 1
'div.col-12.col-md-6.order-md-2': 1
'div.col-12.col-md-6.order-1': 1
'div.col-12.col-md-6.order-2': 1
'figure': 1
'figcaption': 1
'img': 0
'iframe': 1
'div.ratio.ratio-21x9': 1
'iframe[src="https://www.youtube.com/watch?v=nWpgO1EPO_Y"]': 1
'div.bcl-featured-media > div.row': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-1 > figure': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-md-2 > a': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-1': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-1 > figure': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2': 1
'div.bcl-featured-media > div.row > div.col-12.col-md-6.order-2 > a': 1
'figure > div.ratio.ratio-21x9': 1
'figure > figcaption.bg-light.p-3': 1
'h2.mb-4': 1
Expand All @@ -261,8 +261,8 @@ featured_media_iframe_with_text_container_right_aligned_with_link_ratio_21x9:
'h2': 'Title'
'figcaption': 'Media description text goes here.'
contains:
'div.col-12.col-md-6.order-md-2': 'Lorem Ipsum dolor sit amet.'
'div.col-12.col-md-6.order-md-2 a': 'View all'
'div.col-12.col-md-6.order-2': 'Lorem Ipsum dolor sit amet.'
'div.col-12.col-md-6.order-2 a': 'View all'
featured_media_with_subtitle_and_subtitle_tag:
render:
'#type': pattern
Expand Down Expand Up @@ -353,7 +353,6 @@ featured_media_with_bc_featured_media_mobile_text_top_right:
count:
'h2.bcl-heading': 1
'div.bcl-featured-media > div.row > .col-12.col-md-6.order-md-2': 1
'div.bcl-featured-media > div.row > .col-12.col-md-6.order-md-1': 1
'div.bcl-featured-media > div.row > .col-12.col-md-6.order-md-1 figure': 1
equals:
'.bcl-heading': 'Test title'
Expand All @@ -375,10 +374,10 @@ featured_media_with_bc_featured_media_mobile_text_top_left:
assertions:
count:
'h2.bcl-heading': 1
'div.bcl-featured-media > div.row > .col-12.col-md-6': 2
'div.bcl-featured-media > div.row > .col-12.col-md-6 figure': 1
'div.bcl-featured-media > div.row > .col-12.col-md-6.order-md-1': 1
'div.bcl-featured-media > div.row > .col-12.col-md-6.order-md-2 figure': 1
equals:
'.bcl-heading': 'Test title'
'.col-12.col-md-6': 'Text text'
'.col-12.col-md-6.order-md-1': 'Text text'
backward_compatibility:
featured_media_mobile_text_top: true

0 comments on commit 04635fb

Please sign in to comment.