Feat(web-twig): Collapse Twig properties update, tests, documentation

lmc-eu · Dec 2, 2022 · 3bdf57d · 3bdf57d
1 parent d3c8093
commit 3bdf57d
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 21 deletions.
diff --git a/packages/web-twig/src/Resources/components/Collapse/Collapse.twig b/packages/web-twig/src/Resources/components/Collapse/Collapse.twig
@@ -3,6 +3,7 @@
 {%- set _class = props.class | default(null) -%}
 {%- set _id = props.id -%}
 {%- set _breakpoint = props.breakpoint -%}
+{%- set _parent = props.parent -%}
 {%- set _elementType = (props.elementType is defined) ? props.elementType : 'div' -%}
 
 {# Class names #}
@@ -12,16 +13,18 @@
 {# Attributes #}
 {%- set _idAttr = _id ? 'id=' ~ _id ~ '' : null -%}
 {%- set _breakpointAttr = _breakpoint ? 'data-breakpoint=' ~ _breakpoint ~ '' : null -%}
+{%- set _parentAttr = _parent ? 'data-parent=' ~ _parent ~ '' : null -%}
 
 {# Miscellaneous #}
 {%- set _classNames = [ _rootClassName, _class ] -%}
 
 <{{ _elementType }}
     {{ _idAttr }}
     {{ _breakpointAttr }}
+    {{ _parentAttr }}
     {{ classProp(_classNames) }}
 >
-    <{{ _elementAttr }} class="{{ _contentClassName }}">
+    <div class="{{ _contentClassName }}">
         {%- block content %}{% endblock %}
-    </{{ _elementAttr }}>
+    </div>
 </{{ _elementType }}>
diff --git a/packages/web-twig/src/Resources/components/Collapse/README.md b/packages/web-twig/src/Resources/components/Collapse/README.md
@@ -21,12 +21,6 @@ Open on load example (by aria-expanded):
 <Button {# … #} aria-expanded="true">Collapse trigger</Button> {# … #}
 ```
 
-Open on load example (by class):
-
-```twig
-<Button {# … #} class="is-expanded">Collapse trigger</Button> {# … #}
-```
-
 Responsive usage for tablet
 
 ```twig
@@ -59,12 +53,15 @@ 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                      |
+| Prop name     | Type     | Default | Required | Description                                                            |
+| ------------- | -------- | ------- | -------- | ---------------------------------------------------------------------- |
+| `id`          | `string` | -       | yes      | Collapse ID                                                            |
+| `breakpoint`  | `string` | -       | no       | Breakpoint level [mobile,tablet,desktop]                               |
+| `parent`      | `string` | -       | no       | A parent element selector that ensures that only one item is opened \* |
+| `class`       | `string` | `null`  | no       | Custom CSS class                                                       |
+| `elementType` | `string` | `'div'` | no       | Custom element type                                                    |
+
+(\*) Attribute for Accordion implementation
 
 ## Trigger attributes
 

diff --git a/...sts/__snapshots__/ComponentsSnapshotTest__test with data set collapseDefault.twig__1.html b/...sts/__snapshots__/ComponentsSnapshotTest__test with data set collapseDefault.twig__1.html
@@ -0,0 +1,6 @@
+<html><body>
+<button data-toggle="collapse" data-target="CollapseExample0" class="Button Button--primary Button--medium" type="button">Toggle</button>
+<div id="CollapseExample0" class="Collapse">
+    <div class="Collapse__content">Content    </div>
+</div>
+</body></html>
diff --git a/...ests/__snapshots__/ComponentsSnapshotTest__test with data set collapseOpened.twig__1.html b/...ests/__snapshots__/ComponentsSnapshotTest__test with data set collapseOpened.twig__1.html
@@ -0,0 +1,6 @@
+<html><body>
+<button data-toggle="collapse" data-target="CollapseExample1" aria-expanded="true" class="Button Button--primary Button--medium" type="button">Toggle</button>
+<div id="CollapseExample1" class="Collapse">
+    <div class="Collapse__content">Content    </div>
+</div>
+</body></html>
diff --git a/...napshots__/ComponentsSnapshotTest__test with data set collapseWithParentProp.twig__1.html b/...napshots__/ComponentsSnapshotTest__test with data set collapseWithParentProp.twig__1.html
@@ -0,0 +1,6 @@
+<html><body>
+<button data-toggle="collapse" data-target="CollapseExample2" class="Button Button--primary Button--medium" type="button">Toggle</button>
+<div id="CollapseExample2" data-parent="#testParentPropId" class="Collapse">
+    <div class="Collapse__content">Content    </div>
+</div>
+</body></html>
diff --git a/packages/web-twig/tests/components-fixtures/collapseDefault.twig b/packages/web-twig/tests/components-fixtures/collapseDefault.twig
@@ -0,0 +1,2 @@
+<Button data-toggle="collapse" data-target="CollapseExample0">Toggle</Button>
+<Collapse id="CollapseExample0">Content</Collapse>
diff --git a/packages/web-twig/tests/components-fixtures/collapseOpened.twig b/packages/web-twig/tests/components-fixtures/collapseOpened.twig
@@ -0,0 +1,2 @@
+<Button data-toggle="collapse" data-target="CollapseExample1" aria-expanded="true">Toggle</Button>
+<Collapse id="CollapseExample1">Content</Collapse>
diff --git a/packages/web-twig/tests/components-fixtures/collapseWithParentProp.twig b/packages/web-twig/tests/components-fixtures/collapseWithParentProp.twig
@@ -0,0 +1,2 @@
+<Button data-toggle="collapse" data-target="CollapseExample2">Toggle</Button>
+<Collapse id="CollapseExample2" parent="#testParentPropId">Content</Collapse>
diff --git a/packages/web/src/scss/components/Collapse/README.md b/packages/web/src/scss/components/Collapse/README.md
@@ -21,12 +21,6 @@ Open on load example (by aria-expanded):
 <button ... aria-expanded="true">trigger</button> ...
 ```
 
-Open on load example (by class):
-
-```html
-<button ... class="is-expanded">trigger</button> ...
-```
-
 Responsive usage for tablet
 
 ```html
@@ -68,7 +62,9 @@ There can be several triggers, the same rules apply to each.
 
 ## State classes
 
-The component provides auto toggle classes, like `.is-expanded` and `.is-collapsed` when triggered or initiated
+The component provides auto toggle attributes and classes, like `.is-open` when triggered or initiated.
+It also provides `.is-transitioning` class switching during animation. This means that `.Collapse.is-transitioning` during
+opening and `.Collapse.is-open.is-transitioning` during closing.
 
 ## JavaScript Plugin
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<Button data-toggle="collapse" data-target="CollapseExample0">Toggle</Button>
		<Collapse id="CollapseExample0">Content</Collapse>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<Button data-toggle="collapse" data-target="CollapseExample1" aria-expanded="true">Toggle</Button>
		<Collapse id="CollapseExample1">Content</Collapse>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<Button data-toggle="collapse" data-target="CollapseExample2">Toggle</Button>
		<Collapse id="CollapseExample2" parent="#testParentPropId">Content</Collapse>