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

[34638a]

Proposal for flag to disable default div wrapping behaviour for region handlebars object when the injected content is or is not present. This flag is a modifier is proposed for the purpose of allowing post render processes to recognise the non-existence of content and act accordingly, without additional processing requirements in handlebars or on client.

For example, with the flag, CSS can be constructed with a parent container to dynamically reframe the region container and adjust accordingly all on client without JS. In the below example screenshot, you will be able to see how the content appears when the implied action based off the CSS is to not display the child-5 region because the content is empty.

Context, anything within the template html tag below represents data created within the current theme editor for a given region: (note only regions child-1 to child-3 have content provided by the editor utility)

<template for-region="child-1">
<p>This will show up - 1</p>
</template>

<template for-region="child-2">
<p>This will show up - 2</p>
</template>

<template for-region="child-3">
<p>This will show up - 3</p>
</template>

Template

<div id="parent" class="flex flex-row border divide-x *:p-4">
    {{region name="child-1" unwrapped=true}}
    {{region name="child-2" unwrapped=false}}
    {{region name="child-3" unwrapped=true}}
    {{region name="child-4" unwrapped=true}}
    {{region name="child-5"}}
</div>

Rendered Output

<div id="parent" class="flex flex-row border divide-x *:p-4">
    <p>This will show up - 1</p>
    <div data-content-region="child-2">
        <p>This will show up - 2</p>
    </div>
    <p>This will show up - 3</p>
    <div data-content-region="child-5"></div>
</div>

---

cc @bigcommerce/storefront-team

[34638a]

Hi @jairo-bc

Please enjoy another PR for consideration.

• Jordan