Skip to content
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

Jump to bottom

Accordion #24

Merged
merged 1 commit into from
Jan 31, 2021
Merged

Accordion #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
24 changes: 11 additions & 13 deletions crispy_bootstrap5/templates/bootstrap5/accordion-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
<div class="card mb-2">
<div class="card-header" role="tab">
<h5 class="mb-0">
<a data-toggle="collapse" href="#{{ div.css_id }}" aria-expanded="true"
aria-controls="{{ div.css_id }}">
{{ div.name }}
</a>
</h5>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button{% if not div.active %} collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ div.css_id }}" aria-expanded="true"
aria-controls="{{ div.css_id }}">
{{ div.name }}
</button>
</h2>

<div id="{{ div.css_id }}" class="collapse{% if div.active %} show{% endif %}" role="tabpanel"
aria-labelledby="{{ div.css_id }}" data-parent="#accordion">
<div class="card-body">
<div id="{{ div.css_id }}" class="accordion-collapse collapse{% if div.active %} show{% endif %}"
aria-labelledby="{{ div.css_id }}" data-bs-parent="#accordion">
<div class="accordion-body">
{{ fields|safe }}
</div>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion crispy_bootstrap5/templates/bootstrap5/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div id="accordion" role="tablist">
<div class="accordion" id="accordion">
{{ content|safe }}
</div>
53 changes: 53 additions & 0 deletions tests/results/accordion.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#one"
aria-expanded="true" aria-controls="one">
one
</button>
</h2>
<div id="one" class="accordion-collapse collapse show" aria-labelledby="one" data-bs-parent="#accordion">
<div class="accordion-body">
<div id="div_id_first_name" class="mb-3">
<label for="id_first_name" class="form-label requiredField">
first name<span class="asteriskField">*</span>
</label>
<div>
<input type="text" name="first_name" maxlength="5" class="textinput textInput inputtext form-control"
required id="id_first_name" />
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#two"
aria-expanded="true" aria-controls="two">
two
</button>
</h2>
<div id="two" class="accordion-collapse collapse" aria-labelledby="two" data-bs-parent="#accordion">
<div class="accordion-body">
<div id="div_id_password1" class="mb-3">
<label for="id_password1" class="form-label requiredField">
password<span class="asteriskField">*</span>
</label>
<div>
<input type="password" name="password1" maxlength="30" class="textinput textInput form-control" required
id="id_password1" />
</div>
</div>
<div id="div_id_password2" class="mb-3">
<label for="id_password2" class="form-label requiredField">
re-enter password<span class="asteriskField">*</span>
</label>
<div>
<input type="password" name="password2" maxlength="30" class="textinput textInput form-control" required
id="id_password2" />
</div>
</div>
</div>
</div>
</div>
</div>
29 changes: 13 additions & 16 deletions tests/test_layout_objects.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,25 +227,16 @@ def test_inline_radios(self, settings):
assert html.count('form-check-inline"') == 2

def test_accordion_and_accordiongroup(self, settings):
test_form = SampleForm()
test_form.helper = FormHelper()
test_form.helper.layout = Layout(
form = SampleForm()
form.helper = FormHelper()
form.helper.form_tag = False
form.helper.layout = Layout(
Accordion(
AccordionGroup("one", "first_name"),
AccordionGroup("two", "password1", "password2"),
)
)
html = render_crispy_form(test_form)

assert html.count('<div id="accordion"') == 1
assert html.count('<div class="card mb-2"') == 2
assert html.count('<div class="card-header"') == 2

assert html.count('<div id="one"') == 1
assert html.count('<div id="two"') == 1
assert html.count('name="first_name"') == 1
assert html.count('name="password1"') == 1
assert html.count('name="password2"') == 1
assert parse_form(form) == parse_expected("accordion.html")

def test_accordion_active_false_not_rendered(self, settings):
test_form = SampleForm()
Expand All @@ -262,7 +253,10 @@ def test_accordion_active_false_not_rendered(self, settings):

accordion_class = "collapse show"

assert html.count('<div id="one" class="%s"' % accordion_class) == 1
assert (
html.count('<div id="one" class="accordion-collapse %s"' % accordion_class)
== 1
)

test_form.helper.layout = Layout(
Accordion(
Expand All @@ -272,7 +266,10 @@ def test_accordion_active_false_not_rendered(self, settings):

# This time, it shouldn't be there at all.
html = render_crispy_form(test_form)
assert html.count('<div id="one" class="%s collapse in"' % accordion_class) == 0
assert (
html.count('<div id="one" class="accordion-collapse %s"' % accordion_class)
== 0
)

def test_alert(self):
test_form = SampleForm()
Expand Down