@redocly/theme 0.8.1 → 0.8.3

package/src/ReferenceDocs/TryItSecurityApps.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { useGlobalData } from '@portal/hooks';
+
+import { DevOnboardingTryItSecurity } from './DevOnboardingTryItSecurity';
+
+export type TryItSecurityAppsProps = {
+  apiId?: string;
+  value?: string;
+  onChange: (newSecretKey: string) => void;
+};
+
+export function TryItSecurityApps(props: TryItSecurityAppsProps) {
+  const { hasDeveloperOnboarding } = useGlobalData() || {};
+
+  return hasDeveloperOnboarding && props.apiId ? <DevOnboardingTryItSecurity {...props} /> : null;
+}

package/src/ReferenceDocs/index.ts

@@ -0,0 +1 @@
+export * from './TryItSecurityApps';

package/src/Sidebar/FooterWrapper.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const FooterWrapper = styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/FooterWrapper',
+}))`
+  margin: var(--sidebar-offset-top) 0 var(--sidebar-spacing-unit) var(--sidebar-offset-left);
+  padding-top: var(--sidebar-spacing-unit);
+  border-top: solid 1px #daddde;
+`;

package/src/Sidebar/HeaderWrapper.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const HeaderWrapper = styled.div.attrs(() => ({
+  'data-component-name': 'Sidebar/HeaderWrapper',
+}))`
+  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
+  padding-bottom: var(--sidebar-spacing-unit);
+  border-bottom: solid 1px #daddde;
+`;

package/src/Sidebar/MenuContainer.tsx

@@ -1,10 +1,15 @@
 import styled from 'styled-components';
 
