feat: expanded documentation for Carousel

washingtonpost · May 9, 2023 · 6911bd4 · 6911bd4 · vercel · May 9, 2023
1 parent b1dad16
commit 6911bd4
Show file tree

Hide file tree

Showing 15 changed files with 1,143 additions and 28 deletions.
diff --git a/build.washingtonpost.com/components/Markdown/Components/Code.js b/build.washingtonpost.com/components/Markdown/Components/Code.js
@@ -16,7 +16,6 @@ const Code = (props) => {
           minHeight: "$500",
           maxWidth: "100%",
           width: "100%",
-          display: "grid",
           backgroundColor: theme.colors.gray500,
           overflow: "scroll",
         }}
@@ -25,6 +24,7 @@ const Code = (props) => {
           isGuide={props.isGuide}
           withPreview={props.withPreview}
           hideNavBar={props.hideNavBar}
+          demoHeight={props.demoHeight}
         >
           {props.children.trim()}
         </Sandbox>

diff --git a/build.washingtonpost.com/components/Markdown/Components/Pre.js b/build.washingtonpost.com/components/Markdown/Components/Pre.js
@@ -1,7 +1,13 @@
 import React from "react";
 import { theme, Box } from "@washingtonpost/wpds-ui-kit";
 
-const Pre = ({ children, withPreview, isGuide = "none", hideNavBar }) => {
+const Pre = ({
+  children,
+  withPreview,
+  isGuide = "none",
+  hideNavBar,
+  demoHeight,
+}) => {
   return (
     <Box
       as="pre"
@@ -21,6 +27,7 @@ const Pre = ({ children, withPreview, isGuide = "none", hideNavBar }) => {
         withPreview,
         isGuide,
         hideNavBar,
+        demoHeight,
       })}
     </Box>
   );

diff --git a/build.washingtonpost.com/components/Markdown/Components/Sandbox.js b/build.washingtonpost.com/components/Markdown/Components/Sandbox.js
@@ -80,7 +80,7 @@ const useDebounce = (value, delay) => {
   return debouncedValue;
 };
 
-const Preview = ({ isGuide }) => {
+const Preview = ({ isGuide, demoHeight }) => {
   const { code } = useActiveCode();
   const [firstRenderCode, setFirstRenderCode] = useState(null);
   const iframeRef = React.useRef(null);
@@ -115,6 +115,7 @@ const Preview = ({ isGuide }) => {
         background: theme.colors.gray500,
         border: 0,
         width: "100%",
+        height: demoHeight ? `${demoHeight}px` : "auto",
         minHeight: 325,
         overflow: "hidden",
       }}
@@ -156,6 +157,7 @@ const CustomSandpack = ({
   isGuide,
   withPreview = false,
   hideNavBar = false,
+  demoHeight,
   children,
 }) => {
   const [showCode, setShowCode] = useState(!withPreview);
@@ -190,7 +192,7 @@ const CustomSandpack = ({
           borderRadius: 0,
         }}
       >
-        {withPreview && <Preview isGuide={isGuide} />}
+        {withPreview && <Preview isGuide={isGuide} demoHeight={demoHeight} />}
         {showCode && (
           <SandpackCodeEditor
             style={{