@redocly/theme 0.48.0 → 0.48.1

package/src/icons/DocumentShellIcon/DocumentShellIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M14.5351 2.99992H3.83862C3.6752 3.00407 3.51738 3.06029 3.38814 3.16039C3.25891 3.26049 3.16501 3.39924 3.12012 3.55642L1.02012 12.4434C0.998149 12.5106 0.993246 12.5822 1.00585 12.6518C1.01845 12.7213 1.04817 12.7867 1.09232 12.8419C1.13646 12.8971 1.19365 12.9404 1.25874 12.968C1.32382 12.9956 1.39474 13.0066 1.46512 12.9999H12.1616C12.3249 12.9957 12.4827 12.9394 12.6118 12.8393C12.7409 12.7392 12.8348 12.6005 12.8796 12.4434L14.9801 3.55592C15.002 3.48876 15.0068 3.41722 14.9942 3.34773C14.9815 3.27825 14.9518 3.213 14.9076 3.15785C14.8635 3.10271 14.8064 3.05941 14.7413 3.03184C14.6763 3.00427 14.6054 2.9933 14.5351 2.99992ZM4.31312 11.8984C4.16872 11.9865 3.99731 12.0194 3.83057 11.9909C3.66383 11.9624 3.51306 11.8745 3.40612 11.7434L3.40262 11.7389C3.35483 11.6781 3.32075 11.6076 3.30269 11.5324C3.28463 11.4572 3.28302 11.3789 3.29797 11.303C3.31292 11.2271 3.34409 11.1554 3.38933 11.0926C3.43457 11.0298 3.49283 10.9776 3.56012 10.9394L8.36012 7.90892L5.30912 4.98292L5.30412 4.97792C5.24784 4.92482 5.20377 4.86011 5.17497 4.78829C5.14616 4.71647 5.13332 4.63924 5.13731 4.56196C5.14131 4.48469 5.16205 4.4092 5.1981 4.34073C5.23416 4.27226 5.28466 4.21244 5.34612 4.16542L5.36462 4.15042C5.49395 4.04749 5.65594 3.9944 5.82112 4.00082C5.98629 4.00725 6.14367 4.07275 6.26462 4.18542L9.88112 7.66392C9.96402 7.76867 10.006 7.90001 9.99912 8.03342C9.99485 8.11013 9.97427 8.18504 9.93875 8.25316C9.90323 8.32127 9.85358 8.38102 9.79312 8.42842C9.75612 8.44842 9.72012 8.48792 4.31762 11.8959L4.31312 11.8984ZM12.0001 11.4699C11.9905 11.6194 11.9221 11.7589 11.81 11.8582C11.6979 11.9575 11.5511 12.0084 11.4016 11.9999H8.58462C8.51096 12.0071 8.43662 11.9987 8.36638 11.9754C8.29614 11.9521 8.23156 11.9144 8.17677 11.8646C8.12199 11.8149 8.07822 11.7542 8.04828 11.6865C8.01834 11.6188 8.00289 11.5457 8.00293 11.4716C8.00296 11.3976 8.01848 11.3245 8.04848 11.2568C8.07849 11.1892 8.12231 11.1285 8.17714 11.0788C8.23197 11.0291 8.2966 10.9915 8.36686 10.9682C8.43712 10.945 8.51147 10.9367 8.58512 10.9439H11.4016C11.5503 10.9353 11.6965 10.9855 11.8085 11.0837C11.9205 11.182 11.9893 11.3203 12.0001 11.4689V11.4699Z"
+      fill="#3B3C45"
+    />
+  </svg>
+);
+
+export const DocumentShellIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DocumentShellIcon/DocumentShellIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DocumentShellIcon/index.ts

@@ -0,0 +1 @@
+export { DocumentShellIcon } from '@redocly/theme/icons/DocumentShellIcon/DocumentShellIcon';

package/src/icons/__tests__/IconTestUtils.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+export function testIconComponent(IconComponent: React.ComponentType<any>, componentName: string) {
+  const dataName = `icons/${componentName}/${componentName}`;
+
+  return {
+    rendersCorrectlyWithDefaultProps: () => {
+      const { container } = render(<IconComponent />);
+      const svgElement = container.querySelector('svg');
+      expect(svgElement).toBeInTheDocument();
+      expect(container.firstChild).toHaveStyle('height: 16px; width: 16px;');
+    },
+
+    appliesCustomSizeAndColor: () => {
+      const { container } = render(<IconComponent size="24px" color="--color-primary" />);
+
+      const svgElement = container.querySelector('svg');
+      expect(svgElement).toBeInTheDocument();
+      expect(container.firstChild).toHaveStyle('height: 24px; width: 24px;');
+      const pathElement = container.querySelector('path');
+      expect(pathElement).toHaveStyle('fill: var(--color-primary);');
+    },
+
+    hasCorrectDataComponentName: () => {
+      const { container } = render(<IconComponent />);
+      expect(container.firstChild).toHaveAttribute('data-component-name', dataName);
+    },
+  };
+}

