@patternfly/quickstarts 2.3.3 → 2.3.4

package/src/QuickStartPanelContent.tsx

@@ -60,6 +60,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
     QuickStartContext,
   );
   const [contentRef, setContentRef] = React.useState<HTMLDivElement>();
+  const [displayName, setDisplayName] = React.useState<string>('');
   const shadows = useScrollShadows(contentRef);
   const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
   const taskNumber = activeQuickStartState?.taskNumber;
@@ -96,6 +97,14 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
     }
   }, [quickStart]);
 
+  React.useEffect(() => {
+    async function getDisplayName() {
+      const convertedMdDisplayName = await markdownConvert(quickStart?.spec.displayName);
+      setDisplayName(removeParagraphWrap(convertedMdDisplayName));
+    }
+    getDisplayName();
+  }, [quickStart]);
+
   const content = quickStart ? (
     <DrawerPanelContent
       isResizable={isResizable}
@@ -109,14 +118,14 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
         <DrawerHead>
           <div className="pfext-quick-start-panel-content__title" tabIndex={-1} ref={titleRef}>
             <Title
-              headingLevel="h1"
+              headingLevel="h2"
               size="xl"
               className="pfext-quick-start-panel-content__name"
               style={{ marginRight: 'var(--pf-global--spacer--md)' }}
             >
               <span
                 dangerouslySetInnerHTML={{
-                  __html: removeParagraphWrap(markdownConvert(quickStart?.spec.displayName)),
+                  __html: displayName,
                 }}
               />{' '}
               <small className="pfext-quick-start-panel-content__duration">

package/src/controller/QuickStartTaskHeader.tsx

@@ -64,12 +64,23 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
   children,
 }) => {
   const titleRef = React.useRef(null);
+  const [parsedTitle, setParsedTitle] = React.useState<string>('');
+
   React.useEffect(() => {
     if (isActiveTask) {
       // Focus the WizardNavItem button element that contains the title
       titleRef.current.parentNode.focus();
     }
   }, [isActiveTask]);
+
+  React.useEffect(() => {
+    async function getParsedTitle() {
+      const convertedMdTitle = await markdownConvert(title);
+      setParsedTitle(removeParagraphWrap(convertedMdTitle));
+    }
+    getParsedTitle();
+  }, [title]);
+
   const classNames = css('pfext-quick-start-task-header__title', {
     'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
     'pfext-quick-start-task-header__title-failed':
@@ -92,7 +103,7 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
     <div className="pfext-quick-start-task-header" ref={titleRef}>
       <TaskIcon taskIndex={taskIndex} taskStatus={taskStatus} />
       <Title headingLevel="h3" size={size} className={classNames}>
-        <span dangerouslySetInnerHTML={{ __html: removeParagraphWrap(markdownConvert(title)) }} />
+        <span dangerouslySetInnerHTML={{ __html: parsedTitle }} />
         {isActiveTask && subtitle && (
           <span
             className="pfext-quick-start-task-header__subtitle"

package/src/declaration.d.ts

@@ -1,2 +1,3 @@
 declare module '*.scss';
 declare module '*.json';
+declare module 'marked';