@redocly/theme 0.24.0 → 0.25.1

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -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, { onClick: () => telemetry_1.telemetry.send('code_snippet_reported', {}) }), 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: 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;
     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/Feedback.js

@@ -40,6 +40,7 @@ const Feedback = (props) => {
     const { feedback: themeFeedbackConf } = (0, hooks_1.useThemeConfig)();
     const feedbackConf = Object.assign(Object.assign({}, themeFeedbackConf), props);
     const renderFeedbackComponent = () => {
+        const { type, settings, path } = feedbackConf;
         switch (type) {
             case 'rating':
                 return (React.createElement(Wrapper, null,
@@ -70,7 +71,6 @@ const Feedback = (props) => {
                 break;
         }
     };
-    const { type, settings, path } = feedbackConf;
     return React.createElement(React.Fragment, { key: pathname }, renderFeedbackComponent());
 };
 exports.Feedback = Feedback;

package/lib/components/Feedback/Mood.js

@@ -41,6 +41,7 @@ var MOOD_STATES;
 const Mood = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
     const [score, setScore] = React.useState('');
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
     const { translate } = (0, hooks_1.useTranslate)();
@@ -72,11 +73,14 @@ const Mood = ({ settings, onSubmit, className }) => {
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for your feedback!'))));
     }

package/lib/components/Feedback/Rating.js

@@ -33,6 +33,7 @@ const Feedback_1 = require("../../components/Feedback");
 const hooks_1 = require("../../mocks/hooks");
 const Rating = ({ settings, onSubmit, className }) => {
     const { label, max, submitText, comment: commentSettings, reasons: reasonsSettings, } = settings || {};
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
@@ -51,12 +52,15 @@ const Rating = ({ settings, onSubmit, className }) => {
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-            max: maxRating,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+                max: maxRating,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }

package/lib/components/Feedback/ReportDialog.js

@@ -22,6 +22,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,14 +38,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReportDialog = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const telemetry_1 = require("../../mocks/telemetry");
 const Comment_1 = require("../../components/Feedback/Comment");
 const ReportDialog = ({ location, settings, onSubmit, onCancel, submitFeedback, }) => {
     const { label } = settings;
+    const { pathname } = (0, react_router_dom_1.useLocation)();
     return (React.createElement(Wrapper, { className: "modal" },
-        React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => {
-                submitFeedback({ type: 'problem', values: value, path: location });
+        React.createElement(Comment_1.Comment, { settings: { label }, onSubmit: (value) => __awaiter(void 0, void 0, void 0, function* () {
+                yield submitFeedback({ type: 'problem', values: value, location, path: pathname });
+                telemetry_1.telemetry.send('code_snippet_reported', {});
                 onSubmit();
-            }, onCancel: onCancel })));
+            }), onCancel: onCancel })));
 };
 exports.ReportDialog = ReportDialog;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -34,6 +34,7 @@ const Thumbs_1 = require("../../components/Feedback/Thumbs");
 const hooks_1 = require("../../mocks/hooks");
 const Sentiment = ({ settings, onSubmit, className }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+    const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
@@ -56,11 +57,14 @@ const Sentiment = ({ settings, onSubmit, className }) => {
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }));
     }
     if (score) {
-        onSubmit({
-            score,
-            comment,
-            reasons,
-        });
+        if (!isSubmitted) {
+            onSubmit({
+                score,
+                comment,
+                reasons,
+            });
+            setIsSubmitted(true);
+        }
         return (React.createElement(Wrapper, null,
             React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }

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

@@ -101,6 +101,6 @@ export type ReportDialogProps = {
     settings: {
         label?: string;
     };
-    submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+    submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
     className?: string;
 };

package/lib/components/Feedback/useReportDialog.js

@@ -4,11 +4,13 @@ exports.useReportDialog = void 0;
 const react_1 = require("react");
 const hooks_1 = require("../../mocks/hooks");
 const hooks_2 = require("../../hooks");
+const useSubmitFeedback_1 = require("../../mocks/Feedback/useSubmitFeedback");
 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) === false; // TODO: report temporary disabled by default
     const { translate } = (0, hooks_1.useTranslate)();
+    const { submitFeedback } = (0, useSubmitFeedback_1.useSubmitFeedback)();
     const translationKeys = {
         buttonText: 'theme.codeSnippet.report.buttonText',
         tooltipText: 'theme.codeSnippet.report.tooltipText',
@@ -32,6 +34,7 @@ function useReportDialog() {
         },
         onSubmit: hideReportDialog,
         onCancel: hideReportDialog,
+        submitFeedback,
     };
     return {
         reportDialog: { visible: isReportDialogShown, props: reportDialogProps },

package/lib/components/OpenApiDocs/ScorecardBadges.js

@@ -29,8 +29,6 @@ const ScorecardBadgesWrapper = styled_components_1.default.div `
 function ComplianceTag(props) {
     const { level, status, slug } = props;
     return (react_1.default.createElement(Link_1.Link, { to: slug },
-        react_1.default.createElement(Tag_1.Tag, { color: (0, CatalogCard_1.statusToColor)(status), size: "large", onClick: () => telemetry_1.telemetry.send('scorecard_link_clicked', { action: 'click' }) },
-            level,
-            " oops")));
+        react_1.default.createElement(Tag_1.Tag, { color: (0, CatalogCard_1.statusToColor)(status), size: "large", onClick: () => telemetry_1.telemetry.send('scorecard_link_clicked', { action: 'click' }) }, level)));
 }
 //# sourceMappingURL=ScorecardBadges.js.map

package/lib/components/Scorecard/Card.d.ts

@@ -0,0 +1,2 @@
+export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScorecardCardTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;

package/lib/components/Scorecard/Card.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScorecardCardTitle = exports.ScorecardCard = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.ScorecardCard = styled_components_1.default.div `
+  color: var(--text-primary);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-primary);
+  box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.05);
+
+  flex: 1;
+  min-width: 300px;
+  padding: 20px;
+`;
+exports.ScorecardCardTitle = styled_components_1.default.h3 `
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 0;
+`;
+//# sourceMappingURL=Card.js.map

package/lib/components/Scorecard/Gauge.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function Gauge({ chunks, }: {
+    chunks: {
+        share: number;
+        color: string;
+    }[];
+}): JSX.Element;
+export declare const GaugeValue: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/components/Scorecard/Gauge.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GaugeValue = exports.Gauge = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Gauge({ chunks, }) {
+    return (React.createElement(GaugeWrapper, null, chunks.map((chunk, i) => (React.createElement(GaugeChunk, Object.assign({ key: i }, chunk))))));
+}
+exports.Gauge = Gauge;
+exports.GaugeValue = styled_components_1.default.span `
+  font-size: var(--font-size-lg);
+  line-height: var(line-height-regular);
+
+  margin-right: 5px;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 0;
+  text-align: right;
+  width: 70px;
+`;
+const GaugeWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  height: 10px;
+  width: 100%;
+`;
+const GaugeChunk = styled_components_1.default.div `
+  width: ${(props) => props.share}%;
+  background-color: ${(props) => props.color};
+  height: 10px;
+`;
+//# sourceMappingURL=Gauge.js.map

