Fix(web-twig): Make AccordionHeader slot actually work

- Allow to accept HTML and **pre-rendered** TwigX content. - Add stories matching the `web` demo.
lmc-eu · Apr 17, 2023 · bab30ef · bab30ef
1 parent 11d7c3d
commit bab30ef
Show file tree

Hide file tree

Showing 8 changed files with 245 additions and 46 deletions.
diff --git a/packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig b/packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig
@@ -0,0 +1,11 @@
+{% extends 'layout/plain.html.twig' %}
+
+{% block content %}
+
+    {# Basic Usage #}
+    {% include '@components/Accordion/stories/AccordionBasicUsage.twig' %}
+
+    {# One Item Open at a Time #}
+    {% include '@components/Accordion/stories/AccordionOneItemOpenAtATime.twig' %}
+
+{% endblock %}
diff --git a/packages/web-twig/src/Resources/components/Accordion/AccordionHeader.twig b/packages/web-twig/src/Resources/components/Accordion/AccordionHeader.twig
@@ -2,9 +2,10 @@
 {%- set props = props | default([]) -%}
 {%- set _class = props.class | default(null) -%}
 {%- set _id = props.id -%}
-{%- set _for = props.for -%}
 {%- set _elementType = (props.elementType is defined) ? props.elementType : 'h3' -%}
+{%- set _for = props.for -%}
 {%- set _isOpen = props.isOpen | default(false) | boolprop -%}
+{%- set _unsafeSlot = props.UNSAFE_slot | default(null) -%}
 
 {# Class names #}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Accordion__itemHeader' -%}
@@ -38,9 +39,9 @@
         {% block content %}{% endblock %}
     </button>
     <span class="{{ _sideClassName }}">
-        {% if slot is defined %}
+        {% if _unsafeSlot %}
             <span class="{{ _slotClassName }}">
-                {% block slot %}{% endblock %}
+                {{ _unsafeSlot | raw }}
             </span>
         {% endif %}
         <span class="{{ _iconClassName }}">

diff --git a/packages/web-twig/src/Resources/components/Accordion/README.md b/packages/web-twig/src/Resources/components/Accordion/README.md
@@ -7,23 +7,15 @@ This is Twig implementation of the [Accordion] component.
 ```html
 <Accordion>
   <AccordionItem id="AccordionItemExample0">
-    <AccordionHeader
-      id="AccordionItemExample0Header"
-      for="AccordionItemExample0Content"
-      slot="<Link href='#'>Link</Link><Pill color='selected'>3</Pill>"
-    >
+    <AccordionHeader id="AccordionItemExample0Header" for="AccordionItemExample0Content">
       Accordion Header
     </AccordionHeader>
     <AccordionContent id="AccordionItemExample0Content" labelledById="AccordionItemExample0Header">
       Accordion Content
     </AccordionContent>
   </AccordionItem>
   <AccordionItem id="AccordionItemExample1">
-    <AccordionHeader
-      id="AccordionItemExample1Header"
-      for="AccordionItemExample1Content"
-      slot="<Pill color='selected'>3</Pill>"
-    >
+    <AccordionHeader id="AccordionItemExample1Header" for="AccordionItemExample1Content">
       Accordion Header
     </AccordionHeader>
     <AccordionContent id="AccordionItemExample1Content" labelledById="AccordionItemExample1Header">
@@ -39,11 +31,7 @@ This is Twig implementation of the [Accordion] component.
     </AccordionContent>
   </AccordionItem>
   <AccordionItem id="AccordionItemExample3">
-    <AccordionHeader
-      id="AccordionItemExample3Header"
-      for="AccordionItemExample3Content"
-      slot="<Link href='#'>Link</Link>"
-    >
+    <AccordionHeader id="AccordionItemExample3Header" for="AccordionItemExample3Content">
       Accordion Header
     </AccordionHeader>
     <AccordionContent id="AccordionItemExample3Content" labelledById="AccordionItemExample3Header">
@@ -59,24 +47,15 @@ This is Twig implementation of the [Accordion] component.
 ```html
 <Accordion>
   <AccordionItem id="AccordionItemExample0">
-    <AccordionHeader
-      id="AccordionItemExample0Header"
-      for="AccordionItemExample0Content"
-      slot="<Link href='#'>Link</Link><Pill color='selected'>3</Pill>"
-    >
+    <AccordionHeader id="AccordionItemExample0Header" for="AccordionItemExample0Content">
       Accordion Header
     </AccordionHeader>
     <AccordionContent id="AccordionItemExample0Content" labelledById="AccordionItemExample0Header">
       Accordion Content
     </AccordionContent>
   </AccordionItem>
   <AccordionItem id="AccordionItemExample1">
-    <AccordionHeader
-      id="AccordionItemExample1Header"
-      for="AccordionItemExample1Content"
-      slot="<Pill color='selected'>3</Pill>"
-      isOpen
-    >
+    <AccordionHeader id="AccordionItemExample1Header" for="AccordionItemExample1Content" isOpen>
       Accordion Header
     </AccordionHeader>
     <AccordionContent id="AccordionItemExample1Content" labelledById="AccordionItemExample1Header" isOpen>
@@ -91,11 +70,7 @@ This is Twig implementation of the [Accordion] component.
 ```html
 <Accordion id="AccordionExample">
   <AccordionItem id="AccordionItemExample0">
-    <AccordionHeader
-      id="AccordionItemExample0Header"
-      for="AccordionItemExample0Content"
-      slot="<Link href='#'>Link</Link><Pill color='selected'>3</Pill>"
-    >
+    <AccordionHeader id="AccordionItemExample0Header" for="AccordionItemExample0Content">
       Accordion Header
     </AccordionHeader>
     <AccordionContent
@@ -107,11 +82,7 @@ This is Twig implementation of the [Accordion] component.
     </AccordionContent>
   </AccordionItem>
   <AccordionItem id="AccordionItemExample1">
-    <AccordionHeader
-      id="AccordionItemExample1Header"
-      for="AccordionItemExample1Content"
-      slot="<Pill color='selected'>3</Pill>"
-    >
+    <AccordionHeader id="AccordionItemExample1Header" for="AccordionItemExample1Content">
       Accordion Header
     </AccordionHeader>
     <AccordionContent
@@ -125,6 +96,51 @@ This is Twig implementation of the [Accordion] component.
 </Accordion>
 ```
 
+## Slot
+
+You can pass custom content (including HTML) into the slot inside Accordion
+Header:
+
+```html
+<AccordionHeader
+  id="AccordionItemExample1Header"
+  for="AccordionItemExample1Content"
+  UNSAFE_slot="<span>my content</span>"
+>
+  Accordion Item
+</AccordionHeader>
+```
+
+⚠️ Due to TwigX limitations, TwigX content is **not allowed** inside `slot`.
+To pass TwigX content into the slot, you must render it first and then pass the
+rendered result into the slot:
+
+```twig
+{# This works #}
+
+{% set slotContent %}
+  <Pill color="selected">3</Pill>
+{% endset %}
+
+<AccordionHeader
+    id="AccordionItemExample1Header"
+    for="AccordionItemExample1Content"
+    UNSAFE_slot={{ slotContent }}
+>
+    Accordion Item
+</AccordionHeader>
+
+{# This DOES NOT WORK #}
+
+<AccordionHeader
+    id="AccordionItemExample1Header"
+    for="AccordionItemExample1Content"
+    UNSAFE_slot="<Pill color="selected">3</Pill>"
+>
+    Accordion Item
+</AccordionHeader>
+```
+
 ## Usage without lexer:
 
 ```twig
@@ -139,7 +155,6 @@ This is Twig implementation of the [Accordion] component.
                 {% embed "@spirit/accordionHeader.twig" with { props: {
                   id: 'AccordionItemExampleHeader',
                   for: 'AccordionItemExampleContent',
-                  slot: '<Link href="#">Link</Link><Pill color="selected">3</Pill>',
                   isOpen: true,
                 } } %}
                     {% block content %}
@@ -191,7 +206,7 @@ The Accordion itself consists of several components which cannot be used indepen
 | `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  |
+| `UNSAFE_slot` | `HTML`   | ``      | no       | Side slot in the header  |
 
 ### AccordionContent
 

diff --git a/packages/web-twig/src/Resources/components/Accordion/stories/AccordionBasicUsage.twig b/packages/web-twig/src/Resources/components/Accordion/stories/AccordionBasicUsage.twig
@@ -0,0 +1,101 @@
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">Basic usage</h2>
+
+    <div class="mb-400">
+
+        <Accordion>
+            <AccordionItem id="AccordionItemExample0">
+                <AccordionHeader
+                    id="AccordionItemExample0Header"
+                    for="AccordionItemExample0Content"
+                    isOpen
+                >
+                    Accordion Item no. 1
+                </AccordionHeader>
+                <AccordionContent
+                    id="AccordionItemExample0Content"
+                    labelledById="AccordionItemExample0Header"
+                >
+                    Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
+                    leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
+                    aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
+                    ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
+                    posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
+                    Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
+                    efficitur.
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem id="AccordionItemExample1">
+                {% set slotContent1 %}
+                    <Link href="https://spirit.design">Link</Link>
+                    <Pill color="selected">3</Pill>
+                {% endset %}
+                <AccordionHeader
+                    id="AccordionItemExample1Header"
+                    for="AccordionItemExample1Content"
+                    UNSAFE_slot={{ slotContent1 }}
+                >
+                    Accordion Item no. 2
+                </AccordionHeader>
+                <AccordionContent
+                    id="AccordionItemExample1Content"
+                    labelledById="AccordionItemExample1Header"
+                >
+                    Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non
+                    nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur
+                    porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et
+                    vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan
+                    arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et,
+                    urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et.
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem id="AccordionItemExample2">
+                <AccordionHeader
+                    id="AccordionItemExample2Header"
+                    for="AccordionItemExample2Content"
+                >
+                    Accordion Item no. 3
+                </AccordionHeader>
+                <AccordionContent
+                    id="AccordionItemExample2Content"
+                    labelledById="AccordionItemExample2Header"
+                >
+                    Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
+                    leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
+                    aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
+                    ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
+                    posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
+                    Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
+                    efficitur.
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem id="AccordionItemExample3">
+                {% set slotContent2 %}
+                    <Pill color="selected">3</Pill>
+                {% endset %}
+                <AccordionHeader
+                    id="AccordionItemExample3Header"
+                    for="AccordionItemExample3Content"
+                    UNSAFE_slot={{ slotContent2 }}
+                >
+                    Augue iaculis, quis ante sapien aliquam aliquam non cursus, vestibulum nunc ipsum maximus.
+                    Libero sed non nulla, condimentum lorem ipsum molestie integer curabitur rutrum curabitur,
+                    tellus pulvinar libero tempus
+                </AccordionHeader>
+                <AccordionContent
+                    id="AccordionItemExample3Content"
+                    labelledById="AccordionItemExample3Header"
+                >
+                    Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non
+                    nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur
+                    porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et
+                    vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan
+                    arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et,
+                    urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et.
+                </AccordionContent>
+            </AccordionItem>
+        </Accordion>
+
+    </div>
+</section>
diff --git a/...ages/web-twig/src/Resources/components/Accordion/stories/AccordionOneItemOpenAtATime.twig b/...ages/web-twig/src/Resources/components/Accordion/stories/AccordionOneItemOpenAtATime.twig
@@ -0,0 +1,73 @@
+<section class="docs-Section">
+
+    <h2 class="docs-Heading">One item open at a time</h2>
+
+    <div class="mb-400">
+
+        <Accordion id="AccordionExample">
+            <AccordionItem id="AccordionItemExample4">
+                <AccordionHeader
+                    id="AccordionItemExample4Header"
+                    for="AccordionItemExample4Content"
+                >
+                    Accordion Item no. 1
+                </AccordionHeader>
+                <AccordionContent
+                    id="AccordionItemExample4Content"
+                    labelledById="AccordionItemExample4Header"
+                    parent="#AccordionExample"
+                >
+                    Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
+                    leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
+                    aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
+                    ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
+                    posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
+                    Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
+                    efficitur.
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem id="AccordionItemExample5">
+                <AccordionHeader
+                    id="AccordionItemExample5Header"
+                    for="AccordionItemExample5Content"
+                >
+                    Accordion Item no. 2
+                </AccordionHeader>
+                <AccordionContent
+                    id="AccordionItemExample5Content"
+                    labelledById="AccordionItemExample5Header"
+                    parent="#AccordionExample"
+                >
+                    Non suspendisse, maximus suscipit tortor non mauris bibendum felis scelerisque bibendum, nam augue scelerisque non
+                    nulla. Erat nec, integer nec egestas integer consequat cursus sed porttitor, dolor sit amet lorem ipsum consectetur
+                    porta. Condimentum urna, suspendisse mauris ligula duis id vivamus quis odio eget, integer ornare fermentum et
+                    vehicula. Consequat bibendum, dui fusce gravida iaculis urna integer vitae id, ante purus nullam et nisl. Accumsan
+                    arcu, nunc nulla faucibus purus vivamus facilisis augue, volutpat convallis eget suscipit. Tellus nunc ut enim et,
+                    urna fusce pulvinar fusce et mauris donec, vitae odio morbi risus aliquet. et.
+                </AccordionContent>
+            </AccordionItem>
+            <AccordionItem id="AccordionItemExample6">
+                <AccordionHeader
+                    id="AccordionItemExample6Header"
+                    for="AccordionItemExample6Content"
+                >
+                    Accordion Item no. 3
+                </AccordionHeader>
+                <AccordionContent
+                    id="AccordionItemExample6Content"
+                    labelledById="AccordionItemExample6Header"
+                    parent="#AccordionExample"
+                >
+                    Sit amet interdum, accumsan dolor sit amet posuere vel arcu mauris placerat non mauris, non sed vitae curabitur odio
+                    leo. Dignissim tristique, consequat vel arcu et nisi odio leo pretium accumsan condimentum at sem, mauris aenean
+                    aliquet enim. Neque sapien, volutpat erat id nunc facilisis eget ipsum phasellus, tellus ultricies sollicitudin
+                    ligula. Sem proin, nibh maximus donec nec commodo molestie nulla sapien nec commodo, commodo et fermentum et. Mauris
+                    posuere, mi orci et nisi et iaculis lorem fringilla sed mauris auctor, lorem tempus a pulvinar felis scelerisque.
+                    Suscipit vivamus, elit vel arcu lorem fringilla finibus quis sit amet ligula convallis, consectetur potenti aenean
+                    efficitur.
+                </AccordionContent>
+            </AccordionItem>
+        </Accordion>
+
+    </div>
+</section>
diff --git a/...ts/__snapshots__/ComponentsSnapshotTest__test with data set accordionDefault.twig__1.html b/...ts/__snapshots__/ComponentsSnapshotTest__test with data set accordionDefault.twig__1.html
@@ -8,7 +8,8 @@
       <article id="AccordionItemExample0" class="Accordion__item">
         <h3 id="AccordionItemExample0Header" class="Accordion__itemHeader">
           <button type="button" class="Accordion__itemToggle" data-toggle="collapse" data-target="AccordionItemExample0Content" aria-expanded="false" aria-controls="AccordionItemExample0Content">Accordion
-          Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="b432be454bcb05b57bc557c97ad32b3f" aria-hidden="true">
+          Header</button> <span class="Accordion__itemSide"><span class="Accordion__itemSlot"><span>my HTML
+          content</span></span> <span class="Accordion__itemIcon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" id="b432be454bcb05b57bc557c97ad32b3f" aria-hidden="true">
           <path d="M15.8805 9.63472L12.0005 13.5147L8.12047 9.63472C7.73047 9.24472 7.10047 9.24472 6.71047 9.63472C6.32047 10.0247 6.32047 10.6547 6.71047 11.0447L11.3005 15.6347C11.6905 16.0247 12.3205 16.0247 12.7105 15.6347L17.3005 11.0447C17.6905 10.6547 17.6905 10.0247 17.3005 9.63472C16.9105 9.25472 16.2705 9.24472 15.8805 9.63472Z" fill="#132930"></path></svg></span></span>
         </h3>
         <div id="AccordionItemExample0Content" class="Collapse" aria-labelledby="AccordionItemExample0Header" data-parent="AccordionExample">

diff --git a/packages/web-twig/tests/components-fixtures/accordionDefault.twig b/packages/web-twig/tests/components-fixtures/accordionDefault.twig
@@ -3,7 +3,7 @@
         <AccordionHeader
             id="AccordionItemExample0Header"
             for="AccordionItemExample0Content"
-            slot="<Link href='#'>Link</Link><Pill color='selected'>3</Pill>"
+            UNSAFE_slot="<span>my HTML content</span>"
         >
             Accordion Header
         </AccordionHeader>
@@ -15,7 +15,6 @@
         <AccordionHeader
             id="AccordionItemExample1Header"
             for="AccordionItemExample1Content"
-            slot="<Pill color='selected'>3</Pill>"
             isOpen
         >
             Accordion Header