@redocly/theme 0.25.3 → 0.27.0

package/lib/components/Feedback/Comment.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { CommentProps } from '../../components/Feedback';
-export declare const Comment: ({ settings, onSubmit, onCancel, className }: CommentProps) => JSX.Element;
+export declare const Comment: ({ settings, onSubmit, onCancel, className, standAlone, }: CommentProps) => JSX.Element;

package/lib/components/Feedback/Comment.js

@@ -31,7 +31,9 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../mocks/hooks");
-const Comment = ({ settings, onSubmit, onCancel, className }) => {
+const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon");
+const media_css_1 = require("../../mocks/media-css");
+const Comment = ({ settings, onSubmit, onCancel, className, standAlone = true, }) => {
     const { label, submitText } = settings || {};
     const [text, setText] = React.useState('');
     const [submitValue, setSubmitValue] = React.useState('');
@@ -43,25 +45,42 @@ const Comment = ({ settings, onSubmit, onCancel, className }) => {
         onSubmit({ comment: text });
     };
     const handleTextAreaChange = (e) => {
-        setText(e.target.value);
+        const commentValue = e.target.value;
+        setText(commentValue);
+        if (!standAlone) {
+            onSubmit({ comment: commentValue });
+        }
     };
     if (submitValue) {
-        return (React.createElement(Wrapper, { className: className },
-            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, translate('theme.feedback.settings.comment.submitText', submitText || 'Thank you for helping improve our documentation!'))));
+        return (React.createElement(StateWrapper, { className: className },
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, translate('theme.feedback.settings.comment.submitText', submitText || 'Thank you for helping improve our documentation!')),
+            React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
     }
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment", className: className },
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: '424px', padding: '16px 24px' } : { width: 'auto' } },
         React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label" }, translate('theme.feedback.settings.comment.label', label || 'Please share your feedback with us.')),
         React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
-        React.createElement(ButtonsContainer, null,
+        standAlone && (React.createElement(ButtonsContainer, null,
             React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send }, translate('theme.feedback.settings.comment.send', 'Send')),
-            onCancel && (React.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))))));
+            onCancel && (React.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel }, translate('theme.feedback.settings.comment.cancel', 'Cancel')))))));
 };
 exports.Comment = Comment;
 const Wrapper = styled_components_1.default.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 = (0, styled_components_1.default)(Wrapper) `
+  flex-direction: row;
+  align-items: center;
+  width: 424px;
+  padding: 16px 24px;
+
+  @media screen and (max-width: ${media_css_1.breakpoints.small}) {
+    width: 100%;
+  }
 `;
 const Label = styled_components_1.default.h3 `
   font-family: var(--h3-font-family);
@@ -81,7 +100,7 @@ const TextArea = styled_components_1.default.textarea `
 `;
 const ButtonsContainer = styled_components_1.default.div `
   display: flex;
-  justify-content: start;
+  justify-content: end;
 `;
 const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
     color: 'primary',

package/lib/components/Feedback/Emotions.js

@@ -31,40 +31,23 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("../../icons");
 const Satisfied = () => {
-    return (React.createElement(Wrapper, null,
-        React.createElement(Icon, null,
-            React.createElement(icons_1.SatisfiedIcon, null))));
+    return (React.createElement(Icon, null,
+        React.createElement(icons_1.SatisfiedIcon, null)));
 };
 exports.Satisfied = Satisfied;
 const Dissatisfied = () => {
-    return (React.createElement(Wrapper, null,
-        React.createElement(Icon, null,
-            React.createElement(icons_1.DissatisfiedIcon, null))));
+    return (React.createElement(Icon, null,
+        React.createElement(icons_1.DissatisfiedIcon, null)));
 };
 exports.Dissatisfied = Dissatisfied;
 const Neutral = () => {
-    return (React.createElement(Wrapper, null,
-        React.createElement(Icon, null,
-            React.createElement(icons_1.NeutralIcon, null))));
+    return (React.createElement(Icon, null,
+        React.createElement(icons_1.NeutralIcon, null)));
 };
 exports.Neutral = Neutral;
-const Wrapper = styled_components_1.default.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_components_1.default.div `
-  width: 16px;
-  height: 16px;
-  margin-right: 5px;
+  display: flex;
+  align-items: center;
   > svg {
     > g {
       fill: var(--color-info-text);

package/lib/components/Feedback/Feedback.js

@@ -60,6 +60,12 @@ const Feedback = (props) => {
                             submitFeedback({ type: 'mood', values, path });
                             telemetry_1.telemetry.send('feedback_sent', { type: 'mood' });
                         } })));
