[#362] Fix deprecated Accordion usage

kbss-cvut · Nov 15, 2024 · 3881883 · 3881883
1 parent ae7c9ff
commit 3881883
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 24 deletions.
diff --git a/src/components/Question.jsx b/src/components/Question.jsx
@@ -215,31 +215,32 @@ export default class Question extends React.Component {
       return (
         <>
           <Accordion
-            defaultActiveKey={!this.state.expanded ? label : undefined}
+            activeKey={this.state.expanded ? label : undefined}
+            className="mb-3"
           >
-            <Card className="mb-3">
-              <Accordion.Toggle
-                as={Card.Header}
-                onClick={this._toggleCollapse}
-                className={this._getHeaderClassName()}
-                onMouseEnter={this._onMouseEnterHandler}
-                onMouseLeave={this._onMouseLeaveHandler}
-              >
-                <h6 className="d-inline" id={question["@id"]}>
-                  {collapsible &&
-                    !FormUtils.isWizardStep(question) &&
-                    this._renderCollapseToggle()}
-                  {label}
-                </h6>
-                {this.renderQuestionIcons()}
-                {this.props.children}
-              </Accordion.Toggle>
-              {collapsible ? (
-                <Accordion.Collapse>{cardBody}</Accordion.Collapse>
-              ) : (
-                <>{cardBody}</>
-              )}
-            </Card>
+            <Accordion.Item eventKey={label}>
+              <Card className="">
+                <Accordion.Button
+                  as={Card.Header}
+                  onClick={this._toggleCollapse}
+                  className={this._getHeaderClassName()}
+                  onMouseEnter={this._onMouseEnterHandler}
+                  onMouseLeave={this._onMouseLeaveHandler}
+                >
+                  <h6 className="d-inline" id={question["@id"]}>
+                    {collapsible &&
+                      !FormUtils.isWizardStep(question) &&
+                      this._renderCollapseToggle()}
+                    {label}
+                  </h6>
+                  {this.renderQuestionIcons()}
+                  {this.props.children}
+                </Accordion.Button>
+                <Accordion.Body className="p-0">
+                  {collapsible ? cardBody : <>{cardBody}</>}
+                </Accordion.Body>
+              </Card>
+            </Accordion.Item>
           </Accordion>
         </>
       );

diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
@@ -208,6 +208,14 @@ input:disabled {
   margin-bottom: 0;
 }
 
+.accordion-button::after {
+  background-image: initial;
+}
+
+.accordion-button:not(.collapsed)::after {
+  background-image: initial;
+}
+
 .emphasise-on-relevant-icon {
   animation: emphasiseOnRelevantIcon 0.5s ease-in;
 }