Skip to content

Commit d41f805

Browse files
zeroedinzeroedin
authored
Merge branch 'main' into fix/tools/dev-server-config
2 parents 7657e36 + 83165dd commit d41f805

File tree

21 files changed

+803
-1449
lines changed

21 files changed

+803
-1449
lines changed

‎docs/main.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -699,6 +699,23 @@ code {
699699
font-size: 14px;
700700
}
701701

702+
703+
.html-example {
704+
display: flex;
705+
}
706+
707+
.html-example summary {
708+
cursor: pointer;
709+
}
710+
711+
.html-example p:empty {
712+
display: none;
713+
}
714+
715+
.html-example pre[class*="language-"] {
716+
margin: 0;
717+
}
718+
702719
.push-top {
703720
margin-top: var(--pf-theme--container-spacer, 0.83em);
704721
}

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

Lines changed: 2 additions & 216 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
{% endrenderOverview %}
3131

3232
{% band header="Usage" %}
33+
{% htmlexample %}
3334
<pf-accordion>
3435
<pf-accordion-header>
3536
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
@@ -58,222 +59,7 @@
5859
<a href="#">Call to action</a>
5960
</pf-accordion-panel>
6061
</pf-accordion>
61-
62-
```html
63-
<pf-accordion>
64-
<pf-accordion-header>
65-
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
66-
</pf-accordion-header>
67-
<pf-accordion-panel>
68-
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
69-
<a href="#">Call to action</a>
70-
</pf-accordion-panel>
71-
<pf-accordion-header>
72-
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
73-
</pf-accordion-header>
74-
<pf-accordion-panel>
75-
<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>
76-
</pf-accordion-panel>
77-
<pf-accordion-header>
78-
<h3>Nostrud ad sit commodo nostrud?</h3>
79-
</pf-accordion-header>
80-
<pf-accordion-panel>
81-
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
82-
</pf-accordion-panel>
83-
<pf-accordion-header>
84-
<h3>Reprehenderit cupidatat labore?</h3>
85-
</pf-accordion-header>
86-
<pf-accordion-panel>
87-
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
88-
<a href="#">Call to action</a>
89-
</pf-accordion-panel>
90-
</pf-accordion>
91-
```
92-
93-
### Single Expanded Behavior
94-
<pf-accordion single>
95-
<pf-accordion-header>
96-
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
97-
</pf-accordion-header>
98-
<pf-accordion-panel>
99-
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
100-
<a href="#">Call to action</a>
101-
</pf-accordion-panel>
102-
<pf-accordion-header expanded>
103-
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
104-
</pf-accordion-header>
105-
<pf-accordion-panel>
106-
<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>
107-
</pf-accordion-panel>
108-
<pf-accordion-header>
109-
<h3>Nostrud ad sit commodo nostrud?</h3>
110-
</pf-accordion-header>
111-
<pf-accordion-panel>
112-
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
113-
</pf-accordion-panel>
114-
<pf-accordion-header>
115-
<h3>Reprehenderit cupidatat labore?</h3>
116-
</pf-accordion-header>
117-
<pf-accordion-panel>
118-
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
119-
<a href="#">Call to action</a>
120-
</pf-accordion-panel>
121-
</pf-accordion>
122-
123-
```html
124-
<pf-accordion single>
125-
<pf-accordion-header>
126-
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
127-
</pf-accordion-header>
128-
<pf-accordion-panel>
129-
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
130-
<a href="#">Call to action</a>
131-
</pf-accordion-panel>
132-
<pf-accordion-header expanded>
133-
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
134-
</pf-accordion-header>
135-
<pf-accordion-panel>
136-
<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>
137-
</pf-accordion-panel>
138-
<pf-accordion-header>
139-
<h3>Nostrud ad sit commodo nostrud?</h3>
140-
</pf-accordion-header>
141-
<pf-accordion-panel>
142-
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
143-
</pf-accordion-panel>
144-
<pf-accordion-header>
145-
<h3>Reprehenderit cupidatat labore?</h3>
146-
</pf-accordion-header>
147-
<pf-accordion-panel>
148-
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
149-
<a href="#">Call to action</a>
150-
</pf-accordion-panel>
151-
</pf-accordion>
152-
```
153-
154-
155-
### Fixed with multiple expand behavior
156-
<pf-accordion >
157-
<pf-accordion-header>
158-
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
159-
</pf-accordion-header>
160-
<pf-accordion-panel>
161-
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
162-
<a href="#">Call to action</a>
163-
</pf-accordion-panel>
164-
<pf-accordion-header>
165-
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
166-
</pf-accordion-header>
167-
<pf-accordion-panel>
168-
<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>
169-
</pf-accordion-panel>
170-
<pf-accordion-header>
171-
<h3>Nostrud ad sit commodo nostrud?</h3>
172-
</pf-accordion-header>
173-
<pf-accordion-panel>
174-
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
175-
</pf-accordion-panel>
176-
<pf-accordion-header>
177-
<h3>Reprehenderit cupidatat labore?</h3>
178-
</pf-accordion-header>
179-
<pf-accordion-panel fixed>
180-
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
181-
<a href="#">Call to action</a>
182-
</pf-accordion-panel>
183-
</pf-accordion>
184-
185-
```html
186-
<pf-accordion>
187-
<pf-accordion-header>
188-
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
189-
</pf-accordion-header>
190-
<pf-accordion-panel>
191-
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
192-
<a href="#">Call to action</a>
193-
</pf-accordion-panel>
194-
<pf-accordion-header>
195-
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
196-
</pf-accordion-header>
197-
<pf-accordion-panel>
198-
<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>
199-
</pf-accordion-panel>
200-
<pf-accordion-header>
201-
<h3>Nostrud ad sit commodo nostrud?</h3>
202-
</pf-accordion-header>
203-
<pf-accordion-panel>
204-
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
205-
</pf-accordion-panel>
206-
<pf-accordion-header>
207-
<h3>Reprehenderit cupidatat labore?</h3>
208-
</pf-accordion-header>
209-
<pf-accordion-panel fixed>
210-
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
211-
<a href="#">Call to action</a>
212-
</pf-accordion-panel>
213-
</pf-accordion>
214-
```
215-
216-
217-
### Bordered
218-
<pf-accordion bordered>
219-
<pf-accordion-header>
220-
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
221-
</pf-accordion-header>
222-
<pf-accordion-panel>
223-
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
224-
<a href="#">Call to action</a>
225-
</pf-accordion-panel>
226-
<pf-accordion-header>
227-
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
228-
</pf-accordion-header>
229-
<pf-accordion-panel>
230-
<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>
231-
</pf-accordion-panel>
232-
<pf-accordion-header>
233-
<h3>Nostrud ad sit commodo nostrud?</h3>
234-
</pf-accordion-header>
235-
<pf-accordion-panel>
236-
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
237-
</pf-accordion-panel>
238-
<pf-accordion-header>
239-
<h3>Reprehenderit cupidatat labore?</h3>
240-
</pf-accordion-header>
241-
<pf-accordion-panel>
242-
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
243-
<a href="#">Call to action</a>
244-
</pf-accordion-panel>
245-
</pf-accordion>
246-
247-
```html
248-
<pf-accordion bordered>
249-
<pf-accordion-header>
250-
<h3>Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?</h3>
251-
</pf-accordion-header>
252-
<pf-accordion-panel>
253-
<p>Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.</p>
254-
<a href="#">Call to action</a>
255-
</pf-accordion-panel>
256-
<pf-accordion-header>
257-
<h3>Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?</h3>
258-
</pf-accordion-header>
259-
<pf-accordion-panel>
260-
<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>
261-
</pf-accordion-panel>
262-
<pf-accordion-header>
263-
<h3>Nostrud ad sit commodo nostrud?</h3>
264-
</pf-accordion-header>
265-
<pf-accordion-panel>
266-
<p>Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.</p>
267-
</pf-accordion-panel>
268-
<pf-accordion-header>
269-
<h3>Reprehenderit cupidatat labore?</h3>
270-
</pf-accordion-header>
271-
<pf-accordion-panel>
272-
<p>Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.</p>
273-
<a href="#">Call to action</a>
274-
</pf-accordion-panel>
275-
</pf-accordion>
276-
```
62+
{% endhtmlexample %}
27763

