dev: Provide the accordion component

assets/stylesheets/application.css

@@ -16,6 +16,7 @@
 @import "./utils/text.css";
 @import "./utils/wrapper.css";
 @import "./components/alerts.css";
+@import "./components/accordions.css";
 @import "./components/anchors.css";
 @import "./components/badges.css";
 @import "./components/buttons.css";

assets/stylesheets/components/accordions.css

@@ -0,0 +1,48 @@
+/* This file is part of Bileto. */
+/* Copyright 2022-2024 Probesys */
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+
+.accordion {
+    border-bottom: var(--border-width) solid var(--color-grey6);
+}
+
+.accordion:first-child {
+    border-top: var(--border-width) solid var(--color-grey6);
+}
+
+.accordion__title {
+    --accordion-icon-size: 1.5rem;
+
+    padding-top: var(--space-medium);
+    padding-right: calc(var(--accordion-icon-size) + var(--space-small));
+    padding-bottom: var(--space-medium);
+
+    font-weight: 600;
+
+    background-image: url("../../icons/plus-primary.svg");
+    background-repeat: no-repeat;
+    background-position: right 0 top 50%;
+    background-size: var(--accordion-icon-size);
+
+    list-style: none;
+}
+
+.accordion__title:focus {
+    outline: none;
+}
+
+.accordion__title:focus-visible {
+    outline: var(--outline-width) solid var(--outline-color);
+    outline-offset: var(--outline-width);
+}
+
+.accordion[open] .accordion__title {
+    color: var(--color-primary9);
+
+    background-image: url("../../icons/minus-primary.svg");
+}
+
+.accordion__body {
+    margin-top: calc(var(--space-medium) * -1);
+    padding: var(--space-large) var(--space-small);
+}

docs/developers/README.md

@@ -22,6 +22,7 @@ Dedicated to the frontend:
 - [Working with the popups](/docs/developers/popups.md)
 - [Working with the notifications](/docs/developers/notifications.md)
 - [Working with columns and grids](/docs/developers/columns-and-grids.md)
+- [Working with accordions](/docs/developers/accordions.md)
 
 Dedicated to the maintainers:
 

docs/developers/accordions.md

@@ -0,0 +1,19 @@
+# Working with accordions
+
+Accordions can be used to provide additional information.
+These can be particularly useful in complex forms in order to provide additionnal options.
+These options must not be required.
+
+```twig
+<details class="accordion">
+    <summary class="accordion__title">
+        My accordion
+    </summary>
+
+    <div class="accordion__body">
+        <p>
+            The body of the accordion.
+        </p>
+    </div>
+</details>
+```