Skip to content

Commit 5b8155f

Browse files
bennypowersbennypowers
committed
docs: migrate rest of htmlexamples
1 parent 75ebfe9 commit 5b8155f

File tree

19 files changed

+620
-1405
lines changed

19 files changed

+620
-1405
lines changed

‎elements/pf-avatar/docs/pf-avatar.md‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,11 @@
33
{% endrenderOverview %}
44

55
{% band header="Usage" %}
6-
<div style="display: flex; gap: 1em;">
7-
<pf-avatar alt="Eleanore Stillwagon"></pf-avatar>
8-
<pf-avatar alt="Libbie Koscinski" size="md"></pf-avatar>
9-
<pf-avatar alt="Blanca Rohloff"></pf-avatar>
10-
<pf-avatar alt="Edwardo Lindsey"
11-
src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
12-
</div>
13-
14-
{% htmlexample %}
15-
```html
6+
{% htmlexample style="display: flex; gap: 1em;" %}
167
<pf-avatar alt="Eleanore Stillwagon"></pf-avatar>
178
<pf-avatar alt="Libbie Koscinski" size="md"></pf-avatar>
189
<pf-avatar alt="Blanca Rohloff"></pf-avatar>
19-
<pf-avatar alt="Edwardo Lindsey"
20-
src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
21-
```
10+
<pf-avatar alt="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
2211
{% endhtmlexample %}
2312
{% endband %}
2413

‎elements/pf-badge/docs/pf-badge.md‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,23 @@
88
To provide context to your badge, it is highly encouraged that you also include an `aria-label` attribute in your markup.
99

1010
### Default
11-
<pf-badge aria-label="2 unread messages" number="2">2</pf-badge>
1211
{% htmlexample %}
13-
```html
1412
<pf-badge aria-label="2 unread messages" number="2">2</pf-badge>
15-
```
1613
{% endhtmlexample %}
1714

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

21-
<pf-badge aria-label="2 unread messages" number="20" threshold="10">20</pf-badge>
22-
2318
{% htmlexample %}
24-
```html
2519
<pf-badge aria-label="2 unread messages" number="20" threshold="10">20</pf-badge>
26-
```
2720
{% endhtmlexample %}
2821

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

32-
<pf-badge state="read" number="10">10</pf-badge>
33-
<pf-badge state="unread" number="20">20</pf-badge>
34-
3525
{% htmlexample %}
36-
```html
3726
<pf-badge state="read" number="10">10</pf-badge>
3827
<pf-badge state="unread" number="20">20</pf-badge>
39-
```
4028
{% endhtmlexample %}
4129
{% endband %}
4230

‎elements/pf-button/docs/pf-button.md‎

Lines changed: 42 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -26,80 +26,48 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
2626
{% endrenderOverview %}
2727

2828
{% band header="Usage" %}
29-
#### Link variant
30-
<pf-button variant="link" id="test">
31-
<svg fill="currentColor" style="vertical-align:-0.125em" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true">
32-
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path>
33-
</svg>
34-
Link
35-
</pf-button>
36-
<pf-button variant="link" icon-set="patternfly" icon="arrow" icon-position="right">Link</pf-button>
37-
<pf-button variant="link" inline>Inline Link</pf-button>
38-
<pf-button variant="link" danger>Danger Link</pf-button>
39-
40-
{% htmlexample %}
41-
```html
42-
<pf-button variant="link" id="test">
43-
<svg fill="currentColor" style="vertical-align:-0.125em" height="1em" width="1em" viewBox="0 0 512 512" aria-hidden="true">
44-
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path>
45-
</svg>
46-
Link
47-
</pf-button>
48-
<pf-button variant="link" icon-set="patternfly" icon="arrow" icon-position="right">Link</pf-button>
49-
<pf-button variant="link" inline>Inline Link</pf-button>
50-
<pf-button variant="link" danger>Danger Link</pf-button>
51-
```
52-
{% endhtmlexample %}
53-
54-
#### Plain button
55-
56-
<pf-button plain>
57-
<svg aria-label="Action" fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
58-
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
59-
</svg>
60-
</pf-button>
61-
62-
{% htmlexample %}
63-
```html
64-
<pf-button plain>
65-
<svg aria-label="Action" fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
66-
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
67-
</svg>
68-
</pf-button>
69-
```
70-
{% endhtmlexample %}
71-
72-
#### Control variant
73-
74-
<pf-button variant="control">Control</pf-button>
75-
<pf-button variant="control">
76-
<svg aria-label="Copy" fill="currentColor" height="1em" width="1em" viewBox="0 0 448 512">
77-
<path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/>
78-
</svg>
79-
</pf-button>
80-
81-
{% htmlexample %}
82-
```html
83-
<pf-button variant="control">Control</pf-button>
84-
<pf-button variant="control">
85-
<svg aria-label="Copy" fill="currentColor" height="1em" width="1em" viewBox="0 0 448 512">
86-
<path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/>
87-
</svg>
88-
</pf-button>
89-
```
90-
{% endhtmlexample %}
91-
92-
<h3>Size</h3>
93-
<pf-button>Medium Button</pf-button>
94-
<pf-button size="large">Large Button</pf-button>
95-
96-
{% htmlexample %}
97-
```html
98-
<pf-button>Medium Button</pf-button>
99-
<pf-button size="large">Large Button</pf-button>
100-
```
101-
{% endhtmlexample %}
102-
29+
### Link variant
30+
{% htmlexample %}
31+
<pf-button variant="link" id="test">
32+
<svg fill="currentColor"
33+
style="vertical-align:-0.125em"
34+
height="1em"
35+
width="1em"
36+
viewBox="0 0 512 512"
37+
aria-hidden="true">
38+
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/>
39+
</svg>
40+
Link
41+
</pf-button>
42+
<pf-button variant="link" icon-set="patternfly" icon="arrow" icon-position="right">Link</pf-button>
43+
<pf-button variant="link" inline>Inline Link</pf-button>
44+
<pf-button variant="link" danger>Danger Link</pf-button>
45+
{% endhtmlexample %}
46+
47+
### Plain button
48+
{% htmlexample %}
49+
<pf-button plain>
50+
<svg aria-label="Action" fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
51+
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
52+
</svg>
53+
</pf-button>
54+
{% endhtmlexample %}
55+
56+
### Control variant
57+
{% htmlexample %}
58+
<pf-button variant="control">Control</pf-button>
59+
<pf-button variant="control">
60+
<svg aria-label="Copy" fill="currentColor" height="1em" width="1em" viewBox="0 0 448 512">
61+
<path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/>
62+
</svg>
63+
</pf-button>
64+
{% endhtmlexample %}
65+
66+
### Size
67+
{% htmlexample %}
68+
<pf-button>Medium Button</pf-button>
69+
<pf-button size="large">Large Button</pf-button>
70+
{% endhtmlexample %}
10371
{% endband %}
10472

