@redocly/theme 0.25.1 → 0.25.3

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/components/Tabs/Tab.js

@@ -14,20 +14,44 @@ exports.Tab = Tab;
 const TabItem = styled_components_1.default.li `
   display: inline-block;
   list-style: none;
-  padding: 0.75rem 1rem;
   cursor: pointer;
 
+  color: var(--md-tabs-tab-text-color);
+  font-size: var(--md-tabs-tab-font-size);
+  font-family: var(--md-tabs-tab-font-family);
+  font-style: var(--md-tabs-tab-font-style);
+  font-weight: var(--md-tabs-tab-font-weight);
+  background-color: var(--md-tabs-tab-background-color);
+  border-radius: var(--md-tabs-tab-border-radius);
+  padding: var(--md-tabs-tab-padding);
+  border: var(--md-tabs-tab-border);
+  border-width: var(--md-tabs-tab-border-width);
+
   ${({ active }) => active
-    ? `
-      background-color: var(--background-color);
+    ? `      
+      color: var(--md-tabs-active-tab-text-color);
+      font-size: var(--md-tabs-active-tab-font-size);
+      font-family: var(--md-tabs-active-tab-font-family);
+      font-style: var(--md-tabs-active-tab-font-style);
+      font-weight: var(--md-tabs-active-tab-font-weight);
+      background-color: var(--md-tabs-active-tab-background-color);
+      border-radius: var(--md-tabs-active-tab-border-radius);
+      padding: var(--md-tabs-active-tab-padding);
       border: solid var(--md-tabs-active-tab-border-color);
-      border-width: 0 0 1px 0;
-      color: var(--text-primary);
+      border-width: var(--md-tabs-active-tab-border-width);
     `
     : `
     &:hover {
+      color: var(--md-tabs-hover-tab-text-color);
+      font-size: var(--md-tabs-hover-tab-font-size);
+      font-family: var(--md-tabs-hover-tab-font-family);
+      font-style: var(--md-tabs-hover-tab-font-style);
+      font-weight: var(--md-tabs-hover-tab-font-weight);
+      background-color: var(--md-tabs-hover-tab-background-color);
+      border-radius: var(--md-tabs-hover-tab-border-radius);
+      padding: var(--md-tabs-hover-tab-padding);
       border: solid var(--md-tabs-hover-tab-border-color);
-      border-width: 0 0 1px 0;
+      border-width: var(--md-tabs-hover-tab-border-width);
     }
   `}
 `;

package/lib/components/Tabs/Tabs.js

@@ -48,7 +48,15 @@ function Tabs(props) {
 }
 exports.Tabs = Tabs;
 const TabsContainer = styled_components_1.default.div `
-  margin: 10px 0;
+  color: var(--md-tabs-container-text-color);
+  font-size: var(--md-tabs-container-font-size);
+  font-family: var(--md-tabs-container-font-family);
+  font-style: var(--md-tabs-container-font-style);
+  font-weight: var(--md-tabs-container-font-weight);
+  background-color: var(--md-tabs-container-background-color);
+  margin: var(--md-tabs-container-margin);
+  padding: var(--md-tabs-container-padding);
+  border: var(--md-tabs-container-border);
 
   ol[class^='Tabs__TabList'] {
     margin: 0;
@@ -56,18 +64,24 @@ const TabsContainer = styled_components_1.default.div `
   }
 `;
 const TabList = styled_components_1.default.ol `
-  color: var(--md-tabs-tab-text-color);
-  padding: 0;
+  padding: var(--md-tabs-padding);
   margin-block-end: 0;
-  border: solid var(--border-primary);
-  border-width: 0 0 1px 0;
+  border: var(--md-tabs-border);
+  border-width: var(--md-tabs-border-width);
 
   li[class^='Tab__TabItem'] {
-    margin: 0;
-    margin-bottom: -1px;
+    margin: var(--md-tabs-tab-margin);
   }
 `;
 const TabContent = styled_components_1.default.div `
-  padding: 1rem 0;
+  color: var(--md-tabs-content-text-color);
+  font-size: var(--md-tabs-content-font-size);
+  font-family: var(--md-tabs-content-font-family);
+  font-style: var(--md-tabs-content-font-style);
+  font-weight: var(--md-tabs-content-font-weight);
+  background-color: var(--md-tabs-content-background-color);
+  margin: var(--md-tabs-content-margin);
+  padding: var(--md-tabs-content-padding);
+  border: var(--md-tabs-content-border);
 `;
 //# sourceMappingURL=Tabs.js.map

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.25.1",
+  "version": "0.25.3",
   "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/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>
   );

package/src/components/Feedback/Comment.tsx

