@redocly/theme 0.47.1 → 0.48.1

package/lib/icons/__tests__/IconTestUtils.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testIconComponent = testIconComponent;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+function testIconComponent(IconComponent, componentName) {
+    const dataName = `icons/${componentName}/${componentName}`;
+    return {
+        rendersCorrectlyWithDefaultProps: () => {
+            const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, null));
+            const svgElement = container.querySelector('svg');
+            expect(svgElement).toBeInTheDocument();
+            expect(container.firstChild).toHaveStyle('height: 16px; width: 16px;');
+        },
+        appliesCustomSizeAndColor: () => {
+            const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, { size: "24px", color: "--color-primary" }));
+            const svgElement = container.querySelector('svg');
+            expect(svgElement).toBeInTheDocument();
+            expect(container.firstChild).toHaveStyle('height: 24px; width: 24px;');
+            const pathElement = container.querySelector('path');
+            expect(pathElement).toHaveStyle('fill: var(--color-primary);');
+        },
+        hasCorrectDataComponentName: () => {
+            const { container } = (0, react_2.render)(react_1.default.createElement(IconComponent, null));
+            expect(container.firstChild).toHaveAttribute('data-component-name', dataName);
+        },
+    };
+}
+//# sourceMappingURL=IconTestUtils.js.map

package/lib/layouts/CodeWalkthroughLayout.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeWalkthroughLayout = CodeWalkthroughLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const core_1 = require("../core");
 function CodeWalkthroughLayout({ className, children, }) {
     return (react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/CodeWalkthroughLayout", className: className },
         react_1.default.createElement(ContentWrapper, null, children)));
@@ -59,8 +60,10 @@ const ContentWrapper = styled_components_1.default.section `
 
     /* Full-width styling for all .code-walkthroughs */
     .code-walkthrough {
-      max-width: none;
       width: 100%;
+      max-width: ${core_1.breakpoints.max};
+      margin-left: auto;
+      margin-right: auto;
     }
 
     &:first-child > h1:first-child {

package/lib/markdoc/components/CodeWalkthrough/CodeContainer.js

@@ -43,7 +43,7 @@ function CodeContainer({ highlightedCode, toolbar, }) {
             }
         }, 200);
     }, [activeStep]);
-    return (react_1.default.createElement(CodeContainerWrapper, { ref: compRef, hideCodeColors: !isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
+    return (react_1.default.createElement(CodeContainerWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeContainer", ref: compRef, hideCodeColors: !isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
         react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { dangerouslySetInnerHTML: { __html: highlightedCode } }),
         toolbar));
 }

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -11,7 +11,7 @@ function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersEleme
     if (filters.length === 0) {
         return null;
     }
-    return (react_1.default.createElement(FilterWrapper, { ref: filtersElementRef }, filters.map(({ label, items, id }) => {
+    return (react_1.default.createElement(FilterWrapper, { ref: filtersElementRef, "data-component-name": "Markdoc/CodeWalkthrough/CodeFilters" }, filters.map(({ label, items, id }) => {
         return (react_1.default.createElement(Filter, { key: id },
             label && react_1.default.createElement(FilterName, null,
                 label,
@@ -24,8 +24,9 @@ function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersEleme
 }
 const Filter = styled_components_1.default.div `
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-xs);
+  max-width: 100%;
 `;
 const FilterName = styled_components_1.default.div `
   color: var(--color-text-primary);
