@redocly/theme 0.44.9 → 0.45.0

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

@@ -1,3 +1,4 @@
+import { ReasonsSettingsSchema } from '@redocly/config';
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",
     NEUTRAL = "neutral",
@@ -18,11 +19,10 @@ export type MoodProps = {
             neutralLabel?: string;
             dissatisfiedLabel?: string;
         };
-        reasons?: {
-            hide?: boolean;
-            label?: string;
-            component?: string;
-            items: string[];
+        reasons?: ReasonsSettingsSchema & {
+            satisfied?: ReasonsSettingsSchema;
+            neutral?: ReasonsSettingsSchema;
+            dissatisfied?: ReasonsSettingsSchema;
         };
     };
     className?: string;

package/lib/components/Feedback/Mood.js

@@ -53,6 +53,16 @@ function Mood({ settings, onSubmit, className }) {
     const [reasons, setReasons] = React.useState([]);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
+    const checkIfShouldDisplayReasons = (score) => {
+        if (!score || !reasonsSettings) {
+            return false;
+        }
+        const scoreSpecificReasonsSettings = reasonsSettings[score];
+        if (typeof (scoreSpecificReasonsSettings === null || scoreSpecificReasonsSettings === void 0 ? void 0 : scoreSpecificReasonsSettings.hide) === 'undefined') {
+            return !reasonsSettings.hide;
+        }
+        return !(scoreSpecificReasonsSettings === null || scoreSpecificReasonsSettings === void 0 ? void 0 : scoreSpecificReasonsSettings.hide);
+    };
     const renderCommentLabel = (score) => {
         if (!commentSettings || (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide) === true)
             return '';
@@ -70,7 +80,27 @@ function Mood({ settings, onSubmit, className }) {
                 return translate('feedback.settings.comment.satisfiedLabel', 'What can we improve?');
         }
     };
-    const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
+    const renderReasonsLabel = (score) => {
+        var _a;
+        if (!reasonsSettings || (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.hide) === true)
+            return '';
+        return (_a = reasonsSettings[score]) === null || _a === void 0 ? void 0 : _a.label;
+    };
+    const resolveReasonsItems = (score) => {
+        var _a, _b;
+        if (!reasonsSettings) {
+            return [];
+        }
+        const defaultReasonsItems = (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [];
+        return defaultReasonsItems.concat((_b = (_a = reasonsSettings[score]) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []);
+    };
+    const resolveReasonsComponent = (score) => {
+        var _a;
+        if (!reasonsSettings || (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.hide) === true)
+            return 'checkbox';
+        return (_a = reasonsSettings[score]) === null || _a === void 0 ? void 0 : _a.component;
+    };
+    const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const onSubmitMoodForm = () => {
@@ -113,9 +143,9 @@ function Mood({ settings, onSubmit, className }) {
                         }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
-                        label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
-                        items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
-                        component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
+                        label: renderReasonsLabel(score),
+                        items: resolveReasonsItems(score),
+                        component: resolveReasonsComponent(score),
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,

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

@@ -1,3 +1,4 @@
+import { ReasonsSettingsSchema } from '@redocly/config';
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;
@@ -12,11 +13,9 @@ export type SentimentProps = {
             likeLabel?: string;
             dislikeLabel?: string;
         };
-        reasons?: {
-            hide?: boolean;
-            label?: string;
-            component?: string;
-            items: string[];
+        reasons?: ReasonsSettingsSchema & {
+            like?: ReasonsSettingsSchema;
+            dislike?: ReasonsSettingsSchema;
         };
     };
     className?: string;

package/lib/components/Feedback/Sentiment.js

@@ -45,7 +45,27 @@ function Sentiment({ settings, onSubmit, className }) {
     const [reasons, setReasons] = React.useState([]);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
+    const getScoreSpecificReasonSettings = (score) => {
+        switch (score) {
+            case 1:
+                return reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.like;
+            case -1:
+                return reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.dislike;
+            default:
+                return reasonsSettings;
+        }
+    };
+    const checkIfShouldDisplayReasons = (score) => {
+        if (!score || !reasonsSettings) {
+            return false;
+        }
+        const scoreSpecificReasonsSettings = getScoreSpecificReasonSettings(score);
+        if (typeof (scoreSpecificReasonsSettings === null || scoreSpecificReasonsSettings === void 0 ? void 0 : scoreSpecificReasonsSettings.hide) === 'undefined') {
+            return !reasonsSettings.hide;
+        }
+        return !(scoreSpecificReasonsSettings === null || scoreSpecificReasonsSettings === void 0 ? void 0 : scoreSpecificReasonsSettings.hide);
+    };
+    const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const commentLabel = score === 1
@@ -53,6 +73,20 @@ function Sentiment({ settings, onSubmit, className }) {
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
         : (commentSettings && commentSettings.dislikeLabel) ||
             translate('feedback.settings.comment.dislikeLabel', 'What can we improve?');
+    const renderReasonsLabel = (score) => {
+        const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
+        return scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.label;
+    };
+    const resolveReasonsItems = (score) => {
+        var _a;
+        const defaultReasonsItems = (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [];
+        const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
+        return defaultReasonsItems.concat((_a = scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.items) !== null && _a !== void 0 ? _a : []);
+    };
+    const resolveReasonsComponent = (score) => {
+        const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
+        return scoreSpecificReasonSettings === null || scoreSpecificReasonSettings === void 0 ? void 0 : scoreSpecificReasonSettings.component;
+    };
     const onSubmitSentimentForm = () => {
         onSubmit({
             score,
@@ -90,9 +124,9 @@ function Sentiment({ settings, onSubmit, className }) {
                         }, "aria-label": "Dislike", icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
-                        label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
-                        items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
-                        component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
+                        label: renderReasonsLabel(score),
+                        items: resolveReasonsItems(score),
+                        component: resolveReasonsComponent(score),
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.44.9",
+  "version": "0.45.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.15.0"
+    "@redocly/config": "0.16.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Feedback/Mood.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
+import { ReasonsSettingsSchema } from '@redocly/config';
 
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
@@ -30,11 +31,10 @@ export type MoodProps = {
       neutralLabel?: string;
       dissatisfiedLabel?: string;
     };
-    reasons?: {
-      hide?: boolean;
-      label?: string;
-      component?: string;
-      items: string[];
+    reasons?: ReasonsSettingsSchema & {
+      satisfied?: ReasonsSettingsSchema;
+      neutral?: ReasonsSettingsSchema;
+      dissatisfied?: ReasonsSettingsSchema;
     };
   };
   className?: string;
@@ -49,6 +49,20 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
+  const checkIfShouldDisplayReasons = (score: string) => {
+    if (!score || !reasonsSettings) {
+      return false;
+    }
+
+    const scoreSpecificReasonsSettings = reasonsSettings[score as MOOD_STATES];
+
+    if (typeof scoreSpecificReasonsSettings?.hide === 'undefined') {
+      return !reasonsSettings.hide;
+    }
+
+    return !scoreSpecificReasonsSettings?.hide;
+  };
+
   const renderCommentLabel = (score: string) => {
     if (!commentSettings || commentSettings?.hide === true) return '';
 
@@ -73,7 +87,29 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     }
   };
 
-  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
+  const renderReasonsLabel = (score: string) => {
+    if (!reasonsSettings || reasonsSettings?.hide === true) return '';
+
+    return reasonsSettings[score as MOOD_STATES]?.label;
+  };
+
+  const resolveReasonsItems = (score: string) => {
+    if (!reasonsSettings) {
+      return [];
+    }
+
+    const defaultReasonsItems = reasonsSettings?.items || [];
+
+    return defaultReasonsItems.concat(reasonsSettings[score as MOOD_STATES]?.items ?? []);
+  };
+
+  const resolveReasonsComponent = (score: string) => {
+    if (!reasonsSettings || reasonsSettings?.hide === true) return 'checkbox';
+
+    return reasonsSettings[score as MOOD_STATES]?.component;
+  };
+
+  const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
 
@@ -160,9 +196,9 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
             {displayReasons && (
               <Reasons
                 settings={{
-                  label: reasonsSettings?.label,
-                  items: reasonsSettings?.items || [],
-                  component: reasonsSettings?.component,
+                  label: renderReasonsLabel(score),
+                  items: resolveReasonsItems(score),
+                  component: resolveReasonsComponent(score),
                 }}
                 onChange={setReasons}
               />

package/src/components/Feedback/Sentiment.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
+import { ReasonsSettingsSchema } from '@redocly/config';
 
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
@@ -22,11 +23,9 @@ export type SentimentProps = {
       likeLabel?: string;
       dislikeLabel?: string;
     };
-    reasons?: {
-      hide?: boolean;
-      label?: string;
-      component?: string;
-      items: string[];
+    reasons?: ReasonsSettingsSchema & {
+      like?: ReasonsSettingsSchema;
+      dislike?: ReasonsSettingsSchema;
     };
   };
   className?: string;
@@ -41,7 +40,32 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
+  const getScoreSpecificReasonSettings = (score: number) => {
+    switch (score) {
+      case 1:
+        return reasonsSettings?.like;
+      case -1:
+        return reasonsSettings?.dislike;
+      default:
+        return reasonsSettings;
+    }
+  };
+
+  const checkIfShouldDisplayReasons = (score: number) => {
+    if (!score || !reasonsSettings) {
+      return false;
+    }
+
+    const scoreSpecificReasonsSettings = getScoreSpecificReasonSettings(score);
+
+    if (typeof scoreSpecificReasonsSettings?.hide === 'undefined') {
+      return !reasonsSettings.hide;
+    }
+
+    return !scoreSpecificReasonsSettings?.hide;
+  };
+
+  const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
 
@@ -52,6 +76,25 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
       : (commentSettings && commentSettings.dislikeLabel) ||
         translate('feedback.settings.comment.dislikeLabel', 'What can we improve?');
 
+  const renderReasonsLabel = (score: number) => {
+    const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
+
+    return scoreSpecificReasonSettings?.label;
+  };
+
+  const resolveReasonsItems = (score: number) => {
+    const defaultReasonsItems = reasonsSettings?.items || [];
+    const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
+
+    return defaultReasonsItems.concat(scoreSpecificReasonSettings?.items ?? []);
+  };
+
+  const resolveReasonsComponent = (score: number) => {
+    const scoreSpecificReasonSettings = getScoreSpecificReasonSettings(score);
+
+    return scoreSpecificReasonSettings?.component;
+  };
+
   const onSubmitSentimentForm = () => {
     onSubmit({
       score,
@@ -126,9 +169,9 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
             {displayReasons && (
               <Reasons
                 settings={{
-                  label: reasonsSettings?.label,
-                  items: reasonsSettings?.items || [],
-                  component: reasonsSettings?.component,
+                  label: renderReasonsLabel(score),
+                  items: resolveReasonsItems(score),
+                  component: resolveReasonsComponent(score),
                 }}
                 onChange={setReasons}
               />