@openeuropa/bcl-theme-joinup 0.1.202408021145

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

@@ -0,0 +1,87 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - type (string) (default: 'group')
+    options: ['group', 'grid', 'masonry']
+  - items (card[]) (default: [])
+  - grid_columns (int) (default: 1)
+    options: ['1', '2', '3']
+  - responsiveness (string) (default: '')
+    options: ['sm', 'md', 'lg', 'xl', 'xxl']
+  - responsive_columns (int) (default: '')
+    options: ['1', '2', '3']
+  - gutter (int) (default: '')
+    options: ['0', '1', '2', '3', '4', '5']
+  - equal_height (boolean) (default: false)
+  - cols_extra_classes (string) (default: '')
+  - attributes (drupal attrs)
+
+  Blocks
+    - card_layout_card
+#}
+
+{% set _type = type|default('group') %}
+{% set _items = items|default([]) %}
+{% set _grid_columns = grid_columns|default(1) %}
+{% set _responsiveness = responsiveness|default('md') %}
+{% set _responsive_columns = responsive_columns|default('') %}
+{% set _gutter = gutter|default('') %}
+{% set _equal_height = equal_height ?? false %}
+{% set _cols_extra_classes = cols_extra_classes|default('') %}
+
+{% set _cols_classes = 'col' %}
+
+{% if _cols_extra_classes is not empty %}
+  {% set _cols_classes = _cols_classes ~ ' ' ~ _cols_extra_classes %}
+{% endif %}
+{% if _type == 'group' %}
+  {% set _classes = ['card-group'] %}
+{% elseif type == 'grid' or type == 'masonry' %}
+  {% set _classes = ['row', 'row-cols-' ~ _grid_columns] %}
+  {% if _responsive_columns is not empty %}
+    {% set _classes = _classes|merge(['row-cols-' ~ _responsiveness ~ '-' ~ _responsive_columns]) %}
+  {% endif %}
+  {% if _gutter is not empty %}
+    {% set _classes = _classes|merge(['g-' ~ _gutter]) %}
+  {% endif %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set attributes = attributes.addClass(_classes) %}
+
+<div
+  {{ attributes }}
+  {% if _type == 'masonry' %}
+    data-masonry='{"percentPosition": true }'
+  {% endif %}
+>
+{% if _items is not empty and _items is iterable %}
+  {% for _item in _items %}
+    {% if _item.attributes is empty %}
+      {% set _item = _item|merge({
+        attributes: create_attribute()
+      }) %}
+    {% endif %}
+    {% if _equal_height %}
+      {% set _item = _item|merge({
+          attributes: _item.attributes.addClass('h-100')
+        })
+      %}
+    {% endif %}
+    {% if _type == 'grid' or _type == 'masonry' %}
+      <div class="{{ _cols_classes }}">
+    {% endif %}
+      {% block card_layout_card %}
+        {% include '@oe-bcl/bcl-card/card.html.twig' with _item only %}
+      {% endblock %}
+    {% if _type == 'grid' or _type == 'masonry' %}
+      </div>
+    {% endif %}
+  {% endfor %}
+{% endif %}
+</div>
+
+{% endapply %}

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