package/lib/components/Scorecard/StatusByLevelWidget.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface StatusByLevelWidgetProps {
+    title: string;
+    levels: {
+        name: string;
+        errors: number;
+        warnings: number;
+        total: number;
+    }[];
+}
+export declare function StatusByLevelWidget(props: StatusByLevelWidgetProps): JSX.Element;

package/lib/components/Scorecard/StatusByLevelWidget.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusByLevelWidget = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Gauge_1 = require("../../components/Scorecard/Gauge");
+const Card_1 = require("../../components/Scorecard/Card");
+function StatusByLevelWidget(props) {
+    const { levels, title } = props;
+    return (React.createElement(Card_1.ScorecardCard, null,
+        React.createElement(Card_1.ScorecardCardTitle, null, title),
+        React.createElement(CardBody, null, levels.map((level) => {
+            const success = level.total - level.errors - level.warnings;
+            return (React.createElement(CardRow, { key: level.name },
+                React.createElement("span", null, level.name),
+                React.createElement(Gauge_1.Gauge, { chunks: [
+                        {
+                            share: (success / level.total) * 100,
+                            color: 'var(--scorecard-color-success)',
+                        },
+                        {
+                            share: (level.warnings / level.total) * 100,
+                            color: 'var(--scorecard-color-warning)',
+                        },
+                        {
+                            share: (level.errors / level.total) * 100,
+                            color: 'var(--scorecard-color-error)',
+                        },
+                    ] }),
+                React.createElement(Gauge_1.GaugeValue, null,
+                    success,
+                    "/",
+                    level.total)));
+        }))));
+}
+exports.StatusByLevelWidget = StatusByLevelWidget;
+const CardBody = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+const CardRow = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  align-items: center;
+
+  > span:first-child {
+    text-align: right;
+    width: 100px;
+  }
+`;
+//# sourceMappingURL=StatusByLevelWidget.js.map

package/lib/globalStyle.js

@@ -27,7 +27,7 @@ const Tooltip_1 = require("./components/Tooltip");
 const LastUpdated_1 = require("./components/LastUpdated");
 const NavbarLogo_1 = require("./components/NavbarLogo");
 const themeColors = (0, styled_components_1.css) `