package/src/layouts/CodeWalkthroughLayout.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { breakpoints } from '@redocly/theme/core';
+
 export type CodeWalkthroughLayoutProps = React.PropsWithChildren<{
   className?: string;
 }>;
@@ -66,8 +68,10 @@ const ContentWrapper = styled.section`
 
     /* Full-width styling for all .code-walkthroughs */
     .code-walkthrough {
-      max-width: none;
       width: 100%;
+      max-width: ${breakpoints.max};
+      margin-left: auto;
+      margin-right: auto;
     }
 
     &:first-child > h1:first-child {

package/src/markdoc/components/CodeWalkthrough/CodeContainer.tsx

@@ -31,6 +31,7 @@ export function CodeContainer({
 
   return (
     <CodeContainerWrapper
+      data-component-name="Markdoc/CodeWalkthrough/CodeContainer"
       ref={compRef}
       hideCodeColors={!isHovered}
       onMouseEnter={() => setIsHovered(true)}

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { CodeWalkthroughFilter } from '@redocly/config';
 
-import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { Tag, ContentWrapper as TagContentWrapper } from '@redocly/theme/components/Tag/Tag';
 
 export type CodeFilterProps = {
   filters: CodeWalkthroughFilter[];
@@ -23,7 +23,10 @@ export function CodeFilters({
   }
 
   return (
-    <FilterWrapper ref={filtersElementRef}>
+    <FilterWrapper
+      ref={filtersElementRef}
+      data-component-name="Markdoc/CodeWalkthrough/CodeFilters"
+    >
       {filters.map(({ label, items, id }) => {
         return (
           <Filter key={id}>
@@ -50,8 +53,9 @@ export function CodeFilters({
 
 const Filter = styled.div`
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-xs);
+  max-width: 100%;
 `;
 
 const FilterName = styled.div`
@@ -74,14 +78,26 @@ const FilterWrapper = styled.div`
   top: calc(var(--navbar-height));
   background-color: var(--bg-color);
   z-index: 1;
+  max-width: var(--md-content-max-width);
 `;
 
 const ButtonsWrapper = styled.div`
   display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
 `;
 
 const TagButton = styled(Tag)`
   cursor: pointer;
   padding: 0px var(--spacing-xs);
   margin-right: var(--spacing-xs);
+  max-width: 100%;
+  margin-bottom: var(--spacing-xs);
+
+  ${TagContentWrapper} {
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 `;

package/src/markdoc/components/CodeWalkthrough/CodePanel.tsx

