@redocly/theme 0.21.3 → 0.22.0

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Satisfied: () => JSX.Element;
+export declare const Dissatisfied: () => JSX.Element;
+export declare const Neutral: () => JSX.Element;

package/lib/components/Feedback/Emotions.js

@@ -0,0 +1,74 @@
+"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.Neutral = exports.Dissatisfied = exports.Satisfied = void 0;
+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))));
+};
+exports.Satisfied = Satisfied;
+const Dissatisfied = () => {
+    return (React.createElement(Wrapper, null,
+        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))));
+};
+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;
+  > svg {
+    > g {
+      fill: var(--color-info-text);
+    }
+  }
+`;
+//# sourceMappingURL=Emotions.js.map

package/lib/components/Feedback/Feedback.js

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { MoodProps } from '../../components';
+export declare enum MOOD_STATES {
+    SATISFIED = "satisfied",
+    NEUTRAL = "neutral",
+    DISSATISFIED = "dissatisfied"
+}
+export declare const Mood: ({ settings, onSubmit, className }: MoodProps) => JSX.Element;

package/lib/components/Feedback/Mood.js

@@ -0,0 +1,116 @@
+"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.Mood = exports.MOOD_STATES = void 0;
+const React = __importStar(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");
+var MOOD_STATES;
+(function (MOOD_STATES) {
+    MOOD_STATES["SATISFIED"] = "satisfied";
+    MOOD_STATES["NEUTRAL"] = "neutral";
+    MOOD_STATES["DISSATISFIED"] = "dissatisfied";
+})(MOOD_STATES = exports.MOOD_STATES || (exports.MOOD_STATES = {}));
+const Mood = ({ settings, onSubmit, className }) => {
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const [score, setScore] = React.useState('');
+    const [comment, setComment] = React.useState('');
+    const [reasons, setReasons] = React.useState([]);
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        submitText: 'theme.feedback.settings.submitText',
+        label: 'theme.feedback.settings.label',
+        satisfiedLabel: 'theme.feedback.settings.comment.satisfiedLabel',
+        neutralLabel: 'theme.feedback.settings.comment.neutralLabel',
+        dissatisfiedLabel: 'theme.feedback.settings.comment.dissatisfiedLabel',
+    };
+    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(translationKeys.satisfiedLabel, commentSettings.satisfiedLabel || 'What was most helpful?');
+                case MOOD_STATES.NEUTRAL:
+                    return translate(translationKeys.neutralLabel, commentSettings.neutralLabel || 'What can we improve?');
+                case MOOD_STATES.DISSATISFIED:
+                    return translate(translationKeys.dissatisfiedLabel, commentSettings.dissatisfiedLabel || 'What can we improve?');
+                default:
+                    return translate(translationKeys.satisfiedLabel, 'What can we improve?');
+            }
+        };
+        return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }));
+    }
+    if (score) {
+        onSubmit({
+            score,
+            comment,
+            reasons,
+        });
+        return (React.createElement(Wrapper, null,
+            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for your feedback!'))));
+    }
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Mood", className: className },
+        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.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))));
+};
+exports.Mood = Mood;
+const Wrapper = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;
+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;
+`;
+const Vote = styled_components_1.default.div `
+  cursor: pointer;
+  margin: 0 10px;
+`;
+//# sourceMappingURL=Mood.js.map

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

@@ -1,6 +1,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 { Comment } from '../../components/Feedback/Comment';
 export { Reasons } from '../../components/Feedback/Reasons';
 export { ReportDialog } from '../../components/Feedback/ReportDialog';

package/lib/components/Feedback/index.js

@@ -14,13 +14,15 @@ 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.Sentiment = exports.Rating = exports.Feedback = void 0;
+exports.useReportDialog = exports.ReportDialog = exports.Reasons = exports.Comment = 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");
 Object.defineProperty(exports, "Rating", { enumerable: true, get: function () { return Rating_1.Rating; } });
 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 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

@@ -22,6 +22,30 @@ export type RatingProps = {
     };
     className?: string;
 };
