From bab30ef05e9a6bda41606e8ff3b8a1dc4aa1f3f3 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Tue, 11 Apr 2023 18:14:11 +0200 Subject: [PATCH] Fix(web-twig): Make `AccordionHeader` slot actually work - Allow to accept HTML and **pre-rendered** TwigX content. - Add stories matching the `web` demo. --- .../Accordion/Accordion.stories.twig | 11 ++ .../components/Accordion/AccordionHeader.twig | 7 +- .../Resources/components/Accordion/README.md | 91 +++++++++------- .../stories/AccordionBasicUsage.twig | 101 ++++++++++++++++++ .../stories/AccordionOneItemOpenAtATime.twig | 73 +++++++++++++ ...ith data set accordionDefault.twig__1.html | 3 +- .../components-fixtures/accordionDefault.twig | 3 +- .../accordionStayOpen.twig | 2 - 8 files changed, 245 insertions(+), 46 deletions(-) create mode 100644 packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig create mode 100644 packages/web-twig/src/Resources/components/Accordion/stories/AccordionBasicUsage.twig create mode 100644 packages/web-twig/src/Resources/components/Accordion/stories/AccordionOneItemOpenAtATime.twig diff --git a/packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig b/packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig new file mode 100644 index 0000000000..c02a906416 --- /dev/null +++ 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 index c97665e1ce..408319deb7 100644 --- 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 %} - {% if slot is defined %} + {% if _unsafeSlot %} - {% block slot %}{% endblock %} + {{ _unsafeSlot | raw }} {% endif %} diff --git a/packages/web-twig/src/Resources/components/Accordion/README.md b/packages/web-twig/src/Resources/components/Accordion/README.md index 17ea892b05..98d43b3fe0 100644 --- a/packages/web-twig/src/Resources/components/Accordion/README.md +++ b/packages/web-twig/src/Resources/components/Accordion/README.md @@ -7,11 +7,7 @@ This is Twig implementation of the [Accordion] component. ```html - + Accordion Header @@ -19,11 +15,7 @@ This is Twig implementation of the [Accordion] component. - + Accordion Header @@ -39,11 +31,7 @@ This is Twig implementation of the [Accordion] component. - + Accordion Header @@ -59,11 +47,7 @@ This is Twig implementation of the [Accordion] component. ```html - + Accordion Header @@ -71,12 +55,7 @@ This is Twig implementation of the [Accordion] component. - + Accordion Header @@ -91,11 +70,7 @@ This is Twig implementation of the [Accordion] component. ```html - + Accordion Header - + Accordion Header ``` +## Slot + +You can pass custom content (including HTML) into the slot inside Accordion +Header: + +```html + + Accordion Item + +``` + +⚠️ 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 %} + 3 +{% endset %} + + + Accordion Item + + +{# This DOES NOT WORK #} + +3" +> + Accordion Item + +``` + ## 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: 'Link3', 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 new file mode 100644 index 0000000000..5837b3e454 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Accordion/stories/AccordionBasicUsage.twig @@ -0,0 +1,101 @@ +
+ +

Basic usage

+ +
+ + + + + Accordion Item no. 1 + + + 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. + + + + {% set slotContent1 %} + Link + 3 + {% endset %} + + Accordion Item no. 2 + + + 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. + + + + + Accordion Item no. 3 + + + 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. + + + + {% set slotContent2 %} + 3 + {% endset %} + + 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 + + + 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. + + + + +
+
diff --git a/packages/web-twig/src/Resources/components/Accordion/stories/AccordionOneItemOpenAtATime.twig b/packages/web-twig/src/Resources/components/Accordion/stories/AccordionOneItemOpenAtATime.twig new file mode 100644 index 0000000000..95eedd7a14 --- /dev/null +++ b/packages/web-twig/src/Resources/components/Accordion/stories/AccordionOneItemOpenAtATime.twig @@ -0,0 +1,73 @@ +
+ +

One item open at a time

+ +
+ + + + + Accordion Item no. 1 + + + 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. + + + + + Accordion Item no. 2 + + + 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. + + + + + Accordion Item no. 3 + + + 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. + + + + +
+
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set accordionDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set accordionDefault.twig__1.html index b70fd451d7..4dce818df5 100644 --- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set accordionDefault.twig__1.html +++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set accordionDefault.twig__1.html @@ -8,7 +8,8 @@

my HTML + content

diff --git a/packages/web-twig/tests/components-fixtures/accordionDefault.twig b/packages/web-twig/tests/components-fixtures/accordionDefault.twig index eec49fd249..9158270968 100644 --- a/packages/web-twig/tests/components-fixtures/accordionDefault.twig +++ b/packages/web-twig/tests/components-fixtures/accordionDefault.twig @@ -3,7 +3,7 @@ Accordion Header @@ -15,7 +15,6 @@ Accordion Header diff --git a/packages/web-twig/tests/components-fixtures/accordionStayOpen.twig b/packages/web-twig/tests/components-fixtures/accordionStayOpen.twig index eecad41898..8afb06865d 100644 --- a/packages/web-twig/tests/components-fixtures/accordionStayOpen.twig +++ b/packages/web-twig/tests/components-fixtures/accordionStayOpen.twig @@ -3,7 +3,6 @@ Accordion Header @@ -15,7 +14,6 @@ Accordion Header