@redocly/theme 0.11.4 → 0.12.0

package/src/components/Navbar/Navbar.tsx

@@ -13,6 +13,9 @@ import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { Search } from '@theme/components/Search/Search';
 import { AuthUserProfile } from '@theme/components/Profile/AuthUserProfile';
 import type { LogoConfig, ResolvedConfigLinks } from '@theme/types/portal';
+import { useI18n } from '@portal/hooks';
+
+import { LanguagePicker } from '../../I18n/LanguagePicker';
 
 const EmptyNavbarHack = createGlobalStyle`
   #redocly_root {
@@ -23,6 +26,7 @@ const EmptyNavbarHack = createGlobalStyle`
 export function Navbar(): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
   const themeConfig = useThemeConfig();
+  const { changeLanguage } = useI18n();
 
   const menu = themeConfig.navbar?.items;
   const logo = themeConfig.logo;
@@ -56,6 +60,7 @@ export function Navbar(): JSX.Element | null {
         menu: menu as ResolvedConfigLinks,
         logo: logo as Pick<LogoConfig, 'image' | 'link' | 'altText'>,
         hideUserProfile,
+        changeLanguage,
       }}
     />
   );
@@ -69,6 +74,7 @@ interface NavbarPresentationalProps extends NavbarLogoProps {
   hideSearch: boolean;
   menu: ResolvedConfigLinks;
   hideUserProfile: boolean | string | undefined;
+  changeLanguage: (value: string) => void;
 }
 
 export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Element | null {
@@ -81,6 +87,7 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
     logo,
     menu,
     hideUserProfile,
+    changeLanguage,
   } = props;
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">
@@ -97,6 +104,7 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
         <NavbarLogo logo={logo} />
         <NavbarMenu menuItems={menu as ResolvedConfigLinks} />
         {hideSearch ? null : <Search />}
+        <LanguagePicker onChangeLanguage={changeLanguage} />
         {hideUserProfile ? null : <AuthUserProfile />}
         <ColorModeSwitcher />
       </NavbarRow>

package/src/components/Navbar/NavbarDropdown.tsx

