@redocly/theme 0.25.2 → 0.26.1

package/lib/components/Feedback/Scale.js

@@ -0,0 +1,178 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Scale = exports.MAX_SCALE = 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 media_css_1 = require("../../mocks/media-css");
+const Feedback_1 = require("../../components/Feedback");
+const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon");
+const components_1 = require("../../components");
+exports.MAX_SCALE = 10;
+const Scale = ({ settings, onSubmit, className }) => {
+    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([]);
+    const { translate } = (0, hooks_1.useTranslate)();
+    const scaleOptions = [];
+    for (let i = 1; i <= exports.MAX_SCALE; i++) {
+        scaleOptions.push(React.createElement(ScaleOption, { id: `scale-option-${i}`, key: `scale-option-${i}`, onClick: () => setScore(i), className: `${score === i ? 'active' : ''}` }, i));
+    }
+    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 onSubmitScaleForm = () => {
+        onSubmit({
+            score,
+            comment,
+            reasons,
+            max: exports.MAX_SCALE,
+        });
+        setIsSubmitted(true);
+    };
+    (0, react_1.useEffect)(() => {
+        if (score && !displayComment && !displayReasons) {
+            onSubmitScaleForm();
+        }
+        // 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(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Scale", className: className },
+        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(ScaleWrapper, null, scaleOptions),
+                React.createElement(SubLabelContainer, null,
+                    React.createElement(SubLabel, { "data-translation-key": "theme.feedback.settings.leftScaleLabel" }, translate('theme.feedback.settings.leftScaleLabel', leftScaleLabel || 'Not helpful at all')),
+                    React.createElement(SubLabel, { "data-translation-key": "theme.feedback.settings.rightScaleLabel" }, translate('theme.feedback.settings.rightScaleLabel', rightScaleLabel || 'Extremely helpful')))),
+            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: onSubmitScaleForm }, "Submit"))))));
+};
+exports.Scale = Scale;
+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: 502px;
+  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(--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_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-direction: row;
+`;
+const SubLabel = styled_components_1.default.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_components_1.default.form `
+  width: 100%;
+`;
+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 StyledFormOptionalFields = styled_components_1.default.div `
+  display: flex;
+  flex-flow: column;
+`;
+const StyledFormMandatoryFields = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const ScaleOption = styled_components_1.default.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: ${media_css_1.breakpoints.small}) {
+    padding: 4px 8px;
+  }
+`;
+const ScaleWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: 4px;
+  width: 100%;
+
+  @media screen and (max-width: ${media_css_1.breakpoints.small}) {
+    gap: 1px;
+  }
+`;
+//# sourceMappingURL=Scale.js.map

package/lib/components/Feedback/Sentiment.js

@@ -28,10 +28,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sentiment = void 0;
 const React = __importStar(require("react"));
+const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Feedback_1 = require("../../components/Feedback");
 const Thumbs_1 = require("../../components/Feedback/Thumbs");
 const hooks_1 = require("../../mocks/hooks");
+const components_1 = require("../../components");
+const RadioCheckButtonIcon_1 = require("../../icons/RadioCheckButtonIcon");
+const media_css_1 = require("../../mocks/media-css");
 const Sentiment = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -39,56 +43,122 @@ const Sentiment = ({ 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 commentLabel = score === 1
-            ? translate('theme.feedback.settings.comment.likeLabel', commentSettings.likeLabel || 'What was most helpful?')
-            : translate('theme.feedback.settings.comment.dislikeLabel', commentSettings.dislikeLabel || 'What can we improve?');
-        return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }));
-    }
-    if (score) {
-        if (!isSubmitted) {
-            onSubmit({
-                score,
-                comment,
-                reasons,
-            });
-            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);
+    const commentLabel = score === 1
+        ? translate('theme.feedback.settings.comment.likeLabel', (commentSettings && commentSettings.likeLabel) || 'What was most helpful?')
+        : translate('theme.feedback.settings.comment.dislikeLabel', (commentSettings && commentSettings.dislikeLabel) || 'What can we improve?');
+    const onSubmitSentimentForm = () => {
+        onSubmit({
+            score,
+            comment,
+            reasons,
+        });
+        setIsSubmitted(true);
+    };
+    (0, react_1.useEffect)(() => {
+        if (score && !displayComment && !displayReasons) {
+            onSubmitSentimentForm();
         }
+        // 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/Sentiment", 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(1);
-            } },
-            React.createElement(Thumbs_1.ThumbUp, { text: "Yes" })),
-        React.createElement(Vote, { onClick: () => {
-                setScore(-1);
-            } },
-            React.createElement(Thumbs_1.ThumbDown, 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 === 1 ? 'active' : ''}`, onClick: () => {
+                                setScore(1);
+                            } },
+                            React.createElement(Thumbs_1.ThumbUp, null)),
+                        React.createElement(Vote, { className: `${score === -1 ? 'active' : ''}`, onClick: () => {
+                                setScore(-1);
+                            } },
+                            React.createElement(Thumbs_1.ThumbDown, 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: commentLabel } }))),
+            displaySubmitBnt && (React.createElement(ButtonsContainer, null,
+                React.createElement(SubmitButton, { onClick: onSubmitSentimentForm }, "Submit"))))));
 };
 exports.Sentiment = Sentiment;
 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 `
+  height: 32px;
+  width: 32px;
   cursor: pointer;
-  margin: 0 10px;
+  display: flex;
+  align-items: center;
+  flex-flow: row-reverse;
+  color: var(--text-description);
+  &.active {
+    color: var(--text-primary);
+  }
+  &:hover {
+    color: var(--text-primary);
+    svg {
+      > g {
+        fill: var(--text-primary);
+      }
+    }
+  }
+`;
+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;
+`;
+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=Sentiment.js.map

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export type StarsProps = {
+    max?: number;
+    name?: string;
+    value?: number;
+    onChange: (value: number) => void;
+};
+export declare const Stars: ({ max, onChange, value }: StarsProps) => JSX.Element;

package/lib/components/Feedback/Stars.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Stars = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Stars = ({ max = 5, onChange, value }) => {
+    const [hovered, setHovered] = React.useState(value || 0);
+    const stars = [];
+    for (let index = 1; index <= max; index++) {
+        stars.push(React.createElement(Star, { key: index, onClick: () => onChange(index), onMouseOver: () => setHovered(index), onMouseLeave: () => !value && 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(StarsWrapper, null, stars);
+};
+exports.Stars = Stars;
+const StarsWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: 8px;
+  flex-direction: row;
+  align-items: center;
+`;
+const Star = styled_components_1.default.span `
+  cursor: pointer;
+  gap: 8px;
+`;
+//# sourceMappingURL=Stars.js.map

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

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-export declare const ThumbUp: ({ text }: {
-    text?: string | undefined;
-}) => JSX.Element;
-export declare const ThumbDown: ({ text }: {
-    text?: string | undefined;
-}) => JSX.Element;
+export declare const ThumbUp: () => JSX.Element;
+export declare const ThumbDown: () => JSX.Element;

