Skip to content

Commit

Permalink
Docs(web-twig): Introduce Collapse story refs #DS-247
Browse files Browse the repository at this point in the history
  • Loading branch information
@literat
literat committed Apr 3, 2023
1 parent e2efa73 commit 2c75004
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 0 deletions.
23 changes: 23 additions & 0 deletions packages/web-twig/src/Resources/components/Collapse/Collapse.stories.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{% extends 'layout/default.html.twig' %}

{% block content %}

{# Collapse Default with Button #}
{% include '@components/Collapse/stories/CollapseDefaultWithButton.twig' %}

{# Collapse Open on Init #}
{% include '@components/Collapse/stories/CollapseOpenOnInit.twig' %}

{# Collapse Change visibility with 'breakpoint' attribute #}
{% include '@components/Collapse/stories/CollapseVisibilityBreakpoint.twig' %}

{# Collapse Collapse with hide trigger when expanded #}
{% include '@components/Collapse/stories/CollapseHideTrigger.twig' %}

{# Collapse Default with helper class for changing content inside togglet #}
{% include '@components/Collapse/stories/CollapseHelperClass.twig' %}

{# Collapse Multiple Trigger #}
{% include '@components/Collapse/stories/CollapseMultipleTriggers.twig' %}

{% endblock %}
23 changes: 23 additions & 0 deletions packages/web-twig/src/Resources/components/Collapse/stories/CollapseDefaultWithButton.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<section class="docs-Section">

<h2 class="docs-Heading">Default with button</h2>

<!--
Default Collapse
-->
<div class="mb-400">
<Button
data-toggle="collapse"
data-target="CollapseExample0"
>
Collapse trigger
</Button>
</div>
<Collapse id="CollapseExample0">
Aliquam varius, consequat posuere a lacinia mauris eu tellus condimentum ut id ante, accumsan vehicula nulla neque. Mauris mi orci, in donec nullam odio leo sapien et vehicula nunc a
lacinia, fermentum arcu ullamcorper posuere. Mauris euismod, ac nec ante fermentum praesent nisi commodo neque placerat, vivamus dui et tempus pulvinar suspendisse. Porttitor eget,
sollicitudin hendrerit bibendum nulla aliquam sit amet leo vitae, eget consectetur diam a vestibulum. Adipiscing lorem ipsum, arcu condimentum posuere semper morbi condimentum dui,
bibendum nunc aenean facilisis. Phasellus euismod, donec sem odio ligula praesent finibus nibh convallis, tristique aliquam sed id tortor sem lobortis.
</Collapse>

</section>
35 changes: 35 additions & 0 deletions packages/web-twig/src/Resources/components/Collapse/stories/CollapseHelperClass.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<section class="docs-Section">

<h2 class="docs-Heading">Default with helper class for changing content inside toggle</h2>

<p>
Ante rhoncus, tristique nunc et elit id in ex sem consectetur id, consectetur et elit nibh sed ac. Sed ac convallis, sem lobortis convallis et nisi sapien in ex sem ullamcorper
iaculis, aliquet sem lobortis pellentesque sit amet. Congue nulla congue, porttitor quis orci quam elit rutrum scelerisque nibh maximus, felis a integer maximus praesent.
Metus varius, at sem dui vivamus elementum luctus nisl sit amet dolor sit amet, mauris et iaculis nec fermentum. Augue sapien, nisl vel purus nullam odio morbi a fusce vitae
mattis vitae, posuere tristique bibendum aliquam. In donec dolor ut, imperdiet quam fermentum molestie vulputate scelerisque ac nec, tortor mi orci sollicitudin elementum.
</p>
<Collapse id="CollapseExampleV">
Aliquam varius, consequat posuere a lacinia mauris eu tellus condimentum ut id ante, accumsan vehicula nulla neque. Mauris mi orci, in donec nullam odio leo sapien et vehicula nunc a
lacinia, fermentum arcu ullamcorper posuere. Mauris euismod, ac nec ante fermentum praesent nisi commodo neque placerat, vivamus dui et tempus pulvinar suspendisse. Porttitor eget,
sollicitudin hendrerit bibendum nulla aliquam sit amet leo vitae, eget consectetur diam a vestibulum. Adipiscing lorem ipsum, arcu condimentum posuere semper morbi condimentum dui,
bibendum nunc aenean facilisis. Phasellus euismod, donec sem odio ligula praesent finibus nibh convallis, tristique aliquam sed id tortor sem lobortis.
</Collapse>
<div class="mb-400">
<Button
data-toggle="collapse"
data-target="CollapseExampleV"
>
<span class="accessibility-open">Show less</span>
<span class="accessibility-closed">Show more</span>
</Button>
&nbsp;
<ButtonLink
href="javascript:void(0)"
data-toggle="collapse"
data-target="CollapseExampleV"
>
<span class="accessibility-open">Show less</span>
<span class="accessibility-closed">Show more</span>
</ButtonLink>
</div>
</section>
32 changes: 32 additions & 0 deletions packages/web-twig/src/Resources/components/Collapse/stories/CollapseHideTrigger.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<section class="docs-Section">

<h2 class="docs-Heading">Collapse with hide trigger when expanded </h2>

<!--
Collapse more
-->
<p>
Quis orci molestie, condimentum metus a lorem lorem fringilla sem lobortis libero rhoncus nullam, purus sapien aenean sed id tortor. Molestie quam, lectus quis ac nec
suspendisse consectetur finibus a accumsan, bibendum dolor sit amet congue rhoncus erat. Semper turpis, varius iaculis venenatis ut congue sollicitudin nulla,
convallis nibh maximus erat id aliquam. Nec interdum, auctor elit vitae pulvinar fusce gravida curabitur odio leo, nunc a mauris auctor. Vel integer, placerat pulvinar
nisi nunc donec felis erat quis, phasellus ac nec phasellus ac nibh. Scelerisque fringilla, viverra nisl vel purus sed porttitor porttitor et iaculis commodo, vehicula urna purus ultrices.
<ButtonLink
href="javascript:void(0)"
data-toggle="collapse"
data-target="CollapseExampleIII"
data-more
>
...more
</ButtonLink>
<Collapse
elementType="span"
id="CollapseExampleIII"
>
Commodo metus a lorem, a aliquet vestibulum rutrum pharetra sapien sed, ullamcorper quis odio dolor ut aliquam. Rutrum suspendisse, fermentum tellus metus a lorem
cursus volutpat proin bibendum, sed diam a duis id dui et tempus. Ligula non, sapien augue libero eget aliquam semper varius, posuere urna leo vitae ullamcorper.
Venenatis posuere, sapien rhoncus dolor quis semper porttitor et vestibulum, odio leo ac nibh molestie placerat. Tellus suspendisse, dui lectus tellus quis eget
sollicitudin dolor sit amet, dui ac nibh nulla mauris. Feugiat sollicitudin, integer bibendum at sem sapien non nullam sed id tortor, suscipit fusce gravida nec eget.
</Collapse>
</p>

</section>
37 changes: 37 additions & 0 deletions packages/web-twig/src/Resources/components/Collapse/stories/CollapseMultipleTriggers.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<section class="docs-Section">

<h2 class="docs-Heading">Multiple triggers</h2>

<!--
Default Collapse
-->
<div class="mb-400">
<Button
data-toggle="collapse"
data-target="CollapseExampleIV"
>
Collapse trigger
</Button>
</div>
<Collapse id="CollapseExampleIV">
Aliquam varius, consequat posuere a lacinia mauris eu tellus condimentum ut id ante, accumsan vehicula nulla neque. Mauris mi orci, in donec nullam odio leo sapien et vehicula nunc a
lacinia, fermentum arcu ullamcorper posuere. Mauris euismod, ac nec ante fermentum praesent nisi commodo neque placerat, vivamus dui et tempus pulvinar suspendisse. Porttitor eget,
sollicitudin hendrerit bibendum nulla aliquam sit amet leo vitae, eget consectetur diam a vestibulum. Adipiscing lorem ipsum, arcu condimentum posuere semper morbi condimentum dui,
bibendum nunc aenean facilisis. Phasellus euismod, donec sem odio ligula praesent finibus nibh convallis, tristique aliquam sed id tortor sem lobortis.
</Collapse>
<div class="pt-400">
<Button
data-toggle="collapse"
data-target="CollapseExampleIV"
>
Secondary Collapse trigger
</Button>
<ButtonLink
href="#"
data-toggle="collapse"
data-target="CollapseExampleIV"
>
Tertiary Collapse trigger
</ButtonLink>
</div>
</section>
25 changes: 25 additions & 0 deletions packages/web-twig/src/Resources/components/Collapse/stories/CollapseOpenOnInit.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<section class="docs-Section">

<h2 class="docs-Heading">Open on init</h2>

<!--
Collapse with auto open by aria
-->
<div class="mb-400">
<div class="mb-400">
<Button
data-toggle="collapse"
data-target="CollapseExampleI"
>
Collapse trigger
</Button>
</div>
<Collapse id="CollapseExampleI" isOpen={true}>
Cras dictum ante, mollis ollicitudin proin bibendum nec commodo consequat fusce ante, consequat venenatis suscipit odio morbi. Dolor sit amet porta, placerat tristique sit amet
ligula nisl risus et vehicula, suscipit accumsan nunc curabitur. Et neque, augue ut nulla a sed porta scelerisque proin, elit sapien lacinia felis. Lorem nulla, iaculis ornare in
donec ac nibh libero nisl ornare, elementum luctus sem aliquam consequat. Elit et iaculis, enim in quam neque facilisis cursus integer hendrerit, non nulla vulputate condimentum
auctor. Turpis varius, scelerisque maximus iaculis efficitur bibendum et nisi sapien, ut nunc ut enim et sem lobortis at sem.
</Collapse>
</div>

</section>
46 changes: 46 additions & 0 deletions ...ages/web-twig/src/Resources/components/Collapse/stories/CollapseVisibilityBreakpoint.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<section class="docs-Section">

<h2 class="docs-Heading">Change visibility with 'breakpoint' attribute</h2>
<h3>Tablet</h3>

<!--
Collapse with tablet breakpoint
-->
<div class="mb-400">
<ButtonLink
href="javascript:void(0)"
data-toggle="collapse"
data-target="CollapseExample2"
>
Collapse breakpoint trigger
</ButtonLink>
<Collapse id="CollapseExample2" breakpoint="tablet">
Turpis cursus, urna vehicula sed porttitor nulla non mauris sapien congue, urna dui augue facilisis. Nunc elit, ipsum porttitor curabitur sapien nulla finibus quis pulvinar, commodo
convallis lorem fringilla nec. Quam libero, vitae massa ornare eget vestibulum et iaculis quisque sapien, turpis maximus maximus vivamus. Nibh maximus molestie, donec rhoncus erat
sed ac molestie donec sollicitudin sed id tortor, consequat venenatis fringilla augue. Urna imperdiet, dui vel risus posuere interdum duis id posuere purus, vel arcu dui erat id.
Sed vitae potenti, ultricies pretium accumsan ligula lorem fringilla non nulla vel mi orci, sed id tortor lorem ipsum dolor sit amet dui et vehicula.
</Collapse>
</div>

<h3 class="pt-300">Desktop</h3>

<!--
Collapse with desktop breakpoint
-->
<div class="mb-400">
<ButtonLink
href="javascript:void(0)"
data-toggle="collapse"
data-target="CollapseExample3"
>
Collapse breakpoint trigger
</ButtonLink>
<Collapse id="CollapseExample3" breakpoint="desktop">
Elementum luctus ultrices, ultrices quam metus a lorem sollicitudin lorem fringilla curabitur felis a, sed urna consectetur maximus. Imperdiet donec, elit condimentum dolor ut accumsan
congue nulla ut id ante vel arcu, lorem fringilla interdum pulvinar nullam. Curabitur interdum, semper donec dui et tempus fusce vitae ornare risus lorem, varius tristique sem odio elit.
Felis a ut venenatis, aliquam semper sapien consequat elementum vivamus tortor, cursus donec volutpat vitae massa. Sapien nam, dolor ut quam venenatis interdum molestie augue dui, lorem
sodales facilisis semper. Consectetur vivamus, commodo nulla accumsan fringilla mauris sagittis ipsum, neque dolor quis ligula nunc.
</Collapse>
</div>

</section>

0 comments on commit 2c75004

Please sign in to comment.