@@ -0,0 +1,180 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title (string) (default: '')
+  - title_tag (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes: (drupal attrs)
+  - id (string) (default: '')
+  - autoplay (boolean) (default: true)
+  - dark (boolean) (default: false)
+  - active_item (integer) (default: 1)
+  - items (object[]) format: [
+     {
+      image: (string) <img> tag
+      caption (string)
+      caption_classes (string)
+      caption_title (string) 
+      interval (integer) (default: 0)
+     }
+   ],
+  - fade (boolean) (default: false)
+  - with_controls (boolean) (default: true)
+  - 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 _autoplay = autoplay ?? true %}
+{% set _dark = dark ?? false %}
+{% set _active_item = active_item|default(1) %}
+{% set _items = items|default([]) %}
+{% set _fade = fade ?? false %}
+{% set _with_controls = with_controls ?? true %}
+{% set _prev_label = prev_label|default('') %}
+{% set _next_label = next_label|default('') %}
+{% set _with_indicators = with_indicators ?? false %}
+{% set _rounded_indicators = rounded_indicators ?? false %}
+{% set _disable_touch = disable_touch ?? false %}
+
+{% set _classes = ['carousel', 'slide'] %}
+
+{% if _fade %}
+  {% set _classes = _classes|merge(['carousel-fade']) %}
+{% endif %}
+{% if _dark %}
+  {% set _classes = _classes|merge(['carousel-dark']) %}
+{% endif %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% if _id is not empty %}
+  {% set attributes = attributes.setAttribute('id', _id) %}
+{% endif %}
+
+{% if _autoplay %}
+  {% set attributes = attributes.setAttribute('data-bs-ride', 'carousel') %}
+{% endif %}
+
+{% if _disable_touch %}
+  {% set attributes = attributes.setAttribute('data-bs-touch', 'false') %}
+{% endif %}
+
+{% if _rounded_indicators %}
+  {% set attributes = attributes.addClass('rounded-indicators') %}
+{% endif %}
+
+{% 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 }}
+>
+{% if _with_indicators %}
+  <div class="carousel-indicators d-none d-md-flex">
+  {% for _i in 0..(_items|length - 1) %}
+    {% set button_attributes = create_attribute()
+                              .setAttribute('aria-label', 'Slide ' ~ (_i + 1))
+                              .setAttribute('data-bs-target', '#' ~ _id)
+                              .setAttribute('data-bs-slide-to', _i)
+    %}
+    {% if loop.index == _active_item %}
+      {% set button_attributes = button_attributes.setAttribute('aria-current', true).addClass(['active']) %}
+    {% endif %}
+    {% include '@oe-bcl/bcl-button/button.html.twig' with {
+      clean_class: true,
+      attributes: button_attributes
+    } only %}
+  {% endfor %}
+  </div>
+{% endif %}
+  <div class="carousel-inner">
+  {% if _items is not empty and _items is iterable %}
+    {% for _item in items %}
+    {% set _item_classes = 'carousel-item' %}
+    {% if loop.index == _active_item %}
+      {% set _item_classes = _item_classes ~ ' active' %}
+    {% endif %}
+    <div
+      class="{{ _item_classes }}"
+    {% if _item.interval is defined %}
+      data-bs-interval="{{ _item.interval }}"
+    {% endif %}
+    >
+    {% if _item.image is defined and _item.image is not empty %}
+      {{ _item.image }}
+    {% endif %}
+    {% if (_item.caption is defined and _item.caption is not empty) or (_item.link is defined and _item.link is not empty) or (_item.caption_title is defined and _item.caption_title is not empty) %}
+      {% set _caption_classes = 'carousel-caption' %}
+      {% if _item.caption is not empty and _item.link is empty %}
+        {% set _caption_classes = _caption_classes ~ ' d-none d-md-block' %}
+      {% endif %}
+      <div
+        class="{{ _caption_classes }}"
+      >
+        {% if _item.caption is not empty or _item.caption_title is not empty %}
+          {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
+            <div class="{{ _item.caption_classes }}">
+          {% endif %}
+          {% if _item.caption_title is not empty %}
+            <div class="fs-5">{{ _item.caption_title }}</div>
+          {% endif %}
+            {{- _item.caption -}}
+          {% if _item.caption_classes is defined and _item.caption_classes is not empty %}
+            </div>
+          {% endif %}
+        {% endif %}
+        {% if _item.link is defined and _item.link is not empty %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _item.link only %}
+        {% endif %}
+      </div>
+    {% endif %}
+    </div>
+    {% endfor %}
+  {% endif %}
+  </div>
+{% if _with_controls %}
+  <button
+    class="carousel-control-prev"
+    type="button"
+    data-bs-target="#{{ _id }}"
+    data-bs-slide="prev"
+  >
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+  {% if _prev_label is not empty %}
+    <span class="visually-hidden">{{ _prev_label }}</span>
+  {% endif %}
+  </button>
+  <button
+    class="carousel-control-next"
+    type="button"
+    data-bs-target="#{{ _id }}"
+    data-bs-slide="next"
+  >
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+  {% if _next_label is not empty %}
+    <span class="visually-hidden">{{ _next_label }}</span>
+  {% endif %}
+  </button>
+{% endif %}
+</div>
+
+{% endapply %}

package/templates/bcl-contact-form/contact-form.html.twig

@@ -0,0 +1,5 @@
+{% extends '@oe-bcl/bcl-base-templates/content-type.html.twig' %}
+
+{% block content %}
+  {% include '@oe-bcl/bcl-form/form.html.twig' with form only %}
+{% endblock %}

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 %}