-/* === Palette === */
+  /* === Palette === */
   /**
     * @tokens Base Colors
     * @presenter Color
@@ -290,8 +290,8 @@ const typography = (0, styled_components_1.css) `
     * @tokens Font Rendering
     */
 
-   --text-smoothing: antialiased; // text-smoothing
-   --text-rendering: optimizeSpeed; // text-rendering
+  --text-smoothing: antialiased; // text-smoothing
+  --text-rendering: optimizeSpeed; // text-rendering
 
   // @tokens End
 `;
@@ -385,7 +385,6 @@ const headingsTypography = (0, styled_components_1.css) `
   --heading-anchor-color: var(--color-primary); // @presenter Color
   --heading-anchor-icon: none;
 
-
   /**
     * @tokens Heading level 1
     */
@@ -702,7 +701,6 @@ const badges = (0, styled_components_1.css) `
   --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
-
   // @tokens End
 `;
 const loadProgressBar = (0, styled_components_1.css) `
@@ -788,7 +786,8 @@ const docsDropdown = (0, styled_components_1.css) `
   --docs-dropdown-padding-vertical: 6px;
   --docs-dropdown-padding-left: 10px;
   --docs-dropdown-padding-right: 26px;
-  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
+  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right)
+    var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
   --docs-dropdown-border: 1px solid var(--border-primary);
 `;
 const tile = (0, styled_components_1.css) `
