@redocly/theme 0.28.0 → 0.28.2

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 (26) hide show
  1. package/lib/components/CodeBlock/CodeBlockControlButton.js +6 -3
  2. package/lib/components/Feedback/Comment.js +8 -8
  3. package/lib/components/Feedback/Mood.js +5 -5
  4. package/lib/components/Feedback/Rating.js +5 -5
  5. package/lib/components/Feedback/Reasons.js +10 -9
  6. package/lib/components/Feedback/Scale.js +4 -5
  7. package/lib/components/Feedback/Sentiment.js +5 -5
  8. package/lib/components/Feedback/types.d.ts +5 -5
  9. package/lib/components/Tooltip/Tooltip.js +1 -1
  10. package/lib/config.d.ts +8 -4
  11. package/lib/config.js +10 -2
  12. package/lib/icons/CopyIcon/CopyIcon.js +3 -3
  13. package/lib/icons/ReportIcon/ReportIcon.js +5 -5
  14. package/package.json +1 -1
  15. package/src/components/CodeBlock/CodeBlockControlButton.tsx +6 -3
  16. package/src/components/Feedback/Comment.tsx +9 -9
  17. package/src/components/Feedback/Mood.tsx +5 -5
  18. package/src/components/Feedback/Rating.tsx +5 -5
  19. package/src/components/Feedback/Reasons.tsx +13 -11
  20. package/src/components/Feedback/Scale.tsx +4 -5
  21. package/src/components/Feedback/Sentiment.tsx +5 -5
  22. package/src/components/Feedback/types.ts +5 -5
  23. package/src/components/Tooltip/Tooltip.tsx +1 -1
  24. package/src/config.ts +10 -2
  25. package/src/icons/CopyIcon/CopyIcon.tsx +4 -3
  26. package/src/icons/ReportIcon/ReportIcon.tsx +8 -7
package/lib/components/CodeBlock/CodeBlockControlButton.js CHANGED
@@ -28,6 +28,7 @@ const styled_components_1 = __importStar(require("styled-components"));
28
28
  const Button_1 = require("../../components/Button");
29
29
  exports.CodeBlockControlButton = (0, styled_components_1.default)(Button_1.Button) `
30
30
  color: var(--code-block-controls-text-color);
31
+ border: none;
31
32
 
32
33
  ${({ asIcon }) => asIcon
33
34
  ? (0, styled_components_1.css) `
@@ -38,12 +39,14 @@ exports.CodeBlockControlButton = (0, styled_components_1.default)(Button_1.Butto
38
39
  background-color: var(--code-block-text-controls-background-color);
39
40
  `}
40
41
 
41
- ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
42
- padding: ${({ asIcon }) => (asIcon ? '2px 10px' : '2px 20px')};
43
- }
42
+ padding: 0;
44
43
 
45
44
  :not(:first-child) {
46
45
  margin-left: 5px;
47
46
  }
47
+
48
+ &:hover {
49
+ border: none;
50
+ }
48
51
  `;
49
52
  //# sourceMappingURL=CodeBlockControlButton.js.map
package/lib/components/Feedback/Comment.js CHANGED
@@ -62,8 +62,8 @@ const Comment = ({ settings, onSubmit, onCancel, className, standAlone = true, }
62
62
  translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.')),
63
63
  React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
64
64
  standAlone && (React.createElement(ButtonsContainer, null,
65
- React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send }, translate('theme.feedback.settings.comment.send', 'Send')),
66
- onCancel && (React.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel }, translate('theme.feedback.settings.comment.cancel', 'Cancel')))))));
65
+ onCancel && (React.createElement(CancelButton, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))),
66
+ React.createElement(SendButton, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send }, translate('theme.feedback.settings.comment.send', 'Send'))))));
67
67
  };
68
68
  exports.Comment = Comment;
69
69
  const Wrapper = styled_components_1.default.div `
@@ -84,12 +84,12 @@ const StateWrapper = (0, styled_components_1.default)(Wrapper) `
84
84
  width: 100%;
85
85
  }
