Skip to content

Commit 9d3d565

Browse files
joshfishmanjoshfishman
authored
Merge pull request #32 from zvidmarb/accordion
Revamped accordion with correct functionality and Material standards
2 parents 86bfa9e + c696e11 commit 9d3d565

4 files changed

Lines changed: 495 additions & 357 deletions

File tree

‎docs/accordion.md‎

Lines changed: 93 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -7,139 +7,132 @@ hide:
77
The Desktop Accordion Component for FAQ sections organizes frequently asked questions into collapsible sections. Each section to reveal the answer when clicked, providing users with an efficient way to access information without overwhelming the interface.
88
## Class
99
=== "FAQ/Desktop"
10-
<div class="btn-grid-1">
11-
<div class="grid-items">
12-
<div class="accordion">
13-
<button class="accordion-button">
14-
<span class='accordion-title'>Accordion Title</span>
15-
:material-chevron-up:{ .open }
16-
:material-chevron-down:{ .close }
17-
</button>
18-
<div class="panel">
19-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
20-
</div>
10+
<div class="btn-grid-1" data-theme>
11+
<div class="grid-items">
12+
<div style="display:flex; flex-direction: column;">
13+
<details class="accordion -desktop" name="desktop">
14+
<summary class="summary">
15+
<h4 class='title'>Accordion Title</h4>
16+
<span class="icon">expand_more</span>
17+
</summary>
18+
<p class="description">Only one accordion can be opened at a time! Expand the other accordion and this accordion will collapse. </p>
19+
</details>
20+
<details class="accordion -desktop" name="desktop">
21+
<summary class="summary">
22+
<h4 class='title'>Accordion Title</h4>
23+
<span class="icon">expand_more</span>
24+
</summary>
25+
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
26+
</details>
2127
</div>
2228
</div>
2329
</div>
2430
<br>
25-
# **States**
31+
## States
2632
=== "Collapsed"
27-
<div class="btn-grid-1">
28-
<div class="grid-items">
29-
<div class="accordion">
30-
<button class="accordion-button">
31-
<span class='accordion-title'>Accordion Title</span>
32-
:material-chevron-up:{ .open }
33-
:material-chevron-down:{ .close }
34-
</button>
35-
<div class="panel">
36-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
37-
</div>
38-
</div>
33+
<div class="btn-grid-1" data-theme>
34+
<div class="grid-items">
35+
<details class="accordion -desktop">
36+
<summary class="summary">
37+
<h4 class='title'>Accordion Title</h4>
38+
<span class="icon">expand_more</span>
39+
</summary>
40+
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
41+
</details>
3942
</div>
4043
</div>
4144
=== "Expanded"
42-
<div class="btn-grid-1">
43-
<div class="grid-items">
44-
<div class="accordion">
45-
<button class="accordion-button active">
46-
<span class='accordion-title'>Accordion Title</span>
47-
:material-chevron-up:{ .open }
48-
:material-chevron-down:{ .close }
49-
</button>
50-
<div class="panel">
51-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
52-
</div>
53-
</div>
45+
<div class="btn-grid-1" data-theme>
46+
<div class="grid-items">
47+
<details class="accordion -desktop" open>
48+
<summary class="summary active">
49+
<h4 class='title'>Accordion Title</h4>
50+
<span class="icon">expand_less</span>
51+
</summary>
52+
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
53+
</details>
5454
</div>
5555
</div>
5656
<br>
57-
# **Code**
57+
## Code
5858
=== "CSS"
59-
6059
``` css
6160
--8<-- "components/sass/components/_accordion.scss:accordion-desktop"
6261
```
63-
6462
=== "HTML"
65-
6663
``` html
67-
<div class="accordion">
68-
<button class="accordion-button">
69-
<span class='accordion-title'>Accordion Title</span>
70-
:material-chevron-up:{ .open }
71-
:material-chevron-down:{ .close }
72-
</button>
73-
<div class="panel">
74-
<p>Lorem ipsum dolor sit amet...</p>
75-
</div>
76-
</div>
64+
<!-- For exclusive accordions, add a common "name" attribute to each component -->
65+
<details class="accordion -desktop">
66+
<summary class="summary">
67+
<h4 class='title'>Accordion Title</h4>
68+
<span class="icon"></span>
69+
</summary>
70+
<p class="description">Lorem ipsum dolor sit amet...</p>
71+
</details>
7772
```
7873
=== "FAQ/Mobile"
79-
<div class="btn-grid-1">
74+
<div class="btn-grid-1" data-theme>
8075
<div class="grid-items">
81-
<div class="accordion mobile">
82-
<button class="accordion-button">
83-
<span class='accordion-title'>Accordion Title</span>
84-
:material-chevron-up:{ .open }
85-
:material-chevron-down:{ .close }
86-
</button>
87-
<div class="panel">
88-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
89-
</div>
90-
</div>
76+
<div style="display:flex; flex-direction: column;">
77+
<details class="accordion -mobile" name="mobile">
78+
<summary class="summary">
79+
<h5 class='title'>Accordion Title</h5>
80+
<span class="icon">expand_more</span>
81+
</summary>
82+
<p class="description">Only one accordion can be opened at a time! Expand the other accordion and this accordion will collapse.</p>
83+
</details>
84+
<details class="accordion -mobile" name="mobile">
85+
<summary class="summary">
86+
<h5 class='title'>Accordion Title</h5>
87+
<span class="icon">expand_more</span>
88+
</summary>
89+
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
90+
</details>
91+
</div>
9192
</div>
9293
</div>
9394
<br>
94-
# **States**
95+
## States
9596
=== "Collapsed"
96-
<div class="btn-grid-1">
97-
<div class="grid-items">
98-
<div class="accordion mobile">
99-
<button class="accordion-button">
100-
<span class='accordion-title'>Accordion Title</span>
101-
:material-chevron-up:{ .open }
102-
:material-chevron-down:{ .close }
103-
</button>
104-
<div class="panel">
105-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
106-
</div>
107-
</div>
97+
<div class="btn-grid-1" data-theme>
98+
<div class="grid-items">
99+
<details class="accordion -mobile">
100+
<summary class="summary">
101+
<h5 class='title'>Accordion Title</h5>
102+
<span class="icon">expand_more</span>
103+
</summary>
104+
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
105+
</details>
108106
</div>
109107
</div>
110108
=== "Expanded"
111-
<div class="btn-grid-1">
112-
<div class="grid-items">
113-
<div class="accordion mobile">
114-
<button class="accordion-button active">
115-
<span class='accordion-title'>Accordion Title</span>
116-
:material-chevron-up:{ .open }
117-
:material-chevron-down:{ .close }
118-
</button>
119-
<div class="panel">
120-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
121-
</div>
122-
</div>
109+
<div class="btn-grid-1" data-theme>
110+
<div class="grid-items">
111+
<details class="accordion -mobile" open>
112+
<summary class="summary active">
113+
<h5 class='title'>Accordion Title</h5>
114+
<span class="icon">expand_less</span>
115+
</summary>
116+
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
117+
</details>
118+
</div>
119+
</div>
123120
</div>
124121
</div>
125122
<br>
123+
## Code
126124
=== "CSS"
127-
128125
``` css
129-
--8<-- "components/sass/components/_accordion.scss:accordion-desktop"
126+
--8<-- "components/sass/components/_accordion.scss:accordion-mobile"
130127
```
131-
132128
=== "HTML"
133-
134129
``` html
135-
<div class="accordion">
136-
<button class="accordion-button">
137-
<span class='accordion-title'>Accordion Title</span>
138-
:material-chevron-up:{ .open }
139-
:material-chevron-down:{ .close }
140-
</button>
141-
<div class="panel">
142-
<p>Lorem ipsum dolor sit amet...</p>
143-
</div>
144-
</div>
130+
<!-- For exclusive accordions, add a common "name" attribute to each component -->
131+
<details class="accordion -mobile" name="mobile">
132+
<summary class="summary">
133+
<h5 class='title'>Accordion Title</h5>
134+
<span class="icon">expand_more</span>
135+
</summary>
136+
<p class="description">Lorem ipsum dolor sit amet...</p>
137+
</details>
145138
```