@@ -3,17 +3,19 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
+import { useTranslate } from '@portal/hooks';
 
 interface NavbarDropdownProps {
   items: ResolvedNavLinkItem[];
 }
 
 export function NavbarDropdown({ items }: NavbarDropdownProps): JSX.Element {
+  const { translate } = useTranslate();
   return (
     <DropdownWrapper data-component-name="Navbar/NavbarDropdown">
       {items.map((item, index) => (
         <div key={`${item.label}_${index}`}>
-          <Link to={item.link}>{item.label}</Link>
+          <Link to={item.link}>{translate(item.labelTranslationKey, item.label)}</Link>
         </div>
       ))}
     </DropdownWrapper>

package/src/components/Navbar/NavbarItem.tsx

@@ -3,12 +3,14 @@ import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
 import { Link } from '@portal/Link';
+import { getPathnameForLocale } from '@portal/utils';
 import { NavbarDropdown, DropdownWrapper } from '@theme/components/Navbar/NavbarDropdown';
 import type {
   ResolvedNavItem,
   ResolvedNavLinkItem,
   ResolvedNavGroupItem,
 } from '@theme/types/portal';
+import { useI18nConfig, useTranslate } from '@portal/hooks';
 import { withPathPrefix } from '@theme/utils';
 
 export interface NavbarItemProps {
@@ -18,11 +20,15 @@ export interface NavbarItemProps {
 
 export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null {
   const { pathname } = useLocation();
+  const { translate } = useTranslate();
+  const { defaultLocale, currentLocale, locales } = useI18nConfig();
 
   if ((navItem as ResolvedNavLinkItem).link) {
     const item = navItem as ResolvedNavLinkItem;
 
-    const isActive = pathname === withPathPrefix(item.link);
+    const isActive =
+      pathname ===
+      withPathPrefix(getPathnameForLocale(item.link, defaultLocale, currentLocale, locales));
     return (
       <NavbarMenuItem
         active={isActive}
@@ -30,7 +36,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         className={className}
       >
         <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
-          <NavbarLabel>{item.label}</NavbarLabel>
+          <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
         </NavbarLink>
       </NavbarMenuItem>
     );
@@ -45,7 +51,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           data-component-name="Navbar/NavbarItem"
           className={className}
         >
-          <NavbarLabel>{item.label}</NavbarLabel>
+          <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
         </NavbarMenuItem>
         <NavbarDropdown items={item.items as ResolvedNavLinkItem[]} />
       </NavbarMenuItemWithDropdownWrapper>

package/src/components/PageNavigation/NextButton.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Button } from '@theme/components/Button';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+import { useTranslate } from '@portal/hooks';
 
 interface NextPageType {
   nextPage?: ResolvedNavItemWithLink | null;
@@ -11,15 +12,19 @@ interface NextPageType {
 
 export function NextButton({ nextPage }: NextPageType): JSX.Element {
   const { navigation } = useThemeConfig();
+  const { translate } = useTranslate();
 
   if (!nextPage || navigation?.nextButton?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const text = (navigation?.nextButton?.text || 'Next to {label}').replace(
+  const nextPageText = nextPage.label || nextPage.routeSlug || '';
+  const defaultText = (navigation?.nextButton?.text || 'Next to {label}').replace(
     '{label}',
-    nextPage.label || nextPage.routeSlug || '',
+    nextPageText,
   );
+  const translationKey = 'theme.page.nextButton';
+  const text = translate(translationKey, { label: nextPageText, defaultValue: defaultText });
 
   return (
     <StyledButton
@@ -27,6 +32,7 @@ export function NextButton({ nextPage }: NextPageType): JSX.Element {
       size="large"
       to={nextPage.link}
       data-component-name="PageNavigation/NextPageLink"
+      data-translation-key={translationKey}
     >
       {text}
     </StyledButton>

package/src/components/PageNavigation/PreviousButton.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Button } from '@theme/components/Button';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+import { useTranslate } from '@portal/hooks';
 
 interface PreviousPageType {
   prevPage?: ResolvedNavItemWithLink | null;
@@ -11,15 +12,22 @@ interface PreviousPageType {
 
 export function PreviousButton({ prevPage }: PreviousPageType): JSX.Element {
   const { navigation } = useThemeConfig();
+  const { translate } = useTranslate();
 
   if (!prevPage || navigation?.previousButton?.hide) {
     return <div>&nbsp;</div>;
   }
 
-  const text = (navigation?.previousButton?.text || 'Back to {label}').replace(
+  const prevPageText = prevPage.label || prevPage.routeSlug || '';
+  const defaultText = (navigation?.previousButton?.text || 'Back to {label}').replace(
     '{label}',
-    prevPage.label || prevPage.routeSlug || '',
+    prevPageText,
   );
+  const translationKey = 'theme.page.previousButton';
+  const text = translate(translationKey, {
+    label: prevPageText,
+    defaultValue: defaultText,
+  });
 
   return (
     <StyledButton
@@ -27,6 +35,7 @@ export function PreviousButton({ prevPage }: PreviousPageType): JSX.Element {
       size="large"
       to={prevPage.link}
       data-component-name="PageNavigation/PreviousPageLink"
+      data-translation-key={translationKey}
     >
       {text}
     </StyledButton>

package/src/components/Profile/LoginLink.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
 
 export interface LoginLinkProps {
   href: string;
@@ -9,7 +10,16 @@ export interface LoginLinkProps {
 
 export function LoginLink({ href }: LoginLinkProps): JSX.Element {
   const { userProfile } = useThemeConfig();
-  return <StyledLink href={href}>{userProfile?.loginLabel || 'Login'}</StyledLink>;
+  const { translate } = useTranslate();
+  const translationKeys = {
+    login: 'theme.profile.login',
+  };
+
+  return (
+    <StyledLink href={href} data-translation-key={translationKeys.login}>
+      {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+    </StyledLink>
+  );
 }
 
 const StyledLink = styled.a.attrs(() => ({

package/src/components/Profile/UserProfileMenu.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 import { Link } from '@portal/Link';
-import { useThemeConfig } from '@theme/hooks';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
 
 interface UserProfileMenuProps {
   setIsOpened: (isOpen: boolean) => void;
@@ -16,13 +17,20 @@ export function UserProfileMenu({
   handleLogout,
 }: UserProfileMenuProps): JSX.Element {
   const { userProfile } = useThemeConfig();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    myApps: 'theme.profile.myApps',
+    logout: 'theme.profile.logout',
+  };
 
   return (
     <>
       <StyledUl onClick={() => setIsOpened(false)}>
         {hasDeveloperOnboarding ? (
           <Link to="/apps">
-            <StyledLi>My Apps</StyledLi>
+            <StyledLi data-translation-key={translationKeys.myApps}>
+              {translate(translationKeys.myApps, 'My Apps')}
+            </StyledLi>
           </Link>
         ) : null}
 
@@ -32,7 +40,9 @@ export function UserProfileMenu({
           </Link>
         ))}
 
-        <StyledLi onClick={() => handleLogout()}>{userProfile?.logoutLabel || 'Log out'}</StyledLi>
+        <StyledLi onClick={() => handleLogout()} data-translation-key={translationKeys.logout}>
+          {translate(translationKeys.logout, userProfile?.logoutLabel || 'Log out')}
+        </StyledLi>
       </StyledUl>
     </>
   );

package/src/components/Search/Autocomplete.tsx

@@ -9,17 +9,21 @@ import { FormInput } from '@theme/components/Search/Input';
 import { Popover } from '@theme/components/Search/Popover';
 import { ShortcutKey } from '@theme/components/Search/ShortcutKey';
 import type { ActiveItem } from '@theme/types/portal/src/shared/types/activeItem';
+import { useTranslate } from '@portal/hooks';
+import { SearchIcon } from '@theme/components/Search/SearchIcon';
+import { SpinnerIcon } from '@theme/icons/SpinnerIcon';
+import { ClearIcon } from '@theme/components/Search/ClearIcon';
 
 interface AutocompleteProps<T> {
   placeholder?: string;
   value: string;
-  items: T[];
+  items: T[] | null;
   renderItem(item: ActiveItem<T>): ReactNode;
   change(value: string): void;
   select(item: T): void;
-  children?(isOpen: boolean, close: () => void): ReactNode;
   inputRef?: React.RefObject<HTMLInputElement>;
   keyShortcuts?: string[];
+  isLoading: boolean;
 }
 
 export function Autocomplete<T>({
@@ -29,13 +33,17 @@ export function Autocomplete<T>({
   change,
   select,
   renderItem,
-  children,
   keyShortcuts,
+  isLoading,
 }: AutocompleteProps<T>): JSX.Element {
   const location = useLocation();
-  const [isOpen, setIsOpen] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const [activeIdx, setActiveIdx] = useState(-1);
   const refInput = useRef<HTMLInputElement>(null);
+  const { translate } = useTranslate();
+  const translationKeys = {
+    noResults: 'theme.search.noResults',
+  };
 
   const hotkeysKeys = keyShortcuts?.join(',');
 
@@ -50,10 +58,10 @@ export function Autocomplete<T>({
     }
   }, [hotkeysKeys]);
 
-  const open = () => setIsOpen(true);
+  const onFocus = () => setIsFocused(true);
 
   const close = () => {
-    setIsOpen(false);
+    setIsFocused(false);
     setActiveIdx(-1);
   };
 
@@ -66,11 +74,12 @@ export function Autocomplete<T>({
 
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     setActiveIdx(-1);
-    setIsOpen(true);
+    setIsFocused(true);
     change(event.target.value);
   };
 
   const onKeydown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (items === null) return;
     switch (event.code) {
       case 'Escape':
         close();
@@ -101,24 +110,29 @@ export function Autocomplete<T>({
 
   return (
     <Wrapper data-component-name="Search/Autocomplete">
-      {isOpen ? <Overlay onClick={close} /> : null}
+      {isFocused ? <Overlay onClick={close} /> : null}
       <AutocompleteBox onKeyDown={onKeydown}>
-        {children?.(isOpen, reset)}
-
+        {isFocused && isLoading ? <SpinnerIcon /> : <SearchIcon />}
         <FormInput
           value={value}
           placeholder={placeholder}
           onChange={onChange}
-          onFocus={open}
+          onFocus={onFocus}
           onClick={stopPropagation}
           ref={refInput}
         />
-
-        {!isOpen && <ShortcutKey keyShortcuts={keyShortcuts} />}
-
-        {isOpen && value ? (
-          <Popover>{items.length ? items.map(mapItem) : <Message>No results</Message>}</Popover>
-        ) : null}
+        {isFocused ? <ClearIcon onClick={reset} /> : <ShortcutKey keyShortcuts={keyShortcuts} />}
+        {isFocused && items !== null && value && (
+          <Popover>
+            {items.length ? (
+              items.map(mapItem)
+            ) : (
+              <Message data-translation-key={translationKeys.noResults}>
+                {translate(translationKeys.noResults, 'No results')}
+              </Message>
+            )}
+          </Popover>
+        )}
       </AutocompleteBox>
     </Wrapper>
   );

package/src/components/Search/ClearIcon.tsx

@@ -24,7 +24,7 @@ export const ClearIcon = styled(Icon).attrs(() => ({
   cursor: pointer;
   width: 0.5em;
   height: 0.5em;
-  left: 1.2em;
+  right: 1em;
   fill: var(--search-input-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {

package/src/components/Search/Search.tsx

@@ -3,17 +3,17 @@ import styled from 'styled-components';
 
 import { useFuseSearch } from '@portal/search';
 import { Autocomplete } from '@theme/components/Search/Autocomplete';
-import { ClearIcon } from '@theme/components/Search/ClearIcon';
-import { SearchIcon } from '@theme/components/Search/SearchIcon';
 import { SearchItem } from '@theme/components/Search/SearchItem';
 import { useThemeConfig } from '@theme/hooks';
 import type { SearchDocument } from '@theme/types/portal/src/shared/types/searchDocument';
 import { usePreloadHistory } from '@portal/usePreloadHistory';
+import { useTranslate } from '@portal/hooks';
 
 export function Search(): JSX.Element {
   const history = usePreloadHistory();
-  const { query, setQuery, items } = useFuseSearch();
+  const { query, setQuery, items, isLoading } = useFuseSearch();
   const themeSettings = useThemeConfig();
+  const { translate } = useTranslate();
 
   // TODO: ask somebody about typings
   const navigate = (item: SearchDocument) => history.push(item.url);
@@ -24,12 +24,11 @@ export function Search(): JSX.Element {
       value={query}
       change={setQuery}
       select={navigate}
-      placeholder="Search the docs"
+      placeholder={translate('theme.search.label', 'Search the docs')}
       keyShortcuts={themeSettings?.search?.shortcuts ?? ['/']}
       renderItem={(item) => <SearchItem key={item.id} item={item} />}
-    >
-      {(isOpen, reset) => (isOpen ? <ClearIcon onClick={reset} /> : <SearchIcon />)}
-    </Autocomplete>
+      isLoading={isLoading}
+    />
   );
 
   return <Wrapper data-component-name="Search/Search">{renderAutocomplete()}</Wrapper>;
@@ -38,6 +37,8 @@ export function Search(): JSX.Element {
 const Wrapper = styled.div`
   margin-left: auto;
 
+  padding: 0 var(--navbar-item-padding-horizontal);
+
   display: none;
 
   ${({ theme }) => theme.mediaQueries?.small} {

package/src/components/Separator/Separator.tsx

@@ -4,11 +4,14 @@ import styled from 'styled-components';
 import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
 
 export function Separator({ item }: MenuItemProps): JSX.Element {
+  const { translate } = useTranslate();
+
   return (
     <Wrapper data-component-name="Sidebar/Separator">
-      <SeparatorItem>{item.label}</SeparatorItem>
+      <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
       {item.separatorLine ? <SeparatorLine /> : null}
     </Wrapper>
   );

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -4,6 +4,7 @@ import styled, { keyframes } from 'styled-components';
 import { BackButton } from '@theme/components/Sidebar/BackButton';
 import { DrilldownMenuItem } from '@theme/components/Sidebar/DrilldownMenuItem';
 import type { DrilldownMenuProps } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
 
 export function DrilldownMenu({
   item,
@@ -11,11 +12,17 @@ export function DrilldownMenu({
   prevActiveItem,
   children,
 }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    backLabel: 'theme.sidebar.menu.backLabel',
+  };
   return (
     <MenuContainer data-component-name="Sidebar/DrilldownMenu">
       <MenuContent>
         <MenuWrapper>
-          <BackButton back={back}>{prevActiveItem?.label || 'Back'}</BackButton>
+          <BackButton back={back} data-translation-key={translationKeys.backLabel}>
+            {prevActiveItem?.label || translate(translationKeys.backLabel, 'Back')}
+          </BackButton>
           <DrilldownMenuItem item={item} />
         </MenuWrapper>
 

package/src/components/Sidebar/DrilldownMenuItem.tsx

@@ -2,14 +2,19 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { useTranslate } from '@portal/hooks';
 
 export function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element {
+  const { translate } = useTranslate();
+
   return (
     <Container data-component-name="Sidebar/DrilldownMenuItem">
       {item.icon ? <Icon src={item.icon} /> : null}
       <div>
-        {item.label}
-        {item.sublabel ? <SubLabel>{item.sublabel}</SubLabel> : null}
+        {translate(item.labelTranslationKey, item.label)}
+        {item.sublabel ? (
+          <SubLabel>{translate(item.subLabelTranslationKey, item.sublabel)}</SubLabel>
+        ) : null}
       </div>
     </Container>
   );

package/src/components/Sidebar/types.ts

@@ -22,7 +22,9 @@ export interface MenuItemProps {
 
 export interface NavItem {
   label?: string;
+  labelTranslationKey?: string;
   sublabel?: string;
+  subLabelTranslationKey?: string;
   icon?: string;
   link?: string;
   type?: string;

package/src/components/TableOfContent/TableOfContent.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { useFullHeight } from '@theme/hooks/useFullHeight';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
 import type { MdHeading } from '@theme/types/portal';
 import {
   getDisplayedHeadingsIds,
@@ -31,6 +32,11 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
     getDisplayedHeadingsIds(displayedHeadings),
   );
 
+  const { translate } = useTranslate();
+  const translationKeys = {
+    header: 'theme.toc.header',
+  };
+
   if (toc?.hide) {
     return null;
   }
@@ -39,7 +45,11 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
     <>
       <TableOfContentMenu data-component-name="TableOfContent/TableOfContent">
         <TableOfContentItems ref={sidebar}>
-          {displayedHeadings.length ? <TocHeader>{toc.header || 'On this page'}</TocHeader> : null}
+          {displayedHeadings.length ? (
+            <TocHeader data-translation-key={translationKeys.header}>
+              {translate(translationKeys.header, toc.header || 'On this page')}
+            </TocHeader>
+          ) : null}
           {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
             if (!heading) {
               return null;

package/src/globalStyle.ts

@@ -1792,6 +1792,13 @@ const markdown = css`
   --md-list-item-margin: 0.25rem; // @presenter Spacing
   --md-list-item-style: inherit;
 
+
+  /**
+  * @tokens Markdown Checkbox List
+  */
+  
+  --md-checkbox-list-item-style: none;
+
   /**
   * @tokens Markdown Numbered List
   */

package/src/icons/SpinnerIcon/SpinnerIcon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface SpinnerIconProps {
+  className?: string;
+}
+export const Icon = ({ className }: SpinnerIconProps) => (
+  <svg className={className} viewBox="0 -1 38 40" strokeOpacity=".5">
+    <g fill="none" fillRule="evenodd">
+      <g transform="translate(1 1)" strokeWidth="4">
+        <circle strokeOpacity=".3" cx="18" cy="18" r="18" />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="1s"
+            repeatCount="indefinite"
+          />
+        </path>
+      </g>
+    </g>
+  </svg>
+);
+
+export const SpinnerIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AnchorIcon/AnchorIcon',
+}))`
+  position: absolute;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  left: 0.8em;
+  stroke: var(--search-input-text-color);
+  z-index: -1;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 1.2em;
+    height: 1.2em;
+  }
+`;

package/src/icons/SpinnerIcon/index.ts

@@ -0,0 +1 @@
+export { SpinnerIcon } from '@theme/icons/SpinnerIcon/SpinnerIcon';

package/src/icons/index.ts

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

package/src/index.ts

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

package/src/layouts/Forbidden.tsx

@@ -2,13 +2,28 @@ import React from 'react';
 import styled from 'styled-components';
 import { Button } from '@theme';
 
+import { useTranslate } from '@portal/hooks';
+
 export function Forbidden(): JSX.Element {
+  const { translate } = useTranslate();
+  const translationKeys = {
+    title: 'theme.page.forbidden.title',
+    homeButton: 'theme.page.homeButton',
+  };
+
   return (
     <Wrapper data-component-name="Pages/Forbidden">
       <Header>403</Header>
-      <Description>Access forbidden</Description>
-      <HomeButton color="primary" size="large" to="/">
-        Open Homepage
+      <Description data-translation-key={translationKeys.title}>
+        {translate(translationKeys.title, 'Access forbidden')}
+      </Description>
+      <HomeButton
+        color="primary"
+        size="large"
+        to="/"
+        data-translation-key={translationKeys.homeButton}
+      >
+        {translate(translationKeys.homeButton, 'Open Homepage')}
       </HomeButton>
     </Wrapper>
   );