@redocly/theme 0.15.1 → 0.17.0

package/lib/components/Sidebar/types.d.ts

@@ -11,10 +11,13 @@ export interface DrilldownMenuProps {
     back: () => void;
     item: ItemState;
     prevActiveItem?: ItemState;
+    className?: string;
 }
 export interface MenuItemProps {
     item: ItemState;
     activeItem?: ItemState;
+    className?: string;
+    isMobile?: boolean;
 }
 export interface NavItem {
     label?: string;

package/lib/components/SidebarActions/SidebarActions.d.ts

@@ -15,6 +15,7 @@ interface SidebarActionsProps {
     onChangeViewClick: () => void;
     onChangeCollapseSidebarClick: () => void;
     requestAccessButton?: React.ReactElement | null;
+    className?: string;
 }
-export declare const SidebarActions: ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, }: SidebarActionsProps) => JSX.Element;
+export declare const SidebarActions: ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }: SidebarActionsProps) => JSX.Element;
 export {};

package/lib/components/SidebarActions/SidebarActions.js

@@ -14,8 +14,8 @@ var LayoutVariant;
     LayoutVariant["STACKED"] = "stacked";
     LayoutVariant["THREE_PANEL"] = "three-panel";
 })(LayoutVariant = exports.LayoutVariant || (exports.LayoutVariant = {}));
-const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, }) => {
-    return (react_1.default.createElement(styled_1.ControlsWrap, { isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
+const SidebarActions = ({ showChangeLayoutButton, showRightPanelToggle, layout, initialShowRightPanelToggle, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeRightPanelViewClick, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
+    return (react_1.default.createElement(styled_1.ControlsWrap, { className: className, isOpenapiDocs: isOpenapiDocs, isCollapsed: collapsedSidebar, "data-component-name": "Sidebar/Actions" },
         isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
             initialShowRightPanelToggle && (react_1.default.createElement(ToggleRightPanelButton_1.ToggleRightPanelButton, { showRightPanelToggle: showRightPanelToggle, onClick: onChangeRightPanelViewClick })),
             showChangeLayoutButton && showRightPanelToggle && (react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { layout: layout, onClick: onChangeViewClick })))),

package/lib/components/SidebarLogo/SidebarLogo.d.ts

@@ -5,5 +5,6 @@ export interface LogoProps {
     altText?: string;
     dataTestId?: string;
     backgroundColor?: string;
+    className?: string;
 }
-export declare function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, }?: LogoProps): JSX.Element | null;
+export declare function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, className, }?: LogoProps): JSX.Element | null;

package/lib/components/SidebarLogo/SidebarLogo.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarLogo = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, } = {}) {
+function SidebarLogo({ imageUrl, href, altText, backgroundColor, dataTestId, className, } = {}) {
     if (!imageUrl) {
         return null;
     }
     const logo = react_1.default.createElement(LogoImgEl, { src: imageUrl, alt: altText || 'logo' });
-    return (react_1.default.createElement(LogoWrap, { "data-cy": dataTestId, style: { backgroundColor }, "data-component-name": "SidebarLogo/SidebarLogo" }, href ? react_1.default.createElement(Link, { href: href }, logo) : logo));
+    return (react_1.default.createElement(LogoWrap, { "data-cy": dataTestId, style: { backgroundColor }, "data-component-name": "SidebarLogo/SidebarLogo", className: className }, href ? react_1.default.createElement(Link, { href: href }, logo) : logo));
 }
 exports.SidebarLogo = SidebarLogo;
 const LogoImgEl = styled_components_1.default.img `

package/lib/components/TableOfContent/TableOfContent.d.ts

@@ -3,6 +3,7 @@ import type { MdHeading } from '../../types/portal';
 interface TableOfContentProps {
     headings?: Array<MdHeading | null> | null | undefined;
     contentWrapper: HTMLDivElement | null;
+    className?: string;
 }
 export declare function TableOfContent(props: TableOfContentProps): JSX.Element | null;
 export {};

package/lib/components/TableOfContent/TableOfContent.js

@@ -35,7 +35,7 @@ const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const hooks_1 = require("../../mocks/hooks");
 const utils_1 = require("../../components/TableOfContent/utils");
 function TableOfContent(props) {
-    const { headings, contentWrapper } = props;
+    const { headings, contentWrapper, className } = props;
     const sidebar = React.useRef(null);
     (0, useFullHeight_1.useFullHeight)(sidebar);
     const { markdown: { toc = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
@@ -50,7 +50,7 @@ function TableOfContent(props) {
         return null;
     }
     return (React.createElement(React.Fragment, null,
-        React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent" },
+        React.createElement(TableOfContentMenu, { "data-component-name": "TableOfContent/TableOfContent", className: className },
             React.createElement(TableOfContentItems, { ref: sidebar },
                 displayedHeadings.length ? (React.createElement(TocHeader, { "data-translation-key": translationKeys.header }, translate(translationKeys.header, toc.header || 'On this page'))) : null,
                 displayedHeadings.map((heading, idx) => {

package/lib/components/Tags/Tags.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
-export declare function Tags({ tags }: {
+export declare function Tags({ tags, className }: {
     tags: string[];
+    className?: string;
 }): JSX.Element;

package/lib/components/Tags/Tags.js

@@ -7,8 +7,8 @@ exports.Tags = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Highlight_1 = require("../../ui/Highlight");
-function Tags({ tags }) {
-    return (react_1.default.createElement(TagsWrapper, null, tags.map((tag) => (react_1.default.createElement(Tag, { key: tag, className: 'tag-' + slug(tag) },
+function Tags({ tags, className }) {
+    return (react_1.default.createElement(TagsWrapper, { className: className }, tags.map((tag) => (react_1.default.createElement(Tag, { key: tag, className: 'tag-' + slug(tag) },
         react_1.default.createElement(Highlight_1.Highlight, null, tag))))));
 }
 exports.Tags = Tags;

package/lib/components/Tiles/TileHeader.d.ts

@@ -1,5 +1,3 @@
 export declare const TileHeader: import("styled-components").StyledComponent<"h3", any, {
-    'data-component-name': string;
-} & {
     color?: string | undefined;
-}, "data-component-name">;
+}, never>;

package/lib/components/Tiles/TileHeader.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TileHeader = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.TileHeader = styled_components_1.default.h3.attrs(() => ({
+exports.TileHeader = styled_components_1.default.h3.attrs(({ className }) => ({
     'data-component-name': 'ui/Tiles/TileHeader',
+    className,
 })) `
   font-weight: var(--h3-font-weight);
   line-height: var(--h3-line-height);

package/lib/components/Tiles/TileText.d.ts

@@ -1,5 +1,3 @@
 export declare const TileText: import("styled-components").StyledComponent<"span", any, {
-    'data-component-name': string;
-} & {
     color?: string | undefined;
-}, "data-component-name">;
+}, never>;

