EWPP-3269: Theming banner & carousel new fields.

modules/oe_theme_helper/config/install/image.style.oe_theme_full_width.yml

@@ -0,0 +1,14 @@
+langcode: en
+status: true
+dependencies: {  }
+name: oe_theme_full_width
+label: 'Full width (3840)'
+effects:
+  128cf659-7dd0-408b-9425-f0084c3a3aa1:
+    uuid: 128cf659-7dd0-408b-9425-f0084c3a3aa1
+    id: image_scale
+    weight: 1
+    data:
+      width: 3840
+      height: 3840
+      upscale: false

modules/oe_theme_helper/oe_theme_helper.post_update.php

@@ -296,3 +296,33 @@ function oe_theme_helper_post_update_20016() {
     'label' => 'OpenEuropa: Compact teaser',
   ])->save();
 }
+
+/**
+ * Add Full width image style.
+ */
+function oe_theme_helper_post_update_20017() {
+  // If the image style already exists, we bail out.
+  $style = \Drupal::entityTypeManager()->getStorage('image_style')->load('oe_theme_full_width');
+  if ($style) {
+    return 'The image style was previously created.';
+  }
+
+  // Create image style.
+  $image_style = ImageStyle::create([
+    'name' => 'oe_theme_full_width',
+    'label' => 'Full width (3840)',
+  ]);
+
+  // Create scale effect and add it to the image style.
+  $effect = [
+    'id' => 'image_scale',
+    'weight' => 1,
+    'data' => [
+      'upscale' => FALSE,
+      'width' => '3840',
+      'height' => '3840',
+    ],
+  ];
+  $image_style->addImageEffect($effect);
+  $image_style->save();
+}

modules/oe_theme_paragraphs_banner/config/install/core.entity_form_display.paragraph.oe_banner.oe_banner_text_highlight.yml

@@ -0,0 +1,83 @@
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_form_mode.paragraph.oe_banner_text_highlight
+    - field.field.paragraph.oe_banner.field_oe_banner_alignment
+    - field.field.paragraph.oe_banner.field_oe_banner_full_width
+    - field.field.paragraph.oe_banner.field_oe_banner_size
+    - field.field.paragraph.oe_banner.field_oe_banner_type
+    - field.field.paragraph.oe_banner.field_oe_link
+    - field.field.paragraph.oe_banner.field_oe_media
+    - field.field.paragraph.oe_banner.field_oe_text
+    - field.field.paragraph.oe_banner.field_oe_title
+    - paragraphs.paragraphs_type.oe_banner
+  module:
+    - link
+id: paragraph.oe_banner.oe_banner_text_highlight
+targetEntityType: paragraph
+bundle: oe_banner
+mode: oe_banner_text_highlight
+content:
+  field_oe_banner_alignment:
+    type: options_select
+    weight: 3
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_oe_banner_full_width:
+    type: boolean_checkbox
+    weight: 0
+    region: content
+    settings:
+      display_label: true
+    third_party_settings: {  }
+  field_oe_banner_size:
+    type: options_select
+    weight: 2
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  field_oe_link:
+    type: link_default
+    weight: 5
+    region: content
+    settings:
+      placeholder_url: ''
+      placeholder_title: ''
+    third_party_settings: {  }
+  field_oe_media:
+    type: entity_reference_autocomplete
+    weight: 6
+    region: content
+    settings:
+      match_operator: CONTAINS
+      match_limit: 10
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+  field_oe_text:
+    type: string_textfield
+    weight: 4
+    region: content
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+  field_oe_title:
+    type: string_textfield
+    weight: 1
+    region: content
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+  translation:
+    weight: 7
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+hidden:
+  created: true
+  field_oe_banner_type: true
+  status: true

modules/oe_theme_paragraphs_banner/config/install/core.entity_form_mode.paragraph.oe_banner_text_highlight.yml

@@ -0,0 +1,9 @@
+langcode: en
+status: true
+dependencies:
+  module:
+    - paragraphs
+id: paragraph.oe_banner_text_highlight
+label: 'Text highlight banner'
+targetEntityType: paragraph
+cache: true

modules/oe_theme_paragraphs_banner/oe_theme_paragraphs_banner.info.yml

@@ -0,0 +1,7 @@
+name: OpenEuropa Theme Paragraphs Banner
+type: module
+description: Companion module for the OE Paragraphs Banner module
+package: OpenEuropa
+core_version_requirement: ^9.4 || ^10
+dependencies:
+  - oe_paragraphs:oe_paragraphs_banner

