Feat(web-twig): Collapse twig implementation #DS-275

packages/web-twig/src/Resources/components/Collapse/Collapse.twig

@@ -0,0 +1,27 @@
+{# API #}
+{%- set props = props | default([]) -%}
+{%- set _class = props.class | default(null) -%}
+{%- set _id = props.id -%}
+{%- set _breakpoint = props.breakpoint -%}
+{%- set _elementType = (props.elementType is defined) ? props.elementType : 'div' -%}
+
+{# Class names #}
+{%- set _rootClassName = _spiritClassPrefix ~ 'Collapse' -%}
+{%- set _contentClassName = _spiritClassPrefix ~ 'Collapse__content' -%}
+
+{# Attributes #}
+{%- set _idAttr = _id ? 'id=' ~ _id ~ '' : null -%}
+{%- set _breakpointAttr = _breakpoint ? 'data-breakpoint=' ~ _breakpoint ~ '' : null -%}
+
+{# Miscellaneous #}
+{%- set _classNames = [ _rootClassName, _class ] -%}
+
+<{{ _elementType }}
+    {{ _idAttr }}
+    {{ _breakpointAttr }}
+    {{ classProp(_classNames) }}
+>
+    <{{ _elementAttr }} class="{{ _contentClassName }}">
+        {%- block content %}{% endblock %}
+    </{{ _elementAttr }}>
+</{{ _elementType }}>

packages/web-twig/src/Resources/components/Collapse/README.md

@@ -0,0 +1,87 @@
+# Collapse
+
+This is Twig implementation of the [Collapse] component.
+
+Basic example usage:
+
+```html
+<button type="button" role="button" data-toggle="collapse" data-target="CollapseExample">trigger</button>
+<div id="CollapseExample" class="Collapse">
+  <div class="Collapse__content">content</div>
+</div>
+```
+
+Usage with link:
+
+```html
+<a role="button" href="javascript:void(0)" data-toggle="collapse" data-target="CollapseExample"> trigger </a> ...
+```
+
+Open on load example (by aria-expanded):
+
+```html
+<button ... aria-expanded="true">trigger</button> ...
+```
+
+Open on load example (by class):
+
+```html
+<button ... class="is-expanded">trigger</button> ...
+```
+
+Responsive usage for tablet
+
+```html
+...
+<button ... class="d-tablet-none">trigger</button>
+<div id="CollapseExample" class="Collapse" data-breakpoint="tablet">
+  <div class="Collapse__content">...</div>
+</div>
+```
+
+Hide button when collapse
+
+```html
+<button ... data-more>trigger</button> ...
+```
+
+Without lexer:
+
+```twig
+{% embed "@spirit/collapse.twig" with { props: {
+    id: 'collapse-example',
+    breakpoint: 'tablet',
+    class: 'collapse-custom-class',
+}} %}
+    {% block content %}
+        Collapse content
+    {% endblock %}
+{% endembed %}
+```
+
+You can add any custom trigger like `<button>` or `<a>` but it is necessary to add `data-toggle="collapse"`, `data-target="<id>"`
+attributes to register trigger events.
+
+## API
+
+| Prop name     | Type     | Default | Required | Description                              |
+| ------------- | -------- | ------- | -------- | ---------------------------------------- |
+| `id`          | `string` | -       | yes      | Collapse ID                              |
+| `breakpoint`  | `string` | -       | no       | Breakpoint level [mobile,tablet,desktop] |
+| `class`       | `string` | `null`  | no       | Custom CSS class                         |
+| `elementType` | `string` | `'div'` | no       | Custom element type                      |
+
+## Trigger attributes
+
+| Prop name       | Type      | Default    | Required | Description                         |
+| --------------- | --------- | ---------- | -------- | ----------------------------------- |
+| `data-toggle`   | `string`  | `collapse` | yes      | Iterable selector                   |
+| `data-target`   | `string`  | -          | yes      | Target selector                     |
+| `data-more`     | `boolean` | -          | no       | For hide on collapse as more button |
+| `aria-expanded` | `string`  | -          | no       | Aria expanded state (auto)          |
+| `aria-controls` | `string`  | -          | no       | Aria controls state (auto)          |
+
+Other necessary attributes are toggled automatically, like `aria-controls` and `aria-expanded` when component is loaded
+or width of window is changed. There can be several triggers, the same rules apply to each.
+
+[collapse]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/Modal

packages/web-twig/src/Resources/twig-components/collapse.twig

@@ -0,0 +1 @@
+{% extends '@spirit/Collapse/Collapse.twig' %}