@redocly/theme 0.32.1 → 0.32.2

package/lib/components/Catalog/CatalogCard.js

@@ -79,7 +79,8 @@ const StyledCard = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/C
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);
   background-color: var(--catalog-card-background-color);
-  border: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
   transition: all 0.2s ease-in-out;
   border-radius: var(--catalog-card-border-radius);
   cursor: pointer;
@@ -98,6 +99,7 @@ const StyledCard = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/C
         fill: var(--catalog-card-icon-hover-color);
       }
     }
+  }
 `;
 const CardTitle = styled_components_1.default.h4 `
   color: var(--catalog-card-title-color);

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -7,10 +7,14 @@ export interface CodeBlockProps {
     header?: CodeBlockControlsProps;
     dataTestId?: string;
     className?: string;
+    tabs?: FileTabs;
     withLineNumbers?: boolean;
     startLineNumber?: number;
     highlightedHtml?: string;
+    skipHighlight?: boolean;
     codeBlockRef?: (instance: HTMLPreElement | null) => void;
+    codeBlockMaxHeight?: string;
+    hideCodeColors?: boolean;
 }
 export interface Sample {
     lang: string;
@@ -19,6 +23,13 @@ export interface Sample {
 export type UnstableExternalCodeSample = Sample & {
     get: (source: ExternalSource) => string;
 };
+export type FileTabs = {
+    files: {
+        name: string;
+    }[];
+    handleTabSwitch: (name: string) => void;
+    activeTabName: string;
+};
 export interface ExternalSource {
     sample: UnstableExternalCodeSample;
     exampleName?: string;
@@ -26,4 +37,4 @@ export interface ExternalSource {
     properties?: any;
     operation?: any;
 }
-export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, }: CodeBlockProps): JSX.Element;
+export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, }: CodeBlockProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlock.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
 const Feedback_1 = require("../../components/Feedback");
 const CodeBlock_1 = require("../../components/CodeBlock");
-function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, }) {
+function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, }) {
     var _a;
     const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
     const highlightedCode = highlightedHtml || (0, utils_1.highlight)(sourceCode, lang);
@@ -53,13 +53,13 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
         controls.copy.data = sourceCode;
     }
     return (react_1.default.createElement(Wrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
-        react_1.default.createElement(CodeBlock_1.CodeBlockControls, { className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
+        react_1.default.createElement(CodeBlock_1.CodeBlockControls, { tabs: tabs, className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
         react_1.default.createElement(ContainerWrapper, null,
             react_1.default.createElement(CodeBlock_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: {
                     __html: withLineNumbers
                         ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
                         : highlightedCode,
-                }, "data-cy": dataTestId, withControls: true }),
+                }, "data-cy": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, withControls: true }),
             reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang }))))));
 }
 exports.CodeBlock = CodeBlock;

package/lib/components/CodeBlock/CodeBlockContainer.d.ts

@@ -1,3 +1,5 @@
 export declare const CodeBlockContainer: import("styled-components").StyledComponent<"pre", any, {
     withControls?: boolean | undefined;
+    maxHeight?: string | undefined;
+    hideCodeColors?: boolean | undefined;
 }, never>;

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -32,7 +32,6 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
 })) `
   && {
     overflow-x: auto;
-    max-height: var(--code-block-max-height);
     font-family: var(--code-block-font-family);
     line-height: var(--code-block-line-height);
     font-weight: var(--code-block-font-weight);
@@ -42,7 +41,7 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
     color: var(--code-block-text-color);
     font-size: var(--code-block-font-size);
     white-space: var(--code-wrap, pre);
-    max-height: var(--code-block-max-height, 600px);
+    max-height: ${({ maxHeight }) => maxHeight ? maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
 
     ${(withControls) => withControls
@@ -56,93 +55,106 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
             border-radius: var(--code-block-border-radius);
             border: 1px solid var(--code-block-border-color);
           `}
