@redocly/theme 0.11.4 → 0.12.0

package/lib/icons/index.d.ts

@@ -4,3 +4,4 @@ export * from '../icons/ArrowIcon';
 export * from '../icons/ColorModeIcon';
 export * from '../icons/AnchorIcon';
 export * from '../icons/ExternalIcon';
+export * from '../icons/SpinnerIcon';

package/lib/icons/index.js

@@ -20,4 +20,5 @@ __exportStar(require("../icons/ArrowIcon"), exports);
 __exportStar(require("../icons/ColorModeIcon"), exports);
 __exportStar(require("../icons/AnchorIcon"), exports);
 __exportStar(require("../icons/ExternalIcon"), exports);
+__exportStar(require("../icons/SpinnerIcon"), exports);
 //# sourceMappingURL=index.js.map

package/lib/index.d.ts

@@ -7,3 +7,4 @@ export * from './globalStyle';
 export * from './types/config';
 export * from './config';
 export * from './ui';
+export * from './I18n';

package/lib/index.js

@@ -23,4 +23,5 @@ __exportStar(require("./globalStyle"), exports);
 __exportStar(require("./types/config"), exports);
 __exportStar(require("./config"), exports);
 __exportStar(require("./ui"), exports);
+__exportStar(require("./I18n"), exports);
 //# sourceMappingURL=index.js.map

package/lib/layouts/Forbidden.js

@@ -7,11 +7,17 @@ exports.Forbidden = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const _theme_1 = require("../index.js");
+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, null, "Access forbidden"),
-        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/" }, "Open Homepage")));
+        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'))));
 }
 exports.Forbidden = Forbidden;
 const Wrapper = styled_components_1.default.div `

package/lib/layouts/NotFound.js

@@ -7,11 +7,17 @@ exports.NotFound = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 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, null, "It looks like you're lost"),
-        react_1.default.createElement(HomeButton, { color: "primary", size: "large", to: "/" }, "Open Homepage")));
+        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'))));
 }
 exports.NotFound = NotFound;
 const Wrapper = styled_components_1.default.div `

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

@@ -1,5 +1,5 @@
 import type { ThemeUIConfig } from '../../config';
