@patternfly/quickstarts 2.4.2 → 5.0.0-prerelease.1

package/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { useEventListener } from '../../hooks';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 
-type AccordionShowdownComponentProps = {
+interface AccordionShowdownComponentProps {
   buttonElement: HTMLElement;
   contentElement: HTMLElement;
-};
+}
 
 const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
   buttonElement,
@@ -16,9 +16,9 @@ const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
   const handleClick = () => {
     const expandedModifier = 'pf-m-expanded';
 
-    buttonElement.className = `pf-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+    buttonElement.className = `pf-v5-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
     contentElement.hidden = expanded;
-    contentElement.className = `pf-c-accordion__expanded-content ${
+    contentElement.className = `pf-v5-c-accordion__expanded-content ${
       !expanded ? expandedModifier : ''
     }`;
     setExpanded(!expanded);
@@ -29,9 +29,9 @@ const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
   return <></>;
 };
 
-type accordionRenderExtensionProps = {
-  docContext: HTMLDocument;
-};
+interface accordionRenderExtensionProps {
+  docContext: Document;
+}
 
 const AccordionRenderExtension: React.FC<accordionRenderExtensionProps> = ({ docContext }) => {
   const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);

package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx

@@ -23,9 +23,9 @@ const admonitionToAlertVariantMap = {
   [AdmonitionType.WARNING]: { variant: 'warning' },
 };
 
-const useAdmonitionShowdownExtension = () => {
+const useAdmonitionShowdownExtension = () => 
   // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  return React.useMemo(
+   React.useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
@@ -61,7 +61,7 @@ const useAdmonitionShowdownExtension = () => {
       },
     }),
     [],
-  );
-};
+  )
+;
 
 export default useAdmonitionShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx

@@ -4,8 +4,7 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import { CodeBlock } from '@patternfly/react-core';
 import './showdown-extension.scss';
 
-const useCodeShowdownExtension = () => {
-  return React.useMemo(
+const useCodeShowdownExtension = () => React.useMemo(
     () => ({
       type: 'output',
       regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
@@ -20,6 +19,5 @@ const useCodeShowdownExtension = () => {
     }),
     [],
   );
-};
 
 export default useCodeShowdownExtension;

package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -17,11 +17,11 @@ const useInlineCopyClipboardShowdownExtension = () => {
           return text;
         }
         return removeTemplateWhitespace(
-          `<span class="pf-c-clipboard-copy pf-m-inline">
-              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
-              <span class="pf-c-clipboard-copy__actions">
-                <span class="pf-c-clipboard-copy__actions-item">
-                  <button class="pf-c-button pf-m-plain" aria-label="${getResource(
+          `<span class="pf-v5-c-clipboard-copy pf-m-inline">
+              <span class="pf-v5-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
+              <span class="pf-v5-c-clipboard-copy__actions">
+                <span class="pf-v5-c-clipboard-copy__actions-item">
+                  <button class="pf-v5-c-button pf-m-plain" aria-label="${getResource(
                     'Copy to clipboard',
                   )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                     ${renderToStaticMarkup(<CopyIcon />)}

package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -16,11 +16,11 @@ const useMultilineCopyClipboardShowdownExtension = () => {
         if (!group || isNaN(groupId)) {
           return text;
         }
-        return `<div class="pf-c-code-block">
-              <div class="pf-c-code-block__header">
-                <div class="pf-c-code-block__actions">
-                  <div class="pf-c-code-block__actions-item">
-                    <button class="pf-c-button pf-m-plain" type="button" aria-label="${getResource(
+        return `<div class="pf-v5-c-code-block">
+              <div class="pf-v5-c-code-block__header">
+                <div class="pf-v5-c-code-block__actions">
+                  <div class="pf-v5-c-code-block__actions-item">
+                    <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="${getResource(
                       'Copy to clipboard',
                     )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                       ${renderToStaticMarkup(<CopyIcon />)}
@@ -28,9 +28,9 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                   </div>
                 </div>
               </div>
-              <div class="pf-c-code-block__content">
-                <pre class="pf-c-code-block__pre pfext-code-block__pre">
-                  <code class="pf-c-code-block__code" 
+              <div class="pf-v5-c-code-block__content">
+                <pre class="pf-v5-c-code-block__pre pfext-code-block__pre">
+                  <code class="pf-v5-c-code-block__code" 
                     ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
                 </pre>
               </div>

package/src/ConsoleShared/src/components/markdown-extensions/showdown-extension.scss

@@ -33,18 +33,18 @@
   }
 
   .pfext-markdown-admonition {
-    &.pf-c-alert {
+    &.pf-v5-c-alert {
       // add margins to match design
-      margin: var(--pf-global--spacer--md) 0;
-      .pf-c-alert__title {
+      margin: var(--pf-v5-global--spacer--md) 0;
+      .pf-v5-c-alert__title {
         // remove margins from markdown css
         margin-top: 0;
         margin-bottom: 0;
         // lift PF style specificity to override markdown css
-        font-weight: var(--pf-c-alert__title--FontWeight);
+        font-weight: var(--pf-v5-c-alert__title--FontWeight);
         font-family: inherit;
         line-height: inherit;
-        color: var(--pf-c-alert__title--Color);
+        color: var(--pf-v5-c-alert__title--Color);
         word-break: break-word;
       }
     }

package/src/ConsoleShared/src/components/markdown-extensions/utils.ts

@@ -1,3 +1 @@
-export const removeTemplateWhitespace = (template: string): string => {
-  return template.replace(/>(?:\s|\n)+</g, '><');
-};
+export const removeTemplateWhitespace = (template: string): string => template.replace(/>(?:\s|\n)+</g, '><');

package/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Spotlight } from '../spotlight';
 
-type MarkdownHighlightExtensionProps = {
-  docContext: HTMLDocument;
+interface MarkdownHighlightExtensionProps {
+  docContext: Document;
   rootSelector: string;
-};
+}
 const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
   docContext,
   rootSelector,
@@ -36,9 +36,10 @@ const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
       e.preventDefault();
       const classes = e.target.getAttribute('class').split(' ');
       let highlightId;
-      for (let i = 0; i < classes.length; i++) {
-        if (classes[0].startsWith('data-highlight__')) {
-          highlightId = classes[0].split('__')[1];
+
+      for (const className of classes) {
+        if (className.startsWith('data-highlight__')) {
+          highlightId = className.split('__')[1];
           break;
         }
       }

package/src/ConsoleShared/src/components/popper/Portal.tsx

@@ -1,19 +1,21 @@
+import { useIsomorphicLayoutEffect } from '@patternfly/react-core';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 type GetContainer = Element | null | undefined | (() => Element);
 
-type PortalProps = {
+interface PortalProps {
+  children: React.ReactNode;
   container?: GetContainer;
-};
+}
 
 const getContainer = (container: GetContainer): Element | null | undefined =>
   typeof container === 'function' ? container() : container;
 
-const Portal: React.FC<PortalProps> = ({ children, container }) => {
+const Portal = ({ children, container }: PortalProps) => {
   const [containerNode, setContainerNode] = React.useState<Element>();
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setContainerNode(getContainer(container) || document.body);
   }, [container]);
 

package/src/ConsoleShared/src/components/popper/SimplePopper.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import Portal from './Portal';
 
-const SimplePopper: React.FC = ({ children }) => {
+interface SimplePopperProps {
+  children: React.ReactNode;
+}
+
+const SimplePopper = ({ children }: SimplePopperProps) => {
   const openProp = true;
   const nodeRef = React.useRef<Element>();
   const popperRef = React.useRef(null);
@@ -62,11 +66,9 @@ const SimplePopper: React.FC = ({ children }) => {
     initialize();
   }, [initialize]);
 
-  React.useEffect(() => {
-    return () => {
+  React.useEffect(() => () => {
       destroy();
-    };
-  }, [destroy]);
+    }, [destroy]);
 
   React.useEffect(() => {
     if (!isOpen) {

package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx

@@ -2,9 +2,9 @@ import './spotlight.scss';
 import * as React from 'react';
 import { Portal, SimplePopper } from '../popper';
 
-type InteractiveSpotlightProps = {
+interface InteractiveSpotlightProps {
   element: Element;
-};
+}
 
 const isInViewport = (elementToCheck: Element) => {
   const rect = elementToCheck.getBoundingClientRect();

package/src/ConsoleShared/src/components/spotlight/Spotlight.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import InteractiveSpotlight from './InteractiveSpotlight';
 import StaticSpotlight from './StaticSpotlight';
 
-type SpotlightProps = {
+interface SpotlightProps {
   selector: string;
   interactive?: boolean;
-};
+}
 
 const Spotlight: React.FC<SpotlightProps> = ({ selector, interactive }) => {
   // if target element is a hidden one return null

package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 import { useBoundingClientRect } from '../../hooks';
 import Portal from '../popper/Portal';
 
-type StaticSpotlightProps = {
+interface StaticSpotlightProps {
   element: Element;
-};
+}
 
 const StaticSpotlight: React.FC<StaticSpotlightProps> = ({ element }) => {
   const clientRect = useBoundingClientRect(element as HTMLElement);
@@ -19,7 +19,7 @@ const StaticSpotlight: React.FC<StaticSpotlightProps> = ({ element }) => {
     : {};
   return clientRect ? (
     <Portal>
-      <div className="pf-c-backdrop pfext-spotlight__with-backdrop">
+      <div className="pf-v5-c-backdrop pfext-spotlight__with-backdrop">
         <div
           className="pfext-spotlight pfext-spotlight__element-highlight-noanimate"
           style={style}

package/src/ConsoleShared/src/components/spotlight/spotlight.scss

@@ -36,14 +36,14 @@
     mix-blend-mode: hard-light;
   }
   &__element-highlight-noanimate {
-    border: var(--pf-global--BorderWidth--xl) solid var(--pf-global--palette--blue-200);
-    background-color: var(--pf-global--palette--black-500);
+    border: var(--pf-v5-global--BorderWidth--xl) solid var(--pf-v5-global--palette--blue-200);
+    background-color: var(--pf-v5-global--palette--black-500);
     z-index: 9999;
   }
   &__element-highlight-animate {
     pointer-events: none;
     position: absolute;
-    box-shadow: inset 0px 0px 0px 4px var(--pf-global--palette--blue-200);
+    box-shadow: inset 0px 0px 0px 4px var(--pf-v5-global--palette--blue-200);
     opacity: 0;
     animation: 0.4s pfext-spotlight-fade-in 0s ease-in-out, 5s pfext-spotlight-fade-out 12.8s ease-in-out;
     animation-fill-mode: forwards;
@@ -56,7 +56,7 @@
       bottom: 0;
       animation: 1.2s pfext-spotlight-expand 1.6s ease-out;
       animation-fill-mode: forwards;
-      outline: 4px solid var(--pf-global--palette--blue-200);
+      outline: 4px solid var(--pf-v5-global--palette--blue-200);
       outline-offset: -4px;
     }
   }

package/src/ConsoleShared/src/components/status/GenericStatus.tsx

@@ -26,6 +26,7 @@ const GenericStatus: React.FC<GenericStatusProps> = (props) => {
 
 type GenericStatusProps = StatusComponentProps & {
   Icon: React.ComponentType<{ title?: string }>;
+  children?: React.ReactNode;
   popoverTitle?: string;
   noTooltip?: boolean;
 };

package/src/ConsoleShared/src/components/status/PopoverStatus.tsx

@@ -5,38 +5,35 @@ const PopoverStatus: React.FC<PopoverStatusProps> = ({
   hideHeader,
   children,
   isVisible = null,
-  shouldClose = null,
   statusBody,
   title,
   onHide,
   onShow,
-}) => {
-  return (
-    <Popover
-      position={PopoverPosition.right}
-      headerContent={hideHeader ? null : title}
-      bodyContent={children}
-      aria-label={title}
-      onHide={onHide}
-      onShow={onShow}
-      isVisible={isVisible}
-      shouldClose={shouldClose}
-    >
-      <Button variant="link" isInline>
-        {statusBody}
-      </Button>
-    </Popover>
-  );
-};
+}) => (
+  <Popover
+    position={PopoverPosition.right}
+    headerContent={hideHeader ? null : title}
+    bodyContent={children}
+    aria-label={title}
+    onHide={onHide}
+    onShow={onShow}
+    isVisible={isVisible}
+  >
+    <Button variant="link" isInline>
+      {statusBody}
+    </Button>
+  </Popover>
+);
 
-type PopoverStatusProps = {
+interface PopoverStatusProps {
+  children: React.ReactNode;
   statusBody: React.ReactNode;
-  onHide?: () => void;
-  onShow?: () => void;
+  onHide?: (event: MouseEvent | KeyboardEvent) => void;
+  onShow?: (event: MouseEvent | KeyboardEvent) => void;
   title?: string;
   hideHeader?: boolean;
   isVisible?: boolean;
   shouldClose?: (hideFunction: any) => void;
-};
+}
 
 export default PopoverStatus;

package/src/ConsoleShared/src/components/status/Status.tsx

@@ -29,9 +29,9 @@ export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => (
   <Status status={status} iconOnly />
 );
 
-type StatusIconProps = {
+interface StatusIconProps {
   status: string;
-};
+}
 
 type StatusProps = StatusComponentProps & {
   status: string;

package/src/ConsoleShared/src/components/status/icons.tsx

@@ -1,23 +1,21 @@
 import * as React from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-// import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
-// import { global_default_color_200 as blueDefaultColor } from '@patternfly/react-tokens/dist/js/global_default_color_200';
-// import { global_disabled_color_100 as disabledColor } from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
-import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
-import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
-// import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+import dangerColor from '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import blueInfoColor from '@patternfly/react-tokens/dist/esm/global_palette_blue_300';
+import okColor from '@patternfly/react-tokens/dist/esm/global_palette_green_500';
+import { Icon } from '@patternfly/react-core';
 
 export const GreenCheckCircleIcon: React.FC<ColoredIconProps> = ({ className, title, size }) => (
-  <CheckCircleIcon
-    data-test="success-icon"
-    size={size}
-    color={okColor.value}
-    className={className}
-    title={title}
-  />
+  <Icon size={size}>
+    <CheckCircleIcon
+      data-test="success-icon"
+      color={okColor.value}
+      className={className}
+      title={title}
+    />
+  </Icon>
 );
 
 export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({
@@ -25,53 +23,17 @@ export const RedExclamationCircleIcon: React.FC<ColoredIconProps> = ({
   title,
   size,
 }) => (
-  <ExclamationCircleIcon
-    size={size}
-    color={dangerColor.value}
-    className={className}
-    title={title}
-  />
+  <Icon size={size}>
+    <ExclamationCircleIcon color={dangerColor.value} className={className} title={title} />
+  </Icon>
 );
 
-// export const YellowExclamationTriangleIcon: React.FC<ColoredIconProps> = ({
-//   className,
-//   title,
-//   size,
-// }) => (
-//   <ExclamationTriangleIcon
-//     size={size}
-//     color={warningColor.value}
-//     className={className}
-//     title={title}
-//   />
-// );
-
 export const BlueInfoCircleIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
   <InfoCircleIcon color={blueInfoColor.value} className={className} title={title} />
 );
 
-// export const GrayUnknownIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-//   <UnknownIcon color={disabledColor.value} className={className} title={title} />
-// );
-
-// export const BlueSyncIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-//   <SyncAltIcon color={blueInfoColor.value} className={className} title={title} />
-// );
-
-// export const RedResourcesFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-//   <ResourcesFullIcon color={dangerColor.value} className={className} title={title} />
-// );
-
-// export const YellowResourcesAlmostFullIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-//   <ResourcesAlmostFullIcon color={warningColor.value} className={className} title={title} />
-// );
-
-// export const BlueArrowCircleUpIcon: React.FC<ColoredIconProps> = ({ className, title }) => (
-//   <ArrowCircleUpIcon color={blueDefaultColor.value} className={className} title={title} />
-// );
-
-export type ColoredIconProps = {
+export interface ColoredIconProps {
   className?: string;
   title?: string;
   size?: 'sm' | 'md' | 'lg' | 'xl';
-};
+}

package/src/ConsoleShared/src/components/status/statuses.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-// import HourglassHalfIcon from '@patternfly/react-icons/dist/js/icons/hourglass-half-icon';
-// import InProgressIcon from '@patternfly/react-icons/dist/js/icons/in-progress-icon';
+
 import GenericStatus from './GenericStatus';
 import { BlueInfoCircleIcon, GreenCheckCircleIcon, RedExclamationCircleIcon } from './icons';
 import { StatusComponentProps } from './types';
@@ -15,22 +14,7 @@ export const InfoStatus: React.FC<StatusComponentProps> = (props) => (
 );
 InfoStatus.displayName = 'InfoStatus';
 
-// export const PendingStatus: React.FC<StatusComponentProps> = (props) => (
-//   <GenericStatus {...props} Icon={HourglassHalfIcon} title={props.title || 'Pending'} />
-// );
-// PendingStatus.displayName = 'PendingStatus';
-
-// export const ProgressStatus: React.FC<StatusComponentProps> = (props) => (
-//   <GenericStatus {...props} Icon={InProgressIcon} title={props.title || 'In progress'} />
-// );
-// ProgressStatus.displayName = 'ProgressStatus';
-
 export const SuccessStatus: React.FC<StatusComponentProps> = (props) => (
   <GenericStatus {...props} Icon={GreenCheckCircleIcon} title={props.title || 'Healthy'} />
 );
 SuccessStatus.displayName = 'SuccessStatus';
-
-// export const WarningStatus: React.FC<StatusComponentProps> = (props) => (
-//   <GenericStatus {...props} Icon={YellowExclamationTriangleIcon} title={props.title || 'Warning'} />
-// );
-// WarningStatus.displayName = 'WarningStatus';

package/src/ConsoleShared/src/components/status/types.ts

@@ -1,7 +1,8 @@
-export type StatusComponentProps = {
+export interface StatusComponentProps {
+  children?: React.ReactNode;
   title?: string;
   iconOnly?: boolean;
   noTooltip?: boolean;
   className?: string;
   popoverTitle?: string;
-};
+}

package/src/ConsoleShared/src/components/utils/FallbackImg.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-type FallbackImgProps = {
+interface FallbackImgProps {
   src: string;
   alt?: string;
   className?: string;
   fallback?: React.ReactNode;
-};
+}
 
 const FallbackImg: React.FC<FallbackImgProps> = ({ src, alt, className, fallback }) => {
   const [isSrcValid, setIsSrcValid] = React.useState<boolean>(true);

package/src/ConsoleShared/src/hooks/useResizeObserver.ts

@@ -1,15 +1,14 @@
-// @ts-nocheck
-// TODO: Remove the no-check
 import * as React from 'react';
 
 export const useResizeObserver = (
   callback: ResizeObserverCallback,
   targetElement?: HTMLElement | null,
-  observerOptions: ResizeObserverObserveOptions = undefined,
+  observerOptions: ResizeObserverOptions = undefined,
 ): void => {
-  const element = React.useMemo(() => targetElement ?? document.querySelector('body'), [
-    targetElement,
-  ]);
+  const element = React.useMemo(
+    () => targetElement ?? document.querySelector('body'),
+    [targetElement],
+  );
   React.useEffect(() => {
     const observer = new ResizeObserver(callback);
     observer.observe(element, observerOptions);

package/src/ConsoleShared/src/utils/useCombineRefs.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const useCombineRefs = <RefType extends any>(...refs: (React.Ref<RefType> | undefined)[]) =>
+export const useCombineRefs = <RefType>(...refs: (React.Ref<RefType> | undefined)[]) =>
   React.useCallback(
     (element: RefType | null): void =>
       refs.forEach((ref) => {
@@ -12,6 +12,5 @@ export const useCombineRefs = <RefType extends any>(...refs: (React.Ref<RefType>
           }
         }
       }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    refs,
+    [refs],
   );

package/src/HelpTopicDrawer.tsx

@@ -27,10 +27,11 @@ export interface HelpTopicContainerProps extends React.HTMLProps<HTMLDivElement>
    */
   markdown?: {
     extensions?: any[];
-    renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
+    renderExtension?: (docContext: Document, rootSelector: string) => React.ReactNode;
   };
   /** additional quick start context props */
   contextProps?: QuickStartContextValues;
+  children?: React.ReactNode;
 }
 
 export const HelpTopicContainer: React.FC<HelpTopicContainerProps> = ({
@@ -48,9 +49,6 @@ export const HelpTopicContainer: React.FC<HelpTopicContainerProps> = ({
     language,
     resourceBundle: {
       ...resourceBundle,
-      // Start: "Let's go!",
-      // Continue: 'Resume',
-      // Restart: 'Start over',
     },
     loading,
     markdown,
@@ -72,14 +70,9 @@ export const HelpTopicContainer: React.FC<HelpTopicContainerProps> = ({
     }
   }, [helpTopics, valuesForHelpTopicContext]);
 
-  const drawerProps = {
-    //TODO add extras here?
-    ...props,
-  };
-
   return (
     <HelpTopicContext.Provider value={valuesForHelpTopicContext}>
-      <HelpTopicDrawer {...drawerProps}>{children}</HelpTopicDrawer>
+      <HelpTopicDrawer {...props}>{children}</HelpTopicDrawer>
     </HelpTopicContext.Provider>
   );
 };
@@ -90,9 +83,8 @@ export interface HelpTopicDrawerProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const HelpTopicDrawer: React.FC<HelpTopicDrawerProps> = ({ children, ...props }) => {
-  const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext<
-    HelpTopicContextValues
-  >(HelpTopicContext);
+  const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } =
+    React.useContext<HelpTopicContextValues>(HelpTopicContext);
 
   const onClose = () => {
     setActiveHelpTopicByName('');
@@ -116,7 +108,7 @@ export const HelpTopicDrawer: React.FC<HelpTopicDrawerProps> = ({ children, ...p
             </DrawerContentBody>
           </DrawerContent>
         ) : (
-          <div className="pf-c-drawer__main">{panelContent}</div>
+          <div className="pf-v5-c-drawer__main">{panelContent}</div>
         )}
       </Drawer>
     </>