@redocly/theme 0.56.0-next.9 → 0.56.0

package/src/components/Navbar/NavbarItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
 import type { JSX } from 'react';
@@ -17,6 +17,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export type NavbarItemProps = {
   navItem: ResolvedNavItem;
@@ -52,7 +53,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       target={item.target}
       to={item.link}
     >
-      <NavbarIcon url={item.icon} />
+      <NavbarIcon icon={item.icon} srcSet={item.srcSet} />
       <NavbarLabel data-translation-key={item.labelTranslationKey}>
         {translate(item.labelTranslationKey, item.label)}
       </NavbarLabel>
@@ -74,7 +75,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           data-translation-key={item.labelTranslationKey}
           external={item.external}
         >
-          <NavbarIcon url={item.icon} />
+          <NavbarIcon icon={item.icon} srcSet={item.srcSet} />
           <NavbarLabel data-translation-key={item.labelTranslationKey}>
             {translate(item.labelTranslationKey, item.label)}
           </NavbarLabel>
@@ -132,20 +133,10 @@ const NavbarLabel = styled.span`
   vertical-align: middle;
 `;
 
-const NavbarIcon = styled.i<{ url?: string }>`
-  ${({ url }) =>
-    url &&
-    css`
-      background-image: url('${url}');
-      width: var(--navbar-item-icon-width);
-      height: var(--navbar-item-icon-height);
-      display: inline-block;
-      background-size: contain;
-      margin-right: var(--navbar-item-icon-margin-right);
-      vertical-align: middle;
-      background-position: center;
-      background-repeat: no-repeat;
-    `}
+const NavbarIcon = styled(GenericIcon)`
+  --icon-width: var(--navbar-item-icon-width);
+  --icon-height: var(--navbar-item-icon-height);
+  margin-right: var(--navbar-item-icon-margin-right);
 `;
 
 const ExternalLinkIcon = styled(LaunchIcon)`

package/src/components/Navbar/variables.ts

@@ -35,8 +35,8 @@ export const navbar = css`
   --navbar-item-bg-color-hover: var(--bg-color);
   --navbar-item-bottom-border-hover: none;
 
-  --navbar-item-icon-width: 1.5em; // @presenter Spacing
-  --navbar-item-icon-height: 1.5em; // @presenter Spacing
+  --navbar-item-icon-width: 1.25em; // @presenter Spacing
+  --navbar-item-icon-height: 1.25em; // @presenter Spacing
   --navbar-item-icon-margin-right: 0.5em; // @presenter Spacing
 
   --navbar-logo-height: var(--logo-height);

package/src/components/PageActions/PageActions.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { PageAction } from '@redocly/theme/core/types';
+import type { DropdownMenuItemProps } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+
+import { PageActionsMenuItem } from '@redocly/theme/components/PageActions/PageActionsMenuItem';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { ButtonGroup } from '@redocly/theme/components/Button/ButtonGroup';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
+import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
+import { usePageActions } from '@redocly/theme/core/hooks';
+
+type ActionState = 'idle' | 'processing' | 'done';
+
+type PageActionProps = {
+  pageSlug: string;
+};
+
+const ACTION_DONE_DISPLAY_DURATION = 1000;
+
+export function PageActions(props: PageActionProps): JSX.Element | null {
+  const { pageSlug } = props;
+
+  const actions = usePageActions(pageSlug || '/');
+
+  const [actionState, setActionState] = useState<ActionState>('idle');
+
+  if (!actions.length) {
+    return null;
+  }
+
+  const buttonAction = actions[0];
+
+  const handleActionClick = async (action: PageAction) => {
+    if (!('onClick' in action)) {
+      return;
+    }
+
+    setActionState('processing');
+
+    await action.onClick();
+    setActionState('done');
+    setTimeout(() => {
+      setActionState('idle');
+    }, ACTION_DONE_DISPLAY_DURATION);
+  };
+
+  const menuItems: DropdownMenuItemProps[] = actions.map((action) => ({
+    content:
+      'link' in action ? (
+        <LinkMenuItem to={action.link} external>
+          <PageActionsMenuItem pageAction={action} />
+        </LinkMenuItem>
+      ) : (
+        <PageActionsMenuItem pageAction={action} />
+      ),
+    onAction: 'onClick' in action ? () => handleActionClick(action) : undefined,
+  }));
+
+  return (
+    <PageActionsWrapper>
+      <ButtonGroup variant="outlined" size="medium">
+        <Button
+          icon={renderIcon(buttonAction, actionState)}
+          to={'link' in buttonAction ? buttonAction.link : undefined}
+          external
+          onClick={() => handleActionClick(buttonAction)}
+        >
+          {buttonAction.buttonText}
+        </Button>
+        {actions.length > 1 ? (
+          <Dropdown withArrow trigger={<Button />} placement="bottom" alignment="end">
+            <DropdownMenu items={menuItems} />
+          </Dropdown>
+        ) : null}
+      </ButtonGroup>
+    </PageActionsWrapper>
+  );
+}
+
+function renderIcon(buttonAction: PageAction, actionState: ActionState) {
+  switch (actionState) {
+    case 'processing':
+      return <Spinner color="var(--page-actions-processing-icon-color)" />;
+    case 'done':
+      return <CheckmarkFilledIcon color="var(--page-actions-done-icon-color)" />;
+    default:
+      return <buttonAction.iconComponent />;
+  }
+}
+
+const PageActionsWrapper = styled.div`
+  margin-left: auto;
+  padding-left: var(--page-actions-padding-left);
+  --button-color: var(--page-actions-button-text-color);
+
+  .button-group-size-medium .button.button-size-medium {
+    --button-icon-left-padding: var(--page-actions-button-padding);
+  }
+`;
+
+const LinkMenuItem = styled(Link)`
+  text-decoration: none;
+  --link-decoration-hover: none;
+`;

package/src/components/PageActions/PageActionsMenuItem.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { PageAction } from '@redocly/theme/core/types';
+
+import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
+
+type PageActionsMenuItemProps = {
+  pageAction: PageAction;
+};
+
+export function PageActionsMenuItem(props: PageActionsMenuItemProps) {
+  const { pageAction } = props;
+
+  return (
+    <MenuItemWrapper data-component-name="PageActions/PageActionsMenuItem">
+      <IconWrapper>
+        <pageAction.iconComponent />
+      </IconWrapper>
+      <ContentWrapper>
+        <Title>
+          {pageAction.title}
+          {'link' in pageAction ? (
+            <LaunchIcon color="var(--page-actions-menu-item-title-icon-color)" size="14px" />
+          ) : null}
+        </Title>
+        <Description>{pageAction.description}</Description>
+      </ContentWrapper>
+    </MenuItemWrapper>
+  );
+}
+
+const MenuItemWrapper = styled.div`
+  padding: var(--page-actions-menu-item-padding);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--page-actions-menu-item-gap);
+`;
+
+const IconWrapper = styled.div`
+  color: var(--page-actions-menu-item-icon-color);
+  border: 1px solid var(--page-actions-menu-item-icon-border-color);
+  border-radius: var(--page-actions-menu-item-icon-border-radius);
+  width: var(--page-actions-menu-item-icon-wrapper-size);
+  height: var(--page-actions-menu-item-icon-wrapper-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--page-actions-menu-item-text-gap);
+`;
+
+const Title = styled.div`
+  font-weight: var(--page-actions-menu-item-title-font-weight);
+  font-size: var(--page-actions-menu-item-title-font-size);
+  line-height: var(--page-actions-menu-item-title-line-height);
+  color: var(--page-actions-menu-item-title-color);
+  display: flex;
+  align-items: center;
+  gap: var(--page-actions-menu-item-title-icon-gap);
+`;
+
+const Description = styled.div`
+  font-weight: var(--page-actions-menu-item-description-font-weight);
+  font-size: var(--page-actions-menu-item-description-font-size);
+  line-height: var(--page-actions-menu-item-description-line-height);
+  color: var(--page-actions-menu-item-description-color);
+`;

package/src/components/PageActions/variables.dark.ts

@@ -0,0 +1,6 @@
+import { css } from 'styled-components';
+
+export const pageActionsDarkMode = css`
+  --page-actions-menu-item-icon-border-color: var(--color-warm-grey-5);
+  --page-actions-menu-item-description-color: var(--text-color-secondary);
+`;

package/src/components/PageActions/variables.ts

@@ -0,0 +1,34 @@
+import { css } from 'styled-components';
+
+export const pageActions = css`
+  /* Minimum spacing between page actions and heading text */
+  --page-actions-padding-left: var(--spacing-sm);
+
+  --page-actions-button-text-color: var(--text-color-secondary);
+  --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
+
+  --page-actions-menu-item-padding: 3px 0;
+  --page-actions-menu-item-gap: var(--spacing-xs);
+  --page-actions-menu-item-icon-color: var(--icon-color-secondary);
+  --page-actions-menu-item-icon-border-color: var(--color-warm-grey-3);
+  --page-actions-menu-item-icon-border-radius: var(--border-radius);
+  --page-actions-menu-item-icon-wrapper-size: 28px;
+
+  --page-actions-menu-item-text-gap: 2px;
+
+  --page-actions-menu-item-title-font-weight: var(--font-weight-regular);
+  --page-actions-menu-item-title-font-size: var(--font-size-base);
+  --page-actions-menu-item-title-line-height: var(--line-height-base);
+  --page-actions-menu-item-title-color: var(--text-color-secondary);
+
+  --page-actions-menu-item-title-icon-gap: var(--spacing-xxs);
+  --page-actions-menu-item-title-icon-color: var(--icon-color-secondary);
+
+  --page-actions-menu-item-description-font-weight: var(--font-weight-regular);
+  --page-actions-menu-item-description-font-size: var(--font-size-sm);
+  --page-actions-menu-item-description-line-height: var(--line-height-sm);
+  --page-actions-menu-item-description-color: var(--text-color-description);
+
+  --page-actions-processing-icon-color: var(--icon-color-interactive);
+  --page-actions-done-icon-color: var(--color-success-base);
+`;

package/src/components/TableOfContent/TableOfContent.tsx

@@ -10,12 +10,7 @@ import {
   useThemeConfig,
   useFullHeight,
 } from '@redocly/theme/core/hooks';
-import {
-  breakpoints,
-  getDisplayedHeadingsIds,
-  getDisplayedHeadings,
-  getLeastDepth,
-} from '@redocly/theme/core/utils';
+import { breakpoints, getDisplayedHeadings, getLeastDepth } from '@redocly/theme/core/utils';
 
 export type TableOfContentProps = {
   headings?: Array<MdHeading | null> | null | undefined;
@@ -35,9 +30,9 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 
   const displayedHeadings = getDisplayedHeadings(headings, toc.depth || 3);
   const leastDepth = getLeastDepth(displayedHeadings);
-  const activeHeadingId = useActiveHeading(
+  const { heading: activeHeading, handleHeadingClick } = useActiveHeading(
     contentWrapper,
-    getDisplayedHeadingsIds(displayedHeadings),
+    displayedHeadings,
   );
 
   if (toc?.hide) {
@@ -45,34 +40,36 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
   }
 
   return (
-    <>
-      <TableOfContentMenu data-component-name="TableOfContent/TableOfContent" className={className}>
-        <TableOfContentItems ref={sidebar}>
-          {displayedHeadings.length ? (
-            <TableOfContentHeader data-translation-key="toc.header">
-              {translate('toc.header', toc.header || 'On this page')}
-            </TableOfContentHeader>
-          ) : null}
-          {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
-            if (!heading) {
-              return null;
-            }
-            const href = '#' + heading.id;
-            return (
-              <TableOfContentMenuItem
-                key={href + idx}
-                href={href}
-                depth={heading.depth - leastDepth + 1 || 0}
-                className={activeHeadingId === heading.id ? 'active' : ''}
-                dangerouslySetInnerHTML={{ __html: heading.value || '' }}
-                data-testid={`toc-${heading.value}`}
-                onClick={() => telemetry.send({ type: 'toc_item.clicked' })}
-              />
-            );
-          })}
-        </TableOfContentItems>
-      </TableOfContentMenu>
-    </>
+    <TableOfContentMenu data-component-name="TableOfContent/TableOfContent" className={className}>
+      <TableOfContentItems ref={sidebar}>
+        {displayedHeadings.length ? (
+          <TableOfContentHeader data-translation-key="toc.header">
+            {translate('toc.header', toc.header || 'On this page')}
+          </TableOfContentHeader>
+        ) : null}
+        {displayedHeadings.map((heading: MdHeading | null, idx: number) => {
+          if (!heading) {
+            return null;
+          }
+          const href = '#' + heading.id;
+          return (
+            <TableOfContentMenuItem
+              key={href + idx}
+              href={href}
+              depth={heading.depth - leastDepth + 1 || 0}
+              className={activeHeading === heading.id ? 'active' : ''}
+              dangerouslySetInnerHTML={{ __html: heading.value || '' }}
+              data-testid={`toc-${heading.value}`}
+              onClick={(e) => {
+                e.preventDefault();
+                telemetry.send({ type: 'toc_item.clicked' });
+                handleHeadingClick(heading.id);
+              }}
+            />
+          );
+        })}
+      </TableOfContentItems>
+    </TableOfContentMenu>
   );
 }
 

package/src/core/constants/common.ts

@@ -1,6 +1,10 @@
 export { REDOCLY_TEAMS_RBAC } from '@redocly/config';
 export const DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
 export const CONTENT_ID = 'content';
+export const ICONS_CDN_URL = {
+  'font-awesome': 'https://cdn.redocly.com/icons/fa/7.0.0',
+  code: 'https://cdn.redocly.com/icons/code/5.24.0',
+};
 
 export enum FEEDBACK_TYPES {
   RATING = 'rating',

package/src/core/contexts/CodeSnippetContext.tsx

@@ -0,0 +1,31 @@
+import { createContext, useContext, useState } from 'react';
+
+export type CodeSnippetContextType = {
+  activeSnippetName: string;
+  setActiveSnippetName: (name: string) => void;
+};
+
+export const CODE_GROUP_SNIPPET_NAME_KEY = 'redocly:codeGroupSnippetName';
+
+export const CodeSnippetContext = createContext<CodeSnippetContextType | null>(null);
+
+export function useActiveCodeSnippetName(
+  mode: 'tabs' | 'dropdown',
+): [string, (name: string) => void] {
+  const context = useContext(CodeSnippetContext);
+  if (!context) {
+    throw new Error('useCodeSnippetContext must be used within a CodeSnippetContext');
+  }
+
+  const [activeSnippetName, setActiveSnippetName] = useState(
+    mode === 'tabs' ? '' : context.activeSnippetName,
+  );
+
+  if (mode === 'tabs') {
+    // use non-synced state for tabs mode
+    return [activeSnippetName, setActiveSnippetName];
+  } else {
+    // use global synced state for dropdown mode
+    return [context.activeSnippetName, context.setActiveSnippetName];
+  }
+}

package/src/core/contexts/index.ts

@@ -1,3 +1,4 @@
 export * from './ThemeDataContext';
 export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
+export * from './CodeSnippetContext';

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

@@ -86,4 +86,5 @@ export const useThemeHooks = jest.fn(() => ({
   })),
   useLoadAndNavigate: jest.fn(),
   usePageProps: jest.fn().mockReturnValue({}),
+  usePageData: jest.fn().mockReturnValue(null),
 }));

package/src/core/hooks/code-walkthrough/use-renderable-files.ts

@@ -1,14 +1,13 @@
 import { useMemo } from 'react';
 
 import type { CodeWalkthroughFile } from '@redocly/config';
-import type { IconProps } from '../../../icons/types';
 
 import { findClosestCommonDirectory } from '../../utils/find-closest-common-directory';
 import { getFileIconByExt } from '../../utils/get-file-icon';
 import { removeLeadingSlash } from '../../utils/urls';
 
 export type RenderableFile = CodeWalkthroughFile & {
-  FileIcon: React.FunctionComponent<IconProps>;
+  fileIcon: React.JSX.Element;
   parentFolder: string;
   isNameDuplicate: boolean;
   inRootDir: boolean;
@@ -21,7 +20,7 @@ export function useRenderableFiles(files: CodeWalkthroughFile[]): RenderableFile
       const rootDir = findClosestCommonDirectory(filePaths);
 
       const renderableFiles = files.map((file) => {
-        const FileIcon = getFileTypeIcon(file.basename);
+        const fileIcon = getFileTypeIcon(file.basename);
         const parentFolder = file.path.split('/').slice(-2, -1)[0];
         const isNameDuplicate = files.some(
           (_file) => file.basename === _file.basename && file.path !== _file.path,
@@ -30,7 +29,7 @@ export function useRenderableFiles(files: CodeWalkthroughFile[]): RenderableFile
 
         return {
           ...file,
-          FileIcon,
+          fileIcon,
           inRootDir,
           parentFolder,
           isNameDuplicate,

package/src/core/hooks/index.ts

@@ -40,3 +40,4 @@ export * from './catalog/useCatalogEntities';
 export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';
+export * from './use-page-actions';