@redocly/theme 0.25.1-beta.4 → 0.25.2

package/lib/components/Menu/hooks/use-mobile-menu-levels.js

@@ -7,10 +7,6 @@ const hooks_1 = require("../../../mocks/hooks");
 const useSidebarItems_1 = require("../../../mocks/Sidebar/useSidebarItems");
 const constants_1 = require("../../../components/Menu/constants");
 const hooks_2 = require("../../../hooks");
-const TRANSLATION_KEYS = {
-    mainMenu: 'theme.mobileMenu.mainMenu',
-    previous: 'theme.mobileMenu.previous',
-};
 const useMobileMenuLevels = () => {
     var _a, _b;
     const { versions = [] } = (0, hooks_1.usePageVersions)() || {};
@@ -25,7 +21,7 @@ const useMobileMenuLevels = () => {
     const menuLevels = (0, react_1.useMemo)(() => {
         const menuLevels = [
             {
-                label: translate(TRANSLATION_KEYS.mainMenu, 'Main Menu'),
+                label: translate('theme.mobileMenu.mainMenu', 'Main Menu'),
                 type: constants_1.MenuType.MAIN_MENU,
             },
         ];
@@ -37,7 +33,7 @@ const useMobileMenuLevels = () => {
         }
         if (sidebarItems.length || activeVersion) {
             menuLevels.push({
-                label: translate(TRANSLATION_KEYS.previous, 'Previous'),
+                label: translate('theme.mobileMenu.previous', 'Previous'),
                 type: constants_1.MenuType.PAGE,
             });
         }

package/lib/components/Menu/utils.d.ts

@@ -1,6 +1,7 @@
 import type { Location } from 'react-router-dom';
+import type { TFunction } from '@redocly/portal-types';
 import type { ItemState } from '../../components/Sidebar/types';
-import type { Locale, ResolvedNavItem, TFunction, Version } from '../../types/portal';
+import type { Locale, ResolvedNavItem, Version } from '../../types/portal';
 export declare const mapNavbarItems: (items: ResolvedNavItem[], defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => ItemState[];
 export declare const isItemActive: (item: ResolvedNavItem, defaultLocale: string, currentLocale: string, locales: Locale[], location: Location) => boolean;
 export declare const buildLanguagesGroup: (locales: Locale[], currentLocale: string, defaultLocale: string) => ResolvedNavItem | undefined;

package/lib/components/Profile/LoginLink.js

@@ -12,12 +12,9 @@ const telemetry_1 = require("../../mocks/telemetry");
 function LoginLink({ href }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        login: 'theme.profile.login',
-    };
-    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": translationKeys.login, onClick: () => {
+    return (react_1.default.createElement(StyledLink, { href: href, "data-translation-key": "theme.profile.login", onClick: () => {
             telemetry_1.telemetry.send('login_button_clicked', {});
-        } }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
+        } }, translate('theme.profile.login', (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login')));
 }
 exports.LoginLink = LoginLink;
 const StyledLink = styled_components_1.default.a.attrs(() => ({

package/lib/components/Profile/MobileUserProfile.js

@@ -16,12 +16,9 @@ function MobileUserProfile() {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { userData, handleLogout, loginUrl } = (0, useProfileProps_1.useProfileProps)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        login: 'theme.profile.login',
-    };
     if (!(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) && !loginUrl)
         return null;
-    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn", onClick: () => telemetry_1.telemetry.send('login_button_clicked', {}) }, translate(translationKeys.login, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+    return (react_1.default.createElement(MobileProfileWrapper, { "data-component-name": "Navbar/MobileUserProfile" }, !(userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) ? (react_1.default.createElement(LoginButton, { href: loginUrl, "data-cy": "login-btn", onClick: () => telemetry_1.telemetry.send('login_button_clicked', {}) }, translate('theme.profile.login', (userProfile === null || userProfile === void 0 ? void 0 : userProfile.loginLabel) || 'Login'))) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(UserProfileData_1.UserProfileData, { userData: userData }),
         react_1.default.createElement(LogoutButton, { onClick: () => {
                 handleLogout();

package/lib/components/Profile/UserProfile.js

@@ -40,14 +40,10 @@ const icons_1 = require("../../icons");
 function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }) {
     const { userProfile } = (0, useThemeConfig_1.useThemeConfig)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        myApps: 'theme.profile.myApps',
-        logout: 'theme.profile.logout',
-    };
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const menuItems = [react_1.default.createElement(UserProfileData_1.UserProfileData, { key: userData.name, userData: userData })];
     if (hasDeveloperOnboarding) {
-        menuItems.push(react_1.default.createElement(Link_1.Link, { to: "/apps", "data-translation-key": translationKeys.myApps }, translate(translationKeys.myApps, 'My Apps')));
+        menuItems.push(react_1.default.createElement(Link_1.Link, { to: "/apps", "data-translation-key": "theme.profile.myApps" }, translate('theme.profile.myApps', 'My Apps')));
     }
     if (userProfile && userProfile.menu) {
         for (const item of userProfile.menu) {
@@ -57,9 +53,9 @@ function UserProfile({ userData, handleLogout, hasDeveloperOnboarding = false, }
     menuItems.push(react_1.default.createElement(Logout, { onClick: () => {
             handleLogout();
             telemetry_1.telemetry.send('logout_menu_item_clicked', {});
-        }, "data-translation-key": translationKeys.logout, role: "link" },
+        }, "data-translation-key": "theme.profile.logout", role: "link" },
         react_1.default.createElement(icons_1.LogoutIcon, null),
-        translate(translationKeys.logout, (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
+        translate('theme.profile.logout', (userProfile === null || userProfile === void 0 ? void 0 : userProfile.logoutLabel) || 'Log out')));
     return (react_1.default.createElement(ProfileDropdown, { items: menuItems, alignment: "end" },
         react_1.default.createElement(Profile_1.Profile, { name: userData.name, imageUrl: userData.picture, onClick: userData.logoutDisabled ? undefined : () => setIsOpened(!isOpened) })));
 }

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

@@ -1,4 +1,2 @@
-export declare const ScorecardCard: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-}, "data-component-name">;
+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

@@ -5,11 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (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.attrs({
-    'data-component-name': 'Scorecard/ScorecardCard',
-}) `
+exports.ScorecardCard = styled_components_1.default.div `
   color: var(--text-primary);
-  background-color: var(--bg-raised);
+  background-color: var(--thin-tile-background-color);
   border-radius: 4px;
 
   border: 1px solid var(--border-primary);

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

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

package/lib/components/Scorecard/Gauge.js

@@ -29,12 +29,8 @@ 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, className }) {
-    const title = chunks
-        .map((chunk) => chunk.title)
-        .filter(Boolean)
-        .join(', ');
-    return (React.createElement(GaugeWrapper, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className, title: title }, chunks.map((chunk, i) => (React.createElement(GaugeChunk, { key: i, share: chunk.share, color: chunk.color })))));
+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 `

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

@@ -7,6 +7,5 @@ export interface StatusByLevelWidgetProps {
         warnings: number;
         total: number;
     }[];
-    className?: string;
 }
 export declare function StatusByLevelWidget(props: StatusByLevelWidgetProps): JSX.Element;

package/lib/components/Scorecard/StatusByLevelWidget.js

@@ -32,8 +32,8 @@ 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, className } = props;
-    return (React.createElement(Card_1.ScorecardCard, { "data-component-name": "Scorecard/StatusByLevelWidget", className: className },
+    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;
@@ -43,17 +43,14 @@ function StatusByLevelWidget(props) {
                         {
                             share: (success / level.total) * 100,
                             color: 'var(--scorecard-color-success)',
-                            title: `${success} passed`,
                         },
                         {
                             share: (level.warnings / level.total) * 100,
                             color: 'var(--scorecard-color-warning)',
-                            title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
                         },
                         {
                             share: (level.errors / level.total) * 100,
                             color: 'var(--scorecard-color-error)',
-                            title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
                         },
                     ] }),
                 React.createElement(Gauge_1.GaugeValue, null,

package/lib/components/Search/CancelSearch.js

@@ -33,11 +33,8 @@ const hooks_1 = require("../../mocks/hooks");
 const Button_1 = require("../../components/Button");
 function CancelSearch({ onClick, className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        cancel: 'theme.search.cancel',
-    };
     return (React.createElement(Wrapper, { "data-component-name": "Search/CancelSearch", onClick: onClick, className: className },
-        React.createElement(Button_1.Button, { "data-translation-keys": translationKeys.cancel, fullWidth: true, variant: "outlined" }, translate(translationKeys.cancel, 'Cancel'))));
+        React.createElement(Button_1.Button, { "data-translation-keys": "theme.search.cancel", fullWidth: true, variant: "outlined" }, translate('theme.search.cancel', 'Cancel'))));
 }
 exports.CancelSearch = CancelSearch;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Search/RecentSearches.js

@@ -36,9 +36,6 @@ const hooks_1 = require("../../mocks/hooks");
 function RecentSearches({ onSelect, className, }) {
     const { items, removeSearchHistoryItem } = (0, search_1.useRecentSearches)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        title: 'theme.search.recent',
-    };
     if (!items || !items.length)
         return null;
     const removeItem = (e, item) => {
@@ -51,7 +48,7 @@ function RecentSearches({ onSelect, className, }) {
         }
     };
     return (React.createElement(Wrapper, { "data-component-name": "Search/RecentSearches", className: className },
-        React.createElement(Title, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Recent searches')),
+        React.createElement(Title, { "data-translation-key": "theme.search.recent" }, translate('theme.search.recent', 'Recent searches')),
         React.createElement(RecentItems, null, items.map((item) => (React.createElement(Item, { key: item, onClick: () => onSelect(item), onKeyDown: (e) => handleKeyDown(e, item), tabIndex: 0, role: "link" },
             React.createElement(Group, null,
                 React.createElement(ClockBackwardsIcon, null),

package/lib/components/Search/SearchDialog.js

@@ -56,12 +56,6 @@ const SearchDialog = ({ onClose, className, }) => {
             onClose();
         }
     };
-    const translationKeys = {
-        noResults: 'theme.search.noResults',
-        navigate: 'theme.search.keys.navigate',
-        select: 'theme.search.keys.select',
-        exit: 'theme.search.keys.exit',
-    };
     const mapItem = (item) => {
         var _a;
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item, product: !product ? (_a = item.product) === null || _a === void 0 ? void 0 : _a.name : undefined }));
@@ -71,14 +65,14 @@ const SearchDialog = ({ onClose, className, }) => {
             react_1.default.createElement(TopContainer, null,
                 react_1.default.createElement(InputWrapper_1.InputWrapper, { value: query, change: setQuery, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isLoading }),
                 product && react_1.default.createElement(ProductTag_1.ProductTag, { label: product.name, onRemove: () => setProduct(undefined) })),
-            react_1.default.createElement(Results, null, items !== null ? (items.length ? (items.map(mapItem)) : (react_1.default.createElement(Message, { "data-translation-key": translationKeys.noResults }, translate(translationKeys.noResults, 'No results')))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Results, null, items !== null ? (items.length ? (items.map(mapItem)) : (react_1.default.createElement(Message, { "data-translation-key": "theme.search.noResults" }, translate('theme.search.noResults', 'No results')))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(RecentSearches_1.RecentSearches, { onSelect: setQuery }),
                 react_1.default.createElement(SuggestedPages_1.SuggestedPages, null)))),
             react_1.default.createElement(BottomContainer, null,
                 react_1.default.createElement(Shortcuts, null,
-                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": translationKeys.navigate, combination: "Tab", text: translate(translationKeys.navigate, 'to navigate') }),
-                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": translationKeys.select, combination: "\u21B5", text: translate(translationKeys.select, 'to select') }),
-                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": translationKeys.exit, combination: "Esc", text: translate(translationKeys.exit, 'to exit') })),
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": "theme.search.keys.navigate", combination: "Tab", text: translate('theme.search.keys.navigate', 'to navigate') }),
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": "theme.search.keys.select", combination: "\u21B5", text: translate('theme.search.keys.select', 'to select') }),
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": "theme.search.keys.exit", combination: "Esc", text: translate('theme.search.keys.exit', 'to exit') })),
                 react_1.default.createElement(CancelSearch_1.CancelSearch, { onClick: onClose })))));
 };
 exports.SearchDialog = SearchDialog;

package/lib/components/Search/SearchTrigger.js

@@ -34,13 +34,10 @@ function SearchTrigger({ onClick, className, }) {
     var _a, _b;
     const themeSettings = (0, hooks_1.useThemeConfig)();
     const { translate } = (0, hooks_2.useTranslate)();
-    const translationKeys = {
-        label: 'theme.search.navbar.label',
-    };
     const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'];
     return (React.createElement(Wrapper, { "data-component-name": "Search/SearchTrigger", onClick: onClick, className: className },
         React.createElement(SearchIconSmall, null),
-        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, 'Search')),
+        React.createElement(Label, { "data-translation-key": "theme.search.navbar.label" }, translate('theme.search.navbar.label', 'Search')),
         React.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts })));
 }
 exports.SearchTrigger = SearchTrigger;

package/lib/components/Search/SuggestedPages.js

@@ -36,13 +36,10 @@ const hooks_1 = require("../../mocks/hooks");
 function SuggestedPages({ className }) {
     const pages = (0, search_1.useSuggestedPages)();
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        title: 'theme.search.suggested',
-    };
     if (!pages.length)
         return null;
     return (React.createElement(Wrapper, { "data-component-name": "Search/SuggestedPages", className: className },
-        React.createElement(Title, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Suggested pages')),
+        React.createElement(Title, { "data-translation-key": "theme.search.suggested" }, translate('theme.search.suggested', 'Suggested pages')),
         React.createElement(SuggestedItems, null, pages.map((page) => page.link && (React.createElement(Item, { key: page.label },
             React.createElement(PageLink, Object.assign({ to: page.link }, page),
                 React.createElement(Group, null,

package/lib/components/Sidebar/DrilldownMenu.js

@@ -35,16 +35,13 @@ const hooks_1 = require("../../mocks/hooks");
 const Menu_1 = require("../../components/Menu");
 function DrilldownMenu({ item, back, prevActiveItem, children, className, }) {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        backLabel: 'theme.sidebar.menu.backLabel',
-    };
     const label = item.label === (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || !(prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label)
-        ? translate(translationKeys.backLabel, 'Back')
+        ? translate('theme.sidebar.menu.backLabel', 'Back')
         : prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label;
     return (react_1.default.createElement(MenuContainer, { "data-component-name": "Sidebar/DrilldownMenu", className: className },
         react_1.default.createElement(MenuContent, null,
             react_1.default.createElement(MenuWrapper, null,
-                react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": translationKeys.backLabel }, label),
+                react_1.default.createElement(BackButton_1.BackButton, { back: back, "data-translation-key": "theme.sidebar.menu.backLabel" }, label),
                 react_1.default.createElement(Menu_1.MenuLinkItem, { item: item },
                     react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item }))),
             children)));

package/lib/components/Sidebar/VersionPicker.js

@@ -37,10 +37,6 @@ function VersionPicker(props) {
     const themeConfig = (0, hooks_1.useThemeConfig)();
     const { versionPicker } = themeConfig;
     const { translate } = (0, hooks_2.useTranslate)();
-    const translationKeys = {
-        label: 'theme.versionPicker.label',
-        unversioned: 'theme.versionPicker.unversioned',
-    };
     const { versions = [], onChange } = props;
     const options = versions.map((version) => {
         return {
@@ -56,8 +52,8 @@ function VersionPicker(props) {
     if (!options.length && !(versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.showForUnversioned))
         return null;
     return (React.createElement(VersionsPickerWrapper, null,
-        React.createElement(VersionPickerLabel, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, 'Version:')),
-        React.createElement(exports.VersionPickerSelect, { placeholder: translate(translationKeys.unversioned, 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
+        React.createElement(VersionPickerLabel, { "data-translation-key": "theme.versionPicker.label" }, translate('theme.versionPicker.label', 'Version:')),
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
 }
 exports.VersionPicker = VersionPicker;
 const VersionPickerLabel = styled_components_1.default.label `

package/lib/components/TableOfContent/TableOfContent.js

@@ -44,16 +44,13 @@ function TableOfContent(props) {
     const leastDepth = (0, utils_1.getLeastDepth)(displayedHeadings);
     const activeHeadingId = (0, useActiveHeading_1.useActiveHeading)(contentWrapper, (0, utils_1.getDisplayedHeadingsIds)(displayedHeadings));
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        header: 'theme.toc.header',
-    };
     if (toc === null || toc === void 0 ? void 0 : toc.hide) {
         return null;
     }
     return (React.createElement(React.Fragment, null,
         React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent", className: className },
             React.createElement(TableOfContentItems, { ref: sidebar },
-                displayedHeadings.length ? (React.createElement(TocHeader, { "data-translation-key": translationKeys.header }, translate(translationKeys.header, toc.header || 'On this page'))) : null,
+                displayedHeadings.length ? (React.createElement(TocHeader, { "data-translation-key": "theme.toc.header" }, translate('theme.toc.header', toc.header || 'On this page'))) : null,
                 displayedHeadings.map((heading, idx) => {
                     if (!heading) {
                         return null;

package/lib/config.d.ts

@@ -309,9 +309,6 @@ declare const scorecardConfigSchema: {
                     readonly name: {
                         readonly type: "string";
                     };
-                    readonly color: {
-                        readonly type: "string";
-                    };
                     readonly extends: {
                         readonly type: "array";
                         readonly items: {
@@ -1865,9 +1862,6 @@ export declare const themeConfigSchema: {
                             readonly name: {
                                 readonly type: "string";
                             };
-                            readonly color: {
-                                readonly type: "string";
-                            };
                             readonly extends: {
                                 readonly type: "array";
                                 readonly items: {

package/lib/config.js

@@ -280,7 +280,6 @@ const scorecardConfigSchema = {
                 required: ['name'],
                 properties: {
                     name: { type: 'string' },
-                    color: { type: 'string' },
                     extends: { type: 'array', items: { type: 'string' } },
                     rules: {
                         type: 'object',

package/lib/layouts/Forbidden.js

@@ -10,14 +10,10 @@ const Button_1 = require("../components/Button");
 const hooks_1 = require("../mocks/hooks");
 function Forbidden() {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        title: 'theme.page.forbidden.title',
-        homeButton: 'theme.page.homeButton',
-    };
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/Forbidden" },
         react_1.default.createElement(Header, null, "403"),
-        react_1.default.createElement(Description, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Access forbidden')),
-        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/", "data-translation-key": translationKeys.homeButton }, translate(translationKeys.homeButton, 'Open Homepage'))));
+        react_1.default.createElement(Description, { "data-translation-key": "theme.page.forbidden.title" }, translate('theme.page.forbidden.title', 'Access forbidden')),
+        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/", "data-translation-key": "theme.page.homeButton" }, translate('theme.page.homeButton', 'Open Homepage'))));
 }
 exports.Forbidden = Forbidden;
 const Wrapper = styled_components_1.default.div `

package/lib/layouts/NotFound.js

@@ -10,14 +10,10 @@ const Button_1 = require("../components/Button");
 const hooks_1 = require("../mocks/hooks");
 function NotFound() {
     const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        title: 'theme.page.notFound.title',
-        homeButton: 'theme.page.homeButton',
-    };
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/NotFound" },
         react_1.default.createElement(Header, null, "404"),
-        react_1.default.createElement(Description, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, `It looks like you're lost`)),
-        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/", "data-translation-key": translationKeys.homeButton }, translate(translationKeys.homeButton, 'Open Homepage'))));
+        react_1.default.createElement(Description, { "data-translation-key": "theme.page.notFound.title" }, translate('theme.page.notFound.title', "It looks like you're lost")),
+        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/", "data-translation-key": "theme.page.homeButton" }, translate('theme.page.homeButton', 'Open Homepage'))));
 }
 exports.NotFound = NotFound;
 const Wrapper = styled_components_1.default.div `

package/lib/layouts/OIDCForbidden.js

@@ -35,9 +35,6 @@ function OIDCForbidden() {
     const { translate } = (0, hooks_1.useTranslate)();
     const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
     const [errorDescription, setErrorDescription] = (0, react_1.useState)('');
-    const translationKeys = {
-        title: 'theme.page.forbidden.title',
-    };
     // use whatever you want here
     const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
     const renderText = (text) => text.split(' ').map((part) => URL_REGEX.test(part) ? (react_1.default.createElement(ErrorDescriptionLink, { key: part, href: part },
@@ -51,7 +48,7 @@ function OIDCForbidden() {
     }, [searchParams, setSearchParams]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/OIDCForbidden" },
         react_1.default.createElement(Header, null, "403"),
-        react_1.default.createElement(Description, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Access forbidden')),
+        react_1.default.createElement(Description, { "data-translation-key": "theme.page.forbidden.title" }, translate('theme.page.forbidden.title', 'Access forbidden')),
         errorDescription && react_1.default.createElement(ErrorDescription, null, renderText(errorDescription))));
 }
 exports.OIDCForbidden = OIDCForbidden;

package/lib/mocks/hooks/index.d.ts

@@ -1,5 +1,6 @@
+import type { TFunction } from '@redocly/portal-types';
 import type { CatalogConfig, ProductUiConfig, ThemeUIConfig } from '../../config';
-import type { ResolvedNavItem, TFunction, Version } from '../../types/portal';
+import type { ResolvedNavItem, Version } from '../../types/portal';
 import type { FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
 interface PageLink {
     label: string;
@@ -13,7 +14,7 @@ export declare function useSidebarSiblingsData(): {
 };
 export declare function usePageSharedData<T = unknown>(_id: string): T;
 export declare function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): FilteredCatalog;
-export declare function useTranslate(): {
+export declare const useTranslate: () => {
     translate: TFunction;
 };
 export declare function useI18n(): {

package/lib/mocks/hooks/index.js

@@ -68,10 +68,9 @@ function useCatalog(_items, _config) {
     throw new Error('Mock not implemented yet.');
 }
 exports.useCatalog = useCatalog;
-function useTranslate() {
-    const translate = (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '';
-    return { translate };
-}
+const useTranslate = () => ({
+    translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
+});
 exports.useTranslate = useTranslate;
 function useI18n() {
     const changeLanguage = (...args) => args.value;

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.25.1-beta.4",
+  "version": "0.25.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.1.0"
+    "@redocly/portal-types": "1.1.1"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Catalog/Catalog.tsx

@@ -26,9 +26,6 @@ export default function Catalog(props: {
 
   const { filterTerm, setFilterTerm, groups, filters } = useCatalog(items, catalogConfig);
   const [isAddingFilter, setIsAddingFilter] = React.useState(false);
-  const translationKeys = {
-    addFilter: 'theme.catalog.filters.select.addFilter',
-  };
   const { translate } = useTranslate();
 
   useModalScrollLock(isAddingFilter);
@@ -44,7 +41,7 @@ export default function Catalog(props: {
               icon={<PlusIcon />}
               onClick={() => setIsAddingFilter(true)}
             >
-              {translate(translationKeys.addFilter, 'Add filter')}
+              {translate('theme.catalog.filters.select.addFilter', 'Add filter')}
             </Button>
             <FilterTags filters={filters} />
           </FilterTagsWrapper>

package/src/components/Catalog/useCatalog.ts

@@ -299,12 +299,9 @@ function collectFilterOptions(
       }
     }
 
-    const options = Object.entries(usedOptions).map(([value, count]) => ({ value, count }));
-
-    if (!staticOptions) {
-      options.sort((a, b) => b.value.localeCompare(a.value));
-    }
-
+    const options = Object.entries(usedOptions)
+      .map(([value, count]) => ({ value, count }))
+      .sort((a, b) => b.value.localeCompare(a.value));
     if (othersCount) {
       options.push({
         value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',

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/CopyButton/CopyButton.tsx

@@ -34,11 +34,6 @@ function CopyButtonComponent({
 }: CopyButtonProps): JSX.Element {
   const tooltip = useControl();
   const { translate } = useTranslate();
-  const translationKeys = {
-    buttonText: 'theme.codeSnippet.copy.buttonText',
-    tooltipText: 'theme.codeSnippet.copy.tooltipText',
-    toasterText: 'theme.codeSnippet.copy.toasterText',
-  };
 
   const showTooltip = (duration: number = 1500): void => {
     tooltip.handleOpen();
@@ -59,7 +54,7 @@ function CopyButtonComponent({
   return (
     <Tooltip
       className="copy-button"
-      tip={translate(translationKeys.toasterText, toasterText || 'Copied!')}
+      tip={translate('theme.codeSnippet.copy.buttonText', toasterText || 'Copied!')}
       isOpen={tooltip.isOpened}
       placement={toasterPlacement}
     >
@@ -67,13 +62,13 @@ function CopyButtonComponent({
         onClick={() => copy(toasterDuration)}
         data-cy={dataTestId}
         asIcon={type === 'icon'}
-        title={translate(translationKeys.tooltipText, tooltipText || 'Copy to clipboard')}
+        title={translate('theme.codeSnippet.copy.tooltipText', tooltipText || 'Copy to clipboard')}
         data-testid={dataTestId}
       >
         {type === 'icon' ? (
           <CopyIcon />
         ) : (
-          translate(translationKeys.buttonText, buttonText || 'Copy')
+          translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')
         )}
       </CodeBlockControlButton>
     </Tooltip>

package/src/components/EditPageButton/EditPageButton.tsx

@@ -12,9 +12,6 @@ export interface EditPageButtonProps {
 
 export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
   const { translate } = useTranslate();
-  const translationKeys = {
-    text: 'theme.markdown.editPage.text',
-  };
 
   return (
     <EditButton
@@ -23,8 +20,8 @@ export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
       onClick={() => telemetry.send('edit_page_link_clicked', {})}
     >
       <ButtonIcon />
-      <ButtonText data-translation-key={translationKeys.text}>
-        {translate(translationKeys.text, 'Edit')}
+      <ButtonText data-translation-key="theme.markdown.editPage.text">
+        {translate('theme.markdown.editPage.text', 'Edit')}
       </ButtonText>
     </EditButton>
   );