@openeuropa/bcl-theme-default 0.22.0 → 0.25.0

package/templates/bcl-card/card.html.twig

@@ -1,12 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - title (object) (default: {})
-    format: {
-      content: '',
-      tag: '',
-      classes: ''
-    }
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h1')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - subtitle (object) (default: {})
     format: {
       content: '',
@@ -30,9 +28,10 @@
   - horizontal (boolean) (default: false)
   - horizontal_grid (object) (default: {})
     format: {
-      left_col_classes (default: 'col-4')
-      right_col_classes (default: 'col-8')
+      left_col_classes (default: 'bcl-card-start-col')
+      right_col_classes (default: 'col')
       gutter (default: '')
+      gutter (default: '') - options: ['small', 'large']
     }
   - variant (string) (default: '')
   - border_variant (string) (default: '')
@@ -44,6 +43,8 @@
   - extra_classes_header (string) (default: '')
   - extra_classes_footer (string) (default: '')
   - badges (array of badge object) (default: [])
+  - links (array of link object) (default: [])
+  - attributes (drupal attrs)
 
   Blocks
     - card_date
@@ -51,7 +52,10 @@
     - card_links
 #}
 
-{% set _title = title|default({}) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h1') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _subtitle = subtitle|default({}) %}
 {% set _text = text|default({}) %}
 {% set _content = content|default('') %}
@@ -60,8 +64,9 @@
 {% set _variant = variant|default('') %}
 {% set _horizontal = horizontal|default(false) %}
 {% set _horizontal_grid = horizontal_grid|default({
-  left_col_classes: 'col-4',
-  right_col_classes: 'col-8'
+  left_col_classes: 'bcl-card-start-col',
+  right_col_classes: 'col',
+  left_col_size: '',
 }) %}
 {% set _border_variant = border_variant|default('') %}
 {% set _text_color = text_color|default('') %}
@@ -72,19 +77,13 @@
 {% set _extra_classes_footer = extra_classes_footer|default('') %}
 {% set _badges = badges|default([]) %}
 {% set _links = links|default([]) %}
+
 {% set _classes = ['card'] %}
 {% if _text_color is not empty %}
   {% set _classes = _classes|merge(['text-' ~ _text_color]) %}
 {% endif %}
 {% if _variant is not empty %}
   {% set _classes = _classes|merge(['bg-' ~ _variant]) %}
-  {% if _text_color is empty %}
-    {% if _variant == 'warning' or _variant == 'info' or _variant == 'light' %}
-      {% set _classes = _classes|merge(['text-dark']) %}
-    {% else %}
-      {% set _classes = _classes|merge(['text-white']) %}
-    {% endif %}
-  {% endif %}
 {% endif %}
 {% if _border_variant is not empty %}
   {% set _classes = _classes|merge(['border-' ~ _border_variant]) %}
@@ -116,7 +115,7 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
-<div
+<article
   {{ attributes }}
 >
 {% if _card_header is not empty %}
@@ -171,16 +170,18 @@
 <div class='{{ _horizontal_grid.right_col_classes }}'>
 {% endif %}
   <div class='{{ _body_classes }}'>
-  {%- if _title is not empty -%}
-    {% set _title_tag = _title.tag ?? 'h5' %}
-    <{{ _title_tag }}
-      {% set _title_attributes = title.attributes ?: create_attribute() %}
-      {% set _title_attributes = _title_attributes.addClass("card-title") %}
-      {{ _title_attributes }}
-    >
-      {{- title.content -}}
-    </{{ _title_tag }}>
-  {%- endif -%}
+  {% if _title is not empty %}
+    {% if _title_attributes.class is empty %}
+      {% set _title_attributes = _title_attributes.addClass('fs-4') %}
+    {% endif %}
+    {% set _title_attributes = _title_attributes.addClass('card-title') %}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      title_link: _title_link,
+      attributes: _title_attributes,
+    } only %}
+  {% endif %}
   {%- if _subtitle is not empty -%}
     {% set _subtitle_tag = _subtitle.tag ?? 'h6' %}
     <{{ _subtitle_tag }}
@@ -229,7 +230,7 @@
     {%- if _links is not empty and _links is iterable -%}
       <div class="mt-2-5 mb-2">
       {% for _link in _links %}
