Skip to content

Commit 9031f72

Browse files
estherbrunnerestherbrunner
authored
Merge pull request #27 from efflore/v0.8.5-docs
docs: tab-list and accordion-panel examples
2 parents 0a88222 + 8461319 commit 9031f72

8 files changed

+369
-47
lines changed

‎docs/assets/css/components.css

+6-10
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ my-slider {
5151
gap: var(--space-xs);
5252
padding-block: var(--space-s);
5353

54-
span {
54+
> span {
5555
width: var(--space-s);
5656
height: var(--space-s);
5757
border-radius: 50%;
@@ -183,7 +183,7 @@ tab-list {
183183
display: block;
184184
margin-bottom: var(--space-l);
185185

186-
> ul {
186+
> menu {
187187
display: flex;
188188
margin: 0 0 var(--space-s);
189189
padding: 0;
@@ -203,6 +203,10 @@ tab-list {
203203
color: var(--color-text);
204204
background-color: var(--color-secondary);
205205

206+
&:hover {
207+
background-color: var(--color-secondary-hover);
208+
}
209+
206210
&[aria-pressed="true"] {
207211
border-top: 2px solid var(--color-primary);
208212
background-color: var(--color-secondary-active);
@@ -211,14 +215,6 @@ tab-list {
211215
}
212216
}
213217

214-
@media (hover) {
215-
tab-list {
216-
> ul button:hover {
217-
background-color: var(--color-secondary-hover);
218-
}
219-
}
220-
}
221-
222218
accordion-panel {
223219
display: block;
224220

‎docs/assets/js/main.js

+34-20
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,13 @@ class CodeBlock extends UIElement {
5555
}
5656

5757
connectedCallback() {
58-
// enhance code block with Prism.js
58+
59+
// Enhance code block with Prism.js
5960
const language = this.getAttribute('language') || 'html'
6061
const content = this.querySelector('code')
6162
this.set('code', content.textContent.trim(), false)
6263
effect(enqueue => {
63-
// apply syntax highlighting while preserving Lit's marker nodes in Storybook
64+
// Apply syntax highlighting while preserving Lit's marker nodes in Storybook
6465
const code = document.createElement('code')
6566
code.innerHTML = Prism.highlight(this.get('code'), Prism.languages[language], language)
6667
enqueue(content, 'h', el => () => {
@@ -72,7 +73,7 @@ class CodeBlock extends UIElement {
7273
})
7374
})
7475

75-
// copy to clipboard
76+
// Copy to clipboard
7677
this.first('.copy').map(ui => on('click', async () => {
7778
const copyButton = ui.target
7879
const label = copyButton.textContent
@@ -91,7 +92,7 @@ class CodeBlock extends UIElement {
9192
}, status === 'success' ? 1000 : 3000)
9293
})(ui))
9394

94-
// expand
95+
// Expand
9596
this.first('.overlay').map(on('click', () => this.set('collapsed', false)))
9697
this.self.map(toggleAttribute('collapsed'))
9798
}
@@ -107,38 +108,51 @@ class TabList extends UIElement {
107108

108109
connectedCallback() {
109110
super.connectedCallback()
110-
this.set('active', 0, false)
111+
this.set('active', 0, false) // initial active tab
112+
113+
// Dynamically adjust accordion based on viewport size
111114
setTimeout(() => {
112115
if (this.get('media-viewport'))
113116
this.set('accordion', () => ['xs', 'sm'].includes(this.get('media-viewport')))
114117
}, 0)
115-
this.self
116-
.map(toggleAttribute('accordion'))
117-
this.first('.tab-nav')
118-
.map(setProperty('ariaHidden', 'accordion'))
119-
this.all('.tab-nav button')
118+
119+
// Reflect accordion attribute (may be used for styling)
120+
this.self.forEach(toggleAttribute('accordion'))
121+
122+
// Hide accordion tab navigation when in accordion mode
123+
this.first('menu').forEach(setProperty('ariaHidden', 'accordion'))
124+
125+
// Update active tab state and bind click handlers
126+
this.all('menu button')
120127
.map((ui, idx) => setProperty('ariaPressed', () => this.get('active') === idx)(ui))
121-
.map((ui, idx) => on('click', () => this.set('active', idx))(ui))
122-
this.all('accordion-panel')
123-
.map((ui, idx) => pass({
124-
open: () => ui.host.get('active') === idx,
125-
collapsible: 'accordion'
126-
})(ui))
128+
.forEach((ui, idx) => on('click', () => this.set('active', idx))(ui))
129+
130+
// Pass open and collapsible states to accordion panels
131+
this.all('accordion-panel').forEach((ui, idx) => pass({
132+
open: () => ui.host.get('active') === idx,
133+
collapsible: 'accordion'
134+
})(ui))
127135
}
128136
}
129137
TabList.define('tab-list')
130138

131139
class AccordionPanel extends UIElement {
132140
connectedCallback() {
133-
this.set('open', this.hasAttribute('open'))
134-
this.set('collapsible', this.hasAttribute('collapsible'))
141+
142+
// Set defaults from attributes
143+
this.set('open', this.hasAttribute('open'), false)
144+
this.set('collapsible', this.hasAttribute('collapsible'), false)
145+
146+
// Handle open and collapsible state changes
135147
this.self
136148
.map(toggleAttribute('open'))
137149
.map(toggleAttribute('collapsible'))
138-
.map(setProperty('ariaHidden', () => !this.get('open') && !this.get('collapsible')))
150+
.forEach(setProperty('ariaHidden', () => !this.get('open') && !this.get('collapsible')))
151+
152+
// Control inner details panel
139153
this.first('details')
140154
.map(setProperty('open'))
141-
.map(setProperty('ariaDisabled', () => !this.get('collapsible')))
155+
.forEach(setProperty('ariaDisabled', () => !this.get('collapsible')))
142156
}
143157
}
144158
AccordionPanel.define('accordion-panel')

‎docs/assets/js/main.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/examples-recipes.html

+39-9
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ <h2>MySlider Example</h2>
142142
</div>
143143
<accordion-panel collapsible>
144144
<details>
145-
<summary>Source Code</summary>
145+
<summary>MySlider Source Code</summary>
146146
<lazy-load src="./examples/my-slider.html">
147147
<p class="loading">Loading...</p>
148148
</lazy-load>
@@ -156,23 +156,53 @@ <h2>TabList and AccordionPanel Example</h2>
156156
<component-demo>
157157
<div class="preview">
158158
<tab-list>
159-
<button class="tab-button">Tab 1</button>
160-
<button class="tab-button">Tab 2</button>
161-
<button class="tab-button">Tab 3</button>
162-
163-
<accordion-panel>Content for Tab 1</accordion-panel>
164-
<accordion-panel>Content for Tab 2</accordion-panel>
165-
<accordion-panel>Content for Tab 3</accordion-panel>
159+
<menu>
160+
<li><button type="button" aria-pressed="true">Tab 1</button></li>
161+
<li><button type="button">Tab 2</button></li>
162+
<li><button type="button">Tab 3</button></li>
163+
</menu>
164+
<accordion-panel>
165+
<details open aria-disabled="true">
166+
<summary class="visually-hidden">
167+
<div class="summary">Tab 1</div>
168+
</summary>
169+
Content for Tab 1
170+
</details>
171+
</accordion-panel>
172+
<accordion-panel>
173+
<details aria-disabled="true">
174+
<summary class="visually-hidden">
175+
<div class="summary">Tab 2</div>
176+
</summary>
177+
Content for Tab 2
178+
</details>
179+
</accordion-panel>
180+
<accordion-panel>
181+
<details aria-disabled="true">
182+
<summary class="visually-hidden">
183+
<div class="summary">Tab 3</div>
184+
</summary>
185+
Content for Tab 3
186+
</details>
187+
</accordion-panel>
166188
</tab-list>
167189
</div>
168190
<accordion-panel collapsible>
169191
<details>
170-
<summary>Source Code</summary>
192+
<summary>TabList Source Code</summary>
171193
<lazy-load src="./examples/tab-list.html">
172194
<p class="loading">Loading...</p>
173195
</lazy-load>
174196
</details>
175197
</accordion-panel>
198+
<accordion-panel collapsible>
199+
<details>
200+
<summary>AccordionPanel Source Code</summary>
201+
<lazy-load src="./examples/accordion-panel.html">
202+
<p class="loading">Loading...</p>
203+
</lazy-load>
204+
</details>
205+
</accordion-panel>
176206
</component-demo>
177207
</section>
178208

‎docs/examples/accordion-panel.html

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<tab-list>
2+
<menu>
3+
<li><button type="button" aria-pressed="true">HTML</button></li>
4+
<li><button type="button">CSS</button></li>
5+
<li><button type="button">JavaScript</button></li>
6+
</menu>
7+
<accordion-panel open>
8+
<details open aria-disabled="true">
9+
<summary class="visually-hidden">
10+
<div class="summary">HTML</div>
11+
</summary>
12+
<code-block language="html" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
13+
<p class="meta">
14+
<span class="file">accordion-panel.html</span>
15+
<span class="language">html</span>
16+
</p>
17+
<pre><code class="language-html">&lt;accordion-panel&gt;
18+
&lt;details open aria-disabled="true"&gt;
19+
&lt;summary class="visually-hidden"&gt;
20+
&lt;div class="summary"&gt;Tab 1&lt;/div&gt;
21+
&lt;/summary&gt;
22+
Content for Tab 1
23+
&lt;/details&gt;
24+
&lt;/accordion-panel&gt;
25+
&lt;accordion-panel&gt;
26+
&lt;details aria-disabled="true"&gt;
27+
&lt;summary class="visually-hidden"&gt;
28+
&lt;div class="summary"&gt;Tab 2&lt;/div&gt;
29+
&lt;/summary&gt;
30+
Content for Tab 2
31+
&lt;/details&gt;
32+
&lt;/accordion-panel&gt;
33+
&lt;accordion-panel&gt;
34+
&lt;details aria-disabled="true"&gt;
35+
&lt;summary class="visually-hidden"&gt;
36+
&lt;div class="summary"&gt;Tab 3&lt;/div&gt;
37+
&lt;/summary&gt;
38+
Content for Tab 3
39+
&lt;/details&gt;
40+
&lt;/accordion-panel&gt;</code></pre>
41+
<input-button class="copy">
42+
<button type="button" class="secondary small">Copy</button>
43+
</input-button>
44+
</code-block>
45+
</details>
46+
</accordion-panel>
47+
<accordion-panel>
48+
<details aria-disabled="true">
49+
<summary class="visually-hidden">
50+
<div class="summary">CSS</div>
51+
</summary>
52+
<code-block language="css" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
53+
<p class="meta">
54+
<span class="file">accordion-panel.css</span>
55+
<span class="language">css</span>
56+
</p>
57+
<pre><code class="language-css">accordion-panel {
58+
display: block;
59+
60+
> details {
61+
62+
& summary {
63+
cursor: pointer;
64+
font-size: var(--font-size-m);
65+
font-weight: var(--font-weight-bold);
66+
margin: 0 0 var(--space-s);
67+
}
68+
69+
::marker,
70+
::-webkit-details-marker {
71+
color: var(--color-text-soft);
72+
}
73+
74+
.summary {
75+
display: inline-block;
76+
margin-left: var(--space-xs);
77+
}
78+
79+
&[open] {
80+
margin-bottom: var(--space-m);
81+
}
82+
83+
&[aria-disabled="true"] {
84+
85+
& summary {
86+
pointer-events: none;
87+
display: block;
88+
cursor: text;
89+
}
90+
91+
::marker,
92+
::-webkit-details-marker {
93+
display: none;
94+
}
95+
96+
.summary {
97+
margin-left: 0;
98+
}
99+
}
100+
}
101+
}</code></pre>
102+
<input-button class="copy">
103+
<button type="button" class="secondary small">Copy</button>
104+
</input-button>
105+
</code-block>
106+
</details>
107+
</accordion-panel>
108+
<accordion-panel>
109+
<details aria-disabled="true">
110+
<summary class="visually-hidden">
111+
<div class="summary">JavaScript</div>
112+
</summary>
113+
<code-block language="js" copy-success="Copied!" copy-error="Error trying to copy to clipboard!">
114+
<p class="meta">
115+
<span class="file">accordion-panel.js</span>
116+
<span class="language">js</span>
117+
</p>
118+
<pre><code class="language-js">import { UIElement, on, setProperty, toggleAttribute } from '@efflore/ui-element'
119+
120+
class AccordionPanel extends UIElement {
121+
connectedCallback() {
122+
123+
// Set defaults from attributes
124+
this.set('open', this.hasAttribute('open'), false)
125+
this.set('collapsible', this.hasAttribute('collapsible'), false)
126+
127+
// Handle open and collapsible state changes
128+
this.self
129+
.map(toggleAttribute('open'))
130+
.map(toggleAttribute('collapsible'))
131+
.forEach(setProperty('ariaHidden', () => !this.get('open') && !this.get('collapsible')))
132+
133+
// Control inner details panel
134+
this.first('details')
135+
.map(setProperty('open'))
136+
.forEach(setProperty('ariaDisabled', () => !this.get('collapsible')))
137+
}
138+
}
139+
AccordionPanel.define('accordion-panel')</code></pre>
140+
<input-button class="copy">
141+
<button type="button" class="secondary small">Copy</button>
142+
</input-button>
143+
</code-block>
144+
</details>
145+
</accordion-panel>
146+
</tab-list>

‎docs/examples/my-counter.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<tab-list>
2-
<ul class="tab-nav">
3-
<li><button type="button">HTML</button></li>
2+
<menu>
3+
<li><button type="button" aria-pressed="true">HTML</button></li>
44
<li><button type="button">CSS</button></li>
55
<li><button type="button">JavaScript</button></li>
6-
</ul>
6+
</menu>
77
<accordion-panel open>
88
<details open aria-disabled="true">
99
<summary class="visually-hidden">

‎docs/examples/my-slider.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<tab-list>
2-
<ul class="tab-nav">
3-
<li><button type="button">HTML</button></li>
2+
<menu>
3+
<li><button type="button" aria-pressed="true">HTML</button></li>
44
<li><button type="button">CSS</button></li>
55
<li><button type="button">JavaScript</button></li>
6-
</ul>
6+
</menu>
77
<accordion-panel open>
88
<details open aria-disabled="true">
99
<summary class="visually-hidden">
@@ -76,7 +76,7 @@
7676
gap: var(--space-xs);
7777
padding-block: var(--space-s);
7878

79-
span {
79+
> span {
8080
width: var(--space-s);
8181
height: var(--space-s);
8282
border-radius: 50%;

0 commit comments

Comments
 (0)