86
86
  `;
87
- const Label = styled_components_1.default.h3 `
88
- font-family: var(--h3-font-family);
89
- font-weight: var(--h3-font-weight);
90
- font-size: var(--h3-font-size);
91
- line-height: var(--h3-line-height);
92
- color: var(--h3-text-color);
87
+ const Label = styled_components_1.default.h4 `
88
+ font-family: var(--h4-font-family);
89
+ font-weight: var(--font-weight-regular);
90
+ font-size: var(--h4-font-size);
91
+ line-height: var(--h4-line-height);
92
+ color: var(--h4-text-color);
93
93
  margin-right: 15px;
94
94
  `;
95
95
  const TextArea = styled_components_1.default.textarea `
package/lib/components/Feedback/Mood.js CHANGED
@@ -112,7 +112,7 @@ const Mood = ({ settings, onSubmit, className }) => {
112
112
  displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
113
113
  label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
114
114
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
115
- multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
115
+ component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
116
116
  }, onChange: setReasons })),
117
117
  displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }))),
118
118
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
@@ -145,13 +145,13 @@ const Wrapper = styled_components_1.default.div `
145
145
  width: 100%;
146
146
  }
147
147
  `;
148
- const Label = styled_components_1.default.h3 `
149
- margin-right: 15px;
148
+ const Label = styled_components_1.default.h4 `
150
149
  font-family: var(--h4-font-family);
151
- font-weight: var(--h4-font-weight);
150
+ font-weight: var(--font-weight-regular);
152
151
  font-size: var(--h4-font-size);
153
152
  line-height: var(--h4-line-height);
154
- color: var(--h3-text-color);
153
+ color: var(--h4-text-color);
154
+ margin-right: 15px;
155
155
  `;
156
156
  const Vote = styled_components_1.default.div `
157
157
  cursor: pointer;
package/lib/components/Feedback/Rating.js CHANGED
@@ -79,7 +79,7 @@ const Rating = ({ settings, onSubmit, className }) => {
79
79
  displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
80
80
  label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
81
81
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
82
- multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
82
+ component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
83
83
  }, onChange: setReasons })),
84
84
  displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
85
85
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
@@ -113,13 +113,13 @@ const Wrapper = styled_components_1.default.div `
113
113
  width: 100%;
114
114
  }
115
115
  `;
116
- const Label = styled_components_1.default.h3 `
117
- margin-right: 15px;
116
+ const Label = styled_components_1.default.h4 `
118
117
  font-family: var(--h4-font-family);
119
- font-weight: var(--h4-font-weight);
118
+ font-weight: var(--font-weight-regular);
120
119
  font-size: var(--h4-font-size);
121
120
  line-height: var(--h4-line-height);
122
- color: var(--h3-text-color);
121
+ color: var(--h4-text-color);
122
+ margin-right: 15px;
123
123
  `;
124
124
  const SubmitButton = (0, styled_components_1.default)(components_1.Button).attrs(() => ({
125
125
  color: 'primary',
package/lib/components/Feedback/Reasons.js CHANGED
@@ -31,15 +31,15 @@ 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);
@@ -58,12 +58,12 @@ const Wrapper = styled_components_1.default.div `
58
58
  display: flex;
59
59
  flex-direction: column;
60
60
  `;
61
- const Label = styled_components_1.default.h3 `
62
- font-family: var(--h3-font-family);
63
- font-weight: var(--h3-font-weight);
64
- font-size: var(--h3-font-size);
65
- line-height: var(--h3-line-height);
66
- color: var(--h3-text-color);
61
+ const Label = styled_components_1.default.h4 `
62
+ font-family: var(--h4-font-family);
63
+ font-weight: var(--font-weight-regular);
64
+ font-size: var(--h4-font-size);
65
+ line-height: var(--h4-line-height);
66
+ color: var(--h4-text-color);
67
67
  margin-right: 15px;
68
68
  `;
69
69
  const OptionWrapper = styled_components_1.default.div `
@@ -76,6 +76,7 @@ const OptionWrapper = styled_components_1.default.div `
76
76
  label {
77
77
  font-size: var(--font-size-base);
78
78
  cursor: pointer;
79
+ color: var(--text-secondary);
79
80
  }
80
81
  `;
81
82
  //# sourceMappingURL=Reasons.js.map
package/lib/components/Feedback/Scale.js CHANGED
@@ -86,7 +86,7 @@ const Scale = ({ settings, onSubmit, className }) => {
86
86
  displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
87
87
  label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
88
88
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
89
- multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
89
+ component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
90
90
  }, onChange: setReasons })),
