added combined card-accordion component

[kevinpapst]

Description

Replaces #162

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• I updated the documentation (see here)
• I agree that this code will be published under the MIT license

[cavasinf]

Can we put that on top?
(part of me want that 😄)

[cavasinf]

I understand that the accordion component is scary and not easy to manipulate/use.
But isn't it more "Maintainers" friendly to use it?
The less duplicate code we have to maintain, the happier we are?

[cavasinf]

Still using blocks title and body.
I'll go like that:

{% set fullsize = true %}
{% extends '@Tabler/embeds/card.html.twig' %}
{% from '@Tabler/components/accordion.html.twig' import accordion %}

{% block box_class %}border-0{% endblock %}
{% block box_title %}{% endblock %}

{% set _accordionItem = {
    title: block('title') ?? '',
    body: block('body') ?? '',
    bodyClasses: '',
    options: {
        open: false,
        bodyExtraClass: 'border-top',
    }
} | merge(accordionItem ?? {}) %}

{% set _accordionOption = {} | merge(accordionOption ?? {}) %}

{% block box_body %}
    {{ accordion(
        [_accordionItem],
        _accordionOption
    ) }}
{% endblock %}

Used like that:

{% set item = {
    options : {
        open : true
    }
} %}
{% embed '@theme/embeds/collapsible.html.twig' with {accordionItem  : item} %}
    {% block title %}File permissions{% endblock %}
    {% block body %}
        .....
    {% endblock %}
{% endembed %}

Inside the doc, for accordionItem and accordionOption,
we can redirect users to the accordion doc at the specific object.

WDYT @kevinpapst?

[kevinpapst]

I'll give this a try later today ... full day of meetings.
Looks like a clever solution indeed, better than mine 😁

[kevinpapst]

Small adjustments applied, to simplify passing options.

    {% embed '@theme/embeds/collapsible.html.twig' with { boxtype: 'danger', border: false, open: true, flush: true } %}
        {% block title %}Foo{% endblock %}
        {% block body %}Bar{% endblock %}
    {% endembed %}

Can be reviewed @cavasinf