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

package/src/icons/ExpandCollapseIcon/ExpandCollapseIcon.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { css } 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" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      className="corner-top"
+      d="M12.2432 8.70703H11.2461L11.2422 4.75781L7.29297 4.75391V3.75781H12.2432V8.70703Z"
+    />
+    <path
+      className="corner-bottom"
+      d="M4.75781 11.2422L8.70703 11.2461V12.2432H3.75781V7.29297H4.75391L4.75781 11.2422Z"
+    />
+  </svg>
+);
+
+export const ExpandCollapseIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ExpandCollapseIcon/ExpandCollapseIcon',
+})<{ $collapse?: boolean }>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+    transform-box: view-box;
+    transition: transform 0.3s ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .corner-top {
+    transform-origin: 10.756px 5.244px;
+  }
+
+  .corner-bottom {
+    transform-origin: 5.244px 10.756px;
+  }
+
+  ${({ $collapse }) =>
+    $collapse &&
+    css`
+      .corner-top {
+        transform: rotate(180deg);
+      }
+
+      .corner-bottom {
+        transform: rotate(-180deg);
+      }
+    `}
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -53,6 +53,12 @@ export * from '@redocly/theme/components/Navbar/Navbar';
 export * from '@redocly/theme/components/Navbar/NavbarItem';
 export * from '@redocly/theme/components/Navbar/NavbarLogo';
 export * from '@redocly/theme/components/Navbar/NavbarMenu';
+/* NavigationTabs */
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabs';
+export { NavigationTab } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+export type { NavigationTabProps } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabMenu';
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabContent';
 /* Footer */
 export * from '@redocly/theme/components/Footer/Footer';
 export * from '@redocly/theme/components/Footer/FooterColumn';
@@ -253,6 +259,7 @@ export * from '@redocly/theme/icons/LinkIcon/LinkIcon';
 export * from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 export * from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
 export * from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
+export * from '@redocly/theme/icons/ExpandCollapseIcon/ExpandCollapseIcon';
 export * from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from '@redocly/theme/icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from '@redocly/theme/icons/WarningSquareIcon/WarningSquareIcon';

package/src/layouts/PageLayout.tsx

@@ -27,7 +27,7 @@ export function PageLayout({
 const Container = styled.div`
   display: flex;
   flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  min-height: calc(100vh - var(--navbar-offset));
 
   @media screen and (min-width: ${breakpoints.max}) {
     max-width: var(--container-max-width);

package/src/layouts/RootLayout.tsx

@@ -13,8 +13,8 @@ export type LayoutConfig = {
 };
 
 export function RootLayout({ children }: LayoutConfig): JSX.Element {
-  const { useSearch } = useThemeHooks();
-  const { askAi } = useSearch();
+  const { useSearchFeatures } = useThemeHooks();
+  const { askAi } = useSearchFeatures();
 
   return (
     <div data-component-name="layouts/RootLayout">

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -76,7 +76,7 @@ const FilterWrapper = styled.div`
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: var(--navbar-height);
+  top: var(--navbar-stack-height);
   background-color: var(--bg-color);
   z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);

package/src/markdoc/components/CodeWalkthrough/CodePanel.tsx

@@ -64,8 +64,8 @@ const CodePanelWrapper = styled.div`
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
   overflow: clip;
-  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
-  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  --code-block-max-height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
+  height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
   position: sticky;
-  top: calc(var(--navbar-height) + var(--spacing-xl));
+  top: calc(var(--navbar-stack-height) + var(--spacing-xl));
 `;

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -78,7 +78,7 @@ const DocsPanel = styled.div`
   flex-direction: column;
 
   min-height: 0;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-stack-height));
 
   padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);