+            case 'scale':
+                return (React.createElement(Wrapper, null,
+                    React.createElement(Feedback_1.Scale, { settings: settings, onSubmit: (values) => {
+                            submitFeedback({ type: 'scale', values, path });
+                            telemetry_1.telemetry.send('feedback_sent', { type: 'scale' });
+                        } })));
             case 'comment':
                 return (React.createElement(Wrapper, null,
                     React.createElement(Feedback_1.Comment, { settings: settings, onSubmit: (values) => {

package/lib/components/Feedback/Mood.js

@@ -28,10 +28,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mood = exports.MOOD_STATES = void 0;
 const React = __importStar(require("react"));
+const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../mocks/hooks");
 const Emotions_1 = require("../../components/Feedback/Emotions");
 const Feedback_1 = require("../../components/Feedback");
+const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon");
+const components_1 = require("../../components");
+const media_css_1 = require("../../mocks/media-css");
 var MOOD_STATES;
 (function (MOOD_STATES) {
     MOOD_STATES["SATISFIED"] = "satisfied";
@@ -45,69 +49,145 @@ const Mood = ({ settings, onSubmit, className }) => {
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
-    if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
-        const { label: reasonsLabel, items, multi } = reasonsSettings;
-        const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
-        return (React.createElement(Feedback_1.Reasons, { onSubmit: ({ reasons }) => setReasons(reasons), settings: { label: reasonsLabel, items, multi, buttonText } }));
-    }
-    if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
-        const 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?');
-            }
-        };
-        return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }));
-    }
-    if (score) {
-        if (!isSubmitted) {
-            onSubmit({
-                score,
-                comment,
-                reasons,
-            });
-            setIsSubmitted(true);
+    const renderCommentLabel = (score) => {
+        if (!(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable))
+            return '';
+        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?');
+        }
+    };
+    const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
+    const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
+    const displaySubmitBnt = !!score && (displayReasons || displayComment);
+    const onSubmitMoodForm = () => {
+        onSubmit({
+            score: remapScore(score),
+            comment,
+            reasons,
+        });
+        setIsSubmitted(true);
+    };
+    (0, react_1.useEffect)(() => {
+        if (score && !displayComment && !displayReasons) {
+            onSubmitMoodForm();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [score, displayComment, displayReasons]);
+    if (isSubmitted) {
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for your feedback!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!')),
+            React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Mood", className: className },
-        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'Was this page helpful?')),
-        React.createElement(Vote, { onClick: () => {
-                setScore(MOOD_STATES.DISSATISFIED);
-            } },
-            React.createElement(Emotions_1.Dissatisfied, null)),
-        React.createElement(Vote, { onClick: () => {
-                setScore(MOOD_STATES.NEUTRAL);
-            } },
-            React.createElement(Emotions_1.Neutral, null)),
-        React.createElement(Vote, { onClick: () => {
-                setScore(MOOD_STATES.SATISFIED);
-            } },
-            React.createElement(Emotions_1.Satisfied, null))));
+        React.createElement(StyledForm, null,
+            React.createElement(StyledFormMandatoryFields, null,
+                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'Was this page helpful?')),
+                React.createElement(StyledMandatoryFieldContainer, null,
+                    React.createElement(React.Fragment, null,
+                        React.createElement(Vote, { className: `${score === MOOD_STATES.DISSATISFIED ? 'active' : ''}`, onClick: () => {
+                                setScore(MOOD_STATES.DISSATISFIED);
+                            } },
+                            React.createElement(Emotions_1.Dissatisfied, null)),
+                        React.createElement(Vote, { className: `${score === MOOD_STATES.NEUTRAL ? 'active' : ''}`, onClick: () => {
+                                setScore(MOOD_STATES.NEUTRAL);
+                            } },
+                            React.createElement(Emotions_1.Neutral, null)),
+                        React.createElement(Vote, { className: `${score === MOOD_STATES.SATISFIED ? 'active' : ''}`, onClick: () => {
+                                setScore(MOOD_STATES.SATISFIED);
+                            } },
+                            React.createElement(Emotions_1.Satisfied, null))))),
+            React.createElement(StyledFormOptionalFields, null,
+                displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
+                        label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
+                        items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
+                        multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
+                    }, onChange: setReasons })),
+                displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }))),
+            displaySubmitBnt && (React.createElement(ButtonsContainer, null,
+                React.createElement(SubmitButton, { onClick: onSubmitMoodForm }, "Submit"))))));
 };
 exports.Mood = Mood;
