@redocly/theme 0.28.2 → 0.30.0

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 (33) hide show
  1. package/lib/components/Button/Button.d.ts +1 -0
  2. package/lib/components/CodeBlock/CodeBlock.js +1 -1
  3. package/lib/components/CodeBlock/CodeBlockControls.js +2 -2
  4. package/lib/components/Feedback/Comment.js +2 -2
  5. package/lib/components/Feedback/Mood.js +0 -1
  6. package/lib/components/Feedback/Rating.js +0 -1
  7. package/lib/components/Feedback/ReportDialog.d.ts +1 -1
  8. package/lib/components/Feedback/ReportDialog.js +3 -3
  9. package/lib/components/Feedback/Scale.js +0 -1
  10. package/lib/components/Feedback/Sentiment.js +0 -1
  11. package/lib/components/Feedback/types.d.ts +1 -5
  12. package/lib/components/Feedback/useReportDialog.js +8 -4
  13. package/lib/components/Markdown/styledVariables.js +6 -6
  14. package/lib/config.d.ts +19 -0
  15. package/lib/config.js +1 -1
  16. package/lib/globalStyle.js +1 -1
  17. package/lib/types/portal/src/shared/types/feedback.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/src/components/Button/Button.tsx +2 -0
  20. package/src/components/CodeBlock/CodeBlock.tsx +5 -1
  21. package/src/components/CodeBlock/CodeBlockControls.tsx +1 -1
  22. package/src/components/Feedback/Comment.tsx +2 -2
  23. package/src/components/Feedback/Mood.tsx +0 -1
  24. package/src/components/Feedback/Rating.tsx +0 -1
  25. package/src/components/Feedback/ReportDialog.tsx +3 -2
  26. package/src/components/Feedback/Scale.tsx +0 -1
  27. package/src/components/Feedback/Sentiment.tsx +0 -1
  28. package/src/components/Feedback/types.ts +6 -17
  29. package/src/components/Feedback/useReportDialog.ts +8 -4
  30. package/src/components/Markdown/styledVariables.ts +6 -6
  31. package/src/config.ts +4 -0
  32. package/src/globalStyle.ts +1 -1
  33. package/src/types/portal/src/shared/types/feedback.ts +9 -2
package/lib/components/Button/Button.d.ts CHANGED
@@ -16,6 +16,7 @@ export interface ButtonProps {
16
16
  icon?: JSX.Element;
17
17
  title?: string;
18
18
  onClick?: (e?: any) => void;
19
+ type?: 'button' | 'submit' | 'reset';
19
20
  }
20
21
  export declare const baseButtonStyles: FlattenSimpleInterpolation;
21
22
  export declare const Button: import("styled-components").StyledComponent<React.FC<ButtonProps>, any, {}, never>;
package/lib/components/CodeBlock/CodeBlock.js CHANGED
@@ -59,7 +59,7 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
59
59
  ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
60
60
  : highlightedCode,
61
61
  }, "data-cy": dataTestId, withControls: true }),
62
- reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode })))));
62
+ reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang })))));
63
63
  }
64
64
  exports.CodeBlock = CodeBlock;
65
65
  const Wrapper = styled_components_1.default.div ``;
package/lib/components/CodeBlock/CodeBlockControls.js CHANGED
@@ -12,7 +12,7 @@ const icons_1 = require("../../icons");
12
12
  const hooks_1 = require("../../hooks");
13
13
  const telemetry_1 = require("../../mocks/telemetry");
14
14
  function CodeBlockControls({ children, className, title, controls, }) {
15
- var _a, _b, _c, _d, _e;
15
+ var _a, _b, _c, _d, _e, _f;
16
16
  const { codeSnippet } = (0, hooks_1.useThemeConfig)();
17
17
  const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.controlsStyle) || 'icon';
18
18
  const { copy, expand, collapse, select, deselect, report } = controls
@@ -29,7 +29,7 @@ function CodeBlockControls({ children, className, title, controls, }) {
29
29
  collapse && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "collapse-all", "data-testid": "collapse-all", asIcon: controlsType === 'icon', onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick, title: (collapse === null || collapse === void 0 ? void 0 : collapse.tooltipText) || 'Collapse all' }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.CollapseIcon, null)) : (collapse === null || collapse === void 0 ? void 0 : collapse.label) ? (collapse.label) : ('Collapse all'))) : null,
