fix: fixed style and wrapper rating

RedTurtle · Sep 20, 2024 · 7a9e022 · 7a9e022
2 parents ebcc2a3 + dfc5043
commit 7a9e022
Show file tree

Hide file tree

Showing 5 changed files with 184 additions and 114 deletions.
diff --git a/src/components/FeedbackForm/FeedbackForm.jsx b/src/components/FeedbackForm/FeedbackForm.jsx
@@ -289,7 +289,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
                         </h2>
                       </CardHeader>
 
-                      <CardBody className="p-0">
+                      <CardBody className="rating-container p-0">
                         <Rating
                           name="satisfaction"
                           value={satisfaction}

diff --git a/src/components/FeedbackForm/Steps/AnswersStep.jsx b/src/components/FeedbackForm/Steps/AnswersStep.jsx
@@ -83,7 +83,7 @@ const AnswersStep = ({
           }
           hidden={!positiveIsVisible}
         />
-        <Card teaser noWrapper>
+        <Card teaser noWrapper className="p-2">
           <Form className="answers-form">
             {state?.map((s, i) => (
               <FormGroup
@@ -130,7 +130,7 @@ const AnswersStep = ({
           hidden={!negativeIsVisible}
         />
 
-        <Card teaser noWrapper>
+        <Card teaser noWrapper className="p-2">
           <Form className="answers-form">
             {state?.map((s, i) => (
               <FormGroup

diff --git a/src/components/FeedbackForm/Steps/CommentsStep.jsx b/src/components/FeedbackForm/Steps/CommentsStep.jsx
@@ -59,36 +59,32 @@ const CommentsStep = ({
         className="comments-header d-flex justify-content-between align-items-center"
         hidden={step !== 1}
       />
-      <div className="comment w-100">
-        <Card teaser noWrapper>
-          <Form>
-            <FormGroup key={`step-${step}-comment`}>
-              <TextArea
-                placeholder={intl.formatMessage(
-                  messages.suggestions_placeholder,
-                )}
-                onChange={handleChange}
-                rows={3}
-                value={getFormFieldValue('comment')}
-                infoText={
-                  !invalid
-                    ? intl.formatMessage(messages.infotext_valid)
-                    : intl.formatMessage(messages.infotext_invalid)
-                }
-                tabIndex="0"
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus={step === 1}
-                id="comment"
-                label={intl.formatMessage(messages.label_comment)}
-                aria-invalid={invalid ? invalid : undefined}
-                invalid={invalid ? invalid : undefined}
-                className="mt-1"
-                data-element="feedback-input-text"
-              />
-            </FormGroup>
-          </Form>
-        </Card>
-      </div>
+      <Card noWrapper className="comment p-3">
+        <Form>
+          <FormGroup key={`step-${step}-comment`}>
+            <TextArea
+              placeholder={intl.formatMessage(messages.suggestions_placeholder)}
+              onChange={handleChange}
+              rows={3}
+              value={getFormFieldValue('comment')}
+              infoText={
+                !invalid
+                  ? intl.formatMessage(messages.infotext_valid)
+                  : intl.formatMessage(messages.infotext_invalid)
+              }
+              tabIndex="0"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={step === 1}
+              id="comment"
+              label={intl.formatMessage(messages.label_comment)}
+              aria-invalid={invalid ? invalid : undefined}
+              invalid={invalid ? invalid : undefined}
+              className="mt-1"
+              data-element="feedback-input-text"
+            />
+          </FormGroup>
+        </Form>
+      </Card>
     </fieldset>
   );
 };

diff --git a/src/components/FeedbackForm/Steps/Commons/Rating.jsx b/src/components/FeedbackForm/Steps/Commons/Rating.jsx
@@ -24,6 +24,7 @@ const Rating = ({
 
   const wrapperClasses = classNames(wrapperClassName, {
     'rating-read-only': readOnly,
+    'rating-label': legend,
   });
   const fieldClasses = classNames(className);
   const extraFieldAttrs = readOnly ? { 'aria-hidden': true } : {};

diff --git a/src/components/FeedbackForm/feedback-form.scss b/src/components/FeedbackForm/feedback-form.scss
@@ -5,119 +5,192 @@
 @import 'bootstrap/scss/utilities';
 
 .public-ui {
-  .feedback-form {
-    padding: 2rem 0;
-
-    .title-medium-2-semi-bold {
-      font-size: 1.25rem;
-      font-weight: 600;
-      line-height: 1.2;
-      @media (min-width: #{map-get($grid-breakpoints, sm)}) {
-        font-size: 1.3333333333rem;
-      }
-      @media (min-width: #{map-get($grid-breakpoints, md)}) {
-        line-height: 1.2;
-      }
+    .feedback-form #vf-more-positive,
+    .feedback-form #vf-more-negative {
+      overflow: hidden;
+      max-height: 0;
     }
 
-    .card-wrapper[data-element='feedback'] {
-      padding: 1.8rem !important;
+    .feedback-form #vf-more-positive[aria-expanded='true'],
+    .feedback-form #vf-more-negative[aria-expanded='true'] {
+      max-height: 800px;
     }
 
-    .form-check label {
-      font-weight: 600;
+    .feedback-form #vf-more-positive[aria-hidden='true'],
+    .feedback-form #vf-more-negative[aria-hidden='true'] {
+      visibility: hidden;
     }
 
-    @media (min-width: #{map-get($grid-breakpoints, sm)}) {
-      .answers-header,
-      .comments-header {
-        font-size: 1rem !important;
+    .feedback-form {
+      padding: 2rem 0;
+      margin: 0;
+
+      .card {
+        display: block;
       }
-      .form-check [type='radio'] + label {
-        font-size: 1rem;
+
+      .title-medium-2-semi-bold {
+        font-size: 1.25rem;
+        font-weight: 600;
+        line-height: 1.2;
+        @media (min-width: #{map-get($grid-breakpoints, sm)}) {
+          font-size: 1.3333333333rem;
+        }
+        @media (min-width: #{map-get($grid-breakpoints, md)}) {
+          line-height: 1.2;
+        }
       }
-    }
 
-    .answers-header,
-    .comments-header {
-      padding: 0.875rem;
-      margin-bottom: 2.375rem;
-      box-shadow: 0 0.9375rem 1.325rem -0.9rem rgba(0, 0, 0, 0.1);
-      font-size: 1.125rem;
-      font-weight: 600;
-      line-height: 2;
-
-      > div {
-        margin-left: 0.5rem;
-        font-size: 0.7777777778rem;
-        line-height: 1.5;
+      .rating-container {
+        padding-bottom: 0;
+        padding-bottom: 0;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        padding: 1rem 0;
+
+        .rating.rating-label {
+          position: relative;
+          display: flex;
+          flex-direction: row;
+
+          label {
+            position: relative;
+            width: 26px;
+            max-width: 26px;
+            height: 26px;
+            max-height: 26px;
+          }
+
+          input.volto-feedback-rating {
+            position: relative;
+            left: 26px;
+            width: 26px;
+            margin-left: -24px;
+            opacity: 0;
+          }
+
+          input.volto-feedback-rating ~ label svg.rating-star {
+            fill: #c3cfdb;
+            pointer-events: none;
+          }
+
+          input.volto-feedback-rating ~ label svg.rating-star.starFilled {
+            fill: var(--bs-primary);
+          }
+
+          input.volto-feedback-rating:focus + label {
+            border: 0;
+            box-shadow:
+              0 0 0.2rem var(--focus-outline-color),
+              0 0 0 0.2rem var(--focus-outline-color) !important;
+            outline: none;
+          }
+        }
       }
 
-      h6 {
-        margin-bottom: 0;
+      .form-check .form-check-label {
         font-size: 1rem;
-        line-height: 1;
+        font-weight: 600;
       }
-    }
 
-    .comments-step {
-      .form-group {
+      .answers-form .form-check:last-of-type {
         margin-bottom: 0;
       }
 
-      .invalid-feedback.form-text.text-muted {
-        display: block;
-        color: var(--bs-danger) !important;
+      .card-wrapper[data-element='feedback'] {
+        padding: 1.8rem !important;
+      }
+      @media (min-width: #{map-get($grid-breakpoints, sm)}) {
+        .answers-header,
+        .comments-header {
+          padding: 0.78rem;
+          margin-bottom: 2.111rem;
+          font-size: 1rem;
+
+          & > div {
+            font-size: 0.7777777778rem;
+          }
+        }
       }
 
-      small {
-        padding: 0.25rem 0.5rem;
-        margin: 0;
-        font-size: 0.777rem !important;
+      .answers-header,
+      .comments-header {
+        padding: 0.875rem;
+        margin-bottom: 2.375rem;
+        box-shadow: 0 0.9375rem 1.325rem -0.9rem rgba(0, 0, 0, 0.1);
+        font-size: 1.125rem;
+        font-weight: 600;
+        line-height: 2;
+
+        > div {
+          margin-left: 0.5rem;
+          font-size: 0.7777777778rem;
+          line-height: 1.5;
+        }
 
-        &.invalid-feedback {
-          display: block;
+        h6 {
+          margin-bottom: 0;
         }
       }
 
-      label.active {
-        color: #596d88;
-      }
+      .comments-step {
+        .form-group {
+          margin-bottom: 0;
+        }
 
-      textarea {
-        border: none;
-        border-radius: 0;
-        border-bottom: 1px solid #5b6f82;
-      }
-    }
+        .invalid-feedback.form-text.text-muted {
+          display: block;
+          color: var(--bs-danger) !important;
+        }
 
-    .card:after {
-      content: none;
-    }
+        small {
+          padding: 0.25rem 0.5rem;
+          margin: 0;
+          font-size: 0.777rem !important;
 
-    .form-step-actions[aria-hidden='true'] {
-      padding: 0rem;
+          &.invalid-feedback {
+            display: block;
+          }
+        }
 
-      .next-action,
-      .prev-action {
-        height: 0;
+        label.active {
+          color: #596d88;
+        }
+
+        textarea {
+          border-radius: 0;
+          border-bottom: 1px solid #5b6f82;
+        }
       }
-    }
 
-    .form-step-actions[aria-hidden='false'] {
-      .next-action,
-      .prev-action {
-        padding: 12px 24px;
-        visibility: visible;
+      .card:after {
+        content: none;
       }
 
-      &.button-shadow {
-        margin-top: 1.25rem;
-        box-shadow: 0 -0.6375rem 1.125rem -0.9rem rgba(0, 0, 0, 0.1);
-        @media (min-width: #{map-get($grid-breakpoints, sm)}) {
-          margin-top: 1.11rem;
+      .form-step-actions[aria-hidden='true'] {
+        padding: 0rem;
+
+        .next-action,
+        .prev-action {
+          height: 0;
+        }
+      }
+
+      .form-step-actions[aria-hidden='false'] {
+        .next-action,
+        .prev-action {
+          padding: 12px 24px;
+          visibility: visible;
+        }
+
+        &.button-shadow {
+          margin-top: 1.25rem;
+          box-shadow: 0 -0.6375rem 1.125rem -0.9rem rgba(0, 0, 0, 0.1);
+          @media (min-width: #{map-get($grid-breakpoints, sm)}) {
+            margin-top: 1.11rem;
+          }
         }
       }
     }
   }
-}