@openeuropa/bcl-theme-default 0.1.3 → 0.1.202408021145

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

@@ -0,0 +1,136 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+    - title: (string) (default: '')
+    - title_tag: (string) (default: 'h1')
+    - title_link: (link object) (default: {})
+    - title_attributes: (drupal attrs)
+    - background: (string) (default: 'white')
+      options: [ white, gray ]
+    - image (object) (default: {})
+    - image_size: (string) (default: 'md')
+      options: ['md', 'lg', 'xl']
+    - date: (date block object) (default: {})
+
+    Card inheritance
+      - badges (badge[]) (default: [])
+      - links (link[]) (default: [])
+      - content (string) (default: '')
+      - subtitle (object) (default: {})
+        format: {
+          content: '',
+          tag: '',
+          classes: ''
+        }
+      - text (object) (default: {})
+        format: {
+          content: '',
+          tag: '',
+          classes: ''
+        }
+
+    - 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 _image = image|default({}) %}
+{% set _image_size = image_size|default('md') %}
+{% set _action_bar = action_bar|default('') %}
+{% set _date = date|default({}) %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _classes = [
+  'bcl-content-banner',
+] %}
+
+{% if _background != 'white' %}
+  {% set _classes = _classes|merge([
+    'pb-md-4-75',
+    'pb-4',
+    'pt-4',
+    'pt-md-4-75',
+  ]) %}
+{% else %}
+  {% set _classes = _classes|merge([
+    'pt-4',
+    'pt-md-4-75',
+  ]) %}
+{% endif %}
+
+{% set _modifiers = {
+  'white': 'bg-white',
+  'gray': 'bg-lighter',
+} %}
+
+{% set _body_classes = 'pt-0 px-0 pb-0' %}
+{% set _right_col_classes = 'col-md col-lg-9 col-xxl-8' %}
+
+{% if _image is not empty %}
+  {% set _left_col_classes = 'bcl-card-start-col' %}
+  {% set _body_classes = 'pt-4 pt-md-0 px-0 px-md-1-5 pb-0' %}
+  {% if _image_size == 'lg' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-large' %}
+    {% set _right_col_classes = 'col-md col-xl-9 col-xxl-8' %}
+  {% endif %}
+  {% if _image_size == 'xl' %}
+    {% set _left_col_classes = _left_col_classes ~ ' bcl-size-extra-large' %}
+    {% set _body_classes = 'pt-4 pt-lg-0 px-0 px-lg-1-5 pb-0' %}
+    {% set _right_col_classes = 'col-lg' %}
+  {% 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 %}
+{% if _image is empty and _date is empty %}
+  {% set _right_col_classes = 'col-lg-10 col-xl-9 col-xxl-8' %}
+{% endif %}
+
+{% set _horizontal_classes = {
+  left_col_classes: _left_col_classes,
+  right_col_classes: _right_col_classes,
+} %}
+
+{% set _card = {
+  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 _classes = _classes|merge([_modifiers[_background]]) %}
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _button is not empty %}
+  {% set _card =  _card|merge({
+    attributes: _card.attributes.addClass(['col-md-10']),
+  }) %}
+{% endif %}
+
+<div {{ attributes }}>
+  <div class="container">
+  {% include '@oe-bcl/bcl-card/card.html.twig' with _card %}
+
+  {%- block action_bar -%}
+    {{ _action_bar }}
+  {%- endblock -%}
+  </div>
+</div>
+
+{% endapply %}

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

@@ -0,0 +1,64 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+    - day (integer) (default: '')
+    - month (string) (default: '')
+    - date_time (string) (default: '')
+    - year (integer) (default: '')
+    - end_day (integer) (default: '')
+    - end_month (string) (default: '')
+    - end_year (integer) (default: '')
+#}
+
+{% set _day = day|default('') %}
+{% set _month = month|default('') %}
+{% set _date_time = date_time|default('') %}
+{% set _year = year|default('') %}
+{% set _end_day = end_day|default('') %}
+{% set _end_month = end_month|default('') %}
+{% set _end_year = end_year|default('') %}
+
+{% set _classes = [
+  'bcl-date-block',
+  'bg-date',
+  'rounded',
+  'mw-date',
+  'text-center',
+  'd-flex',
+  'flex-column',
+  'ratio',
+  'ratio-1x1'
+] %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+{% if _date_time is not empty %}
+  {% set attributes = attributes.setAttribute('datetime', _date_time) %}
+{% endif %}
+
+<time {{ attributes }}>
+  <span class="d-flex flex-column pt-2">
+    <span class="d-flex flex-column align-item-center justify-content-center bg-white border border-bottom-0 w-100 h-100 fs-5 text-uppercase">
+      <span class="d-block">{{- _day ~ ' ' ~ _month ~ ((_end_day or _end_month) ? ' - ' ) -}}</span>
+      {%- if _end_day is not empty %}
+        {{- _end_day -}}
+      {% endif -%}
+      {%- if _end_month is not empty %}
+        {{- ' ' ~ _end_month -}}
+      {% endif -%}
+    </span>
+    <span class="bg-lighter border w-100 rounded-bottom py-1">
+      {{- _year -}}
+      {%- if _end_year is not empty -%}
+        {{ ' - ' ~ _end_year }}
+      {%- endif -%}
+    </span>
+  </span>
+</time>
+
+{% endapply %}

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

@@ -0,0 +1,44 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - button: (button object) (default: {})
+  - link: (link object) (default: {})
+  - icon: (icon object) (default: {})
+  - label: (string) (default: '')
+
+  BLOCKS:
+  - definition
+#}
+
+{% set _button = button|default({}) %}
+{% set _link = link|default({}) %}
+{% set _icon = icon|default({}) %}
+{% set _label = label|default('') %}
+
+
+<dd>
+{%- block definition -%}
+  {%- if _button is not empty -%}
+    {% include '@oe-bcl/bcl-button/button.html.twig' with _button only %}
+  {%- elseif _link is not empty %}
+    {% include '@oe-bcl/bcl-link/link.html.twig' with _link only -%}
+  {%- else -%}
+    {%- if _icon is not empty -%}
+      {%- set _icon_classes = ["me-2", "align-self-center", "flex-shrink-0"] -%}
+      {% set _icon_attributes = _icon.attributes ?: create_attribute() %}
+      {% set _icon_attributes = _icon_attributes.addClass(_icon_classes) %}
+      {%- include '@oe-bcl/bcl-icon/icon.html.twig' with _icon|merge({
+        attributes: _icon_attributes,
+      }) only -%}
+      <div class="mb-0 d-inline-block">
+        {{- _label -}}
+      </div>
+    {%- else -%}
+      <div>{{- _label -}}</div>
+    {%- endif -%}
+  {%- endif -%}
+{% endblock %}
+</dd>
+
+{% endapply %}

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

@@ -0,0 +1,33 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - icon: (icon object) (default: {})
+  - color: (string) (default: '')
+    - options: ['bg-primary', 'bg-secondary', 'bg-success', 'bg-warning', 'bg-info', 'bg-light', 'bg-dark', 'bg-lighter', 'bg-gray-200', 'bg-gray-400']
+  - label: (string) (default: '')
+#}
+
+{% set _icon = icon|default({}) %}
+{% set _color = color|default('') %}
+{% set _label = label|default('') %}
+
+<dt>
+  <div class="d-flex">
+  {%- if _icon is not empty -%}
+    {% set _icon_classes = ["me-2", "align-self-center", "flex-shrink-0"] %}
+    {% set _icon_attributes = _icon.attributes ?: create_attribute() %}
+    {% set _icon_attributes = _icon_attributes.addClass(_icon_classes) %}
+    {% include '@oe-bcl/bcl-icon/icon.html.twig' with _icon|merge({
+      attributes: _icon_attributes,
+    }) only %}
+  {%- elseif _color is not empty -%}
+    <div class="align-self-center">
+      <span class="p-2 me-2 d-inline-block rounded-1 {{ _color }}"></span>
+    </div>
+  {%- endif -%}
+    <div>{{- _label -}}</div>
+  </div>
+</dt>
+
+{% endapply %}

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

@@ -0,0 +1,121 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - bordered (boolean) (default: false)
+  - col_classes (string) (default: 'col-3')
+  - items (array) (default: []): format: [
+      {
+        term (string or description list title [])
+        definition (string or description list details [])
+      },
+      ...
+    ]
+  - variant (string) (default: '') 
+    - option: ['horizontal']
+#}
+
+{% 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 _bordered = bordered ?? false %}
+{% set _col_classes = col_classes|default('col-md-3') %}
+{% set _items = items|default([]) %}
+{% set _variant = variant|default('') %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set _item_classes = ['mb-3'] %}
+
+{% if _bordered %}
+  {% set _item_classes = ['border-bottom', 'pb-2-5', 'mb-2-5'] %}
+{% endif %}
+
+{% if _variant == 'horizontal' %}
+  {% set _item_classes = _item_classes|merge(['row']) %}
+{% endif %}
+
+{% 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 %}
+
+{% set attributes = attributes.addClass(['bcl-description-list']) %}
+
+{% if _variant != 'horizontal' %}
+<dl
+  {{ attributes }}
+>
+{% else %}
+<div
+  {{ attributes }}
+>
+{% endif %}
+  {% for _item in _items %}
+  {% if _variant == 'horizontal' %}
+  <dl
+    {{ create_attribute().addClass(_item_classes) }}
+  >
+  {% else %}
+  <div
+    {{ create_attribute().addClass(_item_classes) }}
+  >
+  {% endif %}
+  {% if _item.term is not empty %}
+    {% if _variant == 'horizontal' %}
+    <div class="{{ _col_classes }}">
+    {% endif %}
+    {% if _item.term is iterable %}
+      {% for _term in _item.term %}
+        {%- include '@oe-bcl/bcl-description-list/description-list-title.html.twig' with _term only -%}
+      {% endfor %}
+    {% else %}
+      {%- include '@oe-bcl/bcl-description-list/description-list-title.html.twig' with {
+        label: _item.term
+      } only -%}
+    {% endif %}
+    {% if _variant == 'horizontal' %}
+    </div>
+    {% endif %}
+  {% endif %}
+  {% if _item.definition is not empty %}
+    {% if _variant == 'horizontal' %}
+    <div class="col">
+    {% endif %}
+    {% if _item.definition is iterable %}
+      {% for _definition in _item.definition %}
+        {%- include '@oe-bcl/bcl-description-list/description-list-details.html.twig' with _definition only -%}
+      {% endfor %}
+    {% else %}
+      {%- include '@oe-bcl/bcl-description-list/description-list-details.html.twig' with {
+        label: _item.definition
+      } only -%}
+    {% endif %}
+    {% if _variant == 'horizontal' %}
+    </div>
+    {% endif %}
+  {% endif %}
+  {% if _variant == 'horizontal' %}
+  </dl>
+  {% else %}
+  </div>
+  {% endif %}
+  {% endfor %}
+{% if _variant != 'horizontal' %}
+</dl>
+{% else %}
+</div>
+{% endif %}
+
+{% endapply %}

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

@@ -1,8 +1,8 @@
-{% spaceless %}
+{% apply spaceless %}
 
 {# Parameters:
-  - id (string) (default: '')
-  - trigger (object of Button or Link component)
+  - id (string) (default: dropdown-random(1000))
+  - trigger (link or button)
   - link (boolean) (default: false)
   - direction (string) (default: '')
     - options ['dropup', 'dropend', 'dropstart']
@@ -23,38 +23,46 @@
     ]
   - dark (boolean) (default: false)
   - remove_wrapper (boolean) (default: false)
-  - items (array of objects)
+  - items (object[])
     format: [
       {
-        - Link or Button object component
+        - link or button object
         - active (boolean)
         - divider (bolean) - show divider
         - button (boolean) - set to button
       }
     ]
+  - attributes (drupal attrs)
 #}
 
 {% set _id = id|default('dropdown-' ~ random(1000)) %}
 {% set _trigger = trigger|default({}) %}
-{% set _link = link|default(false) %}
+{% set _link = link ?? false %}
 {% set _direction = direction|default('') %}
 {% set _alignment = alignment|default('') %}
-{% set _dark = dark|default(false) %}
-{% set _remove_wrapper = remove_wrapper|default(false) %}
+{% set _dark = dark ?? false %}
+{% set _remove_wrapper = remove_wrapper ?? false %}
 {% set _items = items|default([]) %}
+
 {% set _class = 'dropdown' %}
-{% set _dropdown_class = 'dropdown-menu' %}
+{% set _dropdown_classes = ['dropdown-menu'] %}
 
 {% if _dark %}
-  {% set _dropdown_class = _dropdown_class ~ ' dropdown-menu-dark' %}
+  {% set _dropdown_classes = _dropdown_classes|merge(['dropdown-menu-dark']) %}
 {% endif %}
 {% if _alignment %}
-  {% set _dropdown_class = _dropdown_class ~ ' ' ~ _alignment %}
+  {% set _dropdown_classes = _dropdown_classes|merge([_alignment]) %}
 {% endif %}
 {% if _direction %}
   {% set _class = _class ~ ' ' ~ _direction %}
 {% endif %}
 
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.setAttribute('aria-labelledby', _id).addClass(_dropdown_classes) %}
+
 {% if _trigger.attributes is empty %}
   {% set _trigger = _trigger|merge({
     attributes: create_attribute()
@@ -81,11 +89,13 @@
 <div class="{{ _class }}">
 {% endif %}
   {% if _link %}
-    {% include '@oe-bcl/link/link.html.twig' with _trigger only %}
+    {% include '@oe-bcl/bcl-link/link.html.twig' with _trigger only %}
   {% else %}
-    {% include '@oe-bcl/button/button.html.twig' with _trigger only %}
+    {% include '@oe-bcl/bcl-button/button.html.twig' with _trigger only %}
   {% endif %}
-  <ul class="{{ _dropdown_class }}" aria-labelledby="{{ _id }}">
+  <ul
+    {{ attributes }}
+  >
     {% if _items is not empty and _items is iterable %}
       {% for _item in _items %}
         {% if _item.attributes is empty %}
@@ -105,9 +115,9 @@
         {% if _item.divider is defined %}
           <hr class="dropdown-divider">
         {% elseif _item.button is defined %}
-          {% include '@oe-bcl/button/button.html.twig' with _item only %}
+          {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %}
         {% else %}
-          {% include '@oe-bcl/link/link.html.twig' with _item only %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item only %}
         {% endif %}
         </li>
       {% endfor %}
@@ -117,4 +127,4 @@
 </div>
 {% endif %}
 
-{% endspaceless %}
+{% endapply %}

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

@@ -0,0 +1,24 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block sidebar %}
+  {% include '@oe-bcl/bcl-inpage-navigation/inpage-navigation.html.twig' with sidebar only %}
+{% endblock %}
+
+{% block content %}
+  {% include '@oe-bcl/bcl-description-list/description-list.html.twig' with details_list only %}
+
+  <h2 id="item-1" class="my-4">Description</h2>
+  <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>
+
+  <h2 id="item-2" class="my-4">Related documents</h2>
+  {% 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,128 @@
+{% apply spaceless %}
+
+{#
+  Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - variant (string) (default: '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: '')
+  - icon_path (string) (default: '')
+  - link_more (object of type link) (default {})
+#}
+
+{% 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 _variant = variant|default('default') %}
+{% 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 ?? false %}
+{% set _cols_extra_classes = cols_extra_classes|default('') %}
+{% set _icon_path = icon_path|default('') %}
+{% set _link_more = link_more|default({}) %}
+
+{% set _cols_classes = 'col' %}
+{% set _classes = ['bcl-fact-figures', 'bcl-fact-figures--' ~ _variant] %}
+{% 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 %}
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+<div {{ attributes }}>
+{% 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
+  {% 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 _icon_attributes = _item.icon.attributes ?: create_attribute() %}
+        {% set _item = _item|merge({
+          icon: _item.icon|merge({
+            path: _icon_path,
+            size: 'l',
+            attributes: _icon_attributes.addClass(['mb-2', 'icon--primary']),
+          })
+        }) %}
+        {% include '@oe-bcl/bcl-icon/icon.html.twig' with _item.icon only %}
+      {% endif %}
+      {% if _item.title is defined and _item.title is not empty %}
+        <div class="fs-4 fw-medium">
+          {{- _item.title -}}
+        </div>
+      {% endif %}
+      {% if _item.subtitle is defined and _item.subtitle is not empty %}
+        <div class="fs-5 fw-medium">
+          {{- _item.subtitle -}}
+        </div>
+      {% 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>
+
+{% endapply %}