‎docs/components/sass/abstracts/_tokens.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -345,4 +345,53 @@
345345
--token-menu-item-hover-state-layer: var(--token-state-hover-layer);
346346
--token-menu-item-focus-state-layer: var(--token-state-focus-layer);
347347

348+
/* ------------------------------------------------------------
349+
Accordion Tokens
350+
------------------------------------------------------------ */
351+
--accordion-border: .125rem solid var(--color-primary);
352+
--accordion-desktop-height-collapsed: 5.5rem;
353+
--accordion-desktop-width: 32rem;
354+
--accordion-desktop-height-expanded: calc(var(--accordion-desktop-height-collapsed)
355+
+ var(--accordion-desktop-spacing-vertical-expanded)
356+
+( var(--accordion-desktop-paragraph-fontsize)
357+
* var(--accordion-desktop-paragraph-lineheight) ));
358+
--accordion-desktop-summary-padding: 1.5rem 1.25rem 0 1.25rem;
359+
--accordion-desktop-spacing-vertical: 1.5rem;
360+
--accordion-desktop-spacing-vertical-expanded: 1rem;
361+
--accordion-desktop-spacing-horizontal: 1.25rem;
362+
--accordion-desktop-summary-minheight: 4rem;
363+
--accordion-desktop-paragraph-fontsize: 1rem;
364+
--accordion-desktop-paragraph-lineheight: 1.5;
365+
--accordion-desktop-paragraph-fontstyle: 400 var(--accordion-desktop-paragraph-fontsize)/var(--accordion-desktop-paragraph-lineheight)
366+
'Roboto Regular', sans-serif;
367+
--accordion-desktop-paragraph-width: 29.5rem;
368+
--accordion-desktop-title-fontstyle: 600 1.25rem/1.3 'Roboto Semibold', sans-serif;
369+
--accordion-desktop-title-width: 25.75rem;
370+
--accordion-desktop-icon-size: 2.5rem;
371+
--accordion-desktop-icon-fontstyle: var(--accordion-desktop-icon-size) 'Material Icons Outlined';
372+
373+
--accordion-mobile-height-collapsed: 3.75rem;
374+
--accordion-mobile-height-expanded: calc(var(--accordion-mobile-height-collapsed)
375+
+ var(--accordion-mobile-spacing-vertical-expanded)
376+
+( var(--accordion-mobile-paragraph-fontsize)
377+
* var(--accordion-mobile-paragraph-lineheight) ));
378+
--accordion-mobile-width: 17.5rem;
379+
--accordion-mobile-summary-padding: 1rem 0.75rem 0 0.75rem;
380+
--accordion-mobile-spacing-vertical: 1rem;
381+
--accordion-mobile-spacing-vertical-expanded: 1rem;
382+
--accordion-mobile-spacing-horizontal: 1.25rem;
383+
--accordion-mobile-summary-minheight: 2.75rem;
384+
--accordion-mobile-paragraph-fontsize: 1rem;
385+
--accordion-mobile-paragraph-lineheight: 1.5;
386+
--accordion-mobile-paragraph-fontstyle: 400 var(--accordion-mobile-paragraph-fontsize)/var(--accordion-mobile-paragraph-lineheight)
387+
'Roboto Regular', sans-serif;
388+
--accordion-mobile-paragraph-width: 16rem;
389+
--accordion-mobile-title-fontstyle: 600 1.25rem/1.35 'Roboto Semibold', sans-serif;
390+
--accordion-mobile-title-width: 13.25rem;
391+
--accordion-mobile-icon-size: 1.75rem;
392+
--accordion-mobile-icon-fontstyle: var(--accordion-mobile-icon-size) 'Material Icons Outlined';
393+
394+
395+
396+
348397
}

0 commit comments

Comments
 (0)