[Twig] Resolving boolean as variant keys

[smnandre]

After some "back and forth", we agreed on the following behaviour. I hope this will match your needs :)

This PR allows users to pass real boolean when calling the component, to match string-boolean defined in the CVA definition.

Based on the work of @kbond in #1647 to fix #1614

{# templates/components/Button.html.twig #}

{% props color = 'blue', giant = false %}
{% set button = cva({
  base: 'button',
  variants: {
      color: {
          blue: 'btn-blue',
          green: 'btn-red',
      },
      giant: {
          true: 'btn-giant',
      }
  }
}) %}

<button class="{{ button.apply({color, giant}, attributes.render('class')) }}">
   {{ label }}
</button>

Then the 3 following calls should be equivalent

{# String value #}
<twig:Button color="blue" giant="true"  label="Save" />

{# Boolean value #}
<twig:Button color="blue" giant="{{ true }}"  label="Save" />

{# Boolean expression #}
<twig:Button color="blue" giant="{{ 2 > 1 }}"  label="Save" />

[kbond]

Can you add a test that proves "false" works as well?

[Kocal]

Perfect 👀

[kbond]

Thank you Simon.

[cavasinf]

Did you test for compoundVariants and defaultVariants with 'true' or true value ?

Like:

{% set button = cva({
  base: 'button',
  variants: {
      color: {
          blue: 'btn-blue',
          green: 'btn-red',
      },
      disabled: {
          true: 'disabled',
      }
  },
  compoundVariants: [
      // Applied via:
      //   `button({ color: 'blue', disabled: true })`
      {
          color: 'blue',
          disabled: 'true', // <-- This one 
          class: 'btn-outline-secondary',
      },
  ],
  defaultVariants: {
      disabled: 'false', // <-- This one 
  }
}) %}