10573
{% renderSlots %}{% endrenderSlots %}

‎elements/pf-card/docs/pf-card.md‎

Lines changed: 5 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -11,89 +11,49 @@
1111

1212
{% band header="Usage" %}
1313

14-
<h3 slot="header">Compact card</h3>
15-
<pf-card size="compact">
16-
<h3 slot="header">Header</h3>
17-
<p>This is the compact card</p>
18-
<a slot="footer" href="#">Link in the footer</a>
19-
</pf-card>
20-
14+
### Compact card
2115
{% htmlexample %}
22-
```html
2316
<pf-card size="compact">
2417
<h3 slot="header">Header</h3>
2518
<p>This is the compact card</p>
2619
<a slot="footer" href="#">Link in the footer</a>
2720
</pf-card>
28-
```
2921
{% endhtmlexample %}
3022

31-
<h3 slot="header">Rounded card</h3>
32-
<pf-card rounded>
33-
<h3 slot="header">Header</h3>
34-
<p>This is the rounded card</p>
35-
<a slot="footer" href="#">Link in the footer</a>
36-
</pf-card>
37-
23+
### Rounded card
3824
{% htmlexample %}
39-
```html
4025
<pf-card rounded>
4126
<h3 slot="header">Header</h3>
4227
<p>This is the rounded card</p>
4328
<a slot="footer" href="#">Link in the footer</a>
4429
</pf-card>
45-
```
4630
{% endhtmlexample %}
4731

48-
<h3 slot="header">Large card</h3>
49-
<pf-card size="large">
50-
<h3 slot="header">Large card</h3>
51-
<p>This is the large card</p>
52-
<a slot="footer" href="#">Link in the footer</a>
53-
</pf-card>
54-
32+
### Large card
5533
{% htmlexample %}
56-
```html
5734
<pf-card size="large">
5835
<h3 slot="header">Large card</h3>
5936
<p>This is the large card</p>
6037
<a slot="footer" href="#">Link in the footer</a>
6138
</pf-card>
62-
```
6339
{% endhtmlexample %}
6440

65-
<h3 slot="header">Full Height card</h3>
66-
<pf-card fullHeight>
67-
<h3 slot="header">Header</h3>
68-
<p>This is the full height card</p>
69-
<a slot="footer" href="#">Link in the footer</a>
70-
</pf-card>
71-
41+
### Full Height card
7242
{% htmlexample %}
73-
```html
7443
<pf-card fullHeight>
7544
<h3 slot="header">Header</h3>
7645
<p>This is the full height card</p>
7746
<a slot="footer" href="#">Link in the footer</a>
7847
</pf-card>
79-
```
8048
{% endhtmlexample %}
8149

82-
<h3 slot="header">Plain card</h3>
83-
<pf-card plain>
84-
<h3 slot="header">Header</h3>
85-
<p>This is the plain card</p>
86-
<a slot="footer" href="#">Link in the footer</a>
87-
</pf-card>
88-
50+
### Plain card
8951
{% htmlexample %}
90-
```html
9152
<pf-card plain>
9253
<h3 slot="header">Header</h3>
9354
<p>This is the plain card</p>
9455
<a slot="footer" href="#">Link in the footer</a>
9556
</pf-card>
96-
```
9757
{% endhtmlexample %}
9858
{% endband %}
9959

0 commit comments

Comments
 (0)