@redocly/theme 0.6.3-beta.1 → 0.6.4

package/lib/Button/Button.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
-export declare type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export declare type ButtonColor = 'primary' | 'secondary' | 'default' | string;
-export declare type ButtonVariant = 'outlined' | 'contained';
+export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonVariant = 'outlined' | 'contained';
 export interface ButtonProps {
     color?: ButtonColor;
     disabled?: boolean;

package/lib/Markdown/CodeSample/CodeSample.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type CodeSampleProps = {
+export type CodeSampleProps = {
     language: string;
     highlighted: string;
     rawContent: string;

package/lib/Markdown/Details.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type DetailsProps = {
+type DetailsProps = {
     summary: string;
 };
 export declare function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element;

package/lib/Markdown/MarkdownLayout.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type MarkdownLayoutProps = {
+type MarkdownLayoutProps = {
     tableOfContent: React.ReactNode;
     markdownWrapper: React.ReactNode;
     editPage?: {

package/lib/Markdown/Mermaid.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type MermaidProps = {
+type MermaidProps = {
     diagramHtml: string;
 };
 export declare function Mermaid({ diagramHtml }: MermaidProps): JSX.Element;

package/lib/Markdown/Tabs/Tab.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare type TabProps = {
+type TabProps = {
     activeTab: string;
     label: string;
     onClick: (e: string) => void;

package/lib/Markdown/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-declare type TabsProps = PropsWithChildren<{
+type TabsProps = PropsWithChildren<{
     children: {
         props: {
             label: string;

package/lib/NavbarLogo/NavbarLogo.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { LogoConfig } from '@theme/types/portal';
-export declare type NavbarLogoProps = {
+export type NavbarLogoProps = {
     logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
 };
 export declare function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null;

package/lib/Sidebar/ArrowBack.js

@@ -7,12 +7,12 @@ exports.ArrowBack = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Arrow = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "Sidebar/ArrowBack" },
-    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "10px", height: "10px", className: className },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "12px", height: "10px", className: className },
         react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
         react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit));
+  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/lib/Sidebar/SidebarLayout.d.ts

@@ -2,10 +2,6 @@ import React from 'react';
 interface SidebarLayoutProps {
     versions: React.ReactNode;
     menu: React.ReactNode;
-    backLink?: {
-        label: string;
-        slug: string;
-    };
 }
-export declare function SidebarLayout({ versions, menu, backLink, }: SidebarLayoutProps): JSX.Element | null;
+export declare function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null;
 export {};

package/lib/Sidebar/SidebarLayout.js

@@ -12,9 +12,7 @@ const MobileSidebarButton_1 = require("../Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../Sidebar/MenuContainer");
 const SidebarSearch_1 = require("../Search/SidebarSearch");
 const useThemeConfig_1 = require("../hooks/useThemeConfig");
-const ArrowBack_1 = require("../Sidebar/ArrowBack");
-const Link_1 = require("../mocks/Link");
-function SidebarLayout({ versions, menu, backLink, }) {
+function SidebarLayout({ versions, menu }) {
     const [isOpen, setIsOpen] = (0, useMobileMenu_1.useMobileMenu)();
     const toggleMenu = () => setIsOpen(!isOpen);
     const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
@@ -25,32 +23,9 @@ function SidebarLayout({ versions, menu, backLink, }) {
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu }),
         !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
-            (backLink && (react_1.default.createElement(BackLinkWrapper, null,
-                react_1.default.createElement(Link_1.Link, { to: backLink.slug },
-                    react_1.default.createElement(ArrowBack_1.ArrowBack, null),
-                    "Back to ",
-                    backLink.label)))) ||
-                null,
             versions,
             react_1.default.createElement(MenuContainer_1.MenuContainer, null, menu))));
 }
 exports.SidebarLayout = SidebarLayout;
-const BackLinkWrapper = styled_components_1.default.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_components_1.default.div ``;
 //# sourceMappingURL=SidebarLayout.js.map

package/lib/SourceCode/SourceCode.d.ts

@@ -17,7 +17,7 @@ export interface Sample {
     lang: string;
     label?: string;
 }
-export declare type UnstableExternalCodeSample = Sample & {
+export type UnstableExternalCodeSample = Sample & {
     get: (source: ExternalSource) => string;
 };
 export interface ExternalSource {

package/lib/config.d.ts

@@ -640,8 +640,8 @@ export declare const ThemeConfig: z.ZodDefault<z.ZodObject<{
     openapi?: {} | undefined;
     graphql?: {} | undefined;
 }>>;
-export declare type ThemeConfig = z.infer<typeof ThemeConfig>;
-export declare type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
+export type ThemeConfig = z.infer<typeof ThemeConfig>;
+export type ThemeUIConfig = Omit<ThemeConfig, 'navbar' | 'footer' | 'links' | 'scripts'> & {
     navbar?: any;
     footer?: any;
     auth?: {

package/lib/globalStyle.js

@@ -202,7 +202,7 @@ const headingsTypography = (0, styled_components_1.css) `
   --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h2-font-size: 28px; // @presenter FontSize
   --h2-line-height: 28px; // @presenter LineHeight
-  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h2-margin-top: 0; // @presenter Spacing
   --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h2-text-color: var(--heading-text-color); // @presenter Color
 
@@ -512,7 +512,7 @@ const sidebar = (0, styled_components_1.css) `
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--link-text-color);
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;

package/lib/hooks/useActiveHeading.d.ts

@@ -1,2 +1,2 @@
-export declare type UseActiveHeadingReturnType = string | undefined;
+export type UseActiveHeadingReturnType = string | undefined;
 export declare function useActiveHeading(contentElement: HTMLDivElement | null, displayedHeaders: Array<string | undefined>): UseActiveHeadingReturnType;

package/lib/hooks/useActiveSectionId.d.ts

@@ -1,3 +1,3 @@
 import type { Location } from 'history';
-export declare type UseActiveSectionIdReturnType = string;
+export type UseActiveSectionIdReturnType = string;
 export declare function useActiveSectionId(location: Location, hasOverviewPage?: boolean): UseActiveSectionIdReturnType;

package/lib/hooks/useActiveSectionId.js

@@ -28,9 +28,6 @@ function useActiveSectionId(location, hasOverviewPage = false) {
         if (hasOverviewPage) {
             setItemId('');
         }
-        else {
-            setItemId((sections[0] && sections[0].getAttribute('data-section-id')) || '');
-        }
     }, 150), [navbarHeight, hasOverviewPage]);
     (0, react_1.useEffect)(() => {
         window.addEventListener('scroll', scrollListener, { capture: false });

package/lib/hooks/useControl.d.ts

@@ -1,4 +1,4 @@
-export declare type UseControlReturnType = {
+export type UseControlReturnType = {
     isOpened: boolean;
     handleOpen: () => void;
     handleClose: () => void;

package/lib/hooks/useNavbarHeight.d.ts

@@ -1,3 +1,3 @@
 import type { Location } from 'history';
-export declare type UseNavbarHeightReturnType = number;
+export type UseNavbarHeightReturnType = number;
 export declare function useNavbarHeight(location: Location): UseNavbarHeightReturnType;

package/lib/mocks/types/index.d.ts

@@ -1 +1 @@
-export declare type ResolvedNavLinkItem = any;
+export type ResolvedNavLinkItem = any;

package/lib/mocks/types.d.ts

@@ -1,3 +1,3 @@
-export declare type ActiveItem<T> = T;
-export declare type SearchDocument = any;
-export declare type OperationParameter = any;
+export type ActiveItem<T> = T;
+export type SearchDocument = any;
+export type OperationParameter = any;

package/lib/types/config.d.ts

@@ -1,4 +1,4 @@
-export declare type DefaultThemeUIConfig = {
+export type DefaultThemeUIConfig = {
     lastUpdatedBlock?: {
         hide?: boolean;
     };

package/lib/ui/Dropdown.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Version } from '@theme/types/portal';
-declare type DropdownProps = {
+type DropdownProps = {
     items: Version[];
     activeItem: Version;
 };

package/lib/ui/Tiles/ThinTile.d.ts

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import type { CSSProperties } from 'react';
-declare type TextAlign = 'left' | 'right' | 'center' | 'justify';
+type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export interface TileProps {
     header?: string;
     icon?: string;

package/lib/utils/jsonToHtml.d.ts

@@ -1,4 +1,4 @@
-declare type JsonValue = JSON | Record<string, unknown>;
+type JsonValue = JSON | Record<string, unknown>;
 export declare function jsonToHTML(json: JsonValue, maxExpandLevel: number, startLine?: number): string;
 export declare function getLines(json: JsonValue, maxExpandLevel: number): string;
 export {};

package/lib/utils/media-css.d.ts

@@ -1,4 +1,4 @@
-export declare type MediaQueries = {
+export type MediaQueries = {
     print: string;
     small: string;
     medium: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.6.3-beta.1",
+  "version": "0.6.4",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -12,7 +12,7 @@
     "./config": "./lib/config.js",
     ".": "./lib/index.js",
     "./Sidebar/*": "./lib/Sidebar/*.js",
-    "./*": "./lib/*/index.js",
+    "./*": "./lib/index.js",
     "./src/": "./src/"
   },
   "scripts": {

package/src/Sidebar/ArrowBack.tsx

@@ -7,7 +7,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 12 10"
-      width="10px"
+      width="12px"
       height="10px"
       className={className}
     >
@@ -19,7 +19,7 @@ const Arrow = ({ className }: { className?: string }): JSX.Element => (
 
 export const ArrowBack = styled(Arrow)`
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit));
+  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/src/Sidebar/SidebarLayout.tsx

@@ -7,23 +7,13 @@ 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;
   menu: React.ReactNode;
-  backLink?: {
-    label: string;
-    slug: string;
-  };
 }
 
-export function SidebarLayout({
-  versions,
-  menu,
-  backLink,
-}: SidebarLayoutProps): JSX.Element | null {
+export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
   const { search, sidebar } = useThemeConfig();
@@ -38,15 +28,6 @@ export function SidebarLayout({
 
       {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
       <Sidebar animate={true} opened={isOpen}>
-        {(backLink && (
-          <BackLinkWrapper>
-            <Link to={backLink.slug}>
-              <ArrowBack />
-              Back to {backLink.label}
-            </Link>
-          </BackLinkWrapper>
-        )) ||
-          null}
         {versions}
         <MenuContainer>{menu}</MenuContainer>
       </Sidebar>
@@ -54,22 +35,4 @@ export function SidebarLayout({
   );
 }
 
-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/globalStyle.ts

@@ -204,7 +204,7 @@ const headingsTypography = css`
   --h2-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h2-font-size: 28px; // @presenter FontSize
   --h2-line-height: 28px; // @presenter LineHeight
-  --h2-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h2-margin-top: 0; // @presenter Spacing
   --h2-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h2-text-color: var(--heading-text-color); // @presenter Color
 
@@ -517,7 +517,7 @@ const sidebar = css`
   --sidebar-back-button-font-family: var(--sidebar-item-font-family);
   --sidebar-back-button-font-size: var(--sidebar-item-font-size);
   --sidebar-back-button-transform: inherit;
-  --sidebar-back-button-text-color: var(--link-text-color);
+  --sidebar-back-button-text-color: var(--sidebar-item-text-color);
   --sidebar-back-button-background-color: transparent;
   --sidebar-back-button-hover-text-color: var(--sidebar-item-active-color);
   --sidebar-back-button-hover-background-color: transparent;

package/src/hooks/useActiveSectionId.ts

@@ -32,8 +32,6 @@ export function useActiveSectionId(
         }
         if (hasOverviewPage) {
           setItemId('');
-        } else {
-          setItemId((sections[0] && sections[0].getAttribute('data-section-id')) || '');
         }
       }, 150),
     [navbarHeight, hasOverviewPage],