@redocly/theme 0.1.21 → 0.1.24

package/Sidebar/SidebarLayout.d.ts

@@ -3,5 +3,5 @@ interface SidebarLayoutProps {
     versions: React.ReactNode;
     menu: React.ReactNode;
 }
-export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element;
+export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/Sidebar/SidebarLayout.js

@@ -21,10 +21,13 @@ function SidebarLayout(_a) {
     var versions = _a.versions, menu = _a.menu;
     var _b = (0, useMobileMenu_1.useMobileMenu)(), isOpen = _b[0], setIsOpen = _b[1];
     var toggleMenu = function () { return setIsOpen(!isOpen); };
-    var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).search || {}, hide = _c.hide, placement = _c.placement;
+    var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME), search = _c.search, sidebar = _c.sidebar;
+    if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
+        return null;
+    }
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout" },
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
-        !hide && placement === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
+        !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));

package/SidebarLogo/SidebarLogo.js

@@ -16,7 +16,7 @@ function SidebarLogo(_a) {
         return null;
     }
     var logo = react_1.default.createElement(LogoImgEl, { src: imageUrl, alt: altText || 'logo' });
-    return (react_1.default.createElement(LogoWrap, { "data-cy": dataTestId, style: { backgroundColor: backgroundColor } }, href ? react_1.default.createElement(Link, { href: href }, logo) : logo));
+    return (react_1.default.createElement(LogoWrap, { "data-cy": dataTestId, style: { backgroundColor: backgroundColor }, "data-component-name": "SidebarLogo/SidebarLogo" }, href ? react_1.default.createElement(Link, { href: href }, logo) : logo));
 }
 exports.SidebarLogo = SidebarLogo;
 var LogoImgEl = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"], ["\n  max-height: var(--logo-max-height);\n  max-width: var(--logo-max-width);\n  padding: var(--logo-padding);\n  width: 100%;\n  display: block;\n"])));

package/SourceCode/SourceCode.js

@@ -18,13 +18,13 @@ function SourceCode(_a) {
     var lang = _a.lang, source = _a.source, externalSource = _a.externalSource, withCopyButton = _a.withCopyButton, _d = _a.dataTestId, dataTestId = _d === void 0 ? 'source-code' : _d;
     var _source = source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)) || '';
     if (withCopyButton) {
-        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: source }, function (_a) {
+        return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { data: source, "data-component-name": "SourceCode/SourceCode" }, function (_a) {
             var renderCopyButton = _a.renderCopyButton;
             return (react_1.default.createElement(SamplesPanelControls_1.SampleControlsWrap, null,
                 react_1.default.createElement(SamplesPanelControls_1.SampleControls, { "data-cy": "copy-button" }, renderCopyButton()),
                 react_1.default.createElement(Code, { lang: lang, source: _source, dataTestId: dataTestId })));
         }));
     }
-    return react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: _source });
+    return (react_1.default.createElement(Code, { dataTestId: dataTestId, lang: lang, source: _source, "data-component-name": "SourceCode/SourceCode" }));
 }
 exports.SourceCode = SourceCode;

package/Tooltip/Tooltip.js

