Skip to content

docs(accordion): improve docs to more closely match PFv4 #2417

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bennypowers merged 2 commits into from
Mar 13, 2023
Merged

docs(accordion): improve docs to more closely match PFv4 #2417

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc3fa36
docs(accordion): improve docs to more closely match PFv4
zeroedin Mar 10, 2023
28a6586
Merge branch 'main' into docs/accordion
bennypowers Mar 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 186 additions & 0 deletions elements/pf-accordion/docs/pf-accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,192 @@
</pf-accordion-panel>
</pf-accordion>
```

### Single Expanded Behavior
<pf-accordion single>
<pf-accordion-header>
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
<pf-accordion-header expanded>
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Nostrud ad sit commodo nostrud?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Reprehenderit cupidatat labore?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
</pf-accordion>

```html
<pf-accordion single>
<pf-accordion-header>
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
<pf-accordion-header expanded>
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Nostrud ad sit commodo nostrud?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Reprehenderit cupidatat labore?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
</pf-accordion>
```


### Fixed with multiple expand behavior
<pf-accordion >
<pf-accordion-header>
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Nostrud ad sit commodo nostrud?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Reprehenderit cupidatat labore?</h3>
</pf-accordion-header>
<pf-accordion-panel fixed>
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
</pf-accordion>

```html
<pf-accordion>
<pf-accordion-header>
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Nostrud ad sit commodo nostrud?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Reprehenderit cupidatat labore?</h3>
</pf-accordion-header>
<pf-accordion-panel fixed>
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
</pf-accordion>
```


### Bordered
<pf-accordion bordered>
<pf-accordion-header>
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Nostrud ad sit commodo nostrud?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Reprehenderit cupidatat labore?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
</pf-accordion>

```html
<pf-accordion bordered>
<pf-accordion-header>
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p><a href="#">Ullamco ullamco sint</a> ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Nostrud ad sit commodo nostrud?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
</pf-accordion-panel>
<pf-accordion-header>
<h3>Reprehenderit cupidatat labore?</h3>
</pf-accordion-header>
<pf-accordion-panel>
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
<a href="#">Call to action</a>
</pf-accordion-panel>
</pf-accordion>
```

{% endband %}

{% renderSlots %}
Expand Down