@redocly/theme 0.57.0-next.2 → 0.57.0-next.4

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -66,7 +66,8 @@ export function CodeBlockControls({
   dropdown,
 }: CodeBlockControlsProps): JSX.Element | null {
   const { codeSnippet } = useThemeConfig();
-  const { useTelemetry } = useThemeHooks();
+  const { useTelemetry, useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
   const telemetry = useTelemetry();
   const controlsType = (codeSnippet?.elementFormat as ControlItemType) || 'icon';
   const { copy, expand, collapse, select, deselect, report } = controls || {
@@ -87,7 +88,10 @@ export function CodeBlockControls({
       <ControlsWrapper>
         {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report?.props?.hide ? (
-          <TooltipWrapper tooltipTranslationKey="codeSnippet.report.tooltipText" placement="top">
+          <TooltipWrapper
+            tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
+            placement="top"
+          >
             <ControlButton
               variant="text"
               size="small"
@@ -101,7 +105,10 @@ export function CodeBlockControls({
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
-          <TooltipWrapper tooltipTranslationKey="codeSnippet.expand.tooltipText" placement="top">
+          <TooltipWrapper
+            tip={translate('codeSnippet.expand.tooltipText', 'Expand all')}
+            placement="top"
+          >
             <ControlButton
               variant="text"
               size="small"
@@ -115,7 +122,10 @@ export function CodeBlockControls({
         ) : null}
 
         {collapse && !codeSnippet?.collapse?.hide ? (
-          <TooltipWrapper tooltipTranslationKey="codeSnippet.collapse.tooltipText" placement="top">
+          <TooltipWrapper
+            tip={translate('codeSnippet.collapse.tooltipText', 'Collapse all')}
+            placement="top"
+          >
             <ControlButton
               variant="text"
               size="small"
@@ -153,7 +163,10 @@ export function CodeBlockControls({
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
-          <TooltipWrapper tooltipTranslationKey="codeSnippet.copy.tooltipText" placement="top">
+          <TooltipWrapper
+            tip={translate('codeSnippet.copy.tooltipText', 'Copy to clipboard')}
+            placement="top"
+          >
             <StyledCopyButton
               data={copy.data}
               data-source={copy.dataSource}
@@ -167,10 +180,7 @@ export function CodeBlockControls({
                 if (copy?.onClick) {
                   copy?.onClick?.();
                 } else {
-                  telemetry.send({
-                    type: 'openapi_docs.copy_code_snippet.clicked',
-                    payload: { snippetType: 'copy' },
-                  });
+                  telemetry.sendCopyCodeSnippetClickedMessage({ snippetType: 'copy' });
                 }
               }}
             />

package/src/components/Feedback/Feedback.tsx

@@ -58,7 +58,7 @@ export function Feedback(props: FeedbackProps & { path?: string }) {
           settings={settings}
           onSubmit={(values) => {
             submitFeedback({ type, values, path });
-            telemetry.send({ type: 'feedback.sent', payload: { feedbackType: type } });
+            telemetry.sendFeedbackMessage({ feedbackType: type });
           }}
         />
       </FeedbackWrapper>

package/src/components/Feedback/ReportDialog.tsx

@@ -47,7 +47,7 @@ export function ReportDialog({
               path: pathname,
               lang,
             });
-            telemetry.send({ type: 'code_snippet.reported' });
+            telemetry.sendCodeSnippetReportedMessage(undefined);
             onSubmit();
           }}
           isDialog={true}

package/src/components/Filter/FilterCheckboxes.tsx

@@ -36,7 +36,7 @@ export function FilterCheckboxes({
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
+                telemetry.sendFilterCheckboxToggledMessage({ id });
               }}
             >
               <CheckboxIcon

package/src/components/Footer/FooterItem.tsx

@@ -44,7 +44,7 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
           external={item.external}
           target={item.target}
           data-testid={item.label}
-          onClick={() => telemetry.send({ type: 'footer_item.clicked' })}
+          onClick={() => telemetry.sendFooterItemClickedMessage(undefined)}
           data-translation-key={item.labelTranslationKey}
         >
           {hasIcon ? (

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -40,10 +40,7 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     onAction: () => {
       setLocale(locale.code);
       props.onChangeLanguage(locale.code);
-      telemetry.send({
-        type: 'language_picker_locale.changed',
-        payload: { locale: locale.code },
-      });
+      telemetry.sendLanguagePickerLocaleChangedMessage({ locale: locale.code });
     },
     active: locale.code === currentLocale.code,
     suffix: locale.code === currentLocale.code && <CheckmarkIcon />,

package/src/components/Logo/Logo.tsx

@@ -27,7 +27,7 @@ export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Eleme
   return (
     <LogoWrapper data-component-name="Logo/Logo" className={className} {...otherProps}>
       {config.link ? (
-        <Link to={config.link} onClick={() => telemetry.send({ type: 'logo.clicked' })}>
+        <Link to={config.link} onClick={() => telemetry.sendLogoClickedMessage(undefined)}>
           {image}
         </Link>
       ) : (

package/src/components/Menu/MenuItem.tsx

@@ -37,12 +37,9 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const hasHttpTag = !!item.httpVerb || type === MenuItemType.Operation;
 
   const handleOnClick = () => {
-    telemetry.send({
-      type: 'sidebar.item_clicked',
-      payload: {
-        label: item.label,
-        type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
-      },
+    telemetry.sendSidebarItemClickedMessage({
+      label: item.label,
+      type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
     });
     onClick?.();
     if (isNested) {

package/src/components/Navbar/Navbar.tsx

@@ -58,11 +58,11 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
             isOpen
               ? () => {
                   closeMobileMenu();
-                  telemetry.send({ type: 'mobile_menu_button_close.clicked' });
+                  telemetry.sendMobileMenuButtonCloseClickedMessage(undefined);
                 }
               : () => {
                   openMobileMenu();
-                  telemetry.send({ type: 'mobile_menu_button_open.clicked' });
+                  telemetry.sendMobileMenuButtonOpenClickedMessage(undefined);
                 }
           }
           icon={isOpen ? <CloseIcon /> : <MenuIcon />}

package/src/components/Navbar/NavbarItem.tsx

@@ -46,9 +46,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       as={item.link ? Link : undefined}
       active={isActive}
       className={className}
-      onClick={() =>
-        telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } })
-      }
+      onClick={() => telemetry.sendNavbarMenuItemClickedMessage({ type: item.type })}
       external={item.external}
       target={item.target}
       to={item.link}

package/src/components/Search/SearchDialog.tsx

@@ -139,15 +139,12 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
           innerRef={innerRef}
           onClick={() => {
             addSearchHistoryItem(query);
-            telemetry.send({
-              type: 'search.result.clicked',
-              payload: {
-                query,
-                url: item.document.url,
-                totalResults: results.length.toString(),
-                index: index.toString(),
-                searchEngine: mode,
-              },
+            telemetry.sendSearchResultClickedMessage({
+              query,
+              url: item.document.url,
+              totalResults: results.length.toString(),
+              index: index.toString(),
+              searchEngine: mode,
             });
             onClose();
           }}
@@ -381,12 +378,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                   <>
                     <SearchRecent
                       onSelect={(query, index) => {
-                        telemetry.send({
-                          type: 'search.recent.clicked',
-                          payload: {
-                            query,
-                            index: index.toString(),
-                          },
+                        telemetry.sendSearchRecentClickedMessage({
+                          query,
+                          index: index.toString(),
                         });
                         setQuery(query);
                         focusSearchInput();

package/src/components/Search/SearchInput.tsx

@@ -51,7 +51,7 @@ export function SearchInput({
   const handleOnReset = () => {
     onChange('');
     addSearchHistoryItem(value);
-    telemetry.send({ type: 'search_input_reset_button.clicked' });
+    telemetry.sendSearchInputResetButtonClickedMessage(undefined);
   };
 
   return (

package/src/components/Search/SearchRecent.tsx

@@ -25,7 +25,7 @@ export function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.El
   const handleOnRemove = (e: React.MouseEvent<SVGSVGElement, MouseEvent>, item: string) => {
     e.stopPropagation();
     removeSearchHistoryItem(item);
-    telemetry.send({ type: 'search_recent_remove_button.clicked' });
+    telemetry.sendSearchRecentRemoveButtonClickedMessage(undefined);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, item: string, index: number) => {

package/src/components/SidebarActions/SidebarActions.tsx

@@ -48,9 +48,9 @@ export const SidebarActions = ({
           onClick={() => {
             onChangeCollapseSidebarClick();
             if (collapsedSidebar) {
-              telemetry.send({ type: 'sidebar.item_expanded' });
+              telemetry.sendSidebarItemExpandedMessage(undefined);
             } else {
-              telemetry.send({ type: 'sidebar.item_collapsed' });
+              telemetry.sendSidebarItemCollapsedMessage(undefined);
             }
           }}
           title={
@@ -70,7 +70,7 @@ export const SidebarActions = ({
             layout={layout}
             onClick={() => {
               onChangeViewClick();
-              telemetry.send({ type: 'change_layout_button.clicked' });
+              telemetry.sendChangeLayoutButtonClickedMessage(undefined);
             }}
           />
         </ControlsWrapChangeLayoutButtons>

package/src/components/Switch/Switch.tsx

@@ -6,17 +6,48 @@ import type { JSX } from 'react';
 export type SwitchProps = {
   value: boolean;
   onChange: (value: boolean) => void;
+  onFocus?: () => void;
   disabled?: boolean;
+  stopPropagation?: boolean;
+  className?: string;
 };
 
-export function Switch({ value = false, disabled = false, onChange }: SwitchProps): JSX.Element {
-  const handleClick = () => {
+export function Switch({
+  value = false,
+  disabled = false,
+  onChange,
+  onFocus,
+  stopPropagation = false,
+  className,
+}: SwitchProps): JSX.Element {
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (disabled) return;
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
     onChange(!value);
   };
 
+  const handleFocus = (event: React.FocusEvent<HTMLDivElement>): void => {
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    onFocus?.();
+  };
+
   return (
-    <SwitchWrapper onClick={handleClick} role="switch" selected={value} disabled={disabled}>
+    <SwitchWrapper
+      tabIndex={disabled ? -1 : 0}
+      onFocus={handleFocus}
+      onClick={handleClick}
+      role="switch"
+      aria-checked={value}
+      aria-disabled={disabled}
+      selected={value}
+      disabled={disabled}
+      className={className}
+    >
       <Knob selected={value} disabled={disabled} />
     </SwitchWrapper>
   );

package/src/components/TableOfContent/TableOfContent.tsx

@@ -62,7 +62,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
               data-testid={`toc-${heading.value}`}
               onClick={(e) => {
                 e.preventDefault();
-                telemetry.send({ type: 'toc_item.clicked' });
+                telemetry.sendTocItemClickedMessage(undefined);
                 handleHeadingClick(heading.id);
               }}
             />

package/src/components/Tooltip/TooltipWrapper.tsx

@@ -4,12 +4,12 @@ import React from 'react';
 import type { JSX, ReactElement } from 'react';
 import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
 
-import { useThemeHooks, useControl } from '@redocly/theme/core/hooks';
+import { useControl } from '@redocly/theme/core/hooks';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type TooltipWrapperProps = {
   children: ReactElement;
-  tooltipTranslationKey: string;
+  tip: string;
   placement?: TooltipProps['placement'];
   width?: string;
   className?: string;
@@ -19,16 +19,14 @@ export type TooltipWrapperProps = {
 
 export function TooltipWrapper({
   children,
-  tooltipTranslationKey,
+  tip,
   placement = 'top',
   width = 'max-content',
   className = '',
   showOnHover = true,
   disabled = false,
 }: TooltipWrapperProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
   const tooltip = useControl();
-  const { translate } = useTranslate();
 
   const handleMouseEnter = (): void => {
     if (showOnHover && !disabled) {
@@ -51,7 +49,7 @@ export function TooltipWrapper({
   return (
     <Tooltip
       className={className}
-      tip={translate(tooltipTranslationKey)}
+      tip={tip}
       isOpen={tooltip.isOpened}
       placement={placement}
       width={width}

package/src/components/UserMenu/LoginButton.tsx

@@ -20,7 +20,7 @@ export function LoginButton({ href, className }: LoginButtonProps): JSX.Element
       <Button
         data-translation-key="userMenu.login"
         to={href}
-        onClick={() => telemetry.send({ type: 'login_button.clicked' })}
+        onClick={() => telemetry.sendLoginButtonClickedMessage(undefined)}
         data-testid="login-btn"
         extraClass={className}
         variant="primary"

package/src/components/UserMenu/LogoutMenuItem.tsx

@@ -18,7 +18,7 @@ export function LogoutMenuItem({ iconOnly, className }: LogoutMenuItemProps): JS
   const { translate } = useTranslate();
 
   const handleClick = () => {
-    telemetry.send({ type: 'logout_menu_item.clicked' });
+    telemetry.sendLogoutMenuItemClickedMessage(undefined);
     handleLogout();
   };
 

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

@@ -12,6 +12,7 @@ export const useThemeHooks = vi.fn(() => ({
   })),
   useTelemetry: vi.fn(() => ({
     send: vi.fn(),
+    sendCodeSnippetReportedMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue([]),
   usePageSharedData: vi.fn().mockReturnValue({}),

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

@@ -18,7 +18,7 @@ export function useSearchDialog() {
     if (hotKeys) {
       hotkeys(hotKeys, (ev) => {
         setIsOpen(true);
-        telemetry.send({ type: 'search.opened', payload: { method: 'shortcut' } });
+        telemetry.sendSearchOpenedMessage({ method: 'shortcut' });
         ev.preventDefault();
       });
 
@@ -28,7 +28,7 @@ export function useSearchDialog() {
   }, [hotKeys]);
 
   const onOpen = useCallback(function () {
-    telemetry.send({ type: 'search.opened', payload: { method: 'click' } });
+    telemetry.sendSearchOpenedMessage({ method: 'click' });
     setIsOpen(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/core/hooks/use-color-switcher.ts

@@ -34,10 +34,7 @@ export const useColorSwitcher = () => {
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
-    telemetry.send({
-      type: 'color_mode.switched',
-      payload: { from: activeColorMode, to: newMode },
-    });
+    telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
 
     setActiveColorMode(newMode);
   };

package/src/core/hooks/use-product-picker.ts

@@ -11,7 +11,7 @@ export function useProductPicker() {
   const loadAndNavigate = useLoadAndNavigate();
   function setProduct(product: typeof currentProduct) {
     if (!product) return;
-    telemetry.send({ type: 'product.picked', payload: { product: product.slug } });
+    telemetry.sendProductPickedMessage({ product: product.slug });
     loadAndNavigate({ navigate, to: product.link });
   }
   return {

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

@@ -0,0 +1,61 @@
+// TODO we need to create some common way to do this.
+export const useTelemetryFallback = () => ({
+  send: () => {},
+  sendPageViewedMessage: () => {},
+  sendErrorMessage: () => {},
+  sendClientErrorMessage: () => {},
+  sendBreadcrumbClickedMessage: () => {},
+  sendColorModeSwitchedMessage: () => {},
+  sendSidebarItemClickedMessage: () => {},
+  sendSidebarItemExpandedMessage: () => {},
+  sendSidebarItemCollapsedMessage: () => {},
+  sendChangeLayoutButtonClickedMessage: () => {},
+  sendEditPageLinkClickedMessage: () => {},
+  sendCodeSnippetReportedMessage: () => {},
+  sendNavbarMenuItemClickedMessage: () => {},
+  sendLoginButtonClickedMessage: () => {},
+  sendLoginProviderButtonClickedMessage: () => {},
+  sendLogoutMenuItemClickedMessage: () => {},
+  sendLogoClickedMessage: () => {},
+  sendTocItemClickedMessage: () => {},
+  sendCatalogFilterChangedMessage: () => {},
+  sendCatalogItemClickedMessage: () => {},
+  sendScorecardLinkClickedMessage: () => {},
+  sendBackToCatalogButtonClickedMessage: () => {},
+  sendSidebarDrilldownBackButtonClickedMessage: () => {},
+  sendFooterItemClickedMessage: () => {},
+  sendCatalogActionsButtonClickedMessage: () => {},
+  sendMobileMenuButtonCloseClickedMessage: () => {},
+  sendMobileMenuButtonOpenClickedMessage: () => {},
+  sendSearchInputResetButtonClickedMessage: () => {},
+  sendSearchRecentRemoveButtonClickedMessage: () => {},
+  sendSearchRecentClickedMessage: () => {},
+  sendRequestApiAccessButtonClickedMessage: () => {},
+  sendVersionPickerSelectionChangeMessage: () => {},
+  sendProductPickedMessage: () => {},
+  sendFilterCheckboxToggledMessage: () => {},
+  sendLanguagePickerLocaleChangedMessage: () => {},
+  sendSearchOpenedMessage: () => {},
+  sendSearchQueryMessage: () => {},
+  sendSearchAIQueryMessage: () => {},
+  sendFeedbackMessage: () => {},
+  sendSearchResultClickedMessage: () => {},
+  sendRedirectMessage: () => {},
+  sendOpenapiDocsMessage: () => {},
+  sendCopyCodeSnippetClickedMessage: () => {},
+  sendOpenapiDocsViewedMessage: () => {},
+  sendOpenapiDocsPerformanceMetricsMessage: () => {},
+  sendOpenapiDocsDownloadDefinitionClickedMessage: () => {},
+  sendOpenapiDocsSelectLanguageClickedMessage: () => {},
+  sendOpenapiDocsExpandCollapseAllClickedMessage: () => {},
+  sendOpenapiDocsSwitchServersClickedMessage: () => {},
+  sendOpenapiDocsExamplesSwitcherClickedMessage: () => {},
+  sendOpenapiDocsTryItOpenedMessage: () => {},
+  sendAsyncapiDocsViewedMessage: () => {},
+  sendAsyncapiDocsPerformanceMetricsMessage: () => {},
+  sendAsyncapiDocsSwitchMessageClickedMessage: () => {},
+  sendAsyncapiDocsSwitchExampleClickedMessage: () => {},
+  sendAsyncapiDocsMessageClickedMessage: () => {},
+  sendAsyncapiDocsServerModalOpenedMessage: () => {},
+  sendAsyncapiDocsDownloadDefinitionClickedMessage: () => {},
+});

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

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import type { ThemeHooks } from '../types/hooks';
 
 import { ThemeDataContext } from '../contexts/ThemeDataContext';
+import { useTelemetryFallback } from './use-telemetry-fallback';
 
 const fallbacks = {
   useTranslate: () => ({
@@ -10,7 +11,7 @@ const fallbacks = {
       (typeof options === 'string' ? options : options?.defaultValue) || value || '',
   }),
   useSubmitFeedback: () => ({ submitFeedback: () => {} }),
-  useTelemetry: () => ({ send: () => {} }),
+  useTelemetry: useTelemetryFallback,
   /**
    * @deprecated use `useTelemetry` instead
    **/

package/src/core/types/hooks.ts

@@ -1,3 +1,4 @@
+import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
 import type {
   CatalogEntityConfig,
   PageData,
@@ -26,7 +27,6 @@ import type {
   SearchFacetQuery,
   AiSearchConversationItem,
 } from './search';
-import type { EventType, SendEventParams } from './telemetry';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
@@ -148,9 +148,15 @@ export type ThemeHooks = {
     initialData?: BffCatalogRelatedEntityList,
   ) => CatalogApiResults<BffCatalogRelatedEntity, BffCatalogRelatedEntityList>;
   useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
-  useTelemetry: () => {
-    send<TEventType extends EventType>(event: SendEventParams<TEventType>): void;
-  };
+  useTelemetry: () => Omit<
+    AsyncApiRealmUI.Telemetry,
+    | 'init'
+    | 'updateCloudEventData'
+    | 'forceFlush'
+    | 'startSpan'
+    | 'constructCloudEvent'
+    | 'sendToOtelService'
+  >;
   useUserTeams: () => string[];
   usePageData: () => PageData | null;
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;

package/src/core/types/index.ts

@@ -15,5 +15,4 @@ export * from './common';
 export * from './open-api-server';
 export * from './marker';
 export * from './code-walkthrough';
-export * from './telemetry';
 export * from './page-actions';

package/src/icons/PlayIcon/PlayIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.0625 12.25C2.94647 12.25 2.83519 12.2039 2.75314 12.1219C2.67109 12.0398 2.625 11.9286 2.625 11.8125V2.18753C2.62499 2.1115 2.6448 2.03678 2.68247 1.97074C2.72014 1.9047 2.77437 1.84961 2.83981 1.81092C2.90526 1.77222 2.97965 1.75124 3.05567 1.75005C3.13169 1.74887 3.20671 1.76751 3.27333 1.80415L12.0233 6.61665C12.092 6.6544 12.1492 6.70989 12.1891 6.77733C12.229 6.84476 12.25 6.92167 12.25 7.00001C12.25 7.07835 12.229 7.15526 12.1891 7.22269C12.1492 7.29013 12.092 7.34562 12.0233 7.38337L3.27333 12.1959C3.20874 12.2314 3.13622 12.25 3.0625 12.25ZM3.5 2.9273V11.0726L10.9046 7.00003L3.5 2.9273Z" />
+  </svg>
+);
+
+export const PlayIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/PlayIcon/PlayIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.5 6.5H13.5C13.7651 6.4997 14.0193 6.39424 14.2068 6.20677C14.3942 6.0193 14.4997 5.76512 14.5 5.5V2.5C14.4997 2.23488 14.3942 1.9807 14.2068 1.79323C14.0193 1.60576 13.7651 1.5003 13.5 1.5H2.5C2.23488 1.5003 1.9807 1.60576 1.79323 1.79323C1.60576 1.9807 1.5003 2.23488 1.5 2.5V5.5C1.5003 5.76512 1.60576 6.0193 1.79323 6.20677C1.9807 6.39424 2.23488 6.4997 2.5 6.5H3.5H4.5ZM13.5 2.5H2.5V5.5H13.5V2.5Z"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.5 9.5H8.5C8.23488 9.5003 7.9807 9.60576 7.79323 9.79323C7.60576 9.9807 7.5003 10.2349 7.5 10.5V11.5H4.5V9.29295V8.5V6.5H3.5V9.29295V11.5C3.5003 11.7651 3.60576 12.0193 3.79323 12.2068C3.9807 12.3942 4.23488 12.4997 4.5 12.5H7.5V13.5C7.5003 13.7651 7.60576 14.0193 7.79323 14.2068C7.9807 14.3942 8.23488 14.4997 8.5 14.5H13.5C13.7651 14.4997 14.0193 14.3942 14.2068 14.2068C14.3942 14.0193 14.4997 13.7651 14.5 13.5V10.5C14.4997 10.2349 14.3942 9.9807 14.2068 9.79323C14.0193 9.60576 13.7651 9.5003 13.5 9.5ZM8.5 10.5V13.5H13.5V10.5H8.5Z"
+    />
+  </svg>
+);
+
+export const WorkflowHierarchyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -264,6 +264,7 @@ export * from '@redocly/theme/icons/CharacterIcon/CharacterIcon';
 export * from '@redocly/theme/icons/FileIcon/FileIcon';
 export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 export * from '@redocly/theme/icons/CertificateIcon/CertificateIcon';
+export * from '@redocly/theme/icons/PlayIcon/PlayIcon';
 export * from '@redocly/theme/icons/PlaylistIcon/PlaylistIcon';
 export * from '@redocly/theme/icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
 export * from '@redocly/theme/icons/TaskViewIcon/TaskViewIcon';
@@ -280,6 +281,7 @@ export * from '@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon';
 export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';

package/src/layouts/ThreePanelLayout.tsx

@@ -30,14 +30,11 @@ const Wrapper = styled.div<{ collapsedSidebar?: boolean; layout?: LayoutVariant
   margin: 0 auto;
   width: 100%;
 
-  ${({ layout = LayoutVariant.THREE_PANEL, collapsedSidebar }) => {
+  ${({ layout = LayoutVariant.THREE_PANEL }) => {
     return css`
       max-width: ${layout === LayoutVariant.THREE_PANEL ? '100%' : ''};
 
       @media screen and (min-width: ${breakpoints.small}) {
-        width: ${collapsedSidebar
-          ? `var(--layout-${layout}-small-max-width)`
-          : 'calc(100% - var(--sidebar-width))'};
         max-width: var(--layout-${layout}-small-max-width);
       }