30
30
  select ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "select-all", "data-testid": "select-all", asIcon: controlsType === 'icon', onClick: select === null || select === void 0 ? void 0 : select.onClick, title: select === null || select === void 0 ? void 0 : select.tooltipText }, controlsType === 'icon' ? react_1.default.createElement(icons_1.SelectIcon, null) : (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
31
31
  deselect ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "clear-all", "data-testid": "clear-all", asIcon: controlsType === 'icon', onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick, title: deselect === null || deselect === void 0 ? void 0 : deselect.tooltipText }, controlsType === 'icon' ? (react_1.default.createElement(icons_1.DeselectIcon, null)) : (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? (deselect.label) : ('Clear all'))) : null,
32
- report && ((_d = report === null || report === void 0 ? void 0 : report.props) === null || _d === void 0 ? void 0 : _d.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: report.tooltipText }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_e = report.props) === null || _e === void 0 ? void 0 : _e.buttonText) || 'Report')) : null))) : null;
32
+ report && ((_d = report === null || report === void 0 ? void 0 : report.props) === null || _d === void 0 ? void 0 : _d.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: (_e = report.props) === null || _e === void 0 ? void 0 : _e.tooltip }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_f = report.props) === null || _f === void 0 ? void 0 : _f.buttonText) || 'Report')) : null))) : null;
33
33
  return children || controls ? (react_1.default.createElement(ContainerWraper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
34
34
  }
35
35
  exports.CodeBlockControls = CodeBlockControls;
package/lib/components/Feedback/Comment.js CHANGED
@@ -42,13 +42,13 @@ const Comment = ({ settings, onSubmit, onCancel, className, standAlone = true, }
42
42
  if (!text)
43
43
  return;
44
44
  setSubmitValue(text);
45
- onSubmit({ comment: text, path: window.location.href });
45
+ onSubmit({ comment: text });
46
46
  };
47
47
  const handleTextAreaChange = (e) => {
48
48
  const commentValue = e.target.value;
49
49
  setText(commentValue);
50
50
  if (!standAlone) {
51
- onSubmit({ comment: commentValue, path: window.location.href });
51
+ onSubmit({ comment: commentValue });
52
52
  }
53
53
  };
54
54
  if (submitValue) {
package/lib/components/Feedback/Mood.js CHANGED
@@ -74,7 +74,6 @@ const Mood = ({ settings, onSubmit, className }) => {
74
74
  score: remapScore(score),
75
75
  comment,
76
76
  reasons,
77
- path: window.location.href,
78
77
  });
79
78
  setIsSubmitted(true);
80
79
  };
package/lib/components/Feedback/Rating.js CHANGED
@@ -50,7 +50,6 @@ const Rating = ({ settings, onSubmit, className }) => {
50
50
  comment,
51
51
  reasons,
52
52
  max: exports.FEEDBACK_MAX_RATING,
53
- path: window.location.href,
54
53
  });
55
54
  setIsSubmitted(true);
56
55
  };
package/lib/components/Feedback/ReportDialog.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import type { ReportDialogProps } from '../../components/Feedback';
3
- export declare const ReportDialog: ({ location, settings, onSubmit, onCancel, submitFeedback, }: ReportDialogProps) => JSX.Element;
3
+ export declare const ReportDialog: ({ location, settings, onSubmit, onCancel, submitFeedback, lang, }: ReportDialogProps) => JSX.Element;
package/lib/components/Feedback/ReportDialog.js CHANGED
@@ -41,12 +41,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
41
41
  const react_router_dom_1 = require("react-router-dom");
42
42
  const telemetry_1 = require("../../mocks/telemetry");
43
43
  const Comment_1 = require("../../components/Feedback/Comment");