+const remapScore = (score) => {
+    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_components_1.default.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: ${media_css_1.breakpoints.small}) {
+    width: 100%;
+  }
 `;
 const Label = styled_components_1.default.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_components_1.default.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 = (0, styled_components_1.default)(components_1.Button).attrs(() => ({
+    color: 'primary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+const ButtonsContainer = styled_components_1.default.div `
+  display: flex;
+  justify-content: end;
+`;
+const StyledForm = styled_components_1.default.form `
+  width: 100%;
+`;
+const StyledFormOptionalFields = styled_components_1.default.div `
+  display: flex;
+  flex-flow: column;
+`;
+const StyledFormMandatoryFields = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+`;
+const StyledMandatoryFieldContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
 `;
 //# sourceMappingURL=Mood.js.map

package/lib/components/Feedback/Rating.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import type { RatingProps } from '../../components/Feedback';
+export declare const FEEDBACK_MAX_RATING = 5;
 export declare const Rating: ({ settings, onSubmit, className }: RatingProps) => JSX.Element;

package/lib/components/Feedback/Rating.js

@@ -26,69 +26,108 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Rating = void 0;
+exports.Rating = exports.FEEDBACK_MAX_RATING = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = require("react");
 const Feedback_1 = require("../../components/Feedback");
+const components_1 = require("../../components");
 const hooks_1 = require("../../mocks/hooks");
+const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon");
+const media_css_1 = require("../../mocks/media-css");
+const Stars_1 = require("./Stars");
+exports.FEEDBACK_MAX_RATING = 5;
 const Rating = ({ settings, onSubmit, className }) => {
-    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([]);
+    const [comment, setComment] = React.useState('');
     const { translate } = (0, hooks_1.useTranslate)();
-    const maxRating = max || 5;
-    if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
-        const { label: reasonsLabel, items, multi } = reasonsSettings;
-        const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
-        return (React.createElement(Feedback_1.Reasons, { onSubmit: ({ reasons }) => setReasons(reasons), settings: { label: reasonsLabel, items, multi, buttonText } }));
-    }
-    if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
-        return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }));
-    }
-    if (score) {
-        if (!isSubmitted) {
-            onSubmit({
-                score,
-                comment,
-                reasons,
-                max: maxRating,
-            });
-            setIsSubmitted(true);
+    const onSubmitRatingForm = () => {
+        onSubmit({
+            score,
+            comment,
+            reasons,
+            max: exports.FEEDBACK_MAX_RATING,
+        });
+        setIsSubmitted(true);
+    };
+    const displayReasons = !!score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable);
+    const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
+    const displaySubmitBnt = !!score && (displayReasons || displayComment);
+    (0, react_1.useEffect)(() => {
+        if (score && !displayComment && !displayReasons) {
+            onSubmitRatingForm();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [score, displayComment, displayReasons]);
+    if (isSubmitted) {
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!'))));
+            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!')),
+            React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating", className: className },
-        React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'How helpful was this page?')),
-        React.createElement(Stars, { max: maxRating, onSubmit: setScore })));
+        React.createElement(StyledForm, null,
+            React.createElement(StyledFormMandatoryFields, null,
+                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'How helpful was this page?')),
+                React.createElement(StyledMandatoryFieldContainer, null,
+                    React.createElement(Stars_1.Stars, { max: exports.FEEDBACK_MAX_RATING, onChange: setScore, value: score }))),
+            React.createElement(StyledFormOptionalFields, null,
+                displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
+                        label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
+                        items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
+                        multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
+                    }, onChange: setReasons })),
+                displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
+            displaySubmitBnt && (React.createElement(ButtonsContainer, null,
+                React.createElement(SubmitButton, { onClick: onSubmitRatingForm }, "Submit"))))));
 };
 exports.Rating = Rating;
-const Stars = ({ max, onSubmit }) => {
-    const [hovered, setHovered] = React.useState(0);
-    const stars = [];
-    for (let index = 1; index <= max; index++) {
-        stars.push(React.createElement(Star, { key: index, onClick: () => onSubmit(index), onMouseOver: () => setHovered(index), onMouseLeave: () => setHovered(0) },
-            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20" }, hovered < index ? (React.createElement("g", { fill: "#e8c002" },
-                React.createElement("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" }))) : (React.createElement("g", { fill: "#e8c002" },
-                React.createElement("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" }))))));
-    }
-    return React.createElement(React.Fragment, null, stars);
-};
+const StyledForm = styled_components_1.default.form `
+  width: 100%;
+`;
+const StyledFormOptionalFields = styled_components_1.default.div `
+  display: flex;
+  flex-flow: column;
+`;
+const StyledFormMandatoryFields = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+`;
+const StyledMandatoryFieldContainer = styled_components_1.default.div `
+  display: flex;
+`;
 const Wrapper = styled_components_1.default.div `
   display: flex;
+  justify-content: space-between;
   align-items: center;
-`;
-const Star = styled_components_1.default.span `
-  cursor: pointer;
+  padding: 16px 24px;
+  width: 424px;
+  border-radius: 8px;
+  background: var(--bg-raised);
+
+  @media screen and (max-width: ${media_css_1.breakpoints.small}) {
+    width: 100%;
+  }
 `;
 const Label = styled_components_1.default.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 = (0, styled_components_1.default)(components_1.Button).attrs(() => ({
+    color: 'primary',
+})) `
+  width: 100px;
+  margin-left: 0;
+  margin-right: 0;
+`;
+const ButtonsContainer = styled_components_1.default.div `
+  display: flex;
+  justify-content: end;
+`;
 //# sourceMappingURL=Rating.js.map