-import type { ResolvedNavItem } from '../../types/portal';
+import type { ResolvedNavItem, TFunction } from '../../types/portal';
 import type { CatalogConfig, FilteredCatalog } from '../../types/portal/src/shared/types/catalog';
 interface PageLink {
     label: string;
@@ -13,4 +13,18 @@ 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(): {
+    translate: TFunction;
+};
+export declare function useI18n(): {
+    changeLanguage: (...args: any) => string;
+};
 export { useGlobalData } from '../useGlobalData';
+export declare function useI18nConfig(): {
+    currentLocale: string;
+    defaultLocale: string;
+    locales: {
+        code: string;
+        name: string;
+    }[];
+};

package/lib/mocks/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGlobalData = exports.useCatalog = exports.usePageSharedData = exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
+exports.useI18nConfig = exports.useGlobalData = exports.useI18n = exports.useTranslate = exports.useCatalog = exports.usePageSharedData = exports.useSidebarSiblingsData = exports.useThemeConfig = void 0;
 function useThemeConfig() {
     return {
         search: {
@@ -69,6 +69,24 @@ 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 };
+}
+exports.useTranslate = useTranslate;
+function useI18n() {
+    const changeLanguage = (...args) => args.value;
+    return { changeLanguage };
+}
+exports.useI18n = useI18n;
 var useGlobalData_1 = require("../useGlobalData");
 Object.defineProperty(exports, "useGlobalData", { enumerable: true, get: function () { return useGlobalData_1.useGlobalData; } });
+function useI18nConfig() {
+    return {
+        currentLocale: 'en',
+        defaultLocale: 'en',
+        locales: [{ code: 'en', name: 'en' }],
+    };
+}
+exports.useI18nConfig = useI18nConfig;
 //# sourceMappingURL=index.js.map

package/lib/mocks/search.d.ts

@@ -18,5 +18,6 @@ export declare function useFuseSearch(): {
     query: string;
     setQuery: (val: string) => void;
     items: SearchDocument[];
+    isLoading: boolean;
 };
 export {};

package/lib/mocks/search.js

@@ -7,6 +7,7 @@ function useFuseSearch() {
     return {
         query,
         setQuery,
+        isLoading: false,
         items: [
             {
                 id: '1',

package/lib/mocks/utils.d.ts

@@ -1,2 +1,7 @@
 export declare function withPathPrefix(link: string): string;
+export declare function withoutPathPrefix(link: string): string;
 export declare function timeAgo(lastModified: string | Date): string;
+export declare function getPathnameForLocale(pathname: string, _defaultLocale: string, _newLocale: string, _allLocales: {
+    code: string;
+    name: string;
+}[]): string;

package/lib/mocks/utils.js

@@ -1,14 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timeAgo = exports.withPathPrefix = void 0;
+exports.getPathnameForLocale = exports.timeAgo = exports.withoutPathPrefix = exports.withPathPrefix = void 0;
 function withPathPrefix(link) {
     return link;
 }
 exports.withPathPrefix = withPathPrefix;
+function withoutPathPrefix(link) {
+    return link;
+}
+exports.withoutPathPrefix = withoutPathPrefix;
 function timeAgo(lastModified) {
     // should return format(lastModified) in portal
     const d = new Date(lastModified);
     return `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;
 }
 exports.timeAgo = timeAgo;
+function getPathnameForLocale(pathname, _defaultLocale, _newLocale, _allLocales) {
+    return `${pathname}`;
+}
+exports.getPathnameForLocale = getPathnameForLocale;
 //# sourceMappingURL=utils.js.map

package/lib/types/portal/index.d.ts

@@ -1,2 +1,3 @@
 export * from './src/shared/types/nav';
+export * from './src/shared/types/i18n';
 export type { MdHeading } from './src/shared/types/markdown';

package/lib/types/portal/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./src/shared/types/nav"), exports);
+__exportStar(require("./src/shared/types/i18n"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -11,9 +11,11 @@ export type FilteredCatalog = {
 export type Filter = {
     type?: 'select' | 'checkboxes';
     title: string;
+    titleTranslationKey?: string;
     property: string;
     parentFilter?: string;
     missingCategoryName?: string;
+    missingCategoryNameTranslationKey?: string;
     options?: string[];
 };
 export type CatalogConfig = {
@@ -24,7 +26,9 @@ export type CatalogConfig = {
     requiredPermission?: string;
     separateVersions?: boolean;
     title?: string;
+    titleTranslationKey?: string;
     description?: string;
+    descriptionTranslationKey?: string;
 };
 export type ResolvedFilter = Omit<Filter, 'options'> & {
     options: {

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

@@ -5,6 +5,7 @@ export type ResolvedNavLinkItem = {
     metadata?: Record<string, unknown>;
     link: string;
     label: string;
+    labelTranslationKey?: string;
     items?: ResolvedNavItem[];
     sidebar?: ResolvedNavItem[];
     external?: boolean;
@@ -23,6 +24,7 @@ export type ResolvedNavGroupItem = {
     metadata?: Record<string, unknown>;
     link?: string;
     label?: string;
+    labelTranslationKey?: string;
     items?: ResolvedNavItem[];
     sidebar?: ResolvedNavItem[];
     external?: boolean;
@@ -42,6 +44,7 @@ export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     type: 'separator';
     metadata?: Record<string, unknown>;
     label?: string;
+    labelTranslationKey?: string;
     routeSlug?: never;
     version?: string;
     isDefault?: boolean;
@@ -59,6 +62,7 @@ export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     metadata?: Record<string, unknown>;
     routeSlug?: never;
     label: string;
+    labelTranslationKey?: string;
     link?: undefined;
     items?: ResolvedNavItem[];
     sidebar?: ResolvedNavItem[];
@@ -101,10 +105,13 @@ export type NavItem = {
     page?: string;
     directory?: string;
     group?: string;
+    groupTranslationKey?: string;
     label?: string;
+    labelTranslationKey?: string;
     href?: never;
     items?: NavItem[];
     separator?: string;
+    separatorTranslationKey?: string;
     separatorLine?: boolean;
     version?: string;
     menuStyle?: MenuStyle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.11.4",
+  "version": "0.12.0",
   "description": "Shared UI components lib",
   "keywords": [],
   "author": "team@redocly.com",

package/src/I18n/LanguagePicker.tsx

@@ -0,0 +1,113 @@
+import React, { useRef, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { getPathnameForLocale, withPathPrefix } from '@portal/utils';
+import { usePreloadHistory } from '@portal/usePreloadHistory';
+import { useI18nConfig } from '@portal/hooks';
+
+import { useOutsideClick } from '../hooks';
+
+export const LanguagePicker = (props: { onChangeLanguage: (newLang: string) => void }) => {
+  const { currentLocale, locales, defaultLocale } = useI18nConfig();
+
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  useOutsideClick(dropdownRef, () => setIsOpen(false));
+
+  const location = useLocation();
+  const history = usePreloadHistory();
+
+  if (locales.length < 2) {
+    return null;
+  }
+
+  return (
+    <Dropdown
+      data-component-name="I18n/LanguagePicker"
+      ref={dropdownRef}
+      isOpen={isOpen}
+      onClick={() => setIsOpen(!isOpen)}
+      onBlur={() => setIsOpen(false)}
+    >
+      <DropdownValue>{currentLocale.toUpperCase()}</DropdownValue>
+      <DropdownMenu>
+        {locales.map((locale) => (
+          <MenuItem
+            onClick={() => {
+              const newLangPathname = withPathPrefix(
+                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 || ''}
+          </MenuItem>
+        ))}
+      </DropdownMenu>
+    </Dropdown>
+  );
+};
+
+const Dropdown = styled.div<{ isOpen: boolean }>`
+  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.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.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.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);
+  }
+`;

package/src/I18n/index.ts

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

package/src/components/Cards/Card.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Link } from '@portal/Link';
 import { H3 } from '@theme/components/Typography/H3';
 import type { ResolvedNavItem } from '@theme/types/portal';
+import { useTranslate } from '@portal/hooks';
 
 export interface CardProps {
   title?: string;
@@ -12,6 +13,7 @@ export interface CardProps {
 }
 
 export function Card(props: CardProps): JSX.Element {
+  const { translate } = useTranslate();
   return (
     <CardWrapper data-component-name="Cards/Card">
       {props.icon && <img src={props?.icon} alt={props?.title} />}
@@ -20,7 +22,9 @@ export function Card(props: CardProps): JSX.Element {
         <CardLinksList>
           {props.links.items.map((item) => (
             <li key={item.label}>
-              <Link to={item.link as string}>{item.label}</Link>
+              <Link to={item.link as string}>
+                {translate(item.labelTranslationKey, item.label)}
+              </Link>
             </li>
           ))}
         </CardLinksList>

package/src/components/Catalog/Catalog.tsx

@@ -9,7 +9,7 @@ import { Filter } from '@theme/components/Filter';
 import { H2 } from '@theme/components/Typography/H2';
 import { H3 } from '@theme/components/Typography/H3';
 import { CatalogCard } from '@theme/components/Catalog/CatalogCard';
-import { usePageSharedData } from '@portal/hooks/index';
+import { usePageSharedData, useTranslate } from '@portal/hooks/index';
 
 import { useCatalog } from './useCatalog';
 
@@ -26,13 +26,18 @@ export default function Catalog(props: {
   const { filterTerm, setFilterTerm, groups, filters } = useCatalog(items, catalogConfig);
 
   const [isFilterPanelFocused, setIsFilterPanelFocused] = React.useState(false);
+  const { translate } = useTranslate();
+  const translationKeys = {
+    placeholder: 'theme.catalog.filters.placeholder',
+    applyFilter: 'theme.catalog.filters.apply',
+  };
 
   return (
     <HighlightContext.Provider value={[filterTerm]}>
       <CatalogPageWrapper>
         <CatalogPageSidebar isActiveInMobileMode={isFilterPanelFocused}>
           <StyledInput
-            placeholder="Filter..."
+            placeholder={translate(translationKeys.placeholder, 'Filter...')}
             value={filterTerm}
             onFocus={() => setIsFilterPanelFocused(true)}
             onChange={(e) => setFilterTerm(e.target.value)}
@@ -41,15 +46,27 @@ export default function Catalog(props: {
             <Filter filter={filter} key={filter.property + '-' + idx} />
           ))}
           <MobileStickyApplyFilters>
-            <Button color="secondary" onClick={() => setIsFilterPanelFocused(false)}>
-              Apply filters
+            <Button
+              data-translation-key={translationKeys.applyFilter}
+              color="secondary"
+              onClick={() => setIsFilterPanelFocused(false)}
+            >
+              {translate(translationKeys.applyFilter, 'Apply filters')}
             </Button>
           </MobileStickyApplyFilters>
         </CatalogPageSidebar>
         <CatalogPageContent>
-          {catalogConfig.title ? <CatalogTitle> {catalogConfig.title} </CatalogTitle> : null}
+          {catalogConfig.title ? (
+            <CatalogTitle>
+              {' '}
+              {translate(catalogConfig.titleTranslationKey, catalogConfig.title)}{' '}
+            </CatalogTitle>
+          ) : null}
           {catalogConfig.description ? (
-            <CatalogDescription> {catalogConfig.description} </CatalogDescription>
+            <CatalogDescription>
+              {' '}
+              {translate(catalogConfig.descriptionTranslationKey, catalogConfig.description)}{' '}
+            </CatalogDescription>
           ) : null}
           {groups.map((group) => (
             <React.Fragment key={group.title}>

package/src/components/Catalog/CatalogCard.tsx

@@ -5,8 +5,13 @@ import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
 import { Link } from '@portal/Link';
 import { Highlight } from '@theme/ui/Highlight';
 import { Tags } from '@theme/components/Tags';
+import { useTranslate } from '@portal/hooks';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    footer: 'theme.catalog.card.footer',
+  };
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard>
@@ -19,7 +24,9 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
         </CardDescription>
         {item.tags ? <Tags tags={item.tags as string[]} /> : null}
         <hr />
-        <CardFooter>View documentation</CardFooter>
+        <CardFooter data-translation-key={translationKeys.footer}>
+          {translate(translationKeys.footer, 'View documentation')}
+        </CardFooter>
       </StyledCard>
     </Link>
   );

package/src/components/Catalog/useCatalog.ts

@@ -254,9 +254,11 @@ function collectFilterOptions(
     const options = Object.entries(usedOptions)
       .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 { ...filter, options };
   });

package/src/components/CodeSample/CodeSample.tsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { ClipboardService } from '@theme/utils/ClipboardService';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { ReportDialog, useReportDialog } from '@theme/components/Feedback';
+import { useTranslate } from '@portal/hooks';
 
 export type CodeSampleProps = {
   language: string;
@@ -27,6 +28,14 @@ export function CodeSample({
   const { isReportDialogShown, isReportButtonShown, reportButtonProps, reportDialogProps } =
     useReportDialog(report);
 
+  const { translate } = 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: string) => {
     ClipboardService.copyCustom(code);
     setIsCopied(true);
@@ -46,16 +55,25 @@ export function CodeSample({
             {!isCopied && (
               <Button
                 onClick={() => copyCode(rawContent)}
-                title={copy.tooltipText || 'Copy to clipboard'}
+                title={translate(
+                  translationKeys.tooltipText,
+                  copy.tooltipText || 'Copy to clipboard',
+                )}
               >
-                {copy.buttonText || 'Copy'}
+                {translate(translationKeys.buttonText, copy.buttonText || 'Copy')}
               </Button>
             )}
-            {isCopied && <DoneIndicator>{copy.toasterText || 'Copied!'}</DoneIndicator>}
+            {isCopied && (
+              <DoneIndicator>
+                {translate(translationKeys.toasterText, copy.toasterText || 'Copied!')}
+              </DoneIndicator>
+            )}
           </>
         )}
 
-        {isReportButtonShown && <Button {...reportButtonProps}>Report</Button>}
+        {isReportButtonShown && (
+          <Button {...reportButtonProps}>{translate(translationKeys.reportTitle, 'Report')}</Button>
+        )}
 
         {isReportDialogShown && <ReportDialog {...reportDialogProps} location={rawContent} />}
       </CodeSampleButtonContainer>

package/src/components/Feedback/Comment.tsx

@@ -3,11 +3,19 @@ import styled from 'styled-components';
 
 import { Button } from '@theme/components/Button/Button';
 import type { CommentProps } from '@theme/components/Feedback';
+import { useTranslate } from '@portal/hooks';
 
 export const Comment = ({ settings, onSubmit, onCancel }: CommentProps): JSX.Element => {
   const { label, submitText } = settings || {};
   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;
@@ -21,18 +29,31 @@ export const Comment = ({ settings, onSubmit, onCancel }: CommentProps): JSX.Ele
   if (submitValue) {
     return (
       <Wrapper>
-        <Label>{submitText || 'Thank you for helping improve our documentation!'}</Label>
+        <Label data-translation-key={translationKeys.submitText}>
+          {translate(
+            translationKeys.submitText,
+            submitText || 'Thank you for helping improve our documentation!',
+          )}
+        </Label>
       </Wrapper>
     );
   }
 
   return (
     <Wrapper data-component-name="Feedback/Comment">
-      <Label>{label || 'Please share your feedback with us.'}</Label>
+      <Label data-translation-key={translationKeys.label}>
+        {translate(translationKeys.label, label || 'Please share your feedback with us.')}
+      </Label>
       <TextArea rows={3} onChange={handleTextAreaChange} />
       <ButtonsContainer>
-        <SendButton onClick={send}>Send</SendButton>
-        {onCancel && <CancelButton onClick={onCancel}>Cancel</CancelButton>}
+        <SendButton data-translation-key={translationKeys.send} onClick={send}>
+          {translate(translationKeys.send, 'Send')}
+        </SendButton>
+        {onCancel && (
+          <CancelButton data-translation-key={translationKeys.cancel} onClick={onCancel}>
+            {translate(translationKeys.cancel, 'Cancel')}
+          </CancelButton>
+        )}
       </ButtonsContainer>
     </Wrapper>
   );