@redocly/theme 0.25.2 → 0.26.1

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;

package/src/components/Feedback/Scale.tsx

@@ -0,0 +1,229 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+import styled from 'styled-components';
+
+import type { ScaleProps, ReasonsProps } from '@theme/components/';
+import { useTranslate } from '@portal/hooks';
+import { breakpoints } from '@portal/media-css';
+import { Comment, Reasons } from '@theme/components/Feedback';
+import { RadioCheckButtonIcon } from '@theme/icons/RadioCheckButtonIcon';
+import { Button } from '@theme/components';
+
+export const MAX_SCALE = 10;
+
+export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Element => {
+  const {
+    label,
+    submitText,
+    leftScaleLabel,
+    rightScaleLabel,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+  } = settings || {};
+  const [score, setScore] = React.useState(0);
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+  const { translate } = useTranslate();
+
+  const scaleOptions = [];
+
+  for (let i = 1; i <= MAX_SCALE; i++) {
+    scaleOptions.push(
+      <ScaleOption
+        id={`scale-option-${i}`}
+        key={`scale-option-${i}`}
+        onClick={() => setScore(i)}
+        className={`${score === i ? 'active' : ''}`}
+      >
+        {i}
+      </ScaleOption>,
+    );
+  }
+
+  const displayReasons = !!score && reasonsSettings?.enable;
+  const displayComment = !!score && commentSettings?.enable;
+  const displaySubmitBnt = !!score && (displayReasons || displayComment);
+
+  const onSubmitScaleForm = () => {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+      max: MAX_SCALE,
+    });
+    setIsSubmitted(true);
+  };
+
+  useEffect(() => {
+    if (score && !displayComment && !displayReasons) {
+      onSubmitScaleForm();
+    }
+    // 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 helping improve our documentation!',
+          )}
+        </Label>
+        <RadioCheckButtonIcon />
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Scale" className={className}>
+      <StyledForm>
+        <StyledFormMandatoryFields>
+          <Label data-translation-key="theme.feedback.settings.label">
+            {translate('theme.feedback.settings.label', label || 'How helpful was this page?')}
+          </Label>
+
+          <ScaleWrapper>{scaleOptions}</ScaleWrapper>
+
+          <SubLabelContainer>
+            <SubLabel data-translation-key="theme.feedback.settings.leftScaleLabel">
+              {translate(
+                'theme.feedback.settings.leftScaleLabel',
+                leftScaleLabel || 'Not helpful at all',
+              )}
+            </SubLabel>
+            <SubLabel data-translation-key="theme.feedback.settings.rightScaleLabel">
+              {translate(
+                'theme.feedback.settings.rightScaleLabel',
+                rightScaleLabel || 'Extremely helpful',
+              )}
+            </SubLabel>
+          </SubLabelContainer>
+        </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={onSubmitScaleForm}>Submit</SubmitButton>
+          </ButtonsContainer>
+        )}
+      </StyledForm>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 24px;
+  width: 502px;
+  border-radius: 8px;
+  background: var(--bg-raised);
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    width: 100%;
+  }
+`;
+
+const Label = styled.h3`
+  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 SubLabelContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-direction: row;
+`;
+
+const SubLabel = styled.h3`
+  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(--text-description);
+`;
+
+const StyledForm = styled.form`
+  width: 100%;
+`;
+
+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 StyledFormOptionalFields = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+const StyledFormMandatoryFields = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const ScaleOption = styled.div`
+  cursor: pointer;
+  border-radius: 6px;
+  background: var(--bg-overlay);
+  display: flex;
+  padding: 8px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &.active {
+    border: 1px solid var(--text-primary);
+  }
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    padding: 4px 8px;
+  }
+`;
+
+const ScaleWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: 4px;
+  width: 100%;
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    gap: 1px;
+  }
+`;