+export type MoodProps = {
+    onSubmit: (value: {
+        score: string;
+        comment?: string;
+        reasons?: string[];
+    }) => void;
+    settings?: {
+        label?: string;
+        submitText?: string;
+        comment?: {
+            enable: boolean;
+            satisfiedLabel?: string;
+            neutralLabel?: string;
+            dissatisfiedLabel?: string;
+        };
+        reasons?: {
+            enable: boolean;
+            label?: string;
+            multi?: boolean;
+            items: string[];
+        };
+    };
+    className?: string;
+};
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;

package/lib/config.d.ts

@@ -1011,7 +1011,7 @@ export declare const themeConfigSchema: {
                 };
                 readonly type: {
                     readonly type: "string";
-                    readonly enum: readonly ["rating", "sentiment", "comment", "reasons"];
+                    readonly enum: readonly ["rating", "sentiment", "comment", "reasons", "mood"];
                     readonly default: "sentiment";
                 };
                 readonly settings: {
@@ -1080,6 +1080,15 @@ export declare const themeConfigSchema: {
                                 readonly dislikeLabel: {
                                     readonly type: "string";
                                 };
+                                readonly satisfiedLabel: {
+                                    readonly type: "string";
+                                };
+                                readonly neutralLabel: {
+                                    readonly type: "string";
+                                };
+                                readonly dissatisfiedLabel: {
+                                    readonly type: "string";
+                                };
                             };
                             readonly additionalProperties: false;
                         };

package/lib/config.js

@@ -394,7 +394,7 @@ exports.themeConfigSchema = {
                 },
                 type: {
                     type: 'string',
-                    enum: ['rating', 'sentiment', 'comment', 'reasons'],
+                    enum: ['rating', 'sentiment', 'comment', 'reasons', 'mood'],
                     default: 'sentiment',
                 },
                 settings: Object.assign({ type: 'object', properties: {
@@ -421,6 +421,9 @@ exports.themeConfigSchema = {
                                 label: { type: 'string' },
                                 likeLabel: { type: 'string' },
                                 dislikeLabel: { type: 'string' },
+                                satisfiedLabel: { type: 'string' },
+                                neutralLabel: { type: 'string' },
+                                dissatisfiedLabel: { type: 'string' },
                             },
                             additionalProperties: false,
                         },

package/lib/icons/DissatisfiedIcon/DissatisfiedIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const DissatisfiedIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/DissatisfiedIcon/DissatisfiedIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DissatisfiedIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", viewBox: "0 0 16 17", fill: "none" },
+    react_1.default.createElement("rect", { width: "16", height: "16", transform: "translate(0 0.511719)", fill: "white", style: { mixBlendMode: 'multiply' } }),
+    react_1.default.createElement("path", { d: "M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M8 10.0117C7.30982 10.0129 6.63168 10.1926 6.03151 10.5334C5.43135 10.8743 4.92958 11.3646 4.575 11.9567L5.43 12.4567C5.69683 12.0136 6.07369 11.647 6.524 11.3925C6.97431 11.1381 7.48276 11.0043 8 11.0043C8.51724 11.0043 9.0257 11.1381 9.47601 11.3925C9.92631 11.647 10.3032 12.0136 10.57 12.4567L11.425 11.9567C11.0704 11.3646 10.5687 10.8743 9.96849 10.5334C9.36833 10.1926 8.69019 10.0129 8 10.0117Z", fill: "black", fillOpacity: "0.45" })));
+exports.DissatisfiedIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DissatisfiedIcon/DissatisfiedIcon',
+})) ``;
+//# sourceMappingURL=DissatisfiedIcon.js.map

package/lib/icons/DissatisfiedIcon/index.d.ts

@@ -0,0 +1 @@
+export * from '../../icons/DissatisfiedIcon/DissatisfiedIcon';

package/lib/icons/DissatisfiedIcon/index.js

@@ -0,0 +1,18 @@
+"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 __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 });
+__exportStar(require("../../icons/DissatisfiedIcon/DissatisfiedIcon"), exports);
+//# sourceMappingURL=index.js.map

