Skip to content

Commit

Permalink
Docs(web-twig): Use new docs components in all demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamkudrna
adamkudrna committed Sep 7, 2023
1 parent 193eecf commit d120c65
Show file tree
Hide file tree
Showing 127 changed files with 2,004 additions and 2,433 deletions.
10 changes: 6 additions & 4 deletions packages/web-twig/src/Resources/components/Accordion/Accordion.stories.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,12 @@

{% block content %}

{# Basic Usage #}
{% include '@components/Accordion/stories/AccordionBasicUsage.twig' %}
<DocsSection title="Basic Usage">
{% include '@components/Accordion/stories/AccordionBasicUsage.twig' %}
</DocsSection>

{# One Item Open at a Time #}
{% include '@components/Accordion/stories/AccordionOneItemOpenAtATime.twig' %}
<DocsSection title="One Item Open at a Time">
{% include '@components/Accordion/stories/AccordionOneItemOpenAtATime.twig' %}
</DocsSection>

{% endblock %}
193 changes: 92 additions & 101 deletions packages/web-twig/src/Resources/components/Accordion/stories/AccordionBasicUsage.twig
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,92 @@
<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>
<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>
137 changes: 64 additions & 73 deletions ...ages/web-twig/src/Resources/components/Accordion/stories/AccordionOneItemOpenAtATime.twig
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,64 @@
<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>
<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>
Loading

0 comments on commit d120c65

Please sign in to comment.