@redocly/theme 0.11.5 → 0.12.0

package/lib/I18n/LanguagePicker.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const LanguagePicker: (props: {
+    onChangeLanguage: (newLang: string) => void;
+}) => JSX.Element | null;

package/lib/I18n/LanguagePicker.js

@@ -0,0 +1,111 @@
+"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.LanguagePicker = void 0;
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../mocks/utils");
+const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
+const hooks_1 = require("../mocks/hooks");
+const hooks_2 = require("../hooks");
+const LanguagePicker = (props) => {
+    const { currentLocale, locales, defaultLocale } = (0, hooks_1.useI18nConfig)();
+    const dropdownRef = (0, react_1.useRef)(null);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    (0, hooks_2.useOutsideClick)(dropdownRef, () => setIsOpen(false));
+    const location = (0, react_router_dom_1.useLocation)();
+    const history = (0, usePreloadHistory_1.usePreloadHistory)();
+    if (locales.length < 2) {
+        return null;
+    }
+    return (react_1.default.createElement(Dropdown, { "data-component-name": "I18n/LanguagePicker", ref: dropdownRef, isOpen: isOpen, onClick: () => setIsOpen(!isOpen), onBlur: () => setIsOpen(false) },
+        react_1.default.createElement(DropdownValue, null, currentLocale.toUpperCase()),
+        react_1.default.createElement(DropdownMenu, null, locales.map((locale) => (react_1.default.createElement(MenuItem, { onClick: () => {
+                const newLangPathname = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(location.pathname, defaultLocale, locale.code, locales));
+                const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
+                history.push(newUrlWithLanguage);
+                props.onChangeLanguage(locale.code);
+            }, key: locale.code }, locale.name || locale.code || ''))))));
+};
+exports.LanguagePicker = LanguagePicker;
+const Dropdown = styled_components_1.default.div `
+  font-size: var(--profile-menu-item-font-size);
+  font-family: var(--profile-menu-item-font-family);
+  font-weight: var(--profile-menu-item-font-weight);
+  line-height: var(--profile-menu-item-line-height);
+
+  ${(props) => props.isOpen
+    ? `
+    ${DropdownMenu} {
+      display: block;
+    }
+  `
+    : ``}
+`;
+const DropdownValue = styled_components_1.default.div `
+  cursor: pointer;
+  display: block;
+
+  color: var(--navbar-text-color);
+  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);
+  border-radius: var(--navbar-item-border-radius);
+
+  &:hover {
+    color: var(--navbar-item-hover-text-color);
+    text-decoration: var(--navbar-item-hover-text-decoration);
+    background: var(--navbar-item-hover-background-color);
+  }
+`;
+const DropdownMenu = styled_components_1.default.ul `
+  position: absolute;
+  color: var(--profile-menu-item-text-color);
+  background-color: var(--profile-menu-background-color);
+  top: var(--navbar-height);
+  margin: 0;
+  box-shadow: 0 1px 2px rgb(204, 204, 204);
+  border-radius: 0 1px 2px 2px;
+  overflow: hidden;
+  display: none;
+  overflow-y: auto;
+  z-index: 9;
+  padding: 0;
+  list-style: none;
+`;
+const MenuItem = styled_components_1.default.li `
+  padding: 10px;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--profile-menu-item-hover-text-color);
+    text-decoration: var(--profile-menu-item-hover-text-decoration);
+    background: var(--profile-menu-item-hover-background-color);
+  }
+`;
+//# sourceMappingURL=LanguagePicker.js.map

package/lib/I18n/index.d.ts

@@ -0,0 +1 @@
+export { LanguagePicker } from '../I18n/LanguagePicker';

package/lib/I18n/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguagePicker = void 0;
+var LanguagePicker_1 = require("../I18n/LanguagePicker");
+Object.defineProperty(exports, "LanguagePicker", { enumerable: true, get: function () { return LanguagePicker_1.LanguagePicker; } });
+//# sourceMappingURL=index.js.map

package/lib/components/Cards/Card.js