package/lib/icons/NeutralIcon/NeutralIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const NeutralIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/NeutralIcon/NeutralIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NeutralIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = () => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", viewBox: "0 0 16 17", fill: "none" },
+    react_1.default.createElement("rect", { width: "16", height: "16", transform: "translate(0 0.511719)", fill: "white", style: { mixBlendMode: 'multiply' } }),
+    react_1.default.createElement("path", { d: "M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M11 10.5117H5V11.5117H11V10.5117Z", fill: "black", fillOpacity: "0.45" })));
+exports.NeutralIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/NeutralIcon/NeutralIcon',
+})) ``;
+//# sourceMappingURL=NeutralIcon.js.map

package/lib/icons/NeutralIcon/index.d.ts

@@ -0,0 +1 @@
+export * from '../../icons/NeutralIcon/NeutralIcon';

package/lib/icons/NeutralIcon/index.js

@@ -0,0 +1,18 @@
+"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 __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 });
+__exportStar(require("../../icons/NeutralIcon/NeutralIcon"), exports);
+//# sourceMappingURL=index.js.map

package/lib/icons/SatisfiedIcon/SatisfiedIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const SatisfiedIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/SatisfiedIcon/SatisfiedIcon.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SatisfiedIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = () => (react_1.default.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", viewBox: "0 0 16 17", fill: "none" },
+    react_1.default.createElement("rect", { width: "16", height: "16", transform: "translate(0 0.511719)", fill: "white", style: { mixBlendMode: 'multiply' } }),
+    react_1.default.createElement("path", { d: "M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7.00134 7.0972 6.96991 6.93405 6.90757 6.78179C6.84522 6.62953 6.7532 6.49121 6.63686 6.37487C6.52052 6.25853 6.38219 6.1665 6.22993 6.10416C6.07767 6.04181 5.91453 6.01039 5.75 6.01172Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5013 7.0972 11.4699 6.93405 11.4076 6.78179C11.3452 6.62953 11.2532 6.49121 11.1369 6.37487C11.0205 6.25853 10.8822 6.1665 10.7299 6.10416C10.5777 6.04181 10.4145 6.01039 10.25 6.01172Z", fill: "black", fillOpacity: "0.45" }),
+    react_1.default.createElement("path", { d: "M8 12.5117C8.69019 12.5106 9.36833 12.3308 9.96849 11.99C10.5687 11.6492 11.0704 11.1589 11.425 10.5667L10.57 10.0667C10.3032 10.5098 9.92631 10.8764 9.47601 11.1309C9.0257 11.3854 8.51724 11.5191 8 11.5191C7.48276 11.5191 6.97431 11.3854 6.524 11.1309C6.07369 10.8764 5.69683 10.5098 5.43 10.0667L4.575 10.5667C4.92958 11.1589 5.43135 11.6492 6.03151 11.99C6.63168 12.3308 7.30982 12.5106 8 12.5117Z", fill: "black", fillOpacity: "0.45" })));
+exports.SatisfiedIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/SatisfiedIcon/SatisfiedIcon',
+})) ``;
+//# sourceMappingURL=SatisfiedIcon.js.map

package/lib/icons/SatisfiedIcon/index.d.ts

@@ -0,0 +1 @@
+export * from '../../icons/SatisfiedIcon/SatisfiedIcon';

package/lib/icons/SatisfiedIcon/index.js

@@ -0,0 +1,18 @@
+"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 __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 });
+__exportStar(require("../../icons/SatisfiedIcon/SatisfiedIcon"), exports);
+//# sourceMappingURL=index.js.map

package/lib/icons/index.d.ts

@@ -21,3 +21,6 @@ export * from '../icons/CheckboxIcon';
 export * from '../icons/ErrorIcon';
 export * from '../icons/EditIcon';
 export * from '../icons/RocketIcon';
+export * from '../icons/SatisfiedIcon';
+export * from '../icons/DissatisfiedIcon';
+export * from '../icons/NeutralIcon';

package/lib/icons/index.js

