@ecl/site-header 5.0.0-alpha.6 → 5.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +23 -1
  2. package/{_site-header-language-switcher.scss → _site-header-dropdown.scss} +30 -15
  3. package/package.json +13 -13
  4. package/site-header-ec.scss +62 -42
  5. package/site-header-eu.scss +49 -4
  6. package/site-header-print.scss +2 -2
  7. package/site-header.html.twig +230 -134
  8. package/site-header.js +320 -169
package/site-header.html.twig CHANGED
@@ -8,6 +8,7 @@
8
8
  - "menu" (associative array): Menu content, if any. Uses ECL Menu structure
9
9
  - "mega_menu" (associative array): Menu content, if any. Uses ECL Mega Menu structure
10
10
  - "site_name" (string) Site name
11
+ - "site_name_mobile_only" (boolean): Whether the site name should be hidden on desktop or not
11
12
  - "cta_link": (optional) (default: {}): Call to action link compatible with ECL Link component structure
12
13
  - "logo" (associative array) (default: predefined structure): Logo image settings. format:
13
14
  {
@@ -49,6 +50,22 @@
49
50
  ],
50
51
  },
51
52
  },
53
+ - "custom_action" (associative array) (default: {}): optional custom link with optional popover, e.g.:
54
+ {
55
+ "link": (object) (default: predefined structure) predefined structure for the Link component
56
+ "icon" (associative array) OR (array) of associative arrays : format
57
+ {
58
+ name: (string) (default: ''),
59
+ extra_classes: (string) (default: 'ecl-link__icon'),
60
+ ...
61
+ }
62
+ "overlay": (object) – if defined, we display a popover; otherwise it’s a simple link
63
+ {
64
+ "title": (string) (default: '')
65
+ "close_label": (string) (default: '')
66
+ "content": (string)
67
+ }
68
+ }
52
69
  - "search_toggle" (associate array) (default: {}) format:
53
70
  {
54
71
  "label": (string) Label of the element
@@ -68,7 +85,7 @@
68
85
  "label_logged": (string) Label for the logged in users
69
86
  "href_logged": (string) Link to the logout form
70
87
  }
71
- - "search_form" (associative array) (default: predefined structure): EC Search Form component structure
88
+ - "search_form" (associative array) (default: predefined structure): ECL Search Form component structure
72
89
  - "notification" (object) (default: {}): Optional notification compatible with ECL Notification component structure
73
90
  - "extra_classes" (string) (default: '')