@@ -839,11 +838,11 @@ const pages = (0, styled_components_1.css) `
   --page-403-description-margin: 0; // @presenter Spacing
 
   --page-403-button-margin: 4em; // @presenter Spacing
-    
+
   --page-403-oidc-description-font-size: var(--font-size-lg);
   --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
-   // @tokens End
+  // @tokens End
 `;
 const error = (0, styled_components_1.css) `
   --error-bubble-padding: var(--spacing-md);
@@ -914,6 +913,11 @@ const zIndexDepth = (0, styled_components_1.css) `
   --z-index-popover: 200;
   --z-index-overlay: 1000;
 `;
+const scorecardColors = (0, styled_components_1.css) `
+  --scorecard-color-error: var(--color-error);
+  --scorecard-color-warning: var(--color-warning);
+  --scorecard-color-success: var(--color-green-7);
+`;
 exports.styles = (0, styled_components_1.css) `
   :root {
     ${Markdown_1.admonition}
@@ -961,6 +965,7 @@ exports.styles = (0, styled_components_1.css) `
     ${Profile_1.userProfileDropdown}
     ${Sidebar_1.versionPicker}
     ${zIndexDepth}
+    ${scorecardColors}
 
     --api-catalog-card-min-width: 250px;
 

package/lib/types/portal/src/shared/types/feedback.d.ts

@@ -4,6 +4,7 @@ export type SubmitFeedbackParams = {
     type: string;
     values: Record<string, unknown>;
     path?: string;
+    location?: string;
 };
 export type FeedbackProps = {
     type: FEEDBACK_TYPES;

package/package.json

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

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -142,7 +142,6 @@ export function CodeBlockControls({
             asIcon={controlsType === 'icon'}
             title={report.tooltipText}
             {...report.props}
-            onClick={() => telemetry.send('code_snippet_reported', {})}
           >
             {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
           </CodeBlockControlButton>

package/src/components/Feedback/Feedback.tsx

@@ -15,6 +15,8 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
   const feedbackConf = { ...themeFeedbackConf, ...props };
 
   const renderFeedbackComponent = () => {
+    const { type, settings, path } = feedbackConf;
+
     switch (type) {
       case 'rating':
         return (
@@ -70,8 +72,6 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
     }
   };
 
-  const { type, settings, path } = feedbackConf;
-
   return <React.Fragment key={pathname}>{renderFeedbackComponent()}</React.Fragment>;
 };
 

package/src/components/Feedback/Mood.tsx

@@ -15,6 +15,7 @@ export enum MOOD_STATES {
 export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
   const [score, setScore] = React.useState('');
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
@@ -68,11 +69,16 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+      });
+
+      setIsSubmitted(true);
+    }
+
     return (
       <Wrapper>
         <Label data-translation-key={translationKeys.submitText}>

package/src/components/Feedback/Rating.tsx

@@ -18,6 +18,7 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
     comment: commentSettings,
     reasons: reasonsSettings,
   } = settings || {};
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
@@ -49,12 +50,16 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-      max: maxRating,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+        max: maxRating,
+      });
+      setIsSubmitted(true);
+    }
+
     return (
       <Wrapper>
         <Label data-translation-key={translationKeys.submitText}>

package/src/components/Feedback/ReportDialog.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
 
+import { telemetry } from '@portal/telemetry';
 import { Comment } from '@theme/components/Feedback/Comment';
 import type { ReportDialogProps } from '@theme/components/Feedback';
 
@@ -12,13 +14,15 @@ export const ReportDialog = ({
   submitFeedback,
 }: ReportDialogProps): JSX.Element => {
   const { label } = settings;
+  const { pathname } = useLocation();
 
   return (
     <Wrapper className="modal">
       <Comment
         settings={{ label }}
-        onSubmit={(value) => {
-          submitFeedback({ type: 'problem', values: value, path: location });
+        onSubmit={async (value) => {
+          await submitFeedback({ type: 'problem', values: value, location, path: pathname });
+          telemetry.send('code_snippet_reported', {});
           onSubmit();
         }}
         onCancel={onCancel}

package/src/components/Feedback/Sentiment.tsx

@@ -8,6 +8,7 @@ import { useTranslate } from '@portal/hooks';
 
 export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JSX.Element => {
   const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
@@ -47,11 +48,14 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
   }
 
   if (score) {
-    onSubmit({
-      score,
-      comment,
-      reasons,
-    });
+    if (!isSubmitted) {
+      onSubmit({
+        score,
+        comment,
+        reasons,
+      });
+      setIsSubmitted(true);
+    }
     return (
       <Wrapper>
         <Label data-translation-key={translationKeys.submitText}>

package/src/components/Feedback/types.ts

@@ -90,6 +90,6 @@ export type ReportDialogProps = {
   settings: {
     label?: string;
   };
-  submitFeedback: ({ type, values, path }: SubmitFeedbackParams) => Promise<void>;
+  submitFeedback: ({ type, values, path, location }: SubmitFeedbackParams) => Promise<void>;
   className?: string;
 };

package/src/components/Feedback/useReportDialog.ts

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import type { ReportDialogProps } from '@theme/components/Feedback/types';
 import { useTranslate } from '@portal/hooks';
 import { useThemeConfig } from '@theme/hooks';
+import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
 
 export interface ReportButtonProps {
   onClick: () => void;
@@ -20,6 +21,7 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
   const [isReportDialogShown, setIsReportDialogShown] = useState(false);
   const isReportButtonShown = report?.hide === false; // TODO: report temporary disabled by default
   const { translate } = useTranslate();
+  const { submitFeedback } = useSubmitFeedback();
   const translationKeys = {
     buttonText: 'theme.codeSnippet.report.buttonText',
     tooltipText: 'theme.codeSnippet.report.tooltipText',
@@ -44,6 +46,7 @@ export function useReportDialog(): Record<string, ReportComponentsProps> {
     },
     onSubmit: hideReportDialog,
     onCancel: hideReportDialog,
+    submitFeedback,
   };
 
   return {

package/src/components/OpenApiDocs/ScorecardBadges.tsx

@@ -48,7 +48,7 @@ function ComplianceTag(props: { level: string; status: string; slug: string }) {
         size="large"
         onClick={() => telemetry.send('scorecard_link_clicked', { action: 'click' })}
       >
-        {level} oops
+        {level}
       </Tag>
     </Link>
   );

package/src/components/Scorecard/Card.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export const ScorecardCard = styled.div`
+  color: var(--text-primary);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
+
+  border: 1px solid var(--border-primary);
+  box-shadow: 0 0 10px 0 rgba(35, 35, 35, 0.05);
+
+  flex: 1;
+  min-width: 300px;
+  padding: 20px;
+`;
+
+export const ScorecardCardTitle = styled.h3`
+  font-size: 1.2rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+  margin-top: 0;
+`;

package/src/components/Scorecard/Gauge.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export function Gauge({
+  chunks,
+}: {
+  chunks: {
+    share: number;
+    color: string;
+  }[];
+}) {
+  return (
+    <GaugeWrapper>
+      {chunks.map((chunk, i) => (
+        <GaugeChunk key={i} {...chunk} />
+      ))}
+    </GaugeWrapper>
+  );
+}
+
+export const GaugeValue = styled.span`
+  font-size: var(--font-size-lg);
+  line-height: var(line-height-regular);
+
+  margin-right: 5px;
+  vertical-align: middle;
+  display: inline-block;
+  margin-right: 0;
+  text-align: right;
+  width: 70px;
+`;
+
+const GaugeWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 10px;
+  width: 100%;
+`;
+
+const GaugeChunk = styled.div<{ share: number; color: string }>`
+  width: ${(props) => props.share}%;
+  background-color: ${(props) => props.color};
+  height: 10px;
+`;

package/src/components/Scorecard/StatusByLevelWidget.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Gauge, GaugeValue } from '@theme/components/Scorecard/Gauge';
+import { ScorecardCard, ScorecardCardTitle } from '@theme/components/Scorecard/Card';
+
+export interface StatusByLevelWidgetProps {
+  title: string;
+  levels: { name: string; errors: number; warnings: number; total: number }[];
+}
+
+export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
+  const { levels, title } = props;
+  return (
+    <ScorecardCard>
+      <ScorecardCardTitle>{title}</ScorecardCardTitle>
+      <CardBody>
+        {levels.map((level) => {
+          const success = level.total - level.errors - level.warnings;
+          return (
+            <CardRow key={level.name}>
+              <span>{level.name}</span>
+              <Gauge
+                chunks={[
+                  {
+                    share: (success / level.total) * 100,
+                    color: 'var(--scorecard-color-success)',
+                  },
+                  {
+                    share: (level.warnings / level.total) * 100,
+                    color: 'var(--scorecard-color-warning)',
+                  },
+                  {
+                    share: (level.errors / level.total) * 100,
+                    color: 'var(--scorecard-color-error)',
+                  },
+                ]}
+              />
+              <GaugeValue>
+                {success}/{level.total}
+              </GaugeValue>
+            </CardRow>
+          );
+        })}
+      </CardBody>
+    </ScorecardCard>
+  );
+}
+
+const CardBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+const CardRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+
+  align-items: center;
+
+  > span:first-child {
+    text-align: right;
+    width: 100px;
+  }
+`;

package/src/globalStyle.ts

@@ -2,17 +2,17 @@ import { createGlobalStyle, css } from 'styled-components';
 
 import { darkMode } from '@theme/ui/darkColors';
 import { breakpoints } from '@portal/media-css';
-import { footer } from "@theme/components/Footer";
-import { sidebar, versionPicker } from "@theme/components/Sidebar";
-import { breadcrumbs } from "@theme/components/Breadcrumbs";
+import { footer } from '@theme/components/Footer';
+import { sidebar, versionPicker } from '@theme/components/Sidebar';
+import { breadcrumbs } from '@theme/components/Breadcrumbs';
 import { button } from '@theme/components/Button';
 import { tag } from '@theme/components/Tag';
 import { toc } from '@theme/components/TableOfContent';
-import { navbar } from "@theme/components/Navbar";
-import { search } from "@theme/components/Search";
-import { catalog } from "@theme/components/Catalog";
-import { filter } from "@theme/components/Filter";
-import { menu, mobileMenu } from "@theme/components/Menu";
+import { navbar } from '@theme/components/Navbar';
+import { search } from '@theme/components/Search';
+import { catalog } from '@theme/components/Catalog';
+import { filter } from '@theme/components/Filter';
+import { menu, mobileMenu } from '@theme/components/Menu';
 import { apiReferencePanels, responsePanelColors } from '@theme/components/Panel';
 import { code } from '@theme/components/CodeBlock';
 import { product, productPicker } from '@theme/components/Product';
@@ -26,7 +26,7 @@ import { lastUpdated } from '@theme/components/LastUpdated';
 import { logo } from '@theme/components/NavbarLogo';
 
 const themeColors = css`
