@redocly/theme 0.46.3 → 0.46.5

package/src/components/Feedback/Mood.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
-import { ReasonsSettingsSchema } from '@redocly/config';
 
+import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { FaceDissatisfiedIcon } from '@redocly/theme/icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 import { FaceSatisfiedIcon } from '@redocly/theme/icons/FaceSatisfiedIcon/FaceSatisfiedIcon';
@@ -21,7 +21,12 @@ export enum MOOD_STATES {
 }
 
 export type MoodProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -36,19 +41,33 @@ export type MoodProps = {
       neutral?: ReasonsSettingsSchema;
       dissatisfied?: ReasonsSettingsSchema;
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [score, setScore] = React.useState('');
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const checkIfShouldDisplayReasons = (score: string) => {
     if (!score || !reasonsSettings) {
       return false;
@@ -112,26 +131,32 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
     onSubmit({
       score: remapScore(score),
       comment,
       reasons,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelMoodForm = () => {
     setScore('');
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitMoodForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -152,7 +177,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
 
   return (
     <MoodWrapper data-component-name="Feedback/Mood" className={className}>
-      <StyledForm>
+      <StyledForm onSubmit={onSubmitMoodForm}>
         <StyledFormMandatoryFields>
           <Label data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
@@ -213,12 +238,34 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelMoodForm} variant="text" size="small">
               Cancel
             </Button>
-            <Button onClick={onSubmitMoodForm} variant="secondary" size="small">
+            <Button type="submit" variant="secondary" size="small">
               Submit
             </Button>
           </ButtonsContainer>
@@ -291,3 +338,13 @@ const StyledMandatoryFieldContainer = styled.div`
   align-items: center;
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Rating.tsx

@@ -1,20 +1,27 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { useEffect } from 'react';
+import styled from 'styled-components';
 
+import type { AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Stars } from '@redocly/theme/components/Feedback/Stars';
 import { Button } from '@redocly/theme/components/Button/Button';
 
 export const FEEDBACK_MAX_RATING = 5;
 
 export type RatingProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max: number }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    max: number;
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -28,43 +35,63 @@ export type RatingProps = {
       component?: string;
       items: string[];
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
   const [comment, setComment] = React.useState('');
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const onSubmitRatingForm = () => {
     onSubmit({
       score,
       comment,
       reasons,
       max: FEEDBACK_MAX_RATING,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelRatingForm = () => {
     setScore(0);
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitRatingForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -95,7 +122,6 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
             <Stars max={FEEDBACK_MAX_RATING} onChange={setScore} value={score} />
           </StyledMandatoryFieldContainer>
         </StyledFormMandatoryFields>
-
         {(displayReasons || displayComment) && (
           <StyledFormOptionalFields>
             {displayReasons && (
@@ -125,6 +151,28 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelRatingForm} variant="text" size="small">
@@ -185,3 +233,13 @@ const ButtonsContainer = styled.div`
   margin-bottom: var(--spacing-xxs);
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Scale.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
+import type { AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { breakpoints } from '@redocly/theme/core/utils';
@@ -14,7 +15,13 @@ import { Button } from '@redocly/theme/components/Button/Button';
 export const MAX_SCALE = 10;
 
 export type ScaleProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[]; max?: number }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    max?: number;
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -30,6 +37,7 @@ export type ScaleProps = {
       component?: string;
       items: string[];
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
@@ -42,14 +50,22 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     rightScaleLabel,
     comment: commentSettings,
     reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState(0);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const scaleOptions = [];
 
   for (let i = 1; i <= MAX_SCALE; i++) {
@@ -69,11 +85,14 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const handleCancel = () => {
     setScore(0);
     setComment('');
     setReasons([]);
+    setEmail(undefined);
   };
 
   const onSubmitScaleForm = () => {
@@ -82,16 +101,17 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
       comment,
       reasons,
       max: MAX_SCALE,
+      email,
     });
     setIsSubmitted(true);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitScaleForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -110,7 +130,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
   return (
     <ScaleWrapper data-component-name="Feedback/Scale" className={className}>
-      <StyledForm>
+      <StyledForm onSubmit={onSubmitScaleForm}>
         <StyledFormMandatoryFields>
           <Label data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
@@ -156,6 +176,28 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
             />
           )}
         </StyledFormOptionalFields>
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button
@@ -169,7 +211,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
             <Button
               data-translation-key="feedback.settings.scale.send"
-              onClick={onSubmitScaleForm}
+              type="submit"
               variant="secondary"
               size="small"
             >
@@ -259,3 +301,13 @@ const ScaleOptionsWrapper = styled.div`
     gap: 2px;
   }
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Feedback/Sentiment.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
-import { ReasonsSettingsSchema } from '@redocly/config';
 
+import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
+import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { Comment } from '@redocly/theme/components/Feedback/Comment';
-import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
 import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
 
 export type SentimentProps = {
-  onSubmit: (value: { score: number; comment?: string; reasons?: string[] }) => void;
+  onSubmit: (value: {
+    score: number;
+    comment?: string;
+    reasons?: string[];
+    email?: string;
+  }) => void;
   settings?: {
     label?: string;
     submitText?: string;
@@ -27,19 +32,33 @@ export type SentimentProps = {
       like?: ReasonsSettingsSchema;
       dislike?: ReasonsSettingsSchema;
     };
+    anonymousUserEmail?: AnonymousUserEmailSettings;
   };
   className?: string;
 };
 
 export function Sentiment({ settings, onSubmit, className }: SentimentProps): JSX.Element {
-  const { label, submitText, comment: commentSettings, reasons: reasonsSettings } = settings || {};
+  const {
+    label,
+    submitText,
+    comment: commentSettings,
+    reasons: reasonsSettings,
+    anonymousUserEmail: anonymousUserEmailSettings,
+  } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
   const [comment, setComment] = React.useState('');
   const [reasons, setReasons] = React.useState([] as ReasonsProps['settings']['items']);
-  const { useTranslate } = useThemeHooks();
+  const [email, setEmail] = React.useState<string>();
+  const { useTranslate, useUserMenu } = useThemeHooks();
+  const { userData } = useUserMenu();
   const { translate } = useTranslate();
 
+  const onEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setEmail(value || undefined);
+  };
+
   const getScoreSpecificReasonSettings = (score: number) => {
     switch (score) {
       case 1:
@@ -68,6 +87,8 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
+  const displayFeedbackEmail =
+    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
 
   const commentLabel =
     score === 1
@@ -100,20 +121,24 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
       score,
       comment,
       reasons,
+      email,
     });
     setIsSubmitted(true);
   };
 
   const onCancelSentimentForm = () => {
     setScore(0);
+    setComment('');
+    setReasons([]);
+    setEmail(undefined);
   };
 
   useEffect(() => {
-    if (score && !displayComment && !displayReasons) {
+    if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
       onSubmitSentimentForm();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [score, displayComment, displayReasons]);
+  }, [score, displayComment, displayReasons, displayFeedbackEmail]);
 
   if (isSubmitted) {
     return (
@@ -186,6 +211,28 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
             )}
           </StyledFormOptionalFields>
         )}
+
+        {displayFeedbackEmail && (
+          <StyledFormOptionalFields>
+            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
+              {anonymousUserEmailSettings?.label ||
+                translate(
+                  'feedback.settings.anonymousUserEmail.label',
+                  'Your email (optional, for follow-up)',
+                )}
+            </Label>
+            <EmailInput
+              onChange={onEmailChange}
+              placeholder={
+                anonymousUserEmailSettings?.placeholder ||
+                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+              }
+              type="email"
+              required={!!email}
+            />
+          </StyledFormOptionalFields>
+        )}
+
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelSentimentForm} variant="text" size="small">
@@ -256,3 +303,13 @@ const ButtonsContainer = styled.div`
   margin-bottom: var(--spacing-xxs);
   gap: var(--spacing-xxs);
 `;
+
+const EmailInput = styled.input`
+  background-color: var(--bg-color);
+  border-radius: var(--border-radius-lg);
+  border: var(--input-border);
+  outline: none;
+  color: var(--feedback-text-color);
+  font-family: var(--feedback-font-family);
+  padding: 10px;
+`;

package/src/components/Product/ProductPicker.tsx

@@ -14,14 +14,16 @@ export function ProductPicker(): JSX.Element | null {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  const productComponents = products.map((product) => ({
-    content: <Product product={product} />,
-    suffix: currentProduct === product && <CheckmarkIcon />,
-    onAction: () => {
-      setProduct(product);
-    },
-    active: product === currentProduct,
-  }));
+  const productComponents = products.map((product) => {
+    return {
+      content: <Product product={product} />,
+      suffix: product.slug === currentProduct?.slug && <CheckmarkIcon />,
+      onAction: () => {
+        setProduct(product);
+      },
+      active: product.slug === currentProduct?.slug,
+    };
+  });
 
   return products.length ? (
     <ProductDropdown

package/src/components/Search/SearchDialog.tsx

@@ -71,8 +71,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
   const mapItem = (item: SearchItemData, index: number) => {
     let itemProduct;
     if (!product && item.document.product) {
+      const folder = item.document.product?.folder;
       const resolvedProduct = products.find((product) =>
-        product.slug.match(`/${item.document.product?.folder}/`),
+        product.slug.match(`/${folder.startsWith('./') ? folder.slice(2) : folder}/`),
       );
       itemProduct = resolvedProduct
         ? { name: resolvedProduct.name, icon: resolvedProduct.icon }

package/src/core/hooks/use-theme-hooks.ts

@@ -13,6 +13,7 @@ const fallbacks = {
   useTelemetry: () => ({ telemetry: () => {} }),
   useBreadcrumbs: () => [],
   useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
+  useUserMenu: () => ({}),
 };
 
 export const useThemeHooks = () => {

package/src/core/types/l10n.ts

@@ -129,6 +129,8 @@ export type TranslationKey =
   | 'feedback.sentiment.thumbDown'
   | 'feedback.settings.leftScaleLabel'
   | 'feedback.settings.rightScaleLabel'
+  | 'feedback.settings.anonymousUserEmail.placeholder'
+  | 'feedback.settings.anonymousUserEmail.label'
   | 'codeSnippet.report.buttonText'
   | 'codeSnippet.report.tooltipText'
   | 'codeSnippet.report.label'

package/src/markdoc/components/Cards/Card.tsx

@@ -7,7 +7,7 @@ import { CardIcon } from '@redocly/theme/markdoc/components/Cards/CardIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 
 export type CardProps = React.PropsWithChildren<{
-  title: string;
+  title?: string;
   image?: string;
   icon?: string;
   iconRawContent?: string;
@@ -22,7 +22,7 @@ export type CardProps = React.PropsWithChildren<{
 }>;
 
 export function Card({
-  title,
+  title = '',
   image,
   icon,
   iconRawContent,
@@ -36,7 +36,7 @@ export function Card({
   to,
   children,
 }: CardProps) {
-  const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
+  const titleNoSpaces = title?.replace(/\s+/g, '-').toLowerCase();
   const cardTitleId = `card-title-${titleNoSpaces}`;
   const justifyContent =
     align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';