package/lib/components/Tiles/TileText.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TileText = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.TileText = styled_components_1.default.span.attrs(() => ({
+exports.TileText = styled_components_1.default.span.attrs(({ className }) => ({
     'data-component-name': 'ui/Tiles/TileText',
+    className,
 })) `
   display: inline-block;
   font-weight: var(--font-weight-regular);

package/lib/components/Typography/CompactTypography.d.ts

@@ -1,6 +1,4 @@
-export declare const CompactTypography: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-} & import("../../components/Typography/Typography").TypographyProps & {
+export declare const CompactTypography: import("styled-components").StyledComponent<"div", any, import("../../components/Typography/Typography").TypographyProps & {
     mt: string;
     mb: string;
     'data-component-name': string;

package/lib/components/Typography/Emphasis.d.ts

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

package/lib/components/Typography/Emphasis.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Emphasis = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Emphasis = styled_components_1.default.strong.attrs(() => ({
+exports.Emphasis = styled_components_1.default.strong.attrs(({ className }) => ({
     'data-component-name': 'Typography/Emphasis',
+    className,
 })) `
   font-weight: var(--font-weight-bold);
 `;

package/lib/components/Typography/H1.d.ts

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

package/lib/components/Typography/H1.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.H1 = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
-exports.H1 = styled_components_1.default.h1.attrs(() => ({
+exports.H1 = styled_components_1.default.h1.attrs(({ className }) => ({
     'data-component-name': 'Typography/H1',
+    className,
 })) `
   color: var(--h1-text-color);
   margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);

package/lib/components/Typography/H2.d.ts

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

package/lib/components/Typography/H2.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.H2 = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
-exports.H2 = styled_components_1.default.h2.attrs(() => ({
+exports.H2 = styled_components_1.default.h2.attrs(({ className }) => ({
     'data-component-name': 'Typography/H2',
+    className,
 })) `
   color: var(--h2-text-color);
   margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);

package/lib/components/Typography/H3.d.ts

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

package/lib/components/Typography/H3.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.H3 = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
-exports.H3 = styled_components_1.default.h3.attrs(() => ({
+exports.H3 = styled_components_1.default.h3.attrs(({ className }) => ({
     'data-component-name': 'Typography/H3',
+    className,
 })) `
   color: var(--h3-text-color);
   margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);

package/lib/components/Typography/SectionHeader.d.ts

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

package/lib/components/Typography/SectionHeader.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionHeader = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.SectionHeader = styled_components_1.default.h2.attrs(() => ({
+exports.SectionHeader = styled_components_1.default.h2.attrs(({ className }) => ({
     'data-component-name': 'Typography/SectionHeader',
+    className,
 })) `
   color: var(--h2-color);
   font-size: var(--h2-font-size);

package/lib/components/Typography/Typography.d.ts

@@ -10,6 +10,4 @@ export interface TypographyProps {
     marginTop?: string;
     textAlign?: string;
 }
-export declare const Typography: import("styled-components").StyledComponent<"div", any, {
-    'data-component-name': string;
-} & TypographyProps, "data-component-name">;
+export declare const Typography: import("styled-components").StyledComponent<"div", any, TypographyProps, never>;

package/lib/components/Typography/Typography.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Typography = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Typography = styled_components_1.default.div.attrs(() => ({
+exports.Typography = styled_components_1.default.div.attrs(({ className }) => ({
     'data-component-name': 'Typography/Typography',
+    className,
 })) `
   color: ${({ color }) => color || 'var(--text-color)'};
   font-family: ${({ fontFamily }) => fontFamily || 'var(--font-family-base)'};