Skip to content

add accordion component #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 73 commits into from
Nov 20, 2024
Merged

add accordion component #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
73 commits
Select commit Hold shift + click to select a range
ae6dca8
add accordion component
JimmyHoenderdaal Sep 10, 2024
1b12dbd
twMerge on div
JimmyHoenderdaal Sep 10, 2024
df250b3
Comment improvements
JimmyHoenderdaal Sep 10, 2024
dfa787e
Add overflow-hidden div inside component itself
JimmyHoenderdaal Sep 10, 2024
94f0d66
Update comment
JimmyHoenderdaal Sep 11, 2024
728314e
Accordion info changes
royduin Oct 1, 2024
6982bbb
Merge branch 'master' into feature/accordion
royduin Oct 1, 2024
f27c297
Preview + example code
royduin Oct 2, 2024
4d19cee
Update demo
royduin Oct 2, 2024
360f580
Update demo
rapidez-actions Oct 2, 2024
90814d3
Update demo
rapidez-actions Oct 2, 2024
c22c28a
Update demo
rapidez-actions Oct 2, 2024
1d78a14
Update demo
rapidez-actions Oct 2, 2024
ee0e17b
Update demo
rapidez-actions Oct 2, 2024
4f6f6f5
Merge branch 'master' into feature/accordion
royduin Oct 2, 2024
fe48809
Update demo
rapidez-actions Oct 2, 2024
b55acb4
Update demo
rapidez-actions Oct 2, 2024
9439cda
Update demo
rapidez-actions Oct 2, 2024
0500e00
Merge branch 'feature/accordion' of github.com:rapidez/blade-componen…
royduin Oct 2, 2024
d1268f9
Update demo
rapidez-actions Oct 2, 2024
8909aac
Update demo
rapidez-actions Oct 2, 2024
1b6f781
Update demo
rapidez-actions Oct 2, 2024
8441064
Static IDs for the preview
royduin Oct 2, 2024
65338ce
Update demo
rapidez-actions Oct 2, 2024
0e981b2
Merge branch 'feature/accordion' of github.com:rapidez/blade-componen…
royduin Oct 2, 2024
1a950c4
Update demo
royduin Oct 2, 2024
ec37e62
Merge branch 'master' of github.com:rapidez/blade-components into fea…
JimmyHoenderdaal Oct 17, 2024
f072c20
Merge branch 'feature/accordion' of github.com:rapidez/blade-componen…
JimmyHoenderdaal Oct 18, 2024
70b2388
Add toggle functionality for type radio
JimmyHoenderdaal Oct 21, 2024
daf364c
Update demo
JimmyHoenderdaal Oct 21, 2024
05e4dbd
Fix radio toggle to properly update checked state
JimmyHoenderdaal Oct 21, 2024
2a2269d
Merge branch 'feature/accordion' of github.com:rapidez/blade-componen…
JimmyHoenderdaal Oct 21, 2024
b79c544
Update demo
JimmyHoenderdaal Oct 21, 2024
e800100
enhance accordion component and documentation
JimmyHoenderdaal Nov 14, 2024
087decc
Update demo
JimmyHoenderdaal Nov 14, 2024
00716ed
Update demo
rapidez-actions Nov 14, 2024
d2bb358
Update demo
rapidez-actions Nov 14, 2024
5528547
Update demo
rapidez-actions Nov 14, 2024
e1fd9cd
Update demo
rapidez-actions Nov 14, 2024
e697dd0
Update demo
rapidez-actions Nov 14, 2024
fb19e52
Update demo
rapidez-actions Nov 14, 2024
8985935
Update demo
rapidez-actions Nov 14, 2024
a0a3a38
Update demo
rapidez-actions Nov 14, 2024
59ef922
Update demo
rapidez-actions Nov 14, 2024
f7ad807
Update demo
rapidez-actions Nov 14, 2024
1cae885
Update demo
rapidez-actions Nov 14, 2024
88dae5e
Update demo
rapidez-actions Nov 14, 2024
205094f
Update demo
rapidez-actions Nov 14, 2024
de88a01
Update demo
rapidez-actions Nov 14, 2024
0cb75ab
Update demo
rapidez-actions Nov 14, 2024
0c9d9bc
Update demo
rapidez-actions Nov 14, 2024
e432d78
Update demo
rapidez-actions Nov 14, 2024
40d27ca
Update demo
rapidez-actions Nov 14, 2024
eb9189c
Update demo
rapidez-actions Nov 14, 2024
aad7bca
Update demo
rapidez-actions Nov 14, 2024
46c391c
Update demo
rapidez-actions Nov 14, 2024
b406851
Update demo
rapidez-actions Nov 14, 2024
dff678e
Update demo
rapidez-actions Nov 14, 2024
a8d8466
Update demo
rapidez-actions Nov 14, 2024
fe9293c
Update demo
rapidez-actions Nov 14, 2024
1d94922
Update demo
rapidez-actions Nov 14, 2024
7c0f2ae
Update demo
rapidez-actions Nov 14, 2024
9a23dbc
Update demo
rapidez-actions Nov 14, 2024
ca4b632
Update demo
rapidez-actions Nov 14, 2024
c45b4ae
Update demo
rapidez-actions Nov 14, 2024
dd88817
Update demo
rapidez-actions Nov 14, 2024
8a19df7
Add id's
JimmyHoenderdaal Nov 14, 2024
fa52c3a
Merge branch 'feature/accordion' of github.com:rapidez/blade-componen…
JimmyHoenderdaal Nov 14, 2024
8d26177
Update demo
JimmyHoenderdaal Nov 14, 2024
186c3b4
Merge branch 'master' of github.com:rapidez/blade-components into fea…
JimmyHoenderdaal Nov 15, 2024
8db9278
Merge branch 'feature/accordion' of github.com:rapidez/blade-componen…
JimmyHoenderdaal Nov 15, 2024
deab7d1
Rename index.blade.php to accordion.blade.php
royduin Nov 20, 2024
07c196c
Update README.md
royduin Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ This package includes some Tailwind CSS styled Blade components, the components
- [Select](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/select/select.blade.php)
- [Textarea](https://github.com/rapidez/blade-components/blob/master/resources/views/components/input/textarea/textarea.blade.php)
- [Label](https://github.com/rapidez/blade-components/blob/master/resources/views/components/label/label.blade.php)
- [Accordion](https://github.com/rapidez/blade-components/blob/master/resources/views/components/accordion/accordion.blade.php)

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.

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

#### Accordion

```blade
<x-rapidez::accordion>
<x-slot:label>Accordion Title</x-slot:label>
<x-slot:content>
Accordion content goes here
</x-slot:content>
</x-rapidez::accordion>
```

## Preview

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:
Expand Down
199 changes: 197 additions & 2 deletions demo/components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
</script>
</head>
<body>
<div class="flex flex-col container mx-auto my-20 gap-5">
<div class="flex flex-col container mx-auto my-20 gap-5 px-5">
<h1 class="font-bold text-xl">Rapidez Blade Components preview</h1>

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

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

<h2 class="font-bold text-lg">Slideover component</h2>
Soon...

<h2 class="font-bold text-lg">Accordion component</h2>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<div class="flex flex-col gap-3">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This indenting seems a bit strange can you check this?

<h3 class="font-bold text-md">Default</h3>
<div class="flex flex-col group rounded border p-3">
<input
id="checkbox-question-1"
name=""
type="checkbox"
class="peer hidden"
/>
<label
for="checkbox-question-1"
class="flex items-center gap-2 justify-between cursor-pointer font-bold"
>
Question 1
</label>
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
<div class="overflow-hidden">
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.
</div>
</div>
</div>
<div class="flex flex-col group rounded border p-3">
<input
id="checkbox-question-2"
name=""
type="checkbox"
class="peer hidden"
/>
<label
for="checkbox-question-2"
class="flex items-center gap-2 justify-between cursor-pointer font-bold"
>
Question 2
</label>
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
<div class="overflow-hidden">
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.
</div>
</div>
</div>
</div>

<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">Radio</h3>
<div class="flex flex-col group rounded border p-3">
<input
id="radio-question-1"
name="questions"
type="radio"
class="peer hidden"
/>
<label
for="radio-question-1"
class="flex items-center gap-2 justify-between cursor-pointer font-bold"
onclick="event.preventDefault(); document.getElementById('radio-question-1').checked = !document.getElementById('radio-question-1').checked;"
>
Question 1
</label>
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
<div class="overflow-hidden">
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.
</div>
</div>
</div>
<div class="flex flex-col group rounded border p-3">
<input
id="radio-question-2"
name="questions"
type="radio"
class="peer hidden"
/>
<label
for="radio-question-2"
class="flex items-center gap-2 justify-between cursor-pointer font-bold"
onclick="event.preventDefault(); document.getElementById('radio-question-2').checked = !document.getElementById('radio-question-2').checked;"
>
Question 2
</label>
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
<div class="overflow-hidden">
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.
</div>
</div>
</div>
</div>

<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">Mobile only</h3>
<div class="flex flex-col group rounded border p-3">
<input
id="mobile-question-1"
name=""
type="checkbox"
class="peer hidden"
/>
<label
for="mobile-question-1"
class="flex items-center gap-2 justify-between cursor-pointer md:cursor-auto font-bold"
>
Question 1
</label>
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all md:grid-rows-[1fr]">
<div class="overflow-hidden">
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.
</div>
</div>
</div>
<div class="flex flex-col group rounded border p-3">
<input
id="mobile-question-2"
name=""
type="checkbox"
class="peer hidden"
/>
<label
for="mobile-question-2"
class="flex items-center gap-2 justify-between cursor-pointer md:cursor-auto font-bold"
>
Question 2
</label>
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all md:grid-rows-[1fr]">
<div class="overflow-hidden">
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.
</div>
</div>
</div>
</div>

<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">With rotating chevron</h3>
<div class="flex flex-col group border rounded p-4">
<input
id="rotating-accordion"
name=""
type="checkbox"
class="peer hidden"
/>
<label
for="rotating-accordion"
class="flex items-center gap-2 justify-between cursor-pointer"
>
<span>Click me to toggle</span>
<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">
<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" />
</svg>
</label>
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
<div class="overflow-hidden">
<div class="pt-4">
This accordion demonstrates the rotating chevron using group-has-[:checked]:rotate-180 class.
When you click the header, the chevron will rotate 180 degrees.
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">Navigation example with background</h3>
<div class="flex flex-col group border rounded p-4">
<input
id="navigation-accordion"
name=""
type="checkbox"
class="peer hidden"
/>
<label
for="navigation-accordion"
class="flex items-center gap-2 justify-between cursor-pointer"
>
<div class="flex items-center justify-between w-full">
<span>Shop Categories</span>
<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">
<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" />
</svg>
</div>
</label>
<div class="grid peer-checked:grid-rows-[1fr] grid-rows-[0fr] transition-all">
<div class="overflow-hidden">
<ul class="p-5 bg-red-500 text-white rounded-lg mt-2">
<li><a href="/what-is-new.html" class="block hover:underline">What's New</a></li>
<li><a href="/women.html" class="block hover:underline">Women</a></li>
<li><a href="/men.html" class="block hover:underline">Men</a></li>
<li><a href="/gear.html" class="block hover:underline">Gear</a></li>
<li><a href="/training.html" class="block hover:underline">Training</a></li>
<li><a href="/sale.html" class="block hover:underline">Sale</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
109 changes: 107 additions & 2 deletions resources/views/components-preview.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
</script>
</head>
<body>
<div class="flex flex-col container mx-auto my-20 gap-5">
<div class="flex flex-col container mx-auto my-20 gap-5 px-5">
<h1 class="font-bold text-xl">Rapidez Blade Components preview</h1>

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

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

<h2 class="font-bold text-lg">Slideover component</h2>
Soon...

<h2 class="font-bold text-lg">Accordion component</h2>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">Default</h3>
<x-rapidez::accordion id="checkbox-question-1" class="rounded border p-3">
<x-slot:label class="font-bold">
Question 1
</x-slot:label>
<x-slot:content class="">
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.
</x-slot:content>
</x-rapidez::accordion>
<x-rapidez::accordion id="checkbox-question-2" class="rounded border p-3">
<x-slot:label class="font-bold">
Question 2
</x-slot:label>
<x-slot:content class="">
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.
</x-slot:content>
</x-rapidez::accordion>
</div>

<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">Radio</h3>
<x-rapidez::accordion id="radio-question-1" type="radio" name="questions" class="rounded border p-3">
<x-slot:label class="font-bold">
Question 1
</x-slot:label>
<x-slot:content class="">
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.
</x-slot:content>
</x-rapidez::accordion>
<x-rapidez::accordion id="radio-question-2" type="radio" name="questions" class="rounded border p-3">
<x-slot:label class="font-bold">
Question 2
</x-slot:label>
<x-slot:content class="">
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.
</x-slot:content>
</x-rapidez::accordion>
</div>

<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">Mobile only</h3>
<x-rapidez::accordion.mobile id="mobile-question-1" class="rounded border p-3">
<x-slot:label class="font-bold">
Question 1
</x-slot:label>
<x-slot:content class="">
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.
</x-slot:content>
</x-rapidez::accordion.mobile>
<x-rapidez::accordion.mobile id="mobile-question-2" class="rounded border p-3">
<x-slot:label class="font-bold">
Question 2
</x-slot:label>
<x-slot:content class="">
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.
</x-slot:content>
</x-rapidez::accordion.mobile>
</div>

<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">With rotating chevron</h3>
<x-rapidez::accordion class="border rounded p-4" id="rotating-accordion">
<x-slot:label>
<span>Click me to toggle</span>
<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">
<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" />
</svg>
</x-slot:label>
<x-slot:content>
<div class="pt-4">
This accordion demonstrates the rotating chevron using group-has-[:checked]:rotate-180 class.
When you click the header, the chevron will rotate 180 degrees.
</div>
</x-slot:content>
</x-rapidez::accordion>
</div>
<div class="flex flex-col gap-3">
<h3 class="font-bold text-md">Navigation example with background</h3>
<x-rapidez::accordion class="border rounded p-4" id="navigation-accordion">
<x-slot:label>
<div class="flex items-center justify-between w-full">
<span>Shop Categories</span>
<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">
<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" />
</svg>
</div>
</x-slot:label>
<x-slot:content>
<ul class="p-5 bg-red-500 text-white rounded-lg mt-2">
<li><a href="/what-is-new.html" class="block hover:underline">What's New</a></li>
<li><a href="/women.html" class="block hover:underline">Women</a></li>
<li><a href="/men.html" class="block hover:underline">Men</a></li>
<li><a href="/gear.html" class="block hover:underline">Gear</a></li>
<li><a href="/training.html" class="block hover:underline">Training</a></li>
<li><a href="/sale.html" class="block hover:underline">Sale</a></li>
</ul>
</x-slot:content>
</x-rapidez::accordion>
</div>
</div>
</div>
</body>
</html>
Loading
Loading