Skip to content

Commit bd11e1b

Browse files
author
Callin Mullaney
committed
refactor(theme): use bem helper for static BEM classes
1 parent 3583b8e commit bd11e1b

28 files changed

Lines changed: 124 additions & 142 deletions

‎templates/admin/admin-block-content.html.twig‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,20 +17,17 @@
1717
*/
1818
#}
1919
{%
20-
set classes = [
21-
'list-group',
22-
compact ? 'compact',
23-
]
20+
set classes = bem('list-group', [], '', [compact ? 'compact' : null])
2421
%}
2522
{% set admin_block_content_attributes = {
2623
class: classes,
2724
} %}
2825
{% if content %}
2926
<dl{{ add_attributes(admin_block_content_attributes) }}>
3027
{% for item in content %}
31-
<dt class="list-group__link">{{ item.link }}</dt>
28+
<dt{{ bem('link', [], 'list-group') }}>{{ item.link }}</dt>
3229
{% if item.description %}
33-
<dd class="list-group__description">{{ item.description }}</dd>
30+
<dd{{ bem('description', [], 'list-group') }}>{{ item.description }}</dd>
3431
{% endif %}
3532
{% endfor %}
3633
</dl>

‎templates/admin/admin-block.html.twig‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,16 @@
1313
* - attributes: HTML attributes for the containing div element.
1414
*/
1515
#}
16-
{%
17-
set classes = [
18-
'panel',
19-
]
20-
%}
2116
{% set admin_block_attributes = {
22-
class: classes,
17+
class: bem('panel'),
2318
} %}
2419
<div{{ add_attributes(admin_block_attributes) }}>
2520
{% if block.title %}
26-
<h3 class="panel__title">{{ block.title }}</h3>
21+
<h3{{ bem('title', [], 'panel') }}>{{ block.title }}</h3>
2722
{% endif %}
2823
{% if block.content %}
29-
<div class="panel__content">{{ block.content }}</div>
24+
<div{{ bem('content', [], 'panel') }}>{{ block.content }}</div>
3025
{% elseif block.description %}
31-
<div class="panel__description">{{ block.description }}</div>
26+
<div{{ bem('description', [], 'panel') }}>{{ block.description }}</div>
3227
{% endif %}
3328
</div>

‎templates/admin/config_translation_manage_form_element.html.twig‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@
1010
*
1111
*/
1212
#}
13-
<div class="translation-set clearfix">
14-
<div class="layout-column layout-column--half translation-set__source">
13+
<div{{ bem('translation-set', [], '', ['clearfix']) }}>
14+
<div{{ bem('source', [], 'translation-set', ['layout-column', 'layout-column--half']) }}>
1515
{{ element.source }}
1616
</div>
17-
<div class="layout-column layout-column--half translation-set__translated">
17+
<div{{ bem('translated', [], 'translation-set', ['layout-column', 'layout-column--half']) }}>
1818
{{ element.translation }}
1919
</div>
2020
</div>