package/lib/components/Feedback/Thumbs.js

@@ -29,58 +29,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThumbDown = exports.ThumbUp = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const hooks_1 = require("../../mocks/hooks");
-const ThumbUp = ({ text }) => {
-    const { translate } = (0, hooks_1.useTranslate)();
-    return (React.createElement(Wrapper, { style: { alignItems: 'normal' } },
-        React.createElement(Icon, null,
-            React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
-                React.createElement("g", null,
-                    React.createElement("g", null,
-                        React.createElement("g", null,
-                            React.createElement("path", { d: "M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918\n              c-4.284-0.051-25.651-1.51-25.651-25.6c0-4.71-3.814-8.533-8.533-8.533s-8.533,3.823-8.533,8.533\n              c0,33.749,27.913,42.667,42.667,42.667h119.467c14.182,0,25.6,16.631,25.6,30.396c0,4.437,0,17.946-26.53,20.855\n              c-4.506,0.495-7.834,4.42-7.586,8.951c0.239,4.523,3.985,8.064,8.516,8.064c14.114,0,25.6,11.486,25.6,25.6\n              s-11.486,25.6-25.6,25.6h-17.067c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c14.114,0,25.6,11.486,25.6,25.6\n              s-11.486,25.6-25.6,25.6h-25.6c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c8.934,0,17.067,8.132,17.067,17.067\n              c0,8.61-8.448,17.067-17.067,17.067h-128c-35.627,0-48.444-7.074-63.292-15.258c-12.553-6.921-26.786-14.763-54.963-18.79\n              c-4.668-0.674-8.994,2.577-9.66,7.236c-0.666,4.668,2.569,8.994,7.236,9.66c25.105,3.584,37.325,10.325,49.152,16.845\n              c15.497,8.542,31.505,17.374,71.526,17.374h128c17.869,0,34.133-16.273,34.133-34.133c0-6.229-1.775-12.134-4.83-17.229\n              c21.794-1.877,38.963-20.224,38.963-42.505c0-10.829-4.062-20.736-10.735-28.271C500.42,358.212,512,342.571,512,324.267\n              C512,310.699,505.634,298.59,495.736,290.773z" }),
-                            React.createElement("path", { d: "M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067\n              S67.388,443.733,76.8,443.733z" }),
-                            React.createElement("path", { d: "M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1\n              c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533\n              s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6\n              c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533\n              S174.481,247.467,179.2,247.467z" }),
-                            React.createElement("path", { d: "M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n              c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467\n              V469.333z" })))))),
-        React.createElement("span", null, translate('theme.feedback.sentiment.thumbUp', text || 'Yes'))));
+const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon");
+const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon");
+const ThumbUp = () => {
+    return (React.createElement(Wrapper, null,
+        React.createElement(ThumbUpIcon_1.ThumbUpIcon, null)));
 };
 exports.ThumbUp = ThumbUp;
