@patternfly/quickstarts 2.3.2 → 2.3.4

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';

package/src/styles/legacy-bootstrap/_code.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //
 // Code (inline and block)
 // --------------------------------------------------
@@ -21,8 +23,8 @@ code {
 // Blocks of code
 pre {
   display: block;
-  padding: (($line-height-computed - 1) / 2);
-  margin: 0 0 ($line-height-computed / 2);
+  padding: math.div($line-height-computed - 1, 2);
+  margin: 0 0 math.div($line-height-computed, 2);
   font-size: ($font-size-base - 1); // 14px to 13px
   line-height: $line-height-base;
   color: $pre-color;

package/src/styles/legacy-bootstrap/_type.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //
 // Typography
 // --------------------------------------------------
@@ -18,13 +20,13 @@ h1, .h1,
 h2, .h2,
 h3, .h3 {
   margin-top: $line-height-computed;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: math.div($line-height-computed, 2);
 }
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: ($line-height-computed / 2);
-  margin-bottom: ($line-height-computed / 2);
+  margin-top: math.div($line-height-computed, 2);
+  margin-bottom: math.div($line-height-computed, 2);
 }
 
 h1, .h1 { font-size: $font-size-h1; }
@@ -39,7 +41,7 @@ h6, .h6 { font-size: $font-size-h6; }
 // -------------------------
 
 p {
-  margin: 0 0 ($line-height-computed / 2);
+  margin: 0 0 math.div($line-height-computed, 2);
 }
 
 
@@ -50,7 +52,7 @@ p {
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: ($line-height-computed / 2);
+  margin-bottom: math.div($line-height-computed, 2);
   ul,
   ol {
     margin-bottom: 0;
@@ -75,7 +77,7 @@ dd {
 
 // Blockquotes
 blockquote {
-  padding: ($line-height-computed / 2) $line-height-computed;
+  padding: math.div($line-height-computed, 2) $line-height-computed;
   margin: 0 0 $line-height-computed;
   font-size: $blockquote-font-size;
   border-left: 5px solid $blockquote-border-color;

package/src/styles/patternfly-nested.scss

@@ -5,14 +5,14 @@
 @import '@patternfly/patternfly/sass-utilities/all';
 
 .pfext-quick-start__base {
-    $pf-global--enable-reset: false;
-    @import '@patternfly/patternfly/base/common';
-    @import '@patternfly/patternfly/utilities/Accessibility/accessibility.scss';
+  $pf-global--enable-reset: false;
+  @import '@patternfly/patternfly/base/common';
+  @import '@patternfly/patternfly/utilities/Accessibility/accessibility';
 
-    // it's okay that we include everything since we'll purge the unused styles
-    @import '@patternfly/patternfly/components/all';
-    @import '@patternfly/patternfly/layouts/all';
+  // it's okay that we include everything since we'll purge the unused styles
+  @import '@patternfly/patternfly/components/all';
+  @import '@patternfly/patternfly/layouts/all';
 
-    // some apps globally set text-align: center
-    text-align: left;
-}
+  // some apps globally set text-align: center
+  text-align: left;
+}