modules/oe_theme_paragraphs_banner/oe_theme_paragraphs_banner.install

@@ -0,0 +1,35 @@
+<?php
+
+/**
+ * @file
+ * Install hooks for OpenEuropa Theme Paragraphs Banner module.
+ */
+
+declare(strict_types = 1);
+
+use Drupal\Core\Entity\Entity\EntityFormMode;
+
+/**
+ * Implements hook_install().
+ *
+ * Updates the form mode labels provided by OE Paragraphs Banner.
+ */
+function oe_theme_paragraphs_banner_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 banner',
+    'paragraph.oe_banner_image' => 'Text box banner',
+    'paragraph.oe_banner_image_shade' => 'Image overlay banner',
+  ];
+  foreach ($form_modes_labels as $id => $label) {
+    $form_mode = EntityFormMode::load($id);
+    $form_mode->set('label', $label);
+    $form_mode->save();
+  }
+  $text_highlight = EntityFormMode::load('paragraph.oe_banner_text_highlight');
+  $text_highlight->set('enabled', TRUE);
+  $text_highlight->save();
+}

oe_theme.theme

@@ -1516,6 +1516,7 @@ function oe_theme_preprocess_paragraph__oe_timeline(array &$variables): void {
  * Implements hook_preprocess_paragraph() for oe_banner paragraph.
  */
 function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
+  $variables['pattern'] = 'banner';
   /** @var \Drupal\paragraphs\Entity\Paragraph $paragraph */
   $paragraph = $variables['paragraph'];
 
@@ -1535,24 +1536,29 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
 
   $variables['full_width'] = (bool) $paragraph->get('field_oe_banner_full_width')->value;
 
-  // The alignment field value contains the information regarding the pattern
-  // type and centering.
-  $alignment = $paragraph->get('field_oe_banner_type')->value;
-  [$banner_type, $banner_alignment] = explode('_', $alignment);
-  // The beginning of the string determines the pattern.
-  $variables['pattern'] = 'banner_' . $banner_type;
-  // The end of the string determines the position.
-  $variables['alignment'] = $banner_alignment;
+  // Extract the first character of the size field value.
+  if ($paragraph->hasField('field_oe_banner_size') && !$paragraph->get('field_oe_banner_size')->isEmpty()) {
+    $variables['size'] = substr($paragraph->get('field_oe_banner_size')->value, 0, 1);
+  }
+  // Get the alignment value.
+  if ($paragraph->hasField('field_oe_banner_alignment') && !$paragraph->get('field_oe_banner_alignment')->isEmpty()) {
+    $variables['centered'] = $paragraph->get('field_oe_banner_alignment')->value === 'centered';
+  }
 
+  // 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',
+  ];
   $variant = $paragraph->get('oe_paragraphs_variant')->first()->value;
   if ($variant) {
-    $variables['variant'] = str_replace('oe_banner_', '', $variant);
-  }
-  else {
-    $variables['variant'] = 'default';
+    $variant = str_replace('oe_banner_', '', $variant);
+    $variables['variant'] = $deprecated_paragraph_variants_mapping[$variant] ?? $variant;
   }
 
-  if ($variables['variant'] === 'default' || $variables['variant'] === 'primary') {
+  if ($variables['variant'] === 'plain_background') {
     return;
   }
 
@@ -1608,9 +1614,10 @@ function oe_theme_preprocess_paragraph__oe_banner(array &$variables): void {
     $cacheability->applyTo($variables);
     return;
   }
+  $style = \Drupal::entityTypeManager()->getStorage('image_style')->load('oe_theme_full_width');
 
   $values = [
-    'src' => \Drupal::service('file_url_generator')->generateAbsoluteString($uri),
+    'src' => $style->buildUrl($uri),
     'alt' => $source->getMetadata($media, 'thumbnail_alt_value') ?? $media->label(),
     'name' => $media->getName(),
   ];
@@ -2092,6 +2099,9 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
       $cacheability->applyTo($variables);
       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()) {
@@ -2105,14 +2115,17 @@ function oe_theme_preprocess_paragraph__oe_carousel(array &$variables): void {
       'description' => !$sub_paragraph->get('field_oe_text')->isEmpty() ? $sub_paragraph->get('field_oe_text')->value : '',
       'url' => $link ?? '',
       'url_text' => $link_text ?? '',
-      'image' => \Drupal::service('file_url_generator')->generateAbsoluteString($uri),
+      'image' => $image_url,
       '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',
     ];
     $cacheability->applyTo($variables);
   }
