@redocly/theme 0.47.0 → 0.47.1

package/lib/markdoc/components/CodeWalkthrough/CodeContainer.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeContainer = CodeContainer;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+const CodeBlockContainer_1 = require("../../../components/CodeBlock/CodeBlockContainer");
+function CodeContainer({ highlightedCode, toolbar, }) {
+    const { activeStep } = (0, react_1.useContext)(contexts_1.CodeWalkthroughStepsContext);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const compRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        // useEffect executed before DOM is updated due to re-render called before "painting" phase.
+        setTimeout(() => {
+            if (compRef.current) {
+                const element = compRef.current.querySelector('span.line.highlighted');
+                if (element) {
+                    element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+                }
+            }
+        }, 200);
+    }, [activeStep]);
+    return (react_1.default.createElement(CodeContainerWrapper, { ref: compRef, hideCodeColors: !isHovered, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
+        react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { dangerouslySetInnerHTML: { __html: highlightedCode } }),
+        toolbar));
+}
+const CodeContainerWrapper = styled_components_1.default.div `
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+
+  pre {
+    display: grid;
+    grid-auto-rows: min-content;
+    min-height: 0;
+    overflow: scroll;
+    margin: 0 !important;
+    height: 100%;
+    padding-left: 0 !important;
+
+    span.line::before {
+      color: var(--code-panel-line-numbering-color);
+    }
+    ${({ hideCodeColors }) => hideCodeColors &&
+    (0, styled_components_1.css) `
+        .line.greyed-out {
+          color: var(--text-color-helper) !important;
+          * {
+            color: var(--text-color-helper) !important;
+          }
+        }
+      `}
+  }
+`;
+//# sourceMappingURL=CodeContainer.js.map

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { CodeWalkthroughFilter } from '@redocly/config';
+export type CodeFilterProps = {
+    filters: CodeWalkthroughFilter[];
+    getFilterState: (groupId: string) => {
+        value: string;
+        render: boolean;
+    } | null;
+    handleFilterSelect: (groupId: string, id: string) => void;
+    filtersElementRef?: React.RefObject<HTMLDivElement>;
+};
+export declare function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersElementRef, }: CodeFilterProps): React.JSX.Element | null;

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -0,0 +1,58 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeFilters = CodeFilters;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../../components/Tag/Tag");
+function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersElementRef, }) {
+    if (filters.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(FilterWrapper, { ref: filtersElementRef }, filters.map(({ label, items, id }) => {
+        return (react_1.default.createElement(Filter, { key: id },
+            label && react_1.default.createElement(FilterName, null,
+                label,
+                ":"),
+            react_1.default.createElement(ButtonsWrapper, null, items === null || items === void 0 ? void 0 : items.map((item) => {
+                var _a;
+                return (react_1.default.createElement(TagButton, { size: "large", borderless: true, active: ((_a = getFilterState(id)) === null || _a === void 0 ? void 0 : _a.value) === item.value, key: item.value, onClick: () => handleFilterSelect(id, item.value) }, item.value));
+            }))));
+    })));
+}
+const Filter = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;
+const FilterName = styled_components_1.default.div `
+  color: var(--color-text-primary);
+  font-size: var(--font-size-base);
+`;
+const FilterWrapper = styled_components_1.default.div `
+  --tag-text-transform: none;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  position: sticky;
+
+  padding-top: calc(var(--spacing-xs) + var(--spacing-xl));
+  padding-right: var(--spacing-xl);
+  padding-left: var(--spacing-xl);
+  padding-bottom: var(--spacing-xs);
+  top: calc(var(--navbar-height));
+  background-color: var(--bg-color);
+  z-index: 1;
+`;
+const ButtonsWrapper = styled_components_1.default.div `
+  display: flex;
+`;
+const TagButton = (0, styled_components_1.default)(Tag_1.Tag) `
+  cursor: pointer;
+  padding: 0px var(--spacing-xs);
+  margin-right: var(--spacing-xs);
+`;
+//# sourceMappingURL=CodeFilters.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanel.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CodeWalkthroughFile } from '@redocly/config';
+export type CodePanelProps = {
+    files: CodeWalkthroughFile[];
+    downloadAssociatedFiles: CodeWalkthroughFile[];
+    preview: React.ReactNode[];
+};
+export declare function CodePanel({ files, downloadAssociatedFiles, preview, }: CodePanelProps): JSX.Element | null;

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanel = CodePanel;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const contexts_1 = require("../../../core/contexts");
+const CodePanelHeader_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelHeader");
+const CodePanelPreview_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelPreview");
+const CodeContainer_1 = require("../../../markdoc/components/CodeWalkthrough/CodeContainer");
+const CodePanelToolbar_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanelToolbar");
+function CodePanel({ files, downloadAssociatedFiles, preview, }) {
+    const { activeFile, handleTabSwitch, highlightedCode } = (0, hooks_1.useCodePanel)(files);
+    const { handleDownloadCode } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    return (react_1.default.createElement(CodePanelWrapper, null,
+        preview ? (react_1.default.createElement(CodePanelPreview_1.CodePanelPreview, null, preview.map((element, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, element))))) : null,
+        react_1.default.createElement(CodePanelHeader_1.CodePanelHeader, { files: files, activeTabName: (activeFile === null || activeFile === void 0 ? void 0 : activeFile.path) || '', handleTabSwitch: handleTabSwitch, onDownloadCode: () => handleDownloadCode([...files, ...downloadAssociatedFiles]) }),
+        react_1.default.createElement(CodeContainer_1.CodeContainer, { key: (activeFile === null || activeFile === void 0 ? void 0 : activeFile.path) || '', highlightedCode: highlightedCode, toolbar: react_1.default.createElement(CodePanelToolbar_1.CodePanelToolbar, { file: activeFile }) })));
+}
+const CodePanelWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-self: flex-start;
+
+  min-height: 144px;
+  min-width: 0;
+  height: 100%;
+  word-wrap: break-word;
+
+  background-color: var(--code-panel-bg-color);
+  border: 1px solid var(--code-panel-border-color);
+  border-radius: var(--code-panel-border-radius);
+  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  position: sticky;
+  top: calc(var(--navbar-height) + var(--spacing-xl));
+`;
+//# sourceMappingURL=CodePanel.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.d.ts

@@ -0,0 +1,8 @@
+import type { CodeWalkthroughFile } from '@redocly/config';
+export type CodePanelHeaderProps = {
+    files: CodeWalkthroughFile[];
+    handleTabSwitch: (name: string) => void;
+    activeTabName: string;
+    onDownloadCode: () => void;
+};
+export declare function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode, }: CodePanelHeaderProps): JSX.Element;

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.js

@@ -0,0 +1,155 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanelHeader = CodePanelHeader;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const utils_1 = require("../../../core/utils");
+const OverflowMenuVerticalIcon_1 = require("../../../icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon");
+const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
+const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
+const DownloadIcon_1 = require("../../../icons/DownloadIcon/DownloadIcon");
+const Button_1 = require("../../../components/Button/Button");
+function CodePanelHeader({ files, handleTabSwitch, activeTabName, onDownloadCode, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const tabRefs = (0, react_1.useRef)([]);
+    const tabsWrapperRef = (0, react_1.useRef)(null);
+    const [hiddenFiles, setHiddenFiles] = (0, react_1.useState)([]);
+    (0, react_1.useEffect)(() => {
+        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === activeTabName);
+        if (activeTab) {
+            activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
+        }
+    }, [activeTabName]);
+    (0, react_1.useEffect)(() => {
+        const calculateHiddenFiles = () => {
+            if (!tabsWrapperRef.current)
+                return;
+            const { left: wrapperLeft, right: wrapperRight } = tabsWrapperRef.current.getBoundingClientRect();
+            const hidden = files.filter((_, i) => {
+                const tab = tabRefs.current[i];
+                if (!tab)
+                    return false;
+                const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
+                return tabLeft < wrapperLeft || tabRight > wrapperRight;
+            });
+            setHiddenFiles(hidden);
+        };
+        calculateHiddenFiles();
+        window.addEventListener('resize', calculateHiddenFiles);
+        return () => window.removeEventListener('resize', calculateHiddenFiles);
+    }, [files]);
+    const getFileTypeIcon = (0, react_1.useCallback)((basename) => {
+        var _a;
+        const extension = ((_a = basename.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '';
+        return (0, utils_1.getFileIconByExt)(extension);
+    }, []);
+    return (react_1.default.createElement(CodePanelHeaderWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodePanelHeader" },
+        react_1.default.createElement(TabsWrapper, { ref: tabsWrapperRef },
+            react_1.default.createElement(Tabs, null, files.map(({ path, basename }, i) => {
+                const FileIcon = getFileTypeIcon(basename);
+                return (react_1.default.createElement(Tab, { ref: (el) => (tabRefs.current[i] = el), "data-name": path, active: path === activeTabName, key: i, onClick: () => handleTabSwitch(path) },
+                    react_1.default.createElement(FileIcon, null),
+                    basename));
+            })),
+            react_1.default.createElement(Gradient, null)),
+        react_1.default.createElement(ActionBar, null,
+            hiddenFiles.length ? (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(StyledOverflowMenuVerticalIcon, { size: "14px" }), alignment: "end" },
+                react_1.default.createElement(StyledDropdownMenu, null, hiddenFiles.map(({ path, basename }, i) => {
+                    const FileIcon = getFileTypeIcon(basename);
+                    return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { active: path === activeTabName, key: i, onAction: () => handleTabSwitch(path), prefix: react_1.default.createElement(FileIcon, null), content: basename }));
+                })))) : null,
+            react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(DownloadIcon_1.DownloadIcon, null), onClick: onDownloadCode, size: "small" }, translate('codeWalkthrough.download', 'Download')))));
+}
+const CodePanelHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+  max-width: 100%;
+`;
+const TabsWrapper = styled_components_1.default.div `
+  display: flex;
+  position: relative;
+  min-width: 0;
+`;
+const Gradient = styled_components_1.default.div `
+  position: absolute;
+  right: 0;
+  width: var(--spacing-base);
+  height: var(--code-panel-header-height);
+  background: var(--bg-raised-gradient);
+`;
+const Tabs = styled_components_1.default.div `
+  display: flex;
+  overflow-x: auto;
+  padding-right: var(--spacing-base);
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const ActionBar = styled_components_1.default.div `
+  display: flex;
+`;
+const Tab = styled_components_1.default.button `
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--spacing-sm);
+  background-color: transparent;
+  height: var(--code-panel-header-height);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  gap: var(--spacing-xs);
+  color: var(--text-color-secondary);
+  white-space: nowrap;
+
+  ${({ active }) => active
+    ? (0, styled_components_1.css) `
+          color: var(--text-color-primary);
+          background-color: var(--tab-bg-color-filled);
+        `
+    : (0, styled_components_1.css) `
+          &:hover {
+            color: var(--text-color-primary);
+          }
+        `}
+`;
+// code-walk-todo: figure it our why we could not do it differently
+const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
+  --md-list-left-padding: var(--dropdown-menu-padding);
+`;
+const StyledOverflowMenuVerticalIcon = (0, styled_components_1.default)(OverflowMenuVerticalIcon_1.OverflowMenuVerticalIcon) `
+  && {
+    outline: none;
+    box-sizing: content-box;
+    padding: 5px;
+  }
+`;
+//# sourceMappingURL=CodePanelHeader.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanelPreview.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function CodePanelPreview({ children }: PropsWithChildren): JSX.Element;