-const ThumbDown = ({ text }) => {
-    const { translate } = (0, hooks_1.useTranslate)();
-    return (React.createElement(Wrapper, { style: { alignItems: 'end' } },
-        React.createElement(Icon, null,
-            React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
-                React.createElement("g", null,
-                    React.createElement("g", null,
-                        React.createElement("g", null,
-                            React.createElement("path", { d: "M76.8,247.467c9.412,0,17.067-7.654,17.067-17.067c0-9.412-7.654-17.067-17.067-17.067\n\t\t\t\tc-9.412,0-17.067,7.654-17.067,17.067C59.733,239.812,67.388,247.467,76.8,247.467z" }),
-                            React.createElement("path", { d: "M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996\n\t\t\t\tc6.673-7.535,10.735-17.434,10.735-28.271c0-22.281-17.169-40.627-38.963-42.505c3.055-5.094,4.83-10.999,4.83-17.229\n\t\t\t\tc0-17.86-16.265-34.133-34.133-34.133h-128c-40.021,0-56.03,8.832-71.526,17.374c-11.827,6.519-24.047,13.261-49.152,16.845\n\t\t\t\tc-4.668,0.666-7.902,4.992-7.236,9.66c0.666,4.659,4.949,7.885,9.66,7.236c28.177-4.028,42.411-11.87,54.963-18.79\n\t\t\t\tc14.848-8.183,27.665-15.258,63.292-15.258h128c8.619,0,17.067,8.456,17.067,17.067c0,8.934-8.132,17.067-17.067,17.067\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533h25.6c14.114,0,25.6,11.486,25.6,25.6s-11.486,25.6-25.6,25.6\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533c0,4.71,3.814,8.533,8.533,8.533h17.067c14.114,0,25.6,11.486,25.6,25.6\n\t\t\t\ts-11.486,25.6-25.6,25.6c-4.531,0-8.277,3.541-8.516,8.064c-0.247,4.531,3.081,8.457,7.586,8.951\n\t\t\t\tc26.53,2.91,26.53,16.418,26.53,20.847c0,13.773-11.418,30.404-25.6,30.404H349.867c-14.763,0-42.667,8.917-42.667,42.667\n\t\t\t\tc0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533c0-24.09,21.367-25.549,25.6-25.6h119.467\n\t\t\t\tc24.414,0,42.667-25.054,42.667-47.471C512,242.603,509.397,229.683,495.736,221.227z" }),
-                            React.createElement("path", { d: "M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667\n\t\t\t\tc-5.342,0-8.533-3.192-8.533-8.533c0-68.932,0-114.466-36.634-151.1c-16.87-16.87-48.947-45.167-74.3-45.167\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c13.611,0,37.461,15.394,62.234,40.166\n\t\t\t\tc31.633,31.633,31.633,72.055,31.633,139.034c0,14.831,10.769,25.6,25.6,25.6c39.074,0,59.733-20.651,59.733-59.733v-102.4\n\t\t\t\tC358.4,319.556,354.586,315.733,349.867,315.733z" }),
-                            React.createElement("path", { d: "M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n\t\t\t\tc4.719,0,8.533-3.823,8.533-8.533v-256C153.6,29.423,149.786,25.6,145.067,25.6z M136.533,281.6H17.067V42.667h119.467V281.6z" })))))),
-        React.createElement("span", null, translate('theme.feedback.sentiment.thumbDown', text || 'No'))));
+const ThumbDown = () => {
+    return (React.createElement(Wrapper, null,
+        React.createElement(ThumbDownIcon_1.ThumbDownIcon, null)));
 };
 exports.ThumbDown = ThumbDown;
 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: 18px;