91
91
  displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
92
92
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
@@ -107,13 +107,12 @@ const Wrapper = styled_components_1.default.div `
107
107
  width: 100%;
108
108
  }
109
109
  `;
110
- const Label = styled_components_1.default.h3 `
111
- margin-right: 15px;
110
+ const Label = styled_components_1.default.h4 `
112
111
  font-family: var(--h4-font-family);
113
- font-weight: var(--h4-font-weight);
112
+ font-weight: var(--font-weight-regular);
114
113
  font-size: var(--h4-font-size);
115
114
  line-height: var(--h4-line-height);
116
- color: var(--h3-text-color);
115
+ color: var(--h4-text-color);
117
116
  `;
118
117
  const SubLabelContainer = styled_components_1.default.div `
119
118
  display: flex;
package/lib/components/Feedback/Sentiment.js CHANGED
@@ -90,7 +90,7 @@ const Sentiment = ({ settings, onSubmit, className }) => {
90
90
  displayReasons && (React.createElement(Feedback_1.Reasons, { settings: {
91
91
  label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
92
92
  items: (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.items) || [],
93
- multi: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.multi,
93
+ component: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.component,
94
94
  }, onChange: setReasons })),
95
95
  displayComment && (React.createElement(Feedback_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }))),
96
96
  displaySubmitBnt && (React.createElement(ButtonsContainer, null,
@@ -111,13 +111,13 @@ const Wrapper = styled_components_1.default.div `
111
111
  width: 100%;
112
112
  }
113
113
  `;
114
- const Label = styled_components_1.default.h3 `
115
- margin-right: 15px;
114
+ const Label = styled_components_1.default.h4 `
116
115
  font-family: var(--h4-font-family);
117
- font-weight: var(--h4-font-weight);
116
+ font-weight: var(--font-weight-regular);
118
117
  font-size: var(--h4-font-size);
119
118
  line-height: var(--h4-line-height);
120
- color: var(--h3-text-color);
119
+ color: var(--h4-text-color);
120
+ margin-right: 15px;
121
121
  `;
122
122
  const Vote = styled_components_1.default.div `
123
123
  height: 32px;
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/Tooltip/Tooltip.js CHANGED
@@ -133,7 +133,7 @@ const PLACEMENTS = {
133
133
  };
134
134
  const TooltipWrapper = styled_components_1.default.div `
135
135
  position: relative;
136
- display: inline-block;
136
+ display: flex;
137
137
  `;
138
138
  const TooltipBody = styled_components_1.default.span `
139
139
  display: inline-block;
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";
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
  },
package/lib/icons/CopyIcon/CopyIcon.js CHANGED
@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.CopyIcon = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
- const Icon = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "icons/CopyIcon" },
10
- react_1.default.createElement("svg", { viewBox: "0 0 11 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
11
- react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.52083 1.33333C3.52083 1.25279 3.58613 1.1875 3.66667 1.1875H9.5C9.58054 1.1875 9.64583 1.25279 9.64583 1.33333V8.33333C9.64583 8.41387 9.58054 8.47917 9.5 8.47917H7.75H3.66667C3.58613 8.47917 3.52083 8.41387 3.52083 8.33333V3.08333V1.33333ZM2.64583 2.64583V1.33333C2.64583 0.769543 3.10288 0.3125 3.66667 0.3125H9.5C10.0638 0.3125 10.5208 0.769543 10.5208 1.33333V8.33333C10.5208 8.89712 10.0638 9.35417 9.5 9.35417H8.1875V10.6667C8.1875 10.9374 8.07995 11.1971 7.8885 11.3885C7.69706 11.5799 7.43741 11.6875 7.16667 11.6875H1.33333C1.06259 11.6875 0.802939 11.5799 0.611495 11.3885C0.420051 11.1971 0.3125 10.9374 0.3125 10.6667V3.66667C0.3125 3.39592 0.420052 3.13627 0.611495 2.94483C0.802938 2.75339 1.06259 2.64583 1.33333 2.64583H2.64583ZM7.3125 9.35417V10.6667C7.3125 10.7053 7.29713 10.7424 7.26979 10.7698C7.24244 10.7971 7.20534 10.8125 7.16667 10.8125H1.33333C1.29466 10.8125 1.25756 10.7971 1.23021 10.7698C1.20286 10.7424 1.1875 10.7053 1.1875 10.6667V3.66667C1.1875 3.62799 1.20286 3.5909 1.23021 3.56355C1.25756 3.5362 1.29466 3.52083 1.33333 3.52083H2.64583V8.33333C2.64583 8.89712 3.10288 9.35417 3.66667 9.35417H7.3125Z", fill: "currentColor" }))));
9
+ const Icon = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "icons/CopyIcon", className: className },
10
+ react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
11
+ react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z", fill: "currentColor", fillOpacity: "1" }))));
12
12
  exports.CopyIcon = (0, styled_components_1.default)(Icon) `
13
13
  width: 1em;
14
14
  height: 1em;
package/lib/icons/ReportIcon/ReportIcon.js CHANGED
@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ReportIcon = void 0;
7
7
  const react_1 = __importDefault(require("react"));
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
- const Icon = ({ className }) => (react_1.default.createElement("svg", { "data-component-name": "icons/ReportIcon", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
10
- react_1.default.createElement("rect", { width: "14", height: "14", fill: "none" }),
11
- react_1.default.createElement("path", { d: "M7 8.75C6.87021 8.75 6.74333 8.78849 6.63541 8.8606C6.52749 8.93271 6.44337 9.0352 6.3937 9.15511C6.34403 9.27503 6.33104 9.40698 6.35636 9.53428C6.38168 9.66158 6.44418 9.77851 6.53596 9.87029C6.62774 9.96207 6.74467 10.0246 6.87197 10.0499C6.99927 10.0752 7.13122 10.0622 7.25114 10.0125C7.37105 9.96288 7.47354 9.87876 7.54565 9.77084C7.61776 9.66292 7.65625 9.53604 7.65625 9.40625C7.65625 9.2322 7.58711 9.06528 7.46404 8.94221C7.34097 8.81914 7.17405 8.75 7 8.75Z", fill: "currentColor", fillOpacity: "1" }),
12
- react_1.default.createElement("path", { d: "M7.4375 3.9375H6.5625V7.875H7.4375V3.9375Z", fill: "currentColor", fillOpacity: "1" }),
13
- react_1.default.createElement("path", { d: "M11.375 12.25H2.625C2.39302 12.2497 2.17061 12.1575 2.00658 11.9934C1.84254 11.8294 1.75027 11.607 1.75 11.375V2.625C1.75027 2.39302 1.84254 2.17061 2.00658 2.00658C2.17061 1.84254 2.39302 1.75027 2.625 1.75H11.375C11.607 1.75027 11.8294 1.84254 11.9934 2.00658C12.1575 2.17061 12.2497 2.39302 12.25 2.625V11.375C12.2497 11.607 12.1575 11.8294 11.9934 11.9934C11.8294 12.1575 11.607 12.2497 11.375 12.25ZM2.625 2.625V11.375H11.3755L11.375 2.625H2.625Z", fill: "currentColor", fillOpacity: "1" })));
9
+ const Icon = ({ className }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: className },
10
+ react_1.default.createElement("rect", { width: "16", height: "16", fill: "none" }),
11
+ react_1.default.createElement("path", { d: "M8 10C7.85166 10 7.70666 10.044 7.58332 10.1264C7.45999 10.2088 7.36386 10.3259 7.30709 10.463C7.25032 10.6 7.23547 10.7508 7.26441 10.8963C7.29335 11.0418 7.36478 11.1754 7.46967 11.2803C7.57456 11.3852 7.7082 11.4566 7.85368 11.4856C7.99917 11.5145 8.14997 11.4997 8.28701 11.4429C8.42406 11.3861 8.54119 11.29 8.6236 11.1667C8.70601 11.0433 8.75 10.8983 8.75 10.75C8.75 10.5511 8.67098 10.3603 8.53033 10.2197C8.38968 10.079 8.19891 10 8 10Z", fill: "currentColor", fillOpacity: "1" }),
12
+ react_1.default.createElement("path", { d: "M8.5 4.5H7.5V9H8.5V4.5Z", fill: "currentColor", fillOpacity: "1" }),
13
+ react_1.default.createElement("path", { d: "M13 14H3C2.73488 13.9997 2.4807 13.8942 2.29323 13.7068C2.10576 13.5193 2.0003 13.2651 2 13V3C2.0003 2.73488 2.10576 2.4807 2.29323 2.29323C2.4807 2.10576 2.73488 2.0003 3 2H13C13.2651 2.0003 13.5193 2.10576 13.7068 2.29323C13.8942 2.4807 13.9997 2.73488 14 3V13C13.9997 13.2651 13.8942 13.5193 13.7068 13.7068C13.5193 13.8942 13.2651 13.9997 13 14ZM3 3V13H13.0006L13 3H3Z", fill: "currentColor", fillOpacity: "1" })));
14
14
  exports.ReportIcon = (0, styled_components_1.default)(Icon) `
15
15
  width: 1.3em;
16
16
  height: 1.3em;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.28.0",
3
+ "version": "0.28.2",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/CodeBlock/CodeBlockControlButton.tsx CHANGED
@@ -4,6 +4,7 @@ import { Button } from '@theme/components/Button';
4
4
 
5
5
  export const CodeBlockControlButton = styled(Button)<{ asIcon?: boolean }>`
6
6
  color: var(--code-block-controls-text-color);
7
+ border: none;
7
8
 
8
9
  ${({ asIcon }) =>
9
10
  asIcon
@@ -15,11 +16,13 @@ export const CodeBlockControlButton = styled(Button)<{ asIcon?: boolean }>`
15
16
  background-color: var(--code-block-text-controls-background-color);
16
17
  `}
17
18
 
18
- ${({ theme }) => theme.mediaQueries?.small} {
19
- padding: ${({ asIcon }) => (asIcon ? '2px 10px' : '2px 20px')};
20
- }
19
+ padding: 0;
21
20
 
22
21
  :not(:first-child) {
23
22
  margin-left: 5px;
24
23
  }
24
+
25
+ &:hover {
26
+ border: none;
27
+ }
25
28
  `;
package/src/components/Feedback/Comment.tsx CHANGED
@@ -61,9 +61,6 @@ export const Comment = ({
61
61
  <TextArea rows={3} onChange={handleTextAreaChange} />
62
62
  {standAlone && (
63
63
  <ButtonsContainer>
64
- <SendButton data-translation-key="theme.feedback.settings.comment.send" onClick={send}>
65
- {translate('theme.feedback.settings.comment.send', 'Send')}
66
- </SendButton>
67
64
  {onCancel && (
68
65
  <CancelButton
69
66
  data-translation-key="theme.feedback.settings.comment.cancel"
@@ -72,6 +69,9 @@ export const Comment = ({
72
69
  {translate('theme.feedback.settings.comment.cancel', 'Cancel')}
73
70
  </CancelButton>
74
71
  )}
72
+ <SendButton data-translation-key="theme.feedback.settings.comment.send" onClick={send}>
73
+ {translate('theme.feedback.settings.comment.send', 'Send')}
74
+ </SendButton>
75
75
  </ButtonsContainer>
76
76
  )}
77
77
  </Wrapper>
@@ -98,12 +98,12 @@ const StateWrapper = styled(Wrapper)`
98
98
  }