package/lib/markdoc/components/CodeWalkthrough/CodePanelPreview.js

@@ -0,0 +1,73 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanelPreview = CodePanelPreview;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const ChevronUpIcon_1 = require("../../../icons/ChevronUpIcon/ChevronUpIcon");
+const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
+function CodePanelPreview({ children }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(CodePanelPreviewWrapper, null,
+        react_1.default.createElement(PreviewDropdown, { onClick: () => setIsOpen(!isOpen) },
+            translate('codeWalkthrough.preview', 'Preview'),
+            isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)),
+        react_1.default.createElement(PreviewContentWrapper, { isOpen: isOpen }, children)));
+}
+const CodePanelPreviewWrapper = styled_components_1.default.div `
+  width: 100%;
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
+  border-bottom: 1px solid var(--border-color-secondary);
+`;
+const PreviewDropdown = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+
+  gap: (--spacing-xxs);
+
+  user-select: none;
+
+  font-size: var(--font-size-base);
+  cursor: pointer;
+`;
+const PreviewContentWrapper = styled_components_1.default.div `
+  display: ${({ isOpen }) => (isOpen ? 'grid' : 'none')};
+  place-items: center;
+
+  margin: auto 0;
+
+  max-height: 50vh;
+  width: 100%;
+  max-width: 100%;
+
+  overflow: auto;
+`;
+//# sourceMappingURL=CodePanelPreview.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanelToolbar.d.ts

@@ -0,0 +1,5 @@
+import type { CodeWalkthroughFile } from '@redocly/config';
+export type CodeToolbarProps = {
+    file: CodeWalkthroughFile;
+};
+export declare function CodePanelToolbar({ file }: CodeToolbarProps): JSX.Element;

package/lib/markdoc/components/CodeWalkthrough/CodePanelToolbar.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodePanelToolbar = CodePanelToolbar;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+const CopyButton_1 = require("../../../components/Buttons/CopyButton");
+function CodePanelToolbar({ file }) {
+    const { getFileText } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const fileContent = getFileText(file);
+    return (react_1.default.createElement(CodeToolbarWrapper, null,
+        react_1.default.createElement(CopyButton_1.CopyButton, { data: fileContent, type: "compound", variant: "secondary", size: "medium" })));
+}
+const CodeToolbarWrapper = styled_components_1.default.div `
+  display: flex;
+  position: absolute;
+  bottom: var(--spacing-sm);
+  right: var(--spacing-sm);
+  gap: var(--spacing-xs);
+`;
+//# sourceMappingURL=CodePanelToolbar.js.map

package/lib/markdoc/components/CodeWalkthrough/CodeStep.d.ts

@@ -0,0 +1,12 @@
+import React, { type PropsWithChildren } from 'react';
+import type { WithConditions } from '@redocly/config';
+export type CodeStepProps = WithConditions<{
+    id: string;
+    stepKey: number;
+    heading?: string;
+}>;
+export declare function CodeStep({ id, heading, stepKey, when, unless, children, }: PropsWithChildren<CodeStepProps>): React.JSX.Element | null;
+export declare const StepWrapper: import("styled-components").StyledComponent<"div", any, {
+    isActive: boolean;
+    scrollMarginTop: number;
+}, never>;

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -0,0 +1,128 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepWrapper = void 0;
+exports.CodeStep = CodeStep;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const contexts_1 = require("../../../core/contexts");
+function CodeStep({ id, heading, stepKey, when, unless, children, }) {
+    const compRef = (0, react_1.useRef)(null);
+    const { areConditionsMet } = (0, react_1.useContext)(contexts_1.CodeWalkthroughControlsStateContext);
+    const { activeStep, setActiveStep, register, unregister, lockObserver, filtersElementRef } = (0, react_1.useContext)(contexts_1.CodeWalkthroughStepsContext);
+    const isActive = activeStep === id;
+    const [scrollMarginTop, setScrollMarginTop] = (0, react_1.useState)(0);
+    const handleActivateStep = () => {
+        if (lockObserver) {
+            lockObserver.current = true;
+            if (compRef.current) {
+                compRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            }
+            setActiveStep(id);
+            setTimeout(() => {
+                lockObserver.current = false;
+            }, 1000);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        // If the step is active during first render, scroll to it
+        // This is to ensure that the step is visible when the page is loaded
+        if (isActive) {
+            handleActivateStep();
+        }
+        // Ignore dependency array because we only need to run this once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        const currentCompRef = compRef.current;
+        if (currentCompRef) {
+            currentCompRef
+                .querySelectorAll('a, button, input, textarea, select, [tabindex]')
+                .forEach((el) => {
+                el.setAttribute('tabindex', '-1');
+            });
+            register(currentCompRef);
+        }
+        const filtersElementHeight = ((_a = filtersElementRef === null || filtersElementRef === void 0 ? void 0 : filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+        const navbarHeight = ((_b = document.querySelector('nav')) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
+        setScrollMarginTop(filtersElementHeight + navbarHeight);
+        return () => {
+            if (currentCompRef) {
+                unregister(currentCompRef);
+            }
+        };
+    }, [activeStep, register, unregister, filtersElementRef]);
+    if (!areConditionsMet({ when, unless })) {
+        return null;
+    }
+    return (react_1.default.createElement(exports.StepWrapper, { ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, "data-step-key": stepKey, "data-step-active": isActive, onClick: handleActivateStep, onFocus: handleActivateStep, tabIndex: 0 },
+        react_1.default.createElement(StepContent, { isActive: isActive },
+            heading ? react_1.default.createElement(StepHeading, null, heading) : null,
+            children)));
+}
+const StepContent = styled_components_1.default.div `
+  margin: var(--spacing-xs) 0px var(--spacing-xs) calc(var(--spacing-unit) * 3.5);
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: ${({ isActive }) => (isActive ? 'var(--layer-color)' : 'none')};
+  border-radius: var(--border-radius);
+
+  &:hover {
+    background-color: ${({ isActive }) => isActive ? 'var(--code-step-bg-active-hover)' : 'var(--code-step-bg-hover)'};
+  }
+`;
+const StepHeading = styled_components_1.default.p `
+  font-weight: var(--font-weight-semibold);
+`;
+exports.StepWrapper = styled_components_1.default.div `
+  position: relative;
+  scroll-margin-top: ${({ scrollMarginTop }) => scrollMarginTop}px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 6px;
+    height: 100%;
+    background-color: ${({ isActive }) => isActive ? 'var(--code-step-vertical-line-bg-active)' : 'none'};
+    border-radius: var(--border-radius-lg);
+  }
+  &:hover::before {
+    background-color: ${({ isActive }) => isActive
+    ? 'var(--code-step-vertical-line-bg-active)'
+    : 'var(--code-step-vertical-line-bg-hover)'};
+  }
+
+  &:hover::before {
+    width: ${({ isActive }) => (isActive ? '8px' : '6px')};
+  }
+
+  &:hover ${StepContent} {
+    background-color: ${({ isActive }) => isActive ? 'var(--code-step-bg-active-hover)' : 'var(--code-step-bg-hover)'};
+  }
+`;
+//# sourceMappingURL=CodeStep.js.map