‎templates/admin/form-element--new-storage-type.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
{%
2222
set classes = [
2323
errors ? 'form-item--error',
24-
variant ? variant ~ '__item'
24+
variant ? bem('item', [], variant)
2525
]
2626
%}
2727
{% set new_storage_type_attributes = {

‎templates/admin/locale-translation-update-info.html.twig‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313
* @see \Drupal\locale\Hook\LocaleThemeHooks::preprocessLocaleTranslationUpdateInfo()
1414
*/
1515
#}
16-
<div class="locale-translation-update__wrapper" tabindex="0" role="button">
17-
<span class="locale-translation-update__prefix visually-hidden">Show description</span>
16+
<div{{ bem('wrapper', [], 'locale-translation-update') }} tabindex="0" role="button">
17+
<span{{ bem('prefix', [], 'locale-translation-update', ['visually-hidden']) }}>Show description</span>
1818
{% if modules %}
1919
{% set module_list = modules|safe_join(', ') %}
20-
<span class="locale-translation-update__message">{% trans %}Updates for: {{ module_list }}{% endtrans %}</span>
20+
<span{{ bem('message', [], 'locale-translation-update') }}>{% trans %}Updates for: {{ module_list }}{% endtrans %}</span>
2121
{% elseif not_found %}
22-
<span class="locale-translation-update__message">
22+
<span{{ bem('message', [], 'locale-translation-update') }}>
2323
{%- trans -%}
2424
Missing translations for one project
2525
{%- plural not_found|length -%}
@@ -28,7 +28,7 @@
2828
</span>
2929
{% endif %}
3030
{% if updates or not_found %}
31-
<div class="locale-translation-update__details">
31+
<div{{ bem('details', [], 'locale-translation-update') }}>
3232
{% if updates %}
3333
<ul>
3434
{% for update in updates %}

‎templates/admin/status-report-counter.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@
99
* - severity: The severity of the counter.
1010
*/
1111
#}
12-
<span class="system-status-counter__status-icon system-status-counter__status-icon--{{ severity }}"></span>
12+
<span{{ bem('status-icon', [severity], 'system-status-counter') }}></span>
1313
<span>{{ amount }} {{ text }}</span>
1414
<a href="#{{ severity }}"><span class="visually-hidden">{{ text }} </span>{{ 'Details'|t }}</a>

‎templates/admin/status-report-general-info.html.twig‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,15 @@
3131
#}
3232

3333
<h2>{{ 'General System Information'|t }}</h2>
34-
<div class="system-status-general-info__item">
35-
<h3 class="system-status-general-info__item-title">{{ 'Drupal Version'|t }}</h3>
34+
<div{{ bem('item', [], 'system-status-general-info') }}>
35+
<h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'Drupal Version'|t }}</h3>
3636
{{ drupal.value }}
3737
{% if drupal.description %}
3838
{{ drupal.description }}
3939
{% endif %}
4040
</div>
41-
<div class="system-status-general-info__item">
42-
<h3 class="system-status-general-info__item-title">{{ 'Last Cron Run'|t }}</h3>
41+
<div{{ bem('item', [], 'system-status-general-info') }}>
42+
<h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'Last Cron Run'|t }}</h3>
4343
{{ cron.value }}
4444
{% if cron.run_cron %}
4545
{{ cron.run_cron }}
@@ -48,15 +48,15 @@
4848
{{ cron.description }}
4949
{% endif %}
5050
</div>
51-
<div class="system-status-general-info__item">
52-
<h3 class="system-status-general-info__item-title">{{ 'Web Server'|t }}</h3>
51+
<div{{ bem('item', [], 'system-status-general-info') }}>
52+
<h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'Web Server'|t }}</h3>
5353
{{ webserver.value }}
5454
{% if webserver.description %}
5555
{{ webserver.description }}
5656
{% endif %}
5757
</div>
58-
<div class="system-status-general-info__item">
59-
<h3 class="system-status-general-info__item-title">{{ 'PHP'|t }}</h3>
58+
<div{{ bem('item', [], 'system-status-general-info') }}>
59+
<h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'PHP'|t }}</h3>
6060
<h4>{{ 'Version'|t }}</h4> {{ php.value }}
6161
{% if php.description %}
6262
{{ php.description }}
@@ -67,8 +67,8 @@
6767
{{ php_memory_limit.description }}
6868
{% endif %}
6969
</div>
70-
<div class="system-status-general-info__item">
71-
<h3 class="system-status-general-info__item-title">{{ 'Database'|t }}</h3>
70+
<div{{ bem('item', [], 'system-status-general-info') }}>
71+
<h3{{ bem('item-title', [], 'system-status-general-info') }}>{{ 'Database'|t }}</h3>
7272
<h4>{{ 'Version'|t }}</h4>{{ database_system_version.value }}
7373
{% if database_system_version.description %}
7474
{{ database_system_version.description }}