99
99
  `;
100
100
 
101
- const Label = styled.h3`
102
- font-family: var(--h3-font-family);
103
- font-weight: var(--h3-font-weight);
104
- font-size: var(--h3-font-size);
105
- line-height: var(--h3-line-height);
106
- color: var(--h3-text-color);
101
+ const Label = styled.h4`
102
+ font-family: var(--h4-font-family);
103
+ font-weight: var(--font-weight-regular);
104
+ font-size: var(--h4-font-size);
105
+ line-height: var(--h4-line-height);
106
+ color: var(--h4-text-color);
107
107
  margin-right: 15px;
108
108
  `;
109
109
 
package/src/components/Feedback/Mood.tsx CHANGED
@@ -126,7 +126,7 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
126
126
  settings={{
127
127
  label: reasonsSettings?.label,
128
128
  items: reasonsSettings?.items || [],
129
- multi: reasonsSettings?.multi,
129
+ component: reasonsSettings?.component,
130
130
  }}
131
131
  onChange={setReasons}
132
132
  />
@@ -178,13 +178,13 @@ const Wrapper = styled.div`
178
178
  }
179
179
  `;
180
180
 
181
- const Label = styled.h3`
182
- margin-right: 15px;
181
+ const Label = styled.h4`
183
182
  font-family: var(--h4-font-family);
