@redocly/theme 0.25.3 → 0.27.0

package/src/components/Feedback/Mood.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { MoodProps, ReasonsProps } from '@theme/components/';
 import { useTranslate } from '@portal/hooks';
 import { Dissatisfied, Neutral, Satisfied } from '@theme/components/Feedback/Emotions';
 import { Comment, Reasons } from '@theme/components/Feedback';
+import { RadioCheckButtonIcon } from '@theme/icons/RadioCheckButtonIcon';
+import { Button } from '@theme/components/';
+import { breakpoints } from '@portal/media-css';
 
 export enum MOOD_STATES {
   SATISFIED = 'satisfied',
@@ -20,119 +24,212 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
 
-  if (score && reasonsSettings?.enable && !reasons.length) {
-    const { label: reasonsLabel, items, multi } = reasonsSettings;
-    const buttonText = commentSettings?.enable ? 'Next' : 'Send';
-    return (
-      <Reasons
-        onSubmit={({ reasons }) => setReasons(reasons)}
-        settings={{ label: reasonsLabel, items, multi, buttonText }}
-      />
-    );
-  }
+  const renderCommentLabel = (score: string) => {
+    if (!commentSettings?.enable) return '';
 
-  if (score && commentSettings?.enable && !comment) {
-    const renderCommentLabel = (score: string) => {
-      switch (score) {
-        case MOOD_STATES.SATISFIED:
-          return translate(
-            'theme.feedback.settings.comment.satisfiedLabel',
-            commentSettings.satisfiedLabel || 'What was most helpful?',
-          );
-        case MOOD_STATES.NEUTRAL:
-          return translate(
-            'theme.feedback.settings.comment.neutralLabel',
-            commentSettings.neutralLabel || 'What can we improve?',
-          );
-        case MOOD_STATES.DISSATISFIED:
-          return translate(
-            'theme.feedback.settings.comment.dissatisfiedLabel',
-            commentSettings.dissatisfiedLabel || 'What can we improve?',
-          );
-        default:
-          return translate(
-            'theme.feedback.settings.comment.satisfiedLabel',
-            'What can we improve?',
-          );
-      }
-    };
-    return (
-      <Comment
-        onSubmit={({ comment }) => setComment(comment)}
-        settings={{ label: renderCommentLabel(score) }}
-      />
-    );
-  }
+    switch (score) {
+      case MOOD_STATES.SATISFIED:
+        return translate(
+          'theme.feedback.settings.comment.satisfiedLabel',
+          commentSettings.satisfiedLabel || 'What was most helpful?',
+        );
+      case MOOD_STATES.NEUTRAL:
+        return translate(
+          'theme.feedback.settings.comment.neutralLabel',
+          commentSettings.neutralLabel || 'What can we improve?',
+        );
+      case MOOD_STATES.DISSATISFIED:
+        return translate(
+          'theme.feedback.settings.comment.dissatisfiedLabel',
+          commentSettings.dissatisfiedLabel || 'What can we improve?',
+        );
+      default:
+        return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
+    }
+  };
 
-  if (score) {
-    if (!isSubmitted) {
-      onSubmit({
-        score,
-        comment,
-        reasons,
-      });
+  const displayReasons = !!score && reasonsSettings?.enable;
+  const displayComment = !!score && commentSettings?.enable;
+  const displaySubmitBnt = !!score && (displayReasons || displayComment);
 
-      setIsSubmitted(true);
+  const onSubmitMoodForm = () => {
+    onSubmit({
+      score: remapScore(score),
+      comment,
+      reasons,
+    });
+    setIsSubmitted(true);
+  };
+
+  useEffect(() => {
+    if (score && !displayComment && !displayReasons) {
+      onSubmitMoodForm();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [score, displayComment, displayReasons]);
 
+  if (isSubmitted) {
     return (
       <Wrapper>
         <Label data-translation-key="theme.feedback.settings.submitText">
           {translate(
             'theme.feedback.settings.submitText',
-            submitText || 'Thank you for your feedback!',
+            submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
+        <RadioCheckButtonIcon />
       </Wrapper>
     );
   }
 
   return (
     <Wrapper data-component-name="Feedback/Mood" className={className}>
-      <Label data-translation-key="theme.feedback.settings.label">
-        {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
-      </Label>
-      <Vote
-        onClick={() => {
-          setScore(MOOD_STATES.DISSATISFIED);
-        }}
-      >
-        <Dissatisfied />
-      </Vote>
-      <Vote
-        onClick={() => {
-          setScore(MOOD_STATES.NEUTRAL);
-        }}
-      >
-        <Neutral />
-      </Vote>
-      <Vote
-        onClick={() => {
-          setScore(MOOD_STATES.SATISFIED);
-        }}
-      >
-        <Satisfied />
-      </Vote>
+      <StyledForm>
+        <StyledFormMandatoryFields>
+          <Label data-translation-key="theme.feedback.settings.label">
+            {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
+          </Label>
+          <StyledMandatoryFieldContainer>
+            <>
+              <Vote
+                className={`${score === MOOD_STATES.DISSATISFIED ? 'active' : ''}`}
+                onClick={() => {
+                  setScore(MOOD_STATES.DISSATISFIED);
+                }}
+              >
+                <Dissatisfied />
+              </Vote>
+              <Vote
+                className={`${score === MOOD_STATES.NEUTRAL ? 'active' : ''}`}
+                onClick={() => {
+                  setScore(MOOD_STATES.NEUTRAL);
+                }}
+              >
+                <Neutral />
+              </Vote>
+              <Vote
+                className={`${score === MOOD_STATES.SATISFIED ? 'active' : ''}`}
+                onClick={() => {
+                  setScore(MOOD_STATES.SATISFIED);
+                }}
+              >
+                <Satisfied />
+              </Vote>
+            </>
+          </StyledMandatoryFieldContainer>
+        </StyledFormMandatoryFields>
+        <StyledFormOptionalFields>
+          {displayReasons && (
+            <Reasons
+              settings={{
+                label: reasonsSettings?.label,
+                items: reasonsSettings?.items || [],
+                multi: reasonsSettings?.multi,
+              }}
+              onChange={setReasons}
+            />
+          )}
+
+          {displayComment && (
+            <Comment
+              standAlone={false}
+              onSubmit={({ comment }) => setComment(comment)}
+              settings={{ label: renderCommentLabel(score) }}
+            />
+          )}
+        </StyledFormOptionalFields>
+        {displaySubmitBnt && (
+          <ButtonsContainer>
+            <SubmitButton onClick={onSubmitMoodForm}>Submit</SubmitButton>
+          </ButtonsContainer>
+        )}
+      </StyledForm>
     </Wrapper>
   );
 };
 
+const remapScore = (score: string): number => {
+  switch (score) {
+    case MOOD_STATES.SATISFIED:
+      return 1;
+    case MOOD_STATES.NEUTRAL:
+      return 0;
+    case MOOD_STATES.DISSATISFIED:
+      return -1;
+    default:
+      return 0;
+  }
+};
+
 const Wrapper = styled.div`
   font-family: var(--font-family-base);
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  padding: 16px 24px;
+  width: 424px;
+  border-radius: 8px;
+  background: var(--bg-raised);
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    width: 100%;
+  }
 `;
 
 const Label = styled.h3`
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
   margin-right: 15px;
+  font-family: var(--h4-font-family);
+  font-weight: var(--h4-font-weight);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-line-height);
+  color: var(--h3-text-color);
 `;
 
 const Vote = styled.div`
   cursor: pointer;
   margin: 0 10px;
+  color: var(--text-description);
+  &.active {
+    color: var(--text-primary);
+  }
+  &:hover {
+    color: var(--text-primary);
+    svg {
+      > g {
+        fill: var(--text-primary);
+      }
+    }
+  }
+`;
+
+const SubmitButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: end;
+`;
+
+const StyledForm = styled.form`
+  width: 100%;
+`;
+
+const StyledFormOptionalFields = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+const StyledFormMandatoryFields = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledMandatoryFieldContainer = styled.div`
+  display: flex;
+  align-items: center;
 `;

package/src/components/Feedback/Rating.tsx

@@ -1,61 +1,48 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { useEffect } from 'react';
 
 import type { RatingProps, ReasonsProps } from '@theme/components/Feedback';
 import { Comment, Reasons } from '@theme/components/Feedback';
+import { Button } from '@theme/components';
 import { useTranslate } from '@portal/hooks';
+import { RadioCheckButtonIcon } from '@theme/icons/RadioCheckButtonIcon';
+import { breakpoints } from '@portal/media-css';
 
-type StarsProps = {
-  onSubmit: (value: number) => void;
-  max: number;
-};
+import { Stars } from './Stars';
+
+export const FEEDBACK_MAX_RATING = 5;
 
 export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Element => {
-  const {
-    label,
-    max,
-    submitText,
-    comment: commentSettings,
-    reasons: reasonsSettings,
-  } = settings || {};
+  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
-  const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+  const [comment, setComment] = React.useState('');
   const { translate } = useTranslate();
-  const maxRating = max || 5;
 
-  if (score && reasonsSettings?.enable && !reasons.length) {
-    const { label: reasonsLabel, items, multi } = reasonsSettings;
-    const buttonText = commentSettings?.enable ? 'Next' : 'Send';
-    return (
-      <Reasons
-        onSubmit={({ reasons }) => setReasons(reasons)}
-        settings={{ label: reasonsLabel, items, multi, buttonText }}
-      />
-    );
-  }
+  const onSubmitRatingForm = () => {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+      max: FEEDBACK_MAX_RATING,
+    });
+    setIsSubmitted(true);
+  };
 
-  if (score && commentSettings?.enable && !comment) {
-    return (
-      <Comment
-        onSubmit={({ comment }) => setComment(comment)}
-        settings={{ label: commentSettings.label }}
-      />
-    );
-  }
+  const displayReasons = !!score && reasonsSettings?.enable;
+  const displayComment = !!score && commentSettings?.enable;
+  const displaySubmitBnt = !!score && (displayReasons || displayComment);
 
-  if (score) {
-    if (!isSubmitted) {
-      onSubmit({
-        score,
-        comment,
-        reasons,
-        max: maxRating,
-      });
-      setIsSubmitted(true);
+  useEffect(() => {
+    if (score && !displayComment && !displayReasons) {
+      onSubmitRatingForm();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [score, displayComment, displayReasons]);
 
+  if (isSubmitted) {
     return (
       <Wrapper>
         <Label data-translation-key="theme.feedback.settings.submitText">
@@ -64,64 +51,104 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
+        <RadioCheckButtonIcon />
       </Wrapper>
     );
   }
 
   return (
     <Wrapper data-component-name="Feedback/Rating" className={className}>
-      <Label data-translation-key="theme.feedback.settings.label">
-        {translate('theme.feedback.settings.label', label || 'How helpful was this page?')}
-      </Label>
-      <Stars max={maxRating} onSubmit={setScore} />
+      <StyledForm>
+        <StyledFormMandatoryFields>
+          <Label data-translation-key="theme.feedback.settings.label">
+            {translate('theme.feedback.settings.label', label || 'How helpful was this page?')}
+          </Label>
+
+          <StyledMandatoryFieldContainer>
+            <Stars max={FEEDBACK_MAX_RATING} onChange={setScore} value={score} />
+          </StyledMandatoryFieldContainer>
+        </StyledFormMandatoryFields>
+
+        <StyledFormOptionalFields>
+          {displayReasons && (
+            <Reasons
+              settings={{
+                label: reasonsSettings?.label,
+                items: reasonsSettings?.items || [],
+                multi: reasonsSettings?.multi,
+              }}
+              onChange={setReasons}
+            />
+          )}
+
+          {displayComment && (
+            <Comment
+              standAlone={false}
+              onSubmit={({ comment }) => setComment(comment)}
+              settings={{ label: commentSettings.label }}
+            />
+          )}
+        </StyledFormOptionalFields>
+        {displaySubmitBnt && (
+          <ButtonsContainer>
+            <SubmitButton onClick={onSubmitRatingForm}>Submit</SubmitButton>
+          </ButtonsContainer>
+        )}
+      </StyledForm>
     </Wrapper>
   );
 };
 
-const Stars = ({ max, onSubmit }: StarsProps): JSX.Element => {
-  const [hovered, setHovered] = React.useState(0);
-  const stars: JSX.Element[] = [];
-
-  for (let index = 1; index <= max; index++) {
-    stars.push(
-      <Star
-        key={index}
-        onClick={() => onSubmit(index)}
-        onMouseOver={() => setHovered(index)}
-        onMouseLeave={() => setHovered(0)}
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-          {hovered < index ? (
-            <g fill="#e8c002">
-              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7zm-10 6.9-3.76 2.27 1-4.28L3.5 8.5h4.61L10 4.6l1.9 3.9h4.6l-3.73 3.4 1 4.28z" />
-            </g>
-          ) : (
-            <g fill="#e8c002">
-              <path d="M20 7h-7L10 .5 7 7H0l5.46 5.47-1.64 7 6.18-3.7 6.18 3.73-1.63-7z" />
-            </g>
-          )}
-        </svg>
-      </Star>,
-    );
-  }
+const StyledForm = styled.form`
+  width: 100%;
+`;
 
-  return <>{stars}</>;
-};
+const StyledFormOptionalFields = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+const StyledFormMandatoryFields = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const StyledMandatoryFieldContainer = styled.div`
+  display: flex;
+`;
 
 const Wrapper = styled.div`
   display: flex;
+  justify-content: space-between;
   align-items: center;
-`;
+  padding: 16px 24px;
+  width: 424px;
+  border-radius: 8px;
+  background: var(--bg-raised);
 
-const Star = styled.span`
-  cursor: pointer;
+  @media screen and (max-width: ${breakpoints.small}) {
+    width: 100%;
+  }
 `;
 
 const Label = styled.h3`
   margin-right: 15px;
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
+  font-family: var(--h4-font-family);
+  font-weight: var(--h4-font-weight);
+  font-size: var(--h4-font-size);
+  line-height: var(--h4-line-height);
   color: var(--h3-text-color);
 `;
+
+const SubmitButton = styled(Button).attrs(() => ({
+  color: 'primary',
+}))`
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: end;
+`;

package/src/components/Feedback/Reasons.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { Button } from '@theme/components/Button/Button';
 import type { ReasonsProps } from '@theme/components/Feedback';
 import { useTranslate } from '@portal/hooks';
 
-export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.Element => {
-  const { label, multi, buttonText, items = [] } = settings;
+export const Reasons = ({ settings, onChange, className }: ReasonsProps): JSX.Element => {
+  const { label, multi, items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
   const { translate } = useTranslate();
 
@@ -20,12 +19,9 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
     const updatedCheckedState = multi
       ? checkedState.map((item, index) => (index === position ? !item : item))
       : items.map((_, idx) => position === idx);
-
     setCheckedState(updatedCheckedState);
-  };
 
-  const submitForm = () => {
-    onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
+    onChange(items.filter((_, index) => !!updatedCheckedState[index]));
   };
 
   return (
@@ -58,9 +54,6 @@ export const Reasons = ({ settings, onSubmit, className }: ReasonsProps): JSX.El
           </label>
         </OptionWrapper>
       ))}
-      <SendButton data-translation-key="theme.feedback.settings.reasons.send" onClick={submitForm}>
-        {translate('theme.feedback.settings.reasons.send', buttonText || 'Send')}
-      </SendButton>
     </Wrapper>
   );
 };
@@ -80,15 +73,6 @@ const Label = styled.h3`
   margin-right: 15px;
 `;
 
-const SendButton = styled(Button).attrs(() => ({
-  color: 'primary',
-}))`
-  width: 100px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 15px;
-`;
-
 const OptionWrapper = styled.div`
   margin: 5px 0;
   display: flex;