@redocly/theme 0.25.1-beta.4 → 0.25.2

package/src/components/Profile/LoginLink.tsx

@@ -12,19 +12,16 @@ export interface LoginLinkProps {
 export function LoginLink({ href }: LoginLinkProps): JSX.Element {
   const { userProfile } = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    login: 'theme.profile.login',
-  };
 
   return (
     <StyledLink
       href={href}
-      data-translation-key={translationKeys.login}
+      data-translation-key="theme.profile.login"
       onClick={() => {
         telemetry.send('login_button_clicked', {});
       }}
     >
-      {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+      {translate('theme.profile.login', userProfile?.loginLabel || 'Login')}
     </StyledLink>
   );
 }

package/src/components/Profile/MobileUserProfile.tsx

@@ -12,9 +12,6 @@ export function MobileUserProfile() {
   const { userProfile } = useThemeConfig();
   const { userData, handleLogout, loginUrl } = useProfileProps();
   const { translate } = useTranslate();
-  const translationKeys = {
-    login: 'theme.profile.login',
-  };
 
   if (!userData?.isAuthenticated && !loginUrl) return null;
 
@@ -26,7 +23,7 @@ export function MobileUserProfile() {
           data-cy="login-btn"
           onClick={() => telemetry.send('login_button_clicked', {})}
         >
-          {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
+          {translate('theme.profile.login', userProfile?.loginLabel || 'Login')}
         </LoginButton>
       ) : (
         <>

package/src/components/Profile/UserProfile.tsx

@@ -18,18 +18,15 @@ export function UserProfile({
 }: UserProfileProps): JSX.Element {
   const { userProfile } = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    myApps: 'theme.profile.myApps',
-    logout: 'theme.profile.logout',
-  };
+
   const [isOpened, setIsOpened] = useState<boolean>(false);
 
   const menuItems: JSX.Element[] = [<UserProfileData key={userData.name} userData={userData} />];
 
   if (hasDeveloperOnboarding) {
     menuItems.push(
-      <Link to="/apps" data-translation-key={translationKeys.myApps}>
-        {translate(translationKeys.myApps, 'My Apps')}
+      <Link to="/apps" data-translation-key="theme.profile.myApps">
+        {translate('theme.profile.myApps', 'My Apps')}
       </Link>,
     );
   }
@@ -55,11 +52,11 @@ export function UserProfile({
         handleLogout();
         telemetry.send('logout_menu_item_clicked', {});
       }}
-      data-translation-key={translationKeys.logout}
+      data-translation-key="theme.profile.logout"
       role="link"
     >
       <LogoutIcon />
-      {translate(translationKeys.logout, userProfile?.logoutLabel || 'Log out')}
+      {translate('theme.profile.logout', userProfile?.logoutLabel || 'Log out')}
     </Logout>,
   );
 

package/src/components/Scorecard/Card.tsx

@@ -1,10 +1,8 @@
 import styled from 'styled-components';
 
-export const ScorecardCard = styled.div.attrs({
-  'data-component-name': 'Scorecard/ScorecardCard',
-})`
+export const ScorecardCard = styled.div`
   color: var(--text-primary);
-  background-color: var(--bg-raised);
+  background-color: var(--thin-tile-background-color);
   border-radius: 4px;
 
   border: 1px solid var(--border-primary);

package/src/components/Scorecard/Gauge.tsx

@@ -1,27 +1,18 @@
 import * as React from 'react';
 import styled from 'styled-components';
-export interface GaugeProps {
+
+export function Gauge({
+  chunks,
+}: {
   chunks: {
     share: number;
     color: string;
-    title?: string;
   }[];
-  className?: string;
-}
-
-export function Gauge({ chunks, className }: GaugeProps) {
-  const title = chunks
-    .map((chunk) => chunk.title)
-    .filter(Boolean)
-    .join(', ');
+}) {
   return (
-    <GaugeWrapper
-      data-component-name="Scorecard/StatusByLevelWidget"
-      className={className}
-      title={title}
-    >
+    <GaugeWrapper>
       {chunks.map((chunk, i) => (
-        <GaugeChunk key={i} share={chunk.share} color={chunk.color} />
+        <GaugeChunk key={i} {...chunk} />
       ))}
     </GaugeWrapper>
   );

package/src/components/Scorecard/StatusByLevelWidget.tsx

@@ -7,13 +7,12 @@ import { ScorecardCard, ScorecardCardTitle } from '@theme/components/Scorecard/C
 export interface StatusByLevelWidgetProps {
   title: string;
   levels: { name: string; errors: number; warnings: number; total: number }[];
-  className?: string;
 }
 
 export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
-  const { levels, title, className } = props;
+  const { levels, title } = props;
   return (
-    <ScorecardCard data-component-name="Scorecard/StatusByLevelWidget" className={className}>
+    <ScorecardCard>
       <ScorecardCardTitle>{title}</ScorecardCardTitle>
       <CardBody>
         {levels.map((level) => {
@@ -26,17 +25,14 @@ export function StatusByLevelWidget(props: StatusByLevelWidgetProps) {
                   {
                     share: (success / level.total) * 100,
                     color: 'var(--scorecard-color-success)',
-                    title: `${success} passed`,
                   },
                   {
                     share: (level.warnings / level.total) * 100,
                     color: 'var(--scorecard-color-warning)',
-                    title: `${level.warnings} ${level.warnings === 1 ? 'warning' : 'warnings'}`,
                   },
                   {
                     share: (level.errors / level.total) * 100,
                     color: 'var(--scorecard-color-error)',
-                    title: `${level.errors} ${level.errors === 1 ? 'error' : 'errors'}`,
                   },
                 ]}
               />

package/src/components/Search/CancelSearch.tsx

@@ -12,14 +12,11 @@ export function CancelSearch({
   className?: string;
 }): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    cancel: 'theme.search.cancel',
-  };
 
   return (
     <Wrapper data-component-name="Search/CancelSearch" onClick={onClick} className={className}>
-      <Button data-translation-keys={translationKeys.cancel} fullWidth variant="outlined">
-        {translate(translationKeys.cancel, 'Cancel')}
+      <Button data-translation-keys="theme.search.cancel" fullWidth variant="outlined">
+        {translate('theme.search.cancel', 'Cancel')}
       </Button>
     </Wrapper>
   );

package/src/components/Search/RecentSearches.tsx

@@ -15,9 +15,6 @@ export function RecentSearches({
 }) {
   const { items, removeSearchHistoryItem } = useRecentSearches();
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.search.recent',
-  };
 
   if (!items || !items.length) return null;
 
@@ -34,8 +31,8 @@ export function RecentSearches({
 
   return (
     <Wrapper data-component-name="Search/RecentSearches" className={className}>
-      <Title data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Recent searches')}
+      <Title data-translation-key="theme.search.recent">
+        {translate('theme.search.recent', 'Recent searches')}
       </Title>
       <RecentItems>
         {items.map((item) => (

package/src/components/Search/SearchDialog.tsx

@@ -39,13 +39,6 @@ export const SearchDialog = ({
     }
   };
 
-  const translationKeys = {
-    noResults: 'theme.search.noResults',
-    navigate: 'theme.search.keys.navigate',
-    select: 'theme.search.keys.select',
-    exit: 'theme.search.keys.exit',
-  };
-
   const mapItem = (item: SearchDocument) => {
     return (
       <SearchItem key={item.id} item={item} product={!product ? item.product?.name : undefined} />
@@ -74,8 +67,8 @@ export const SearchDialog = ({
             items.length ? (
               items.map(mapItem)
             ) : (
-              <Message data-translation-key={translationKeys.noResults}>
-                {translate(translationKeys.noResults, 'No results')}
+              <Message data-translation-key="theme.search.noResults">
+                {translate('theme.search.noResults', 'No results')}
               </Message>
             )
           ) : (
@@ -88,19 +81,19 @@ export const SearchDialog = ({
         <BottomContainer>
           <Shortcuts>
             <Shortcut
-              data-translation-key={translationKeys.navigate}
+              data-translation-key="theme.search.keys.navigate"
               combination="Tab"
-              text={translate(translationKeys.navigate, 'to navigate')}
+              text={translate('theme.search.keys.navigate', 'to navigate')}
             />
             <Shortcut
-              data-translation-key={translationKeys.select}
+              data-translation-key="theme.search.keys.select"
               combination="↵"
-              text={translate(translationKeys.select, 'to select')}
+              text={translate('theme.search.keys.select', 'to select')}
             />
             <Shortcut
-              data-translation-key={translationKeys.exit}
+              data-translation-key="theme.search.keys.exit"
               combination="Esc"
-              text={translate(translationKeys.exit, 'to exit')}
+              text={translate('theme.search.keys.exit', 'to exit')}
             />
           </Shortcuts>
           <CancelSearch onClick={onClose} />

package/src/components/Search/SearchTrigger.tsx

@@ -15,16 +15,14 @@ export function SearchTrigger({
 }): JSX.Element {
   const themeSettings = useThemeConfig();
   const { translate } = useTranslate();
-  const translationKeys = {
-    label: 'theme.search.navbar.label',
-  };
+
   const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
 
   return (
     <Wrapper data-component-name="Search/SearchTrigger" onClick={onClick} className={className}>
       <SearchIconSmall />
-      <Label data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, 'Search')}
+      <Label data-translation-key="theme.search.navbar.label">
+        {translate('theme.search.navbar.label', 'Search')}
       </Label>
       <ShortcutKey keyShortcuts={keyShortcuts} />
     </Wrapper>

package/src/components/Search/SuggestedPages.tsx

@@ -9,16 +9,12 @@ import { useTranslate } from '@portal/hooks';
 export function SuggestedPages({ className }: { className?: string }) {
   const pages = useSuggestedPages();
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.search.suggested',
-  };
-
   if (!pages.length) return null;
 
   return (
     <Wrapper data-component-name="Search/SuggestedPages" className={className}>
-      <Title data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Suggested pages')}
+      <Title data-translation-key="theme.search.suggested">
+        {translate('theme.search.suggested', 'Suggested pages')}
       </Title>
       <SuggestedItems>
         {pages.map(

package/src/components/Sidebar/DrilldownMenu.tsx

@@ -15,19 +15,16 @@ export function DrilldownMenu({
   className,
 }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    backLabel: 'theme.sidebar.menu.backLabel',
-  };
   const label =
     item.label === prevActiveItem?.label || !prevActiveItem?.label
-      ? translate(translationKeys.backLabel, 'Back')
+      ? translate('theme.sidebar.menu.backLabel', 'Back')
       : prevActiveItem?.label;
 
   return (
     <MenuContainer data-component-name="Sidebar/DrilldownMenu" className={className}>
       <MenuContent>
         <MenuWrapper>
-          <BackButton back={back} data-translation-key={translationKeys.backLabel}>
+          <BackButton back={back} data-translation-key="theme.sidebar.menu.backLabel">
             {label}
           </BackButton>
           <MenuLinkItem item={item}>

package/src/components/Sidebar/VersionPicker.tsx

@@ -16,10 +16,6 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
   const { versionPicker } = themeConfig;
 
   const { translate } = useTranslate();
-  const translationKeys = {
-    label: 'theme.versionPicker.label',
-    unversioned: 'theme.versionPicker.unversioned',
-  };
 
   const { versions = [], onChange } = props;
   const options = versions.map((version) => {
@@ -40,11 +36,11 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
 
   return (
     <VersionsPickerWrapper>
-      <VersionPickerLabel data-translation-key={translationKeys.label}>
-        {translate(translationKeys.label, 'Version:')}
+      <VersionPickerLabel data-translation-key="theme.versionPicker.label">
+        {translate('theme.versionPicker.label', 'Version:')}
       </VersionPickerLabel>
       <VersionPickerSelect
-        placeholder={translate(translationKeys.unversioned, 'All versions')}
+        placeholder={translate('theme.versionPicker.unversioned', 'All versions')}
         disabled={!options.length}
         options={options}
         value={value}

package/src/components/TableOfContent/TableOfContent.tsx

@@ -35,9 +35,6 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   );
 
   const { translate } = useTranslate();
-  const translationKeys = {
-    header: 'theme.toc.header',
-  };
 
   if (toc?.hide) {
     return null;
@@ -48,8 +45,8 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
       <TableOfContentMenu data-component-name="TableOfContent/TableOfContent" className={className}>
         <TableOfContentItems ref={sidebar}>
           {displayedHeadings.length ? (
-            <TocHeader data-translation-key={translationKeys.header}>
-              {translate(translationKeys.header, toc.header || 'On this page')}
+            <TocHeader data-translation-key="theme.toc.header">
+              {translate('theme.toc.header', toc.header || 'On this page')}
             </TocHeader>
           ) : null}
           {displayedHeadings.map((heading: MdHeading | null, idx: number) => {

package/src/config.ts

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

package/src/layouts/Forbidden.tsx

@@ -6,24 +6,15 @@ 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 data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Access forbidden')}
+      <Description data-translation-key="theme.page.forbidden.title">
+        {translate('theme.page.forbidden.title', 'Access forbidden')}
       </Description>
-      <HomeButton
-        color="primary"
-        size="large"
-        to="/"
-        data-translation-key={translationKeys.homeButton}
-      >
-        {translate(translationKeys.homeButton, 'Open Homepage')}
+      <HomeButton color="primary" size="large" to="/" data-translation-key="theme.page.homeButton">
+        {translate('theme.page.homeButton', 'Open Homepage')}
       </HomeButton>
     </Wrapper>
   );

package/src/layouts/NotFound.tsx

@@ -6,24 +6,15 @@ import { useTranslate } from '@portal/hooks';
 
 export function NotFound(): JSX.Element {
   const { translate } = useTranslate();
-  const translationKeys = {
-    title: 'theme.page.notFound.title',
-    homeButton: 'theme.page.homeButton',
-  };
 
   return (
     <Wrapper data-component-name="Pages/NotFound">
       <Header>404</Header>
-      <Description data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, `It looks like you're lost`)}
+      <Description data-translation-key="theme.page.notFound.title">
+        {translate('theme.page.notFound.title', "It looks like you're lost")}
       </Description>
-      <HomeButton
-        color="primary"
-        size="large"
-        to="/"
-        data-translation-key={translationKeys.homeButton}
-      >
-        {translate(translationKeys.homeButton, 'Open Homepage')}
+      <HomeButton color="primary" size="large" to="/" data-translation-key="theme.page.homeButton">
+        {translate('theme.page.homeButton', 'Open Homepage')}
       </HomeButton>
     </Wrapper>
   );

package/src/layouts/OIDCForbidden.tsx

@@ -9,10 +9,6 @@ export function OIDCForbidden(): JSX.Element {
   const [searchParams, setSearchParams] = useSearchParams();
   const [errorDescription, setErrorDescription] = useState<string>('');
 
-  const translationKeys = {
-    title: 'theme.page.forbidden.title',
-  };
-
   // use whatever you want here
   const URL_REGEX =
     /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
@@ -38,8 +34,8 @@ export function OIDCForbidden(): JSX.Element {
   return (
     <Wrapper data-component-name="Pages/OIDCForbidden">
       <Header>403</Header>
-      <Description data-translation-key={translationKeys.title}>
-        {translate(translationKeys.title, 'Access forbidden')}
+      <Description data-translation-key="theme.page.forbidden.title">
+        {translate('theme.page.forbidden.title', 'Access forbidden')}
       </Description>
       {errorDescription && <ErrorDescription>{renderText(errorDescription)}</ErrorDescription>}
     </Wrapper>

package/src/mocks/hooks/index.ts

@@ -1,5 +1,7 @@
+import type { TFunction } from '@redocly/portal-types';
+
 import type { CatalogConfig, ProductUiConfig, ThemeUIConfig } from '@theme/config';
-import type { ResolvedNavItem, TFunction, Version } from '@theme/types/portal';
+import type { ResolvedNavItem, Version } from '@theme/types/portal';
 import type { FilteredCatalog } from '@theme/types/portal/src/shared/types/catalog';
 interface PageLink {
   label: string;
@@ -76,11 +78,10 @@ export function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): F
   throw new Error('Mock not implemented yet.');
 }
 
-export function useTranslate() {
-  const translate: TFunction = (value?: string, options?: { defaultValue: string } | string) =>
-    (typeof options === 'string' ? options : options?.defaultValue) || value || '';
-  return { translate };
-}
+export const useTranslate = (): { translate: TFunction } => ({
+  translate: (value?: string, options?: { defaultValue: string } | string) =>
+    (typeof options === 'string' ? options : options?.defaultValue) || value || '',
+});
 
 export function useI18n() {
   const changeLanguage = (...args: any) => args.value as string;

package/src/types/portal/src/shared/types/feedback.ts

@@ -6,6 +6,7 @@ export type SubmitFeedbackParams = {
   type: string;
   values: Record<string, unknown>;
   path?: string;
+  location?: string;
 };
 
 export type FeedbackProps = {