Skip to content

Commit 8648fb6

Browse files
piotrsmykajpiotrsmykaj
committed
OEL-4322: Migrate Alert and Description list components.
1 parent b3c6c04 commit 8648fb6

25 files changed

+368
-121
lines changed

‎components/alert/alert.component.yml‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
name: Alert
2+
description: 'Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. https://v5.getbootstrap.com/docs/5.0/components/alerts/'
3+
variants:
4+
primary:
5+
title: 'Primary (default)'
6+
secondary:
7+
title: Secondary
8+
success:
9+
title: Success
10+
danger:
11+
title: Danger
12+
warning:
13+
title: Warning
14+
info:
15+
title: Info
16+
light:
17+
title: Light
18+
dark:
19+
title: Dark
20+
link:
21+
title: Link
22+
slots:
23+
heading:
24+
title: Heading
25+
description: 'The alert heading. Optional.'
26+
message:
27+
title: Message
28+
description: 'The alert message.'
29+
props:
30+
type: object
31+
properties:
32+
icon:
33+
title: 'Icon name'
34+
description: 'Add an icon to the alert. Optional.'
35+
type: string
36+
dismissible:
37+
title: Dismissible
38+
description: 'Add close button to dismiss the alert inline. Defaults to true.'
39+
type: boolean
40+
animated_dismiss:
41+
title: 'Animated dismiss'
42+
description: 'Add fade animation to the dismissible alert. Defaults to true.'
43+
type: boolean

‎components/alert/alert.preview-default.story.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: Preview
2+
slots:
3+
heading: 'Well done!'
4+
message: 'A simple alert—check it out!'
5+
props:
6+
icon: info-circle

