Skip to content

Commit 50b6eee

Browse files
author
Evan Willhite
authored
Merge pull request #4 from drupal-pattern-lab/feature/extra-class
extra class code and readme update
2 parents 9c5b853 + 026dd9c commit 50b6eee

File tree

2 files changed

+40
-9
lines changed

2 files changed

+40
-9
lines changed

README.md

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,49 @@
11
# bem-twig-extension
2-
Twig function that inserts static classes into Pattern Lab but adds them to the attributes object in Drupal
2+
Twig function that inserts static classes into Pattern Lab but adds them to the Attributes object in Drupal
33

4-
## Usage
4+
## Usage (4 arguments)
55

6-
#### Simple block name:
7-
`<h1{{ bem('title') }}>`
6+
#### Simple block name (required argument):
7+
`<h1 {{ bem('title') }}>`
88

99
This creates:
1010

1111
`<h1 class="title">`
1212

13-
#### Block with modifiers (array allowing multiple modifiers):
14-
`<h1{{ bem('title', ({1: 'small', 2: 'red'})) }}>`
13+
#### Block with modifiers (optional array allowing multiple modifiers):
14+
`<h1 {{ bem('title', ['small', 'red']) }}>`
1515

1616
This creates:
1717

1818
`<h1 class="title title--small title--red">`
1919

20-
#### Element with modifiers and blockname:
21-
`<h1{{ bem('title', ({1: 'small', 2: 'red'}), 'card') }}>`
20+
#### Element with modifiers and blockname (optional):
21+
`<h1 {{ bem('title', ['small', 'red'], 'card') }}>`
2222

2323
This creates:
2424

2525
`<h1 class="card__title card__title--small card__title--red">`
26+
27+
#### Element with blockname, but no modifiers (optional):
28+
29+
`<h1 {{ bem('title', '', 'card') }}>`
30+
31+
This creates:
32+
33+
`<h1 class="card__title">`
34+
35+
#### Element with modifiers, blockname and extra classes (optional - in case you need non-BEM classes):
36+
37+
`<h1 {{ bem('title', ['small', 'red'], 'card', ['js-click', 'something-else']) }}>`
38+
39+
This creates:
40+
41+
`<h1 class="card__title card__title--small card__title--red js-click something-else">`
42+
43+
#### Element with extra classes only (optional):
44+
45+
`<h1 {{ bem('title', '', '', ['js-click']) }}>`
46+
47+
This creates:
48+
49+
`<h1 class="title js-click">`

bem.function.php

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
use Drupal\Core\Template\Attribute;
88

9-
$function = new Twig_SimpleFunction('bem', function ($context, $base_class, $modifiers = array(), $blockname = '') {
9+
$function = new Twig_SimpleFunction('bem', function ($context, $base_class, $modifiers = array(), $blockname = '', $extra = array()) {
1010
$classes = [];
1111

1212
// If using a blockname to override default class.
@@ -33,6 +33,13 @@
3333
}
3434
}
3535

36+
// If extra non-BEM classes are added.
37+
if (isset($extra) && is_array($extra)) {
38+
foreach ($extra as $extra_class) {
39+
$classes[] = $extra_class;
40+
};
41+
}
42+
3643
if (class_exists('Drupal')) {
3744
$attributes = new Attribute();
3845

0 commit comments

Comments
 (0)