@@ -25,7 +25,7 @@ export function CodePanel({
   const { handleDownloadCode } = useContext(CodeWalkthroughControlsStateContext);
 
   return (
-    <CodePanelWrapper>
+    <CodePanelWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanel">
       {preview ? (
         <CodePanelPreview>
           {preview.map((element, idx) => (

package/src/markdoc/components/CodeWalkthrough/CodePanelHeader.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { CodeWalkthroughFile } from '@redocly/config';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { getFileIconByExt } from '@redocly/theme/core/utils';
+import { useThemeHooks, useRenderableFiles, type RenderableFile } from '@redocly/theme/core/hooks';
 import { OverflowMenuVerticalIcon } from '@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
@@ -25,32 +24,45 @@ export function CodePanelHeader({
   activeTabName,
   onDownloadCode,
 }: CodePanelHeaderProps): JSX.Element {
+  const renderableFiles = useRenderableFiles(files);
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const tabRefs = useRef<HTMLButtonElement[]>([]);
   const tabsWrapperRef = useRef<HTMLDivElement>(null);
-  const [hiddenFiles, setHiddenFiles] = useState<CodeWalkthroughFile[]>([]);
+  const [hiddenFiles, setHiddenFiles] = useState<RenderableFile[]>([]);
 
   useEffect(() => {
     const activeTab = tabRefs.current.find((tab) => tab?.dataset.name === activeTabName);
-    if (activeTab) {
-      activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
+    const tabsWrapper = tabsWrapperRef.current;
+
+    if (activeTab && tabsWrapper) {
+      const { left: wrapperLeft, right: wrapperRight } = tabsWrapper.getBoundingClientRect();
+      const { left: tabLeft, right: tabRight } = activeTab.getBoundingClientRect();
+      const tabHidden = tabLeft < wrapperLeft || tabRight > wrapperRight;
+
+      if (tabHidden) {
+        activeTab.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
     }
-  }, [activeTabName]);
 
-  useEffect(() => {
     const calculateHiddenFiles = () => {
       if (!tabsWrapperRef.current) return;
       const { left: wrapperLeft, right: wrapperRight } =
         tabsWrapperRef.current.getBoundingClientRect();
 
-      const hidden = files.filter((_, i) => {
+      const hidden: RenderableFile[] = [];
+
+      for (let i = 0; i < renderableFiles.length; i++) {
         const tab = tabRefs.current[i];
-        if (!tab) return false;
+        if (!tab) continue;
+
         const { left: tabLeft, right: tabRight } = tab.getBoundingClientRect();
+        const visible = tabLeft > wrapperLeft && tabRight < wrapperRight;
 
-        return tabLeft < wrapperLeft || tabRight > wrapperRight;
-      });
+        if (!visible) {
+          hidden.push(renderableFiles[i]);
+        }
+      }
 
       setHiddenFiles(hidden);
     };
@@ -58,32 +70,29 @@ export function CodePanelHeader({
     calculateHiddenFiles();
     window.addEventListener('resize', calculateHiddenFiles);
     return () => window.removeEventListener('resize', calculateHiddenFiles);
-  }, [files]);
-
-  const getFileTypeIcon = useCallback((basename: string) => {
-    const extension = basename.split('.').pop()?.toLowerCase() || '';
-    return getFileIconByExt(extension);
-  }, []);
+  }, [activeTabName, files, renderableFiles]);
 
   return (
     <CodePanelHeaderWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanelHeader">
       <TabsWrapper ref={tabsWrapperRef}>
         <Tabs>
-          {files.map(({ path, basename }, i) => {
-            const FileIcon = getFileTypeIcon(basename);
-            return (
-              <Tab
-                ref={(el: HTMLButtonElement) => (tabRefs.current[i] = el)}
-                data-name={path}
-                active={path === activeTabName}
-                key={i}
-                onClick={() => handleTabSwitch(path)}
-              >
-                <FileIcon />
-                {basename}
-              </Tab>
-            );
-          })}
+          {renderableFiles.map(
+            ({ path, basename, FileIcon, parentFolder, isNameDuplicate, inRootDir }, i) => {
+              return (
+                <Tab
+                  ref={(el: HTMLButtonElement) => (tabRefs.current[i] = el)}
+                  data-name={path}
+                  active={path === activeTabName}
+                  key={i}
+                  onClick={() => handleTabSwitch(path)}
+                >
+                  <FileIcon />
+                  {basename}
+                  {isNameDuplicate && !inRootDir ? <Dirname>{parentFolder}</Dirname> : null}
+                </Tab>
+              );
+            },
+          )}
         </Tabs>
         <Gradient />
       </TabsWrapper>
@@ -92,18 +101,21 @@ export function CodePanelHeader({
         {hiddenFiles.length ? (
           <Dropdown trigger={<StyledOverflowMenuVerticalIcon size="14px" />} alignment="end">
             <StyledDropdownMenu>
-              {hiddenFiles.map(({ path, basename }, i) => {
-                const FileIcon = getFileTypeIcon(basename);
-                return (
-                  <DropdownMenuItem
-                    active={path === activeTabName}
-                    key={i}
-                    onAction={() => handleTabSwitch(path)}
-                    prefix={<FileIcon />}
-                    content={basename}
-                  />
-                );
-              })}
+              {hiddenFiles.map(
+                ({ path, basename, FileIcon, isNameDuplicate, inRootDir, parentFolder }, i) => {
+                  return (
+                    <DropdownMenuItem
+                      active={path === activeTabName}
+                      key={i}
+                      onAction={() => handleTabSwitch(path)}
+                      prefix={<FileIcon />}
+                      content={
+                        isNameDuplicate && !inRootDir ? `${parentFolder}/${basename}` : basename
+                      }
+                    />
+                  );
+                },
+              )}
             </StyledDropdownMenu>
           </Dropdown>
         ) : null}
@@ -141,7 +153,7 @@ const Gradient = styled.div`
 
 const Tabs = styled.div`
   display: flex;
-  overflow-x: auto;
+  overflow-x: hidden;
   padding-right: var(--spacing-base);
 
   &::-webkit-scrollbar {
@@ -149,6 +161,11 @@ const Tabs = styled.div`
   }
 `;
 
+const Dirname = styled.span`
+  font-size: var(--font-size-sm);
+  color: var(--text-color-description);
+`;
+
 const ActionBar = styled.div`
   display: flex;
 `;
@@ -164,7 +181,7 @@ const Tab = styled.button<{ active: boolean }>`
   gap: var(--spacing-xs);
   color: var(--text-color-secondary);
   white-space: nowrap;
-
+  scroll-margin-right: var(--spacing-base);
   ${({ active }) =>
     active
       ? css`

package/src/markdoc/components/CodeWalkthrough/CodePanelPreview.tsx

@@ -11,7 +11,7 @@ export function CodePanelPreview({ children }: PropsWithChildren): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <CodePanelPreviewWrapper>
+    <CodePanelPreviewWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanelPreview">
       <PreviewDropdown onClick={() => setIsOpen(!isOpen)}>
         {translate('codeWalkthrough.preview', 'Preview')}
         {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}

package/src/markdoc/components/CodeWalkthrough/CodePanelToolbar.tsx

@@ -16,7 +16,7 @@ export function CodePanelToolbar({ file }: CodeToolbarProps): JSX.Element {
   const fileContent = getFileText(file);
 
   return (
-    <CodeToolbarWrapper>
+    <CodeToolbarWrapper data-component-name="Markdoc/CodeWalkthrough/CodePanelToolbar">
       <CopyButton data={fileContent} type="compound" variant="secondary" size="medium" />
     </CodeToolbarWrapper>
   );

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -35,7 +35,7 @@ export function CodeStep({
       lockObserver.current = true;
 
       if (compRef.current) {
-        compRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        compRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
 
       setActiveStep(id);
@@ -70,7 +70,7 @@ export function CodeStep({
 
     const filtersElementHeight = filtersElementRef?.current?.clientHeight || 0;
     const navbarHeight = document.querySelector('nav')?.clientHeight || 0;
-    setScrollMarginTop(filtersElementHeight + navbarHeight);
+    setScrollMarginTop(filtersElementHeight + navbarHeight + 10);
 
     return () => {
       if (currentCompRef) {
@@ -80,11 +80,15 @@ export function CodeStep({
   }, [activeStep, register, unregister, filtersElementRef]);
 
   if (!areConditionsMet({ when, unless })) {
+    if (isActive) {
+      setActiveStep(null);
+    }
     return null;
   }
 
   return (
     <StepWrapper
+      data-component-name="Markdoc/CodeWalkthrough/CodeStep"
       ref={compRef}
       isActive={isActive}
       scrollMarginTop={scrollMarginTop}

package/src/markdoc/components/CodeWalkthrough/CodeToggle.tsx

@@ -23,7 +23,7 @@ export function CodeToggle(props: CodeToggleProps) {
   const checked = toggleState.value;
 
   return (
-    <ToggleWrapper>
+    <ToggleWrapper data-component-name="Markdoc/CodeWalkthrough/CodeToggle">
       <ToggleContentWrapper>
         <ToggleSubtitle>
           <Switch value={checked} onChange={(newValue) => changeToggleState(id, newValue)} />

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -28,7 +28,10 @@ export function CodeWalkthrough({ children, steps, preview, ...attributes }: Cod
   return (
     <CodeWalkthroughStepsContext.Provider value={stepsState}>
       <CodeWalkthroughControlsStateContext.Provider value={controlsState}>
-        <CodeWalkthroughWrapper className="code-walkthrough">
+        <CodeWalkthroughWrapper
+          className="code-walkthrough"
+          data-component-name="Markdoc/CodeWalkthrough/CodeWalkthrough"
+        >
           <DocsPanel>
             <CodeFilters
               filters={activeFilters}

package/src/markdoc/components/CodeWalkthrough/Input.tsx

@@ -41,7 +41,7 @@ export function Input(props: InputProps) {
   };
 
   return (
-    <InputWrapper>
+    <InputWrapper data-component-name="Markdoc/CodeWalkthrough/Input">
       {label && <Label>{label}</Label>}
       <StyledInput
         id={id}
@@ -57,7 +57,8 @@ export function Input(props: InputProps) {
 const InputWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  margin: var(--md-paragraph-margin);
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
 `;
 
 const Label = styled.p`
@@ -66,6 +67,7 @@ const Label = styled.p`
   line-height: var(--line-height-base);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-medium);
+  margin-bottom: var(--spacing-xxs) !important;
 `;
 
 const StyledInput = styled.input`

package/src/markdoc/tags/code-walkthrough.ts

@@ -44,6 +44,11 @@ export const codeWalkthrough: MarkdocSchemaWrapper = {
         render: false,
         required: false,
       },
+      __idx: {
+        type: Number,
+        render: true,
+        required: false,
+      },
     },
     slots: {
       preview: { required: false, render: true },