-/* === Palette === */
+  /* === Palette === */
   /**
     * @tokens Base Colors
     * @presenter Color
@@ -290,8 +290,8 @@ const typography = css`
     * @tokens Font Rendering
     */
 
-   --text-smoothing: antialiased; // text-smoothing
-   --text-rendering: optimizeSpeed; // text-rendering
+  --text-smoothing: antialiased; // text-smoothing
+  --text-rendering: optimizeSpeed; // text-rendering
 
   // @tokens End
 `;
@@ -363,7 +363,7 @@ const borders = css`
   --border-radius-md: calc(var(--border-radius) * 1.5);
   --border-radius-lg: calc(var(--border-radius) * 2);
   --border-radius-xlg: calc(var(--border-radius) * 3);
-`
+`;
 
 const headingsTypography = css`
   * {
@@ -388,7 +388,6 @@ const headingsTypography = css`
   --heading-anchor-color: var(--color-primary); // @presenter Color
   --heading-anchor-icon: none;
 
-
   /**
     * @tokens Heading level 1
     */
@@ -708,7 +707,6 @@ const badges = css`
   --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
-
   // @tokens End
 `;
 
@@ -797,7 +795,8 @@ const docsDropdown = css`
   --docs-dropdown-padding-vertical: 6px;
   --docs-dropdown-padding-left: 10px;
   --docs-dropdown-padding-right: 26px;
-  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
+  --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right)
+    var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
   --docs-dropdown-border: 1px solid var(--border-primary);
 `;
 
