@redocly/theme 0.1.22 → 0.1.25

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.22",
+  "version": "0.1.25",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",

package/src/Button/Button.tsx

@@ -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

@@ -5,14 +5,14 @@ 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';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
 
 interface FooterProps {
   data: NavGroupRecord;
 }
 
 export function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null {
-  const { footer } = useThemeSettings(USER_THEME_ALIAS);
+  const { footer } = useThemeSettings(DEFAULT_THEME_NAME);
 
   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

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useThemeSettings } from '@portal/hooks';
-import { USER_THEME_ALIAS } from '@portal/constants';
+import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { ResolvedConfigLinks } from '@theme/types/portal';
 import { NavbarMenu } from '@theme/Navbar';
 
@@ -13,7 +13,7 @@ interface NavbarProps {
 }
 
 export function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null {
-  const settings = useThemeSettings(USER_THEME_ALIAS);
+  const settings = useThemeSettings(DEFAULT_THEME_NAME);
   const searchSettings = settings.search;
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== '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 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/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"
+    />
+  );
 }

package/src/Tooltip/Tooltip.tsx

@@ -50,6 +50,7 @@ export function TooltipComponent({
       onMouseLeave={isControlled ? undefined : handleLeave}
       onClick={isControlled ? undefined : handleLeave}
       className={`tooltip-${className}`}
+      data-component-name="Tooltip/Tooltip"
     >
       {children}
       {isOpened && (

package/src/Typography/H1.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { typography } from '@theme/utils';
 
 export const H1 = styled.h1.attrs(() => ({
-  'data-component-name': 'Headings/H1',
+  'data-component-name': 'Typography/H1',
 }))`
   color: var(--color-content);
   margin: 0 0 25px;

package/src/Typography/H2.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { typography } from '@theme/utils';
 
 export const H2 = styled.h2.attrs(() => ({
-  'data-component-name': 'Headings/H2',
+  'data-component-name': 'Typography/H2',
 }))`
   color: var(--color-content);
   margin: 0 0 20px;

package/src/Typography/H3.ts

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { typography } from '@theme/utils';
 
 export const H3 = styled.h3.attrs(() => ({
-  'data-component-name': 'Headings/H3',
+  'data-component-name': 'Typography/H3',
 }))`
   color: var(--color-content);
 

package/src/Typography/SectionHeader.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const SectionHeader = styled.h2`
+export const SectionHeader = styled.h2.attrs(() => ({
+  'data-component-name': 'Typography/SectionHeader',
+}))`
   color: var(--h-color);
   font-size: 1.75em;
   font-weight: var(--font-weight-regular);

package/src/icons/ShelfIcon/ShelfIcon.tsx

@@ -32,7 +32,9 @@ const IntShelfIcon = ({ className, style }: ShelfIconProps): JSX.Element => (
   </svg>
 );
 
-export const ShelfIcon = styled(IntShelfIcon)`
+export const ShelfIcon = styled(IntShelfIcon).attrs(() => ({
+  'data-component-name': 'icons/ShelfIcon/ShelfIcon',
+}))`
   ${({ size = '9px', float = '', direction, color }) => css`
     height: ${size};
     width: ${size};

package/src/mocks/hooks/index.ts

@@ -3,6 +3,12 @@ interface RawTheme {
   settings?: any;
 }
 
+interface PageLink {
+  label: string;
+  link: string;
+  type: 'link';
+}
+
 export function useThemeSettings(name: string): RawTheme['settings'] {
   return {
     name,
@@ -15,3 +21,18 @@ export function useThemeSettings(name: string): RawTheme['settings'] {
     },
   };
 }
+
+export function useSidebarSiblingsData(): { nextPage: PageLink; prevPage: PageLink } {
+  return {
+    nextPage: {
+      type: 'link',
+      label: 'Page',
+      link: '#next',
+    },
+    prevPage: {
+      type: 'link',
+      label: 'Page',
+      link: '#prev',
+    },
+  };
+}