‎components/alert/alert.twig‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{#
2+
/**
3+
* @file
4+
* Alert component.
5+
*/
6+
#}
7+
8+
{% set _bcl_icon_path = file_url(get_theme_path('oe_bootstrap_theme') ~ '/assets/icons/bcl-default-icons.svg') %}
9+
{% set _icon_path = icon_path|default(_bcl_icon_path) %}
10+
11+
{% include '@oe-bcl/alert' with {
12+
'heading': heading,
13+
'message': message,
14+
'variant': variant,
15+
'dismissible': dismissible,
16+
'animated_dismiss': animated_dismiss,
17+
'icon_path': _icon_path,
18+
'icon_name': icon,
19+
'attributes': attributes,
20+
} only %}

‎components/description_list/description_list.component.yml‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
name: 'Description list'
2+
description: 'Description lists are used to display and organise content that belongs to a category with a descriptions. Common use cases include glossary type lists or a list of speakers with their biographies.'
3+
slots:
4+
title:
5+
title: Title
6+
type: string
7+
description: 'Title of the description list.'
8+
props:
9+
type: object
10+
properties:
11+
title_tag:
12+
title: 'Title tag'
13+
type: string
14+
description: 'The tag to use for the title. Defaults to h2.'
15+
items:
16+
title: 'List items'
17+
type: array
18+
description: 'Each item is composed by one or more terms and one or more definitions. Each term entry can have an icon.'
19+
items:
20+
type: object
21+
properties:
22+
term:
23+
title: 'Terms'
24+
type: [string, array]
25+
description: 'Can be a single string or an array of term objects.'
26+
items:
27+
type: object
28+
properties:
29+
label:
30+
title: Label
31+
type: [string, array, object]
32+
description: 'Label text or render array.'
33+
icon:
34+
type: [object, string]
35+
properties:
36+
name:
37+
type: string
38+
size:
39+
type: string
40+
path:
41+
type: string
42+
definition:
43+
title: 'Definition'
44+
type: [string, array]
45+
items:
46+
type: object
47+
properties:
48+
label:
49+
type: [string, array, object]
50+
icon_path:
51+
type: string
52+
title: "Icons path"
53+
description: "Path to icons"
54+
orientation:
55+
title: Orientation
56+
type: string
57+
description: 'Orientation of the list.'
58+
enum:
59+
- vertical
60+
- horizontal
61+
'meta:enum':
62+
vertical: Vertical
63+
horizontal: Horizontal
64+
bordered:
65+
title: Bordered
66+
type: boolean
67+
description: 'Adds a border to the description list.'
68+
col_classes:
69+
title: 'Column classes'
70+
type: string
71+
description: 'Classes for the columns.'
72+
title_attributes:
73+
title: 'Title attributes'
74+
type: Drupal\Core\Template\Attribute
75+
wrapper_attributes:
76+
title: Attributes
77+
type: Drupal\Core\Template\Attribute

‎components/description_list/description_list.preview-default.story.yml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
name: Preview
2+
slots:
3+
title: 'This is the title of this description list.'
4+
props:
5+
items:
6+
-
7+
term:
8+
-
9+
label: 'Single label with icon'
10+
icon:
11+
name: 'geo-alt-fill'
12+
definition: 'Description of first term text goes here.'
13+
-
14+
term:
15+
-
16+
label: 'First label without icon'
17+
-
18+
label: 'Second label'
19+
icon:
20+
name: 'upload'
21+
definition: 'Description of second term text goes here.'
22+
-
23+
term:
24+
-
25+
label:
26+
-
27+
'#markup': 'A label with <em>some</em> markup.'
28+
definition:
29+
-
30+
label: 'First description of third term text goes here.'
31+
-
32+
label: 'Second description of third term text goes here.'
33+
-
34+
term:
35+
-
36+
label: 'Custom icon size'
37+
icon:
38+
name: calendar-x
39+
size: xl
40+
definition: 'This is a bigger icon.'
41+
-
42+
term: 'A single term without icon.'
43+
definition: 'Yet another definition text.'
44+
orientation: horizontal

‎components/description_list/description_list.twig‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{#
2+
/**
3+
* @file
4+
* Description list component.
5+
*/
6+
#}
7+
8+
{% set _bcl_icon_path = file_url(get_theme_path('oe_bootstrap_theme') ~ '/assets/icons/bcl-default-icons.svg') %}
9+
{% set _icon_path = icon_path|default(_bcl_icon_path) %}
10+
11+
{% set _items = [] %}
12+
{% for item in items %}
13+
{% set _terms = [] %}
14+
{% set item_terms = item.term is iterable ? item.term : [item.term] %}
15+
{% for term in item_terms %}
16+
{% set _term = term is iterable ? term : {'label': term} %}
17+
18+
{% if _term.icon is defined and _term.icon %}
19+
{% set _icon = _term.icon is iterable ? _term.icon : {'name': _term.icon} %}
20+
{% set _term = _term|merge({
21+
'icon': {'size': 'xs', 'path': _icon_path}|merge(_icon)
22+
}) %}
23+
{% endif %}
24+
25+
{% set _terms = _terms|merge([_term]) %}
26+
{% endfor %}
27+
28+
{% set _items = _items|merge([item|merge({'term': _terms})]) %}
29+
{% endfor %}
30+
31+
{% include '@oe-bcl/description-list' with {
32+
title: title,
33+
title_tag: title_tag|default('h2'),
34+
title_attributes: title_attributes,
35+
items: _items,
36+
variant: orientation,
37+
bordered: bordered,
38+
col_classes: col_classes,
39+
attributes: wrapper_attributes,
40+
} %}

‎composer.json‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
"cweagans/composer-patches": "^1.7",
1111
"drupal/core": "^10.3 || ^11",
1212
"drupal/file_link": "^2.2",
13-
"drupal/ui_patterns": "^1.10",
14-
"drupal/ui_patterns_settings": "^2.3",
13+
"drupal/ui_patterns": "^2.0",
14+
"drupal/ui_patterns_settings": "3.0.x-dev",
1515
"openeuropa/ecl-twig-loader": "^4.0"
1616
},
1717
"require-dev": {
@@ -54,20 +54,23 @@
5454
"composer-exit-on-patch-failure": true,
5555
"enable-patching": true,
5656
"installer-paths": {
57-
"build/core": ["type:drupal-core"],
58-
"build/profiles/contrib/{$name}": ["type:drupal-profile"],
59-
"build/modules/contrib/{$name}": ["type:drupal-module"],
60-
"build/themes/contrib/{$name}": ["type:drupal-theme"]
57+
"build/core": [
58+
"type:drupal-core"
59+
],
60+
"build/profiles/contrib/{$name}": [
61+
"type:drupal-profile"
62+
],
63+
"build/modules/contrib/{$name}": [
64+
"type:drupal-module"
65+
],
66+
"build/themes/contrib/{$name}": [
67+
"type:drupal-theme"
68+
]
6169
},
6270
"drupal-scaffold": {
6371
"locations": {
6472
"web-root": "./build"
6573
}
66-
},
67-
"patches": {
68-
"drupal/ui_patterns_settings": {
69-
"Case mismatch between loaded and declared class names @see https://www.drupal.org/project/ui_patterns_settings/issues/3508198": "https://www.drupal.org/files/issues/2025-02-21/3508198-case-mismatch.patch"
70-
}
7174
}
7275
},
7376
"config": {

‎includes/pattern.inc‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -59,39 +59,6 @@ function oe_bootstrap_theme_preprocess_pattern_offcanvas(array &$variables): voi
5959
$variables['offcanvas_id'] = $variables['attributes']['id'] ?? Html::getUniqueId('bcl_offcanvas');
6060
}
6161

62-
/**
63-
* Implements hook_preprocess_HOOK() for description list pattern.
64-
*/
65-
function oe_bootstrap_theme_preprocess_pattern_description_list(&$variables) {
66-
// Multiple terms can be passed for each item. Process all the entries to
67-
// add path and size to icons, if not yet specified.
68-
foreach ($variables['items'] as &$item) {
69-
// Allow to pass a single term, without forcing users to pass an array with
70-
// the "label" key in it. This covers for a bug in the BCL pattern.
71-
if (!is_array($item['term'])) {
72-
$item['term'] = [
73-
['label' => $item['term']],
74-
];
75-
continue;
76-
}
77-
78-
foreach ($item['term'] as &$term) {
79-
if (is_array($term) && !empty($term['icon'])) {
80-
// If the icon is not an array, the icon name has been passed.
81-
if (!is_array($term['icon'])) {
82-
$term['icon'] = [
83-
'name' => $term['icon'],
84-
];
85-
}
86-
$term['icon'] += [
87-
'size' => 'xs',
88-
'path' => $variables['bcl_icon_path'],
89-
];
90-
}
91-
}
92-
}
93-
}
94-
9562
/**
9663
* Implements hook_preprocess_HOOK().
9764
*/

‎modules/oe_bootstrap_theme_helper/oe_bootstrap_theme_helper.info.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ dependencies:
77
- drupal:responsive_image
88
- ui_patterns:ui_patterns
99
- ui_patterns:ui_patterns_library
10-
- ui_patterns_settings:ui_patterns_settings
10+
- ui_patterns:ui_patterns_legacy
1111
config_devel:
1212
install:
1313
- image.style.oe_bootstrap_theme_medium_no_crop

‎modules/oe_bootstrap_theme_helper/oe_bootstrap_theme_helper.services.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ services:
66
- { name: twig.loader, priority: -100 }
77
oe_bootstrap_theme_helper.twig_extension:
88
class: Drupal\oe_bootstrap_theme_helper\TwigExtension\TwigExtension
9-
arguments: ['@language_manager', '@twig', '@renderer']
9+
arguments: ['@language_manager', '@twig', '@renderer', '@extension.list.theme']
1010
tags:
1111
- { name: twig.extension }

0 commit comments

Comments
 (0)