@redocly/theme 0.58.0-next.9 → 0.59.0-next.0

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type {
-  CodeBlockDropdownItems,
-  CodeBlockTabItems,
-} from '@redocly/theme/components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
@@ -24,8 +21,8 @@ export type CodeBlockControlsProps = {
   className?: string;
   title?: React.ReactNode | string;
   controls?: ControlItems | false;
-  tabs?: CodeBlockTabItems;
-  dropdown?: CodeBlockDropdownItems;
+  tabs?: CodeBlockItems;
+  dropdown?: CodeBlockItems;
 };
 
 type ControlItems = {
@@ -87,7 +84,7 @@ export function CodeBlockControls({
       {tabs && <CodeBlockTabs tabs={tabs} />}
       <ControlsWrapper>
         {dropdown && <CodeBlockDropdown {...dropdown} />}
-        {report && !report?.props?.hide ? (
+        {report && !report.hidden && !report?.props?.hide ? (
           <TooltipWrapper
             tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
             placement="top"

package/src/components/CodeBlock/CodeBlockDropdown.tsx

@@ -1,24 +1,23 @@
 import React, { type JSX } from 'react';
-import styled from 'styled-components';
 
-import type { CodeBlockDropdownItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { Button } from '@redocly/theme/components/Button/Button';
-import { ChevronSortIcon } from '@redocly/theme/icons/ChevronSortIcon/ChevronSortIcon';
 import { NoneIcon } from '@redocly/theme/icons/NoneIcon/NoneIcon';
 import { getFileIconByLanguage } from '@redocly/theme/core/utils';
 
-export function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownItems): JSX.Element {
-  const activeItem = items.find((item) => item.name === value) || items[0];
+export function CodeBlockDropdown({ items, onChange, value }: CodeBlockItems): JSX.Element {
+  const activeItem = items.find((item) => item.id === value) || items[0];
   const icon = activeItem?.lang ? getFileIconByLanguage(activeItem?.lang) : null;
   return (
-    <StyledDropdown
+    <Dropdown
+      withArrow
       alignment="end"
       trigger={
-        <Button icon={<ChevronSortIcon />} iconPosition="right" variant="text" size="small">
+        <Button iconPosition="right" variant="ghost" size="small">
           {icon}
           {activeItem.name}
         </Button>
@@ -27,11 +26,12 @@ export function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownI
       <DropdownMenu>
         {items.map((item) => {
           const icon = getFileIconByLanguage(item.lang || '');
+          const isActive = item.id === value;
           return (
             <DropdownMenuItem
-              key={item.lang}
-              onAction={() => onChange(item.name)}
-              active={item.name === activeItem.name}
+              key={item.id}
+              onAction={() => onChange(item.id)}
+              active={isActive}
               prefix={item.lang ? icon : <NoneIcon size="var(--icon-size)" />}
             >
               {item.name}
@@ -39,15 +39,6 @@ export function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownI
           );
         })}
       </DropdownMenu>
-    </StyledDropdown>
+    </Dropdown>
   );
 }
-
-const StyledDropdown = styled(Dropdown)`
-  margin-left: auto;
-  --icon-size: 18px;
-  --button-color: var(--text-color-secondary);
-  button.button-size-small {
-    --button-icon-size: 18px;
-  }
-`;

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeBlockTabItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { useCodeBlockTabsControls } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -11,7 +11,7 @@ import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronR
 import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils/get-file-icon';
 
 export type CodeBlockTabsProps = {
-  tabs: CodeBlockTabItems;
+  tabs: CodeBlockItems;
 };
 
 export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
@@ -24,7 +24,7 @@ export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
   });
 
   useEffect(() => {
-    const activeTab = tabRefs.current.find((tab) => tab?.dataset.name === tabs.value);
+    const activeTab = tabRefs.current.find((tab) => tab?.dataset.id === tabs.value);
 
     if (activeTab) {
       activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
@@ -35,23 +35,23 @@ export function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element {
     <CodeBlockTabsWrapper ref={containerRef} data-component-name="CodeBlock/CodeBlockTabs">
       <ShadowWrapper>
         <Tabs>
-          {tabs.items.map(({ name, lang }, i) => {
+          {tabs.items.map((item, i) => {
+            const { name, lang, id } = item;
             const ext = name.match(/\.([^.]+)$/)?.[1];
             const fileIcon = lang
               ? getFileIconByLanguage(lang)
               : ext
                 ? getFileIconByExt(ext)
                 : null;
-
             return (
               <Tab
                 ref={(el: HTMLButtonElement | null) => {
                   tabRefs.current[i] = el as HTMLButtonElement;
                 }}
                 data-name={name}
-                active={name === tabs.value}
-                key={name + i}
-                onClick={() => tabs.onChange(name)}
+                active={id === tabs.value}
+                key={id}
+                onClick={() => tabs.onChange(id)}
               >
                 {fileIcon}
                 {name}

package/src/components/JsonViewer/JsonViewer.tsx

@@ -12,11 +12,11 @@ export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-
 
 export type JsonProps = {
   title?: CodeBlockControlsProps['title'];
+  controls?: CodeBlockControlsProps['controls'];
   data: any;
   className?: string;
   expandLevel: number;
   startLineNumber?: number;
-  hideHeader?: boolean;
   onCopyClick?: () => void;
   onPanelToggle?: (isExpanded: boolean, panelType?: PanelType) => void;
 };
@@ -28,7 +28,7 @@ function JsonComponent({
   onCopyClick,
   onPanelToggle,
   title,
-  hideHeader,
+  controls = {},
 }: JsonProps): JSX.Element {
   const showFoldingButtons =
     data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
@@ -53,6 +53,8 @@ function JsonComponent({
 
   const source = JSON.stringify(data, null, 2);
 
+  const hasHeader = title || controls;
+
   return (
     <JsonViewerWrap
       data-testid="json-viewer"
@@ -61,17 +63,22 @@ function JsonComponent({
     >
       <CodeBlock
         header={
-          hideHeader
-            ? undefined
-            : {
+          hasHeader
+            ? {
                 title,
                 className: 'code-block-header',
-                controls: {
-                  copy: { data, onClick: onCopyClick, handleOutside: true },
-                  expand: showFoldingButtons ? { onClick: expandAll } : undefined,
-                  collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
+                controls: controls && {
+                  ...controls,
+                  copy: { ...controls.copy, data, onClick: onCopyClick, handleOutside: true },
+                  expand: showFoldingButtons
+                    ? { ...controls.expand, onClick: expandAll }
+                    : undefined,
+                  collapse: showFoldingButtons
+                    ? { ...controls.collapse, onClick: collapseAll }
+                    : undefined,
                 },
               }
+            : undefined
         }
         source={source}
       >

package/src/components/PageActions/PageActions.tsx

@@ -13,20 +13,22 @@ 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';
+import { PageActionType, usePageActions } from '@redocly/theme/core/hooks';
 
 type ActionState = 'idle' | 'processing' | 'done';
 
 type PageActionProps = {
-  pageSlug: string;
+  pageSlug?: string;
+  mcpUrl?: string;
+  actions?: PageActionType[];
 };
 
 const ACTION_DONE_DISPLAY_DURATION = 1000;
 
 export function PageActions(props: PageActionProps): JSX.Element | null {
-  const { pageSlug } = props;
+  const { pageSlug, mcpUrl } = props;
 
-  const actions = usePageActions(pageSlug || '/');
+  const actions = usePageActions(pageSlug || '/', mcpUrl, props.actions);
 
   const [actionState, setActionState] = useState<ActionState>('idle');
 

package/src/components/Panel/variables.ts

@@ -329,6 +329,7 @@ export const apiReferencePanels = css`
   .panel-language-list,
   .panel-overview,
   .panel-download,
+  .panel-mcp-overview,
   .panel-servers-list,
   .panel-request-samples,
   .panel-response-samples,

package/src/components/Tag/Tag.tsx

@@ -26,13 +26,16 @@ type Color =
   | 'green'
   | 'blue'
   | 'grey'
-  | 'gold'
-  | 'cyan'
+  | 'turquoise'
   | 'magenta'
   | 'purple'
-  | 'lime'
-  | 'geekblue'
-  | 'yellow';
+  | 'carrot'
+  | 'raspberry'
+  | 'orange'
+  | 'grass'
+  | 'persian-green'
+  | 'sky'
+  | 'blueberry';
 
 export type TagProps = {
   className?: string;
@@ -52,6 +55,7 @@ export type TagProps = {
   onClose?: (event: React.MouseEvent) => void;
   maxLength?: number;
   textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+  variant?: 'outline' | 'filled';
 };
 
 export function Tag({
@@ -70,6 +74,7 @@ export function Tag({
   statusDotColor = 'var(--tag-status-dot-color-default)',
   maxLength,
   textTransform,
+  variant = 'filled',
   ...otherProps
 }: TagProps): JSX.Element {
   const truncateText = (text: string, maxLen: number): string => {
@@ -146,6 +151,7 @@ export function Tag({
       onKeyDown={onKeyDown}
       hasCloseButton={closable}
       textTransform={textTransform}
+      variant={variant}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
@@ -221,12 +227,31 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
     `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: var(--tag-bg-color);
-  ${({ borderless }) =>
+  background-color: ${({ variant }) =>
+    variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
+  ${({ borderless, variant }) =>
     borderless
       ? ''
-      : 'border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);'}
+      : `border: var(--tag-border-width) var(--tag-border-style) ${variant === 'filled' ? 'transparent' : 'var(--tag-border-color)'};`}
   border-radius: var(--tag-border-radius);
+
+  svg {
+    width: var(--tag-icon-width);
+    height: var(--tag-icon-height);
+  }
+
+  &:hover {
+    background-color: ${({ variant }) =>
+      variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
+    border-color: ${({ variant }) =>
+      variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--tag-border-color-focused);
+    outline-offset: 2px;
+    border-radius: var(--tag-border-radius-focused);
+  }
 `;
 
 const StatusDot = styled.div<{ color: string }>`

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

@@ -1,6 +1,9 @@
 import { css } from 'styled-components';
 
 export const tagDarkMode = css`
+  --tag-border-color-focused: var(--color-blue-8); // @presenter Color
+  --tag-badge-border-color: var(--border-color-secondary);
+
   --tag-operation-color-delete: #fa82a2; // @presenter Color
   --tag-operation-bg-color-delete: #77214C; // @presenter Color
 
@@ -39,6 +42,138 @@ export const tagDarkMode = css`
   .tag-draft,
   .tag-schema,
   .tag-default {
+    --tag-color: var(--color-warm-grey-8); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-warm-grey-5); // @presenter Color
+  }
+
+  .tag-red {
+    --tag-color: var(--color-red-7); // @presenter Color
+    --tag-bg-color: var(--color-red-1); // @presenter Color
+    --tag-border-color: var(--color-red-8); // @presenter Color
+    --tag-border-color-hover: var(--color-red-6); // @presenter Color
+  }
+
+  .tag-green {
+    --tag-color: var(--color-green-6); // @presenter Color
+    --tag-bg-color: var(--color-green-1); // @presenter Color
+    --tag-border-color: var(--color-green-3); // @presenter Color
+    --tag-border-color-hover: var(--color-green-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-green-2); // @presenter Color
+  }
+
+  .tag-blue {
+    --tag-color: var(--color-blue-7); // @presenter Color
+    --tag-bg-color: var(--color-blue-1); // @presenter Color
+    --tag-border-color-hover: var(--color-blue-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-blue-2); // @presenter Color
+  }
+
+  .tag-magenta,
+  .tag-hook { 
+    --tag-color: var(--color-magenta-4); // @presenter Color
+    --tag-bg-color: var(--color-magenta-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-magenta-2); // @presenter Color
+  }
+
+  .tag-purple,
+  .tag-head {
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-bg-color: var(--color-purple-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-purple-2); // @presenter Color
+    --tag-border-color-hover: var(--color-purple-5); // @presenter Color
+  }
+
+  .tag-carrot {
+    --tag-color: var(--color-carrot-6); // @presenter Color
+    --tag-bg-color: var(--color-carrot-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-carrot-2); // @presenter Color
+    --tag-border-color: var(--color-carrot-4); // @presenter Color
+  }
+
+  .tag-raspberry {
+    --tag-color: var(--color-raspberry-7); // @presenter Color
+    --tag-bg-color: var(--color-raspberry-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-raspberry-2); // @presenter Color
+  }
+
+  .tag-orange {
+    --tag-color: var(--color-orange-7); // @presenter Color
+    --tag-bg-color: var(--color-orange-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-orange-2); // @presenter Color
+    --tag-border-color: var(--color-orange-3); // @presenter Color
+    --tag-border-color-hover: var(--color-orange-5); // @presenter Color
+  }
+
+  .tag-grass {
+    --tag-bg-color: var(--color-grass-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-grass-2); // @presenter Color
+    --tag-color: var(--color-grass-7); // @presenter Color
+    --tag-border-color: var(--color-grass-3); // @presenter Color
+    --tag-border-color-hover: var(--color-grass-5); // @presenter Color
+  }
+
+  .tag-persian-green {
+    --tag-color: var(--color-persian-green-7); // @presenter Color
+    --tag-bg-color: var(--color-persian-green-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-persian-green-2); // @presenter Color
+    --tag-border-color: var(--color-persian-green-3); // @presenter Color
+    --tag-border-color-hover: var(--color-persian-green-5); // @presenter Color
+  }
+
+  .tag-turquoise,
+  .tag-option {
+    --tag-color: var(--color-turquoise-6); // @presenter Color
+    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
+    --tag-bg-color-hover: var(--color-turquoise-2); // @presenter Color
+    --tag-border-color: var(--color-turquoise-4); // @presenter Color
+  }
+
+  .tag-sky {
+    --tag-color: var(--color-sky-6); // @presenter Color
+    --tag-bg-color: var(--color-sky-1); // @presenter Color
+    --tag-border-color: var(--color-sky-4); // @presenter Color
+    --tag-bg-color-hover: var(--color-sky-2); // @presenter Color
+  }
+
+  .tag-blueberry {
+    --tag-color: var(--color-blueberry-7); // @presenter Color
+    --tag-bg-color: var(--color-blueberry-1); // @presenter Color
+    --tag-border-color-hover: var(--color-blueberry-5); // @presenter Color
+    --tag-bg-color-hover: var(--color-blueberry-2); // @presenter Color
+  }
+
+  .tag-warning,
+  .tag-deprecated {
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-bg-color: var(--color-warning-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-warning-bg-hover); // @presenter Color
+  }
+
+  .tag-processing,
+  .tag-info {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
+  }
+
+  .tag-error,
+  .tag-declined {
+    --tag-color: var(--color-error-active); // @presenter Color
+    --tag-bg-color: var(--color-error-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-error-bg-hover); // @presenter Color
+  }
+
+  .tag-success,
+  .tag-approved  {
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-bg-color: var(--color-success-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
+  }
+
+  .tag-link {
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-bg-color: var(--color-info-bg); // @presenter Color
+    --tag-bg-color-hover: var(--color-info-bg-hover); // @presenter Color
   }
 `;