184
- font-weight: var(--h4-font-weight);
183
+ font-weight: var(--font-weight-regular);
185
184
  font-size: var(--h4-font-size);
186
185
  line-height: var(--h4-line-height);
187
- color: var(--h3-text-color);
186
+ color: var(--h4-text-color);
187
+ margin-right: 15px;
188
188
  `;
189
189
 
190
190
  const Vote = styled.div`
package/src/components/Feedback/Rating.tsx CHANGED
@@ -77,7 +77,7 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
77
77
  settings={{
78
78
  label: reasonsSettings?.label,
79
79
  items: reasonsSettings?.items || [],
80
- multi: reasonsSettings?.multi,
80
+ component: reasonsSettings?.component,
81
81
  }}
82
82
  onChange={setReasons}
83
83
  />
@@ -133,13 +133,13 @@ const Wrapper = styled.div`
133
133
  }
134
134
  `;
135
135
 
136
- const Label = styled.h3`
137
- margin-right: 15px;
136
+ const Label = styled.h4`
138
137
  font-family: var(--h4-font-family);
139
- font-weight: var(--h4-font-weight);
138
+ font-weight: var(--font-weight-regular);
140
139
  font-size: var(--h4-font-size);
141
140
  line-height: var(--h4-line-height);
142
- color: var(--h3-text-color);
141
+ color: var(--h4-text-color);
142
+ margin-right: 15px;
143
143
  `;
144
144
 
145
145
  const SubmitButton = styled(Button).attrs(() => ({
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]));
@@ -65,12 +66,12 @@ const Wrapper = styled.div`
65
66
  flex-direction: column;