@@ -10,12 +10,6 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
   const [text, setText] = React.useState('');
   const [submitValue, setSubmitValue] = React.useState('');
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.comment.submitText',
-    label: 'theme.feedback.settings.comment.label',
-    send: 'theme.feedback.settings.comment.send',
-    cancel: 'theme.feedback.settings.comment.cancel',
-  };
 
   const send = () => {
     if (!text) return;
@@ -29,9 +23,9 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
   if (submitValue) {
     return (
       <Wrapper className={className}>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.comment.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.comment.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -41,17 +35,23 @@ export const Comment = ({ settings, onSubmit, onCancel, className }: CommentProp
 
   return (
     <Wrapper data-component-name="Feedback/Comment" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Please share your feedback with us.')}
+      <Label data-translation-key="theme.feedback.settings.comment.label">
+        {translate(
+          'theme.feedback.settings.comment.label',
+          label || 'Please share your feedback with us.',
+        )}
       </Label>
       <TextArea rows={3} onChange={handleTextAreaChange} />
       <ButtonsContainer>
-        <SendButton data-translation-key={translationKeys.send} onClick={send}>
-          {translate(translationKeys.send, 'Send')}
+        <SendButton data-translation-key="theme.feedback.settings.comment.send" onClick={send}>
+          {translate('theme.feedback.settings.comment.send', 'Send')}
         </SendButton>
         {onCancel && (
-          <CancelButton data-translation-key={translationKeys.cancel} onClick={onCancel}>
-            {translate(translationKeys.cancel, 'Cancel')}
+          <CancelButton
+            data-translation-key="theme.feedback.settings.comment.cancel"
+            onClick={onCancel}
+          >
+            {translate('theme.feedback.settings.comment.cancel', 'Cancel')}
           </CancelButton>
         )}
       </ButtonsContainer>

package/src/components/Feedback/Mood.tsx

@@ -19,13 +19,6 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.submitText',
-    label: 'theme.feedback.settings.label',
-    satisfiedLabel: 'theme.feedback.settings.comment.satisfiedLabel',
-    neutralLabel: 'theme.feedback.settings.comment.neutralLabel',
-    dissatisfiedLabel: 'theme.feedback.settings.comment.dissatisfiedLabel',
-  };
 
   if (score && reasonsSettings?.enable && !reasons.length) {
     const { label: reasonsLabel, items, multi } = reasonsSettings;
@@ -43,21 +36,24 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
       switch (score) {
         case MOOD_STATES.SATISFIED:
           return translate(
-            translationKeys.satisfiedLabel,
+            'theme.feedback.settings.comment.satisfiedLabel',
             commentSettings.satisfiedLabel || 'What was most helpful?',
           );
         case MOOD_STATES.NEUTRAL:
           return translate(
-            translationKeys.neutralLabel,
+            'theme.feedback.settings.comment.neutralLabel',
             commentSettings.neutralLabel || 'What can we improve?',
           );
         case MOOD_STATES.DISSATISFIED:
           return translate(
-            translationKeys.dissatisfiedLabel,
+            'theme.feedback.settings.comment.dissatisfiedLabel',
             commentSettings.dissatisfiedLabel || 'What can we improve?',
           );
         default:
-          return translate(translationKeys.satisfiedLabel, 'What can we improve?');
+          return translate(
+            'theme.feedback.settings.comment.satisfiedLabel',
+            'What can we improve?',
+          );
       }
     };
     return (
@@ -81,8 +77,11 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
 
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
-          {translate(translationKeys.submitText, submitText || 'Thank you for your feedback!')}
+        <Label data-translation-key="theme.feedback.settings.submitText">
+          {translate(
+            'theme.feedback.settings.submitText',
+            submitText || 'Thank you for your feedback!',
+          )}
         </Label>
       </Wrapper>
     );
@@ -90,8 +89,8 @@ export const Mood = ({ settings, onSubmit, className }: MoodProps): JSX.Element
 
   return (
     <Wrapper data-component-name="Feedback/Mood" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'Was this page helpful?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'Was this page helpful?')}
       </Label>
       <Vote
         onClick={() => {

package/src/components/Feedback/Rating.tsx

@@ -23,10 +23,6 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const { translate } = useTranslate();
-  const translationKeys = {
-    submitText: 'theme.feedback.settings.submitText',
-    label: 'theme.feedback.settings.label',
-  };
   const maxRating = max || 5;
 
   if (score && reasonsSettings?.enable && !reasons.length) {
@@ -62,9 +58,9 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
     return (
       <Wrapper>
-        <Label data-translation-key={translationKeys.submitText}>
+        <Label data-translation-key="theme.feedback.settings.submitText">
           {translate(
-            translationKeys.submitText,
+            'theme.feedback.settings.submitText',
             submitText || 'Thank you for helping improve our documentation!',
           )}
         </Label>
@@ -74,8 +70,8 @@ export const Rating = ({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
   return (
     <Wrapper data-component-name="Feedback/Rating" className={className}>
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, label || 'How helpful was this page?')}
+      <Label data-translation-key="theme.feedback.settings.label">
+        {translate('theme.feedback.settings.label', label || 'How helpful was this page?')}
       </Label>
       <Stars max={maxRating} onSubmit={setScore} />
     </Wrapper>