@@ -46,13 +47,25 @@ const FilterWrapper = styled_components_1.default.div `
   top: calc(var(--navbar-height));
   background-color: var(--bg-color);
   z-index: 1;
+  max-width: var(--md-content-max-width);
 `;
 const ButtonsWrapper = styled_components_1.default.div `
   display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
 `;
 const TagButton = (0, styled_components_1.default)(Tag_1.Tag) `
   cursor: pointer;
   padding: 0px var(--spacing-xs);
   margin-right: var(--spacing-xs);
+  max-width: 100%;
+  margin-bottom: var(--spacing-xs);
+
+  ${Tag_1.ContentWrapper} {
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 `;
 //# sourceMappingURL=CodeFilters.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -38,7 +38,7 @@ const CodePanelToolbar_1 = require("../../../markdoc/components/CodeWalkthrough/
 function CodePanel({ files, downloadAssociatedFiles, preview, }) {
     const { activeFile, handleTabSwitch, highlightedCode } = (0, hooks_1.useCodePanel)(files);
     const { handleDownloadCode } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
-    return (react_1.default.createElement(CodePanelWrapper, null,
+    return (react_1.default.createElement(CodePanelWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanel" },
         preview ? (react_1.default.createElement(CodePanelPreview_1.CodePanelPreview, null, preview.map((element, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, element))))) : null,
         react_1.default.createElement(CodePanelHeader_1.CodePanelHeader, { files: files, activeTabName: (activeFile === null || activeFile === void 0 ? void 0 : activeFile.path) || '', handleTabSwitch: handleTabSwitch, onDownloadCode: () => handleDownloadCode([...files, ...downloadAssociatedFiles]) }),
         react_1.default.createElement(CodeContainer_1.CodeContainer, { key: (activeFile === null || activeFile === void 0 ? void 0 : activeFile.path) || '', highlightedCode: highlightedCode, toolbar: react_1.default.createElement(CodePanelToolbar_1.CodePanelToolbar, { file: activeFile }) })));

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.js

@@ -27,7 +27,6 @@ exports.CodePanelHeader = CodePanelHeader;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
-const utils_1 = require("../../../core/utils");
 const OverflowMenuVerticalIcon_1 = require("../../../icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon");
 const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
@@ -35,6 +34,7 @@ const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuIte
 const DownloadIcon_1 = require("../../../icons/DownloadIcon/DownloadIcon");
 const Button_1 = require("../../../components/Button/Button");
 function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode, }) {
+    const renderableFiles = (0, hooks_1.useRenderableFiles)(files);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const tabRefs = (0, react_1.useRef)([]);
@@ -42,47 +42,49 @@ function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode
     const [hiddenFiles, setHiddenFiles] = (0, react_1.useState)([]);
     (0, react_1.useEffect)(() => {
         const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === activeTabName);
-        if (activeTab) {
-            activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
+        const tabsWrapper = tabsWrapperRef.current;
+        if (activeTab && tabsWrapper) {
+            const { left: wrapperLeft, right: wrapperRight } = tabsWrapper.getBoundingClientRect();
+            const { left: tabLeft, right: tabRight } = activeTab.getBoundingClientRect();
+            const tabHidden = tabLeft < wrapperLeft || tabRight > wrapperRight;
+            if (tabHidden) {
+                activeTab.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
         }
-    }, [activeTabName]);
-    (0, react_1.useEffect)(() => {
         const calculateHiddenFiles = () => {
             if (!tabsWrapperRef.current)
                 return;
             const { left: wrapperLeft, right: wrapperRight } = tabsWrapperRef.current.getBoundingClientRect();
-            const hidden = files.filter((_, i) => {
+            const hidden = [];
+            for (let i = 0; i < renderableFiles.length; i++) {
                 const tab = tabRefs.current[i];
                 if (!tab)
-                    return false;
+                    continue;
                 const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
-                return tabLeft < wrapperLeft || tabRight > wrapperRight;
-            });
+                const visible = tabLeft > wrapperLeft && tabRight < wrapperRight;
+                if (!visible) {
+                    hidden.push(renderableFiles[i]);
+                }
+            }
             setHiddenFiles(hidden);
         };
         calculateHiddenFiles();
         window.addEventListener('resize', calculateHiddenFiles);
         return () => window.removeEventListener('resize', calculateHiddenFiles);
-    }, [files]);
-    const getFileTypeIcon = (0, react_1.useCallback)((basename) => {
-        var _a;
-        const extension = ((_a = basename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
-        return (0, utils_1.getFileIconByExt)(extension);
-    }, []);
+    }, [activeTabName, files, renderableFiles]);
     return (react_1.default.createElement(CodePanelHeaderWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanelHeader" },
         react_1.default.createElement(TabsWrapper, { ref: tabsWrapperRef },
-            react_1.default.createElement(Tabs, null, files.map(({ path, basename }, i) => {
-                const FileIcon = getFileTypeIcon(basename);
+            react_1.default.createElement(Tabs, null, renderableFiles.map(({ path, basename, FileIcon, parentFolder, isNameDuplicate, inRootDir }, i) => {
                 return (react_1.default.createElement(Tab, { ref: (el) => (tabRefs.current[i] = el), "data-name": path, active: path === activeTabName, key: i, onClick: () => handleTabSwitch(path) },
                     react_1.default.createElement(FileIcon, null),
-                    basename));
+                    basename,
+                    isNameDuplicate && !inRootDir ? react_1.default.createElement(Dirname, null, parentFolder) : null));
             })),
             react_1.default.createElement(Gradient, null)),
         react_1.default.createElement(ActionBar, null,
             hiddenFiles.length ? (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(StyledOverflowMenuVerticalIcon, { size: "14px" }), alignment: "end" },
-                react_1.default.createElement(StyledDropdownMenu, null, hiddenFiles.map(({ path, basename }, i) => {
-                    const FileIcon = getFileTypeIcon(basename);
-                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { active: path === activeTabName, key: i, onAction: () => handleTabSwitch(path), prefix: react_1.default.createElement(FileIcon, null), content: basename }));
+                react_1.default.createElement(StyledDropdownMenu, null, hiddenFiles.map(({ path, basename, FileIcon, isNameDuplicate, inRootDir, parentFolder }, i) => {
+                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { active: path === activeTabName, key: i, onAction: () => handleTabSwitch(path), prefix: react_1.default.createElement(FileIcon, null), content: isNameDuplicate && !inRootDir ? `${parentFolder}/${basename}` : basename }));
                 })))) : null,
             react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(DownloadIcon_1.DownloadIcon, null), onClick: onDownloadCode, size: "small" }, translate('codeWalkthrough.download', 'Download')))));
 }
