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>