wingsuit-designsystem / wingsuit

Twig for Storybook
GNU General Public License v2.0
91 stars 16 forks source link

Pattern twig function not respecting variant #172

Closed jowan closed 3 years ago

jowan commented 3 years ago

Describe the bug

When I pass a variant to the pattern twig function it is ignored. It does work with pattern_preview though.

To Reproduce

Use both pattern and pattern_preview in a template with a variant and compare results.

Expected behavior

pattern twig function should respect variant and load what ever settings are bundled in that variant.

Screenshots

Screen shot of rendered template:

image

Additional context

Here is my template, calling both pattern and pattern preview:

<div id="ac-{{ pid }}" class="accordion">
  {% for link in links %}
    {% set vars = {
      "pid": pid,
      "aiid": link.aiid,
      "label": link.label,
      "content": link.content,
    } %}
    {{ pattern('bs_accordion_item', vars, 'aci_c') }}
    {{ pattern_preview('bs_accordion_item', vars, 'aci_c') }}
  {% endfor %}
</div>

And here is my sub template's (the one being called above) wingsuit.yml:

bs_accordion_item:
  namespace: "Molecules/TM - Bootstrap"
  use: "@molecules/tm-bs/accordion-item/accordion-item.twig"
  label: Accordion Item
  description: A collapsible accordion item without javascript.
  fields:
    label:
      type: text
      label: Label
      description: The accordion item label.
      preview:
        faker: lorem.word
    content:
      type: text
      label: Content
      description: The collapsed content.
      preview:
        faker: lorem.paragraph
    aiid:
      type: text
      label: Item ID
      description: ID of the accordion-item
      preview:
        faker: lorem.slug
  settings:
    pid:
      type: textfield
      label: Parent ID
      description: ID of the parent
    toggle:
      type: select
      label: Toggle
      description: The icon used for collapse.
      options:
        sign: Sign
        chevron: Chevron
    content_class:
      type: textfield
      label: Content class
      description: Content class
    content_attributes:
      type: attributes
      label: Content attributes
      description: Content attributes
    link_attributes:
      type: attributes
      label: Link attributes
      description: Link attributes
    link_class:
      type: textfield
      label: Link class
      description: Link class
  variants:
    __default:
      label: Default
      description: Default
    aci_a:
      label: Version A
      description: Version A
      settings:
        toggle: chevron
        link_class: card-header
        content_class: card-body
    aci_b:
      label: Version B
      description: Version B
      settings:
        toggle: sign
        link_class: accordion-button
        content_class: accordion-body
    aci_c:
      label: Version C
      description: Version C
      settings:
        toggle: sign
        link_class: aci-c-link
        content_class: aci-c-content

I think that pattern(patternID, vars, variantID) should apply my variant here, which just contains some classes.

Thanks for your help :)

jowan commented 3 years ago

Actually, the pattern_preview() function in TwingRenderer.js does seem to do the trick, so I just cloned that and replaced the pattern function. From:

    this.environment.addFunction(new TwingFunction('pattern', _twigRenderEngine.renderPattern));
    /**
     * Naughty hack, just cloning pattern preview here, as pattern() not working as expected.
     */
    this.environment.addFunction(new TwingFunction('pattern', function (patternId) {
      var variables = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var variantId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _Pattern["default"].DEFAULT_VARIANT_NAME;
      return new Promise(function (resolve) {
        (0, _twigRenderEngine.renderPatternPreview)(patternId, variables, variantId).then(function (output) {
          resolve(output);
        });
      });
    }));

Now I can correctly use {{ pattern('bs-accordion-item', vars, variant) }} and export to Drupal, and all is good.

christianwiedemann commented 3 years ago

Hi it is fixed in 1.1.0-alpha.1. Thanks for reporting.

jowan commented 3 years ago

Great!

jowan commented 3 years ago

Confirmed working in 1.1.0-alpha.1 - thanks for the fix