@@ -37,4 +37,7 @@ __exportStar(require("../icons/CheckboxIcon"), exports);
 __exportStar(require("../icons/ErrorIcon"), exports);
 __exportStar(require("../icons/EditIcon"), exports);
 __exportStar(require("../icons/RocketIcon"), exports);
+__exportStar(require("../icons/SatisfiedIcon"), exports);
+__exportStar(require("../icons/DissatisfiedIcon"), exports);
+__exportStar(require("../icons/NeutralIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/types/portal/src/shared/constants.d.ts

@@ -6,7 +6,8 @@ export type DEFAULT_COOKIE_EXPIRATION = number;
 export declare enum FEEDBACK_TYPES {
     RATING = "rating",
     SENTIMENT = "sentiment",
-    COMMENT = "comment"
+    COMMENT = "comment",
+    MOOD = "mood"
 }
 export declare const DEV_LOGIN_SLUG = "/login/";
 export declare enum ExternalRoutes {

package/lib/types/portal/src/shared/constants.js

@@ -9,6 +9,7 @@ var FEEDBACK_TYPES;
     FEEDBACK_TYPES["RATING"] = "rating";
     FEEDBACK_TYPES["SENTIMENT"] = "sentiment";
     FEEDBACK_TYPES["COMMENT"] = "comment";
+    FEEDBACK_TYPES["MOOD"] = "mood";
 })(FEEDBACK_TYPES = exports.FEEDBACK_TYPES || (exports.FEEDBACK_TYPES = {}));
 exports.DEV_LOGIN_SLUG = '/login/';
 var ExternalRoutes;

package/lib/types/portal/src/shared/types/feedback.d.ts

@@ -1,5 +1,5 @@
 import type { FEEDBACK_TYPES } from '../constants';
-import type { RatingProps, SentimentProps, CommentProps } from '../../../../../components/Feedback';
+import type { RatingProps, SentimentProps, CommentProps, MoodProps } from '../../../../../components/Feedback';
 export type SubmitFeedbackParams = {
     type: string;
     values: Record<string, unknown>;
@@ -7,5 +7,5 @@ export type SubmitFeedbackParams = {
 };
 export type FeedbackProps = {
     type: FEEDBACK_TYPES;
-    settings: (RatingProps | SentimentProps | CommentProps)['settings'];
+    settings: (RatingProps | SentimentProps | CommentProps | MoodProps)['settings'];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.21.3",
+  "version": "0.22.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.0.2"
+    "@redocly/portal-types": "1.1.0"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Feedback/Emotions.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { SatisfiedIcon, DissatisfiedIcon, NeutralIcon } from '@theme/icons';
+
+export const Satisfied = () => {
+  return (
+    <Wrapper>
+      <Icon>
+        <SatisfiedIcon />
+      </Icon>
+    </Wrapper>
+  );
+};
+
+export const Dissatisfied = () => {
+  return (
+    <Wrapper>
+      <Icon>
+        <DissatisfiedIcon />
+      </Icon>
+    </Wrapper>
+  );
+};
+
+export const Neutral = () => {
+  return (
+    <Wrapper>
+      <Icon>
+        <NeutralIcon />
+      </Icon>
+    </Wrapper>
+  );
+};
+
+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;
+  > 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 } from '@theme/components/Feedback';
+import { Rating, Sentiment, Comment, Mood } from '@theme/components/Feedback';
 import { useThemeConfig } from '@theme/hooks';
 import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
 import { telemetry } from '@portal/telemetry';
@@ -40,6 +40,18 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
             />
           </Wrapper>
         );
+      case 'mood':
+        return (
+          <Wrapper>
+            <Mood
+              settings={settings}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'mood', values, path });
+                telemetry.send('feedback_sent', { type: 'mood' });
+              }}
+            />
+          </Wrapper>
+        );
       case 'comment':
         return (
           <Wrapper>

package/src/components/Feedback/Mood.tsx

@@ -0,0 +1,133 @@
+import * as React 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';
+
+export enum MOOD_STATES {
+  SATISFIED = 'satisfied',
+  NEUTRAL = 'neutral',
+  DISSATISFIED = 'dissatisfied',
+}
+
+export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element => {
+  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const [score, setScore] = React.useState('');
+  const [comment, setComment] = React.useState('');
+  const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
+  const { translate } = useTranslate();
+  const translationKeys = {
+    submitText: 'theme.feedback.settings.submitText',
+    label: 'theme.feedback.settings.label',
+    satisfiedLabel: 'theme.feedback.settings.comment.satisfiedLabel',
+    neutralLabel: 'theme.feedback.settings.comment.neutralLabel',
+    dissatisfiedLabel: 'theme.feedback.settings.comment.dissatisfiedLabel',
+  };
+
+  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 }}
+      />
+    );
+  }
+
+  if (score && commentSettings?.enable && !comment) {
+    const renderCommentLabel = (score: string) => {
+      switch (score) {
+        case MOOD_STATES.SATISFIED:
+          return translate(
+            translationKeys.satisfiedLabel,
+            commentSettings.satisfiedLabel || 'What was most helpful?',
+          );
+        case MOOD_STATES.NEUTRAL:
+          return translate(
+            translationKeys.neutralLabel,
+            commentSettings.neutralLabel || 'What can we improve?',
+          );
+        case MOOD_STATES.DISSATISFIED:
+          return translate(
+            translationKeys.dissatisfiedLabel,
+            commentSettings.dissatisfiedLabel || 'What can we improve?',
+          );
+        default:
+          return translate(translationKeys.satisfiedLabel, 'What can we improve?');
+      }
+    };
+    return (
+      <Comment
+        onSubmit={({ comment }) => setComment(comment)}
+        settings={{ label: renderCommentLabel(score) }}
+      />
+    );
+  }
+
+  if (score) {
+    onSubmit({
+      score,
+      comment,
+      reasons,
+    });
+    return (
+      <Wrapper>
+        <Label data-translation-key={translationKeys.submitText}>
+          {translate(translationKeys.submitText, submitText || 'Thank you for your feedback!')}
+        </Label>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper data-component-name="Feedback/Mood" className={className}>
+      <Label data-translation-key={translationKeys.label}>
+        {translate(translationKeys.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>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  font-family: var(--font-family-base);
+  display: flex;
+  align-items: center;
+`;
+
+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;
+`;
+
+const Vote = styled.div`
+  cursor: pointer;
+  margin: 0 10px;
+`;

package/src/components/Feedback/index.ts

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

package/src/components/Feedback/types.ts

@@ -20,6 +20,27 @@ export type RatingProps = {
   className?: string;
 };
 
+export type MoodProps = {
+  onSubmit: (value: { score: string; comment?: string; reasons?: string[] }) => void;
+  settings?: {
+    label?: string;
+    submitText?: string;
+    comment?: {
+      enable: boolean;
+      satisfiedLabel?: string;
+      neutralLabel?: string;
+      dissatisfiedLabel?: string;
+    };
+    reasons?: {
+      enable: boolean;
+      label?: string;
+      multi?: boolean;
+      items: string[];
+    };
+  };
+  className?: string;
+};
+
 export type SentimentProps = {
   onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
   settings?: {

package/src/config.ts

@@ -448,7 +448,7 @@ export const themeConfigSchema = {
         },
         type: {
           type: 'string',
-          enum: ['rating', 'sentiment', 'comment', 'reasons'],
+          enum: ['rating', 'sentiment', 'comment', 'reasons', 'mood'],
           default: 'sentiment',
         },
         settings: {
@@ -477,6 +477,9 @@ export const themeConfigSchema = {
                 label: { type: 'string' },
                 likeLabel: { type: 'string' },
                 dislikeLabel: { type: 'string' },
+                satisfiedLabel: { type: 'string' },
+                neutralLabel: { type: 'string' },
+                dissatisfiedLabel: { type: 'string' },
               },
               additionalProperties: false,
             },

package/src/icons/DissatisfiedIcon/DissatisfiedIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+    <rect
+      width="16"
+      height="16"
+      transform="translate(0 0.511719)"
+      fill="white"
+      style={{ mixBlendMode: 'multiply' }}
+    />
+    <path
+      d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M8 10.0117C7.30982 10.0129 6.63168 10.1926 6.03151 10.5334C5.43135 10.8743 4.92958 11.3646 4.575 11.9567L5.43 12.4567C5.69683 12.0136 6.07369 11.647 6.524 11.3925C6.97431 11.1381 7.48276 11.0043 8 11.0043C8.51724 11.0043 9.0257 11.1381 9.47601 11.3925C9.92631 11.647 10.3032 12.0136 10.57 12.4567L11.425 11.9567C11.0704 11.3646 10.5687 10.8743 9.96849 10.5334C9.36833 10.1926 8.69019 10.0129 8 10.0117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+  </svg>
+);
+
+export const DissatisfiedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DissatisfiedIcon/DissatisfiedIcon',
+}))``;

package/src/icons/DissatisfiedIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/DissatisfiedIcon/DissatisfiedIcon';

package/src/icons/NeutralIcon/NeutralIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+    <rect
+      width="16"
+      height="16"
+      transform="translate(0 0.511719)"
+      fill="white"
+      style={{ mixBlendMode: 'multiply' }}
+    />
+    <path
+      d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7 6.9302 6.86831 6.61226 6.63389 6.37784C6.39947 6.14341 6.08152 6.01172 5.75 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5 6.9302 11.3683 6.61226 11.1339 6.37784C10.8995 6.14341 10.5815 6.01172 10.25 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path d="M11 10.5117H5V11.5117H11V10.5117Z" fill="black" fillOpacity="0.45" />
+  </svg>
+);
+
+export const NeutralIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/NeutralIcon/NeutralIcon',
+}))``;

