@redocly/theme 0.27.4 → 0.28.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/lib/components/Feedback/Comment.js +4 -2
  2. package/lib/components/Feedback/Mood.js +10 -6
  3. package/lib/components/Feedback/Rating.js +4 -3
  4. package/lib/components/Feedback/Reasons.js +5 -4
  5. package/lib/components/Feedback/Scale.js +8 -5
  6. package/lib/components/Feedback/Sentiment.js +8 -5
  7. package/lib/components/Feedback/types.d.ts +5 -5
  8. package/lib/components/Feedback/useReportDialog.js +1 -1
  9. package/lib/config.d.ts +10 -6
  10. package/lib/config.js +11 -3
  11. package/package.json +1 -1
  12. package/src/components/Feedback/Comment.tsx +7 -8
  13. package/src/components/Feedback/Mood.tsx +16 -15
  14. package/src/components/Feedback/Rating.tsx +7 -6
  15. package/src/components/Feedback/Reasons.tsx +11 -9
  16. package/src/components/Feedback/Scale.tsx +11 -14
  17. package/src/components/Feedback/Sentiment.tsx +11 -14
  18. package/src/components/Feedback/types.ts +5 -5
  19. package/src/components/Feedback/useReportDialog.ts +1 -1
  20. package/src/config.ts +11 -3
package/lib/components/Feedback/Comment.js CHANGED
@@ -53,11 +53,13 @@ const Comment = ({ settings, onSubmit, onCancel, className, standAlone = true, }
53
53
  };
54
54
  if (submitValue) {
55
55
  return (React.createElement(StateWrapper, { className: className },
56
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, translate('theme.feedback.settings.comment.submitText', submitText || 'Thank you for helping improve our documentation!')),
56
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText" }, submitText ||
57
+ translate('theme.feedback.settings.comment.submitText', 'Thank you for helping improve our documentation!')),
57
58
  React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
58
59
  }
59
60
  return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: '424px', padding: '16px 24px' } : { width: 'auto' } },
60
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label" }, translate('theme.feedback.settings.comment.label', label || 'Please share your feedback with us.')),
61
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label" }, label ||
62
+ translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.')),
61
63
  React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
62
64
  standAlone && (React.createElement(ButtonsContainer, null,
63
65
  React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send }, translate('theme.feedback.settings.comment.send', 'Send')),
package/lib/components/Feedback/Mood.js CHANGED
@@ -54,11 +54,14 @@ const Mood = ({ settings, onSubmit, className }) => {
54
54
  return '';
55
55
  switch (score) {
56
56
  case MOOD_STATES.SATISFIED:
57
- return translate('theme.feedback.settings.comment.satisfiedLabel', commentSettings.satisfiedLabel || 'What was most helpful?');
57
+ return (commentSettings.satisfiedLabel ||
58
+ translate('theme.feedback.settings.comment.satisfiedLabel', 'What was most helpful?'));
58
59
  case MOOD_STATES.NEUTRAL:
59
- return translate('theme.feedback.settings.comment.neutralLabel', commentSettings.neutralLabel || 'What can we improve?');
60
+ return (commentSettings.neutralLabel ||
61
+ translate('theme.feedback.settings.comment.neutralLabel', 'What can we improve?'));
60
62
  case MOOD_STATES.DISSATISFIED:
61
- return translate('theme.feedback.settings.comment.dissatisfiedLabel', commentSettings.dissatisfiedLabel || 'What can we improve?');
63
+ return (commentSettings.dissatisfiedLabel ||
64
+ translate('theme.feedback.settings.comment.dissatisfiedLabel', 'What can we improve?'));
62
65
  default:
63
66
  return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
64
67
  }
@@ -83,13 +86,14 @@ const Mood = ({ settings, onSubmit, className }) => {
83
86
  }, [score, displayComment, displayReasons]);
