@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/components/Navbar/variables.ts

@@ -4,9 +4,12 @@ export const navbar = css`
   --navbar-bg-color: var(--bg-color); // @presenter Color
   --navbar-border-color: var(--border-color-secondary);
   --navbar-border: 1px solid var(--navbar-border-color);
+  --navbar-row-bottom-border-color: var(--navbar-border-color);
 
   --navbar-text-color: var(--text-color-secondary); // @presenter Color
   --navbar-height: 64px; // @presenter Spacing
+  --navbar-stack-height: var(--navbar-height);
+  --navbar-offset: calc(var(--navbar-stack-height) + var(--banner-height));
   --navbar-font-size: var(--font-size-base);
   --navbar-padding: 0 var(--spacing-xl); // @presenter Spacing
   --navbar-font-family: var(--font-family-base);

package/src/components/NavigationTabs/NavigationTab.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { LinkProps, NavigationTabRowItem } from '@redocly/theme/core/types';
+
+import { getNavbarItemClickedPayload } from '@redocly/theme/core/utils';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { NavigationTabMenu } from '@redocly/theme/components/NavigationTabs/NavigationTabMenu';
+import { NavigationTabContent } from '@redocly/theme/components/NavigationTabs/NavigationTabContent';
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+
+export type NavigationTabProps = {
+  tab: NavigationTabRowItem;
+  className?: string;
+};
+
+export function NavigationTab({ tab, className }: NavigationTabProps): JSX.Element | null {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+
+  const active = !!tab.active;
+  const menuItems = tab.type === 'group' ? tab.items : [];
+  const isGroup = tab.type === 'group' && menuItems.length > 0;
+  const linkItem = tab.type === 'link' ? tab : undefined;
+
+  if (!linkItem?.link && !isGroup) {
+    return null;
+  }
+
+  const content = (
+    <>
+      <NavigationTabContent item={tab} />
+      {isGroup ? <NavigationTabChevron size="10px" /> : null}
+    </>
+  );
+
+  if (isGroup) {
+    return (
+      <NavigationTabWrapper
+        data-component-name="NavigationTabs/NavigationTab"
+        className={className}
+      >
+        <NavigationTabDropdown
+          triggerEvent="hover"
+          portalled
+          trigger={
+            <NavigationTabTrigger
+              $active={active}
+              aria-current={active ? 'true' : undefined}
+              onClick={() =>
+                telemetry.sendNavbarMenuItemClickedMessage(getNavbarItemClickedPayload(tab.type))
+              }
+            >
+              {content}
+            </NavigationTabTrigger>
+          }
+        >
+          <NavigationTabMenu items={menuItems} />
+        </NavigationTabDropdown>
+      </NavigationTabWrapper>
+    );
+  }
+
+  return (
+    <NavigationTabWrapper data-component-name="NavigationTabs/NavigationTab" className={className}>
+      <NavigationTabLink
+        as={Link}
+        to={linkItem?.link}
+        $active={active}
+        external={linkItem?.external}
+        target={linkItem?.target}
+        aria-current={active ? 'page' : undefined}
+        onClick={() =>
+          telemetry.sendNavbarMenuItemClickedMessage(getNavbarItemClickedPayload(tab.type))
+        }
+      >
+        {content}
+      </NavigationTabLink>
+    </NavigationTabWrapper>
+  );
+}
+
+const NavigationTabChevron = styled(ChevronDownIcon)`
+  flex-shrink: 0;
+`;
+
+const NavigationTabWrapper = styled.li`
+  list-style: none;
+  display: inline-flex;
+  align-items: stretch;
+  flex-shrink: 0;
+`;
+
+const NavigationTabDropdown = styled(Dropdown)`
+  display: inline-flex;
+  align-items: stretch;
+  height: 100%;
+`;
+
+const NavigationTabLink = styled.div<LinkProps & { $active: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navigation-tabs-item-content-gap);
+  box-sizing: border-box;
+  height: 100%;
+  padding: var(--navigation-tabs-item-padding);
+  font-size: var(--navigation-tabs-item-font-size);
+  line-height: var(--navigation-tabs-item-line-height);
+  white-space: nowrap;
+  text-decoration: none;
+  transition: border-color var(--navigation-tabs-item-transition);
+
+  font-weight: ${({ $active }) =>
+    $active
+      ? 'var(--navigation-tabs-item-font-weight-active)'
+      : 'var(--navigation-tabs-item-font-weight)'};
+  color: ${({ $active }) =>
+    $active
+      ? 'var(--navigation-tabs-item-text-color-active)'
+      : 'var(--navigation-tabs-item-text-color)'};
+  border-bottom: ${({ $active }) =>
+    $active
+      ? 'var(--navigation-tabs-item-bottom-border-active)'
+      : 'var(--navigation-tabs-item-bottom-border)'};
+
+  &:hover {
+    color: var(--navigation-tabs-item-text-color-hover);
+    border-bottom: ${({ $active }) => !$active && 'var(--navigation-tabs-item-bottom-border-hover)'};
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--navigation-tabs-item-border-color-focused);
+    outline-offset: 2px;
+    border-radius: var(--navigation-tabs-item-border-radius);
+  }
+`;
+
+const NavigationTabTrigger = styled(NavigationTabLink).attrs({ as: 'button', type: 'button' })`
+  background: none;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  font-family: inherit;
+  cursor: pointer;
+`;