-        <div class="mb-3 mb-md-0 d-block d-md-inline-block me-4-5">
+        <div class="mb-3 mb-md-0 d-block d-md-inline-block me-md-4-5">
           {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
         </div>
       {% endfor %}
@@ -270,6 +271,6 @@
     {{- _card_footer -}}
   </div>
 {% endif %}
-</div>
+</article>
 
 {% endspaceless %}

package/templates/bcl-card-layout/card-layout.html.twig

@@ -3,7 +3,7 @@
 {# Parameters:
   - type (string) (default: 'group')
     options: ['group', 'grid', 'masonry']
-  - items (array of Card) (default: [])
+  - items (array of object type card) (default: [])
   - grid_columns (int) (default: 1)
     options: ['1', '2', '3']
   - responsiveness (string) (default: '')
@@ -14,6 +14,7 @@
     options: ['0', '1', '2', '3', '4', '5']
   - equal_height (boolean) (default: false)
   - cols_extra_classes (string) (default: '')
+  - attributes (drupal attrs)
 
   Blocks
     - card_layout_card
@@ -27,6 +28,7 @@
 {% set _gutter = gutter|default('') %}
 {% set _equal_height = equal_height|default(false) %}
 {% set _cols_extra_classes = cols_extra_classes|default('') %}
+
 {% set _cols_classes = 'col' %}
 
 {% if _cols_extra_classes is not empty %}

package/templates/bcl-carousel/carousel.html.twig

@@ -1,7 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - id (string) (default: '')
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
   - autoplay (boolean) (default: true)
   - autoinit (boolean) (default: true)
   - dark (boolean) (default: false)
@@ -14,30 +17,36 @@
       caption_title (string) 
       interval (integer) (default: 0)
      }
-     ...
    ],
   - fade (boolean) (default: false)
   - with_controls (boolean) (default: true)
-  - previous_label (string) (default: '')
+  - prev_label (string) (default: '')
   - next_label (string) (default: '')
   - with_indicators (boolean) (default: false)
   - rounded_indicators (boolean) (default: false)
+  - disable_touch (boolean) (default: false)
+  - attributes (drupal attrs)
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _id = id|default('') %}
+{% set _autoinit = autoinit ?? true %}
+{% set _autoplay = autoplay ?? true %}
+{% set _dark = dark|default(false) %}
+{% set _active_item = active_item|default(1) %}
 {% set _items = items|default([]) %}
+{% set _fade = fade|default(false) %}
 {% set _with_controls = with_controls ?? true %}
-{% set _active_item = active_item|default(1) %}
 {% set _prev_label = prev_label|default('') %}
 {% set _next_label = next_label|default('') %}
 {% set _with_indicators = with_indicators|default(false) %}
 {% set _rounded_indicators = rounded_indicators|default(false) %}
-{% set _classes = ['carousel slide'] %}
-{% set _autoinit = autoinit ?? true %}
-{% set _autoplay = autoplay ?? true %}
 {% set _disable_touch = disable_touch|default(false) %}
-{% set _fade = fade|default(false) %}
-{% set _dark = dark|default(false) %}
+
+{% set _classes = ['carousel', 'slide'] %}
 
 {% if _fade %}
   {% set _classes = _classes|merge(['carousel-fade']) %}
@@ -72,6 +81,15 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
+{%- if _title is not empty -%}
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes,
+  } only %}
+{%- endif -%}
+
 <div
   {{ attributes }}
 >

package/templates/bcl-content-banner/content-banner.html.twig

@@ -2,29 +2,41 @@
 
 {#
   Parameters:
-    - "background" (string) (default: 'white')
+    - background: (string) (default: 'white')
       options: [ white, gray ]
-    - "title" (object)
-    - "image" (object)
-    - "image_size" (string) 
-      options: ['sm', 'md', 'lg']
-    - "content" (string)
-    - "badges" (array of objects of type badge)
-    - "links" (array of objects of type link)
-    - "action_button" (object of type button) (default: {})
-    - "service_buttons" (array of objects of type button) (default: [])
-    - "attributes" (drupal attrs)
+    - title: (string) (default: '')
+    - title_tag: (string) (default: 'h5')
+    - title_link: (link object) (default: {})
+    - title_attributes: (drupal attrs)
+    - image (object)
+    - image_size: (string)
+    - date: (object)
+      options: ['sm', 'md', 'lg', 'xl']
+    - content: (string)
+    - badges: (array of objects of type badge)
+    - links: (array of objects of type link)
+    - attributes: (drupal attrs)
+
+  Blocks
+    - "action_bar" (string)
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h1') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _background = background|default('white') %}
-{% set _action_button = action_button|default({}) %}
-{% set _service_buttons = service_buttons|default([]) %}
+{% set _action_bar = action_bar|default('') %}
 {% set _image = image|default({}) %}
+{% set _date = date|default({}) %}
 {% set _image_size = image_size|default('md') %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
 {% set _css_classes = [
   'bcl-content-banner',
-  'pt-lg-4-75',
 ] %}
 
 {% if _background != 'white' %}
@@ -32,10 +44,12 @@
     'pb-md-4-75',
     'pb-4',
     'pt-4',
+    'pt-md-4-75',
   ]) %}
 {% else %}
   {% set _css_classes = _css_classes|merge([
-    'pt-3'
+    'pt-4',
+    'pt-md-4-75',
   ]) %}
 {% endif %}
 
