@redocly/theme 0.48.0 → 0.48.2

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

@@ -13,20 +13,20 @@ export type CodeToggleProps = React.PropsWithChildren<{
 
 export function CodeToggle(props: CodeToggleProps) {
   const { id, label, description, children } = props;
-  const { getToggleState, changeToggleState } = useContext(CodeWalkthroughControlsStateContext);
+  const { getControlState, changeControlState } = useContext(CodeWalkthroughControlsStateContext);
 
-  const toggleState = getToggleState(id);
+  const toggleState = getControlState(id);
 
-  if (!(toggleState && toggleState.render)) {
+  if (!(toggleState && toggleState.render && typeof toggleState.value === 'boolean')) {
     return null;
   }
   const checked = toggleState.value;
 
   return (
-    <ToggleWrapper>
+    <ToggleWrapper data-component-name="Markdoc/CodeWalkthrough/CodeToggle">
       <ToggleContentWrapper>
         <ToggleSubtitle>
-          <Switch value={checked} onChange={(newValue) => changeToggleState(id, newValue)} />
+          <Switch value={checked} onChange={(newValue) => changeControlState(id, newValue)} />
           <div>{label}</div>
         </ToggleSubtitle>
         {description ? (

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

@@ -9,7 +9,10 @@ import {
 } from '@redocly/theme/core/contexts';
 import { CodePanel } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodePanel';
 import { useCodeWalkthrough } from '@redocly/theme/core/hooks';
-import { CodeFilters } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
+import {
+  CodeFilters,
+  GetFilterState,
+} from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
 import { StepWrapper } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeStep';
 
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
@@ -22,18 +25,21 @@ export function CodeWalkthrough({ children, steps, preview, ...attributes }: Cod
     initialSteps,
     attributes,
   );
-  const { activeFilters, getFilterState, changeFilterState } = controlsState;
+  const { activeFilters, getControlState, changeControlState } = controlsState;
   const { filtersElementRef } = stepsState;
 
   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}
-              getFilterState={getFilterState}
-              handleFilterSelect={changeFilterState}
+              getFilterState={getControlState as GetFilterState}
+              handleFilterSelect={changeControlState}
               filtersElementRef={filtersElementRef}
             />
             <ContentWrapper>{children}</ContentWrapper>

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

@@ -15,16 +15,16 @@ const DEBOUNCE_TIME = 500;
 
 export function Input(props: InputProps) {
   const { id, label, placeholder } = props;
-  const { getInputState, changeInputState } = useContext(CodeWalkthroughControlsStateContext);
+  const { getControlState, changeControlState } = useContext(CodeWalkthroughControlsStateContext);
 
-  const inputState = getInputState(id);
+  const inputState = getControlState(id);
 
   const [value, setValue] = useState(inputState?.value || '');
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedSave = useCallback(
     debounce((id: string, value: string) => {
-      changeInputState(id, value);
+      changeControlState(id, value);
     }, DEBOUNCE_TIME),
     [],
   );
@@ -41,11 +41,11 @@ export function Input(props: InputProps) {
   };
 
   return (
-    <InputWrapper>
+    <InputWrapper data-component-name="Markdoc/CodeWalkthrough/Input">
       {label && <Label>{label}</Label>}
       <StyledInput
         id={id}
-        value={value}
+        value={value as string}
         onChange={handleChange}
         aria-label={label}
         placeholder={placeholder}
@@ -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 },