package/src/components/NavigationTabs/NavigationTabContent.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { NavigationTabRowItem } from '@redocly/theme/core/types';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
+
+export type NavigationTabContentProps = {
+  item: NavigationTabRowItem;
+  className?: string;
+};
+
+export function NavigationTabContent({ item, className }: NavigationTabContentProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const label = translate(item.labelTranslationKey, item.label);
+
+  return (
+    <NavigationTabContentWrapper
+      data-component-name="NavigationTabs/NavigationTabContent"
+      className={className}
+    >
+      {(item.icon || item.srcSet) && <NavigationTabIcon icon={item.icon} srcSet={item.srcSet} />}
+      <NavigationTabLabel data-label={label} data-translation-key={item.labelTranslationKey}>
+        {label}
+      </NavigationTabLabel>
+      {'external' in item && item.external ? <NavigationTabExternalIcon size="10px" /> : null}
+    </NavigationTabContentWrapper>
+  );
+}
+
+const NavigationTabContentWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: var(--navigation-tabs-item-content-gap);
+`;
+
+const NavigationTabIcon = styled(GenericIcon)`
+  --icon-width: var(--navigation-tabs-item-icon-size);
+  --icon-height: var(--navigation-tabs-item-icon-size);
+  flex-shrink: 0;
+`;
+
+const NavigationTabLabel = styled.span`
+  display: inline-flex;
+  flex-direction: column;
+  cursor: pointer;
+  vertical-align: middle;
+
+  &::after {
+    content: attr(data-label);
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    font-weight: var(--navigation-tabs-item-label-font-weight-active);
+  }
+`;
+
+const NavigationTabExternalIcon = styled(LaunchIcon)`
+  margin-left: var(--navigation-tabs-item-external-icon-margin-left);
+  flex-shrink: 0;
+`;

package/src/components/NavigationTabs/NavigationTabMenu.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { NavigationTabItem } from '@redocly/theme/core/types';
+
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { NavigationTabContent } from '@redocly/theme/components/NavigationTabs/NavigationTabContent';
+
+export type NavigationTabMenuProps = {
+  items: NavigationTabItem[];
+  className?: string;
+};
+
+export function NavigationTabMenu({ items, className }: NavigationTabMenuProps): JSX.Element {
+  return (
+    <NavigationTabMenuWrapper
+      data-component-name="NavigationTabs/NavigationTabMenu"
+      className={className}
+    >
+      <DropdownMenu>
+        {items.map((item, index) => (
+          <DropdownMenuItem
+            key={`${item.label}_${index}`}
+            to={item.link}
+            external={item.external}
+            data-translation-key={item.labelTranslationKey}
+            active={item.active}
+            aria-current={item.active ? 'page' : undefined}
+          >
+            <NavigationTabContent item={item} />
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenu>
+    </NavigationTabMenuWrapper>
+  );
+}
+
+const NavigationTabMenuWrapper = styled.div``;

package/src/components/NavigationTabs/NavigationTabs.tsx

@@ -0,0 +1,83 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { NavigationTabsConfig } from '@redocly/theme/core/types';
+
+import { breakpoints } from '@redocly/theme/core/utils';
+import { useScrollItemIntoView, useThemeHooks } from '@redocly/theme/core/hooks';
+import { NavigationTab } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+
+export type NavigationTabsProps = {
+  config?: NavigationTabsConfig;
+  className?: string;
+};
+
+export function NavigationTabs({ config, className }: NavigationTabsProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const listRef = useRef<HTMLUListElement | null>(null);
+
+  const tabs = config?.items ?? [];
+  const activeIndex = tabs.findIndex((tab) => tab.active);
+
+  useScrollItemIntoView(listRef, activeIndex);
+
+  if (!tabs.length) {
+    return null;
+  }
+
+  return (
+    <NavigationTabsWrapper
+      data-component-name="NavigationTabs/NavigationTabs"
+      className={className}
+      aria-label={translate('navigationTabs.label', 'Navigation tabs')}
+    >
+      <NavigationTabsList ref={listRef}>
+        {tabs.map((tab, index) => (
+          <NavigationTab key={`${tab.label}_${index}`} tab={tab} />
+        ))}
+      </NavigationTabsList>
+    </NavigationTabsWrapper>
+  );
+}
+
+const NavigationTabsWrapper = styled.nav`
+  display: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--navigation-tabs-height);
+  max-width: var(--navbar-container-max-width);
+  padding: var(--navigation-tabs-padding);
+  background: var(--navigation-tabs-bg-color);
+  border-bottom: var(--navigation-tabs-bottom-border);
+  flex-shrink: 0;
+
+  @media screen and (min-width: ${breakpoints.medium}) {
+    display: flex;
+  }
+
+  @media screen and (min-width: ${breakpoints.max}) {
+    max-width: var(--container-max-width);
+    margin-left: auto;
+    margin-right: auto;
+  }
+`;
+
+const NavigationTabsList = styled.ul`
+  list-style: none;
+  margin: 0 0 calc(-1 * var(--navigation-tabs-border-width));
+  padding: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: var(--navigation-tabs-gap);
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/src/components/NavigationTabs/variables.ts