package/src/icons/NeutralIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/NeutralIcon/NeutralIcon';

package/src/icons/SatisfiedIcon/SatisfiedIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Icon = () => (
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="17"
+    viewBox="0 0 16 17"
+    fill="none"
+  >
+    <rect
+      width="16"
+      height="16"
+      transform="translate(0 0.511719)"
+      fill="white"
+      style={{ mixBlendMode: 'multiply' }}
+    />
+    <path
+      d="M8 1.51172C6.61553 1.51172 5.26216 1.92226 4.11101 2.69143C2.95987 3.4606 2.06266 4.55385 1.53285 5.83293C1.00303 7.11202 0.86441 8.51948 1.13451 9.87735C1.4046 11.2352 2.07129 12.4825 3.05026 13.4615C4.02922 14.4404 5.2765 15.1071 6.63437 15.3772C7.99224 15.6473 9.3997 15.5087 10.6788 14.9789C11.9579 14.4491 13.0511 13.5519 13.8203 12.4007C14.5895 11.2496 15 9.89619 15 8.51172C15 6.6552 14.2625 4.87473 12.9497 3.56197C11.637 2.24922 9.85652 1.51172 8 1.51172ZM8 14.5117C6.81332 14.5117 5.65328 14.1598 4.66658 13.5005C3.67989 12.8412 2.91085 11.9042 2.45673 10.8078C2.0026 9.71146 1.88378 8.50506 2.11529 7.34118C2.3468 6.17729 2.91825 5.10819 3.75736 4.26908C4.59648 3.42996 5.66558 2.85852 6.82946 2.62701C7.99335 2.3955 9.19975 2.51432 10.2961 2.96844C11.3925 3.42257 12.3295 4.1916 12.9888 5.1783C13.6481 6.16499 14 7.32503 14 8.51172C14 10.103 13.3679 11.6291 12.2426 12.7544C11.1174 13.8796 9.5913 14.5117 8 14.5117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M5.75 6.01172C5.50278 6.01172 5.2611 6.08503 5.05554 6.22238C4.84998 6.35973 4.68976 6.55496 4.59515 6.78336C4.50054 7.01177 4.47579 7.26311 4.52402 7.50558C4.57225 7.74806 4.6913 7.97079 4.86612 8.1456C5.04094 8.32042 5.26366 8.43947 5.50614 8.4877C5.74862 8.53593 5.99995 8.51118 6.22836 8.41657C6.45677 8.32196 6.65199 8.16174 6.78934 7.95618C6.92669 7.75062 7 7.50895 7 7.26172C7.00134 7.0972 6.96991 6.93405 6.90757 6.78179C6.84522 6.62953 6.7532 6.49121 6.63686 6.37487C6.52052 6.25853 6.38219 6.1665 6.22993 6.10416C6.07767 6.04181 5.91453 6.01039 5.75 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M10.25 6.01172C10.0028 6.01172 9.7611 6.08503 9.55554 6.22238C9.34998 6.35973 9.18976 6.55496 9.09515 6.78336C9.00054 7.01177 8.97579 7.26311 9.02402 7.50558C9.07225 7.74806 9.1913 7.97079 9.36612 8.1456C9.54093 8.32042 9.76366 8.43947 10.0061 8.4877C10.2486 8.53593 10.4999 8.51118 10.7284 8.41657C10.9568 8.32196 11.152 8.16174 11.2893 7.95618C11.4267 7.75062 11.5 7.50895 11.5 7.26172C11.5013 7.0972 11.4699 6.93405 11.4076 6.78179C11.3452 6.62953 11.2532 6.49121 11.1369 6.37487C11.0205 6.25853 10.8822 6.1665 10.7299 6.10416C10.5777 6.04181 10.4145 6.01039 10.25 6.01172Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+    <path
+      d="M8 12.5117C8.69019 12.5106 9.36833 12.3308 9.96849 11.99C10.5687 11.6492 11.0704 11.1589 11.425 10.5667L10.57 10.0667C10.3032 10.5098 9.92631 10.8764 9.47601 11.1309C9.0257 11.3854 8.51724 11.5191 8 11.5191C7.48276 11.5191 6.97431 11.3854 6.524 11.1309C6.07369 10.8764 5.69683 10.5098 5.43 10.0667L4.575 10.5667C4.92958 11.1589 5.43135 11.6492 6.03151 11.99C6.63168 12.3308 7.30982 12.5106 8 12.5117Z"
+      fill="black"
+      fillOpacity="0.45"
+    />
+  </svg>
+);
+
+export const SatisfiedIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/SatisfiedIcon/SatisfiedIcon',
+}))``;