-
-  /**
-  * Based on prism-dark.css
-  */
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-shadow: 0 -0.1em 0.2em black;
-    text-align: left;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
-
-  @media print {
+      /**
+      * Based on prism-dark.css
+      */
     code[class*='language-'],
     pre[class*='language-'] {
-      text-shadow: none;
+      text-shadow: 0 -0.1em 0.2em black;
+      text-align: left;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: 1.5;
+
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+
+      -webkit-hyphens: none;
+      -moz-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+    }
+
+    @media print {
+      code[class*='language-'],
+      pre[class*='language-'] {
+        text-shadow: none;
+      }
+    }
+
+    /* Code blocks */
+
+    pre[class*='language-'] {
+      padding: 1em;
+      margin: 0.5em 0;
+      overflow: auto;
+    }
+
+    .token.punctuation {
+      opacity: 1;
+    }
+
+    .namespace {
+      opacity: 0.7;
     }
-  }
-
-  /* Code blocks */
-  pre[class*='language-'] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
-  }
-
-  .token.punctuation {
-    opacity: 1;
-  }
-
-  .namespace {
-    opacity: 0.7;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    & + a,
-    & + a:visited {
-      color: var(--code-block-tokens-link-color);
-      text-decoration: underline;
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted {
+      & + a,
+      & + a:visited {
+        color: var(--code-block-tokens-link-color);
+        text-decoration: underline;
+      }
+    }
+
+    .token.property.string {
+      color: var(--code-block-tokens-property-string-color);
     }
-  }
-
-  .token.property.string {
-    color: var(--code-block-tokens-property-string-color);
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-
-  .code-line {
-    &:before {
-      content: attr(data-line-number);
-      display: inline-block;
-      min-width: 2em;
-      padding-right: 0.8em;
-      text-align: right;
-      pointer-events: none;
-      user-select: none;
+
+    .token.important,
+    .token.bold {
+      font-weight: bold;
     }
-  }
 
-  ${(0, utils_1.generateCodeBlockTokens)()}
+    .token.italic {
+      font-style: italic;
+    }
+
+    .token.entity {
+      cursor: help;
+    }
+
+    .code-line {
+      &:before {
+        content: attr(data-line-number);
+        display: inline-block;
+        min-width: 2em;
+        padding-right: 0.8em;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+      }
+    }
+
+    .highlighted {
+      background: var(--bg-overlay);
+    }
+
+    ${(0, utils_1.generateCodeBlockTokens)()}
+
+    ${({ hideCodeColors }) => hideCodeColors &&
+    (0, styled_components_1.css) `
+        .code-line:not(.highlighted),
+        .code-line:not(.highlighted) > span,
+        .code-line:not(.highlighted) > span > span {
+          color: grey;
+        }
+      `}
 `;
 //# sourceMappingURL=CodeBlockContainer.js.map

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
+import type { FileTabs } from '../../components/CodeBlock';
 export interface CodeBlockControlsProps {
     children?: React.ReactNode;
     className?: string;
     title?: React.ReactNode | string;
     controls?: ControlItems;
+    tabs?: FileTabs;
 }
 interface ControlItems {
     copy?: CopyControlProps;
@@ -29,5 +31,5 @@ interface CopyControlProps extends ControlProps {
     handleOutside?: boolean;
 }
 export type ControlItemType = 'text' | 'icon';
-export declare function CodeBlockControls({ children, className, title, controls, }: CodeBlockControlsProps): JSX.Element | null;
+export declare function CodeBlockControls({ children, className, title, controls, tabs, }: CodeBlockControlsProps): JSX.Element | null;
 export {};

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -11,15 +11,27 @@ const CopyButton_1 = require("../../components/CopyButton/CopyButton");
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
 const telemetry_1 = require("../../mocks/telemetry");
-function CodeBlockControls({ children, className, title, controls, }) {
+const components_1 = require("../../components");
+function CodeBlockControls({ children, className, title, controls, tabs, }) {
     var _a, _b, _c, _d, _e, _f;
     const { codeSnippet } = (0, hooks_1.useThemeConfig)();
     const controlsType = (codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.elementFormat) || 'icon';
     const { copy, expand, collapse, select, deselect, report } = controls
         ? controls
         : { copy: null, expand: null, collapse: null, select: null, deselect: null, report: null };
+    const FileTabs = () => {
+        return (react_1.default.createElement(CodeTabsBlock, null, tabs === null || tabs === void 0 ? void 0 : tabs.files.map(({ name }) => {
+            const isActive = name === tabs.activeTabName;
+            return (react_1.default.createElement(CodeTabButton, { active: isActive, key: name, onClick: () => {
+                    tabs.handleTabSwitch(name);
+                } },
+                react_1.default.createElement(icons_1.SmallFileIcon, null),
+                name));
+        })));
+    };
     const defaultControls = controls ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Title, null, title),
+        title && react_1.default.createElement(Title, null, title),
+        tabs && react_1.default.createElement(FileTabs, null),
         react_1.default.createElement(ControlsWrapper, null,
             report && ((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.visible) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, Object.assign({ "data-cy": "report-button", "data-testid": "report-button", asIcon: controlsType === 'icon', title: (_b = report.props) === null || _b === void 0 ? void 0 : _b.tooltip }, report.props), controlsType === 'icon' ? react_1.default.createElement(icons_1.ReportIcon, null) : ((_c = report.props) === null || _c === void 0 ? void 0 : _c.buttonText) || 'Report')) : null,
             expand && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { "data-cy": "expand-all", "data-testid": "expand-all", asIcon: controlsType === 'icon', onClick: expand === null || expand === void 0 ? void 0 : expand.onClick, title: (expand === null || expand === void 0 ? void 0 : expand.tooltipText) || 'Expand all' }, controlsType === 'icon' ? react_1.default.createElement(icons_1.ExpandIcon, null) : (expand === null || expand === void 0 ? void 0 : expand.label) ? expand.label : 'Expand all')) : null,
@@ -60,4 +72,26 @@ const ControlsWrapper = styled_components_1.default.div `
     opacity: 1;
   }
 `;
+const CodeTabsBlock = styled_components_1.default.div `
+  background: transparent;
+  border-radius: var(--global-border-radius) 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 12px 0;
+  justify-content: flex-start;
+  flex-direction: row;
+  padding: 0 12px;
+`;
+const CodeTabButton = (0, styled_components_1.default)(components_1.Button) `
+  border: none;
+  padding: 8px 12px;
+  background: ${({ active }) => (active ? 'var(--color-primary-base)' : 'transparent')};
+  color: ${({ active }) => (active ? '#fff' : 'var(--text-base)')};
+  font-size: var(--font-size-sm);
+
+  &:hover {
+    background: var(--color-primary-bg-hover);
+    border: none;
+  }
+`;
 //# sourceMappingURL=CodeBlockControls.js.map

package/lib/icons/FileIcon/FileIcon.d.ts

@@ -3,4 +3,5 @@ interface IconProps {
     className?: string;
 }
 export declare const FileIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
+export declare const SmallFileIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/FileIcon/FileIcon.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FileIcon = void 0;
+exports.SmallFileIcon = exports.FileIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Icon = ({ className }) => (react_1.default.createElement("svg", { "data-component-name": "icons/FileIcon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
@@ -14,4 +14,8 @@ exports.FileIcon = (0, styled_components_1.default)(Icon) `
   height: 1.3em;
   vertical-align: middle;
 `;
+exports.SmallFileIcon = (0, styled_components_1.default)(Icon) `
+  width: 1em;
+  height: 1em;
+`;
 //# sourceMappingURL=FileIcon.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.32.1",
+  "version": "0.32.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/CatalogCard.tsx

@@ -76,7 +76,8 @@ const StyledCard = styled.div.attrs({ 'data-cy': 'Catalog/CatalogCard' })`
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);
   background-color: var(--catalog-card-background-color);
-  border: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
+    var(--catalog-card-border-color);
   transition: all 0.2s ease-in-out;
   border-radius: var(--catalog-card-border-radius);
   cursor: pointer;
@@ -95,6 +96,7 @@ const StyledCard = styled.div.attrs({ 'data-cy': 'Catalog/CatalogCard' })`
         fill: var(--catalog-card-icon-hover-color);
       }
     }
+  }
 `;
 
 const CardTitle = styled.h4`

package/src/components/CodeBlock/CodeBlock.tsx

@@ -14,11 +14,14 @@ export interface CodeBlockProps {
   header?: CodeBlockControlsProps;
   dataTestId?: string;
   className?: string;
-
+  tabs?: FileTabs;
   withLineNumbers?: boolean;
   startLineNumber?: number;
   highlightedHtml?: string;
+  skipHighlight?: boolean;
   codeBlockRef?: (instance: HTMLPreElement | null) => void;
+  codeBlockMaxHeight?: string;
+  hideCodeColors?: boolean;
 }
 
 export interface Sample {
@@ -30,6 +33,12 @@ export type UnstableExternalCodeSample = Sample & {
   get: (source: ExternalSource) => string;
 };
 
+export type FileTabs = {
+  files: { name: string }[];
+  handleTabSwitch: (name: string) => void;
+  activeTabName: string;
+};
+
 export interface ExternalSource {
   sample: UnstableExternalCodeSample;
   exampleName?: string;
@@ -49,6 +58,9 @@ export function CodeBlock({
   withLineNumbers,
   startLineNumber,
   className,
+  codeBlockMaxHeight,
+  tabs,
+  hideCodeColors,
 }: CodeBlockProps): JSX.Element {
   const [sourceCode, setSourceCode] = useState<string>(source ?? '');
 
@@ -78,7 +90,12 @@ export function CodeBlock({
 
   return (
     <Wrapper data-component-name="CodeBlock/CodeBlock" className={className}>
-      <CodeBlockControls className={header?.className} title={header?.title} controls={controls} />
+      <CodeBlockControls
+        tabs={tabs}
+        className={header?.className}
+        title={header?.title}
+        controls={controls}
+      />
       <ContainerWrapper>
         <CodeBlockContainer
           ref={codeBlockRef}
@@ -89,6 +106,8 @@ export function CodeBlock({
               : highlightedCode,
           }}
           data-cy={dataTestId}
+          hideCodeColors={hideCodeColors}
+          maxHeight={codeBlockMaxHeight}
           withControls={true}
         />
         {reportDialog.visible && (

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -5,10 +5,9 @@ import { generateCodeBlockTokens } from '@theme/utils';
 export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'CodeBlock/CodeBlockContainer',
   className,
-}))<{ withControls?: boolean }>`
+}))<{ withControls?: boolean; maxHeight?: string; hideCodeColors?: boolean }>`
   && {
     overflow-x: auto;
-    max-height: var(--code-block-max-height);
     font-family: var(--code-block-font-family);
     line-height: var(--code-block-line-height);
     font-weight: var(--code-block-font-weight);
@@ -18,7 +17,8 @@ export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ cl
     color: var(--code-block-text-color);
     font-size: var(--code-block-font-size);
     white-space: var(--code-wrap, pre);
-    max-height: var(--code-block-max-height, 600px);
+    max-height: ${({ maxHeight }) =>
+      maxHeight ? maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
 
     ${(withControls) =>
@@ -33,92 +33,106 @@ export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ cl
             border-radius: var(--code-block-border-radius);
             border: 1px solid var(--code-block-border-color);
           `}