@@ -44,25 +58,28 @@
   'gray': 'bg-lighter',
 } %}
 
-{% if attributes is empty %}
-  {% set attributes = create_attribute() %}
-{% endif %}
-
 {% set _body_classes = 'pt-0 px-0 pb-0' %}
 {% set _left_col_classes = '' %}
 {% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
 
 {% if _image is not empty %}
-  {% set _left_col_classes = 'col-8 col-md-4 col-lg-3 offset-2 offset-md-0' %}
-  {% set _right_col_classes = 'col-md-8 col-lg-9 col-xxl-8' %}
+  {% set _left_col_classes = 'bcl-card-start-col' %}
   {% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-3 pb-0' %}
   {% if _image_size == 'lg' %}
-    {% set _left_col_classes = 'col-md-4' %}
-    {% set _right_col_classes = 'col-md-8' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-large' %}
+    {% set _right_col_classes = 'col-12 col-md-7 col-lg-8 col-xl-9 col-xxl-8' %}
   {% endif %}
   {% if _image_size == 'sm' %}
-    {% set _left_col_classes = 'col-6 col-md-4 col-lg-2 offset-3 offset-md-0' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-small' %}
   {% endif %}
+  {% if _image_size == 'xl' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-extra-large' %}
+    {% set _right_col_classes = 'col-12 col-lg-7 col-xl-8' %}
+  {% endif %}
+{% endif %}
+{% if _date is not empty %}
+  {% set _left_col_classes = 'bcl-card-start-col' %}
+  {% set _right_col_classes = 'col-12 col-md col-xxl-9' %}
 {% endif %}
 
 {% set _horizontal_classes = {
@@ -71,41 +88,33 @@
 } %}
 
 {% set _card = {
-  title: title|default({})|merge({
-    tag: 'h2',
-    attributes: create_attribute().addClass(['fw-bold']),
-  }),
+  title: _title,
+  title_tag: _title_tag,
+  title_link: _title_link,
+  title_attributes: _title_attributes.addClass('fs-1'),
   horizontal: true,
   horizontal_grid: _horizontal_classes,
   extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
   extra_classes_body: _body_classes,
+  attributes: create_attribute().addClass(['bg-transparent', 'border-0']),
 } %}
 
 {% set _css_classes = _css_classes|merge([_modifiers[_background]]) %}
-{% set _attributes = attributes.addClass(['bg-transparent', 'border-0']) %}
+{% set attributes = attributes.addClass(_css_classes) %}
 
 {% if _button is not empty %}
-  {% set _attributes = attributes.addClass(['col-md-10']) %}
+  {% set _card =  _card|merge({
+    attributes: _card.attributes.addClass(['col-md-10']),
+  }) %}
 {% endif %}
 
-<div class="{{ _css_classes|join(' ') }}">
+<div {{ attributes }}>
   <div class="container">
   {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
 
-  {% if _service_buttons is not empty or _action_button is not empty %}
-    <div class="d-flex justify-content-end mt-2 align-items-center">
-    {% if _service_buttons is not empty %}
-      {% for _button in _service_buttons %}
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
-      {% endfor %}
-    {% endif %}
-    {% if _action_button is not empty %}
-      <div class="d-grid d-md-block ms-3">
-        {% include '@oe-bcl/bcl-button/button.html.twig' with _action_button only %}
-      </div>
-    {% endif %}
-    </div>
-  {% endif %}
+  {%- block action_bar -%}
+    {{ _action_bar }}
+  {%- endblock -%}
   </div>
 </div>