44
- const ReportDialog = ({ location, settings, onSubmit, onCancel, submitFeedback, }) => {
44
+ const ReportDialog = ({ location, settings, onSubmit, onCancel, submitFeedback, lang, }) => {
45
45
  const { label } = settings;
46
46
  const { pathname } = (0, react_router_dom_1.useLocation)();
47
- return (React.createElement(Wrapper, { className: "modal" },
47
+ return (React.createElement(Wrapper, { className: "modal scroll-lock" },
48
48
  React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => __awaiter(void 0, void 0, void 0, function* () {
49
- yield submitFeedback({ type: 'problem', values: value, location, path: pathname });
49
+ yield submitFeedback({ type: 'problem', values: value, location, path: pathname, lang });
50
50
  telemetry_1.telemetry.send('code_snippet_reported', {});
51
51
  onSubmit();
52
52
  }), onCancel: onCancel })));
package/lib/components/Feedback/Scale.js CHANGED
@@ -56,7 +56,6 @@ const Scale = ({ settings, onSubmit, className }) => {
56
56
  comment,
57
57
  reasons,
58
58
  max: exports.MAX_SCALE,
59
- path: window.location.href,
60
59
  });
61
60
  setIsSubmitted(true);
62
61
  };
package/lib/components/Feedback/Sentiment.js CHANGED
@@ -56,7 +56,6 @@ const Sentiment = ({ settings, onSubmit, className }) => {
56
56
  score,
57
57
  comment,
58
58
  reasons,
59
- path: window.location.href,
60
59
  });
61
60
  setIsSubmitted(true);
62
61
  };
package/lib/components/Feedback/types.d.ts CHANGED
@@ -5,7 +5,6 @@ export type RatingProps = {
5
5
  comment?: string;
6
6
  reasons?: string[];
7
7
  max: number;
8
- path?: string;
9
8
  }) => void;
10
9
  settings?: {
11
10
  label?: string;
@@ -29,7 +28,6 @@ export type ScaleProps = {
29
28
  comment?: string;
30
29
  reasons?: string[];
31
30
  max?: number;
32
- path?: string;
33
31
  }) => void;
34
32
  settings?: {
35
33
  label?: string;
@@ -54,7 +52,6 @@ export type MoodProps = {
54
52
  score: number;
55
53
  comment?: string;
56
54
  reasons?: string[];
57
- path?: string;
58
55
  }) => void;
59
56
  settings?: {
60
57
  label?: string;
@@ -79,7 +76,6 @@ export type SentimentProps = {
79
76
  score: number;
80
77
  comment?: string;
81
78
  reasons?: string[];
82
- path?: string;
83
79
  }) => void;