66
67
  `;
67
68
 
68
- const Label = styled.h3`
69
- font-family: var(--h3-font-family);
70
- font-weight: var(--h3-font-weight);
71
- font-size: var(--h3-font-size);
72
- line-height: var(--h3-line-height);
73
- color: var(--h3-text-color);
69
+ const Label = styled.h4`
70
+ font-family: var(--h4-font-family);
71
+ font-weight: var(--font-weight-regular);
72
+ font-size: var(--h4-font-size);
73
+ line-height: var(--h4-line-height);
74
+ color: var(--h4-text-color);
74
75
  margin-right: 15px;
75
76
  `;
76
77
 
@@ -84,5 +85,6 @@ const OptionWrapper = styled.div`
84
85
  label {
85
86
  font-size: var(--font-size-base);
86
87
  cursor: pointer;
88
+ color: var(--text-secondary);
87
89
  }
88
90
  `;
package/src/components/Feedback/Scale.tsx CHANGED
@@ -105,7 +105,7 @@ export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
105
105
  settings={{
106
106
  label: reasonsSettings?.label,
107
107
  items: reasonsSettings?.items || [],
108
- multi: reasonsSettings?.multi,
108
+ component: reasonsSettings?.component,
109
109
  }}
110
110
  onChange={setReasons}
111
111
  />
@@ -144,13 +144,12 @@ const Wrapper = styled.div`
144
144
  }
145
145
  `;
146
146
 
147
- const Label = styled.h3`
148
- margin-right: 15px;
147
+ const Label = styled.h4`
149
148
  font-family: var(--h4-font-family);
150
- font-weight: var(--h4-font-weight);
149
+ font-weight: var(--font-weight-regular);
151
150
  font-size: var(--h4-font-size);
