@redocly/theme 0.28.2 → 0.29.0

package/lib/components/Button/Button.d.ts

@@ -16,6 +16,7 @@ export interface ButtonProps {
     icon?: JSX.Element;
     title?: string;
     onClick?: (e?: any) => void;
+    type?: 'button' | 'submit' | 'reset';
 }
 export declare const baseButtonStyles: FlattenSimpleInterpolation;
 export declare const Button: import("styled-components").StyledComponent<React.FC<ButtonProps>, any, {}, never>;

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -12,7 +12,7 @@ const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
 const telemetry_1 = require("../../mocks/telemetry");
 function CodeBlockControls({ children, className, title, controls, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
     const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.controlsStyle) || 'icon';
     const { copy, expand, collapse, select, deselect, report } = controls
@@ -29,7 +29,7 @@ function CodeBlockControls({ children, className, title, controls, }) {
             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,
             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,
             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,
-            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;
+            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;
     return children || controls ? (react_1.default.createElement(ContainerWraper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
 }
 exports.CodeBlockControls = CodeBlockControls;

package/lib/components/Feedback/useReportDialog.js

@@ -9,6 +9,7 @@ function useReportDialog() {
     const { codeSnippet: { report = {} } = {} } = (0, hooks_2.useThemeConfig)();
     const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
     const isReportButtonShown = (report === null || report === void 0 ? void 0 : report.hide) !== true;
+    const { tooltipText, buttonText, label } = report;
     const { translate } = (0, hooks_1.useTranslate)();
     const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
     const showReportDialog = () => {
@@ -19,18 +20,21 @@ function useReportDialog() {
             setIsReportDialogShown(false);
         }, 1000);
     };
+    const closeReportDialog = () => {
+        setIsReportDialogShown(false);
+    };
     const reportButtonProps = {
         onClick: showReportDialog,
-        buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
-        tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
+        buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
+        tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
         visible: isReportButtonShown,
     };
     const reportDialogProps = {
         settings: {
-            label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
+            label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
         },
         onSubmit: hideReportDialog,
-        onCancel: hideReportDialog,
+        onCancel: closeReportDialog,
         submitFeedback,
     };
     return {

package/lib/config.d.ts

@@ -1249,6 +1249,15 @@ export declare const themeConfigSchema: {
                         readonly hide: {
                             readonly type: "boolean";
                         };
+                        readonly tooltipText: {
+                            readonly type: "string";
+                        };
+                        readonly buttonText: {
+                            readonly type: "string";
+                        };
+                        readonly label: {
+                            readonly type: "string";
+                        };
                     };
                     readonly additionalProperties: false;
                     readonly default: {
@@ -2284,6 +2293,15 @@ export declare const productThemeOverrideSchema: {
                         readonly hide: {
                             readonly type: "boolean";
                         };
+                        readonly tooltipText: {
+                            readonly type: "string";
+                        };
+                        readonly buttonText: {
+                            readonly type: "string";
+                        };
+                        readonly label: {
+                            readonly type: "string";
+                        };
                     };
                     readonly additionalProperties: false;
                     readonly default: {
@@ -2360,6 +2378,7 @@ export type ThemeUIConfig = ThemeConfig & {
             title: string | undefined;
         }[];
         devLogin?: boolean;
+        loginUrls?: Record<string, string>;
     };
     search?: {
         shortcuts?: string[];

package/lib/config.js

@@ -499,7 +499,7 @@ exports.themeConfigSchema = {
                 },
                 report: {
                     type: 'object',
-                    properties: Object.assign({}, hideConfigSchema.properties),
+                    properties: Object.assign({ tooltipText: { type: 'string' }, buttonText: { type: 'string' }, label: { type: 'string' } }, hideConfigSchema.properties),
                     additionalProperties: false,
                     default: { hide: false },
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.28.2",
+  "version": "0.29.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Button/Button.tsx

@@ -22,6 +22,8 @@ export interface ButtonProps {
   icon?: JSX.Element;
   title?: string;
   onClick?: (e?: any) => void;
+
+  type?: 'button' | 'submit' | 'reset';
 }
 
 const getBlink = (): Keyframes => keyframes`

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -140,7 +140,7 @@ export function CodeBlockControls({
             data-cy="report-button"
             data-testid="report-button"
             asIcon={controlsType === 'icon'}
-            title={report.tooltipText}
+            title={report.props?.tooltip}
             {...report.props}
           >
             {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}

package/src/components/Feedback/useReportDialog.ts

@@ -20,6 +20,7 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   const { codeSnippet: { report = {} } = {} } = useThemeConfig();
   const [isReportDialogShown, setIsReportDialogShown] = useState(false);
   const isReportButtonShown = report?.hide !== true;
+  const { tooltipText, buttonText, label } = report;
   const { translate } = useTranslate();
   const { submitFeedback } = useSubmitFeedback();
 
@@ -31,18 +32,21 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
       setIsReportDialogShown(false);
     }, 1000);
   };
+  const closeReportDialog = () => {
+    setIsReportDialogShown(false);
+  };
   const reportButtonProps: ReportButtonProps = {
     onClick: showReportDialog,
-    buttonText: translate('theme.codeSnippet.report.buttonText', 'Report'),
-    tooltip: translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
+    buttonText: buttonText || translate('theme.codeSnippet.report.buttonText', 'Report'),
+    tooltip: tooltipText || translate('theme.codeSnippet.report.tooltipText', 'Report a problem'),
     visible: isReportButtonShown,
   };
   const reportDialogProps: Partial<ReportDialogProps> = {
     settings: {
-      label: translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
+      label: label || translate('theme.codeSnippet.report.label', 'What is wrong with this code?'),
     },
     onSubmit: hideReportDialog,
-    onCancel: hideReportDialog,
+    onCancel: closeReportDialog,
     submitFeedback,
   };
 

package/src/config.ts

@@ -576,6 +576,9 @@ export const themeConfigSchema = {
         report: {
           type: 'object',
           properties: {
+            tooltipText: { type: 'string' },
+            buttonText: { type: 'string' },
+            label: { type: 'string' },
             ...hideConfigSchema.properties,
           },
           additionalProperties: false,
@@ -704,6 +707,7 @@ export type ThemeUIConfig = ThemeConfig & {
       title: string | undefined;
     }[];
     devLogin?: boolean;
+    loginUrls?: Record<string, string>;
   };
   search?: {
     shortcuts?: string[];