84
87
  if (isSubmitted) {
85
88
  return (React.createElement(Wrapper, null,
86
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!')),
89
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
90
+ translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
87
91
  React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
88
92
  }
89
93
  return (React.createElement(Wrapper, { "data-component-name": "Feedback/Mood", className: className },
90
94
  React.createElement(StyledForm, null,
91
95
  React.createElement(StyledFormMandatoryFields, null,
92
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'Was this page helpful?')),
96
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
93
97
  React.createElement(StyledMandatoryFieldContainer, null,
94
98
  React.createElement(React.Fragment, null,
95
99
  React.createElement(Vote, { className: `${score === MOOD_STATES.DISSATISFIED ? 'active' : ''}`, onClick: () => {
@@ -108,7 +112,7 @@ const Mood = ({ settings, onSubmit, className }) => {
108
112
  displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
109
113
  label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
110
114
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
111
- multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
115
+ component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
112
116
  }, onChange: setReasons })),
113
117
  displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }))),
114
118
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
package/lib/components/Feedback/Rating.js CHANGED
@@ -65,20 +65,21 @@ const Rating = ({ settings, onSubmit, className }) => {
65
65
  }, [score, displayComment, displayReasons]);
66
66
  if (isSubmitted) {
67
67
  return (React.createElement(Wrapper, null,
68
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!')),
68
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
69
+ translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
69
70
  React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
70
71
  }
71
72
  return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating", className: className },
72
73
  React.createElement(StyledForm, null,
73
74
  React.createElement(StyledFormMandatoryFields, null,
74
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'How helpful was this page?')),
75
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
75
76
  React.createElement(StyledMandatoryFieldContainer, null,
76
77
  React.createElement(Stars_1.Stars, { max: exports.FEEDBACK_MAX_RATING, onChange: setScore, value: score }))),
77
78
  React.createElement(StyledFormOptionalFields, null,
78
79
  displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
79
80
  label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
80
81
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
81
- multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
82
+ component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
82
83
  }, onChange: setReasons })),
83
84
  displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
84
85
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
package/lib/components/Feedback/Reasons.js CHANGED
@@ -31,22 +31,23 @@ const React = __importStar(require("react"));
31
31
  const styled_components_1 = __importDefault(require("styled-components"));
32
32
  const hooks_1 = require("../../mocks/hooks");
