@redocly/theme 0.9.0-beta.3 → 0.9.0-beta.5

package/src/Sidebar/SidebarLayout.tsx

@@ -2,14 +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';
-import { Button } from '@theme/Button/Button';
 
 interface SidebarLayoutProps {
   versions: React.ReactNode;
@@ -28,7 +27,6 @@ interface SidebarLayoutProps {
 export function SidebarLayout({
   versions,
   menu,
-  backLink,
   footer,
   header,
   growContent,
@@ -49,15 +47,6 @@ export function SidebarLayout({
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen} hasNavbar={hasNavbar}>
         {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
-        {(backLink && (
-          <BackLinkWrapper>
-            <Link to={backLink.slug}>
-              <ArrowBack />
-              Back to {backLink.label}
-            </Link>
-          </BackLinkWrapper>
-        )) ||
-          null}
         {versions}
         <MenuContainer growContent={growContent}>{menu}</MenuContainer>
         {footer ? <FooterWrapper>{footer}</FooterWrapper> : null}
@@ -66,37 +55,4 @@ export function SidebarLayout({
   );
 }
 
-const FooterWrapper = styled.div`
-  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
-    var(--sidebar-item-padding-horizontal) var(--sidebar-offset-left);
-
-  ${Button} {
-    width: 100%;
-    margin: 0;
-  }
-`;
-
-const HeaderWrapper = styled.div`
-  padding: var(--sidebar-offset-top) var(--sidebar-item-padding-horizontal)
-    var(--sidebar-item-padding-horizontal) var(--sidebar-offset-left);
-`;
-
-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/globalStyle.ts

@@ -880,6 +880,7 @@ const apiReferencePanels = css`
   */
 
   .panel-try-it,
+  .panel-pull-right,
   .panel-request-samples,
   .panel-response-samples,
   .panel-callback-samples {
@@ -1677,7 +1678,7 @@ const loadProgressBar = css`
   #nprogress .peg {
     display: block;
     position: absolute;
-    right: 0px;
+    right: 0;
     width: 100px;
     height: 100%;
     box-shadow: var(--load-progress-bar-shadow);

package/src/icons/AnchorIcon/AnchorIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface AnchorIconProps {
+  className?: string;
+}
+
+const Icon = ({ className }: AnchorIconProps) => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    height="16"
+    version="1.1"
+    viewBox="0 0 16 16"
+    width="16"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+    />
+  </svg>
+);
+
+export const AnchorIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AnchorIcon/AnchorIcon',
+}))`
+  fill: var(--heading-anchor-color);
+  visibility: hidden;
+  cursor: pointer;
+
+  background-image: var(--heading-anchor-icon);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+`;

package/src/icons/AnchorIcon/index.ts

@@ -0,0 +1,2 @@
+export { AnchorIcon } from '@theme/icons/AnchorIcon/AnchorIcon';
+export type { AnchorIconProps } from '@theme/icons/AnchorIcon/AnchorIcon';

package/src/icons/ArrowIcon/ArrowIcon.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 export interface ArrowIconProps {
   direction?: 'up' | 'right' | 'left' | 'down';
+  visibility?: 'visible' | 'hidden';
 }
 
 function directionToTransform({ direction }: ArrowIconProps) {
@@ -31,6 +32,7 @@ export const ArrowIcon = styled(Icon)`
   height: var(--sidebar-group-item-chevron-size);
   fill: var(--sidebar-group-item-chevron-color);
   transform: rotate(${directionToTransform}deg);
+  visibility: ${({ visibility = 'visible' }) => visibility};
 
   vertical-align: middle;
 `;

package/src/icons/index.ts

@@ -2,3 +2,4 @@ export * from '@theme/icons/ShelfIcon';
 export * from '@theme/icons/AlertIcon';
 export * from '@theme/icons/ArrowIcon';
 export * from '@theme/icons/ColorModeIcon';
+export * from '@theme/icons/AnchorIcon';

package/src/index.ts

@@ -22,3 +22,5 @@ export * from './Sidebar';
 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,4 @@
+export function useGlobalData(): Record<string, unknown> {
+  console.log('>>>> mock');
+  return {};
+}