@@ -51,7 +51,7 @@ function TooltipComponent(_a) {
     var handleLeave = (0, react_1.useCallback)(function () {
         handleClose();
     }, [handleClose]);
-    return (react_1.default.createElement(TooltipWrapper, { onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className) },
+    return (react_1.default.createElement(TooltipWrapper, { onMouseEnter: isControlled ? undefined : handleEnter, onMouseLeave: isControlled ? undefined : handleLeave, onClick: isControlled ? undefined : handleLeave, className: "tooltip-".concat(className), "data-component-name": "Tooltip/Tooltip" },
         children,
         isOpened && (react_1.default.createElement(TooltipBody, { "data-cy": dataTestId, placement: placement, width: width }, tip))));
 }

package/Typography/H1.js

@@ -11,6 +11,6 @@ exports.H1 = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("../utils");
 exports.H1 = styled_components_1.default.h1.attrs(function () { return ({
-    'data-component-name': 'Headings/H1',
+    'data-component-name': 'Typography/H1',
 }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 25px;\n\n  ", ";\n"])), (0, utils_1.typography)('h1', 'h'));
 var templateObject_1;

package/Typography/H2.js

@@ -11,6 +11,6 @@ exports.H2 = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("../utils");
 exports.H2 = styled_components_1.default.h2.attrs(function () { return ({
-    'data-component-name': 'Headings/H2',
+    'data-component-name': 'Typography/H2',
 }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"], ["\n  color: var(--color-content);\n  margin: 0 0 20px;\n\n  ", ";\n"])), (0, utils_1.typography)('h2', 'h'));
 var templateObject_1;

package/Typography/H3.js

@@ -11,6 +11,6 @@ exports.H3 = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("../utils");
 exports.H3 = styled_components_1.default.h3.attrs(function () { return ({
-    'data-component-name': 'Headings/H3',
+    'data-component-name': 'Typography/H3',
 }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n\n  ", ";\n"], ["\n  color: var(--color-content);\n\n  ", ";\n"])), (0, utils_1.typography)('h3', 'h'));
 var templateObject_1;

package/Typography/SectionHeader.d.ts

@@ -1 +1,3 @@
-export declare const SectionHeader: import("styled-components").StyledComponent<"h2", any, {}, never>;
+export declare const SectionHeader: import("styled-components").StyledComponent<"h2", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Typography/SectionHeader.js

@@ -9,5 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionHeader = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-exports.SectionHeader = styled_components_1.default.h2(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"])));
+exports.SectionHeader = styled_components_1.default.h2.attrs(function () { return ({
+    'data-component-name': 'Typography/SectionHeader',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"], ["\n  color: var(--h-color);\n  font-size: 1.75em;\n  font-weight: var(--font-weight-regular);\n  text-align: center;\n  margin: 2.65em 0;\n  padding: 0 20px;\n  font-family: var(--h-font-family);\n"])));
 var templateObject_1;

package/icons/ShelfIcon/ShelfIcon.d.ts

@@ -7,4 +7,6 @@ export interface ShelfIconProps {
     direction: 'left' | 'right' | 'up' | 'down';
     style?: React.CSSProperties;
 }
-export declare const ShelfIcon: import("styled-components").StyledComponent<({ className, style }: ShelfIconProps) => JSX.Element, any, {}, never>;
+export declare const ShelfIcon: import("styled-components").StyledComponent<({ className, style }: ShelfIconProps) => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/icons/ShelfIcon/ShelfIcon.js

@@ -43,7 +43,9 @@ var IntShelfIcon = function (_a) {
         React.createElement("path", { d: "M0.205025 1.19467L3.00503 3.99467C3.27839 4.26804 3.72161 4.26804 3.99497 3.99467C4.26834 3.7213 4.26834 3.27809 3.99497 3.00472L1.19497 0.20472C0.921608 -0.0686469 0.478392 -0.0686469 0.205025 0.20472C-0.0683418 0.478087 -0.0683417 0.921303 0.205025 1.19467Z" }),
         React.createElement("path", { d: "M3.00503 3.00501L0.205025 5.80501C-0.0683417 6.07838 -0.0683417 6.5216 0.205025 6.79496C0.478392 7.06833 0.921608 7.06833 1.19497 6.79496L3.99497 3.99496C4.26834 3.7216 4.26834 3.27838 3.99497 3.00501C3.72161 2.73165 3.27839 2.73165 3.00503 3.00501Z" })));
 };
-exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"], ["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"])), function (_a) {
+exports.ShelfIcon = (0, styled_components_1.default)(IntShelfIcon).attrs(function () { return ({
+    'data-component-name': 'icons/ShelfIcon/ShelfIcon',
+}); })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"], ["\n  ", "\n  vertical-align: middle;\n  transition: transform 0.2s ease-out;\n"])), function (_a) {
     var _b = _a.size, size = _b === void 0 ? '9px' : _b, _c = _a.float, float = _c === void 0 ? '' : _c, direction = _a.direction, color = _a.color;
     return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "], ["\n    height: ", ";\n    width: ", ";\n    float: ", ";\n    transform: rotateZ(", ");\n    fill: ", ";\n  "])), size, size, float, directionMap[direction], (0, utils_1.getCssColorVariable)(color));
 });

package/mocks/hooks/index.d.ts

@@ -2,5 +2,14 @@ interface RawTheme {
     name: string;
     settings?: any;
 }
+interface PageLink {
+    label: string;
+    link: string;
+    type: 'link';
+}
 export declare function useThemeSettings(name: string): RawTheme['settings'];
+export declare function useSidebarSiblingsData(): {
+    nextPage: PageLink;
+    prevPage: PageLink;
+};
 export {};

package/mocks/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemeSettings = void 0;
+exports.useSidebarSiblingsData = exports.useThemeSettings = void 0;
 function useThemeSettings(name) {
     return {
         name: name,
@@ -14,3 +14,18 @@ function useThemeSettings(name) {
     };
 }
 exports.useThemeSettings = useThemeSettings;
+function useSidebarSiblingsData() {
+    return {
+        nextPage: {
+            type: 'link',
+            label: 'Page',
+            link: '#next',
+        },
+        prevPage: {
+            type: 'link',
+            label: 'Page',
+            link: '#prev',
+        },
+    };
+}
+exports.useSidebarSiblingsData = useSidebarSiblingsData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.1.21",
+  "version": "0.1.24",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/settings.yaml

@@ -7,3 +7,9 @@ toc:
     label: On this page
 navigation:
   hide: false
+navbar:
+  hide: false
+sidebar:
+  hide: false
+footer:
+  hide: false

package/src/Button/Button.tsx

@@ -16,7 +16,7 @@ export interface ButtonProps {
   size?: ButtonSize;
   extraClass?: string;
   to?: string;
-  onClick?: () => void;
+  onClick?: (e?: any) => void;
 }
 
 const getBlink = (): Keyframes => keyframes`
@@ -127,7 +127,7 @@ const StyledButton = styled.button.attrs(({ color = 'default', extraClass }: But
     `}
 `;
 
-export const Button: React.FC<ButtonProps> = (props) => {
+const ButtonComponent: React.FC<ButtonProps> = (props) => {
   if (props.to) {
     return (
       <Link to={props.to}>
@@ -138,3 +138,5 @@ export const Button: React.FC<ButtonProps> = (props) => {
     return <StyledButton {...props} />;
   }
 };
+
+export const Button = styled(ButtonComponent)``;

package/src/CodeBlock/CodeBlock.ts

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 import { generateCodeBlockTokens } from '@theme/utils';
 
-export const CodeBlock = styled.div`
+export const CodeBlock = styled.div.attrs(() => ({
+  'data-component-name': 'CodeBlock/CodeBlock',
+}))`
   max-height: var(--code-block-max-height, 600px);
   word-break: var(--code-block-word-break, initial);
   /**

package/src/CopyButton/CopyButton.tsx

@@ -19,7 +19,12 @@ export const CopyButton = ({ text, dataTestId = 'copy-button' }: CopyButtonProps
   }
 
   return (
-    <Button color="secondary" onClick={write} data-cy={dataTestId}>
+    <Button
+      color="secondary"
+      onClick={write}
+      data-cy={dataTestId}
+      data-component-name="CopyButton/CopyButton"
+    >
       {title}
     </Button>
   );

package/src/Footer/Footer.tsx

@@ -4,13 +4,17 @@ import styled from 'styled-components';
 import { FooterColumns } from '@theme/Footer/FooterColumns';
 import { FooterCopyright } from '@theme/Footer/FooterCopyright';
 import type { NavGroupRecord } from '@theme/types/portal';
+import { useThemeSettings } from '@portal/hooks';
+import { USER_THEME_ALIAS } from '@portal/constants';
 
 interface FooterProps {
   data: NavGroupRecord;
 }
 
 export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
-  if (!(columns?.length || copyrightText)) {
+  const { footer } = useThemeSettings(USER_THEME_ALIAS);
+
+  if (!(columns?.length || copyrightText) || footer?.hide) {
     return null;
   }
 

package/src/JsonViewer/JsonViewer.tsx

@@ -103,7 +103,9 @@ function JsonComponent({ data, jsonSampleExpandLevel, className }: JsonProps): J
 
 export const Json = memo<JsonProps>(JsonComponent);
 
-export const JsonViewer = styled(Json)<JsonProps>`
+export const JsonViewer = styled(Json).attrs(() => ({
+  'data-component-name': 'JsonViewer/JsonViewer',
+}))<JsonProps>`
   .redoc-json code {
     background-color: var(--samples-panel-controls-background-color);
     color: var(--color-content-inverse);

package/src/Markdown/{StyledMarkdown.tsx → MarkdownWrapper.tsx}

@@ -95,8 +95,8 @@ export function headingAnchor(className = 'anchor'): FlattenSimpleInterpolation
   `;
 }
 
-export const StyledMarkdown = styled.main.attrs(() => ({
-  'data-component-name': 'Markdown/StyledMarkdown',
+export const MarkdownWrapper = styled.main.attrs(() => ({
+  'data-component-name': 'Markdown/MarkdownWrapper',
 }))`
   font-weight: var(--font-weight-regular);
   padding: 0;

package/src/Markdown/index.ts

@@ -6,4 +6,4 @@ export * from '@theme/Markdown/Heading';
 export * from '@theme/Markdown/MarkdownLayout';
 export * from '@theme/Markdown/Mermaid';
 export * from '@theme/Markdown/PageWrapper';
-export * from '@theme/Markdown/StyledMarkdown';
+export * from '@theme/Markdown/MarkdownWrapper';

package/src/Navbar/Navbar.tsx

@@ -12,11 +12,15 @@ interface NavbarProps {
   search: React.ReactNode;
 }
 
-export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element {
-  const searchThemeSettings = useThemeSettings(USER_THEME_ALIAS)?.search;
+export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
+  const settings = useThemeSettings(USER_THEME_ALIAS);
+  const searchSettings = settings.search;
   const hideSearch =
-    searchThemeSettings?.hide ||
-    (searchThemeSettings?.placement && searchThemeSettings?.placement !== 'navbar');
+    searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
+
+  if (settings?.navbar?.hide) {
+    return null;
+  }
 
   return (
     <NavbarContainer data-component-name="Navbar/Navbar">

package/src/OperationBadge/OperationBadge.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
   className: `operation-type ${props.type}`,
+  'data-component-name': 'OperationBadge/OperationBadge',
 }))<{ type: string }>`
   display: inline-flex;
   align-items: center;

package/src/PageNavigation/NextPageLink.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-import { usePageData } from '@portal/hooks/usePageData';
-import { useThemeSettings } from '@portal/hooks/';
-import { DEFAULT_THEME_NAME } from '@portal/constants/';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { Button } from '@theme/Button/Button';
 
 interface NextPageType {
-  nextPage?: ResolvedNavLinkItem | null;
+  nextPage?: ResolvedNavItemWithLink | null;
 }
 
 export function NextPageLink(): JSX.Element {
-  const { nextPage }: NextPageType = usePageData() || {};
+  const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
   const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
 
   if (!nextPage || themeSettings?.navigation?.hide) {
@@ -21,7 +20,12 @@ export function NextPageLink(): JSX.Element {
   const label = themeSettings?.navigation?.nextPageLink?.label || `Next to ${nextPage.label}`;
 
   return (
-    <Button variant="outlined" size="large" to={nextPage.link}>
+    <Button
+      variant="outlined"
+      size="large"
+      to={nextPage.link}
+      data-component-name="PageNavigation/NextPageLink"
+    >
       {label}
     </Button>
   );

package/src/PageNavigation/PreviousPageLink.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
 
-import type { ResolvedNavLinkItem } from '@theme/types/portal';
-import { usePageData } from '@portal/hooks/usePageData';
-import { useThemeSettings } from '@portal/hooks';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
+import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { Button } from '@theme/Button/Button';
 
 interface PreviousPageType {
-  prevPage?: ResolvedNavLinkItem | null;
+  prevPage?: ResolvedNavItemWithLink | null;
 }
 
 export function PreviousPageLink(): JSX.Element {
-  const { prevPage }: PreviousPageType = usePageData() || {};
+  const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
   const { themeSettings } = useThemeSettings(DEFAULT_THEME_NAME);
 
   if (!prevPage || themeSettings?.navigation?.hide) {
@@ -21,7 +20,12 @@ export function PreviousPageLink(): JSX.Element {
   const label = themeSettings?.navigation?.nextPageLink?.label || `Back to ${prevPage.label}`;
 
   return (
-    <Button variant="outlined" size="large" to={prevPage.link}>
+    <Button
+      variant="outlined"
+      size="large"
+      to={prevPage.link}
+      data-component-name="PageNavigation/PreviousPageLink"
+    >
       {label}
     </Button>
   );

package/src/Panel/CodePanel.ts

@@ -7,7 +7,9 @@ import { DarkHeader } from '@theme/Panel/DarkHeader';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
 
-export const CodePanel = styled(Panel)`
+export const CodePanel = styled(Panel).attrs(() => ({
+  'data-component-name': 'Panel/CodePanel',
+}))`
   > ${PanelHeader} {
     ${DarkHeader};
     min-height: 50px;

package/src/Panel/ContentPanel.ts

@@ -6,7 +6,9 @@ import { Panel } from '@theme/Panel/Panel';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelHeader } from '@theme/Panel/PanelHeader';
 
-export const ContentPanel = styled(Panel)`
+export const ContentPanel = styled(Panel).attrs(() => ({
+  'data-component-name': 'Panel/ContentPanel',
+}))`
   border: 1px solid var(--global-border-color);
 
   font-size: var(--font-size-base);

package/src/Panel/Panel.ts

@@ -4,7 +4,9 @@ import { PanelHeader } from '@theme/Panel/PanelHeader';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelComponent } from '@theme/Panel/PanelComponent';
 
-export const Panel = styled(PanelComponent)`
+export const Panel = styled(PanelComponent).attrs(() => ({
+  'data-component-name': 'Panel/Panel',
+}))`
   border-radius: var(--panels-border-radius);
 
   ${PanelHeader} + ${PanelBody} {

package/src/Panel/PanelBody.ts

@@ -18,7 +18,9 @@ interface PanelBodyProps {
   hidden?: boolean;
 }
 
-export const PanelBody = styled.div<PanelBodyProps>`
+export const PanelBody = styled.div.attrs(() => ({
+  'data-component-name': 'Panel/PanelBody',
+}))<PanelBodyProps>`
   ${({ animate }) => animate && showPanelAnimation};
   ${({ hidden }) => hidden && 'visibility: hidden'};
 

package/src/Panel/PanelComponent.tsx

@@ -44,6 +44,7 @@ export function PanelComponent({
       data-cy={
         typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null
       }
+      data-component-name="Panel/PanelComponent"
     >
       {header &&
         (typeof header === 'function' ? (

package/src/Panel/PanelHeader.ts

@@ -7,7 +7,9 @@ export interface PanelHeaderProps {
   toggle?: (e: BaseSyntheticEvent) => void;
 }
 
-export const PanelHeader = styled.div<PanelHeaderProps>`
+export const PanelHeader = styled.div.attrs(() => ({
+  'data-component-name': 'Panel/PanelHeader',
+}))<PanelHeaderProps>`
   position: relative;
   z-index: 1;
   display: flex;

package/src/Panel/PanelHeaderTitle.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const PanelHeaderTitle = styled.span`
+export const PanelHeaderTitle = styled.span.attrs(() => ({
+  'data-component-name': 'Panel/PanelHeaderTitle',
+}))`
   line-height: 1;
   margin-right: 5px;
   font-weight: 700;

package/src/SamplesPanelControls/SamplesPanelControls.ts

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 import { CodeBlock } from '@theme/CodeBlock';
 
-export const SamplesControlButton = styled.button`
+export const SamplesControlButton = styled.button.attrs(() => ({
+  'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
+}))`
   background-color: var(--samples-panel-controls-background-color);
   border: 0;
   outline: 0;

package/src/Search/ClearIcon.tsx

@@ -15,7 +15,9 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const ClearIcon = styled(Icon)`
+export const ClearIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'Search/ClearIcon',
+}))`
   position: absolute;
   cursor: pointer;
   width: 0.5em;

package/src/Search/SearchIcon.tsx

@@ -15,7 +15,9 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export const SearchIcon = styled(Icon)`
+export const SearchIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'Search/SearchIcon',
+}))`
   position: absolute;
   cursor: pointer;
   width: 1em;

package/src/Search/SidebarSearch.tsx

@@ -3,7 +3,9 @@ import styled from 'styled-components';
 import { Search } from '@theme/Search/Search';
 import { Popover } from '@theme/Search/Popover';
 
-export const SidebarSearch = styled(Search)`
+export const SidebarSearch = styled(Search).attrs(() => ({
+  'data-component-name': 'Search/SidebarSearch',
+}))`
   --search-input-text-color: var(--sidebar-item-active-color);
 
   ${Popover} {

package/src/Sidebar/MenuContainer.tsx

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const MenuContainer = styled.div`
+export const MenuContainer = styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/MenuContainer',
+}))`
   position: relative;
   overflow-y: auto;
   flex-grow: 1;

package/src/Sidebar/SeparatorItem.tsx

@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 
-export const SeparatorItem = styled(MenuItemLabel)`
+export const SeparatorItem = styled(MenuItemLabel).attrs(() => ({
+  'data-component-name': 'Sidebar/SeparatorItem',
+}))`
   cursor: default;
   font-weight: var(--font-weight-bold);
   color: var(--sidebar-separator-label-color);

package/src/Sidebar/SidebarLayout.tsx

@@ -5,8 +5,8 @@ import { Sidebar } from '@theme/Sidebar/Sidebar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
-import { useThemeSettings } from '@portal/hooks/';
-import { DEFAULT_THEME_NAME } from '@portal/constants/';
+import { useThemeSettings } from '@portal/hooks';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
 
 interface SidebarLayoutProps {
@@ -14,16 +14,20 @@ interface SidebarLayoutProps {
   menu: React.ReactNode;
 }
 
-export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element {
+export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
-  const { hide, placement } = useThemeSettings(DEFAULT_THEME_NAME).search || {};
+  const { search, sidebar } = useThemeSettings(DEFAULT_THEME_NAME);
+
+  if (sidebar?.hide) {
+    return null;
+  }
 
   return (
     <Wrapper data-component-name="Sidebar/SidebarLayout">
       <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
 
-      {!hide && placement === 'sidebar' ? <SidebarSearch /> : null}
+      {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen}>
         {versions}
         <MenuContainer>{menu}</MenuContainer>

package/src/SidebarLogo/SidebarLogo.tsx

@@ -23,7 +23,11 @@ export function SidebarLogo({
   const logo = <LogoImgEl src={imageUrl} alt={altText || 'logo'} />;
 
   return (
-    <LogoWrap data-cy={dataTestId} style={{ backgroundColor }}>
+    <LogoWrap
+      data-cy={dataTestId}
+      style={{ backgroundColor }}
+      data-component-name="SidebarLogo/SidebarLogo"
+    >
       {href ? <Link href={href}>{logo}</Link> : logo}
     </LogoWrap>
   );

package/src/SourceCode/SourceCode.tsx

@@ -56,7 +56,7 @@ export function SourceCode({
   const _source = source || externalSource?.sample?.get?.(externalSource) || '';
   if (withCopyButton) {
     return (
-      <CopyButtonWrapper data={source}>
+      <CopyButtonWrapper data={source} data-component-name="SourceCode/SourceCode">
         {({ renderCopyButton }) => (
           <SampleControlsWrap>
             <SampleControls data-cy="copy-button">{renderCopyButton()}</SampleControls>
@@ -67,5 +67,12 @@ export function SourceCode({
     );
   }
 
-  return <Code dataTestId={dataTestId} lang={lang} source={_source} />;
+  return (
+    <Code
+      dataTestId={dataTestId}
+      lang={lang}
+      source={_source}
+      data-component-name="SourceCode/SourceCode"
+    />
+  );
 }