package/src/icons/SatisfiedIcon/index.ts

@@ -0,0 +1 @@
+export * from '@theme/icons/SatisfiedIcon/SatisfiedIcon';

package/src/icons/index.ts

@@ -21,3 +21,6 @@ export * from '@theme/icons/CheckboxIcon';
 export * from '@theme/icons/ErrorIcon';
 export * from '@theme/icons/EditIcon';
 export * from '@theme/icons/RocketIcon';
+export * from '@theme/icons/SatisfiedIcon';
+export * from '@theme/icons/DissatisfiedIcon';
+export * from '@theme/icons/NeutralIcon';

package/src/types/portal/src/shared/constants.ts

@@ -7,6 +7,7 @@ export enum FEEDBACK_TYPES {
   RATING = 'rating',
   SENTIMENT = 'sentiment',
   COMMENT = 'comment',
+  MOOD = 'mood',
 }
 export const DEV_LOGIN_SLUG = '/login/';
 export enum ExternalRoutes {

package/src/types/portal/src/shared/types/feedback.ts

@@ -1,6 +1,6 @@
 import type { FEEDBACK_TYPES } from '../constants';
 
-import type { RatingProps, SentimentProps, CommentProps } from '@theme/components/Feedback';
+import type {RatingProps, SentimentProps, CommentProps, MoodProps} from '@theme/components/Feedback';
 
 export type SubmitFeedbackParams = {
   type: string;
@@ -10,5 +10,5 @@ export type SubmitFeedbackParams = {
 
 export type FeedbackProps = {
   type: FEEDBACK_TYPES;
-  settings: (RatingProps | SentimentProps | CommentProps)['settings'];
+  settings: (RatingProps | SentimentProps | CommentProps | MoodProps)['settings'];
 }