-  height: 18px;
-  margin-right: 5px;
-  > svg {
-    > g {
-      fill: var(--color-info-text);
-    }
-  }
+  align-items: center;
 `;
 //# sourceMappingURL=Thumbs.js.map

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

@@ -2,6 +2,7 @@ export { Feedback } from '../../components/Feedback/Feedback';
 export { Rating } from '../../components/Feedback/Rating';
 export { Sentiment } from '../../components/Feedback/Sentiment';
 export { Mood } from '../../components/Feedback/Mood';
+export { Scale } from '../../components/Feedback/Scale';
 export { Comment } from '../../components/Feedback/Comment';
 export { Reasons } from '../../components/Feedback/Reasons';
 export { ReportDialog } from '../../components/Feedback/ReportDialog';

package/lib/components/Feedback/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReportDialog = exports.ReportDialog = exports.Reasons = exports.Comment = exports.Mood = exports.Sentiment = exports.Rating = exports.Feedback = void 0;
+exports.useReportDialog = exports.ReportDialog = exports.Reasons = exports.Comment = exports.Scale = exports.Mood = exports.Sentiment = exports.Rating = exports.Feedback = void 0;
 var Feedback_1 = require("../../components/Feedback/Feedback");
 Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return Feedback_1.Feedback; } });
 var Rating_1 = require("../../components/Feedback/Rating");
@@ -23,6 +23,8 @@ var Sentiment_1 = require("../../components/Feedback/Sentiment");
 Object.defineProperty(exports, "Sentiment", { enumerable: true, get: function () { return Sentiment_1.Sentiment; } });
 var Mood_1 = require("../../components/Feedback/Mood");
 Object.defineProperty(exports, "Mood", { enumerable: true, get: function () { return Mood_1.Mood; } });
+var Scale_1 = require("../../components/Feedback/Scale");
+Object.defineProperty(exports, "Scale", { enumerable: true, get: function () { return Scale_1.Scale; } });
 var Comment_1 = require("../../components/Feedback/Comment");
 Object.defineProperty(exports, "Comment", { enumerable: true, get: function () { return Comment_1.Comment; } });
 var Reasons_1 = require("../../components/Feedback/Reasons");

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

@@ -8,8 +8,32 @@ export type RatingProps = {
     }) => void;
     settings?: {
         label?: string;
+        submitText?: string;
+        comment?: {
+            enable: boolean;
+            label?: string;
+        };
+        reasons?: {
+            enable: boolean;
+            label?: string;
+            multi?: boolean;
+            items: string[];
+        };
+    };
+    className?: string;
+};
+export type ScaleProps = {
+    onSubmit: (value: {
+        score: number;
+        comment?: string;
+        reasons?: string[];
         max?: number;
+    }) => void;
+    settings?: {
+        label?: string;
         submitText?: string;
+        leftScaleLabel?: string;
+        rightScaleLabel?: string;
         comment?: {
             enable: boolean;
             label?: string;
@@ -79,18 +103,15 @@ export type CommentProps = {
         label?: string;
         submitText?: string;
     };
+    standAlone?: boolean;
     className?: string;
 };
 export type ReasonsProps = {
-    onSubmit: (value: {
-        reasons: string[];
-    }) => void;
+    onChange: (value: string[]) => void;
     settings: {
         label?: string;
         multi?: boolean;
         items: string[];
-        submitText?: string;
-        buttonText?: string;
     };
     className?: string;
 };

package/lib/components/Feedback/useReportDialog.js

@@ -15,7 +15,9 @@ function useReportDialog() {
         setIsReportDialogShown(true);
     };
     const hideReportDialog = () => {
-        setIsReportDialogShown(false);
+        setTimeout(function () {
+            setIsReportDialogShown(false);
+        }, 1000);
     };
     const reportButtonProps = {
         onClick: showReportDialog,

package/lib/components/Markdown/MarkdownLayout.js

@@ -38,6 +38,7 @@ const Breadcrumbs = (0, styled_components_1.default)(Breadcrumbs_1.Breadcrumbs)
   margin-bottom: var(--breadcrumbs-margin-bottom);
 `;
 const LayoutBottom = (0, styled_components_1.default)(LayoutTop) `
+  justify-content: center;
   > * {
     margin: 25px 5px;
   }