Fix(web-twig): Add the missing isOpen prop to Collapse

lmc-eu · Jan 27, 2023 · e65e7d8 · e65e7d8
1 parent c1cdbec
commit e65e7d8
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 27 deletions.
diff --git a/packages/web-twig/src/Resources/components/Accordion/README.md b/packages/web-twig/src/Resources/components/Accordion/README.md
@@ -170,38 +170,38 @@ The Accordion itself consists of several components which cannot be used indepen
 
 | Prop name     | Type     | Default     | Required | Description                                                                                       |
 | ------------- | -------- | ----------- | -------- | ------------------------------------------------------------------------------------------------- |
-| `id`          | `string` | `null`      | optional | It depends on whether the "Stay open" functionality is used. If so, the id field is not required. |
 | `class`       | `string` | `null`      | no       | Additional class name                                                                             |
 | `elementType` | `string` | `'section'` | no       | Custom element type                                                                               |
+| `id`          | `string` | `null`      | optional | It depends on whether the "Stay open" functionality is used. If so, the id field is not required. |
 
 ### AccordionItem
 
 | Prop name     | Type     | Default     | Required | Description           |
 | ------------- | -------- | ----------- | -------- | --------------------- |
-| `id`          | `string` | `null`      | yes      | AccordionItem ID      |
 | `class`       | `string` | `null`      | no       | Additional class name |
 | `elementType` | `string` | `'article'` | no       | Custom element type   |
+| `id`          | `string` | `null`      | yes      | AccordionItem ID      |
 
 ### AccordionHeader
 
 | Prop name     | Type     | Default | Required | Description              |
 | ------------- | -------- | ------- | -------- | ------------------------ |
-| `id`          | `string` | `null`  | yes      | AccordionHeader ID       |
 | `class`       | `string` | `null`  | no       | Additional class name    |
-| `for`         | `string` | `null`  | yes      | AccordionContent ID      |
 | `elementType` | `string` | `'h3'`  | no       | Custom element type      |
-| `slot`        | `HTML`   | ``      | no       | Side slot in the header  |
+| `for`         | `string` | `null`  | yes      | AccordionContent ID      |
+| `id`          | `string` | `null`  | yes      | AccordionHeader ID       |
 | `isOpen`      | `string` | `false` | no       | Whether the item is open |
+| `slot`        | `HTML`   | ``      | no       | Side slot in the header  |
 
 ### AccordionContent
 
-| Prop name      | Type     | Default | Required | Description                                                                 |
-| -------------- | -------- | ------- | -------- | --------------------------------------------------------------------------- |
-| `id`           | `string` | `null`  | yes      | AccordionContent ID                                                         |
-| `class`        | `string` | `null`  | no       | Additional class name                                                       |
-| `labelledById` | `string` | `null`  | yes      | AccordionHeader ID                                                          |
-| `parent`       | `string` | `null`  | no       | A parent element selector that ensures that only one item is open at a time |
-| `isOpen`       | `string` | `false` | no       | Whether the item is open                                                    |
+| Prop name      | Type      | Default | Required | Description                                                                 |
+| -------------- | --------- | ------- | -------- | --------------------------------------------------------------------------- |
+| `class`        | `string`  | `null`  | no       | Additional class name                                                       |
+| `id`           | `string`  | `null`  | yes      | AccordionContent ID                                                         |
+| `isOpen`       | `boolean` | `false` | no       | If true, make the item open on page load                                    |
+| `labelledById` | `string`  | `null`  | yes      | AccordionHeader ID                                                          |
+| `parent`       | `string`  | `null`  | no       | A parent element selector that ensures that only one item is open at a time |
 
 On top of the API options, you can add `data-*` or `aria-*` attributes to
 further extend component's descriptiveness and accessibility. These attributes

diff --git a/packages/web-twig/src/Resources/components/Collapse/Collapse.twig b/packages/web-twig/src/Resources/components/Collapse/Collapse.twig
@@ -2,12 +2,14 @@
 {%- set props = props | default([]) -%}
 {%- set _class = props.class | default(null) -%}
 {%- set _id = props.id -%}