package/lib/components/Feedback/Reasons.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { ReasonsProps } from '../../components/Feedback';
-export declare const Reasons: ({ settings, onSubmit, className }: ReasonsProps) => JSX.Element;
+export declare const Reasons: ({ settings, onChange, className }: ReasonsProps) => JSX.Element;

package/lib/components/Feedback/Reasons.js

@@ -29,10 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Reasons = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../mocks/hooks");
-const Reasons = ({ settings, onSubmit, className }) => {
-    const { label, multi, buttonText, items = [] } = settings;
+const Reasons = ({ settings, onChange, className }) => {
+    const { label, multi, items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
     const { translate } = (0, hooks_1.useTranslate)();
     if (!items.length) {
@@ -44,16 +43,13 @@ const Reasons = ({ settings, onSubmit, className }) => {
             ? 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 (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": "theme.feedback.settings.reasons.label", className: className },
         React.createElement(Label, null, translate('theme.feedback.settings.reasons.label', label || 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
             React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { "data-translation-key": `theme.feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason))))),
-        React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.reasons.send", onClick: submitForm }, translate('theme.feedback.settings.reasons.send', buttonText || 'Send'))));
+            React.createElement("label", { "data-translation-key": `theme.feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason)))))));
 };
 exports.Reasons = Reasons;
 const Wrapper = styled_components_1.default.div `
@@ -69,14 +65,6 @@ const Label = styled_components_1.default.h3 `
   color: var(--h3-text-color);
   margin-right: 15px;
 `;
-const SendButton = (0, styled_components_1.default)(Button_1.Button).attrs(() => ({
-    color: 'primary',
-})) `
-  width: 100px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 15px;
-`;
 const OptionWrapper = styled_components_1.default.div `
   margin: 5px 0;
   display: flex;

package/lib/components/Feedback/Scale.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ScaleProps } from '../../components';
+export declare const MAX_SCALE = 10;
+export declare const Scale: ({ settings, onSubmit, className }: ScaleProps) => JSX.Element;