-export const MenuContainer = styled.div.attrs(() => ({
+interface MenuContainerProps {
+  growContent?: boolean;
+}
+
+export const MenuContainer = styled.div.attrs<MenuContainerProps>(({ growContent }) => ({
   'data-component-name': 'Sidebar/MenuContainer',
-}))`
+  growContent: growContent === undefined ? true : growContent,
+}))<MenuContainerProps>`
   position: relative;
   overflow-y: auto;
-  flex-grow: 1;
+  flex-grow: ${({ growContent }) => (growContent ? 1 : 0)};
   padding-top: var(--sidebar-offset-top);
 `;

package/src/Sidebar/MenuItemLabel.tsx

@@ -31,8 +31,8 @@ export const MenuItemLabel = styled.li.attrs(() => ({
       : null};
 
   :hover {
-    color: var(--sidebar-item-active-color);
-    background-color: var(--sidebar-item-active-background-color);
+    color: var(--sidebar-item-hover-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 
   :empty {

package/src/Sidebar/Sidebar.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
 interface SidebarProps {
-  isNavbar: boolean;
   opened?: boolean;
   animate?: boolean;
 }
@@ -24,15 +23,10 @@ export const Sidebar = styled.aside.attrs(() => ({
   width: 100%;
   -webkit-font-smoothing: antialiased;
 
-  ${({ isNavbar }) => `
-    top: ${isNavbar ? 'var(--navbar-height)' : '0'};
-    height: calc(100vh ${isNavbar ? '- var(--navbar-height)' : ''});
-  `};
-
   ${({ opened, animate }) => `
     opacity: ${opened ? '1' : '0'};
     pointer-events: ${opened ? 'auto' : 'none'};
-    
+
     & > * {
       transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
       transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};

package/src/Sidebar/SidebarLayout.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Sidebar } from '@theme/Sidebar/Sidebar';
+import { FooterWrapper } from '@theme/Sidebar/FooterWrapper';
+import { HeaderWrapper } from '@theme/Sidebar/HeaderWrapper';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
-import { ArrowBack } from '@theme/Sidebar/ArrowBack';
-import { Link } from '@portal/Link';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
@@ -17,14 +17,17 @@ interface SidebarLayoutProps {
     label: string;
     slug: string;
   };
-  isNavbar: boolean;
+  footer?: React.ReactNode;
+  header?: React.ReactNode;
+  growContent?: boolean;
 }
 
 export function SidebarLayout({
   versions,
   menu,
-  backLink,
-  isNavbar,
+  footer,
+  header,
+  growContent,
 }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
@@ -39,39 +42,14 @@ export function SidebarLayout({
       <MobileSidebarButton opened={isOpen} onClick={toggleMenu} />
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
-      <Sidebar animate={true} opened={isOpen} isNavbar={isNavbar}>
-        {(backLink && (
-          <BackLinkWrapper>
-            <Link to={backLink.slug}>
-              <ArrowBack />
-              Back to {backLink.label}
-            </Link>
-          </BackLinkWrapper>
-        )) ||
-          null}
+      <Sidebar animate={true} opened={isOpen}>
+        {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
         {versions}
-        <MenuContainer>{menu}</MenuContainer>
+        <MenuContainer growContent={growContent}>{menu}</MenuContainer>
+        {footer ? <FooterWrapper>{footer}</FooterWrapper> : null}
       </Sidebar>
     </Wrapper>
   );
 }
 
-const BackLinkWrapper = styled.div`
-  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
-    var(--sidebar-item-padding-horizontal)
-    calc(var(--sidebar-offset-left) + var(--sidebar-item-padding-horizontal));
-
-  a {
-    color: var(--sidebar-back-button-text-color);
-    font-size: var(--sidebar-back-button-font-size);
-    font-family: var(--sidebar-back-button-font-family);
-    text-decoration: none;
-    &:hover {
-      color: var(--sidebar-back-button-hover-text-color);
-    }
-  }
-
-  border-bottom: 1px solid var(--sidebar-border-color);
-`;
-
 const Wrapper = styled.div``;

package/src/Sidebar/index.ts

@@ -17,3 +17,5 @@ export * from '@theme/Sidebar/Separator';
 export * from '@theme/Sidebar/SeparatorItem';
 export * from '@theme/Sidebar/Sidebar';
 export * from '@theme/Sidebar/SidebarLayout';
+export * from '@theme/Sidebar/FooterWrapper';
+export * from '@theme/Sidebar/HeaderWrapper';

package/src/SourceCode/SourceCode.tsx

@@ -11,6 +11,7 @@ import { CopyButtonWrapper } from '@theme/CopyButton';
 interface CommonCodeProps {
   withLineNumbers?: boolean;
   startLineNumber?: number;
+  className?: string;
 }
 
 export interface SourceCodeProps extends CommonCodeProps {
@@ -49,11 +50,13 @@ export function Code({
   dataTestId,
   withLineNumbers,
   startLineNumber,
+  className,
 }: CodeProps): JSX.Element {
   const highlightedCode = highlight(source, lang);
 
   return (
     <PreformattedCodeBlock
+      className={className}
       dangerouslySetInnerHTML={{
         __html: withLineNumbers
           ? addLineNumbers(highlightedCode, startLineNumber)
@@ -73,6 +76,7 @@ export function SourceCode({
   dataTestId = 'source-code',
   withLineNumbers,
   startLineNumber,
+  className,
 }: SourceCodeProps): JSX.Element {
   const [sourceCode, setSourceCode] = useState<string>(source ?? '');
 
@@ -102,6 +106,7 @@ export function SourceCode({
               withLineNumbers={withLineNumbers}
               startLineNumber={startLineNumber}
               dataTestId={dataTestId}
+              className={className}
             />
           </SampleControlsWrap>
         )}
@@ -112,6 +117,7 @@ export function SourceCode({
   return (
     <Code
       dataTestId={dataTestId}
+      className={className}
       lang={lang}
       source={sourceCode}
       withLineNumbers={withLineNumbers}

package/src/globalStyle.ts

@@ -884,6 +884,7 @@ const apiReferencePanels = css`
   .panel-request-samples,
   .panel-response-samples,
   .panel-callback-samples {
+    --text-color: var(--panel-samples-text-color);
     --panel-text-color: var(--panel-samples-text-color); // @presenter Color
     --panel-font-family-local: var(--panel-samples-font-family);
     --panel-font-size-local: var(--panel-samples-font-size);
@@ -2009,10 +2010,18 @@ export const styles = css`
     ${apiLogsTable}
     ${pages}
     ${modal}
+
+    --api-onboarding-table-text-color: #4e5356;
+
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: var(--font-family-base);
   }
 
   :root.dark {
     ${darkMode};
+
+    --api-onboarding-table-text-color: #ffffff;
   }
 
   :root.notransition * {

package/src/index.ts

@@ -23,3 +23,4 @@ export * from './types/config';
 export * from './config';
 export * from './Pages';
 export * from './Markdown';
+export * from './ReferenceDocs';

package/src/mocks/hooks/index.ts

@@ -74,3 +74,5 @@ export function usePageSharedData<T = unknown>(_id: string): T {
 export function useCatalog(_items: ResolvedNavItem[], _config: CatalogConfig): FilteredCatalog {
   throw new Error('Mock not implemented yet.');
 }
+
+export { useGlobalData } from '../useGlobalData';

package/src/mocks/useGlobalData.tsx

@@ -0,0 +1,3 @@
+export function useGlobalData(): Record<string, unknown> {
+  return {};
+}