84
80
  settings?: {
85
81
  label?: string;
@@ -101,7 +97,6 @@ export type SentimentProps = {
101
97
  export type CommentProps = {
102
98
  onSubmit: (value: {
103
99
  comment: string;
104
- path?: string;
105
100
  }) => void;
106
101
  onCancel?: () => unknown;
107
102
  settings?: {
@@ -122,6 +117,7 @@ export type ReasonsProps = {
122
117
  };
123
118
  export type ReportDialogProps = {
124
119
  location: string;
120
+ lang?: string;
125
121
  onSubmit: () => void;
126
122
  onCancel: () => void;
127
123
  settings: {
package/lib/components/Feedback/useReportDialog.js CHANGED
@@ -9,6 +9,7 @@ function useReportDialog() {
9
9
  const { codeSnippet: { report = {} } = {} } = (0, hooks_2.useThemeConfig)();
10
10
  const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
11
11
  const isReportButtonShown = (report === null || report === void 0 ? void 0 : report.hide) !== true;
12
+ const { tooltipText, buttonText, label } = report;
12
13
  const { translate } = (0, hooks_1.useTranslate)();
13
14
  const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
14
15
  const showReportDialog = () => {
@@ -19,18 +20,21 @@ function useReportDialog() {
19
20
  setIsReportDialogShown(false);
20
21
  }, 1000);
21
22
  };
23
+ const closeReportDialog = () => {
24
+ setIsReportDialogShown(false);
25
+ };
22
26
  const reportButtonProps = {
23
27
  onClick: showReportDialog,
24
- buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
25
- tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
28
+ buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
29
+ tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
26
30
  visible: isReportButtonShown,
27
31
  };
28
32
  const reportDialogProps = {
29
33
  settings: {
30
- label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
34
+ label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
31
35
  },
32
36
  onSubmit: hideReportDialog,
33
- onCancel: hideReportDialog,
37
+ onCancel: closeReportDialog,
34
38
  submitFeedback,
35
39
  };
36
40
  return {
package/lib/components/Markdown/styledVariables.js CHANGED
@@ -236,11 +236,11 @@ exports.markdown = (0, styled_components_1.css) `
236
236
  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
237
237
  --md-tabs-content-border: none; // @presenter Border
238
238
 
239
- --md-tabs-tab-text-color: var(--text-secondary); // @presenter Color
240
- --md-tabs-tab-font-size: var(--font-size-base); // @presenter FontSize
239
+ --md-tabs-tab-text-color: var(--text-primary); // @presenter Color
240
+ --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
241
241
  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
242
242
  --md-tabs-tab-font-style: normal; // @presenter FontStyle
243
- --md-tabs-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
243
+ --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
244
244
  --md-tabs-tab-background-color: none; // @presenter Color
245
245
  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
246
246
  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
@@ -255,8 +255,8 @@ exports.markdown = (0, styled_components_1.css) `
255
255
  --md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
256
256
  --md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
257
257
  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
258
- --md-tabs-active-tab-border-color: var(--border-primary); // @presenter Color
259
- --md-tabs-active-tab-border-width: 0 0 1px 0; // @presenter Spacing
258
+ --md-tabs-active-tab-border-color: var(--text-base); // @presenter Color
259
+ --md-tabs-active-tab-border-width: 0 0 2px 0; // @presenter Spacing
260
260
  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
261
261
 
262
262
  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
@@ -267,7 +267,7 @@ exports.markdown = (0, styled_components_1.css) `
267
267
  --md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
268
268
  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
269
269
  --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
270
- --md-tabs-hover-tab-border-width: 0 0 1px 0; // @presenter Spacing
270
+ --md-tabs-hover-tab-border-width: 0 0 1.5px 0; // @presenter Spacing
271
271
  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
272
272
 
273
273
  // @tokens End
package/lib/config.d.ts CHANGED
@@ -1249,6 +1249,15 @@ export declare const themeConfigSchema: {
1249
1249
  readonly hide: {
1250
1250
  readonly type: "boolean";
1251
1251
  };
1252
+ readonly tooltipText: {
1253
+ readonly type: "string";
1254
+ };
1255
+ readonly buttonText: {
1256
+ readonly type: "string";
1257
+ };
1258
+ readonly label: {
1259
+ readonly type: "string";
1260
+ };
1252
1261
  };
1253
1262
  readonly additionalProperties: false;
1254
1263
  readonly default: {
@@ -2284,6 +2293,15 @@ export declare const productThemeOverrideSchema: {
2284
2293
  readonly hide: {
2285
2294
  readonly type: "boolean";
2286
2295
  };
2296
+ readonly tooltipText: {
2297
+ readonly type: "string";
2298
+ };
2299
+ readonly buttonText: {
2300
+ readonly type: "string";
2301
+ };
2302
+ readonly label: {
2303
+ readonly type: "string";
2304
+ };
2287
2305
  };
2288
2306
  readonly additionalProperties: false;
2289
2307
  readonly default: {
@@ -2360,6 +2378,7 @@ export type ThemeUIConfig = ThemeConfig & {
2360
2378
  title: string | undefined;
2361
2379
  }[];
2362
2380
  devLogin?: boolean;
2381
+ loginUrls?: Record<string, string>;
2363
2382
  };
2364
2383
  search?: {
2365
2384
  shortcuts?: string[];
package/lib/config.js CHANGED
@@ -499,7 +499,7 @@ exports.themeConfigSchema = {
499
499
  },
500
500
  report: {
501
501
  type: 'object',
502
- properties: Object.assign({}, hideConfigSchema.properties),
502
+ properties: Object.assign({ tooltipText: { type: 'string' }, buttonText: { type: 'string' }, label: { type: 'string' } }, hideConfigSchema.properties),
503
503
  additionalProperties: false,
504
504
  default: { hide: false },
505
505
  },
package/lib/globalStyle.js CHANGED
@@ -899,7 +899,7 @@ const error = (0, styled_components_1.css) `
899
899
  --detailed-error-message-font-family: var(--code-block-controls-font-family);
900
900
  `;
901
901
  const modal = (0, styled_components_1.css) `
902
- body:has(.modal) {
902
+ body:has(.scroll-lock) {
903
903
  overflow: hidden;
904
904
  }
905
905
 
package/lib/types/portal/src/shared/types/feedback.d.ts CHANGED
@@ -5,6 +5,7 @@ export type SubmitFeedbackParams = {
5
5
  values: Record<string, unknown>;
6
6
  path?: string;
7
7
  location?: string;
8
+ lang?: string;
8
9
  };
9
10
  export type FeedbackProps = {
10
11
  type: FEEDBACK_TYPES;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.28.2",
3
+ "version": "0.30.0",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
package/src/components/Button/Button.tsx CHANGED
@@ -22,6 +22,8 @@ export interface ButtonProps {
22
22
  icon?: JSX.Element;
23
23
  title?: string;
24
24
  onClick?: (e?: any) => void;
25
+
26
+ type?: 'button' | 'submit' | 'reset';
25
27
  }
26
28
 
27
29
  const getBlink = (): Keyframes => keyframes`
package/src/components/CodeBlock/CodeBlock.tsx CHANGED
@@ -91,7 +91,11 @@ export function CodeBlock({
91
91
  withControls={true}
92
92
  />
93
93
  {reportDialog.visible && (
94
- <ReportDialog {...(reportDialog.props as ReportDialogProps)} location={sourceCode} />
94
+ <ReportDialog
95
+ {...(reportDialog.props as ReportDialogProps)}
96
+ location={sourceCode}
97
+ lang={lang}
98
+ />
95
99
  )}
96
100
  </Wrapper>
97
101
  );
package/src/components/CodeBlock/CodeBlockControls.tsx CHANGED
@@ -140,7 +140,7 @@ export function CodeBlockControls({
140
140
  data-cy="report-button"
141
141
  data-testid="report-button"
142
142
  asIcon={controlsType === 'icon'}
143
- title={report.tooltipText}
143
+ title={report.props?.tooltip}
144
144
  {...report.props}
145
145
  >
146
146
  {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
package/src/components/Feedback/Comment.tsx CHANGED
@@ -22,14 +22,14 @@ export const Comment = ({
22
22
  const send = () => {
23
23
  if (!text) return;
24
24
  setSubmitValue(text);
25
- onSubmit({ comment: text, path: window.location.href });
25
+ onSubmit({ comment: text });
26
26
  };
27
27
  const handleTextAreaChange = (e: any) => {
28
28
  const commentValue = e.target.value;
29
29
  setText(commentValue);
30
30
 
31
31
  if (!standAlone) {
32
- onSubmit({ comment: commentValue, path: window.location.href });
32
+ onSubmit({ comment: commentValue });
33
33
  }
34
34
  };
35
35
 
package/src/components/Feedback/Mood.tsx CHANGED
@@ -57,7 +57,6 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
57
57
  score: remapScore(score),
58
58
  comment,
59
59
  reasons,
60
- path: window.location.href,
61
60
  });
62
61
  setIsSubmitted(true);
63
62
  };
package/src/components/Feedback/Rating.tsx CHANGED
@@ -27,7 +27,6 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
27
27
  comment,
28
28
  reasons,
29
29
  max: FEEDBACK_MAX_RATING,
30
- path: window.location.href,
31
30
  });
32
31
  setIsSubmitted(true);
33
32
  };
package/src/components/Feedback/ReportDialog.tsx CHANGED
@@ -12,16 +12,17 @@ export const ReportDialog = ({
12
12
  onSubmit,
13
13
  onCancel,
14
14
  submitFeedback,
15
+ lang,
15
16
  }: ReportDialogProps): JSX.Element => {
16
17
  const { label } = settings;
17
18
  const { pathname } = useLocation();
18
19
 
19
20
  return (
20
- <Wrapper className="modal">
21
+ <Wrapper className="modal scroll-lock">
21
22
  <Comment
22
23
  settings={{ label }}
23
24
  onSubmit={async (value) => {
24
- await submitFeedback({ type: 'problem', values: value, location, path: pathname });
25
+ await submitFeedback({ type: 'problem', values: value, location, path: pathname, lang });
25
26
  telemetry.send('code_snippet_reported', {});
26
27
  onSubmit();
27
28
  }}
package/src/components/Feedback/Scale.tsx CHANGED
@@ -51,7 +51,6 @@ export const Scale = ({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
51
51
  comment,
52
52
  reasons,
53
53
  max: MAX_SCALE,
54
- path: window.location.href,
55
54
  });
56
55
  setIsSubmitted(true);
57
56
  };
package/src/components/Feedback/Sentiment.tsx CHANGED
@@ -34,7 +34,6 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
34
34
  score,
35
35
  comment,
36
36
  reasons,
37
- path: window.location.href,
38
37
  });
39
38
  setIsSubmitted(true);
40
39
  };
package/src/components/Feedback/types.ts CHANGED
@@ -1,13 +1,7 @@
1
1
  import type { SubmitFeedbackParams } from '@theme/types/portal/src/shared/types/feedback';
2
2
 
3
3
  export type RatingProps = {
4
- onSubmit: (value: {
5
- score: number;
6
- comment?: string;
7
- reasons?: string[];
8
- max: number;
9
- path?: string;
10
- }) => void;
4
+ onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max: number }) => void;
11
5
  settings?: {
12
6
  label?: string;
13
7
  submitText?: string;
@@ -26,13 +20,7 @@ export type RatingProps = {
26
20
  };
27
21
 
28
22
  export type ScaleProps = {
29
- onSubmit: (value: {
30
- score: number;
31
- comment?: string;
32
- reasons?: string[];
33
- max?: number;
34
- path?: string;
35
- }) => void;
23
+ onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max?: number }) => void;
36
24
  settings?: {
37
25
  label?: string;
38
26
  submitText?: string;
@@ -53,7 +41,7 @@ export type ScaleProps = {
53
41
  };
54
42
 
55
43
  export type MoodProps = {
56
- onSubmit: (value: { score: number; comment?: string; reasons?: string[]; path?: string }) => void;
44
+ onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
57
45
  settings?: {
58
46
  label?: string;
59
47
  submitText?: string;
@@ -74,7 +62,7 @@ export type MoodProps = {
74
62
  };
75
63
 
76
64
  export type SentimentProps = {
77
- onSubmit: (value: { score: number; comment?: string; reasons?: string[]; path?: string }) => void;
65
+ onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
78
66
  settings?: {
79
67
  label?: string;
80
68
  submitText?: string;
@@ -94,7 +82,7 @@ export type SentimentProps = {
94
82
  };
95
83
 
96
84
  export type CommentProps = {
97
- onSubmit: (value: { comment: string; path?: string }) => void;
85
+ onSubmit: (value: { comment: string }) => void;
98
86
  onCancel?: () => unknown;
99
87
  settings?: {
100
88
  label?: string;
@@ -116,6 +104,7 @@ export type ReasonsProps = {
116
104
 
117
105
  export type ReportDialogProps = {
118
106
  location: string;
107
+ lang?: string;
119
108
  onSubmit: () => void;
120
109
  onCancel: () => void;
121
110
  settings: {
package/src/components/Feedback/useReportDialog.ts CHANGED
@@ -20,6 +20,7 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
20
20
  const { codeSnippet: { report = {} } = {} } = useThemeConfig();
21
21
  const [isReportDialogShown, setIsReportDialogShown] = useState(false);
22
22
  const isReportButtonShown = report?.hide !== true;
23
+ const { tooltipText, buttonText, label } = report;
23
24
  const { translate } = useTranslate();
24
25
  const { submitFeedback } = useSubmitFeedback();
25
26
 
@@ -31,18 +32,21 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
31
32
  setIsReportDialogShown(false);
32
33
  }, 1000);
33
34
  };
35
+ const closeReportDialog = () => {
36
+ setIsReportDialogShown(false);
37
+ };
34
38
  const reportButtonProps: ReportButtonProps = {
35
39
  onClick: showReportDialog,
36
- buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
37
- tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
40
+ buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
41
+ tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
38
42
  visible: isReportButtonShown,
39
43
  };
40
44
  const reportDialogProps: Partial<ReportDialogProps> = {
41
45
  settings: {
42
- label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
46
+ label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
43
47
  },
44
48
  onSubmit: hideReportDialog,
45
- onCancel: hideReportDialog,
49
+ onCancel: closeReportDialog,
46
50
  submitFeedback,
47
51
  };
48
52
 
package/src/components/Markdown/styledVariables.ts CHANGED
@@ -235,11 +235,11 @@ export const markdown = css`
235
235
  --md-tabs-content-padding: var(--spacing-base) 0; // @presenter Spacing
236
236
  --md-tabs-content-border: none; // @presenter Border
237
237
 
238
- --md-tabs-tab-text-color: var(--text-secondary); // @presenter Color
239
- --md-tabs-tab-font-size: var(--font-size-base); // @presenter FontSize
238
+ --md-tabs-tab-text-color: var(--text-primary); // @presenter Color
239
+ --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
240
240
  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
241
241
  --md-tabs-tab-font-style: normal; // @presenter FontStyle
242
- --md-tabs-tab-font-weight: var(--font-weight-regular); // @presenter FontWeight
242
+ --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
243
243
  --md-tabs-tab-background-color: none; // @presenter Color
244
244
  --md-tabs-tab-margin: 0 0 -1px 0; // @presenter Spacing
245
245
  --md-tabs-tab-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
@@ -254,8 +254,8 @@ export const markdown = css`
254
254
  --md-tabs-active-tab-font-weight: var(--md-tabs-tab-font-weight); // @presenter FontWeight
255
255
  --md-tabs-active-tab-background-color: var(--background-color); // @presenter Color
256
256
  --md-tabs-active-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
257
- --md-tabs-active-tab-border-color: var(--border-primary); // @presenter Color
258
- --md-tabs-active-tab-border-width: 0 0 1px 0; // @presenter Spacing
257
+ --md-tabs-active-tab-border-color: var(--text-base); // @presenter Color
258
+ --md-tabs-active-tab-border-width: 0 0 2px 0; // @presenter Spacing
259
259
  --md-tabs-active-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
260
260
 
261
261
  --md-tabs-hover-tab-text-color: var(--md-tabs-tab-text-color); // @presenter Color
@@ -266,7 +266,7 @@ export const markdown = css`
266
266
  --md-tabs-hover-tab-background-color: var(--md-tabs-tab-background-color); // @presenter Color
267
267
  --md-tabs-hover-tab-padding: var(--md-tabs-tab-padding); // @presenter Spacing
268
268
  --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
269
- --md-tabs-hover-tab-border-width: 0 0 1px 0; // @presenter Spacing
269
+ --md-tabs-hover-tab-border-width: 0 0 1.5px 0; // @presenter Spacing
270
270
  --md-tabs-hover-tab-border-radius: var(--md-tabs-tab-border-radius); // @presenter BorderRadius
271
271
 
272
272
  // @tokens End
package/src/config.ts CHANGED
@@ -576,6 +576,9 @@ export const themeConfigSchema = {
576
576
  report: {
577
577
  type: 'object',
578
578
  properties: {
579
+ tooltipText: { type: 'string' },
580
+ buttonText: { type: 'string' },
581
+ label: { type: 'string' },
579
582
  ...hideConfigSchema.properties,
580
583
  },
581
584
  additionalProperties: false,
@@ -704,6 +707,7 @@ export type ThemeUIConfig = ThemeConfig & {
704
707
  title: string | undefined;
705
708
  }[];
706
709
  devLogin?: boolean;
710
+ loginUrls?: Record<string, string>;
707
711
  };
708
712
  search?: {
709
713
  shortcuts?: string[];
package/src/globalStyle.ts CHANGED
@@ -912,7 +912,7 @@ const error = css`
912
912
  `;
913
913
 
914
914
  const modal = css`
915
- body:has(.modal) {
915
+ body:has(.scroll-lock) {
916
916
  overflow: hidden;
917
917
  }
918
918
 
package/src/types/portal/src/shared/types/feedback.ts CHANGED
@@ -1,15 +1,22 @@
1
1
  import type { FEEDBACK_TYPES } from '../constants';
2
2
 
3
- import type {RatingProps, SentimentProps, CommentProps, MoodProps, ScaleProps} from '@theme/components/Feedback';
3
+ import type {
4
+ RatingProps,
5
+ SentimentProps,
6
+ CommentProps,
7
+ MoodProps,
8
+ ScaleProps,
9
+ } from '@theme/components/Feedback';
4
10
 
5
11
  export type SubmitFeedbackParams = {
6
12
  type: string;
7
13
  values: Record<string, unknown>;
8
14
  path?: string;
9
15
  location?: string;
16
+ lang?: string;
10
17
  };
11
18
 
12
19
  export type FeedbackProps = {
13
20
  type: FEEDBACK_TYPES;
14
21
  settings: (RatingProps | SentimentProps | CommentProps | MoodProps | ScaleProps)['settings'];
15
- }
22
+ };