‎templates/admin/status-report-grouped.html.twig‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@
2727
<h3{{ add_attributes(status_report_group_title_attributes) }}>{{ group.title }}</h3>
2828
{% for requirement in group.items %}
2929
{% set status_report_entry_attributes = {
30-
class: 'system-status-report__entry',
30+
class: bem('entry', [], 'system-status-report'),
3131
open: 'open',
3232
} %}
3333
<details{{ add_attributes(status_report_entry_attributes) }}>
3434
{%
3535
set summary_classes = [
36-
'system-status-report__status-title',
37-
group.type in ['warning', 'error'] ? 'system-status-report__status-icon system-status-report__status-icon--' ~ group.type
36+
bem('status-title', [], 'system-status-report'),
37+
group.type in ['warning', 'error'] ? bem('status-icon', group.type, 'system-status-report')
3838
]
3939
%}
4040
{% set status_report_summary_attributes = {
@@ -51,7 +51,7 @@
5151
{{ requirement.title }}
5252
</summary>
5353
{% set status_report_value_attributes = {
54-
class: 'system-status-report__entry__value',
54+
class: bem('entry__value', [], 'system-status-report'),
5555
} %}
5656
<div{{ add_attributes(status_report_value_attributes) }}>
5757
{{ requirement.value }}

‎templates/admin/status-report-page.html.twig‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@
1010
*/
1111
#}
1212
{% if counters|length == 3 %}
13-
{% set element_width_class = ' system-status-report-counters__item--third-width' %}
13+
{% set counter_item_modifiers = ['third-width'] %}
1414
{% elseif counters|length == 2 %}
15-
{% set element_width_class = ' system-status-report-counters__item--half-width' %}
15+
{% set counter_item_modifiers = ['half-width'] %}
1616
{% endif %}
17-
<div class="system-status-report-counters">
17+
<div{{ bem('system-status-report-counters') }}>
1818
{% for counter in counters %}
19-
<div class="system-status-report-counters__item{{ element_width_class }}">
19+
<div{{ bem('item', counter_item_modifiers|default([]), 'system-status-report-counters') }}>
2020
{{ counter }}
2121
</div>
2222
{% endfor %}

‎templates/admin/system-themes-page.html.twig‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
{% for theme_group in theme_groups %}
3333
{%
3434
set theme_group_classes = [
35-
'system-themes-list',
35+
bem('system-themes-list'),
3636
'system-themes-list-' ~ theme_group.state,
3737
'clearfix',
3838
]
@@ -42,7 +42,7 @@
4242
class: theme_group_classes,
4343
} %}
4444
<div{{ add_attributes(theme_group_wrapper_attributes) }}>
45-
<h2 class="system-themes-list__header">{{ theme_group.title }}</h2>
45+
<h2{{ bem('header', [], 'system-themes-list') }}>{{ theme_group.title }}</h2>
4646
{% for theme in theme_group.themes %}
4747
{%
4848
set theme_classes = [
@@ -60,14 +60,14 @@
6060
{% if theme.screenshot %}
6161
{{ theme.screenshot }}
6262
{% endif %}
63-
<div class="theme-info">
64-
<h3 class="theme-info__header">
63+
<div{{ bem('theme-info') }}>
64+
<h3{{ bem('header', [], 'theme-info') }}>
6565
{{- theme.name }} {{ theme.version -}}
6666
{% if theme.notes %}
6767
({{ theme.notes|safe_join(', ') }})
6868
{%- endif -%}
6969
</h3>
70-
<div class="theme-info__description">{{ theme.description }}</div>
70+
<div{{ bem('description', [], 'theme-info') }}>{{ theme.description }}</div>
7171
{# Display operation links if the theme is compatible. #}
7272
{% if theme.incompatible %}
7373
<div class="incompatible">{{ theme.incompatible }}</div>

0 commit comments

Comments
 (0)