@@ -0,0 +1,34 @@
+import { css } from 'styled-components';
+
+export const navigationTabs = css`
+  --navigation-tabs-height: 48px; // @presenter Spacing
+  --navigation-tabs-bg-color: transparent; // @presenter Color
+  --navigation-tabs-border-color: var(--border-color-secondary);
+  --navigation-tabs-border-width: 1px;
+  --navigation-tabs-bottom-border: var(--navigation-tabs-border-width) solid var(--navigation-tabs-border-color);
+  --navigation-tabs-padding-vertical: 0;
+  --navigation-tabs-padding-horizontal: var(--spacing-xl);
+  --navigation-tabs-padding: var(--navigation-tabs-padding-vertical) var(--navigation-tabs-padding-horizontal); // @presenter Spacing
+  --navigation-tabs-gap: var(--spacing-base); // @presenter Spacing
+
+  --navigation-tabs-item-padding-vertical: var(--spacing-xxs);
+  --navigation-tabs-item-padding-horizontal: 0;
+  --navigation-tabs-item-padding: var(--navigation-tabs-item-padding-vertical) var(--navigation-tabs-item-padding-horizontal);
+  --navigation-tabs-item-content-gap: var(--spacing-xs);
+  --navigation-tabs-item-font-size: var(--font-size-base);
+  --navigation-tabs-item-line-height: var(--line-height-base);
+  --navigation-tabs-item-font-weight: var(--font-weight-regular);
+  --navigation-tabs-item-font-weight-active: var(--font-weight-medium);
+  --navigation-tabs-item-text-color: var(--navbar-text-color); // @presenter Color
+  --navigation-tabs-item-text-color-hover: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-text-color-active: var(--text-color-primary); // @presenter Color
+  --navigation-tabs-item-bottom-border: var(--navigation-tabs-border-width) solid transparent;
+  --navigation-tabs-item-bottom-border-hover: var(--navigation-tabs-border-width) solid var(--border-color-primary);
+  --navigation-tabs-item-bottom-border-active: var(--navigation-tabs-border-width) solid var(--border-color-inverse);
+  --navigation-tabs-item-border-color-focused: var(--button-border-color-focused);
+  --navigation-tabs-item-border-radius: var(--navbar-item-border-radius);
+  --navigation-tabs-item-icon-size: 1.25em; // @presenter Spacing
+  --navigation-tabs-item-external-icon-margin-left: 0;
+  --navigation-tabs-item-label-font-weight-active: var(--navigation-tabs-item-font-weight-active);
+  --navigation-tabs-item-transition: 150ms ease-in-out;
+`;

