@openeuropa/bcl-listing 0.1.202408021145

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020-2021 Mark Otto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/listing.html.twig

@@ -0,0 +1,199 @@
+{% apply spaceless %}
+
+{# Parameters:
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - items: (card[])
+  - variant: (string) (default: 'default-1-col')
+    options [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
+  - link: (object of type link)
+  - alignment: (string) (default: '')
+    options ['start', 'end', 'center', 'baseline', 'stretch']
+  - image_size: (string) (default: '')
+    options ['small', 'large', 'extra-large']
+  - 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 _items = items|default([]) %}
+{% set _variant = variant|default('default-1-col') %}
+{% set _link = link|default({}) %}
+{% set _alignment = alignment|default('') %}
+{% set _image_size = image_size|default('') %}
+
+{% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
+{% set _cards = [] %}
+{% set _card_layout = {
+  type: 'grid',
+  responsiveness: 'md',
+  gutter: '4',
+  attributes: create_attribute(),
+} %}
+
+{% 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,
+    title_attributes: _title_attributes,
+  } only %}
+{% endif %}
+
+{% if _items is not empty %}
+  {% for _card in _items %}
+    {% set  _alignment_class = '' %}
+    {% set _image_classes = _card.image.classes ?: '' %}
+    {% set _start_col_classes = 'bcl-card-start-col mb-3 mb-lg-0' %}
+    {% set _end_col_classes = 'col-12 col-md' %}
+    {% if _image_size is not empty %}
+      {% set _start_col_classes = _start_col_classes ~ ' bcl-size-' ~ _image_size %}
+    {% endif %}
+    {% if 'd-none' in _image_classes %}
+      {% set _start_col_classes = _start_col_classes ~ ' d-none d-md-block' %}
+    {% endif %}
+    {% if _alignment is not empty %}
+      {% set _alignment_class = ' align-self-' ~ _alignment %}
+    {% endif %}
+    {% set _card_classes = [] %}
+    {% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
+    {% set _card_title_attributes = card.title_attributes ? card.title_attributes : create_attribute() %}
+    {% set _card = _card|merge({
+      title_attributes: _card_title_attributes.addClass(['fs-5'])
+    }) %}
+
+    {% if _variant == 'default-1-col' or _variant == 'default-2-col' or _variant == 'default-3-col'  %}
+      {% set _card_classes = [
+        'listing-item',
+        'border-bottom',
+        'border-md-0',
+        'border-0',
+      ] %}
+      {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
+      {% set _card = _card|merge({
+        horizontal: true,
+        extra_classes_body: 'p-0 pb-md-0 pb-3',
+        attributes: _card_attributes,
+        horizontal_grid: {
+          left_col_classes: _start_col_classes ~ _alignment_class,
+          right_col_classes: _end_col_classes ~ _alignment_class,
+        }
+      }) %}
+    
+      {% if _variant == 'default-2-col' %}
+        {% set _card_layout = _card_layout|merge({
+          responsive_columns: 2,
+        }) %}
+      {% elseif _variant == 'default-3-col' %}
+        {% set _card_layout = _card_layout|merge({
+          attributes: _card_layout.attributes.addClass(['row-cols-md-2']),
+          responsive_columns: 3,
+          responsiveness: 'xl',
+        }) %}
+      {% endif %}
+    {% endif %}
+
+    {% if _variant == 'highlight-1-col' %}
+      {% set _card_classes = [
+        'listing-item--highlight',
+        'border-0',
+        'bg-lighter'
+      ] %}
+     {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
+     {% set _card = _card|merge({
+         wrapper_class: 'col',
+         attributes: _card_attributes,
+      }) %}
+      {% if _card.image is defined and _card.image is not empty %}
+        {% set _card = _card|merge({
+          extra_classes_body: "pt-0",
+        }) %}
+      {% endif %}
+      {% set _card_layout = _card_layout|merge({
+        cols_extra_classes: 'mt-4-5',
+      }) %}
+      {% if _card.image is not empty %}
+        {% set _image_classes = _card.image.classes ?: '' %}
+        {% if not _alignment == 'center' %}
+          {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
+        {% endif %}
+        {% set _card = _card|merge({image: _card.image|merge({
+          classes: _image_classes,
+        })}) %}
+      {% endif %}
+
+    {% endif %}
+
+    {% if _variant == 'highlight-2-col' or variant == 'highlight-3-col' %}
+      {% set _card_classes  = [
+        'listing-item--highlight',
+        'border-0',
+        'bg-lighter',
+        'h-100',
+        'rounded-2'
+      ] %}
+      {% set _card_attributes = _card_attributes.addClass(_card_classes) %}
+      {% set _card = _card|merge({
+        wrapper_class: 'col',
+        attributes: _card_attributes,
+      }) %}
+      {% if _card.image is defined and _card.image is not empty %}
+        {% set _card = _card|merge({
+          extra_classes_body: 'pt-0',
+        }) %}
+      {% endif %}
+      {% if _card.image is not empty %}
+        {% set _image_classes = _card.image.classes ?: '' %}
+        {% if not _alignment == 'center' %}
+          {% set _image_classes = _image_classes ? _image_classes ~ ' mb-3' : 'mb-3' %}
+        {% endif %}
+        {% set _card = _card|merge({image: _card.image|merge({
+          classes: _image_classes,
+        })}) %}
+      {% endif %}
+      {% set _card_layout = _card_layout|merge({ gutter: '4' }) %}
+      {% if variant == 'highlight-2-col' %}
+        {% set _card_layout = _card_layout|merge({ responsive_columns: 2 }) %}
+      {% else %}
+        {% set _card_layout = _card_layout|merge({ responsive_columns: 3 }) %}
+      {% endif %}
+    {% endif %}
+
+    {% if _card.image is empty and _card.date is empty %}
+      {% set _card = _card|merge({
+        horizontal: false,
+      }) %}
+    {% endif %}
+
+    {% set _cards = _cards|merge([_card]) %}
+  {% endfor %}
+{% endif %}
+
+  {% include "@oe-bcl/bcl-card-layout/card-layout.html.twig" with _card_layout|merge({ items: _cards }) only %}
+
+{% if _link is not empty %}
+  {% set _link_attributes = _link.attributes ? _link.attributes : create_attribute() %}
+  {% set _link_attributes = _link_attributes.addClass(['mt-3-5', 'd-inline-block']) %}
+  {% include '@oe-bcl/bcl-link/link.html.twig' with _link|merge({
+    attributes: _link_attributes,
+    icon: _link.icon|merge({
+      name: 'chevron-right',
+      size: 'xs',
+    }),
+  }) only %}
+{% endif %}
+</div>
+
+{% endapply %}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@openeuropa/bcl-listing",
+  "author": "European Commission",
+  "license": "EUPL-1.2",
+  "version": "0.1.202408021145",
+  "description": "OE - BCL Listing",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@openeuropa/bcl-card-layout": "^0.1.202408021145",
+    "@openeuropa/bcl-heading": "^0.1.202408021145",
+    "@openeuropa/bcl-link": "^0.1.202408021145"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openeuropa/bootstrap-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openeuropa/bootstrap-component-library.git/issues"
+  },
+  "homepage": "https://github.com/openeuropa/bootstrap-component-library",
+  "keywords": [
+    "openeuropa",
+    "bootstrap-component-library",
+    "design-system",
+    "twig"
+  ],
+  "gitHead": "7ee2013f7f64a70ddfa35228a9a65967dd71eec3"
+}