feat: region.js - Proposal for flag unwrapped accepting boolean truthy input

helpers/region.js

@@ -2,18 +2,46 @@
 
 const factory = globals => {
     return function(params) {
-        let regionId = params.hash.name;
-        let regionTranslation = params.hash.translation;
-        let contentRegions = globals.getContent();
+        const regionId = params.hash.name;
+        const regionTranslation = params.hash.translation;
+        const contentRegions = globals.getContent();
 
-        if (!contentRegions) {
+        const applyModifierOrDefaultValue = (modifierVariable, defaultValue) => {
+            if (typeof modifierVariable === 'undefined') {
+                return defaultValue;
+            }
+            return !!modifierVariable; // Convert to boolean using truthiness.
+        }
+
+        const shouldUnwrap = applyModifierOrDefaultValue(params.hash.unwrapped, false);
+
+        if (!contentRegions) { // If no regions at all, return empty string. Short circuit escape.
             return '';
         }
-        const translationDataAttribute = regionTranslation ? ` data-content-region-translation="${regionTranslation}"` : '';
 
-        const content = `<div data-content-region="${regionId}"${translationDataAttribute}>${contentRegions[regionId] || ''}</div>`;
+        // Construct the content to be returned as a string containing raw HTML.
+        // Trim the string to remove any leading or trailing whitespace.
+        const drawableContent = (contentRegions[regionId] || '').trim();
+
+
+        let outputContent;
+        if (shouldUnwrap) {
+            // Return the content without the wrapper div.
+            outputContent = drawableContent;
+        } else {
+
+            const wrapperDrawnAttributes = Object.values({
+                "region_identifier": `data-content-region="${regionId}"`,
+                "translation_data": regionTranslation && `data-content-region-translation="${regionTranslation}"`
+                // More attributes can be added here if needed.
+            }).filter(Boolean).join(' ');
+
+            // Create the wrapper div with the regionId and translation data attribute.
+            // This is the default behavior.
+            outputContent = `<div ${wrapperDrawnAttributes}>${drawableContent}</div>`;
+        }
 
-        return new globals.handlebars.SafeString(content);
+        return new globals.handlebars.SafeString(outputContent);
     };
 };
 

spec/helpers/region.js

@@ -26,7 +26,7 @@ describe('Region Helper', () => {
         done();
     });
 
-    it('should return an empty container if using empty content context', done => {
+    it('should return an empty container if using empty content context: Wrapped', done => {
         runTestCases([
             {
                 input: '{{region name="banner-bottom" translation="i18n.RegionName.TestingTranslation"}}',
@@ -36,7 +36,7 @@ describe('Region Helper', () => {
         ], done);
     });
 
-    it('should return an empty container if no matching region on context object', done => {
+    it('should return an empty container if no matching region on context object: Wrapped', done => {
         runTestCases([
             {
                 input: '{{region name="banner-bottom" translation="i18n.RegionName.TestingTranslation"}}',
@@ -45,7 +45,7 @@ describe('Region Helper', () => {
         ], done);
     });
 
-    it('should return without region translation data attribute if no translation is provided', done => {
+    it('should return without region translation data attribute if no translation is provided: Wrapped', done => {
         runTestCases([
             {
                 input: '{{region name="banner-bottom"}}',
@@ -54,12 +54,53 @@ describe('Region Helper', () => {
         ], done);
     });
 
-    it('should return Hello World', done => {
+    it('should return Hello World: Wrapped', done => {
         runTestCases([
             {
                 input: '{{region name="banner-top" translation="i18n.RegionName.TestingTranslation"}}',
                 output: '<div data-content-region="banner-top" data-content-region-translation="i18n.RegionName.TestingTranslation">hello world</div>',
             },
         ], done);
     });
+
+    // -------------------------------------------------
+    // Unwrapped tests
+    // -------------------------------------------------
+
+    it('should return an empty container if using empty content context: Unwrapped', done => {
+        runTestCases([
+            {
+                input: '{{region name="banner-bottom" translation="i18n.RegionName.TestingTranslation" unwrapped=true}}',
+                output: '',
+                renderer: buildRenderer(),
+            },
+        ], done);
+    });
+
+    it('should return an empty container if no matching region on context object: Unwrapped', done => {
+        runTestCases([
+            {
+                input: '{{region name="banner-bottom" translation="i18n.RegionName.TestingTranslation" unwrapped=true}}',
+                output: '',
+            },
+        ], done);
+    });
+
+    it('should return without region translation data attribute if no translation is provided: Unwrapped', done => {
+        runTestCases([
+            {
+                input: '{{region name="banner-bottom" unwrapped=true}}',
+                output: '',
+            },
+        ], done);
+    });
+
+    it('should return Hello World: Unwrapped', done => {
+        runTestCases([
+            {
+                input: '{{region name="banner-top" translation="i18n.RegionName.TestingTranslation" unwrapped=true}}',
+                output: 'hello world',
+            },
+        ], done);
+    });
 });