@@ -850,12 +849,12 @@ const pages = css`
   --page-403-description-margin: 0; // @presenter Spacing
 
   --page-403-button-margin: 4em; // @presenter Spacing
-    
+
   --page-403-oidc-description-font-size: var(--font-size-lg);
   --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
 
-   // @tokens End
-`
+  // @tokens End
+`;
 
 const error = css`
   --error-bubble-padding: var(--spacing-md);
@@ -929,6 +928,12 @@ const zIndexDepth = css`
   --z-index-overlay: 1000;
 `;
 
+const scorecardColors = css`
+  --scorecard-color-error: var(--color-error);
+  --scorecard-color-warning: var(--color-warning);
+  --scorecard-color-success: var(--color-green-7);
+`;
+
 export const styles = css`
   :root {
     ${admonition}
@@ -976,6 +981,7 @@ export const styles = css`
     ${userProfileDropdown}
     ${versionPicker}
     ${zIndexDepth}
+    ${scorecardColors}
 
     --api-catalog-card-min-width: 250px;
 

package/src/types/portal/src/shared/types/feedback.ts

@@ -6,6 +6,7 @@ export type SubmitFeedbackParams = {
   type: string;
   values: Record<string, unknown>;
   path?: string;
+  location?: string;
 };
 
 export type FeedbackProps = {