Merge pull request #41 from openeuropa/OEL-726

OEL-726: Add header light/standard configuration.

modules/oe_whitelabel_search/src/Plugin/Block/SearchBlock.php

@@ -129,8 +129,7 @@ class SearchBlock extends BlockBase implements ContainerFactoryPluginInterface {
       '#type' => 'textfield',
       '#title' => $this->t('Input placeholder text'),
       '#description' => $this->t('The placeholder that will be shown inside the input field.'),
-      '#default_value' => $this->t('Search'),
-      '#value' => $config['input']['placeholder'],
+      '#default_value' => $config['input']['placeholder'] ?? $this->t('Search'),
     ];
     $form['button'] = [
       '#type' => 'details',

oe_whitelabel.theme

@@ -111,6 +111,16 @@ function oe_whitelabel_form_system_theme_settings_alter(&$form, FormStateInterfa
     '#default_value' => theme_get_setting('component_library'),
     '#description' => t('Choose "European Commission" for websites hosted under the ec.europa.eu domain and "European Union" for websites hosted under the europa.eu domain.'),
   ];
+  $form['header_style'] = [
+    '#type' => 'select',
+    '#title' => t('Background style'),
+    '#options' => [
+      'standard' => t('Blue header'),
+      'light' => t('Light header'),
+    ],
+    '#default_value' => theme_get_setting('header_style'),
+    '#description' => t('Choose the header color'),
+  ];
 }
 
 /**
@@ -118,4 +128,5 @@ function oe_whitelabel_form_system_theme_settings_alter(&$form, FormStateInterfa
  */
 function oe_whitelabel_preprocess(&$variables) {
   $variables['bcl_component_library'] = theme_get_setting('component_library') ?? 'eu';
+  $variables['bcl_header_style'] = theme_get_setting('header_style') ?? 'standard';
 }

templates/overrides/navigation/block--system-branding-block.html.twig

@@ -13,14 +13,42 @@
  * - site_slogan: Slogan for site as defined in Site information settings.
  */
 #}
+{%
+  set logo_classes = [
+    'text-decoration-none',
+    'site-logo',
+  ]
+%}
+{%
+  set name_classes = [
+    'text-decoration-none',
+    'align-bottom',
+    bcl_header_style == 'light' ? 'text-dark': 'text-white',
+  ]
+%}
+{%
+  set img_classes = [
+    'd-none',
+    'd-lg-inline-block',
+  ]
+%}
+
+{% set site_logo_attr = create_attribute() %}
+{% set site_logo_img_attr = create_attribute() %}
+{% set site_name_attr = create_attribute() %}
+
 {% block content %}
   {% if site_logo %}
-    <a class="text-decoration-none site-logo" href="{{ path('<front>') }}" rel="home">
-      <img class="d-none d-lg-inline-block" src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
+    <a {{ site_logo_attr.addClass(logo_classes).setAttribute('rel', 'Home') }} href="{{ path('<front>') }}">
+      <img {{ site_logo_img_attr.addClass(img_classes).setAttribute('alt', 'Home'|t) }} src="{{ site_logo }}" />
     </a>
   {% endif %}
   {% if site_name %}
-    <p class="site-name"><a class="text-white text-decoration-none align-bottom" href="{{ path('<front>') }}" rel="home">{{ site_name }}</a></p>
+    <p class="site-name">
+      <a {{ site_name_attr.addClass(name_classes).setAttribute('rel', 'Home') }} href="{{ path('<front>') }}">
+        {{ site_name }}
+      </a>
+    </p>
   {% endif %}
   {% if site_slogan %}
     <div class="site-slogan">{{ site_slogan }}</div>

templates/patterns/header/pattern-header--variant-ec.html.twig

-<header class="ec__header bcl-header">
-  <nav class="w-100 shadow-sm navbar navbar-expand-lg navbar-light">
-    <div class="container">
-      {{ navbar_branding }}
-      <ul class="nav">
-        {{ navbar_right }}
-      </ul>
-    </div>
-  </nav>
-  <div class="bcl-header__project">
-    <div class="container">
-      {{ header_top }}
-    </div>
-  </div>
-  {% set attributes = {
-    'class':  [
-        'bcl-header__navbar',
-    ]
-  } %}
+{% extends "pattern-header.html.twig" %}
+{#
+/**
+ * @file
+ * Template override for pattern header variant EC.
+ */
+#}
+{% set _header_classes = attributes.addClass('ec__header') %}
+
+{% block content %}
   {{ pattern('navbar', {
     navbar_left: header_left,
     navbar_right: header_right,
@@ -24,7 +15,4 @@
     collapse_id: 'navbarNavDropdown',
     attributes: attributes
   }) }}
-  <div class="container">
-    {{ breadcrumbs }}
-  </div>
-</header>
+{% endblock %}

templates/patterns/header/pattern-header--variant-eu.html.twig

-<header class="bcl-header">
-  <nav class="w-100 shadow-sm navbar navbar-expand-lg navbar-light">
-    <div class="container">
-      {{ navbar_branding }}
-      <ul class="nav">
-        {{ navbar_right }}
-      </ul>
-    </div>
-  </nav>
-  <div class="bcl-header__project">
-    <div class="container">
-      {{ header_top }}
-    </div>
-  </div>
-  {% set attributes = {
-    'class':  [
-      'bcl-header__navbar',
-    ]
-  } %}
+{% extends "pattern-header.html.twig" %}
+{#
+/**
+ * @file
+ * Template override for pattern header variant EU.
+ */
+#}
+{% block content %}
   {{ pattern('navbar', {
     navbar_left: header_left,
     navbar_right: header_right,
@@ -24,7 +13,4 @@
     collapse_id: 'navbarNavDropdown',
     attributes: attributes
   }) }}
-  <div class="container">
-    {{ breadcrumbs }}
-  </div>
-</header>
+{% endblock %}

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

+{%
+  set _header_classes = [
+    'bcl-header',
+  ]
+%}
+{%
+  set _nav_classes = [
+    'w-100',
+    'shadow-sm',
+    'navbar',
+    'navbar-expand-lg',
+    'navbar-light',
+  ]
+%}
+<header {{ attributes.addClass(_header_classes) }}>
+  <nav {{ attributes.addClass(_nav_classes) }}>
+    <div class="container">
+      {{ navbar_branding }}
+      <ul class="nav">
+        {{ navbar_right }}
+      </ul>
+    </div>
+  </nav>
+  {%
+    set _project_classes = [
+      'bcl-header__project',
+      bcl_header_style == 'light' ? bcl_header_style,
+    ]
+  %}
+  <div {{attributes.addClass(_project_classes)}}>
+    <div class="container">
+      {{ header_top }}
+    </div>
+  </div>
+  {% set attributes = {
+    'class':  [
+        'bcl-header__navbar',
+    ]
+  } %}
+  {% block content %}
+    {{ content}}
+  {% endblock %}
+  <div class="container">
+    {{ breadcrumbs }}
+  </div>
+</header>