27864
{% endband %}
27965

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

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,12 @@
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-
```html
6+
{% htmlexample style="display: flex; gap: 1em;" %}
157
<pf-avatar alt="Eleanore Stillwagon"></pf-avatar>
16-
<pf-avatar alt="Libbie Koscinski"></pf-avatar>
8+
<pf-avatar alt="Libbie Koscinski" size="md"></pf-avatar>
179
<pf-avatar alt="Blanca Rohloff"></pf-avatar>
18-
<pf-avatar alt="Edwardo Lindsey"
19-
src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
20-
```
10+
<pf-avatar alt="Edwardo Lindsey" src="https://clayto.com/2014/03/rgb-webgl-color-cube/colorcube.jpg"></pf-avatar>
11+
{% endhtmlexample %}
2112
{% endband %}
2213

2314
{% renderSlots %}{% endrenderSlots %}

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

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,24 @@
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+
{% htmlexample %}
1112
<pf-badge aria-label="2 unread messages" number="2">2</pf-badge>
12-
```html
13-
<pf-badge aria-label="2 unread messages" number="2">2</pf-badge>
14-
```
13+
{% endhtmlexample %}
1514

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

18+
{% htmlexample %}
1919
<pf-badge aria-label="2 unread messages" number="20" threshold="10">20</pf-badge>
20-
21-
```html
22-
<pf-badge aria-label="2 unread messages" number="20" threshold="10">20</pf-badge>
23-
```
20+
{% endhtmlexample %}
2421

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

25+
{% htmlexample %}
2826
<pf-badge state="read" number="10">10</pf-badge>
2927
<pf-badge state="unread" number="20">20</pf-badge>
30-
31-
```html
32-
<pf-badge state="read" number="10">10</pf-badge>
33-
<pf-badge state="unread" number="20">20</pf-badge>
34-
```
28+
{% endhtmlexample %}
3529
{% endband %}
3630

3731
{% renderSlots %}{% endrenderSlots %}

0 commit comments

Comments
 (0)