@redocly/theme 0.25.2 → 0.26.1

package/src/components/Feedback/Comment.tsx

@@ -4,8 +4,16 @@ import styled from 'styled-components';
 import { Button } from '@theme/components/Button/Button';
 import type { CommentProps } from '@theme/components/Feedback';
 import { useTranslate } from '@portal/hooks';
+import { RadioCheckButtonIcon } from '@theme/icons/RadioCheckButtonIcon';
+import { breakpoints } from '@portal/media-css';
 
-export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProps): JSX.Element => {
+export const Comment = ({
+  settings,
+  onSubmit,
+  onCancel,
+  className,
+  standAlone = true,
+}: CommentProps): JSX.Element => {
   const { label, submitText } = settings || {};
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
@@ -17,24 +25,34 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
     onSubmit({ comment: text });
   };
   const handleTextAreaChange = (e: any) => {
-    setText(e.target.value);
+    const commentValue = e.target.value;
+    setText(commentValue);
+
+    if (!standAlone) {
+      onSubmit({ comment: commentValue });
+    }
   };
 
   if (submitValue) {
     return (
-      <Wrapper className={className}>
+      <StateWrapper className={className}>
         <Label data-translation-key="theme.feedback.settings.comment.submitText">
           {translate(
             'theme.feedback.settings.comment.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
-      </Wrapper>
+        <RadioCheckButtonIcon />
+      </StateWrapper>
     );
   }
 
   return (
-    <Wrapper data-component-name="Feedback/Comment" className={className}>
+    <Wrapper
+      data-component-name="Feedback/Comment"
+      className={className}
+      style={standAlone ? { width: '424px', padding: '16px 24px' } : { width: 'auto' }}
+    >
       <Label data-translation-key="theme.feedback.settings.comment.label">
         {translate(
           'theme.feedback.settings.comment.label',
@@ -42,19 +60,21 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
         )}
       </Label>
       <TextArea rows={3} onChange={handleTextAreaChange} />
-      <ButtonsContainer>
-        <SendButton data-translation-key="theme.feedback.settings.comment.send" onClick={send}>
-          {translate('theme.feedback.settings.comment.send', 'Send')}
-        </SendButton>
-        {onCancel && (
-          <CancelButton
-            data-translation-key="theme.feedback.settings.comment.cancel"
-            onClick={onCancel}
-          >
-            {translate('theme.feedback.settings.comment.cancel', 'Cancel')}
-          </CancelButton>
-        )}
-      </ButtonsContainer>
+      {standAlone && (
+        <ButtonsContainer>
+          <SendButton data-translation-key="theme.feedback.settings.comment.send" onClick={send}>
+            {translate('theme.feedback.settings.comment.send', 'Send')}
+          </SendButton>
+          {onCancel && (
+            <CancelButton
+              data-translation-key="theme.feedback.settings.comment.cancel"
+              onClick={onCancel}
+            >
+              {translate('theme.feedback.settings.comment.cancel', 'Cancel')}
+            </CancelButton>
+          )}
+        </ButtonsContainer>
+      )}
     </Wrapper>
   );
 };
@@ -63,7 +83,20 @@ const Wrapper = styled.div`
   font-family: var(--font-family-base);
   display: flex;
   flex-direction: column;
-  width: 100%;
+  justify-content: space-between;
+  border-radius: 8px;
+  background: var(--bg-raised);
+`;
+
+const StateWrapper = styled(Wrapper)`
+  flex-direction: row;
+  align-items: center;
+  width: 424px;
+  padding: 16px 24px;
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    width: 100%;
+  }
 `;
 
 const Label = styled.h3`
@@ -86,7 +119,7 @@ const TextArea = styled.textarea`
 
 const ButtonsContainer = styled.div`
   display: flex;
-  justify-content: start;
+  justify-content: end;
 `;
 
 const SendButton = styled(Button).attrs(() => ({

package/src/components/Feedback/Emotions.tsx

@@ -5,52 +5,31 @@ import { SatisfiedIcon, DissatisfiedIcon, NeutralIcon } from '@theme/icons';
 
 export const Satisfied = () => {
   return (
-    <Wrapper>
-      <Icon>
-        <SatisfiedIcon />
-      </Icon>
-    </Wrapper>
+    <Icon>
+      <SatisfiedIcon />
+    </Icon>
   );
 };
 
 export const Dissatisfied = () => {
   return (
-    <Wrapper>
-      <Icon>
-        <DissatisfiedIcon />
-      </Icon>
-    </Wrapper>
+    <Icon>
+      <DissatisfiedIcon />
+    </Icon>
   );
 };
 
 export const Neutral = () => {
   return (
-    <Wrapper>
-      <Icon>
-        <NeutralIcon />
-      </Icon>
-    </Wrapper>
+    <Icon>
+      <NeutralIcon />
+    </Icon>
   );
 };
 
-const Wrapper = styled.div`
-  font-family: var(--font-family-base);
-  display: flex;
-  color: var(--color-info-text);
-  &:hover {
-    color: var(--color-info-text-active);
-    svg {
-      > g {
-        fill: var(--color-info-text-active);
-      }
-    }
-  }
-`;
-
 const Icon = styled.div`
-  width: 16px;
-  height: 16px;
-  margin-right: 5px;
+  display: flex;
+  align-items: center;
   > svg {
     > g {
       fill: var(--color-info-text);

package/src/components/Feedback/Feedback.tsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
 import type { FeedbackProps } from '@theme/types/portal/src/shared/types/feedback';
-import { Rating, Sentiment, Comment, Mood } from '@theme/components/Feedback';
+import { Rating, Sentiment, Comment, Mood, Scale } from '@theme/components/Feedback';
 import { useThemeConfig } from '@theme/hooks';
 import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
 import { telemetry } from '@portal/telemetry';
@@ -54,6 +54,18 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
             />
           </Wrapper>
         );
+      case 'scale':
+        return (
+          <Wrapper>
+            <Scale
+              settings={settings}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'scale', values, path });
+                telemetry.send('feedback_sent', { type: 'scale' });
+              }}
+            />
+          </Wrapper>
+        );
       case 'comment':
         return (
           <Wrapper>

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,99 +24,126 @@ 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,
+      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>
   );
 };
@@ -120,19 +151,72 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
 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;
 `;