74
91
  - "extra_attributes" (array) (default: data-ecl-auto-init="SiteHeaderStandardised"): format: [
@@ -83,6 +100,7 @@
83
100
 
84
101
  {% set _logo = logo|default({}) %}
85
102
  {% set _language_selector = language_selector|default({}) %}
103
+ {% set _custom_action = custom_action|default({}) %}
86
104
  {% set _logged = logged|default(false) %}
87
105
  {% set _login_box = login_box|default({}) %}
88
106
  {% set _login_toggle = login_toggle|default({}) %}
@@ -91,6 +109,7 @@
91
109
  {% set _menu = menu|default(false) %}
92
110
  {% set _mega_menu = mega_menu|default(false) %}
93
111
  {% set _site_name = site_name|default('') %}
112
+ {% set _site_name_mobile_only = site_name_mobile_only|default(false) %}
94
113
  {% set _cta_link = cta_link|default({}) %}
95
114
  {% set _notification = notification|default({}) %}
96
115
  {% set _extra_attributes = '' %}
@@ -214,155 +233,226 @@
214
233
  {{ _extra_attributes|raw }}
215
234
  >
216
235
  <div class="ecl-site-header__inner">
217
- <div class="ecl-site-header__background">
218
- <div class="ecl-site-header__header">
219
- <div class="ecl-site-header__container ecl-container">
220
- <div class="ecl-site-header__top" data-ecl-site-header-top>
221
- {# Logo #}
222
- {% if _logo is not empty and _logo.src_desktop is not empty %}
223
- {% set _label %}
224
- {% set _picture = { sources: [{ src: _logo.src_desktop, media: _logo.breakpoint|default('s') }] } %}
225
- {% if _logo.src_mobile is defined and _logo.src_mobile is not empty %}
226
- {% set _picture = _picture|merge({
227
- img: {
228
- src: _logo.src_mobile,
229
- alt: _logo.alt,
230
- },
231
- }) %}
232
- {% else %}
233
- {% set _picture = _picture|merge({
234
- img: {
235
- src: _logo.src_desktop,
236
- alt: _logo.alt,
237
- },
238
- }) %}
239
- {% endif %}
240
- {% set image_classes = 'ecl-site-header__logo-image' %}
241
- {% set image_classes = image_classes ~ ' ecl-site-header__logo-image--' ~ _logo.size|default('l') %}
242
- {% include '@ecl/picture/picture.html.twig' with {
243
- picture: _picture,
244
- extra_classes: "ecl-site-header__picture",
245
- extra_image_classes: image_classes,
246
- extra_attributes: _logo.title is not empty ? [{ name: 'title', value: _logo.title }] : [],
247
- } only %}
248
- {% endset %}
249
- {% include '@ecl/link/link.html.twig' with {
250
- link: {
251
- path: _logo.path,
252
- label: _label,
253
- type: 'standalone'
254
- },
255
- extra_classes: 'ecl-site-header__logo-link'
236
+ <div class="ecl-site-header__header">
237
+ <div class="ecl-site-header__container ecl-container">
238
+ <div class="ecl-site-header__top" data-ecl-site-header-top>
239
+ {# Logo #}
240
+ {% if _logo is not empty and _logo.src_desktop is not empty %}
241
+ {% set _label %}
242
+ {% set _picture = { sources: [{ src: _logo.src_desktop, media: _logo.breakpoint|default('s') }] } %}
243
+ {% if _logo.src_mobile is defined and _logo.src_mobile is not empty %}
244
+ {% set _picture = _picture|merge({
245
+ img: {
246
+ src: _logo.src_mobile,
247
+ alt: _logo.alt,
248
+ },
249
+ }) %}
250
+ {% else %}
251
+ {% set _picture = _picture|merge({
252
+ img: {
253
+ src: _logo.src_desktop,
254
+ alt: _logo.alt,
255
+ },
256
+ }) %}
257
+ {% endif %}
258
+ {% set image_classes = 'ecl-site-header__logo-image' %}
259
+ {% set image_classes = image_classes ~ ' ecl-site-header__logo-image--' ~ _logo.size|default('l') %}
260
+ {% include '@ecl/picture/picture.html.twig' with {
261
+ picture: _picture,
262
+ extra_classes: "ecl-site-header__picture",
263
+ extra_image_classes: image_classes,
264
+ extra_attributes: _logo.title is not empty ? [{ name: 'title', value: _logo.title }] : [],
256
265
  } only %}
257
- {% endif %}
266
+ {% endset %}
267
+ {% include '@ecl/link/link.html.twig' with {
268
+ link: {
269
+ path: _logo.path,
270
+ label: _label,
271
+ type: 'standalone'
272
+ },
273
+ extra_classes: 'ecl-site-header__logo-link'
274
+ } only %}
275
+ {% endif %}
258
276
 
259
- {# Header actions #}
260
- <div class="ecl-site-header__action">
261
-
262
- {# Login #}
263
- {% if _login_toggle is not empty and _login_box is not empty %}
264
- <div class="ecl-site-header__login-container">
265
- {% if _logged %}
266
- <a
267
- class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
268
- href="{{ _login_toggle.href_logged }}"
269
- aria-controls="{{ _login_box.id }}"
270
- data-ecl-login-toggle
271
- aria-expanded="false"
272
- >
273
- {% include '@ecl/icon/icon.html.twig' with {
274
- icon: {
275
- path: _icon_path,
276
- name: 'logged-in',
277
- size: 's'
278
- },
279
- as_image: true,
280
- extra_classes: 'ecl-site-header__icon',
281
- extra_accessibility: {
282
- title: login_toggle.label_logged,
283
- },
284
- } only %}
285
- {{- login_toggle.label_logged -}}
286
- </a>
287
- <div
288
- id="{{ _login_box.id }}"
289
- class="ecl-site-header__login-box"
290
- data-ecl-login-box
291
- >
292
- <p class="ecl-site-header__login-description">
293
- {{- _login_box.description -}}
294
- </p>
295
- <hr class="ecl-site-header__login-separator">
296
- {% include '@ecl/link/link.html.twig' with {
297
- link: {
298
- label: _login_box.label,
299
- path: _login_box.href,
300
- type: 'standalone',
301
- }
302
- } only %}
303
- </div>
277
+ {# Header actions #}
278
+ <div class="ecl-site-header__action">
279
+
280
+ {# Custom action #}
281
+ {% if _custom_action is not empty %}
282
+ <div class="ecl-site-header__custom-action" aria-live="polite">
283
+ {% set is_overlay = _custom_action.overlay is defined and _custom_action.overlay is not empty %}
284
+ {% set has_icon = _custom_action.icon is defined and _custom_action.icon is not empty %}
285
+
286
+ {% set link_extra_attributes = _custom_action.link.extra_attributes|default([]) %}
287
+ {% set link_extra_attributes = link_extra_attributes|merge([
288
+ { name: 'role', value: 'button' },
289
+ { name: 'data-ecl-custom-action', value: '' }
290
+ ]) %}
291
+ {% if is_overlay %}
292
+ {% set link_extra_attributes = link_extra_attributes|merge([
293
+ { name: 'aria-controls', value: 'custom-action-overlay' },
294
+ { name: 'aria-expanded', value: 'false' }
295
+ ]) %}
296
+ {% endif %}
297
+
298
+ {% if has_icon %}
299
+ {% set icon_extra_classes = _custom_action.icon.extra_classes|default('') %}
300
+ {% set icon_extra_classes = icon_extra_classes ~ ' ecl-site-header__icon' %}
301
+ {% set icon = _custom_action.icon|merge({
302
+ path: _icon_path,
303
+ extra_classes: icon_extra_classes
304
+ }) %}
304
305
  {% else %}
305
- <a
306
- class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
307
- href="{{ _login_toggle.href_not_logged }}"
308
- data-ecl-login-toggle
309
- >
310
- {% include '@ecl/icon/icon.html.twig' with {
311
- icon: {
312
- path: _icon_path,
313
- name: 'log-in',
314
- size: 's'
315
- },
316
- as_image: true,
317
- extra_classes: 'ecl-site-header__icon',
318
- extra_accessibility: {
319
- title: login_toggle.label_not_logged,
320
- },
321
- } only %}
322
- {{- login_toggle.label_not_logged -}}
323
- </a>
306
+ {% set icon = null %}
324
307
  {% endif %}
325
- </div>
326
- {% endif %}
327
308
 
328
- {# Language selector #}
329
- {% if _language_selector is not empty %}
330
- {% include '@ecl/site-header/site-header-language-switcher.html.twig' with {
331
- language_selector: _language_selector,
332
- icon_path: _icon_path,
333
- } only %}
334
- {% endif %}
309
+ {% set custom_action_link = {
310
+ link: _custom_action.link|merge({ type: "standalone" }),
311
+ icon: icon,
312
+ extra_attributes: link_extra_attributes,
313
+ extra_classes: (
314
+ _custom_action.link.extra_classes is defined and _custom_action.link.extra_classes is not empty
315
+ ? _custom_action.link.extra_classes ~ ' ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary'
316
+ : 'ecl-site-header__custom-action-toggle ecl-button ecl-button--tertiary'
317
+ )
318
+ } %}
319
+ {% include '@ecl/link/link.html.twig' with custom_action_link only %}
335
320
 
336
- {# Search form #}
337
- {% if _search_form is defined %}
338
- <div class="ecl-site-header__search-container" role="search">
339
- {% if _search_toggle is not empty %}
340
- <a
341
- class="ecl-button ecl-button--tertiary ecl-site-header__search-toggle"
342
- href="{{ _search_toggle.href }}"
343
- data-ecl-search-toggle="true"
344
- aria-controls="search-form-id"
345
- aria-expanded="false"
321
+ {% if _custom_action.overlay is defined and _custom_action.overlay is not empty %}
322
+ <div
323
+ class="ecl-site-header__custom-action-overlay"
324
+ id="custom-action-overlay"
325
+ hidden
326
+ data-ecl-custom-action-overlay
327
+ role="dialog"
328
+ aria-labelledby="custom-action-overlay-title"
346
329
  >
347
- {%- include '@ecl/icon/icon.html.twig' with {
330
+ <div class="ecl-site-header__custom-action-header">
331
+ <div class="ecl-site-header__custom-action-title" id="custom-action-overlay-title">
332
+ {{ _custom_action.overlay.title|default('') }}
333
+ </div>
334
+
335
+ {% if _custom_action.overlay.close is defined and _custom_action.overlay.close is not empty %}
336
+ {% include '@ecl/button/button.html.twig' with _custom_action.overlay.close|merge({
337
+ variant: 'tertiary',
338
+ extra_classes: 'ecl-site-header__custom-action-close',
339
+ extra_attributes: [{
340
+ name: 'data-ecl-custom-action-close',
341
+ }],
342
+ }) %}
343
+ {% endif %}
344
+ </div>
345
+ <div class="ecl-site-header__custom-action-content">
346
+ {{ _custom_action.overlay.content|default('')|raw }}
347
+ </div>
348
+ </div>
349
+ {% endif %}
350
+ </div>
351
+ {% endif %}
352
+
353
+ {# Login #}
354
+ {% if _login_toggle is not empty and _login_box is not empty %}
355
+ <div class="ecl-site-header__login-container">
356
+ {% if _logged %}
357
+ <a
358
+ class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
359
+ href="{{ _login_toggle.href_logged }}"
360
+ aria-controls="{{ _login_box.id }}"
361
+ data-ecl-login-toggle
362
+ aria-expanded="false"
363
+ >
364
+ {% include '@ecl/icon/icon.html.twig' with {
348
365
  icon: {
349
- name: 'search',
350
366
  path: _icon_path,
351
- size: 's',
367
+ name: 'logged-in',
368
+ size: 's'
352
369
  },
353
370
  as_image: true,
354
371
  extra_classes: 'ecl-site-header__icon',
355
372
  extra_accessibility: {
356
- title: _search_toggle.label,
373
+ title: login_toggle.label_logged,
357
374
  },
358
- } only -%}
359
- {{- _search_toggle.label -}}
360
- </a>
361
- {% endif %}
362
- {% include '@ecl/search-form/search-form.html.twig' with _search_form only %}
375
+ } only %}
376
+ {{- login_toggle.label_logged -}}
377
+ </a>
378
+ <div
379
+ id="{{ _login_box.id }}"
380
+ class="ecl-site-header__login-box"
381
+ data-ecl-login-box
382
+ >
383
+ <p class="ecl-site-header__login-description">
384
+ {{- _login_box.description -}}
385
+ </p>
386
+ <hr class="ecl-site-header__login-separator">
387
+ {% include '@ecl/link/link.html.twig' with {
388
+ link: {
389
+ label: _login_box.label,
390
+ path: _login_box.href,
391
+ type: 'standalone',
392
+ }
393
+ } only %}
363
394
  </div>
395
+ {% else %}
396
+ <a
397
+ class="ecl-button ecl-button--tertiary ecl-site-header__login-toggle"
398
+ href="{{ _login_toggle.href_not_logged }}"
399
+ data-ecl-login-toggle
400
+ >
401
+ {% include '@ecl/icon/icon.html.twig' with {
402
+ icon: {
403
+ path: _icon_path,
404
+ name: 'log-in',
405
+ size: 's'
406
+ },
407
+ as_image: true,
408
+ extra_classes: 'ecl-site-header__icon',
409
+ extra_accessibility: {
410
+ title: login_toggle.label_not_logged,
411
+ },
412
+ } only %}
413
+ {{- login_toggle.label_not_logged -}}
414
+ </a>
364
415
  {% endif %}
365
416
  </div>
417
+ {% endif %}
418
+
419
+ {# Language selector #}
420
+ {% if _language_selector is not empty %}
421
+ {% include '@ecl/site-header/site-header-language-switcher.html.twig' with {
422
+ language_selector: _language_selector,
423
+ icon_path: _icon_path,
424
+ } only %}
425
+ {% endif %}
426
+
427
+ {# Search form #}
428
+ {% if _search_form is defined %}
429
+ <div class="ecl-site-header__search-container" role="search">
430
+ {% if _search_toggle is not empty %}
431
+ <a
432
+ class="ecl-button ecl-button--tertiary ecl-site-header__search-toggle"
433
+ href="{{ _search_toggle.href }}"
434
+ data-ecl-search-toggle="true"
435
+ aria-controls="search-form-id"
436
+ aria-expanded="false"
437
+ >
438
+ {%- include '@ecl/icon/icon.html.twig' with {
439
+ icon: {
440
+ name: 'search',
441
+ path: _icon_path,
442
+ size: 's',
443
+ },
444
+ as_image: true,
445
+ extra_classes: 'ecl-site-header__icon',
446
+ extra_accessibility: {
447
+ title: _search_toggle.label,
448
+ },
449
+ } only -%}
450
+ {{- _search_toggle.label -}}
451
+ </a>
452
+ {% endif %}
453
+ {% include '@ecl/search-form/search-form.html.twig' with _search_form only %}
454
+ </div>
455
+ {% endif %}
366
456
  </div>
367
457
  </div>
368
458
  </div>
@@ -402,7 +492,13 @@
402
492
  <div class="ecl-site-header__banner">
403
493
  <div class="ecl-container">
404
494
  {% if _site_name is not empty %}
405
- <div class="ecl-site-header__site-name">{{ _site_name }}</div>
495
+ {% set _site_name_class = 'ecl-site-header__site-name' %}
496
+ {% if _site_name_mobile_only %}
497
+ {% set _site_name_class = _site_name_class ~ ' ecl-site-header__site-name--mobile-only' %}
498
+ {% endif %}
499
+ <div class="{{ _site_name_class }}">
500
+ {{- _site_name -}}
501
+ </div>
406
502
  {% endif %}
407
503
  {% if _cta_link is not empty and _cta_link.link is not empty %}
408
504
  {% include '@ecl/link/link.html.twig' with _cta_link|merge({