@@ -8,12 +8,14 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const H3_1 = require("../../components/Typography/H3");
+const hooks_1 = require("../../mocks/hooks");
 function Card(props) {
+    const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(CardWrapper, { "data-component-name": "Cards/Card" },
         props.icon && react_1.default.createElement("img", { src: props === null || props === void 0 ? void 0 : props.icon, alt: props === null || props === void 0 ? void 0 : props.title }),
         props.title && react_1.default.createElement(H3_1.H3, null, props.title),
         props.links.items && (react_1.default.createElement(CardLinksList, null, props.links.items.map((item) => (react_1.default.createElement("li", { key: item.label },
-            react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))))))));
+            react_1.default.createElement(Link_1.Link, { to: item.link }, translate(item.labelTranslationKey, item.label)))))))));
 }
 exports.Card = Card;
 const CardWrapper = styled_components_1.default.div `

package/lib/components/Catalog/Catalog.js

@@ -18,22 +18,27 @@ function Catalog(props) {
     const items = (0, index_1.usePageSharedData)('catalog');
     const { filterTerm, setFilterTerm, groups, filters } = (0, useCatalog_1.useCatalog)(items, catalogConfig);
     const [isFilterPanelFocused, setIsFilterPanelFocused] = react_1.default.useState(false);
+    const { translate } = (0, index_1.useTranslate)();
+    const translationKeys = {
+        placeholder: 'theme.catalog.filters.placeholder',
+        applyFilter: 'theme.catalog.filters.apply',
+    };
     return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
         react_1.default.createElement(CatalogPageWrapper, null,
             react_1.default.createElement(CatalogPageSidebar, { isActiveInMobileMode: isFilterPanelFocused },
-                react_1.default.createElement(StyledInput, { placeholder: "Filter...", value: filterTerm, onFocus: () => setIsFilterPanelFocused(true), onChange: (e) => setFilterTerm(e.target.value) }),
+                react_1.default.createElement(StyledInput, { placeholder: translate(translationKeys.placeholder, 'Filter...'), value: filterTerm, onFocus: () => setIsFilterPanelFocused(true), onChange: (e) => setFilterTerm(e.target.value) }),
                 filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx }))),
                 react_1.default.createElement(MobileStickyApplyFilters, null,
-                    react_1.default.createElement(Button_1.Button, { color: "secondary", onClick: () => setIsFilterPanelFocused(false) }, "Apply filters"))),
+                    react_1.default.createElement(Button_1.Button, { "data-translation-key": translationKeys.applyFilter, color: "secondary", onClick: () => setIsFilterPanelFocused(false) }, translate(translationKeys.applyFilter, 'Apply filters')))),
             react_1.default.createElement(CatalogPageContent, null,
-                catalogConfig.title ? react_1.default.createElement(CatalogTitle, null,
-                    " ",
-                    catalogConfig.title,
-                    " ") : null,
+                catalogConfig.title ? (react_1.default.createElement(CatalogTitle, null,
+                    ' ',
+                    translate(catalogConfig.titleTranslationKey, catalogConfig.title),
+                    ' ')) : null,
                 catalogConfig.description ? (react_1.default.createElement(CatalogDescription, null,
-                    " ",
-                    catalogConfig.description,
-                    " ")) : null,
+                    ' ',
+                    translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
+                    ' ')) : null,
                 groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
                     react_1.default.createElement(H3_1.H3, null,
                         group.title,

package/lib/components/Catalog/CatalogCard.js

@@ -32,8 +32,13 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const Highlight_1 = require("../../ui/Highlight");
 const Tags_1 = require("../../components/Tags");
+const hooks_1 = require("../../mocks/hooks");
 function CatalogCard({ item }) {
     var _a;
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        footer: 'theme.catalog.card.footer',
+    };
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
         React.createElement(StyledCard, null,
             React.createElement(CardTitle, null,
@@ -42,7 +47,7 @@ function CatalogCard({ item }) {
                 React.createElement(Highlight_1.Highlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : '')),
             item.tags ? React.createElement(Tags_1.Tags, { tags: item.tags }) : null,
             React.createElement("hr", null),
-            React.createElement(CardFooter, null, "View documentation"))));
+            React.createElement(CardFooter, { "data-translation-key": translationKeys.footer }, translate(translationKeys.footer, 'View documentation')))));
 }
 exports.CatalogCard = CatalogCard;
 const StyledCard = styled_components_1.default.div `

package/lib/components/Catalog/useCatalog.js

