@openeuropa/bcl-theme-default 0.11.0 → 0.15.0

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

@@ -25,8 +25,8 @@
       path (string),
       alt (string),
       position (string)
-      rounded (integer)
     }
+  - date (object) (default: {})
   - horizontal (boolean) (default: false)
   - horizontal_grid (object) (default: {})
     format: {
@@ -51,6 +51,7 @@
 {% set _text = text|default({}) %}
 {% set _content = content|default('') %}
 {% set _image = image|default({}) %}
+{% set _date = date|default({}) %}
 {% set _variant = variant|default('') %}
 {% set _horizontal = horizontal|default(false) %}
 {% set _horizontal_grid = horizontal_grid|default({
@@ -65,7 +66,6 @@
 {% set _extra_classes_header = extra_classes_header|default('') %}
 {% set _extra_classes_footer = extra_classes_footer|default('') %}
 {% set _badges = badges|default([]) %}
-{% set _body_classes = body_classes ? body_classes ~ ' card-body' : 'card-body' %}
 {% set _classes = ['card'] %}
 {% if _text_color is not empty %}
   {% set _classes = _classes|merge(['text-' ~ _text_color]) %}
@@ -84,6 +84,11 @@
   {% set _classes = _classes|merge(['border-' ~ _border_variant]) %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _body_classes = 'card-body' %}
 {% if _extra_classes_body is not empty %}
   {% set _body_classes = _body_classes ~ ' ' ~ _extra_classes_body %}
 {% endif %}
@@ -117,36 +122,39 @@
   <div class='{{ _row_classes }}'>
 {% endif %}
 {% if _image is not empty and _image.position != 'bottom' %}
-  {% if _image.classes is not empty %}
-    {% set _img_class = _image.classes ~ ' card-img-top' %}
-  {% else %}
-    {% set _img_class = 'card-img-top' %}
-  {% endif %}
+  {% set _img_class = 'card-img-top' %}
   {% if _image.position == 'background' %}
     {% set _img_class = 'card-img' %}
   {% endif %}
   {% if _image.rounded is not empty %}
     {% set _img_class = _img_class ~ ' rounded-' ~ _image.rounded %}
   {% endif %}
-  {% if _horizontal %}
-  <div class="{{ _horizontal_grid.left_col_classes ~ (image.position == 'right' ? ' order-1') }}">
-  {% endif %}
-  <img
-    src='{{ _image.path }}'
-    alt='{{ _image.alt }}'
-    class='{{ _img_class }}'
-  >
-  {% if _horizontal %}
-  </div>
+  {% if _image.classes is not empty %}
+    {% set _img_class = _img_class ~ " " ~ _image.classes %}
   {% endif %}
-  {% if _image.position == 'background' %}
-  <div class='card-img-overlay'>
+{% endif %}
+{% if _horizontal and (_image is not empty or _date is not empty)  %}
+  <div class='{{ _horizontal_grid.left_col_classes  }}'>
+{% endif %}
+  {% if _date is not empty %}
+    {% include '@oe-bcl/bcl-date-block/date-block.html.twig' with _date only %}
+  {% elseif _image is not empty and _image.position != "bottom" %}
+    <img
+      src="{{ _image.path }}"
+      alt="{{ _image.alt }}"
+      class="{{ _img_class }}"
+    >
   {% endif %}
+{% if _horizontal and (_image is not empty or _date is not empty) %}
+  </div>
+{% endif %}
+{% if _image.position == 'background' %}
+  <div class="card-img-overlay">
 {% endif %}
 {% if _horizontal %}
-  <div class="{{ _horizontal_grid.right_col_classes ~ (image.position == 'right' ? ' order-0') }}">
+<div class='{{ _horizontal_grid.right_col_classes }}'>
 {% endif %}
-  <div class="{{ _body_classes }}">
+  <div class='{{ _body_classes }}'>
     {%- if _badges is not empty and _badges is iterable -%}
       <div class="mb-3">
       {% for _badge in _badges %}
@@ -168,12 +176,9 @@
   {%- if _title is not empty -%}
     {% set _title_tag = _title.tag ?? 'h5' %}
     <{{ _title_tag }}
-      class='card-title{{ title.classes ? ' ' ~ title.classes }}'
-      {% if _title.attributes is not empty and _title.attributes is iterable %}
-        {% for attribute in _title.attributes %}
-          {{ create_attribute().set(attribute.name, attribute.value) }}
-        {% endfor %}
-      {% endif %}
+      {% set _title_attributes = title.attributes ?: create_attribute() %}
+      {% set _title_attributes = _title_attributes.addClass("card-title") %}
+      {{ _title_attributes }}
     >
       {{- title.content -}}
     </{{ _title_tag }}>
@@ -199,20 +204,24 @@
   {%- endif -%}
   </div>
 {% if _horizontal %}
-  </div>
+</div>
 {% endif %}
 {% if _image is not empty %}
   {% if _image.position == 'background' %}
   </div>
   {% endif %}
+  {% set _img_class = "card-img-bottom" %}
+  {% if _image.classes is not empty %}
+    {% set _img_class = _img_class ~ " " ~ _image.classes %}
+  {% endif %}
   {% if _image.position == 'bottom' %}
     {% if _horizontal %}
-    <div class='col-4'>
+    <div class="col-4">
     {% endif %}
     <img
-      src='{{ _image.path }}'
-      alt='{{ _image.alt }}'
-      class='card-img-bottom'
+      src="{{ _image.path }}"
+      alt="{{ _image.alt }}"
+      class="{{ _img_class }}"
     >
     {% if _horizontal %}
     </div>
@@ -223,7 +232,7 @@
   </div>
 {% endif %}
 {% if _card_footer is not empty %}
-  <div class='{{ _footer_classes }}'>
+  <div class="{{ _footer_classes }}">
     {{- _card_footer -}}
   </div>
 {% endif %}

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

@@ -0,0 +1,103 @@
+{% spaceless %}
+
+{#
+  Parameters:
+    - "background" (string) (default: 'white')
+      options: [ white, gray ]
+    - "banner" (object)
+    - "title" (object)
+    - "image" (object)
+    - "content" (string)
+    - "badges" (array of objects of type badge)
+    - "action_button" (object of type button) (default: {})
+    - "service_buttons" (array of objects of type button) (default: [])
+    - "attributes" (drupal attrs)
+#}
+
+{% set _background = background|default('white') %}
+{% set _action_button = action_button|default({}) %}
+{% set _service_buttons = service_buttons|default([]) %}
+{% set _image = image|default({}) %}
+
+{% set _css_classes = [
+  'bcl-content-banner',
+  'vw-100',
+  'pt-lg-4-75',
+] %}
+
+{% if _background != 'white' %}
+  {% set _css_classes = _css_classes|merge([
+    'pb-md-4-75',
+    'pb-4',
+    'pt-4',
+  ]) %}
+{% else %}
+  {% set _css_classes = _css_classes|merge([
+    'pt-3'
+  ]) %}
+{% endif %}
+
+{% set _modifiers = {
+  'white': 'bg-white',
+  'gray': 'bg-lighter',
+} %}
+
+{% set _card = {
+  title: title|default({})|merge({
+    tag: 'h2',
+    attributes: create_attribute().addClass(['fw-bold']),
+  }),
+  horizontal: true,
+  horizontal_grid: {
+    right_col_classes: 'col-md-8 col-lg-9 col-xxl-8',
+  },
+  extra_classes_header: 'bg-transparent pt-0 pb-0 border-0',
+  extra_classes_body: 'pt-0 px-0 pb-0',
+} %}
+
+{% if _image is not empty %}
+  {% set _card = _card|merge({
+    horizontal_grid: _card.horizontal_grid|merge({
+      left_col_classes: 'col-md-4 col-lg-3',
+    }),
+    extra_classes_body: 'pt-md-0 px-0 px-md-3 pb-0',
+  }) %}
+{% else %}
+  {% set _card = _card|merge({
+    horizontal_grid: {
+      right_col_classes: 'col-md-8 col-lg-9 col-xxl-8 px-sm-0 px-md-2-5',
+    },
+  }) %}
+{% endif %}
+
+{% set _css_classes = _css_classes|merge([_modifiers[_background]]) %}
+{% set _attributes = attributes.addClass(['bg-transparent', 'border-0']) %}
+
+{% if _button is not empty %}
+  {% set _attributes = attributes.addClass(['col-md-10']) %}
+{% endif %}
+
+<div class="{{ _css_classes|join(' ') }}">
+  <div class="container">
+    <div class="row">
+    {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
+
+  {% if _action_button is not empty %}
+    <div class="col-12 col-md-2 text-end">
+      <div class="d-grid d-md-block">
+        {% include '@oe-bcl/bcl-button/button.html.twig' with _action_button only %}
+      </div>
+    </div>
+  {% endif %}
+  {% if _service_buttons is not empty %}
+    <div class="d-flex justify-content-end">
+    {% for _button in _service_buttons %}
+      {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
+    {% endfor %}
+    </div>
+  {% endif %}
+  </div>
+  </div>
+</div>
+
+{% endspaceless %}

package/templates/bcl-date-block/date-block.html.twig

@@ -0,0 +1,42 @@
+{% spaceless %}
+
+{#
+  Parameters:
+    - "variant" (string) (default: '')
+    - "day" (integer) (default: '')
+    - "month" (string) (default: '')
+    - "date_time" (string) (default: '')
+    - "year" (integer) (default: '')
+#}
+
+{% set _month = month|default('') %}
+{% set _day = day|default('') %}
+{% set _year = year|default('') %}
+{% set _date_time = date_time|default('') %}
+{% set _variant = variant|default('') %}
+{% set _css_classes = [
+  'bcl-date-block',
+  'd-flex',
+  'flex-column',
+  'align-items-center',
+  'justify-content-center',
+  'bg-date',
+  'text-light',
+  'pt-3',
+  'rounded-top',
+  'mw-date',
+] %}
+
+{% set attributes = attributes.addClass(_css_classes) %}
+
+{% if _date_time is not empty %}
+  {% set attributes = attributes.setAttribute('datetime', _date_time) %}
+{% endif %}
+
+<time {{ attributes }}>
+  <span>{{ _day }}</span>
+  <span class="pb-3 text-uppercase">{{ _month }}</span>
+  <span class="bg-light w-100 text-center py-2 text-dark rounded-bottom mb-n1">{{ _year }}</span>
+</time>
+
+{% endspaceless %}

package/templates/bcl-description-list/description-list.html.twig

@@ -0,0 +1,110 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - title: (string) (default: "")
+  - title_tag: (string) (default: "h4")
+  - "items" (array) (default: []): format: [
+      {
+        "term" (object or array of object) -format: {
+          icon: {} - icon object,
+          label: ""
+        }
+        "definition" (block or array of string)
+      },
+      ...
+    ]
+  - "variant" (string) (default: '') 
+    - option: ["horizontal"]
+#}
+
+{# Parameters #}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _items = items|default([]) %}
+{% set _variant = variant|default('') %}
+
+{% if _variant == 'horizontal' %}
+  {% set attributes = attributes.addClass(["d-md-grid", "grid-3-9"]) %}
+{% endif %}
+
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
+<dl
+  {{ attributes }}
+>
+  {% for _item in _items %}
+    {% if _item.term is not empty %}
+      {% if _item.term is iterable %}
+        {% if _variant == 'horizontal' %}
+          <div>
+        {% endif %}
+        {% for _term in _item.term %}
+          <dt
+          {% if _variant == 'horizontal' and _term.icon is not empty %}
+            class="d-flex"
+          {% endif %}
+          >
+            {%- if _term.icon is not empty -%}
+              {% set _icon_classes = ["me-2"] %}
+              {% if _variant == 'horizontal' %}
+                {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
+              {% endif %}
+              {% include '@oe-bcl/bcl-icon/icon.html.twig' with _term.icon|merge({
+                attributes: create_attribute().addClass(_icon_classes)
+              }) only %}
+            {%- endif -%}
+            {{- _term.label -}}
+          </dt>
+        {% endfor %}
+        {% if _variant == 'horizontal' %}
+          </div>
+        {% endif %}
+      {% else %}
+        <dt
+          {% if _variant == 'horizontal' and _item.term.icon is not empty %}
+            class="d-flex"
+          {% endif %}
+        >
+          {% if _item.term.icon is not empty %}
+              {% set _icon_classes = ["me-2"] %}
+              {% if _variant == 'horizontal' %}
+                {% set _icon_classes = _icon_classes|merge(["mt-1"]) %}
+              {% endif %}
+            {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _item.term.icon|merge({
+              attributes: create_attribute().addClass(_icon_classes)
+            }) only -%}
+          {% endif %}
+          {{- _item.term.label -}}
+        </dt>
+      {% endif %}
+    {% endif %}
+    {% if _item.definition is not empty %}
+      {% if _item.definition is iterable %}
+        {% if _variant == 'horizontal' %}
+          <div>
+        {% endif %}
+        {% for _definition in _item.definition %}
+          {% if _definition.label is not defined %}
+            <dd>{{- _definition -}}</dd>
+          {% endif %}
+        {% endfor %}
+        {% if _variant == 'horizontal' %}
+          </div>
+        {% endif %}
+      {% else %}
+        <dd>
+          {%- block definition _item.definition -%}
+        </dd>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+</dl>
+
+{% endspaceless %}

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

@@ -0,0 +1,41 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% if sidebar.image is not empty %}
+    <img class="mb-4" src="https://picsum.photos/275?random=1" alt="image" />
+  {% endif %}
+  <div class="bcl-event-details mb-4">
+    <h3 class="fw-bold mb-4">Event Details</h3>
+    {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with sidebar only %}
+    <div class="mt-3-5">
+    {% for badge in sidebar.badges %}
+      {% include '@oe-bcl/bcl-badge/badge.html.twig' with badge only %}
+    {% endfor %}
+    </div>
+  </div>
+{% endblock %}
+
+{% block content %}
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
+  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
+  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
+  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+  </p>
+  <h3 class="fw-bold my-4">Description</h3>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
+  posuere ante ut, rhoncus tortor. Proin sed erat vel nisl luctus vulputate. Nunc tristique ultricies turpis, eu dictum enim ultrices vel.
+  Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
+  sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
+  </p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
+  a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet.
+  </p>
+{% endblock %}
+
+{% block related %}
+  <h3 class="fw-bold my-4">Related documents</h3>
+  {% include '@oe-bcl/bcl-file/file.html.twig' with files[0] only %}
+  {% include '@oe-bcl/bcl-file/file.html.twig' with files[1] only %}
+{% endblock %}

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -0,0 +1,115 @@
+{% spaceless %}
+
+{#
+  Parameters:
+  - "title" (string) (default: '')
+  - "title_tag" (string) (default: 'h4')
+  - "variant" (string) (default: '') options:
+    [ default, block ]
+  - "display_icons" (boolean) (default: true)
+  - "items" (array) (default: []):
+    - "icon" (associate array) (default: { size: 'm' })
+    - "subtitle" (string) (default: '')
+    - "title" (string) (default: '')
+    - "description" (string) (default:'')
+  - "grid_columns" (int) (default: 1)
+  - "responsiveness" (string) (default: 'md')
+  - "responsive_columns" (integer) (default: 3)
+  - "gutter" (int) (default: 4)
+  - "equal_height" (boolean) (default: false)
+  - "cols_extra_classes" (string) (default: '')
+  - "icons_path" (string) (default: '')
+  - "link_more" (object of type link) (default {})
+#}
+
+{# Parameters #}
+
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _variant = variant|default('default') %}
+{% set _css_classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
+{% set _display_icons = display_icons ?? true %}
+{% set _items = items|default([]) %}
+{% set _grid_columns = grid_columns|default(1) %}
+{% set _responsiveness = responsiveness|default('md') %}
+{% set _responsive_columns = responsive_columns|default(3) %}
+{% set _gutter = gutter|default(4) %}
+{% set _equal_height = equal_height|default(false) %}
+{% set _cols_extra_classes = cols_extra_classes|default('') %}
+{% set _cols_classes = 'col' %}
+{% set _icons_path = icons_path|default('') %}
+{% set _link_more = link_more|default({}) %}
+{% set _wrapper_classes = [] %}
+
+{% set _grid_classes = [
+  'row-cols-' ~ _responsiveness ~ '-' ~ _responsive_columns,
+  'row', 'row-cols-' ~ _grid_columns
+] %}
+{% if _responsive_columns == 3 %}
+ {% set _grid_classes = _grid_classes|merge(['row-cols-sm-2']) %}
+{% endif %}
+{% if _variant == 'block' or _variant == 'block-primary' %}
+  {% set _wrapper_classes = _wrapper_classes|merge(['bg-light p-3-5 pt-0']) %}
+{% endif %}
+{% if _gutter is not empty %}
+  {% set _grid_classes = _grid_classes|merge(['g-' ~ _gutter]) %}
+{% endif %}
+{% if _title is not empty %}
+  {% set _grid_classes = _grid_classes|merge(['mt-3']) %}
+{% endif %}
+{% if _equal_height %}
+  {% set  _cols_classes =  _cols_classes ~ ' h-100' %}
+{% endif %}
+{% set attributes = attributes.addClass(_css_classes) %}
+
+<div {{ attributes }}>
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+{% endif %}
+  <div
+  {% if _wrapper_classes is not empty %}
+    class="{{ _wrapper_classes|join(' ') }}"
+  {% endif %}
+  >
+    <div class="{{ _grid_classes|join(' ') }}">
+    {% if _items is defined and _items is not empty and _items is iterable %}
+      {% for _item in _items %}
+      <div class="{{ _cols_classes }}">
+      {% if _item.icon is defined and _item.icon is not empty and _display_icons %}
+        {% set _item = _item|merge({
+          icon: _item.icon|merge({
+            path: _icons_path,
+            size: 'l',
+          })
+        }) %}
+        {% include '@oe-bcl/bcl-icon/icon.html.twig' with _item.icon only %}
+      {% endif %}
+      {% if _item.title is defined and _item.title is not empty %}
+        <h3 class="text-capitalize fw-bold mt-2">
+          {{- _item.title -}}
+        </h3>
+      {% endif %}
+      {% if _item.subtitle is defined and _item.subtitle is not empty %}
+        <h5 class="fw-bold">
+          {{- _item.subtitle -}}
+        </h5>
+      {% endif %}
+      {% if _item.description is defined and _item.description is not empty %}
+        <p>
+          {{- _item.description -}}
+        </p>
+      {% endif %}
+      </div>
+      {% endfor %}
+    {% endif %}
+    </div>
+    {% if _link_more is defined and _link_more is not empty %}
+      <div class="border-top d-block pt-3 mt-3">
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _link_more only %}
+      </div>
+    {% endif %}
+  </div>
+</div>
+
+{% endspaceless %}

package/templates/bcl-featured-media/featured-media.html.twig

@@ -1,10 +1,16 @@
 {% spaceless %}
 
 {# Parameters:
+  - with_text (boolean) (default: false)
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h3')
   - image: (string) (default: "")
   - poster_image: (string) (default: "")
   - content: (string) (default: "")
+  - wrapper_classes: (default: '')
   - content_classes: (string) (default: "")
+  - read_more (object) (default: {})
+  - description (string) (default: '')
   - ratio: (string) (default: "16x9")
     - options ["1x1", "4x3", "16x9", "21x9"]
   - sources: (array of sources) (default: []) format: [
@@ -26,15 +32,47 @@
     - "embedded_media"
 #}
 
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h4') %}
+{% set _with_text = with_text|default(false) %}
+{% set _wrapper_classes = 'bcl-featured-item' %}
+{% set _description = description|default('') %}
 {% set _embedded_media = embedded_media|default('') %}
-{% set _image = image|default("") %}
-{% set _poster_image = poster_image|default("") %}
-{% set _content = content|default("") %}
-{% set _content_classes = content_classes|default("") %}
-{% set _ratio = ratio|default("16x9") %}
+{% set _image = image|default('') %}
+{% set _poster_image = poster_image|default('') %}
+{% set _content = content|default('') %}
+{% set _alignment = alignment|default('right') %}
+{% set _content_classes = content_classes|default('') %}
+{% set _ratio = ratio|default('16x9') %}
 {% set _sources = sources|default([]) %}
 {% set _tracks = tracks|default([]) %}
+{% set _col_classes = 'col-12 col-md-6' %}
+{% set _read_more = read_more|default({}) %}
 
+{% if wrapper_classes is defined and wrapper_classes is not empty %}
+  {% set _wrapper_classes = _wrapper_classes ~ ' ' ~ wrapper_classes %}
+{% endif %}
+
+{% if _with_text %}
+<div class="{{ _wrapper_classes }}">
+
+{% if _title is not empty %}
+  {% set _title_classes = 'fw-bold mb-4' %}
+  <{{ _title_tag }} class="{{ _title_classes }}">
+    {{- _title -}}
+  </{{ _title_tag }}>
+{% endif %}
+
+  <div class="row">
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '1' : '2' }}">
+      {{- _description|default('') -}}
+
+      {% if _read_more is not empty %}
+        {% include '@oe-bcl/bcl-link/link.html.twig' with _read_more only %}
+      {% endif %}
+    </div>
+    <div class="{{ _col_classes }} order-{{ _alignment == "right" ? '2' : '1' }}">
+{% endif %}
 
 <figure
   {{ attributes }}
@@ -79,4 +117,10 @@
 {% endif %}
 </figure>
 
+{% if _with_text %}
+    </div>
+  </div>
+</div>
+{% endif %}
+
 {% endspaceless %}