152
151
  line-height: var(--h4-line-height);
153
- color: var(--h3-text-color);
152
+ color: var(--h4-text-color);
154
153
  `;
155
154
 
156
155
  const SubLabelContainer = styled.div`
package/src/components/Feedback/Sentiment.tsx CHANGED
@@ -96,7 +96,7 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
96
96
  settings={{
97
97
  label: reasonsSettings?.label,
98
98
  items: reasonsSettings?.items || [],
99
- multi: reasonsSettings?.multi,
99
+ component: reasonsSettings?.component,
100
100
  }}
101
101
  onChange={setReasons}
102
102
  />
@@ -135,13 +135,13 @@ const Wrapper = styled.div`
135
135
  }
136
136
  `;
137
137
 
138
- const Label = styled.h3`
139
- margin-right: 15px;
138
+ const Label = styled.h4`
140
139
  font-family: var(--h4-font-family);
141
- font-weight: var(--h4-font-weight);
140
+ font-weight: var(--font-weight-regular);
142
141
  font-size: var(--h4-font-size);
143
142
  line-height: var(--h4-line-height);
144
- color: var(--h3-text-color);
143
+ color: var(--h4-text-color);
144
+ margin-right: 15px;
145
145
  `;
146
146
 
147
147
  const Vote = styled.div`
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/Tooltip/Tooltip.tsx CHANGED
@@ -157,7 +157,7 @@ const PLACEMENTS = {
157
157
 
158
158
  const TooltipWrapper = styled.div`
159
159
  position: relative;
160
- display: inline-block;
160
+ display: flex;
161
161
  `;
162
162
 
163
163
  const TooltipBody = styled.span<
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
  },
package/src/icons/CopyIcon/CopyIcon.tsx CHANGED
@@ -6,13 +6,14 @@ interface IconProps {
6
6
  }
7
7
 
