Clean class

lib/filters/add_class/definition.js

@@ -0,0 +1,40 @@
+/**
+ * @file The safe_join filter
+ *
+ * Docs for TwigExtension::safeJoin (Drupal 9.3.x):
+ *
+ * ```
+ * new TwigFilter('safe_join',
+ *   [$this, 'safeJoin'],
+ *   [
+ *     'needs_environment' => TRUE,
+ *     'is_safe' => ['html']
+ *   ]
+ * )
+ * ```
+ *
+ * ```
+ * Joins several strings together safely.
+ *
+ * @param \Twig\Environment $env
+ *   A Twig Environment instance.
+ * @param mixed[]|\Traversable|null $value
+ *   The pieces to join.
+ * @param string $glue
+ *   The delimiter with which to join the string. Defaults to an empty string.
+ *   This value is expected to be safe for output and user provided data
+ *   should never be used as a glue.
+ *
+ * @return string
+ *   The strings joined together.
+ * ```
+ */
+
+export const name = 'add_class';
+
+export const options = {
+  needs_environment: true,
+  is_safe: ['html'],
+};
+
+export const acceptedArguments = [{ name: 'className', defaultValue: '' }];

lib/filters/add_class/twing.js

@@ -0,0 +1,21 @@
+import { newTwingFilter } from '../../helpers/twing.js';
+import { name, options, acceptedArguments } from './definition.js';
+
+function surround(value, className) {
+  if (Array.isArray(className)) {
+    className = className.join(' ');
+  }
+  return `<div class="${className}">${value}</div>`;
+}
+export function callable(value, clasName) {
+  if (typeof value === 'object') {
+    const output = [];
+    Object.values(value).forEach((value) => {
+      output.push(surround(value, clasName));
+    });
+    return output.join(' ');
+  }
+  return surround(value, clasName);
+}
+
+export default newTwingFilter(name, callable, options, acceptedArguments);

lib/filters/set_attribute/definition.js

@@ -0,0 +1,11 @@
+export const name = 'set_attribute';
+
+export const options = {
+  needs_environment: true,
+  is_safe: ['html'],
+};
+
+export const acceptedArguments = [
+  { name: 'attributeName', defaultValue: '' },
+  { name: 'attributeValue', defaultValue: '' },
+];

lib/filters/set_attribute/twing.js

@@ -0,0 +1,18 @@
+import { newTwingFilter } from '../../helpers/twing.js';
+import { name, options, acceptedArguments } from './definition.js';
+
+function surround(value, attributeName, attributeValue) {
+  return `<div ${attributeName}="${attributeValue}">${value}</div>`;
+}
+export function callable(value, attributeName, attributeValue) {
+  if (typeof value === 'object') {
+    const output = [];
+    Object.values(value).forEach((value) => {
+      output.push(surround(value, attributeName, attributeValue));
+    });
+    return output.join(' ');
+  }
+  return surround(value, attributeName, attributeValue);
+}
+
+export default newTwingFilter(name, callable, options, acceptedArguments);

lib/filters/twing.js

@@ -4,6 +4,8 @@ import cleanIdFilter from './clean_id/twing.js';
 import drupalEscapeFilter from './drupal_escape/twing.js';
 import formatDateFilter from './format_date/twing.js';
 import placeholderFilter from './placeholder/twing.js';
+import addClassFilter from './add_class/twing.js';
+import setAttributeFilter from './set_attribute/twing.js';
 import renderFilter from './render/twing.js';
 import safeJoinFilter from './safe_join/twing.js';
 import {
@@ -18,7 +20,9 @@ import withoutFilter from './without/twing.js';
 
 const filters = [
   cleanClassFilter,
+  setAttributeFilter,
   cleanIdFilter,
+  addClassFilter,
   drupalEscapeFilter,
   formatDateFilter,
   placeholderFilter,

tests/Twing/filters/add_class.js

@@ -0,0 +1,31 @@
+import test from 'ava';
+import { setupTwingBefore, renderTemplateMacro } from '#twing-fixture';
+
+test.before(setupTwingBefore);
+
+const template = `{{ content|add_class("sample-class") }}`;
+
+test('Add class to simple content', renderTemplateMacro, {
+  template,
+  data: {
+    content: 'Inner content',
+  },
+  expected: '<div class="sample-class">Inner content</div>',
+});
+
+test('Add class to content array', renderTemplateMacro, {
+  template,
+  data: {
+    content: ['Inner content', 'Inner content2'],
+  },
+  expected:
+    '<div class="sample-class">Inner content</div> <div class="sample-class">Inner content2</div>',
+});
+
+test('Add array class to simple content', renderTemplateMacro, {
+  template: `{{ content|add_class(["sample-class" , "sample-class2"]) }}`,
+  data: {
+    content: 'Inner content',
+  },
+  expected: '<div class="sample-class sample-class2">Inner content</div>',
+});

tests/Twing/filters/set_attribute.js

@@ -0,0 +1,14 @@
+import test from 'ava';
+import { setupTwingBefore, renderTemplateMacro } from '#twing-fixture';
+
+test.before(setupTwingBefore);
+
+const template = `{{ content|set_attribute('role', "xxx") }}`;
+
+test('set attribute to simple content', renderTemplateMacro, {
+  template,
+  data: {
+    content: 'Inner content',
+  },
+  expected: '<div role="xxx">Inner content</div>',
+});