@@ -108,13 +110,17 @@ const Gradient = styled_components_1.default.div `
 `;
 const Tabs = styled_components_1.default.div `
   display: flex;
-  overflow-x: auto;
+  overflow-x: hidden;
   padding-right: var(--spacing-base);
 
   &::-webkit-scrollbar {
     display: none;
   }
 `;
+const Dirname = styled_components_1.default.span `
+  font-size: var(--font-size-sm);
+  color: var(--text-color-description);
+`;
 const ActionBar = styled_components_1.default.div `
   display: flex;
 `;
@@ -129,7 +135,7 @@ const Tab = styled_components_1.default.button `
   gap: var(--spacing-xs);
   color: var(--text-color-secondary);
   white-space: nowrap;
-
+  scroll-margin-right: var(--spacing-base);
   ${({ active }) => active
     ? (0, styled_components_1.css) `
           color: var(--text-color-primary);

package/lib/markdoc/components/CodeWalkthrough/CodePanelPreview.js

@@ -36,7 +36,7 @@ function CodePanelPreview({ children }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    return (react_1.default.createElement(CodePanelPreviewWrapper, null,
+    return (react_1.default.createElement(CodePanelPreviewWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanelPreview" },
         react_1.default.createElement(PreviewDropdown, { onClick: () => setIsOpen(!isOpen) },
             translate('codeWalkthrough.preview', 'Preview'),
             isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)),

package/lib/markdoc/components/CodeWalkthrough/CodePanelToolbar.js

@@ -34,7 +34,7 @@ const CopyButton_1 = require("../../../components/Buttons/CopyButton");
 function CodePanelToolbar({ file }) {
     const { getFileText } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
     const fileContent = getFileText(file);
-    return (react_1.default.createElement(CodeToolbarWrapper, null,
+    return (react_1.default.createElement(CodeToolbarWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanelToolbar" },
         react_1.default.createElement(CopyButton_1.CopyButton, { data: fileContent, type: "compound", variant: "secondary", size: "medium" })));
 }
 const CodeToolbarWrapper = styled_components_1.default.div `

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -41,7 +41,7 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         if (lockObserver) {
             lockObserver.current = true;
             if (compRef.current) {
-                compRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                compRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
             }
             setActiveStep(id);
             setTimeout(() => {
@@ -71,7 +71,7 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         }
         const filtersElementHeight = ((_a = filtersElementRef === null || filtersElementRef === void 0 ? void 0 : filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
         const navbarHeight = ((_b = document.querySelector('nav')) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
-        setScrollMarginTop(filtersElementHeight + navbarHeight);
+        setScrollMarginTop(filtersElementHeight + navbarHeight + 10);
         return () => {
             if (currentCompRef) {
                 unregister(currentCompRef);
@@ -79,9 +79,12 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         };
     }, [activeStep, register, unregister, filtersElementRef]);
     if (!areConditionsMet({ when, unless })) {
+        if (isActive) {
+            setActiveStep(null);
+        }
         return null;
     }
-    return (react_1.default.createElement(exports.StepWrapper, { ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, "data-step-key": stepKey, "data-step-active": isActive, onClick: handleActivateStep, onFocus: handleActivateStep, tabIndex: 0 },
+    return (react_1.default.createElement(exports.StepWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeStep", ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, "data-step-key": stepKey, "data-step-active": isActive, onClick: handleActivateStep, onFocus: handleActivateStep, tabIndex: 0 },
         react_1.default.createElement(StepContent, { isActive: isActive },
             heading ? react_1.default.createElement(StepHeading, null, heading) : null,
             children)));

package/lib/markdoc/components/CodeWalkthrough/CodeToggle.js

@@ -41,7 +41,7 @@ function CodeToggle(props) {
         return null;
     }
     const checked = toggleState.value;
-    return (react_1.default.createElement(exports.ToggleWrapper, null,
+    return (react_1.default.createElement(exports.ToggleWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeToggle" },
         react_1.default.createElement(ToggleContentWrapper, null,
             react_1.default.createElement(exports.ToggleSubtitle, null,
                 react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeToggleState(id, newValue) }),

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -55,7 +55,7 @@ function CodeWalkthrough(_a) {
     const { filtersElementRef } = stepsState;
     return (react_1.default.createElement(contexts_1.CodeWalkthroughStepsContext.Provider, { value: stepsState },
         react_1.default.createElement(contexts_1.CodeWalkthroughControlsStateContext.Provider, { value: controlsState },
-            react_1.default.createElement(CodeWalkthroughWrapper, { className: "code-walkthrough" },
+            react_1.default.createElement(CodeWalkthroughWrapper, { className: "code-walkthrough", "data-component-name": "Markdoc/CodeWalkthrough/CodeWalkthrough" },
                 react_1.default.createElement(DocsPanel, null,
                     react_1.default.createElement(CodeFilters_1.CodeFilters, { filters: activeFilters, getFilterState: getFilterState, handleFilterSelect: changeFilterState, filtersElementRef: filtersElementRef }),
                     react_1.default.createElement(ContentWrapper, null, children)),

package/lib/markdoc/components/CodeWalkthrough/Input.js

@@ -49,14 +49,15 @@ function Input(props) {
         setValue(inputValue);
         debouncedSave(id, inputValue);
     };
-    return (react_1.default.createElement(InputWrapper, null,
+    return (react_1.default.createElement(InputWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/Input" },
         label && react_1.default.createElement(Label, null, label),
         react_1.default.createElement(StyledInput, { id: id, value: value, onChange: handleChange, "aria-label": label, placeholder: placeholder })));
 }
 const InputWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  margin: var(--md-paragraph-margin);
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
 `;
 const Label = styled_components_1.default.p `
   color: var(--text-color-secondary);
@@ -64,6 +65,7 @@ const Label = styled_components_1.default.p `
   line-height: var(--line-height-base);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-medium);
+  margin-bottom: var(--spacing-xxs) !important;
 `;
 const StyledInput = styled_components_1.default.input `
   border: 1px solid var(--border-color-primary);

package/lib/markdoc/tags/code-walkthrough.js

@@ -41,6 +41,11 @@ exports.codeWalkthrough = {
                 render: false,
                 required: false,
             },
+            __idx: {
+                type: Number,
+                render: true,
+                required: false,
+            },
         },
         slots: {
             preview: { required: false, render: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.47.1",
+  "version": "0.48.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -46,7 +46,7 @@
     "@types/jest-when": "3.5.5",
     "@types/lodash.debounce": "4.0.9",
     "@types/lodash.throttle": "4.1.9",
-    "@types/node": "18.19.3",
+    "@types/node": "22.10.5",
     "@types/react": "18.3.9",
     "@types/react-dom": "18.3.5",
     "@types/styled-components": "5.1.34",
@@ -86,7 +86,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.19.4"
+    "@redocly/config": "0.20.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Feedback/Mood.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -41,7 +41,7 @@ export type MoodProps = {
       neutral?: ReasonsSettingsSchema;
       dissatisfied?: ReasonsSettingsSchema;
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -52,7 +52,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState('');
   const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -131,8 +131,7 @@ 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 displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
     onSubmit({
@@ -162,7 +161,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     return (
       <MoodWrapper data-component-name="Feedback/Mood">
         <StyledFormMandatoryFields>
-          <Label data-translation-key="feedback.settings.submitText">
+          <Label standAlone={true} data-translation-key="feedback.settings.submitText">
             {submitText ||
               translate(
                 'feedback.settings.submitText',
@@ -179,7 +178,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     <MoodWrapper data-component-name="Feedback/Mood" className={className}>
       <StyledForm onSubmit={onSubmitMoodForm}>
         <StyledFormMandatoryFields>
-          <Label data-translation-key="feedback.settings.label">
+          <Label standAlone={true} data-translation-key="feedback.settings.label">
             {label || translate('feedback.settings.label', 'Was this helpful?')}
           </Label>
           <StyledMandatoryFieldContainer>
@@ -241,18 +240,18 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}
@@ -295,12 +294,21 @@ const MoodWrapper = styled.div`
   align-items: center;
 `;
 
-const Label = styled.h4`
+const Label = styled.h4<{ standAlone?: boolean }>`
   font-family: var(--feedback-font-family);
   font-weight: var(--font-weight-regular);
-  font-size: var(--feedback-header-font-size);
-  line-height: var(--feedback-header-line-height);
-  color: var(--feedback-header-text-color);
+  font-size: var(--feedback-font-size);
+  line-height: var(--feedback-line-height);
+  color: var(--feedback-text-color);
+
+  ${({ standAlone = false }) =>
+    standAlone &&
+    css`
+      font-size: var(--feedback-header-font-size);
+      line-height: var(--feedback-header-line-height);
+      color: var(--feedback-header-text-color);
+    `}
+
   margin: 0;
 `;
 

package/src/components/Feedback/Rating.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -35,7 +35,7 @@ export type RatingProps = {
       component?: string;
       items: string[];
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -46,7 +46,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
@@ -83,8 +83,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
   const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   useEffect(() => {
     if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
@@ -154,18 +153,18 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Feedback/Scale.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { breakpoints } from '@redocly/theme/core/utils';
@@ -37,7 +37,7 @@ export type ScaleProps = {
       component?: string;
       items: string[];
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -50,7 +50,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     rightScaleLabel,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState(0);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -85,8 +85,7 @@ 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 displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const handleCancel = () => {
     setScore(0);
@@ -179,18 +178,18 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}