package/src/components/Portal/Portal.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 
 import type { PropsWithChildren, JSX } from 'react';
 
 import { IS_BROWSER } from '@redocly/theme/core/utils';
+import { PortalContainerContext } from '@redocly/theme/core/contexts/PortalContainerContext';
 
 export type PortalProps = {
   mountId?: string;
@@ -13,7 +14,8 @@ export function Portal({
   children,
   mountId = 'root',
 }: PropsWithChildren<PortalProps>): React.ReactPortal | JSX.Element {
-  const mount = IS_BROWSER ? document.getElementById(mountId) || document.body : null;
+  const container = useContext(PortalContainerContext);
+  const mount = IS_BROWSER ? container || document.getElementById(mountId) || document.body : null;
 
   if (!mount) {
     return <>{children}</>;

package/src/components/Product/utils.ts

@@ -2,5 +2,5 @@ export function getProductClassName(productName: string): string {
   return `product-${productName
     .toLowerCase()
     .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')}`;
+    .replace(/^-+|(?<!-)-+$/g, '')}`;
 }

package/src/components/Search/SearchAiActionButtons.tsx

@@ -10,6 +10,8 @@ import { ThumbUpFilledIcon } from '@redocly/theme/icons/ThumbUpFilledIcon/ThumbU
 import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
 import { ThumbDownFilledIcon } from '@redocly/theme/icons/ThumbDownFilledIcon/ThumbDownFilledIcon';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type SearchAiActionButtonsProps = {
   content: string;
@@ -26,28 +28,38 @@ export function SearchAiActionButtons({
   onFeedback,
   disabled,
 }: SearchAiActionButtonsProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <ActionButtonsWrapper className={className} data-component-name="Search/SearchAiActionButtons">
-      <CopyButton data={content} />
-      <FeedbackButton
-        variant="text"
-        size="small"
-        icon={feedback === FeedbackType.Like ? <ThumbUpFilledIcon /> : <ThumbUpIcon />}
-        onClick={() => !disabled && onFeedback(FeedbackType.Like)}
-        extraClass={feedback === FeedbackType.Like ? 'active' : ''}
-        aria-label="Like this response"
-        disabled={disabled}
-      />
+      <Tooltip tip={translate('search.ai.actions.copy', 'Copy the response')} placement="top">
+        <CopyButton data={content} />
+      </Tooltip>
+
+      <Tooltip tip={translate('search.ai.actions.like', 'Like the response')} placement="top">
+        <FeedbackButton
+          variant="text"
+          size="small"
+          icon={feedback === FeedbackType.Like ? <ThumbUpFilledIcon /> : <ThumbUpIcon />}
+          onClick={() => !disabled && onFeedback(FeedbackType.Like)}
+          extraClass={feedback === FeedbackType.Like ? 'active' : ''}
+          aria-label="Like this response"
+          disabled={disabled}
+        />
+      </Tooltip>
 
-      <FeedbackButton
-        variant="text"
-        size="small"
-        icon={feedback === FeedbackType.Dislike ? <ThumbDownFilledIcon /> : <ThumbDownIcon />}
-        onClick={() => !disabled && onFeedback(FeedbackType.Dislike)}
-        extraClass={feedback === FeedbackType.Dislike ? 'active' : ''}
-        aria-label="Dislike this response"
-        disabled={disabled}
-      />
+      <Tooltip tip={translate('search.ai.actions.dislike', 'Dislike the response')} placement="top">
+        <FeedbackButton
+          variant="text"
+          size="small"
+          icon={feedback === FeedbackType.Dislike ? <ThumbDownFilledIcon /> : <ThumbDownIcon />}
+          onClick={() => !disabled && onFeedback(FeedbackType.Dislike)}
+          extraClass={feedback === FeedbackType.Dislike ? 'active' : ''}
+          aria-label="Dislike this response"
+          disabled={disabled}
+        />
+      </Tooltip>
     </ActionButtonsWrapper>
   );
 }