+{%- set _isOpen = props.isOpen | default(false) | boolprop -%}
 {%- set _breakpoint = props.breakpoint | default(null) -%}
 {%- set _parent = props.parent | default(null) -%}
 {%- set _elementType = (props.elementType is defined) ? props.elementType : 'div' -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Collapse' -%}
+{%- set _isOpenClassName = _isOpen ? 'is-open' : null -%}
 {%- set _contentClassName = _spiritClassPrefix ~ 'Collapse__content' -%}
 
 {# Attributes #}
@@ -16,7 +18,7 @@
 {%- set _dataParentAttr = _parent ? 'data-parent="' ~ _parent ~ '"' : null -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _isOpenClassName, _class ] -%}
 
 <{{ _elementType }}
     {{ _idAttr | raw }}

diff --git a/packages/web-twig/src/Resources/components/Collapse/README.md b/packages/web-twig/src/Resources/components/Collapse/README.md
@@ -12,23 +12,24 @@ Basic example usage:
 Usage with link:
 
 ```twig
-<ButtonLink href="javascript:void(0)" data-toggle="collapse" data-target="CollapseExample">Collapse trigger</ButtonLink> {# … #}
+<ButtonLink href="javascript:void(0)" data-toggle="collapse" data-target="CollapseExample">Collapse trigger</ButtonLink>
 ```
 
-Open on load example (by aria-expanded):
+Open on page load:
 
 ```twig
-<Button {# … #} aria-expanded="true">Collapse trigger</Button> {# … #}
+<Button data-toggle="collapse" data-target="CollapseExample" aria-expanded="true">Collapse trigger</Button>
+<Collapse id="CollapseExample" isOpen>Collapse content</Collapse>
 ```
 
-Responsive usage for tablet
+Activate Collapse only on mobile screens:
 
 ```twig
 <Button {# … #} class="d-tablet-none">Collapse trigger</Button>
 <Collapse breakpoint="tablet">Collapse content</Collapse>
 ```
 
-Hide button when collapse
+Hide Collapse trigger on collapse:
 
 ```twig
 <Button {# … #} data-more>Collapse trigger</Button> {# … #}
@@ -53,13 +54,14 @@ attributes to register trigger events.
 
 ## API
 
-| Prop name     | Type     | Default | Required | Description                                                            |
-| ------------- | -------- | ------- | -------- | ---------------------------------------------------------------------- |
-| `id`          | `string` | -       | yes      | Collapse ID                                                            |
-| `breakpoint`  | `string` | `null`  | no       | Breakpoint level [mobile,tablet,desktop]                               |
-| `parent`      | `string` | `null`  | 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 for wrapper and content                            |
+| Prop name     | Type      | Default | Required | Description                                                            |
+| ------------- | --------- | ------- | -------- | ---------------------------------------------------------------------- |
+| `id`          | `string`  | -       | yes      | Collapse ID                                                            |
+| `isOpen`      | `boolean` | `false` | no       | If true, make the item open on page load                               |
+| `breakpoint`  | `string`  | `null`  | no       | Breakpoint level [mobile,tablet,desktop]                               |
+| `parent`      | `string`  | `null`  | 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 for wrapper and content                            |
 
 (\*) Attribute for Accordion implementation
 

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
@@ -1,6 +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 id="CollapseExample1" class="Collapse is-open">
     <div class="Collapse__content">Content    </div>
 </div>
 </body></html>
diff --git a/packages/web-twig/tests/components-fixtures/collapseOpened.twig b/packages/web-twig/tests/components-fixtures/collapseOpened.twig
@@ -1,2 +1,2 @@
 <Button data-toggle="collapse" data-target="CollapseExample1" aria-expanded="true">Toggle</Button>
-<Collapse id="CollapseExample1">Content</Collapse>
+<Collapse id="CollapseExample1" isOpen>Content</Collapse>