+  if ($paragraph->hasField('field_oe_carousel_size') && !$paragraph->get('field_oe_carousel_size')->isEmpty()) {
+    $variables['size'] = substr($paragraph->get('field_oe_carousel_size')->value, 0, 1);
+  }
 }
 
 /**

runner.yml.dist

@@ -34,6 +34,7 @@ drupal:
     - "./vendor/bin/drush en oe_theme_content_person -y"
     - "./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 field_ui -y"
     - "./vendor/bin/drush en config_devel -y"
     - "./vendor/bin/drush en toolbar -y"

templates/paragraphs/paragraph--oe-banner.html.twig

@@ -13,7 +13,8 @@
     'url': url,
     'label': label,
     'image': image,
-    'alignment': alignment,
+    'centered': centered,
+    'size': size,
     'full_width': full_width,
     'external_link': external_link|default(false),
     'credit': credit|default('')

templates/paragraphs/paragraph--oe-carousel.html.twig

@@ -7,5 +7,6 @@
  */
 #}
 {{ pattern('carousel', {
-  'items': items
+  'items': items,
+  'size': size
 }) }}

templates/patterns/banners/banner.ui_patterns.yml

@@ -0,0 +1,71 @@
+banner:
+  label: "Banner"
+  description: "The Banner consists of a title, description, and CTA with an optional image."
+  variants:
+    plain_background:
+      label: "Plain background"
+      description: "Plain background contains title, description and CTA with blue background."
+    text_box:
+      label: "Text box"
+      description: "Wraps the title, description and CTA inside a white text box with a background image."
+    text_highlight:
+      label: "Text highlight"
+      description: "Highlights the title and description with the CTA below them with a background image."
+    image_overlay:
+      label: "Image overlay"
+      description: "Image overlay contains title, description and CTA with an overlay effect on the background image."
+  fields:
+    title:
+      type: "text"
+      label: "Title"
+      description: "Title of the banner."
+      preview: "Headline sed elit lorem. Donec dictum."
+    description:
+      type: "text"
+      label: "Description"
+      description: "Description of the banner."
+      preview: "Pellentesque tempor tincidunt quam, finibus vulputate eros iaculis pharetra orci arcu, dictum maximus arcu pellentesque eget. Cras massa nunc."
+    url:
+      type: "Url"
+      label: "URL"
+      description: "Banner link url."
+      preview: "http://example.com"
+    label:
+      type: "text"
+      label: "Link text"
+      description: "Banner link text."
+      preview: "Subscribe"
+    image:
+      type: "array"
+      label: "Image"
+      description: "The image of the banner is required for the variants which include an image."
+      preview:
+        src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+    size:
+      type: "text"
+      label: "Size"
+      description: "Size of the banner (can be 's', 'm', 'l'). Defaults to 'm'."
+      preview: "l"
+    centered:
+      type: "boolean"
+      label: "Centered"
+      description: "Define if the banner should be centered."
+      preview: false
+      escape: false
+    full_width:
+      type: "boolean"
+      label: "Full width"
+      description: "Extends the banner to whole viewport when used inside the grid."
+      preview: true
+      escape: false
+    external_link:
+      type: "boolean"
+      label: "External link"
+      description: "Whether the banner link is external or not."
+      preview: true
+      escape: false
+    credit:
+      type: "text"
+      label: "Credit"
+      description: "Credit for the image (only displayed for image variants)."
+      preview: "© Copyright or credit"

templates/patterns/banners/banner_hero.ui_patterns.yml

@@ -1,6 +1,6 @@
 banner_hero:
-  label: "Hero banner"
-  description: "Hero banner displays a prominent message and related action. It can have an image as background."
+  label: "Hero banner (Deprecated in 3.4.0)"
+  description: "Hero banner displays a prominent message and related action. It can have an image as background. The pattern will be deprecated in 3.4.0. Use the Banner pattern instead."
   variants:
     default:
       label: "Default"

templates/patterns/banners/banner_page.ui_patterns.yml

@@ -1,6 +1,6 @@
 banner_page:
-  label: "Page banner"
-  description: "A page banner is smaller than a Hero banner."
+  label: "Page banner (Deprecated in 3.4.0)"
+  description: "A page banner is smaller than a Hero banner. The pattern will be deprecated in 3.4.0. Use the Banner pattern instead."
   variants:
     default:
       label: "Default"