react/livequestions: style questions form

liqd · Nov 11, 2024 · b352c8c · b352c8c
1 parent 3d641b4
commit b352c8c
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 44 deletions.
diff --git a/changelog/_8466.md b/changelog/_8466.md
@@ -0,0 +1,11 @@
+### Removed
+
+- Removed unused `.live_questions__char-count` and `.live_questions__anchor` classes
+
+### Changed
+
+- Changed `CategorySelect` and `QuestionForm` CSS classes to [styleguide.berlin.de form classes](https://styleguide.berlin.de/patterns/09-vertical_marketing-page-element-forms/09-vertical_marketing-page-element-forms.html)
+
+### Added
+
+- Added `.form-check-input` styling overrides
diff --git a/meinberlin/assets/scss/components/_live_questions.scss b/meinberlin/assets/scss/components/_live_questions.scss
@@ -204,16 +204,3 @@
         min-width: 15rem;
     }
 }
-
-.live_questions__char-count {
-    color: $gray-lighter;
-    font-size: $font-size-sm;
-    margin-top: -0.75 * $spacer;
-    margin-bottom: $spacer;
-}
-
-.live_questions__anchor {
-    position: relative;
-    bottom: -7 * $spacer;
-    margin-bottom: 7 * $spacer;
-}
diff --git a/meinberlin/assets/scss/styles_user_facing/_form.scss b/meinberlin/assets/scss/styles_user_facing/_form.scss
@@ -23,6 +23,16 @@ button {
   }
 }
 
+.form-check:has(.form-check-input) {
+  display: flex;
+}
+
+.form-check-input {
+  flex: 0 0 auto;
+  float: none !important;
+  margin-left: 0 !important;
+}
+
 textarea.form-control {
   resize: vertical;
 }
diff --git a/meinberlin/react/livequestions/CategorySelect.jsx b/meinberlin/react/livequestions/CategorySelect.jsx
@@ -21,7 +21,7 @@ export const CategorySelect = (props) => {
           <select
             name="categorySelect"
             id="categorySelect"
-            className="form-select"
+            className="form-control"
             required="required"
             data-minimum-results-for-search="Infinity"
           >

diff --git a/meinberlin/react/livequestions/QuestionForm.jsx b/meinberlin/react/livequestions/QuestionForm.jsx
@@ -65,36 +65,45 @@ export default class QuestionForm extends React.Component {
 
   render () {
     return (
-      <form id="id-comment-form" action="" onSubmit={this.addQuestion.bind(this)}>
-        <h2>{askQuestionStr}</h2>
-        {Object.keys(this.props.category_dict).length > 0
-          ? <CategorySelect
-              onSelect={this.selectCategory.bind(this)}
-              category_dict={this.props.category_dict}
+      <>
+        <h2 id="form-heading">{askQuestionStr}</h2>
+        <form id="id-comment-form" className="form--base panel--heavy" action="" onSubmit={this.addQuestion.bind(this)} aria-labelledby="form-heading">
+          <div className="form-group">
+            {Object.keys(this.props.category_dict).length > 0
+              ? <CategorySelect
+                  onSelect={this.selectCategory.bind(this)}
+                  category_dict={this.props.category_dict}
+                />
+              : ''}
+          </div>
+          <div className="form-group">
+            <label htmlFor="questionTextField">{questionStr}*</label>
+            <textarea
+              placeholder={yourQuestionStr}
+              id="questionTextField"
+              className="form-control"
+              name="questionTextFieldName"
+              rows="3"
+              onChange={this.handleTextChange.bind(this)}
+              required
+              value={this.state.question}
+              maxLength="1000"
             />
-          : ''}
-        <label htmlFor="questionTextField">{questionStr}*</label>
-        <textarea
-          placeholder={yourQuestionStr}
-          id="questionTextField"
-          className="form-control"
-          name="questionTextFieldName"
-          rows="3"
-          onChange={this.handleTextChange.bind(this)}
-          required="required"
-          value={this.state.question}
-          maxLength="1000"
-        />
-        <label htmlFor="id-comment-form" className="live_questions__char-count">{this.state.questionCharCount}/1000{charsStr}</label>
-
-        <div className="form-check">
-          <label className="form-check__label">
-            <input type="checkbox" name="data_protection" id="data_protection_check" required="required" />
-            {this.getPrivacyPolicyLabelWithLinks()}
-          </label>
-        </div>
-        <input type="submit" value={postStr} className="submit-button" />
-      </form>
+            <small htmlFor="id-comment-form">{this.state.questionCharCount}/1000{charsStr}</small>
+          </div>
+          <div className="form-check">
+            <input className="form-check-input" type="checkbox" name="data_protection" id="data_protection_check" required="required" />
+            <label className="form-check-label" htmlFor="data_protection_check">
+              {this.getPrivacyPolicyLabelWithLinks()}
+            </label>
+          </div>
+          <div className="form-actions">
+            <div className="form-actions__right">
+              <button type="submit" className="button">{postStr}</button>
+            </div>
+          </div>
+        </form>
+      </>
     )
   }
 }
diff --git a/meinberlin/react/livequestions/__tests__/__snapshots__/CategorySelect.jest.jsx.snap b/meinberlin/react/livequestions/__tests__/__snapshots__/CategorySelect.jest.jsx.snap
@@ -17,7 +17,7 @@ exports[`CategorySelect renders correctly 1`] = `
         Answered questions will be displayed in the statistics according to the chosen affiliation.
       </div>
       <select
-        class="form-select"
+        class="form-control"
         data-minimum-results-for-search="Infinity"
         id="categorySelect"
         name="categorySelect"