EWPP-3802: Add carousel variants.

modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image.yml

@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_image
+    - field.field.paragraph.oe_carousel.field_oe_carousel_items
+    - field.field.paragraph.oe_carousel.field_oe_carousel_size
+    - paragraphs.paragraphs_type.oe_carousel
+  module:
+    - paragraphs
+id: paragraph.oe_carousel.oe_banner_image
+targetEntityType: paragraph
+bundle: oe_carousel
+mode: oe_banner_image
+content:
+  field_oe_carousel_items:
+    type: paragraphs
+    weight: 1
+    region: content
+    settings:
+      title: Paragraph
+      title_plural: Paragraphs
+      edit_mode: open
+      closed_mode: summary
+      autocollapse: none
+      closed_mode_threshold: 0
+      add_mode: dropdown
+      form_display_mode: default
+      default_paragraph_type: ''
+      features:
+        collapse_edit_all: collapse_edit_all
+        duplicate: duplicate
+    third_party_settings: {  }
+  field_oe_carousel_size:
+    type: options_select
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  translation:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true

modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_image_shade.yml

@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_image_shade
+    - field.field.paragraph.oe_carousel.field_oe_carousel_items
+    - field.field.paragraph.oe_carousel.field_oe_carousel_size
+    - paragraphs.paragraphs_type.oe_carousel
+  module:
+    - paragraphs
+id: paragraph.oe_carousel.oe_banner_image_shade
+targetEntityType: paragraph
+bundle: oe_carousel
+mode: oe_banner_image_shade
+content:
+  field_oe_carousel_items:
+    type: paragraphs
+    weight: 1
+    region: content
+    settings:
+      title: Paragraph
+      title_plural: Paragraphs
+      edit_mode: open
+      closed_mode: summary
+      autocollapse: none
+      closed_mode_threshold: 0
+      add_mode: dropdown
+      form_display_mode: default
+      default_paragraph_type: ''
+      features:
+        collapse_edit_all: collapse_edit_all
+        duplicate: duplicate
+    third_party_settings: {  }
+  field_oe_carousel_size:
+    type: options_select
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  translation:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true

modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_primary.yml

@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_primary
+    - field.field.paragraph.oe_carousel.field_oe_carousel_items
+    - field.field.paragraph.oe_carousel.field_oe_carousel_size
+    - paragraphs.paragraphs_type.oe_carousel
+  module:
+    - paragraphs
+id: paragraph.oe_carousel.oe_banner_primary
+targetEntityType: paragraph
+bundle: oe_carousel
+mode: oe_banner_primary
+content:
+  field_oe_carousel_items:
+    type: paragraphs
+    weight: 1
+    region: content
+    settings:
+      title: Paragraph
+      title_plural: Paragraphs
+      edit_mode: open
+      closed_mode: summary
+      autocollapse: none
+      closed_mode_threshold: 0
+      add_mode: dropdown
+      form_display_mode: default
+      default_paragraph_type: ''
+      features:
+        collapse_edit_all: collapse_edit_all
+        duplicate: duplicate
+    third_party_settings: {  }
+  field_oe_carousel_size:
+    type: options_select
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  translation:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true

modules/oe_theme_paragraphs_carousel/config/install/core.entity_form_display.paragraph.oe_carousel.oe_banner_text_highlight.yml

@@ -0,0 +1,47 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_text_highlight
+    - field.field.paragraph.oe_carousel.field_oe_carousel_items
+    - field.field.paragraph.oe_carousel.field_oe_carousel_size
+    - paragraphs.paragraphs_type.oe_carousel
+  module:
+    - paragraphs
+id: paragraph.oe_carousel.oe_banner_text_highlight
+targetEntityType: paragraph
+bundle: oe_carousel
+mode: oe_banner_text_highlight
+content:
+  field_oe_carousel_items:
+    type: paragraphs
+    weight: 1
+    region: content
+    settings:
+      title: Paragraph
+      title_plural: Paragraphs
+      edit_mode: open
+      closed_mode: summary
+      autocollapse: none
+      closed_mode_threshold: 0
+      add_mode: dropdown
+      form_display_mode: default
+      default_paragraph_type: ''
+      features:
+        collapse_edit_all: collapse_edit_all
+        duplicate: duplicate
+    third_party_settings: {  }
+  field_oe_carousel_size:
+    type: options_select
+    weight: 0
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  translation:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  status: true

modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.info.yml

@@ -0,0 +1,9 @@
+name: OpenEuropa Theme Paragraphs Carousel
+type: module
+description: Companion module for the OE Paragraphs Carousel module
+package: OpenEuropa
+core_version_requirement: ^10
+dependencies:
+  - oe_paragraphs:oe_paragraphs_banner
+  - oe_paragraphs:oe_paragraphs_carousel
+  - oe_theme:oe_theme_paragraphs_banner

modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.install

@@ -0,0 +1,39 @@
+<?php
+
+/**
+ * @file
+ * Install hooks for OpenEuropa Theme Paragraphs Carousel module.
+ */
+
+declare(strict_types = 1);
+
+use Drupal\Core\Entity\Entity\EntityFormDisplay;
+use Drupal\Core\Entity\Entity\EntityFormMode;
+
+/**
+ * Implements hook_install().
+ *
+ * Updates the form modes labels.
+ */
+function oe_theme_paragraphs_carousel_install($is_syncing) {
+  // If we are installing from config, we bail out.
+  if ($is_syncing) {
+    return;
+  }
+  $form_modes_labels = [
+    'paragraph.oe_banner_primary' => 'Plain background',
+    'paragraph.oe_banner_image' => 'Text box',
+    'paragraph.oe_banner_image_shade' => 'Image overlay',
+    'paragraph.oe_banner_text_highlight' => 'Text highlight',
+  ];
+  foreach ($form_modes_labels as $id => $label) {
+    $form_mode = EntityFormMode::load($id);
+    $form_mode->set('label', $label);
+    $form_mode->save();
+  }
+  // Change the field widget for the carousel items field.
+  EntityFormDisplay::load('paragraph.oe_carousel.default')
+    ->setComponent('field_oe_carousel_items', [
+      'type' => 'oe_paragraphs_variants',
+    ])->save();
+}

modules/oe_theme_paragraphs_carousel/oe_theme_paragraphs_carousel.module

@@ -0,0 +1,46 @@
+<?php
+
+/**
+ * @file
+ * The OE Theme Paragraphs Carousel module.
+ */
+
+declare(strict_types = 1);
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Render\Element;
+
+/**
+ * Implements hook_field_widget_complete_WIDGET_TYPE_form_alter().
+ */
+function oe_theme_paragraphs_carousel_field_widget_complete_oe_paragraphs_variants_form_alter(&$field_widget_complete_form, FormStateInterface $form_state, $context) {
+  $elements = &$field_widget_complete_form['widget'];
+  $variants_without_image = [
+    'oe_banner_primary',
+    'default',
+  ];
+  foreach (Element::children($elements) as $key) {
+    if (!isset($elements[$key]['#paragraph_type']) || !$elements[$key]['#paragraph_type'] === 'oe_carousel') {
+      continue;
+    }
+    if (!isset($elements[$key]['variant']) || !array_key_exists('oe_banner_primary', $elements[$key]['variant']['#options'])) {
+      continue;
+    }
+    if (!in_array($elements[$key]['variant']['#default_value'], $variants_without_image)) {
+      continue;
+    }
+    if (!isset($elements[$key]['subform']['field_oe_carousel_items']['widget'])) {
+      continue;
+    }
+    // Hide the media field of Carousel item paragraph for variants without
+    // image.
+    $subparagraphs = &$elements[$key]['subform']['field_oe_carousel_items']['widget'];
+    foreach (Element::children($subparagraphs) as $index) {
+      if (!isset($subparagraphs[$index]['#paragraph_type']) || !$subparagraphs[$index]['#paragraph_type'] === 'oe_carousel_item') {
+        continue;
+      }
+      $subparagraphs[$index]['subform']['field_oe_media']['widget'][0]['target_id']['#default_value'] = FALSE;
+      $subparagraphs[$index]['subform']['field_oe_media']['#access'] = FALSE;
+    }
+  }
+}

oe_theme.theme

@@ -2168,6 +2168,19 @@ function oe_theme_preprocess_field__entity_reference_revisions__oe_event_speaker
 function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = $variables['paragraph'];