33
33
  const Reasons = ({ settings, onChange, className }) => {
34
- const { label, multi, items = [] } = settings;
34
+ const { label, component, items = [] } = settings;
35
35
  const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
36
36
  const { translate } = (0, hooks_1.useTranslate)();
37
37
  if (!items.length) {
38
38
  return React.createElement(React.Fragment, null);
39
39
  }
40
- const input_type = multi ? 'checkbox' : 'radio';
40
+ const input_type = component || 'checkbox';
41
41
  const handleOptionChange = (position) => {
42
- const updatedCheckedState = multi
42
+ const updatedCheckedState = component === 'checkbox'
43
43
  ? checkedState.map((item, index) => (index === position ? !item : item))
44
44
  : items.map((_, idx) => position === idx);
45
45
  setCheckedState(updatedCheckedState);
46
46
  onChange(items.filter((_, index) => !!updatedCheckedState[index]));
47
47
  };
48
48
  return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": "theme.feedback.settings.reasons.label", className: className },
49
- React.createElement(Label, null, translate('theme.feedback.settings.reasons.label', label || 'Which statement describes your thoughts about this page?')),
49
+ React.createElement(Label, null, label ||
50
+ translate('theme.feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
50
51
  items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
51
52
  React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
52
53
  React.createElement("label", { "data-translation-key": `theme.feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason)))))));
package/lib/components/Feedback/Scale.js CHANGED
@@ -68,22 +68,25 @@ const Scale = ({ settings, onSubmit, className }) => {
68
68
  }, [score, displayComment, displayReasons]);
69
69
  if (isSubmitted) {
70
70
  return (React.createElement(Wrapper, null,
71
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!')),
71
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
72
+ translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
72
73
  React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
73
74
  }
74
75
  return (React.createElement(Wrapper, { "data-component-name": "Feedback/Scale", className: className },
75
76
  React.createElement(StyledForm, null,
76
77
  React.createElement(StyledFormMandatoryFields, null,
77
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'How helpful was this page?')),
78
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
78
79
  React.createElement(ScaleWrapper, null, scaleOptions),
79
80
  React.createElement(SubLabelContainer, null,
80
- React.createElement(SubLabel, { "data-translation-key": "theme.feedback.settings.leftScaleLabel" }, translate('theme.feedback.settings.leftScaleLabel', leftScaleLabel || 'Not helpful at all')),
81
- React.createElement(SubLabel, { "data-translation-key": "theme.feedback.settings.rightScaleLabel" }, translate('theme.feedback.settings.rightScaleLabel', rightScaleLabel || 'Extremely helpful')))),
81
+ React.createElement(SubLabel, { "data-translation-key": "theme.feedback.settings.leftScaleLabel" }, leftScaleLabel ||
82
+ translate('theme.feedback.settings.leftScaleLabel', 'Not helpful at all')),
83
+ React.createElement(SubLabel, { "data-translation-key": "theme.feedback.settings.rightScaleLabel" }, rightScaleLabel ||
84
+ translate('theme.feedback.settings.rightScaleLabel', 'Extremely helpful')))),
82
85
  React.createElement(StyledFormOptionalFields, null,
83
86
  displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
84
87
  label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
85
88
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
86
- multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
89
+ component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
87
90
  }, onChange: setReasons })),
88
91
  displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
89
92
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
package/lib/components/Feedback/Sentiment.js CHANGED
@@ -47,8 +47,10 @@ const Sentiment = ({ settings, onSubmit, className }) => {
47
47
  const displayComment = !!score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable);
48
48
  const displaySubmitBnt = !!score && (displayReasons || displayComment);
49
49
  const commentLabel = score === 1
50
- ? translate('theme.feedback.settings.comment.likeLabel', (commentSettings && commentSettings.likeLabel) || 'What was most helpful?')
51
- : translate('theme.feedback.settings.comment.dislikeLabel', (commentSettings && commentSettings.dislikeLabel) || 'What can we improve?');
50
+ ? (commentSettings && commentSettings.likeLabel) ||
51
+ translate('theme.feedback.settings.comment.likeLabel', 'What was most helpful?')
52
+ : (commentSettings && commentSettings.dislikeLabel) ||
53
+ translate('theme.feedback.settings.comment.dislikeLabel', 'What can we improve?');
52
54
  const onSubmitSentimentForm = () => {
53
55
  onSubmit({
54
56
  score,
@@ -66,13 +68,14 @@ const Sentiment = ({ settings, onSubmit, className }) => {
66
68
  }, [score, displayComment, displayReasons]);
67
69
  if (isSubmitted) {
68
70
  return (React.createElement(Wrapper, null,
69
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, translate('theme.feedback.settings.submitText', submitText || 'Thank you for helping improve our documentation!')),
71
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
72
+ translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
70
73
  React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
71
74
  }
72
75
  return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment", className: className },
73
76
  React.createElement(StyledForm, null,
74
77
  React.createElement(StyledFormMandatoryFields, null,
75
- React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, translate('theme.feedback.settings.label', label || 'Was this page helpful?')),
78
+ React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
76
79
  React.createElement(StyledMandatoryFieldContainer, null,
77
80
  React.createElement(React.Fragment, null,
78
81
  React.createElement(Vote, { className: `${score === 1 ? 'active' : ''}`, onClick: () => {
@@ -87,7 +90,7 @@ const Sentiment = ({ settings, onSubmit, className }) => {
87
90
  displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
88
91
  label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
89
92
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
90
- multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
93
+ component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
91
94
  }, onChange: setReasons })),
92
95
  displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }))),
93
96
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
package/lib/components/Feedback/types.d.ts CHANGED
@@ -17,7 +17,7 @@ export type RatingProps = {
17
17
  reasons?: {
18
18
  enable: boolean;
19
19
  label?: string;
20
- multi?: boolean;
20
+ component?: string;
21
21
  items: string[];
22
22
  };
23
23
  };
@@ -43,7 +43,7 @@ export type ScaleProps = {
43
43
  reasons?: {
44
44
  enable: boolean;
45
45
  label?: string;
46
- multi?: boolean;
46
+ component?: string;
47
47
  items: string[];
48
48
  };
49
49
  };
@@ -68,7 +68,7 @@ export type MoodProps = {
68
68
  reasons?: {
69
69
  enable: boolean;
70
70
  label?: string;
71
- multi?: boolean;
71
+ component?: string;
72
72
  items: string[];
73
73
  };
74
74
  };
@@ -92,7 +92,7 @@ export type SentimentProps = {
92
92
  reasons?: {
93
93
  enable: boolean;
94
94
  label?: string;
95
- multi?: boolean;
95
+ component?: string;
96
96
  items: string[];
97
97
  };
98
98
  };
@@ -115,7 +115,7 @@ export type ReasonsProps = {
115
115
  onChange: (value: string[]) => void;
116
116
  settings: {
117
117
  label?: string;
118
- multi?: boolean;
118
+ component?: string;
119
119
  items: string[];
120
120
  };
121
121
  className?: string;
package/lib/components/Feedback/useReportDialog.js CHANGED
@@ -8,7 +8,7 @@ const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
8
8
  function useReportDialog() {
9
9
  const { codeSnippet: { report = {} } = {} } = (0, hooks_2.useThemeConfig)();
10
10
  const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
11
- const isReportButtonShown = (report === null || report === void 0 ? void 0 : report.hide) === false; // TODO: report temporary disabled by default
11
+ const isReportButtonShown = (report === null || report === void 0 ? void 0 : report.hide) !== true;
12
12
  const { translate } = (0, hooks_1.useTranslate)();
13
13
  const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
14
14
  const showReportDialog = () => {
package/lib/config.d.ts CHANGED
@@ -1053,8 +1053,10 @@ export declare const themeConfigSchema: {
1053
1053
  readonly buttonText: {
1054
1054
  readonly type: "string";
1055
1055
  };
1056
- readonly multi: {
1057
- readonly type: "boolean";
1056
+ readonly component: {
1057
+ readonly type: "string";
1058
+ readonly enum: readonly ["radio", "checkbox"];
1059
+ readonly default: "checkbox";
1058
1060
  };
1059
1061
  readonly items: {
1060
1062
  readonly type: "array";
@@ -1076,8 +1078,10 @@ export declare const themeConfigSchema: {
1076
1078
  readonly type: "boolean";
1077
1079
  readonly default: true;
1078
1080
  };
1079
- readonly multi: {
1080
- readonly type: "boolean";
1081
+ readonly component: {
1082
+ readonly type: "string";
1083
+ readonly enum: readonly ["radio", "checkbox"];
1084
+ readonly default: "checkbox";
1081
1085
  };
1082
1086
  readonly label: {
1083
1087
  readonly type: "string";
@@ -1248,7 +1252,7 @@ export declare const themeConfigSchema: {
1248
1252
  };
1249
1253
  readonly additionalProperties: false;
1250
1254
  readonly default: {
1251
- readonly hide: true;
1255
+ readonly hide: false;
1252
1256
  };
1253
1257
  };
1254
1258
  readonly expand: {
@@ -2283,7 +2287,7 @@ export declare const productThemeOverrideSchema: {
2283
2287
  };
2284
2288
  readonly additionalProperties: false;
2285
2289
  readonly default: {
2286
- readonly hide: true;
2290
+ readonly hide: false;
2287
2291
  };
2288
2292
  };
2289
2293
  readonly expand: {
package/lib/config.js CHANGED
@@ -402,7 +402,11 @@ exports.themeConfigSchema = {
402
402
  label: { type: 'string' },
403
403
  submitText: { type: 'string' },
404
404
  buttonText: { type: 'string' },
405
- multi: { type: 'boolean' },
405
+ component: {
406
+ type: 'string',
407
+ enum: ['radio', 'checkbox'],
408
+ default: 'checkbox',
409
+ },
406
410
  items: { type: 'array', items: { type: 'string' }, minItems: 1 },
407
411
  leftScaleLabel: { type: 'string' },
408
412
  rightScaleLabel: { type: 'string' },
@@ -410,7 +414,11 @@ exports.themeConfigSchema = {
410
414
  type: 'object',
411
415
  properties: {
412
416
  enable: { type: 'boolean', default: true },
413
- multi: { type: 'boolean' },
417
+ component: {
418
+ type: 'string',
419
+ enum: ['radio', 'checkbox'],
420
+ default: 'checkbox',
421
+ },
414
422
  label: { type: 'string' },
415
423
  items: { type: 'array', items: { type: 'string' } },
416
424
  },
@@ -493,7 +501,7 @@ exports.themeConfigSchema = {
493
501
  type: 'object',
494
502
  properties: Object.assign({}, hideConfigSchema.properties),
495
503
  additionalProperties: false,
496
- default: { hide: true },
504
+ default: { hide: false },
497
505
  },
498
506
  expand: {
499
507
  type: 'object',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.27.4",
3
+ "version": "0.28.1",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/Feedback/Comment.tsx CHANGED
@@ -37,10 +37,11 @@ export const Comment = ({
37
37
  return (
38
38
  <StateWrapper className={className}>
39
39
  <Label data-translation-key="theme.feedback.settings.comment.submitText">
40
- {translate(
41
- 'theme.feedback.settings.comment.submitText',
42
- submitText || 'Thank you for helping improve our documentation!',
43
- )}
40
+ {submitText ||
41
+ translate(
42
+ 'theme.feedback.settings.comment.submitText',
43
+ 'Thank you for helping improve our documentation!',
44
+ )}
44
45
  </Label>
45
46
  <RadioCheckButtonIcon />
46
47
  </StateWrapper>
@@ -54,10 +55,8 @@ export const Comment = ({
54
55
  style={standAlone ? { width: '424px', padding: '16px 24px' } : { width: 'auto' }}
55
56
  >
56
57
  <Label data-translation-key="theme.feedback.settings.comment.label">
57
- {translate(
58
- 'theme.feedback.settings.comment.label',
59
- label || 'Please share your feedback with us.',
60
- )}
58
+ {label ||
59
+ translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.')}
61
60
  </Label>
62
61
  <TextArea rows={3} onChange={handleTextAreaChange} />
63
62
  {standAlone && (
package/src/components/Feedback/Mood.tsx CHANGED
@@ -29,19 +29,19 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
29
29
 
30
30
  switch (score) {
31
31
  case MOOD_STATES.SATISFIED:
32
- return translate(
33
- 'theme.feedback.settings.comment.satisfiedLabel',
34
- commentSettings.satisfiedLabel || 'What was most helpful?',
32
+ return (
33
+ commentSettings.satisfiedLabel ||
34
+ translate('theme.feedback.settings.comment.satisfiedLabel', 'What was most helpful?')
35
35
  );
36
36
  case MOOD_STATES.NEUTRAL:
37
- return translate(
38
- 'theme.feedback.settings.comment.neutralLabel',
39
- commentSettings.neutralLabel || 'What can we improve?',
37
+ return (
38
+ commentSettings.neutralLabel ||
39
+ translate('theme.feedback.settings.comment.neutralLabel', 'What can we improve?')
40
40
  );
41
41
  case MOOD_STATES.DISSATISFIED:
42
- return translate(
43
- 'theme.feedback.settings.comment.dissatisfiedLabel',
44
- commentSettings.dissatisfiedLabel || 'What can we improve?',
42
+ return (
43
+ commentSettings.dissatisfiedLabel ||
44
+ translate('theme.feedback.settings.comment.dissatisfiedLabel', 'What can we improve?')
45
45
  );
46
46
  default:
47
47
  return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
@@ -73,10 +73,11 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
73
73
  return (
74
74
  <Wrapper>
75
75
  <Label data-translation-key="theme.feedback.settings.submitText">
76
- {translate(
77
- 'theme.feedback.settings.submitText',
78
- submitText || 'Thank you for helping improve our documentation!',
79
- )}
76
+ {submitText ||
77
+ translate(
78
+ 'theme.feedback.settings.submitText',
79
+ 'Thank you for helping improve our documentation!',
80
+ )}
80
81
  </Label>
81
82
  <RadioCheckButtonIcon />
82
83
  </Wrapper>
@@ -88,7 +89,7 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
88
89
  <StyledForm>
89
90
  <StyledFormMandatoryFields>
90
91
  <Label data-translation-key="theme.feedback.settings.label">
91
- {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
92
+ {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
92
93
  </Label>
93
94
  <StyledMandatoryFieldContainer>
94
95
  <>
@@ -125,7 +126,7 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
125
126
  settings={{
126
127
  label: reasonsSettings?.label,
127
128
  items: reasonsSettings?.items || [],
128
- multi: reasonsSettings?.multi,
129
+ component: reasonsSettings?.component,
129
130
  }}
130
131
  onChange={setReasons}
131
132
  />
package/src/components/Feedback/Rating.tsx CHANGED
@@ -47,10 +47,11 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
47
47
  return (
48
48
  <Wrapper>
49
49
  <Label data-translation-key="theme.feedback.settings.submitText">
50
- {translate(
51
- 'theme.feedback.settings.submitText',
52
- submitText || 'Thank you for helping improve our documentation!',
53
- )}
50
+ {submitText ||
51
+ translate(
52
+ 'theme.feedback.settings.submitText',
53
+ 'Thank you for helping improve our documentation!',
54
+ )}
54
55
  </Label>
55
56
  <RadioCheckButtonIcon />
56
57
  </Wrapper>
@@ -62,7 +63,7 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
62
63
  <StyledForm>
63
64
  <StyledFormMandatoryFields>
64
65
  <Label data-translation-key="theme.feedback.settings.label">
65
- {translate('theme.feedback.settings.label', label || 'How helpful was this page?')}
66
+ {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
66
67
  </Label>
67
68
 
68
69
  <StyledMandatoryFieldContainer>
@@ -76,7 +77,7 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
76
77
  settings={{
77
78
  label: reasonsSettings?.label,
78
79
  items: reasonsSettings?.items || [],
79
- multi: reasonsSettings?.multi,
80
+ component: reasonsSettings?.component,
80
81
  }}
81
82
  onChange={setReasons}
82
83
  />
package/src/components/Feedback/Reasons.tsx CHANGED
@@ -5,7 +5,7 @@ import type { ReasonsProps } from '@theme/components/Feedback';
5
5
  import { useTranslate } from '@portal/hooks';
6
6
 
7
7
  export const Reasons = ({ settings, onChange, className }: ReasonsProps): JSX.Element => {
8
- const { label, multi, items = [] } = settings;
8
+ const { label, component, items = [] } = settings;
9
9
  const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
10
10
  const { translate } = useTranslate();
11
11
 
@@ -13,12 +13,13 @@ export const Reasons = ({ settings, onChange, className }: ReasonsProps): JSX.El
13
13
  return <></>;
14
14
  }
15
15
 
16
- const input_type = multi ? 'checkbox' : 'radio';
16
+ const input_type = component || 'checkbox';
17
17
 
18
18
  const handleOptionChange = (position: number) => {
19
- const updatedCheckedState = multi
20
- ? checkedState.map((item, index) => (index === position ? !item : item))
21
- : items.map((_, idx) => position === idx);
19
+ const updatedCheckedState =
20
+ component === 'checkbox'
21
+ ? checkedState.map((item, index) => (index === position ? !item : item))
22
+ : items.map((_, idx) => position === idx);
22
23
  setCheckedState(updatedCheckedState);
23
24
 
24
25
  onChange(items.filter((_, index) => !!updatedCheckedState[index]));
@@ -31,10 +32,11 @@ export const Reasons = ({ settings, onChange, className }: ReasonsProps): JSX.El
31
32
  className={className}
32
33
  >
33
34
  <Label>
34
- {translate(
35
- 'theme.feedback.settings.reasons.label',
36
- label || 'Which statement describes your thoughts about this page?',
37
- )}
35
+ {label ||
36
+ translate(
37
+ 'theme.feedback.settings.reasons.label',
38
+ 'Which statement describes your thoughts about this page?',
39
+ )}
38
40
  </Label>
39
41
  {items.map((reason, idx) => (
40
42
  <OptionWrapper key={reason}>
package/src/components/Feedback/Scale.tsx CHANGED
@@ -67,10 +67,11 @@ export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
67
67
  return (
68
68
  <Wrapper>
69
69
  <Label data-translation-key="theme.feedback.settings.submitText">
70
- {translate(
71
- 'theme.feedback.settings.submitText',
72
- submitText || 'Thank you for helping improve our documentation!',
73
- )}
70
+ {submitText ||
71
+ translate(
72
+ 'theme.feedback.settings.submitText',
73
+ 'Thank you for helping improve our documentation!',
74
+ )}
74
75
  </Label>
75
76
  <RadioCheckButtonIcon />
76
77
  </Wrapper>
@@ -82,23 +83,19 @@ export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
82
83
  <StyledForm>
83
84
  <StyledFormMandatoryFields>
84
85
  <Label data-translation-key="theme.feedback.settings.label">
85
- {translate('theme.feedback.settings.label', label || 'How helpful was this page?')}
86
+ {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
86
87
  </Label>
87
88
 
88
89
  <ScaleWrapper>{scaleOptions}</ScaleWrapper>
89
90
 
90
91
  <SubLabelContainer>
91
92
  <SubLabel data-translation-key="theme.feedback.settings.leftScaleLabel">
92
- {translate(
93
- 'theme.feedback.settings.leftScaleLabel',
94
- leftScaleLabel || 'Not helpful at all',
95
- )}
93
+ {leftScaleLabel ||
94
+ translate('theme.feedback.settings.leftScaleLabel', 'Not helpful at all')}
96
95
  </SubLabel>
97
96
  <SubLabel data-translation-key="theme.feedback.settings.rightScaleLabel">
98
- {translate(
99
- 'theme.feedback.settings.rightScaleLabel',
100
- rightScaleLabel || 'Extremely helpful',
101
- )}
97
+ {rightScaleLabel ||
98
+ translate('theme.feedback.settings.rightScaleLabel', 'Extremely helpful')}
102
99
  </SubLabel>
103
100
  </SubLabelContainer>
104
101
  </StyledFormMandatoryFields>
@@ -108,7 +105,7 @@ export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
108
105
  settings={{
109
106
  label: reasonsSettings?.label,
110
107
  items: reasonsSettings?.items || [],
111
- multi: reasonsSettings?.multi,
108
+ component: reasonsSettings?.component,
112
109
  }}
113
110
  onChange={setReasons}
114
111
  />
package/src/components/Feedback/Sentiment.tsx CHANGED
@@ -24,14 +24,10 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
24
24
 
25
25
  const commentLabel =
26
26
  score === 1
27
- ? translate(
28
- 'theme.feedback.settings.comment.likeLabel',
29
- (commentSettings && commentSettings.likeLabel) || 'What was most helpful?',
30
- )
31
- : translate(
32
- 'theme.feedback.settings.comment.dislikeLabel',
33
- (commentSettings && commentSettings.dislikeLabel) || 'What can we improve?',
34
- );
27
+ ? (commentSettings && commentSettings.likeLabel) ||
28
+ translate('theme.feedback.settings.comment.likeLabel', 'What was most helpful?')
29
+ : (commentSettings && commentSettings.dislikeLabel) ||
30
+ translate('theme.feedback.settings.comment.dislikeLabel', 'What can we improve?');
35
31
 
36
32
  const onSubmitSentimentForm = () => {
37
33
  onSubmit({
@@ -54,10 +50,11 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
54
50
  return (
55
51
  <Wrapper>
56
52
  <Label data-translation-key="theme.feedback.settings.submitText">
57
- {translate(
58
- 'theme.feedback.settings.submitText',
59
- submitText || 'Thank you for helping improve our documentation!',
60
- )}
53
+ {submitText ||
54
+ translate(
55
+ 'theme.feedback.settings.submitText',
56
+ 'Thank you for helping improve our documentation!',
57
+ )}
61
58
  </Label>
62
59
  <RadioCheckButtonIcon />
63
60
  </Wrapper>
@@ -69,7 +66,7 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
69
66
  <StyledForm>
70
67
  <StyledFormMandatoryFields>
71
68
  <Label data-translation-key="theme.feedback.settings.label">
72
- {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
69
+ {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
73
70
  </Label>
74
71
 
75
72
  <StyledMandatoryFieldContainer>
@@ -99,7 +96,7 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
99
96
  settings={{
100
97
  label: reasonsSettings?.label,
101
98
  items: reasonsSettings?.items || [],
102
- multi: reasonsSettings?.multi,
99
+ component: reasonsSettings?.component,
103
100
  }}
104
101
  onChange={setReasons}
105
102
  />
package/src/components/Feedback/types.ts CHANGED
@@ -18,7 +18,7 @@ export type RatingProps = {
18
18
  reasons?: {
19
19
  enable: boolean;
20
20
  label?: string;
21
- multi?: boolean;
21
+ component?: string;
22
22
  items: string[];
23
23
  };
24
24
  };
@@ -45,7 +45,7 @@ export type ScaleProps = {
45
45
  reasons?: {
46
46
  enable: boolean;
47
47
  label?: string;
48
- multi?: boolean;
48
+ component?: string;
49
49
  items: string[];
50
50
  };
51
51
  };
@@ -66,7 +66,7 @@ export type MoodProps = {
66
66
  reasons?: {
67
67
  enable: boolean;
68
68
  label?: string;
69
- multi?: boolean;
69
+ component?: string;
70
70
  items: string[];
71
71
  };
72
72
  };
@@ -86,7 +86,7 @@ export type SentimentProps = {
86
86
  reasons?: {
87
87
  enable: boolean;
88
88
  label?: string;
89
- multi?: boolean;
89
+ component?: string;
90
90
  items: string[];
91
91
  };
92
92
  };
@@ -108,7 +108,7 @@ export type ReasonsProps = {
108
108
  onChange: (value: string[]) => void;
109
109
  settings: {
110
110
  label?: string;
111
- multi?: boolean;
111
+ component?: string;
112
112
  items: string[];
113
113
  };
114
114
  className?: string;
package/src/components/Feedback/useReportDialog.ts CHANGED
@@ -19,7 +19,7 @@ interface ReportComponentsProps {
19
19
  export function useReportDialog(): Record<string, ReportComponentsProps> {
20
20
  const { codeSnippet: { report = {} } = {} } = useThemeConfig();
21
21
  const [isReportDialogShown, setIsReportDialogShown] = useState(false);
22
- const isReportButtonShown = report?.hide === false; // TODO: report temporary disabled by default
22
+ const isReportButtonShown = report?.hide !== true;
23
23
  const { translate } = useTranslate();
24
24
  const { submitFeedback } = useSubmitFeedback();
25
25
 
package/src/config.ts CHANGED
@@ -458,7 +458,11 @@ export const themeConfigSchema = {
458
458
  label: { type: 'string' },
459
459
  submitText: { type: 'string' },
460
460
  buttonText: { type: 'string' },
461
- multi: { type: 'boolean' },
461
+ component: {
462
+ type: 'string',
463
+ enum: ['radio', 'checkbox'],
464
+ default: 'checkbox',
465
+ },
462
466
  items: { type: 'array', items: { type: 'string' }, minItems: 1 },
463
467
  leftScaleLabel: { type: 'string' },
464
468
  rightScaleLabel: { type: 'string' },
@@ -466,7 +470,11 @@ export const themeConfigSchema = {
466
470
  type: 'object',
467
471
  properties: {
468
472
  enable: { type: 'boolean', default: true },
469
- multi: { type: 'boolean' },
473
+ component: {
474
+ type: 'string',
475
+ enum: ['radio', 'checkbox'],
476
+ default: 'checkbox',
477
+ },
470
478
  label: { type: 'string' },
471
479
  items: { type: 'array', items: { type: 'string' } },
472
480
  },
@@ -571,7 +579,7 @@ export const themeConfigSchema = {
571
579
  ...hideConfigSchema.properties,
572
580
  },
573
581
  additionalProperties: false,
574
- default: { hide: true },
582
+ default: { hide: false },
575
583
  },
576
584
  expand: {
577
585
  type: 'object',