@@ -221,7 +221,10 @@ function collectFilterOptions(items, filters) {
             .map(([value, count]) => ({ value, count }))
             .sort((a, b) => b.value.localeCompare(a.value));
         if (othersCount) {
-            options.push({ value: filter.missingCategoryName || 'Others', count: othersCount });
+            options.push({
+                value: filter.missingCategoryNameTranslationKey || filter.missingCategoryName || 'Others',
+                count: othersCount,
+            });
         }
         return Object.assign(Object.assign({}, filter), { options });
     });

package/lib/components/CodeSample/CodeSample.js

@@ -29,11 +29,19 @@ const styled_components_1 = __importStar(require("styled-components"));
 const ClipboardService_1 = require("../../utils/ClipboardService");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Feedback_1 = require("../../components/Feedback");
+const hooks_1 = require("../../mocks/hooks");
 function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const langClassName = language ? `language-${language}` : '';
     const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
     const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } = (0, Feedback_1.useReportDialog)(report);
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        buttonText: 'theme.codeSnippet.copy.buttonText',
+        tooltipText: 'theme.codeSnippet.copy.tooltipText',
+        toasterText: 'theme.codeSnippet.copy.toasterText',
+        reportTitle: 'theme.codeSnippet.report.title',
+    };
     const copyCode = (code) => {
         ClipboardService_1.ClipboardService.copyCustom(code);
         setIsCopied(true);
@@ -42,9 +50,9 @@ function CodeSample({ rawContent, highlighted, language, 'data-source': dataSour
     return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(CodeSampleButtonContainer, null,
             !copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
-                !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: copy.tooltipText || 'Copy to clipboard' }, copy.buttonText || 'Copy')),
-                isCopied && react_1.default.createElement(DoneIndicator, null, copy.toasterText || 'Copied!'))),
-            isReportButtonShown && react_1.default.createElement(Button, Object.assign({}, reportButtonProps), "Report"),
+                !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: translate(translationKeys.tooltipText, copy.tooltipText || 'Copy to clipboard') }, translate(translationKeys.buttonText, copy.buttonText || 'Copy'))),
+                isCopied && (react_1.default.createElement(DoneIndicator, null, translate(translationKeys.toasterText, copy.toasterText || 'Copied!'))))),
+            isReportButtonShown && (react_1.default.createElement(Button, Object.assign({}, reportButtonProps), translate(translationKeys.reportTitle, 'Report'))),
             isReportDialogShown && react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialogProps, { location: rawContent }))),
         react_1.default.createElement("pre", { className: langClassName },
             react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));

package/lib/components/Feedback/Comment.js

@@ -30,10 +30,18 @@ exports.Comment = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
+const hooks_1 = require("../../mocks/hooks");
 const Comment = ({ settings, onSubmit, onCancel }) => {
     const { label, submitText } = settings || {};
     const [text, setText] = React.useState('');
     const [submitValue, setSubmitValue] = React.useState('');
+    const { translate } = (0, hooks_1.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;
@@ -45,14 +53,14 @@ const Comment = ({ settings, onSubmit, onCancel }) => {
     };
     if (submitValue) {
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Comment" },
-        React.createElement(Label, null, label || 'Please share your feedback with us.'),
+        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Please share your feedback with us.')),
         React.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
         React.createElement(ButtonsContainer, null,
-            React.createElement(SendButton, { onClick: send }, "Send"),
-            onCancel && React.createElement(CancelButton, { onClick: onCancel }, "Cancel"))));
+            React.createElement(SendButton, { "data-translation-key": translationKeys.send, onClick: send }, translate(translationKeys.send, 'Send')),
+            onCancel && (React.createElement(CancelButton, { "data-translation-key": translationKeys.cancel, onClick: onCancel }, translate(translationKeys.cancel, 'Cancel'))))));
 };
 exports.Comment = Comment;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Rating.js

@@ -30,11 +30,17 @@ exports.Rating = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Feedback_1 = require("../../components/Feedback");
+const hooks_1 = require("../../mocks/hooks");
 const Rating = ({ settings, onSubmit }) => {
     const { label, max, submitText, comment: commentSettings, reasons: reasonsSettings, } = settings || {};
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        submitText: 'theme.feedback.settings.submitText',
+        label: 'theme.feedback.settings.label',
+    };
     if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
         const { label: reasonsLabel, items, multi } = reasonsSettings;
         const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