-
-  /**
-  * Based on prism-dark.css
-  */
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-shadow: 0 -0.1em 0.2em black;
-    text-align: left;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
-
-  @media print {
+      /**
+      * Based on prism-dark.css
+      */
     code[class*='language-'],
     pre[class*='language-'] {
-      text-shadow: none;
+      text-shadow: 0 -0.1em 0.2em black;
+      text-align: left;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: 1.5;
+
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+
+      -webkit-hyphens: none;
+      -moz-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+    }
+
+    @media print {
+      code[class*='language-'],
+      pre[class*='language-'] {
+        text-shadow: none;
+      }
+    }
+
+    /* Code blocks */
+
+    pre[class*='language-'] {
+      padding: 1em;
+      margin: 0.5em 0;
+      overflow: auto;
+    }
+
+    .token.punctuation {
+      opacity: 1;
     }
-  }
-
-  /* Code blocks */
-  pre[class*='language-'] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
-  }
-
-  .token.punctuation {
-    opacity: 1;
-  }
-
-  .namespace {
-    opacity: 0.7;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    & + a,
-    & + a:visited {
-      color: var(--code-block-tokens-link-color);
-      text-decoration: underline;
+
+    .namespace {
+      opacity: 0.7;
+    }
+
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted {
+      & + a,
+      & + a:visited {
+        color: var(--code-block-tokens-link-color);
+        text-decoration: underline;
+      }
     }
-  }
-
-  .token.property.string {
-    color: var(--code-block-tokens-property-string-color);
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-
-  .code-line {
-    &:before {
-      content: attr(data-line-number);
-      display: inline-block;
-      min-width: 2em;
-      padding-right: 0.8em;
-      text-align: right;
-      pointer-events: none;
-      user-select: none;
+
+    .token.property.string {
+      color: var(--code-block-tokens-property-string-color);
+    }
+
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+
+    .token.italic {
+      font-style: italic;
+    }
+
+    .token.entity {
+      cursor: help;
+    }
+
+    .code-line {
+      &:before {
+        content: attr(data-line-number);
+        display: inline-block;
+        min-width: 2em;
+        padding-right: 0.8em;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+      }
+    }
+
+    .highlighted {
+      background: var(--bg-overlay);
     }
-  }
 
-  ${generateCodeBlockTokens()}
+    ${generateCodeBlockTokens()}
+
+    ${({ hideCodeColors }) =>
+      hideCodeColors &&
+      css`
+        .code-line:not(.highlighted),
+        .code-line:not(.highlighted) > span,
+        .code-line:not(.highlighted) > span > span {
+          color: grey;
+        }
+      `}
 `;

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -3,15 +3,25 @@ import styled from 'styled-components';
 
 import { CodeBlockControlButton } from '@theme/components/CodeBlock';
 import { CopyButton } from '@theme/components/CopyButton/CopyButton';
-import { CollapseIcon, DeselectIcon, ExpandIcon, ReportIcon, SelectIcon } from '@theme/icons';
+import {
+  CollapseIcon,
+  DeselectIcon,
+  ExpandIcon,
+  ReportIcon,
+  SelectIcon,
+  SmallFileIcon,
+} from '@theme/icons';
 import { useThemeConfig } from '@theme/hooks';
 import { telemetry } from '@portal/telemetry';
+import { Button } from '@theme/components';
+import type { FileTabs } from '@theme/components/CodeBlock';
 
 export interface CodeBlockControlsProps {
   children?: React.ReactNode;
   className?: string;
   title?: React.ReactNode | string;
   controls?: ControlItems;
+  tabs?: FileTabs;
 }
 
 interface ControlItems {
@@ -47,6 +57,7 @@ export function CodeBlockControls({
   className,
   title,
   controls,
+  tabs,
 }: CodeBlockControlsProps): JSX.Element | null {
   const { codeSnippet } = useThemeConfig();
   const controlsType = (codeSnippet?.elementFormat as ControlItemType) || 'icon';
@@ -54,9 +65,32 @@ export function CodeBlockControls({
     ? controls
     : { copy: null, expand: null, collapse: null, select: null, deselect: null, report: null };
 
+  const FileTabs = () => {
+    return (
+      <CodeTabsBlock>
+        {tabs?.files.map(({ name }) => {
+          const isActive = name === tabs.activeTabName;
+          return (
+            <CodeTabButton
+              active={isActive}
+              key={name}
+              onClick={() => {
+                tabs.handleTabSwitch(name);
+              }}
+            >
+              <SmallFileIcon />
+              {name}
+            </CodeTabButton>
+          );
+        })}
+      </CodeTabsBlock>
+    );
+  };
+
   const defaultControls = controls ? (
     <>
-      <Title>{title}</Title>
+      {title && <Title>{title}</Title>}
+      {tabs && <FileTabs />}
       <ControlsWrapper>
         {report && report?.props?.visible ? (
           <CodeBlockControlButton
@@ -186,3 +220,27 @@ const ControlsWrapper = styled.div`
     opacity: 1;
   }
 `;
+
+const CodeTabsBlock = styled.div`
+  background: transparent;
+  border-radius: var(--global-border-radius) 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 12px 0;
+  justify-content: flex-start;
+  flex-direction: row;
+  padding: 0 12px;
+`;
+
+const CodeTabButton = styled(Button)<{ active: boolean }>`
+  border: none;
+  padding: 8px 12px;
+  background: ${({ active }) => (active ? 'var(--color-primary-base)' : 'transparent')};
+  color: ${({ active }) => (active ? '#fff' : 'var(--text-base)')};
+  font-size: var(--font-size-sm);
+
+  &:hover {
+    background: var(--color-primary-bg-hover);
+    border: none;
+  }
+`;

package/src/icons/FileIcon/FileIcon.tsx

@@ -26,3 +26,8 @@ export const FileIcon = styled(Icon)`
   height: 1.3em;
   vertical-align: middle;
 `;
+
+export const SmallFileIcon = styled(Icon)`
+  width: 1em;
+  height: 1em;
+`;