Skip to content

docs: add htmlexample shortcode #2412

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 10 commits into from
Apr 18, 2023
Merged

docs: add htmlexample shortcode #2412

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
5d8b4b7
docs: add htmlexample shortcode
zeroedin Mar 7, 2023
cc28379
Merge branch 'main' into docs/html-examples-disclosure
brianferry Mar 16, 2023
b473f4a
fix: broken icons on label docs page
brianferry Mar 16, 2023
d4c8f4b
Merge branch 'main' into docs/html-examples-disclosure
heyMP Mar 22, 2023
8c792c8
Merge branch 'main' into docs/html-examples-disclosure
zeroedin Mar 28, 2023
cac404c
Merge branch 'main' into docs/html-examples-disclosure
zeroedin Apr 17, 2023
122002b
docs: print html from html-example
bennypowers Apr 17, 2023
75ebfe9
docs: migrate one instance of htmlexample
bennypowers Apr 17, 2023
a53d20c
docs: migrate rest of htmlexamples
bennypowers Apr 18, 2023
5caf4d3
docs: fix and dedent htmlexample
bennypowers Apr 18, 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
17 changes: 17 additions & 0 deletions docs/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -699,6 +699,23 @@ code {
font-size: 14px;
}


.html-example {
display: flex;
}

.html-example summary {
cursor: pointer;
}

.html-example p:empty {
display: none;
}

.html-example pre[class*="language-"] {
margin: 0;
}

.push-top {
margin-top: var(--pf-theme--container-spacer, 0.83em);
}
Expand Down
218 changes: 2 additions & 216 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 @@ -30,6 +30,7 @@
{% endrenderOverview %}

{% band header="Usage" %}
{% htmlexample %}
<pf-accordion>
<pf-accordion-header>
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
Expand Down Expand Up @@ -58,222 +59,7 @@
<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>
<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>
```

### 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>
```
{% endhtmlexample %}

{% endband %}

Expand Down
17 changes: 4 additions & 13 deletions elements/pf-avatar/docs/pf-avatar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,12 @@
{% endrenderOverview %}

{% band header="Usage" %}
<div style="display: flex; gap: 1em;">
<pf-avatar alt="Eleanore Stillwagon"></pf-avatar>
<pf-avatar alt="Libbie Koscinski" size="md"></pf-avatar>
<pf-avatar alt="Blanca Rohloff"></pf-avatar>
<pf-avatar alt="Edwardo Lindsey"
src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
</div>

```html
{% htmlexample style="display: flex; gap: 1em;" %}
<pf-avatar alt="Eleanore Stillwagon"></pf-avatar>
<pf-avatar alt="Libbie Koscinski"></pf-avatar>
<pf-avatar alt="Libbie Koscinski" size="md"></pf-avatar>
<pf-avatar alt="Blanca Rohloff"></pf-avatar>
<pf-avatar alt="Edwardo Lindsey"
src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
```
<pf-avatar alt="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
{% endhtmlexample %}
{% endband %}

{% renderSlots %}{% endrenderSlots %}
Expand Down
18 changes: 6 additions & 12 deletions elements/pf-badge/docs/pf-badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,24 @@
To provide context to your badge, it is highly encouraged that you also include an `aria-label` attribute in your markup.

### Default
{% htmlexample %}
<pf-badge aria-label="2 unread messages" number="2">2</pf-badge>
```html
<pf-badge aria-label="2 unread messages" number="2">2</pf-badge>
```
{% endhtmlexample %}

### With a threshold
This adds a "+" next to the number once the threshold value has been passed.

{% htmlexample %}
<pf-badge aria-label="2 unread messages" number="20" threshold="10">20</pf-badge>

```html
<pf-badge aria-label="2 unread messages" number="20" threshold="10">20</pf-badge>
```
{% endhtmlexample %}

### With a state
This adds a background color to the badge based on the state.

{% htmlexample %}
<pf-badge state="read" number="10">10</pf-badge>
<pf-badge state="unread" number="20">20</pf-badge>

```html
<pf-badge state="read" number="10">10</pf-badge>
<pf-badge state="unread" number="20">20</pf-badge>
```
{% endhtmlexample %}
{% endband %}

{% renderSlots %}{% endrenderSlots %}
Expand Down
Loading