fix: Rework logic for grid ordering in hero component

[remydenton]

Jira

http://vjira2:8080/browse/BDS-2079

Summary

Fixes a bug where hero reverseOrder prop does not work when imageValign is bottom

Details

I set out only to fix the original bug. However, I found the existing twig logic for hero to be pretty difficult to read, in part because there were a number of logic errors. For example:

{% set _isImageFirstOnMobile = (imageValign != 'bottom') or (imageValign == 'top') %}
{% set _isImageLastOnMobile = (imageValign != 'top') or (imageValign == 'bottom') %}

First, both of these statements are logically identical if you remove the second conditions (if something is "not bottom", you don't need to also check for whether it could be "top").

{% set _isImageFirstOnMobile = (imageValign != 'bottom') %}
{% set _isImageLastOnMobile = (imageValign != 'top') %}

Digging in further, what happens if the value of imageValign is middle? Well, both of the above statements evaluate to true, so you end up with image on mobile being both first and last. 🙃

So I ended up re-working a lot of the logic here. Hopefully it's equivalent to what was there before without the additional bugs.

How to test

Reproduce the bug

• Check out any other branch
• Edit docs-site/src/pages/pattern-lab/_patterns/02-components/hero/20-hero--reverse-order.twig
  Change imageValign to bottom
  View the pattern at /pattern-lab/?p=components-hero--reverse-order
  Note that the image is on the right (expected on the left).

Confirm the fix

• Check out the branch in this PR
• Confirm that the steps above give the expected results
• Confirm that all other scenarios give expected results

[sghoweri]

@remydenton yeah, I think these couple of quirks are side-effects from the original implementation allowing for desktop and mobile order to both be independently configured before getting consolidated at the 11th hour... 🤦‍♂

[sghoweri]

@remydenton see my comment about the (duplicate?) comment / variable block of code -- otherwise I'm good with these updates. Tested locally and everything still seems to be working as expected 👍

[sghoweri]

@remydenton reminder: make sure you add a label based on the SEMVER release type so things get automatically published to correct version (plus add the milestone release version so we can track what work is expected to go out in which release!)

[sghoweri]

PR was released with v2.21.0