@redocly/theme 0.70.0-next.2 → 0.70.0-next.3

package/src/components/JsonViewer/Helpers.tsx

@@ -7,40 +7,50 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { ShowMoreToggleButton } from '@redocly/theme/components/Button/ShowMoreToggleButton';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
+export type JsonFold = {
+  isExpanded: (path: string, level: number) => boolean;
+  setExpanded: (path: string, expanded: boolean) => void;
+};
+
+type Foldable = [path: string, level: number];
+
+export function isFoldable(value: unknown): value is Record<string, unknown> {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    Object.values(value).some((item) => item !== undefined)
+  );
+}
+
+export function collectFoldables(value: unknown, path = '', level = 1): Foldable[] {
+  if (!isFoldable(value)) return [];
+  return Object.entries(value).flatMap(([key, child]): Foldable[] => {
+    const childPath = `${path}/${key}`;
+    return isFoldable(child)
+      ? [[childPath, level], ...collectFoldables(child, childPath, level + 1)]
+      : [];
+  });
+}
+
 export function JsonValue(props: {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
+  path: string;
   standalone?: boolean; // if true, will render the opening and closing punctuation (when it's an item inside array or top-level)
-  defaultExpandLevel: number;
-  expandAllSignal: boolean | undefined;
+  fold: JsonFold;
   maxStringLength?: number;
 }): React.ReactNode {
-  const { standalone, defaultExpandLevel, level, value, expandAllSignal, maxStringLength } = props;
+  const { standalone, fold, level, path, value, maxStringLength } = props;
   const indent = ' '.repeat(level * 2);
-
-  const [isExpandedState, setExpanded] = React.useState(
-    expandAllSignal ?? level < defaultExpandLevel,
-  );
-  const isExpanded = expandAllSignal !== undefined && level > 0 ? expandAllSignal : isExpandedState;
-  const [prevExpandAllSignal, setPrevExpandAllSignal] = React.useState(expandAllSignal);
-  const [prevLevel, setPrevLevel] = React.useState(level);
-
-  if (prevExpandAllSignal !== expandAllSignal || prevLevel !== level) {
-    setPrevExpandAllSignal(expandAllSignal);
-    setPrevLevel(level);
-    if (expandAllSignal !== undefined && !(expandAllSignal === false && level === 0)) {
-      setExpanded(expandAllSignal);
-    }
-  }
+  const isExpanded = fold.isExpanded(path, level);
 
   const keys: string[] =
     (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
 
   const valueType = typeof value;
-  const isPrimitive = (valueType !== 'object' && value !== null) || keys.length === 0;
 
-  if (isPrimitive) {
+  if (!isFoldable(value)) {
     const isOversizedString =
       typeof value === 'string' && maxStringLength !== undefined && value.length > maxStringLength;
     return (
@@ -64,9 +74,9 @@ export function JsonValue(props: {
           <JsonValue
             value={item}
             level={level + 1}
+            path={`${path}/${index}`}
             standalone={true}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
           {index < value.length - 1 ? ',\n' : null}
@@ -78,8 +88,8 @@ export function JsonValue(props: {
             name={key}
             value={value[key]}
             level={level + 1}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            path={`${path}/${key}`}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
           {index < keys.length - 1 ? ',\n' : null}
@@ -90,7 +100,7 @@ export function JsonValue(props: {
     <>
       {indent}
       {level > 0 ? (
-        <ExpandIcon onClick={() => setExpanded((v) => !v)} isExpanded={isExpanded} />
+        <ExpandIcon onClick={() => fold.setExpanded(path, !isExpanded)} isExpanded={isExpanded} />
       ) : null}
       {openingPunctuation}
       {isExpanded ? '\n' : null}
@@ -119,33 +129,18 @@ function JsonKeyValue(props: {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
-  defaultExpandLevel: number;
-  expandAllSignal: boolean | undefined;
+  path: string;
+  fold: JsonFold;
   maxStringLength?: number;
 }): React.ReactNode {
-  const { defaultExpandLevel, level, name, value, expandAllSignal, maxStringLength } = props;
+  const { fold, level, name, path, value, maxStringLength } = props;
   const indent = ' '.repeat(level * 2);
-  const keys: string[] =
-    (value && Object.keys(value).filter((key) => value[key] !== undefined)) || []; // filter out undefined properties
-
-  const isCollapsible = typeof value === 'object' && value !== null && keys.length > 0;
-  const [isExpandedState, setExpanded] = React.useState(
-    expandAllSignal ?? level < defaultExpandLevel,
-  );
-  const isExpanded = expandAllSignal !== undefined ? expandAllSignal : isExpandedState;
-  const [prevExpandAllSignal, setPrevExpandAllSignal] = React.useState(expandAllSignal);
-
-  if (prevExpandAllSignal !== expandAllSignal) {
-    setPrevExpandAllSignal(expandAllSignal);
-    if (expandAllSignal !== undefined) {
-      setExpanded(expandAllSignal);
-    }
-  }
+  const isExpanded = fold.isExpanded(path, level);
 
   const openingPunctuation = Array.isArray(value) ? '[' : '{';
   const closingPunctuation = Array.isArray(value) ? ']' : '}';
 
-  const valueElement = isCollapsible ? (
+  const valueElement = isFoldable(value) ? (
     <>
       {openingPunctuation}
       {isExpanded ? (
@@ -154,8 +149,8 @@ function JsonKeyValue(props: {
           <JsonValue
             value={value}
             level={level}
-            defaultExpandLevel={defaultExpandLevel}
-            expandAllSignal={expandAllSignal}
+            path={path}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
           {'\n'}
@@ -170,8 +165,8 @@ function JsonKeyValue(props: {
     <JsonValue
       value={value}
       level={level}
-      defaultExpandLevel={defaultExpandLevel}
-      expandAllSignal={expandAllSignal}
+      path={path}
+      fold={fold}
       maxStringLength={maxStringLength}
     />
   );
@@ -179,8 +174,8 @@ function JsonKeyValue(props: {
   return (
     <>
       {indent}
-      {isCollapsible ? (
-        <ExpandIcon onClick={() => setExpanded((v) => !v)} isExpanded={isExpanded} />
+      {isFoldable(value) ? (
+        <ExpandIcon onClick={() => fold.setExpanded(path, !isExpanded)} isExpanded={isExpanded} />
       ) : null}
       <span className="property token string">{`"${name}"`}</span>: {valueElement}
     </>

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,7 +5,8 @@ import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
-import { JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
+import { collectFoldables, JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
+import type { JsonFold } from '@redocly/theme/components/JsonViewer/Helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 
@@ -33,25 +34,20 @@ function JsonComponent({
   controls = {},
   maxStringLength,
 }: JsonProps): JSX.Element {
-  const showFoldingButtons =
-    data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
+  const defaultExpandLevel = Math.max(1, expandLevel);
+  const foldables = React.useMemo(() => collectFoldables(data), [data]);
+  const [expandedPaths, setExpandedPaths] = React.useState<Record<string, boolean>>({});
 
-  const [expandAllSignal, setExpandAllSignal] = React.useState<boolean | undefined>(undefined);
-
-  const expandAll = () => {
-    setExpandAllSignal(true);
-    onPanelToggle?.(true);
-    setTimeout(() => {
-      setExpandAllSignal(undefined);
-    });
+  const fold: JsonFold = {
+    isExpanded: (path, level) => expandedPaths[path] ?? level < defaultExpandLevel,
+    setExpanded: (path, expanded) => setExpandedPaths((prev) => ({ ...prev, [path]: expanded })),
   };
+  const hasFoldables = foldables.length > 0;
+  const allExpanded = foldables.every(([path, level]) => fold.isExpanded(path, level));
 
-  const collapseAll = () => {
-    setExpandAllSignal(false);
-    onPanelToggle?.(false);
-    setTimeout(() => {
-      setExpandAllSignal(undefined);
-    });
+  const toggleAll = () => {
+    onPanelToggle?.(!allExpanded);
+    setExpandedPaths(Object.fromEntries(foldables.map(([path]) => [path, !allExpanded])));
   };
 
   const source = JSON.stringify(data, null, 2);
@@ -73,12 +69,14 @@ function JsonComponent({
                 controls: controls && {
                   ...controls,
                   copy: { ...controls.copy, data, onClick: onCopyClick, handleOutside: true },
-                  expand: showFoldingButtons
-                    ? { ...controls.expand, onClick: expandAll }
-                    : undefined,
-                  collapse: showFoldingButtons
-                    ? { ...controls.collapse, onClick: collapseAll }
-                    : undefined,
+                  expand:
+                    hasFoldables && !allExpanded
+                      ? { ...controls.expand, onClick: toggleAll }
+                      : undefined,
+                  collapse:
+                    hasFoldables && allExpanded
+                      ? { ...controls.collapse, onClick: toggleAll }
+                      : undefined,
                 },
               }
             : undefined
@@ -89,9 +87,9 @@ function JsonComponent({
           <JsonValue
             value={data}
             level={0}
+            path=""
             standalone={true}
-            expandAllSignal={expandAllSignal}
-            defaultExpandLevel={Math.max(1, expandLevel)}
+            fold={fold}
             maxStringLength={maxStringLength}
           />
         </FoldingWrap>

package/src/components/Markdown/styles/base-table.ts

@@ -22,7 +22,7 @@ export const markdownBaseTableCss = css`
       color: var(--md-table-cell-text-color);
       font-size: var(--md-table-font-size);
       line-height: var(--md-table-line-height);
-      vertical-align: top;
+      vertical-align: var(--md-table-cell-vertical-align);
     }
 
     thead td,
@@ -71,5 +71,18 @@ export const markdownBaseTableCss = css`
     th[align='right'] {
       text-align: right;
     }
+
+    th[valign='top'],
+    td[valign='top'] {
+      vertical-align: top;
+    }
+    th[valign='middle'],
+    td[valign='middle'] {
+      vertical-align: middle;
+    }
+    th[valign='bottom'],
+    td[valign='bottom'] {
+      vertical-align: bottom;
+    }
   }
 `;

package/src/components/Markdown/variables.ts

@@ -51,6 +51,7 @@ export const markdown = css`
   --md-table-cell-text-color: var(--text-color-secondary); // @presenter Color
   --md-table-cell-padding: var(--spacing-xs) var(--spacing-sm); // @presenter Spacing
   --md-table-footer-cell-padding: var(--spacing-xxs) var(--spacing-sm); // @presenter Spacing
+  --md-table-cell-vertical-align: top;
 
   --md-table-head-bg-color: var(--md-table-bg-color); // @presenter Color
   --md-table-head-text-color: var(--text-color-primary); // @presenter Color

package/src/components/Product/utils.ts

@@ -2,5 +2,5 @@ export function getProductClassName(productName: string): string {
   return `product-${productName
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')}`;
+    .replace(/^-+|(?<!-)-+$/g, '')}`;
 }

package/src/components/Search/SearchAiMessage.tsx

@@ -347,7 +347,7 @@ const ResourceTagsWrapper = styled.div`
   gap: var(--search-ai-resource-tags-gap);
 `;
 
-const ResourceTag = styled(Tag)`
+const ResourceTag = styled(Tag).attrs({ textTransform: 'none' })`
   .tag-default {
     --tag-color: var(--search-ai-resource-tag-text-color);
     max-width: 100%;

package/src/components/Search/SearchAiResponse.tsx

@@ -212,6 +212,7 @@ const ResourceTags = styled.div`
 
 const ResourceTag = styled(Tag).attrs({
   className: 'tag-resource',
+  textTransform: 'none',
 })`
   .tag-default {
     --tag-color: --search-ai-resource-tag-text-color;

package/src/core/constants/consent.ts

@@ -0,0 +1,29 @@
+import type { ConsentCategory } from '../types/consent';
+
+export const CONSENT_CATEGORIES: readonly ConsentCategory[] = [
+  {
+    id: 'necessary',
+    locked: true,
+    titleTranslationKey: 'consent.category.necessary.title',
+    descriptionTranslationKey: 'consent.category.necessary.description',
+    titleDefault: 'Necessary',
+    descriptionDefault:
+      'Needed for the site to work: your consent choice, your color mode, and anonymous usage data.',
+  },
+  {
+    id: 'analytics',
+    locked: false,
+    titleTranslationKey: 'consent.category.analytics.title',
+    descriptionTranslationKey: 'consent.category.analytics.description',
+    titleDefault: 'Analytics',
+    descriptionDefault: 'Helps us understand which pages are useful.',
+  },
+  {
+    id: 'marketing',
+    locked: false,
+    titleTranslationKey: 'consent.category.marketing.title',
+    descriptionTranslationKey: 'consent.category.marketing.description',
+    titleDefault: 'Marketing',
+    descriptionDefault: 'Lets us measure which campaigns bring visitors to this site.',
+  },
+];

package/src/core/constants/index.ts

@@ -10,3 +10,4 @@ export * from './mcp';
 export * from './feedback';
 export * from './heading';
 export * from './markdown';
+export * from './consent';

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

@@ -19,12 +19,27 @@ export const useThemeHooks = vi.fn(() => ({
     sendMcpConnectionSnippetCopiedMessage: vi.fn(),
     sendPageActionsButtonClickedMessage: vi.fn(),
     sendColorModeSwitchedMessage: vi.fn(),
+    sendConsentChangedMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
   useBanner: vi.fn(() => ({
     banner: undefined,
     dismissBanner: vi.fn(),
   })),
+  useConsent: vi.fn(() => ({
+    enabled: false,
+    config: undefined,
+    mode: undefined,
+    state: undefined,
+    decided: false,
+    gpc: false,
+    isDialogOpen: false,
+    openDialog: vi.fn(),
+    closeDialog: vi.fn(),
+    accept: vi.fn(),
+    reject: vi.fn(),
+    save: vi.fn(),
+  })),
   usePageSharedData: vi.fn().mockReturnValue({}),
   useCatalogClassic: vi.fn(() => ({
     groups: [],

package/src/core/hooks/index.ts

@@ -22,6 +22,8 @@ export * from './menu/use-collapse';
 export * from './feedback/use-report-dialog';
 export * from './use-tabs';
 export * from './use-focus-trap';
+export * from './use-consent-dialog';
+export * from './use-consent-telemetry';
 export * from './use-language-picker';
 export * from './use-product-picker';
 export * from './search/use-search-dialog';

package/src/core/hooks/use-consent-dialog.ts

@@ -0,0 +1,51 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { RefObject } from 'react';
+import type { ConsentCategory, ConsentCategoryId, UseConsentResult } from '../types/consent';
+
+import { CONSENT_CATEGORIES } from '../constants/consent';
+import { useFocusTrap } from './use-focus-trap';
+
+export type ConsentDraft = Record<Exclude<ConsentCategoryId, 'necessary'>, boolean>;
+
+export type UseConsentDialogResult = {
+  draft: ConsentDraft;
+  setCategory: (id: keyof ConsentDraft, value: boolean) => void;
+  dialogRef: RefObject<HTMLDivElement | null>;
+  close: () => void;
+  save: () => void;
+  categories: readonly ConsentCategory[];
+};
+
+export function useConsentDialog(consent: UseConsentResult): UseConsentDialogResult {
+  const [draft, setDraft] = useState<ConsentDraft>(() => ({
+    analytics: consent.state?.analytics ?? consent.mode === 'opt-out',
+    marketing: (consent.state?.marketing ?? consent.mode === 'opt-out') && !consent.gpc,
+  }));
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const close = consent.closeDialog;
+  const closeRef = useRef(close);
+  closeRef.current = close;
+
+  useEffect(() => {
+    const previous = document.activeElement as HTMLElement | null;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') closeRef.current();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      previous?.focus?.();
+    };
+  }, []);
+
+  useFocusTrap(dialogRef);
+
+  const setCategory = (id: keyof ConsentDraft, value: boolean) => {
+    setDraft((current) => ({ ...current, [id]: value }));
+  };
+
+  const save = () => consent.save(draft);
+
+  return { draft, setCategory, dialogRef, close, save, categories: CONSENT_CATEGORIES };
+}

package/src/core/hooks/use-consent-telemetry.ts

@@ -0,0 +1,56 @@
+import { useEffect, useRef } from 'react';
+
+import type { ConsentRuntime } from '../types/consent';
+
+import { useThemeHooks } from './use-theme-hooks';
+import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
+
+type RealmOwnedRuntime = ConsentRuntime & {
+  mode: 'opt-in' | 'opt-out';
+  configuredMode: 'auto' | 'opt-in' | 'opt-out';
+  region: { source: 'timezone' | 'config' | 'none'; timeZone: string | null };
+};
+
+function isRealmOwned(runtime: ConsentRuntime): runtime is RealmOwnedRuntime {
+  return runtime.region.source !== 'provider';
+}
+
+function getConsentRuntime(): ConsentRuntime | undefined {
+  if (typeof window === 'undefined') return undefined;
+  return (window as Window & { redocly?: { consent?: ConsentRuntime } }).redocly?.consent;
+}
+
+// Sends one consent.changed event per visitor choice in the modes Realm owns.
+export function useConsentTelemetry(): void {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const telemetryRef = useRef(telemetry);
+  telemetryRef.current = telemetry;
+
+  useEffect(() => {
+    const found = getConsentRuntime();
+    const runtime = found && isRealmOwned(found) ? found : null;
+    if (!runtime) return;
+    return runtime.on('change', (state) => {
+      const choice =
+        state.analytics && state.marketing
+          ? 'accept'
+          : !state.analytics && !state.marketing
+            ? 'reject'
+            : 'partial';
+      const { origin, pathname, search, hash } = window.location;
+      const uri = `${origin}${pathname}${search}${hash}`;
+      telemetryRef.current.sendConsentChangedMessage([
+        {
+          ...getBaseDataAttributes('consent', 'consent'),
+          choice,
+          mode: runtime.mode,
+          configuredMode: runtime.configuredMode,
+          regionSource: runtime.region.source,
+          gpc: runtime.gpc,
+        },
+        getBaseDataAttributes(uri, 'page', uri),
+      ]);
+    });
+  }, []);
+}

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

@@ -19,6 +19,20 @@ const fallbacks = {
   useOtelTelemetry: () => ({ send: () => {} }),
   useBreadcrumbs: () => ({ breadcrumbs: [], siblings: undefined }),
   useBanner: () => ({ banner: undefined, dismissBanner: () => {} }),
+  useConsent: () => ({
+    enabled: false,
+    config: undefined,
+    mode: undefined,
+    state: undefined,
+    decided: false,
+    gpc: false,
+    isDialogOpen: false,
+    openDialog: () => {},
+    closeDialog: () => {},
+    accept: () => {},
+    reject: () => {},
+    save: () => {},
+  }),
   useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
   useUserMenu: () => ({}),
   usePageData: () => null,

package/src/core/styles/global.ts

@@ -28,6 +28,7 @@ import { code } from '@redocly/theme/components/CodeBlock/variables';
 import { productPicker } from '@redocly/theme/components/Product/variables';
 import { markdown } from '@redocly/theme/components/Markdown/variables';
 import { banner } from '@redocly/theme/components/Banner/variables';
+import { consent } from '@redocly/theme/components/Consent/variables';
 import { markdownAccordion } from '@redocly/theme/markdoc/components/Accordion/variables';
 import { markdownTabs } from '@redocly/theme/markdoc/components/Tabs/variables';
 import { markdownNumberedList } from '@redocly/theme/markdoc/components/NumberedList/variables';
@@ -1336,6 +1337,7 @@ export const styles = css<{ palette?: string }>`
     ${badges}
     ${banner}
     ${borders}
+    ${consent}
     ${breadcrumbs}
     ${button}
     ${aiAssistantButton}

package/src/core/types/consent.ts

@@ -0,0 +1,51 @@
+import type { ConsentConfig } from '@redocly/config';
+import type { TranslationKey } from './l10n';
+
+export type ConsentCategoryId = 'necessary' | 'analytics' | 'marketing';
+
+export type ConsentCategory = {
+  id: ConsentCategoryId;
+  locked: boolean;
+  titleTranslationKey: TranslationKey;
+  descriptionTranslationKey: TranslationKey;
+  titleDefault: string;
+  descriptionDefault: string;
+};
+
+export type ConsentState = { necessary: true; analytics: boolean; marketing: boolean };
+
+export type ConsentChoice = { analytics?: boolean; marketing?: boolean };
+
+export type ConsentProvider = 'onetrust' | 'cookiebot' | 'trustarc' | 'tcf';
+
+export type ConsentRuntime = {
+  configuredMode: 'auto' | 'opt-in' | 'opt-out' | ConsentProvider;
+  mode: 'opt-in' | 'opt-out' | ConsentProvider;
+  state: ConsentState;
+  decided: boolean;
+  gpc: boolean;
+  dialogOpen: boolean;
+  region: { source: 'timezone' | 'config' | 'none' | 'provider'; timeZone: string | null };
+  accept: () => void;
+  reject: () => void;
+  save: (next: ConsentChoice) => void;
+  open: () => void;
+  close: () => void;
+  reload: () => void;
+  on: (event: 'change' | 'open' | 'close', fn: (state: ConsentState) => void) => () => void;
+};
+
+export type UseConsentResult = {
+  enabled: boolean;
+  config: ConsentConfig | undefined;
+  mode: ConsentRuntime['mode'] | undefined;
+  state: ConsentState | undefined;
+  decided: boolean;
+  gpc: boolean;
+  isDialogOpen: boolean;
+  openDialog: () => void;
+  closeDialog: () => void;
+  accept: () => void;
+  reject: () => void;
+  save: (next: ConsentChoice) => void;
+};

package/src/core/types/hooks.ts

@@ -40,6 +40,7 @@ import type {
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
+import type { UseConsentResult } from './consent';
 
 import type { AiSearchError } from '../constants/search';
 
@@ -90,6 +91,7 @@ export type ThemeHooks = {
     banner: ResolvedBannerConfig | undefined;
     dismissBanner: (content: string) => void;
   };
+  useConsent: () => UseConsentResult;
   useSearch: (
     product?: string,
     autoSearchDisabled?: boolean,

package/src/core/types/index.ts

@@ -1,5 +1,6 @@
 export type * from './breadcrumb';
 export type * from './catalog';
+export type * from './consent';
 export type * from './l10n';
 export type * from './mcp';
 export type * from './feedback';

package/src/core/types/l10n.ts

@@ -513,7 +513,28 @@ export type TranslationKey =
   | 'diagram.zoomOut'
   | 'diagram.reset'
   | 'diagram.close'
-  | 'diagram.viewer';
+  | 'diagram.viewer'
+  | 'consent.title'
+  | 'consent.message'
+  | 'consent.privacyPolicy'
+  | 'consent.customize'
+  | 'consent.rejectAll'
+  | 'consent.acceptAll'
+  | 'consent.acceptAllCookies'
+  | 'consent.savePreferences'
+  | 'consent.dialog.title'
+  | 'consent.dialog.description'
+  | 'consent.dialog.close'
+  | 'consent.alwaysOn'
+  | 'consent.alwaysOff'
+  | 'consent.gpcNotice'
+  | 'consent.category.necessary.title'
+  | 'consent.category.necessary.description'
+  | 'consent.category.analytics.title'
+  | 'consent.category.analytics.description'
+  | 'consent.category.marketing.title'
+  | 'consent.category.marketing.description'
+  | 'consent.settingsLink';
 
 export type Locale = { code: string; name: string };
 

package/src/core/utils/consent-settings-link-placement.ts

@@ -0,0 +1,18 @@
+import type { ConsentConfig, RedoclyConfig } from '@redocly/config';
+
+export type SettingsLinkPlacement = 'footer' | 'none';
+
+export function resolveSettingsLinkPlacement(
+  consent: ConsentConfig | undefined,
+  footer: RedoclyConfig['footer'] | undefined,
+): SettingsLinkPlacement {
+  const choice = consent?.settingsLink ?? 'auto';
+  if (choice !== 'auto') {
+    return choice;
+  }
+  const footerShown =
+    Boolean(footer) &&
+    !footer?.hide &&
+    (Boolean(footer?.copyrightText) || (Array.isArray(footer?.items) && footer.items.length > 0));
+  return footerShown ? 'footer' : 'none';
+}