+  // Map the deprecated variants from oe_paragraphs to Banner pattern variants.
+  $deprecated_paragraph_variants_mapping = [
+    'default' => 'plain_background',
+    'primary' => 'plain_background',
+    'image' => 'text_box',
+    'image_shade' => 'image_overlay',
+  ];
+  // If the paragraph has a value set for the variant field, we retrieve it,
+  // otherwise keep text_highlight as default variant like before.
+  $variant = $paragraph->get('oe_paragraphs_variant')->first()->value ?? 'text_highlight';
+  $variant = str_replace('oe_banner_', '', $variant);
+  $variant = $deprecated_paragraph_variants_mapping[$variant] ?? $variant;
+  $variant = str_replace('_', '-', $variant);
   $variables['items'] = [];
   $cacheability = CacheableMetadata::createFromRenderArray($variables);
 
@@ -2176,6 +2189,29 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
     // Get sub-paragraph translation.
     $sub_paragraph = \Drupal::service('entity.repository')
       ->getTranslationFromContext($sub_paragraph, $paragraph->language()->getId());
+    // Add CTA, Title and description if available.
+    $link = '';
+    $link_text = '';
+    if (!$sub_paragraph->get('field_oe_link')->isEmpty()) {
+      /** @var \Drupal\link\Plugin\Field\FieldType\LinkItem $link_item */
+      $link_item = $sub_paragraph->get('field_oe_link')->first();
+      $link = Url::fromUri($link_item->get('uri')->getValue())->toString();
+      $link_text = $link_item->get('title')->getValue();
+    }
+    $item = [
+      'title' => $sub_paragraph->get('field_oe_title')->value,
+      'description' => !$sub_paragraph->get('field_oe_text')->isEmpty() ? $sub_paragraph->get('field_oe_text')->value : '',
+      'url' => $link ?? '',
+      'url_text' => $link_text ?? '',
+      'centered' => FALSE,
+      'variant' => $variant,
+    ];
+    if ($variant === 'plain-background') {
+      // If variant the doesn't have an image, skip to the next item.
+      $variables['items'][] = $item;
+      $cacheability->applyTo($variables);
+      continue;
+    }
     /** @var \Drupal\media\Entity\Media $media */
     $media = $sub_paragraph->get('field_oe_media')->entity;
     if (!$media instanceof MediaInterface) {
@@ -2217,28 +2253,9 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
       continue;
     }
     $style = \Drupal::entityTypeManager()->getStorage('image_style')->load('oe_theme_full_width');
-    $image_url = $style->buildUrl($uri);
-
-    $link = '';
-    $link_text = '';
-    if (!$sub_paragraph->get('field_oe_link')->isEmpty()) {
-      /** @var \Drupal\link\Plugin\Field\FieldType\LinkItem $link_item */
-      $link_item = $sub_paragraph->get('field_oe_link')->first();
-      $link = Url::fromUri($link_item->get('uri')->getValue())->toString();
-      $link_text = $link_item->get('title')->getValue();
-    }
-    $variables['items'][] = [
-      'title' => $sub_paragraph->get('field_oe_title')->value,
-      'description' => !$sub_paragraph->get('field_oe_text')->isEmpty() ? $sub_paragraph->get('field_oe_text')->value : '',
-      'url' => $link ?? '',
-      'url_text' => $link_text ?? '',
-      'image' => $image_url,
-      'image_alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? '',
-      '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',
-    ];
+    $item['image'] = $style->buildUrl($uri);
+    $item['image_alt'] = $source->getMetadata($media, 'thumbnail_alt_value') ?? '';
+    $variables['items'][] = $item;
     $cacheability->applyTo($variables);
   }
   if ($paragraph->hasField('field_oe_carousel_size') && !$paragraph->get('field_oe_carousel_size')->isEmpty()) {

runner.yml.dist

@@ -36,6 +36,7 @@ drupal:
     - "./vendor/bin/drush en oe_theme_contact_forms -y"
     - "./vendor/bin/drush en oe_theme_paragraphs_contact -y"
     - "./vendor/bin/drush en oe_theme_paragraphs_banner -y"
+    - "./vendor/bin/drush en oe_theme_paragraphs_carousel -y"
     - "./vendor/bin/drush en field_ui -y"
     - "./vendor/bin/drush en config_devel -y"
     - "./vendor/bin/drush en toolbar -y"

templates/patterns/carousel/pattern-carousel.html.twig

@@ -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('')
   }]) %}