Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EWPP-3764: Update carousel pattern and paragraph variants. #1339

Merged
merged 3 commits into from
Dec 11, 2023
Merged

EWPP-3764: Update carousel pattern and paragraph variants. #1339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b5353a8
EWPP-3764: Update Carousel pattern variants.
22Alexandra Nov 29, 2023
c0fba13
EWPP-3764: Update default carousel paragraph variant.
22Alexandra Nov 29, 2023
8db0f93
EWPP-3764: Require explicit version of phpspec/prophecy-phpunit.
22Alexandra Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
"openeuropa/oe_webtools": "^1.23",
"openeuropa/rdf_skos": "^1.0.0-alpha10",
"openeuropa/task-runner-drupal-project-symlink": "^1.0.0-beta6",
"phpspec/prophecy-phpunit": "^2",
"phpspec/prophecy-phpunit": "~2.0.0",
"symfony/phpunit-bridge": "^6.0"
},
"scripts": {
Expand Down Expand Up @@ -109,7 +109,10 @@
"locations": {
"web-root": "./build"
}
}
},
"_readme": [
"Explicit requirement of phpspec/prophecy-phpunit due to D9.4 being incompatible with PHPUnit10."
]
},
"config": {
"sort-packages": true,
Expand Down
2 changes: 1 addition & 1 deletion oe_theme.theme
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2226,7 +2226,7 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
'centered' => FALSE,
// The paragraph has a required image field, so we need to set a default
// image variant in order to render the image.
'variant' => 'text-highlight',
'variant' => 'text-overlay',
];
$cacheability->applyTo($variables);
}
Expand Down
21 changes: 12 additions & 9 deletions templates/patterns/carousel/carousel.ui_patterns.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ carousel:
description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
url: "https://example.com"
url_text: "CTA"
image: "https://loremflickr.com/640/480/tech"
image: "https://picsum.photos/seed/picsum/600/300"
image_alt: "alternative text"
variant: "text-box"
centered: false
Expand All @@ -20,31 +20,34 @@ carousel:
description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
url: "https://example.com"
url_text: "CTA"
image: "https://loremflickr.com/640/480/arch"
variant: "text-highlight"
image: "https://picsum.photos/seed/picsum/600/300"
variant: "text-overlay"
centered: false
- title: "Donec maximus pharetra ex a ultricies"
description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies"
url: "https://example.com"
url_text: "CTA"
centered: false
- title: "Donec maximus pharetra ex a ultricies"
description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies"
url: "https://example.com"
url_text: "CTA"
image: "https://loremflickr.com/640/480/tech"
variant: "image-overlay"
image: "https://picsum.photos/seed/picsum/600/300"
variant: "text-overlay"
credit: "© Copyright fourth item"
- title: "Lorem ipsum dolor sit amet"
description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
url: "https://example.com"
url_text: "CTA"
variant: "text-highlight"
centered: false
image: "https://picsum.photos/seed/picsum/600/300"
image_alt: "alternative text"
variant: "text-box"
centered: true
- title: "Duis vitae pulvinar turpis"
description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
url: "https://example.com"
url_text: "CTA"
variant: "text-box"
centered: false
centered: true
counter_label:
type: "string"
label: "Counter label"
Expand Down
2 changes: 1 addition & 1 deletion templates/patterns/carousel/pattern-carousel.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
description: item.description,
link: _link,
picture: _picture,
variant: item.variant|default('primary'),
variant: item.variant|default('plain-background'),
centered: item.centered is defined and item.centered == false ? false : true,
credit: item.credit|default('')
}]) %}
Expand Down
9 changes: 4 additions & 5 deletions tests/src/Kernel/Paragraphs/MediaParagraphsTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -962,7 +962,6 @@ public function testIframe(): void {
* Test Carousel paragraph rendering.
*/
public function testCarousel(): void {
$this->markTestSkipped('Must be re-enabled before considering migration to ECL 4 as complete.');
// Set image media translatable.
$this->container->get('content_translation.manager')
->setEnabled('media', 'image', TRUE);
Expand Down Expand Up @@ -1083,29 +1082,29 @@ public function testCarousel(): void {
'title' => 'Item 1',
'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_1_uri),
'image_alt' => 'First image alt en',
'variant' => 'text-highlight',
'variant' => 'text-overlay',
],
[
'title' => 'Item 2',
'description' => 'Item description 2',
'url' => 'http://www.example.com/',
'url_text' => 'CTA 2',
'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_2_uri),
'variant' => 'text-highlight',
'variant' => 'text-overlay',
],
[
'title' => 'Item 3',
'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_1_uri),
'image_alt' => 'First image alt en',
'variant' => 'text-highlight',
'variant' => 'text-overlay',
],
[
'title' => 'Item 4',
'description' => 'Item description 4',
'url' => '/',
'url_text' => 'CTA 4',
'image' => $this->container->get('file_url_generator')->generateAbsoluteString($en_file_2_uri),
'variant' => 'text-highlight',
'variant' => 'text-overlay',
],
],
];
Expand Down
82 changes: 41 additions & 41 deletions tests/src/Kernel/fixtures/rendering.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3565,32 +3565,33 @@
description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
url: "https://example.com"
url_text: "CTA 1"
image: "https://placeimg.com/640/480/tech"
image: "https://picsum.photos/seed/picsum/600/300"
variant: "text-box"
centered: false
credit: "© Copyright first item"
- title: "Duis vitae pulvinar turpis"
description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
url: "https://example.com"
url_text: "CTA 2"
image: "https://placeimg.com/640/480/arch"
variant: "text-highlight"
image: "https://picsum.photos/seed/picsum/600/300"
variant: "text-overlay"
- title: "Donec maximus pharetra ex a ultricies"
description: "Integer quis lorem tellus."
url: "https://example.com"
url_text: "CTA 3"
- title: "Donec maximus pharetra ex a ultricies"
image: "https://placeimg.com/640/480/tech"
variant: "image-overlay"
credit: "© Copyright fourth item"
- title: "Donec maximus pharetra"
centered: false
- title: "Lorem ipsum dolor sit amet"
description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
variant: "text-highlight"
centered: false
image: "https://picsum.photos/seed/picsum/600/300"
variant: "text-box"
centered: true
- title: "Duis vitae pulvinar turpis"
url: "https://example.com"
url_text: "CTA 4"
variant: "text-box"
image: "https://picsum.photos/seed/picsum/600/300"
variant: "text-overlay"
centered: false
assertions:
count:
div.ecl-carousel.ecl-carousel--full-width: 0
Expand All @@ -3600,36 +3601,35 @@
div.ecl-carousel__slide: 6
div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-box: 2
div.ecl-carousel__slide section.ecl-banner.ecl-banner.ecl-banner--text-box.ecl-banner--centered: 1
div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-highlight: 2
div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-highlight.ecl-banner--centered: 1
div.ecl-carousel__slide section.ecl-banner.ecl-banner--primary.ecl-banner--m.ecl-banner--centered: 1
div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-overlay: 2
div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-overlay.ecl-banner--centered: 1
div.ecl-carousel__slide section.ecl-banner.ecl-banner--plain-background: 2
div.ecl-carousel__slide section.ecl-banner.ecl-banner--plain-background.ecl-banner--centered: 1
div.ecl-carousel__controls: 1
section.ecl-banner--text-box.ecl-banner--m picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://placeimg.com/640/480/tech"]: 1
section.ecl-banner--text-highlight.ecl-banner--m picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://placeimg.com/640/480/arch"]: 1
div.ecl-carousel__slide section.ecl-banner.ecl-banner--image-overlay.ecl-banner--centered: 1
section.ecl-banner--image-overlay.ecl-banner--m picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://placeimg.com/640/480/tech"]: 1
div.ecl-carousel__slide section.ecl-banner--image-shade.ecl-banner--m.ecl-banner--centered div.ecl-banner__content p.ecl-banner__description: 0
div.ecl-carousel__slide section.ecl-banner--image-shade.ecl-banner--m.ecl-banner--centered div.ecl-banner__content div.ecl-banner__cta a span.ecl-link__label: 0
div.ecl-carousel__slide section.ecl-banner--secondary.ecl-banner--m div.ecl-banner__content div.ecl-banner__cta a span.ecl-link__label: 0
div.ecl-carousel__slide section.ecl-banner--white.ecl-banner--m div.ecl-banner__content p.ecl-banner__description: 0
contains:
div.ecl-carousel__slide section.ecl-banner--image.ecl-banner--m div.ecl-banner__content div.ecl-banner__title: 'Lorem ipsum dolor sit amet'
div.ecl-carousel__slide section.ecl-banner--image.ecl-banner--m div.ecl-banner__content p.ecl-banner__description: 'Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
div.ecl-carousel__slide section.ecl-banner--image.ecl-banner--m div.ecl-banner__content div.ecl-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 1'
div.ecl-carousel__slide section.ecl-banner--image.ecl-banner--m div.ecl-banner__credit: '© Copyright first item'
div.ecl-carousel__slide div.ecl-banner.ecl-banner--image-gradient.ecl-banner--centered div.ecl-banner__title: 'Duis vitae pulvinar turpis'
div.ecl-carousel__slide div.ecl-banner.ecl-banner--image-gradient.ecl-banner--centered p.ecl-banner__description: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
div.ecl-carousel__slide div.ecl-banner.ecl-banner--image-gradient.ecl-banner--centered div.ecl-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 2'
div.ecl-carousel__slide section.ecl-banner--primary.ecl-banner--m div.ecl-banner.ecl-banner--primary.ecl-banner--centered div.ecl-banner__title: 'Donec maximus pharetra ex a ultricies'
div.ecl-carousel__slide section.ecl-banner--primary.ecl-banner--m div.ecl-banner.ecl-banner--primary.ecl-banner--centered p.ecl-banner__description: 'Integer quis lorem tellus.'
div.ecl-carousel__slide section.ecl-banner--primary.ecl-banner--m div.ecl-banner.ecl-banner--primary.ecl-banner--centered div.ecl-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 3'
div.ecl-carousel__slide section.ecl-banner--image-shade.ecl-banner--m.ecl-banner--centered div.ecl-banner__content div.ecl-banner__title: 'Donec maximus pharetra ex a ultricies'
div.ecl-carousel__slide section.ecl-banner--image-shade.ecl-banner--m.ecl-banner--centered div.ecl-banner__credit: '© Copyright fourth item'
div.ecl-carousel__slide section.ecl-banner--secondary.ecl-banner--m div.ecl-banner__content div.ecl-banner__title: 'Lorem ipsum dolor sit amet'
div.ecl-carousel__slide section.ecl-banner--secondary.ecl-banner--m div.ecl-banner__content p.ecl-banner__description: 'Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
div.ecl-carousel__slide section.ecl-banner--white.ecl-banner--m div.ecl-banner__content div.ecl-banner__title: 'Duis vitae pulvinar turpis'
div.ecl-carousel__slide section.ecl-banner--white.ecl-banner--m div.ecl-banner__content div.ecl-banner__cta a[href="http://example.com"] span.ecl-link__label: 'CTA 4'
div.ecl-carousel__pagination: 'of 6'
section.ecl-banner--text-box.ecl-banner--m.ecl-banner--centered picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://picsum.photos/seed/picsum/600/300"]: 1
section.ecl-banner--text-box.ecl-banner--m:not(.ecl-banner--centered) picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://picsum.photos/seed/picsum/600/300"]: 1
section.ecl-banner--text-overlay.ecl-banner--m:not(.ecl-banner--centered) picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://picsum.photos/seed/picsum/600/300"]: 1
section.ecl-banner--text-overlay.ecl-banner--m.ecl-banner--centered picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://picsum.photos/seed/picsum/600/300"]: 1
div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner__content div.ecl-banner__title: 2
div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner__content p.ecl-banner__description: 1
div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m div.ecl-banner__content div.ecl-banner__cta: 1
equals:
div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__content div.ecl-banner__title .ecl-banner__title-text: 'Lorem ipsum dolor sit amet'
div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__content p.ecl-banner__description .ecl-banner__description-text: 'Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__content div.ecl-banner__cta a[href="https://example.com"] span.ecl-link__label: 'CTA 1'
div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__credit: '© Copyright first item'
div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-overlay.ecl-banner--centered div.ecl-banner__title .ecl-banner__title-text: 'Duis vitae pulvinar turpis'
div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-overlay.ecl-banner--centered p.ecl-banner__description .ecl-banner__description-text: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
div.ecl-carousel__slide section.ecl-banner.ecl-banner--text-overlay.ecl-banner--centered div.ecl-banner__cta a[href="https://example.com"] span.ecl-link__label: 'CTA 2'
div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m.ecl-banner--centered div.ecl-banner__title .ecl-banner__title-text: 'Donec maximus pharetra ex a ultricies'
div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m.ecl-banner--centered p.ecl-banner__description .ecl-banner__description-text: 'Integer quis lorem tellus.'
div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m.ecl-banner--centered div.ecl-banner__cta a[href="https://example.com"] span.ecl-link__label: 'CTA 3'
div.ecl-carousel__slide section.ecl-banner--plain-background.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__title .ecl-banner__title-text: 'Donec maximus pharetra'
div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--m.ecl-banner--centered div.ecl-banner__content div.ecl-banner__title .ecl-banner__title-text: 'Lorem ipsum dolor sit amet'
div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--m.ecl-banner--centered div.ecl-banner__content p.ecl-banner__description .ecl-banner__description-text: 'Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur'
div.ecl-carousel__slide section.ecl-banner--text-overlay.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__content div.ecl-banner__title .ecl-banner__title-text: 'Duis vitae pulvinar turpis'
div.ecl-carousel__slide section.ecl-banner--text-overlay.ecl-banner--m:not(.ecl-banner--centered) div.ecl-banner__content div.ecl-banner__cta a[href="https://example.com"] span.ecl-link__label: 'CTA 4'
span.ecl-carousel__max: '6'
- array:
'#type': 'pattern'
'#id': 'carousel'
Expand All @@ -3639,7 +3639,7 @@
description: "Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies"
url: "https://example.com"
url_text: "CTA 1"
image: "https://placeimg.com/640/480/tech"
image: "https://picsum.photos/seed/picsum/600/300"
variant: "text-box"
- title: "Lorem ipsum dolor sit amet"
description: "Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur"
Expand All @@ -3662,7 +3662,7 @@
div.ecl-carousel__slide: 3
div.ecl-carousel__slide section.ecl-banner.ecl-banner--l.ecl-banner--text-box.ecl-banner--centered: 1
div.ecl-carousel__slide section.ecl-banner.ecl-banner--l.ecl-banner--plain-background: 2
section.ecl-banner--text-box.ecl-banner--l picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://placeimg.com/640/480/tech"]: 1
section.ecl-banner--text-box.ecl-banner--l picture.ecl-picture.ecl-banner__picture img.ecl-banner__image[src="https://picsum.photos/seed/picsum/600/300"]: 1
contains:
div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--l.ecl-banner--centered div.ecl-banner__content div.ecl-banner__title: 'Donec maximus pharetra ex a ultricies'
div.ecl-carousel__slide section.ecl-banner--text-box.ecl-banner--l.ecl-banner--centered div.ecl-banner__content p.ecl-banner__description: 'Integer quis lorem tellus. Nullam sollicitudin suscipit diam, ac blandit ipsum tempor consectetur. Duis vitae pulvinar turpis. Donec maximus pharetra ex a ultricies'
Expand Down
4 changes: 2 additions & 2 deletions tests/src/PatternAssertions/CarouselAssert.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
$item = $items->eq($index);
// Assert carousel item (banner) variant.
if (!isset($expected_item['variant'])) {
$this->assertElementExists('section.ecl-banner.ecl-banner--primary.ecl-banner--l', $item);
$this->assertElementExists('section.ecl-banner.ecl-banner--plain-background.ecl-banner--l', $item);
}
else {
$this->assertElementExists('section.ecl-banner.ecl-banner--' . $expected_item['variant'], $item);
Expand All @@ -71,7 +71,7 @@ protected function assertItems(array $expected_items, Crawler $crawler): void {
$this->assertElementNotExists('div.ecl-banner__cta a', $item);
}
else {
$this->assertElementAttribute($expected_item['url'], 'div.ecl-banner__cta a.ecl-link--icon-after.ecl-banner__link-cta', 'href', $item);
$this->assertElementAttribute($expected_item['url'], 'div.ecl-banner__cta a.ecl-link--icon.ecl-banner__link-cta', 'href', $item);
$this->assertElementText($expected_item['url_text'], 'div.ecl-banner__cta a span.ecl-link__label', $item);
}
// Assert image.
Expand Down