@patternfly/quickstarts 2.3.0 → 2.3.2

package/dist/utils/quick-start-context.d.ts

@@ -55,7 +55,7 @@ export declare const QuickStartContextDefaults: {
     activeQuickStartState: {};
     setAllQuickStarts: () => void;
     resourceBundle: any;
-    getResource: () => string;
+    getResource: (resource: string) => string;
     language: string;
     useQueryParams: boolean;
     filter: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "PatternFly quick starts",
   "files": [
     "src",

package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -21,7 +21,7 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
     const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
     return (docContext.querySelector(
       `${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`,
-    ) as HTMLElement).innerText;
+    ) as HTMLElement)?.innerText;
   }, [element, docContext, rootSelector]);
 
   useEventListener(
@@ -29,7 +29,7 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
     'click',
     React.useCallback(() => {
       navigator.clipboard
-        .writeText(textToCopy)
+        .writeText(textToCopy.trim())
         .then(() => {
           setShowSuccessContent(true);
         })

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

@@ -5,6 +5,7 @@ import { Alert } from '@patternfly/react-core';
 import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
 import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
 import './showdown-extension.scss';
+import QuickStartMarkdownView from '../../../../QuickStartMarkdownView';
 
 enum AdmonitionType {
   TIP = 'TIP',
@@ -43,7 +44,7 @@ const useAdmonitionShowdownExtension = () => {
         const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
         const style =
           admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
-
+        const mdContent = <QuickStartMarkdownView content={content} />;
         const pfAlert = (
           <Alert
             variant={variant}
@@ -53,7 +54,7 @@ const useAdmonitionShowdownExtension = () => {
             className="pfext-markdown-admonition"
             style={style}
           >
-            {content}
+            {mdContent}
           </Alert>
         );
         return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));

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

@@ -11,25 +11,19 @@ const useInlineCopyClipboardShowdownExtension = () => {
   return React.useMemo(
     () => ({
       type: 'lang',
-      regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
-      replace: (
-        text: string,
-        group: string,
-        subGroup: string,
-        groupType: string,
-        groupId: string,
-      ): string => {
-        if (!group || !subGroup || !groupType || !groupId) {
+      regex: /`([^`](.*?)[^`])`{{copy}}/g,
+      replace: (text: string, group: string, _: string, groupId: number): string => {
+        if (!group || isNaN(groupId)) {
           return text;
         }
         return removeTemplateWhitespace(
           `<span class="pf-c-clipboard-copy pf-m-inline">
-              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</span>
+              <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(
                     'Copy to clipboard',
-                  )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                  )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                     ${renderToStaticMarkup(<CopyIcon />)}
                   </button>
                 </span>

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

@@ -11,15 +11,9 @@ const useMultilineCopyClipboardShowdownExtension = () => {
   return React.useMemo(
     () => ({
       type: 'lang',
-      regex: /```[\n]((.*?\n)+)```{{copy}}/g,
-      replace: (
-        text: string,
-        group: string,
-        subgroup: string,
-        groupType: string,
-        groupId: string,
-      ): string => {
-        if (!group || !subgroup || !groupType || !groupId) {
+      regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
+      replace: (text: string, group: string, _1: string, _2: string, groupId: number): string => {
+        if (!group || isNaN(groupId)) {
           return text;
         }
         return `<div class="pf-c-code-block">
@@ -28,7 +22,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                   <div class="pf-c-code-block__actions-item">
                     <button class="pf-c-button pf-m-plain" type="button" aria-label="${getResource(
                       'Copy to clipboard',
-                    )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                    )}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                       ${renderToStaticMarkup(<CopyIcon />)}
                     </button>
                   </div>
@@ -37,7 +31,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
               <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" 
-                    ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</code>
+                    ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
                 </pre>
               </div>
             </div>`;

package/src/QuickStartPanelContent.tsx

@@ -53,6 +53,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
   headerVariant = '',
   ...props
 }) => {
+  const titleRef = React.useRef(null);
   const { getResource, activeQuickStartState } = React.useContext<QuickStartContextValues>(
     QuickStartContext,
   );
@@ -87,6 +88,12 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
     return Number.parseInt(taskNumber as string, 10) + 1;
   };
 
+  React.useEffect(() => {
+    if (quickStart) {
+      titleRef.current.focus();
+    }
+  }, [quickStart]);
+
   const content = quickStart ? (
     <DrawerPanelContent
       isResizable={isResizable}
@@ -98,7 +105,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
     >
       <div className={headerClasses}>
         <DrawerHead>
-          <div className="pfext-quick-start-panel-content__title">
+          <div className="pfext-quick-start-panel-content__title" tabIndex={-1} ref={titleRef}>
             <Title
               headingLevel="h1"
               size="xl"

package/src/catalog/QuickStartTile.tsx

@@ -90,6 +90,12 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
           />
         }
         onClick={handleClick}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            setActiveQuickStart(id, tasks?.length);
+            onClick();
+          }
+        }}
         // https://github.com/patternfly/patternfly-react/issues/7039
         href="#"
         data-test={`tile ${id}`}
@@ -97,6 +103,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
           <QuickStartTileDescription description={description} prerequisites={prerequisites} />
         }
         footer={footerComponent}
+        tabIndex={0}
       />
     </div>
   );

package/src/controller/QuickStartTaskHeader.tsx

@@ -63,6 +63,13 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
   onTaskSelect,
   children,
 }) => {
+  const titleRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isActiveTask) {
+      // Focus the WizardNavItem button element that contains the title
+      titleRef.current.parentNode.focus();
+    }
+  }, [isActiveTask]);
   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':
@@ -82,7 +89,7 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
   );
 
   const content = (
-    <div className="pfext-quick-start-task-header">
+    <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)) }} />

package/src/utils/quick-start-context.tsx

@@ -88,7 +88,7 @@ export const QuickStartContextDefaults = {
   activeQuickStartState: {},
   setAllQuickStarts: () => {},
   resourceBundle: en,
-  getResource: () => '',
+  getResource: (resource: string) => resource,
   language: 'en',
   useQueryParams: true,
   filter: {
@@ -115,7 +115,7 @@ export const getResource = (resource: string, options: any, resourceBundle: any,
       return resourceBundle[`${resource}_${suffix}`];
     }
   }
-  return (resourceBundle && resourceBundle[resource]) || '';
+  return (resourceBundle && resourceBundle[resource]) || resource;
 };
 
 export const useValuesForQuickStartContext = (