Update region.js - Proposal for flags empty and raw

[34638a]

Added proposal parameters for a variance in the return state of the region block helper.

empty: When the empty flag is truthy, if there is no content currently available for the named region; then return a empty string instead of the normal div wrapper.

raw: When the raw flag is truthy, omit the normal div wrapper when returning the region content.

What? Why?

Because empty region blocks add extra HTML into rendered content resulting in the CSS for selectors needing to pass through a additional div before they can trigger. Example of :empty selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

How was it tested?

Not tested due to no testing protocol found in repo.

---

cc @bigcommerce/storefront-team

[34638a]

Added proposal parameters for a variance in the return state of the region block helper.

empty: When the empty flag is truthy, if there is no content currently available for the named region; then return a empty string instead of the normal div wrapper.

raw: When the raw flag is truthy, omit the normal div wrapper when returning the region content.

What? Why?

Because empty region blocks add extra HTML into rendered content resulting in the CSS for selectors needing to pass through a additional div before they can trigger. Example of :empty selector. https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

How was it tested?

Not tested due to no testing protocol found in repo.

cc @bigcommerce/storefront-team

Amendment: Testing protocol using log and rendered output

{{! Optional prerequisite for for this testing protocol }}
{{! -1: Bind the theme in a theme editor such that a region named "test" is available. }}
{{! -2: Place any arbitrary content within the region as a text node. Recommended using "Hello World" as content. }}
{{! -3. Save and publish the theme and bind local stencil environment to the published theme on the test store as the rendered content target. }}
{{{region name="test"}}} {{! Renders '<div data-content-region="test">...content here...</div>' }}
{{! Log tests}}
{{log (region name="test")}} {{! SafeString { string: '<div data-content-region="test">...content here...</div>' } }}
{{log (region name="test" empty=true)}} {{! '...content here...' or '' if "test" is empty / not specified }}
{{log (region name="test" raw=true)}} {{! SafeString { string: '...content here...' }}
{{log (region name="test" empty=true raw=true)}} {{! '...content here...' }} {{! << Comment: This output is not wrapped in a "SafeString" because the 'empty' flag will take precedence in the event that the content for 'region name="test"' is empty }}

[34638a]

Secondary Comments, a specific usecase has come up for the empty and raw flags.
When rendering a template, if there is no content in a {{region}} the region will resolve to falsey if the region has no defined content when the empty or raw flags are set, meaning that a region can contain a fallback by using:

{{#if (region name="test" raw=true)}}
    {{{region name="test" raw=true}}}{{!-- I want the inner HTML of the region --}}
{{else}}
    {{log 'Region not defined, draw fallback here'}}
{{/if}}