8
8
  const Icon = ({ className }: IconProps) => (
9
- <span data-component-name="icons/CopyIcon">
10
- <svg viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
9
+ <span data-component-name="icons/CopyIcon" className={className}>
10
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
11
11
  <path
12
12
  fillRule="evenodd"
13
13
  clipRule="evenodd"
14
- d="M3.52083 1.33333C3.52083 1.25279 3.58613 1.1875 3.66667 1.1875H9.5C9.58054 1.1875 9.64583 1.25279 9.64583 1.33333V8.33333C9.64583 8.41387 9.58054 8.47917 9.5 8.47917H7.75H3.66667C3.58613 8.47917 3.52083 8.41387 3.52083 8.33333V3.08333V1.33333ZM2.64583 2.64583V1.33333C2.64583 0.769543 3.10288 0.3125 3.66667 0.3125H9.5C10.0638 0.3125 10.5208 0.769543 10.5208 1.33333V8.33333C10.5208 8.89712 10.0638 9.35417 9.5 9.35417H8.1875V10.6667C8.1875 10.9374 8.07995 11.1971 7.8885 11.3885C7.69706 11.5799 7.43741 11.6875 7.16667 11.6875H1.33333C1.06259 11.6875 0.802939 11.5799 0.611495 11.3885C0.420051 11.1971 0.3125 10.9374 0.3125 10.6667V3.66667C0.3125 3.39592 0.420052 3.13627 0.611495 2.94483C0.802938 2.75339 1.06259 2.64583 1.33333 2.64583H2.64583ZM7.3125 9.35417V10.6667C7.3125 10.7053 7.29713 10.7424 7.26979 10.7698C7.24244 10.7971 7.20534 10.8125 7.16667 10.8125H1.33333C1.29466 10.8125 1.25756 10.7971 1.23021 10.7698C1.20286 10.7424 1.1875 10.7053 1.1875 10.6667V3.66667C1.1875 3.62799 1.20286 3.5909 1.23021 3.56355C1.25756 3.5362 1.29466 3.52083 1.33333 3.52083H2.64583V8.33333C2.64583 8.89712 3.10288 9.35417 3.66667 9.35417H7.3125Z"
14
+ d="M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z"
15
15
  fill="currentColor"
16
+ fillOpacity="1"
16
17
  />
17
18
  </svg>
18
19
  </span>
package/src/icons/ReportIcon/ReportIcon.tsx CHANGED
@@ -7,21 +7,22 @@ interface IconProps {
7
7
 
8
8
  const Icon = ({ className }: IconProps) => (
9
9
  <svg
10
- data-component-name="icons/ReportIcon"
11
- viewBox="0 0 14 14"
12
- fill="none"
13
10
  xmlns="http://www.w3.org/2000/svg"
11
+ width="16"
12
+ height="16"
13
+ viewBox="0 0 16 16"
14
+ fill="none"
14
15
  className={className}
15
16
  >
16
- <rect width="14" height="14" fill="none" />
17
+ <rect width="16" height="16" fill="none" />
17
18
  <path
18
- d="M7 8.75C6.87021 8.75 6.74333 8.78849 6.63541 8.8606C6.52749 8.93271 6.44337 9.0352 6.3937 9.15511C6.34403 9.27503 6.33104 9.40698 6.35636 9.53428C6.38168 9.66158 6.44418 9.77851 6.53596 9.87029C6.62774 9.96207 6.74467 10.0246 6.87197 10.0499C6.99927 10.0752 7.13122 10.0622 7.25114 10.0125C7.37105 9.96288 7.47354 9.87876 7.54565 9.77084C7.61776 9.66292 7.65625 9.53604 7.65625 9.40625C7.65625 9.2322 7.58711 9.06528 7.46404 8.94221C7.34097 8.81914 7.17405 8.75 7 8.75Z"
19
+ d="M8 10C7.85166 10 7.70666 10.044 7.58332 10.1264C7.45999 10.2088 7.36386 10.3259 7.30709 10.463C7.25032 10.6 7.23547 10.7508 7.26441 10.8963C7.29335 11.0418 7.36478 11.1754 7.46967 11.2803C7.57456 11.3852 7.7082 11.4566 7.85368 11.4856C7.99917 11.5145 8.14997 11.4997 8.28701 11.4429C8.42406 11.3861 8.54119 11.29 8.6236 11.1667C8.70601 11.0433 8.75 10.8983 8.75 10.75C8.75 10.5511 8.67098 10.3603 8.53033 10.2197C8.38968 10.079 8.19891 10 8 10Z"
19
20
  fill="currentColor"
20
21
  fillOpacity="1"
21
22
  />
22
- <path d="M7.4375 3.9375H6.5625V7.875H7.4375V3.9375Z" fill="currentColor" fillOpacity="1" />
23
+ <path d="M8.5 4.5H7.5V9H8.5V4.5Z" fill="currentColor" fillOpacity="1" />
23
24
  <path
24
- d="M11.375 12.25H2.625C2.39302 12.2497 2.17061 12.1575 2.00658 11.9934C1.84254 11.8294 1.75027 11.607 1.75 11.375V2.625C1.75027 2.39302 1.84254 2.17061 2.00658 2.00658C2.17061 1.84254 2.39302 1.75027 2.625 1.75H11.375C11.607 1.75027 11.8294 1.84254 11.9934 2.00658C12.1575 2.17061 12.2497 2.39302 12.25 2.625V11.375C12.2497 11.607 12.1575 11.8294 11.9934 11.9934C11.8294 12.1575 11.607 12.2497 11.375 12.25ZM2.625 2.625V11.375H11.3755L11.375 2.625H2.625Z"
25
+ d="M13 14H3C2.73488 13.9997 2.4807 13.8942 2.29323 13.7068C2.10576 13.5193 2.0003 13.2651 2 13V3C2.0003 2.73488 2.10576 2.4807 2.29323 2.29323C2.4807 2.10576 2.73488 2.0003 3 2H13C13.2651 2.0003 13.5193 2.10576 13.7068 2.29323C13.8942 2.4807 13.9997 2.73488 14 3V13C13.9997 13.2651 13.8942 13.5193 13.7068 13.7068C13.5193 13.8942 13.2651 13.9997 13 14ZM3 3V13H13.0006L13 3H3Z"
25
26
  fill="currentColor"
26
27
  fillOpacity="1"
27
28
  />