Skip to content

Commit a31d362

Browse files
JimmyHoenderdaalJimmyHoenderdaal
authored
Accordion component (#2)
1 parent 5d9a1ea commit a31d362

File tree

5 files changed

+406
-4
lines changed

5 files changed

+406
-4
lines changed

‎README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ This package includes some Tailwind CSS styled Blade components, the components
88
- [Select](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/select/select.blade.php)
99
- [Textarea](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/textarea/textarea.blade.php)
1010
- [Label](https://github.com/rapidez/blade-components/blob/master/resources/views/components/label/label.blade.php)
11+
- [Accordion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/accordion/accordion.blade.php)
1112

1213
The idea with these components is to have a good starting point and centralized styling. Most of the components use a [Anonymous Index](https://laravel.com/docs/master/blade#anonymous-index-components), this way you have a default and variants can be added next to it. We're using the (currently undocumented) [component name guessing](https://github.com/laravel/framework/pull/52669) here.
1314

@@ -61,6 +62,17 @@ Just like any other Blade component, check out the [Laravel Blade docs](https://
6162
</x-rapidez::input.checkbox>
6263
```
6364

65+
#### Accordion
66+
67+
```blade
68+
<x-rapidez::accordion>
69+
<x-slot:label>Accordion Title</x-slot:label>
70+
<x-slot:content>
71+
Accordion content goes here
72+
</x-slot:content>
73+
</x-rapidez::accordion>
74+
```
75+
6476
## Preview
6577

6678
There is a preview Blade file included with all the components, to view that in your project you could register a route for it within `routes/web.php` and visit the `/components` route from your browser:

‎demo/components.html‎

Lines changed: 197 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
</script>
2424
</head>
2525
<body>
26-
<div class="flex flex-col container mx-auto my-20 gap-5">
26+
<div class="flex flex-col container mx-auto my-20 gap-5 px-5">
2727
<h1 class="font-bold text-xl">Rapidez Blade Components preview</h1>
2828

2929
<h2 class="font-bold text-lg">Input components</h2>
3030

31-
<div class="grid grid-cols-3 gap-5 [&>fieldset]:border [&>fieldset]:rounded [&>fieldset]:p-5">
31+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 [&>fieldset]:border [&>fieldset]:rounded [&>fieldset]:p-5">
3232
<h3 class="font-bold text-md">Base components</h3>
3333
<h3 class="font-bold text-md">Components with a label</h3>
3434
<h3 class="font-bold text-md">Components with a required label</h3>
@@ -162,6 +162,201 @@ <h2 class="font-bold text-lg">Button components</h2>
162162

163163
<h2 class="font-bold text-lg">Slideover component</h2>
164164
Soon...
165+
166+
<h2 class="font-bold text-lg">Accordion component</h2>
167+
168+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
169+
<div class="flex flex-col gap-3">
170+
<h3 class="font-bold text-md">Default</h3>
171+
<div class="flex flex-col group rounded border p-3">
172+
<input
173+
id="checkbox-question-1"
174+
name=""
175+
type="checkbox"
176+
class="peer hidden"
177+
/>
178+
<label
179+
for="checkbox-question-1"
180+
class="flex items-center gap-2 justify-between cursor-pointer font-bold"
181+
>
182+
Question 1
183+
</label>
184+
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
185+
<div class="overflow-hidden">
186+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
187+
</div>
188+
</div>
189+
</div>
190+
<div class="flex flex-col group rounded border p-3">
191+
<input
192+
id="checkbox-question-2"
193+
name=""
194+
type="checkbox"
195+
class="peer hidden"
196+
/>
197+
<label
198+
for="checkbox-question-2"
199+
class="flex items-center gap-2 justify-between cursor-pointer font-bold"
200+
>
201+
Question 2
202+
</label>
203+
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
204+
<div class="overflow-hidden">
205+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
206+
</div>
207+
</div>
208+
</div>
209+
</div>
210+
211+
<div class="flex flex-col gap-3">
212+
<h3 class="font-bold text-md">Radio</h3>
213+
<div class="flex flex-col group rounded border p-3">
214+
<input
215+
id="radio-question-1"
216+
name="questions"
217+
type="radio"
218+
class="peer hidden"
219+
/>
220+
<label
221+
for="radio-question-1"
222+
class="flex items-center gap-2 justify-between cursor-pointer font-bold"
223+
onclick="event.preventDefault(); document.getElementById('radio-question-1').checked = !document.getElementById('radio-question-1').checked;"
224+
>
225+
Question 1
226+
</label>
227+
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
228+
<div class="overflow-hidden">
229+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
230+
</div>
231+
</div>
232+
</div>
233+
<div class="flex flex-col group rounded border p-3">
234+
<input
235+
id="radio-question-2"
236+
name="questions"
237+
type="radio"
238+
class="peer hidden"
239+
/>
240+
<label
241+
for="radio-question-2"
242+
class="flex items-center gap-2 justify-between cursor-pointer font-bold"
243+
onclick="event.preventDefault(); document.getElementById('radio-question-2').checked = !document.getElementById('radio-question-2').checked;"
244+
>
245+
Question 2
246+
</label>
247+
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
248+
<div class="overflow-hidden">
249+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
250+
</div>
251+
</div>
252+
</div>
253+
</div>
254+
255+
<div class="flex flex-col gap-3">
256+
<h3 class="font-bold text-md">Mobile only</h3>
257+
<div class="flex flex-col group rounded border p-3">
258+
<input
259+
id="mobile-question-1"
260+
name=""
261+
type="checkbox"
262+
class="peer hidden"
263+
/>
264+
<label
265+
for="mobile-question-1"
266+
class="flex items-center gap-2 justify-between cursor-pointer md:cursor-auto font-bold"
267+
>
268+
Question 1
269+
</label>
270+
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all md:grid-rows-[1fr]">
271+
<div class="overflow-hidden">
272+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
273+
</div>
274+
</div>
275+
</div>
276+
<div class="flex flex-col group rounded border p-3">
277+
<input
278+
id="mobile-question-2"
279+
name=""
280+
type="checkbox"
281+
class="peer hidden"
282+
/>
283+
<label
284+
for="mobile-question-2"
285+
class="flex items-center gap-2 justify-between cursor-pointer md:cursor-auto font-bold"
286+
>
287+
Question 2
288+
</label>
289+
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all md:grid-rows-[1fr]">
290+
<div class="overflow-hidden">
291+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
292+
</div>
293+
</div>
294+
</div>
295+
</div>
296+
297+
<div class="flex flex-col gap-3">
298+
<h3 class="font-bold text-md">With rotating chevron</h3>
299+
<div class="flex flex-col group border rounded p-4">
300+
<input
301+
id="rotating-accordion"
302+
name=""
303+
type="checkbox"
304+
class="peer hidden"
305+
/>
306+
<label
307+
for="rotating-accordion"
308+
class="flex items-center gap-2 justify-between cursor-pointer"
309+
>
310+
<span>Click me to toggle</span>
311+
<svg class="w-5 h-5 group-has-[:checked]:rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
312+
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
313+
</svg>
314+
</label>
315+
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
316+
<div class="overflow-hidden">
317+
<div class="pt-4">
318+
This accordion demonstrates the rotating chevron using group-has-[:checked]:rotate-180 class.
319+
When you click the header, the chevron will rotate 180 degrees.
320+
</div>
321+
</div>
322+
</div>
323+
</div>
324+
</div>
325+
<div class="flex flex-col gap-3">
326+
<h3 class="font-bold text-md">Navigation example with background</h3>
327+
<div class="flex flex-col group border rounded p-4">
328+
<input
329+
id="navigation-accordion"
330+
name=""
331+
type="checkbox"
332+
class="peer hidden"
333+
/>
334+
<label
335+
for="navigation-accordion"
336+
class="flex items-center gap-2 justify-between cursor-pointer"
337+
>
338+
<div class="flex items-center justify-between w-full">
339+
<span>Shop Categories</span>
340+
<svg class="w-5 h-5 group-has-[:checked]:rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
341+
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
342+
</svg>
343+
</div>
344+
</label>
345+
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
346+
<div class="overflow-hidden">
347+
<ul class="p-5 bg-red-500 text-white rounded-lg mt-2">
348+
<li><a href="/what-is-new.html" class="block hover:underline">What's New</a></li>
349+
<li><a href="/women.html" class="block hover:underline">Women</a></li>
350+
<li><a href="/men.html" class="block hover:underline">Men</a></li>
351+
<li><a href="/gear.html" class="block hover:underline">Gear</a></li>
352+
<li><a href="/training.html" class="block hover:underline">Training</a></li>
353+
<li><a href="/sale.html" class="block hover:underline">Sale</a></li>
354+
</ul>
355+
</div>
356+
</div>
357+
</div>
358+
</div>
359+
</div>
165360
</div>
166361
</body>
167362
</html>

‎resources/views/components-preview.blade.php‎

Lines changed: 107 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
</script>
2424
</head>
2525
<body>
26-
<div class="flex flex-col container mx-auto my-20 gap-5">
26+
<div class="flex flex-col container mx-auto my-20 gap-5 px-5">
2727
<h1 class="font-bold text-xl">Rapidez Blade Components preview</h1>
2828

2929
<h2 class="font-bold text-lg">Input components</h2>
3030

31-
<div class="grid grid-cols-3 gap-5 [&>fieldset]:border [&>fieldset]:rounded [&>fieldset]:p-5">
31+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 [&>fieldset]:border [&>fieldset]:rounded [&>fieldset]:p-5">
3232
<h3 class="font-bold text-md">Base components</h3>
3333
<h3 class="font-bold text-md">Components with a label</h3>
3434
<h3 class="font-bold text-md">Components with a required label</h3>
@@ -146,6 +146,111 @@
146146

147147
<h2 class="font-bold text-lg">Slideover component</h2>
148148
Soon...
149+
150+
<h2 class="font-bold text-lg">Accordion component</h2>
151+
152+
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
153+
<div class="flex flex-col gap-3">
154+
<h3 class="font-bold text-md">Default</h3>
155+
<x-rapidez::accordion id="checkbox-question-1" class="rounded border p-3">
156+
<x-slot:label class="font-bold">
157+
Question 1
158+
</x-slot:label>
159+
<x-slot:content class="">
160+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
161+
</x-slot:content>
162+
</x-rapidez::accordion>
163+
<x-rapidez::accordion id="checkbox-question-2" class="rounded border p-3">
164+
<x-slot:label class="font-bold">
165+
Question 2
166+
</x-slot:label>
167+
<x-slot:content class="">
168+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
169+
</x-slot:content>
170+
</x-rapidez::accordion>
171+
</div>
172+
173+
<div class="flex flex-col gap-3">
174+
<h3 class="font-bold text-md">Radio</h3>
175+
<x-rapidez::accordion id="radio-question-1" type="radio" name="questions" class="rounded border p-3">
176+
<x-slot:label class="font-bold">
177+
Question 1
178+
</x-slot:label>
179+
<x-slot:content class="">
180+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
181+
</x-slot:content>
182+
</x-rapidez::accordion>
183+
<x-rapidez::accordion id="radio-question-2" type="radio" name="questions" class="rounded border p-3">
184+
<x-slot:label class="font-bold">
185+
Question 2
186+
</x-slot:label>
187+
<x-slot:content class="">
188+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
189+
</x-slot:content>
190+
</x-rapidez::accordion>
191+
</div>
192+
193+
<div class="flex flex-col gap-3">
194+
<h3 class="font-bold text-md">Mobile only</h3>
195+
<x-rapidez::accordion.mobile id="mobile-question-1" class="rounded border p-3">
196+
<x-slot:label class="font-bold">
197+
Question 1
198+
</x-slot:label>
199+
<x-slot:content class="">
200+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
201+
</x-slot:content>
202+
</x-rapidez::accordion.mobile>
203+
<x-rapidez::accordion.mobile id="mobile-question-2" class="rounded border p-3">
204+
<x-slot:label class="font-bold">
205+
Question 2
206+
</x-slot:label>
207+
<x-slot:content class="">
208+
Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Reprehenderit eum in deleniti dicta ducimus perspiciatis provident tempore. Consequuntur nemo blanditiis delectus, quasi velit illum ipsa quibusdam maiores cupiditate itaque repellendus.
209+
</x-slot:content>
210+
</x-rapidez::accordion.mobile>
211+
</div>
212+
213+
<div class="flex flex-col gap-3">
214+
<h3 class="font-bold text-md">With rotating chevron</h3>
215+
<x-rapidez::accordion class="border rounded p-4" id="rotating-accordion">
216+
<x-slot:label>
217+
<span>Click me to toggle</span>
218+
<svg class="w-5 h-5 group-has-[:checked]:rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
219+
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
220+
</svg>
221+
</x-slot:label>
222+
<x-slot:content>
223+
<div class="pt-4">
224+
This accordion demonstrates the rotating chevron using group-has-[:checked]:rotate-180 class.
225+
When you click the header, the chevron will rotate 180 degrees.
226+
</div>
227+
</x-slot:content>
228+
</x-rapidez::accordion>
229+
</div>
230+
<div class="flex flex-col gap-3">
231+
<h3 class="font-bold text-md">Navigation example with background</h3>
232+
<x-rapidez::accordion class="border rounded p-4" id="navigation-accordion">
233+
<x-slot:label>
234+
<div class="flex items-center justify-between w-full">
235+
<span>Shop Categories</span>
236+
<svg class="w-5 h-5 group-has-[:checked]:rotate-180 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
237+
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
238+
</svg>
239+
</div>
240+
</x-slot:label>
241+
<x-slot:content>
242+
<ul class="p-5 bg-red-500 text-white rounded-lg mt-2">
243+
<li><a href="/what-is-new.html" class="block hover:underline">What's New</a></li>
244+
<li><a href="/women.html" class="block hover:underline">Women</a></li>
245+
<li><a href="/men.html" class="block hover:underline">Men</a></li>
246+
<li><a href="/gear.html" class="block hover:underline">Gear</a></li>
247+
<li><a href="/training.html" class="block hover:underline">Training</a></li>
248+
<li><a href="/sale.html" class="block hover:underline">Sale</a></li>
249+
</ul>
250+
</x-slot:content>
251+
</x-rapidez::accordion>
252+
</div>
253+
</div>
149254
</div>
150255
</body>
151256
</html>

0 commit comments

Comments
 (0)