@@ -50,10 +56,10 @@ const Rating = ({ settings, onSubmit }) => {
             reasons,
         });
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Rating" },
-        React.createElement(Label, null, label || 'How helpful was this page?'),
+        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'How helpful was this page?')),
         React.createElement(Stars, { max: max || 5, onSubmit: setScore })));
 };
 exports.Rating = Rating;

package/lib/components/Feedback/Reasons.js

@@ -30,9 +30,16 @@ exports.Reasons = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Button_1 = require("../../components/Button/Button");
+const hooks_1 = require("../../mocks/hooks");
 const Reasons = ({ settings, onSubmit }) => {
     const { label, multi, buttonText, items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        label: 'theme.feedback.settings.reasons.label',
+        items: 'theme.feedback.settings.reasons.items',
+        send: 'theme.feedback.settings.reasons.send',
+    };
     if (!items.length) {
         return React.createElement(React.Fragment, null);
     }
@@ -46,12 +53,12 @@ const Reasons = ({ settings, onSubmit }) => {
     const submitForm = () => {
         onSubmit({ reasons: items.filter((_, index) => !!checkedState[index]) });
     };
-    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons" },
-        React.createElement(Label, null, label || 'Which statement describes your thoughts about this page?'),
+    return (React.createElement(Wrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": translationKeys.label },
+        React.createElement(Label, null, translate(translationKeys.label, label || 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
             React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { id: reason, onClick: () => handleOptionChange(idx) }, reason)))),
-        React.createElement(SendButton, { onClick: submitForm }, buttonText || 'Send')));
+            React.createElement("label", { "data-translation-key": `${translationKeys.items}.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`${translationKeys.items}.${idx + 1}`, reason))))),
+        React.createElement(SendButton, { "data-translation-key": translationKeys.send, onClick: submitForm }, translate(translationKeys.send, buttonText || 'Send'))));
 };
 exports.Reasons = Reasons;
 const Wrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -31,11 +31,19 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Feedback_1 = require("../../components/Feedback");
 const Thumbs_1 = require("../../components/Feedback/Thumbs");
+const hooks_1 = require("../../mocks/hooks");
 const Sentiment = ({ settings, onSubmit }) => {
     const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
     const [reasons, setReasons] = React.useState([]);
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        submitText: 'theme.feedback.settings.submitText',
+        label: 'theme.feedback.settings.label',
+        likeLabel: 'theme.feedback.settings.comment.likeLabel',
+        dislikeLabel: 'theme.feedback.settings.comment.dislikeLabel',
+    };
     if (score && (reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.enable) && !reasons.length) {
         const { label: reasonsLabel, items, multi } = reasonsSettings;
         const buttonText = (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) ? 'Next' : 'Send';
@@ -43,8 +51,8 @@ const Sentiment = ({ settings, onSubmit }) => {
     }
     if (score && (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.enable) && !comment) {
         const commentLabel = score === 1
-            ? commentSettings.likeLabel || 'What was most helpful?'
-            : commentSettings.dislikeLabel || 'What can we improve?';
+            ? translate(translationKeys.likeLabel, commentSettings.likeLabel || 'What was most helpful?')
+            : translate(translationKeys.dislikeLabel, commentSettings.dislikeLabel || 'What can we improve?');
         return (React.createElement(Feedback_1.Comment, { onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } }));
     }
     if (score) {
@@ -54,10 +62,10 @@ const Sentiment = ({ settings, onSubmit }) => {
             reasons,
         });
         return (React.createElement(Wrapper, null,
-            React.createElement(Label, null, submitText || 'Thank you for helping improve our documentation!')));
+            React.createElement(Label, { "data-translation-key": translationKeys.submitText }, translate(translationKeys.submitText, submitText || 'Thank you for helping improve our documentation!'))));
     }
     return (React.createElement(Wrapper, { "data-component-name": "Feedback/Sentiment" },
-        React.createElement(Label, null, label || 'Was this page helpful?'),
+        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, label || 'Was this page helpful?')),
         React.createElement(Vote, { onClick: () => setScore(1) },
             React.createElement(Thumbs_1.ThumbUp, { text: "Yes" })),
         React.createElement(Vote, { onClick: () => setScore(-1) },

package/lib/components/Feedback/Thumbs.js

@@ -29,29 +29,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ThumbDown = exports.ThumbUp = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const ThumbUp = ({ text }) => (React.createElement(Wrapper, { style: { alignItems: 'normal' } },
-    React.createElement(Icon, null,
-        React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
-            React.createElement("g", null,
+const hooks_1 = require("../../mocks/hooks");
+const ThumbUp = ({ text }) => {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        thumbUp: 'theme.feedback.sentiment.thumbUp',
+    };
+    return (React.createElement(Wrapper, { style: { alignItems: 'normal' } },
+        React.createElement(Icon, null,
+            React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
                 React.createElement("g", null,
                     React.createElement("g", null,
-                        React.createElement("path", { d: "M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918\n              c-4.284-0.051-25.651-1.51-25.651-25.6c0-4.71-3.814-8.533-8.533-8.533s-8.533,3.823-8.533,8.533\n              c0,33.749,27.913,42.667,42.667,42.667h119.467c14.182,0,25.6,16.631,25.6,30.396c0,4.437,0,17.946-26.53,20.855\n              c-4.506,0.495-7.834,4.42-7.586,8.951c0.239,4.523,3.985,8.064,8.516,8.064c14.114,0,25.6,11.486,25.6,25.6\n              s-11.486,25.6-25.6,25.6h-17.067c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c14.114,0,25.6,11.486,25.6,25.6\n              s-11.486,25.6-25.6,25.6h-25.6c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c8.934,0,17.067,8.132,17.067,17.067\n              c0,8.61-8.448,17.067-17.067,17.067h-128c-35.627,0-48.444-7.074-63.292-15.258c-12.553-6.921-26.786-14.763-54.963-18.79\n              c-4.668-0.674-8.994,2.577-9.66,7.236c-0.666,4.668,2.569,8.994,7.236,9.66c25.105,3.584,37.325,10.325,49.152,16.845\n              c15.497,8.542,31.505,17.374,71.526,17.374h128c17.869,0,34.133-16.273,34.133-34.133c0-6.229-1.775-12.134-4.83-17.229\n              c21.794-1.877,38.963-20.224,38.963-42.505c0-10.829-4.062-20.736-10.735-28.271C500.42,358.212,512,342.571,512,324.267\n              C512,310.699,505.634,298.59,495.736,290.773z" }),
-                        React.createElement("path", { d: "M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067\n              S67.388,443.733,76.8,443.733z" }),
-                        React.createElement("path", { d: "M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1\n              c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533\n              s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6\n              c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533\n              S174.481,247.467,179.2,247.467z" }),
-                        React.createElement("path", { d: "M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n              c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467\n              V469.333z" })))))),
-    React.createElement("span", null, text || 'Yes')));
+                        React.createElement("g", null,
+                            React.createElement("path", { d: "M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918\n              c-4.284-0.051-25.651-1.51-25.651-25.6c0-4.71-3.814-8.533-8.533-8.533s-8.533,3.823-8.533,8.533\n              c0,33.749,27.913,42.667,42.667,42.667h119.467c14.182,0,25.6,16.631,25.6,30.396c0,4.437,0,17.946-26.53,20.855\n              c-4.506,0.495-7.834,4.42-7.586,8.951c0.239,4.523,3.985,8.064,8.516,8.064c14.114,0,25.6,11.486,25.6,25.6\n              s-11.486,25.6-25.6,25.6h-17.067c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c14.114,0,25.6,11.486,25.6,25.6\n              s-11.486,25.6-25.6,25.6h-25.6c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c8.934,0,17.067,8.132,17.067,17.067\n              c0,8.61-8.448,17.067-17.067,17.067h-128c-35.627,0-48.444-7.074-63.292-15.258c-12.553-6.921-26.786-14.763-54.963-18.79\n              c-4.668-0.674-8.994,2.577-9.66,7.236c-0.666,4.668,2.569,8.994,7.236,9.66c25.105,3.584,37.325,10.325,49.152,16.845\n              c15.497,8.542,31.505,17.374,71.526,17.374h128c17.869,0,34.133-16.273,34.133-34.133c0-6.229-1.775-12.134-4.83-17.229\n              c21.794-1.877,38.963-20.224,38.963-42.505c0-10.829-4.062-20.736-10.735-28.271C500.42,358.212,512,342.571,512,324.267\n              C512,310.699,505.634,298.59,495.736,290.773z" }),
+                            React.createElement("path", { d: "M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067\n              S67.388,443.733,76.8,443.733z" }),
+                            React.createElement("path", { d: "M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1\n              c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533\n              s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6\n              c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533\n              S174.481,247.467,179.2,247.467z" }),
+                            React.createElement("path", { d: "M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n              c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467\n              V469.333z" })))))),
+        React.createElement("span", null, translate(translationKeys.thumbUp, text || 'Yes'))));
+};
 exports.ThumbUp = ThumbUp;
-const ThumbDown = ({ text }) => (React.createElement(Wrapper, { style: { alignItems: 'end' } },
-    React.createElement(Icon, null,
-        React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
-            React.createElement("g", null,
+const ThumbDown = ({ text }) => {
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        thumbDown: 'theme.feedback.sentiment.thumbDown',
+    };
+    return (React.createElement(Wrapper, { style: { alignItems: 'end' } },
+        React.createElement(Icon, null,
+            React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", x: "0px", y: "0px", viewBox: "0 0 512 512" },
                 React.createElement("g", null,
                     React.createElement("g", null,
-                        React.createElement("path", { d: "M76.8,247.467c9.412,0,17.067-7.654,17.067-17.067c0-9.412-7.654-17.067-17.067-17.067\n\t\t\t\tc-9.412,0-17.067,7.654-17.067,17.067C59.733,239.812,67.388,247.467,76.8,247.467z" }),
-                        React.createElement("path", { d: "M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996\n\t\t\t\tc6.673-7.535,10.735-17.434,10.735-28.271c0-22.281-17.169-40.627-38.963-42.505c3.055-5.094,4.83-10.999,4.83-17.229\n\t\t\t\tc0-17.86-16.265-34.133-34.133-34.133h-128c-40.021,0-56.03,8.832-71.526,17.374c-11.827,6.519-24.047,13.261-49.152,16.845\n\t\t\t\tc-4.668,0.666-7.902,4.992-7.236,9.66c0.666,4.659,4.949,7.885,9.66,7.236c28.177-4.028,42.411-11.87,54.963-18.79\n\t\t\t\tc14.848-8.183,27.665-15.258,63.292-15.258h128c8.619,0,17.067,8.456,17.067,17.067c0,8.934-8.132,17.067-17.067,17.067\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533h25.6c14.114,0,25.6,11.486,25.6,25.6s-11.486,25.6-25.6,25.6\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533c0,4.71,3.814,8.533,8.533,8.533h17.067c14.114,0,25.6,11.486,25.6,25.6\n\t\t\t\ts-11.486,25.6-25.6,25.6c-4.531,0-8.277,3.541-8.516,8.064c-0.247,4.531,3.081,8.457,7.586,8.951\n\t\t\t\tc26.53,2.91,26.53,16.418,26.53,20.847c0,13.773-11.418,30.404-25.6,30.404H349.867c-14.763,0-42.667,8.917-42.667,42.667\n\t\t\t\tc0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533c0-24.09,21.367-25.549,25.6-25.6h119.467\n\t\t\t\tc24.414,0,42.667-25.054,42.667-47.471C512,242.603,509.397,229.683,495.736,221.227z" }),
-                        React.createElement("path", { d: "M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667\n\t\t\t\tc-5.342,0-8.533-3.192-8.533-8.533c0-68.932,0-114.466-36.634-151.1c-16.87-16.87-48.947-45.167-74.3-45.167\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c13.611,0,37.461,15.394,62.234,40.166\n\t\t\t\tc31.633,31.633,31.633,72.055,31.633,139.034c0,14.831,10.769,25.6,25.6,25.6c39.074,0,59.733-20.651,59.733-59.733v-102.4\n\t\t\t\tC358.4,319.556,354.586,315.733,349.867,315.733z" }),
-                        React.createElement("path", { d: "M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n\t\t\t\tc4.719,0,8.533-3.823,8.533-8.533v-256C153.6,29.423,149.786,25.6,145.067,25.6z M136.533,281.6H17.067V42.667h119.467V281.6z" })))))),
-    React.createElement("span", null, text || 'No')));
+                        React.createElement("g", null,
+                            React.createElement("path", { d: "M76.8,247.467c9.412,0,17.067-7.654,17.067-17.067c0-9.412-7.654-17.067-17.067-17.067\n\t\t\t\tc-9.412,0-17.067,7.654-17.067,17.067C59.733,239.812,67.388,247.467,76.8,247.467z" }),
+                            React.createElement("path", { d: "M495.736,221.227C505.634,213.41,512,201.301,512,187.733c0-18.295-11.58-33.946-27.802-39.996\n\t\t\t\tc6.673-7.535,10.735-17.434,10.735-28.271c0-22.281-17.169-40.627-38.963-42.505c3.055-5.094,4.83-10.999,4.83-17.229\n\t\t\t\tc0-17.86-16.265-34.133-34.133-34.133h-128c-40.021,0-56.03,8.832-71.526,17.374c-11.827,6.519-24.047,13.261-49.152,16.845\n\t\t\t\tc-4.668,0.666-7.902,4.992-7.236,9.66c0.666,4.659,4.949,7.885,9.66,7.236c28.177-4.028,42.411-11.87,54.963-18.79\n\t\t\t\tc14.848-8.183,27.665-15.258,63.292-15.258h128c8.619,0,17.067,8.456,17.067,17.067c0,8.934-8.132,17.067-17.067,17.067\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533h25.6c14.114,0,25.6,11.486,25.6,25.6s-11.486,25.6-25.6,25.6\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533c0,4.71,3.814,8.533,8.533,8.533h17.067c14.114,0,25.6,11.486,25.6,25.6\n\t\t\t\ts-11.486,25.6-25.6,25.6c-4.531,0-8.277,3.541-8.516,8.064c-0.247,4.531,3.081,8.457,7.586,8.951\n\t\t\t\tc26.53,2.91,26.53,16.418,26.53,20.847c0,13.773-11.418,30.404-25.6,30.404H349.867c-14.763,0-42.667,8.917-42.667,42.667\n\t\t\t\tc0,4.71,3.814,8.533,8.533,8.533s8.533-3.823,8.533-8.533c0-24.09,21.367-25.549,25.6-25.6h119.467\n\t\t\t\tc24.414,0,42.667-25.054,42.667-47.471C512,242.603,509.397,229.683,495.736,221.227z" }),
+                            React.createElement("path", { d: "M349.867,315.733c-4.719,0-8.533,3.823-8.533,8.533v102.4c0,29.508-13.158,42.667-42.667,42.667\n\t\t\t\tc-5.342,0-8.533-3.192-8.533-8.533c0-68.932,0-114.466-36.634-151.1c-16.87-16.87-48.947-45.167-74.3-45.167\n\t\t\t\tc-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c13.611,0,37.461,15.394,62.234,40.166\n\t\t\t\tc31.633,31.633,31.633,72.055,31.633,139.034c0,14.831,10.769,25.6,25.6,25.6c39.074,0,59.733-20.651,59.733-59.733v-102.4\n\t\t\t\tC358.4,319.556,354.586,315.733,349.867,315.733z" }),
+                            React.createElement("path", { d: "M145.067,25.6H8.533C3.814,25.6,0,29.423,0,34.133v256c0,4.71,3.814,8.533,8.533,8.533h136.533\n\t\t\t\tc4.719,0,8.533-3.823,8.533-8.533v-256C153.6,29.423,149.786,25.6,145.067,25.6z M136.533,281.6H17.067V42.667h119.467V281.6z" })))))),
+        React.createElement("span", null, translate(translationKeys.thumbDown, text || 'No'))));
+};
 exports.ThumbDown = ThumbDown;
 const Wrapper = styled_components_1.default.div `
   font-family: var(--font-family-base);

package/lib/components/Feedback/useReportDialog.js

@@ -2,9 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReportDialog = void 0;
 const react_1 = require("react");
+const hooks_1 = require("../../mocks/hooks");
 function useReportDialog(reportSettings) {
     const [isReportDialogShown, setIsReportDialogShown] = (0, react_1.useState)(false);
     const isReportButtonShown = reportSettings.hide === false; // TODO: report temporary disabled by default
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        tooltipText: 'theme.codeSnippet.report.tooltipText',
+        label: 'theme.codeSnippet.report.label',
+    };
     const showReportDialog = () => {
         setIsReportDialogShown(true);
     };
@@ -13,11 +19,11 @@ function useReportDialog(reportSettings) {
     };
     const reportButtonProps = {
         onClick: showReportDialog,
-        title: reportSettings.tooltipText || 'Report a problem',
+        title: translate(translationKeys.tooltipText, reportSettings.tooltipText || 'Report a problem'),
     };
     const reportDialogProps = {
         settings: {
-            label: reportSettings.label || 'What is wrong with a code?',
+            label: translate(translationKeys.label, reportSettings.label || 'What is wrong with this code?'),
         },
         onSubmit: hideReportDialog,
         onCancel: hideReportDialog,

package/lib/components/Filter/Filter.js

@@ -7,24 +7,31 @@ exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Checkbox_1 = require("../../ui/Checkbox");
+const hooks_1 = require("../../mocks/hooks");
 function Filter({ filter }) {
     var _a;
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        selectAll: 'theme.catalog.filters.select.all',
+    };
     if (!filter.parentUsed)
         return null;
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null, filter.title),
+        react_1.default.createElement(FilterTitle, null, translate(filter.titleTranslationKey, filter.title)),
         filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
-            react_1.default.createElement("option", { key: "none", value: "" }, "All"),
-            filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },
-                value.value,
-                " (",
-                value.count,
-                ")"))))) : (filter.filteredOptions.map((value) => {
+            react_1.default.createElement("option", { key: "none", value: "", "data-translation-key": translationKeys.selectAll }, translate(translationKeys.selectAll, 'All')),
+            filter.filteredOptions.map((value) => {
+                return (react_1.default.createElement("option", { key: value.value, value: value.value },
+                    translate(value.value),
+                    " (",
+                    value.count,
+                    ")"));
+            }))) : (filter.filteredOptions.map((value) => {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
             return (react_1.default.createElement(FilterValue, { key: id },
                 react_1.default.createElement(Checkbox_1.Checkbox, { type: "checkbox", id: id, checked: filter.selectedOptions.has(value.value), onChange: () => filter.toggleOption(value.value) }),
                 react_1.default.createElement("label", { htmlFor: id },
-                    value.value,
+                    translate(value.value),
                     " (",
                     value.count,
                     ")")));

package/lib/components/Footer/FooterColumn.js

@@ -7,15 +7,17 @@ exports.FooterColumn = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
+const hooks_1 = require("../../mocks/hooks");
 function FooterColumn({ column }) {
     var _a;
+    const { translate } = (0, hooks_1.useTranslate)();
     return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn" },
-        react_1.default.createElement(FooterColumnTitle, null, column.label), (_a = column === null || column === void 0 ? void 0 : column.items) === null || _a === void 0 ? void 0 :
+        react_1.default.createElement(FooterColumnTitle, null, translate(column.labelTranslationKey, column.label)), (_a = column === null || column === void 0 ? void 0 : column.items) === null || _a === void 0 ? void 0 :
         _a.map((columnItem, columnItemIndex) => {
             if (columnItem.type === 'error') {
                 return null;
             }
-            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, columnItem.label)) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label }, columnItem.label));
+            return columnItem.type === 'separator' ? (react_1.default.createElement(FooterSeparator, { key: columnItem.label + '_' + columnItemIndex }, translate(columnItem.labelTranslationKey, columnItem.label))) : (react_1.default.createElement(FooterLink, { key: columnItemIndex, to: columnItem.link, external: columnItem.external, target: columnItem.target, "data-cy": columnItem.label }, translate(columnItem.labelTranslationKey, columnItem.label)));
         })));
 }
 exports.FooterColumn = FooterColumn;

package/lib/components/Footer/FooterCopyright.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import type { NavGroup } from '../../types/portal';
 interface FooterCopyrightProps {
-    copyrightText: NavGroup;
+    copyrightText: string;
 }
 export declare function FooterCopyright({ copyrightText }: FooterCopyrightProps): JSX.Element | null;
 export {};

package/lib/components/Footer/FooterCopyright.js

@@ -6,8 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FooterCopyright = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../mocks/hooks");
 function FooterCopyright({ copyrightText = '' }) {
-    return copyrightText ? (react_1.default.createElement(Wrapper, { "data-component-name": "Footer/FooterCopyright" }, copyrightText)) : null;
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        copyrightText: 'theme.footer.copyrightText',
+    };
+    return copyrightText ? (react_1.default.createElement(Wrapper, { "data-component-name": "Footer/FooterCopyright", "data-translation-key": translationKeys.copyrightText }, translate(translationKeys.copyrightText, copyrightText))) : null;
 }
 exports.FooterCopyright = FooterCopyright;
 const Wrapper = styled_components_1.default.section `