@patternfly/quickstarts 2.2.3 → 2.3.1

package/README.md

@@ -32,7 +32,7 @@ If you use an older version of @patternfly/react-core (older than "4.115.2"), an
 
 Ideally @patternfly/quickstarts will use the consumer provided PatternFly styles, only use these stylesheets if really needed.
 
-`quickstarts-standalone.min.css` nests the css classes within a **.pfext-quick-start__base** parent, so that they have higher specificity. `patternfly-global.css` includes component styles that we cannot nest with more specificiy (for example Drawer since it can include consumer components that depend on an older PF version).
+`quickstarts-standalone.min.css` nests the css classes within a **.pfext-quick-start__base** parent, so that they have higher specificity. `patternfly-global.css` includes component styles that we cannot nest with more specificity (for example Drawer since it can include consumer components that depend on an older PF version).
 
 > Note: Only use these stylesheets if necessary!
 ```js
@@ -69,7 +69,7 @@ import {
 import { Button } from "@patternfly/react-core";
 import jsYaml from "js-yaml";
 // quick start files could be yaml files or js files, or really anything,
-// as long as they get parsed out to the expexted JSON format
+// as long as they get parsed out to the expected JSON format
 import quickstartOne from "./quick-starts/quickstart-one.yaml";
 import quickstartTwo from "./quick-starts/quickstart-two.yaml";
 import quickstartThree from "./quick-starts/quickstart-three";
@@ -253,7 +253,7 @@ return (
 Use this [file](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/locales/en/quickstart.json) as a base for your translations.
 Each language is different, especially when it comes to plurals. Try [this utility](https://jsfiddle.net/6bpxsgd4) sourced from [i18next](https://www.i18next.com/translation-function/plurals#how-to-find-the-correct-plural-suffix) to determine the suffixes for the right plural format.
 
-For localizing the content of quick starts files, we provide the option to include `language` and `countryCode` key to your translated file. Based on these keys you can filter out quick starts. We have a demo of this behaviour in our [demo app](https://quickstarts.netlify.app/quickstarts-localized). You can have a look at the code [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/AppLocalized.tsx).
+For localizing the content of quick starts files, we provide the option to include `language` and `countryCode` key to your translated file. Based on these keys you can filter out quick starts. We have a demo of this behavior in our [demo app](https://quickstarts.netlify.app/quickstarts-localized). You can have a look at the code [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/AppLocalized.tsx).
 
 ## In-App / In Context Help Panel
 
@@ -406,7 +406,7 @@ const FormGroupWithHelpTopicPopover: React.FC<FormGroupWithHelpTopicPopoverProps
         <Popover
           bodyContent={(hide) => (
             <div>
-              {topic.title} is quite amaizing{' '}
+              {topic.title} is quite amazing{' '}
               <Button
                 variant="link"
                 onClick={() => {

package/dist/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.d.ts

@@ -2,6 +2,6 @@ import './showdown-extension.scss';
 declare const useInlineCopyClipboardShowdownExtension: () => {
     type: string;
     regex: RegExp;
-    replace: (text: string, group: string, subGroup: string, groupType: string, groupId: string) => string;
+    replace: (text: string, group: string, _: string, groupId: number) => string;
 };
 export default useInlineCopyClipboardShowdownExtension;

package/dist/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.d.ts

@@ -2,6 +2,6 @@ import './showdown-extension.scss';
 declare const useMultilineCopyClipboardShowdownExtension: () => {
     type: string;
     regex: RegExp;
-    replace: (text: string, group: string, subgroup: string, groupType: string, groupId: string) => string;
+    replace: (text: string, group: string, _1: string, _2: string, groupId: number) => string;
 };
 export default useMultilineCopyClipboardShowdownExtension;

package/dist/HelpTopicDrawer.d.ts

@@ -3,19 +3,25 @@ import * as React from 'react';
 import { QuickStartContextValues } from './utils/quick-start-context';
 import { HelpTopic } from './utils/help-topic-types';
 export interface HelpTopicContainerProps extends React.HTMLProps<HTMLDivElement> {
+    /** array of HelpTopics */
     helpTopics: HelpTopic[];
+    /** text resources object
+     * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+     */
     resourceBundle?: any;
+    /** language of the current resource bundle */
     language?: string;
+    /** if true, will show a loading spinner on the catalog page (default false) */
     loading?: boolean;
     /**
      * Additional markdown extensions and renderers to use
-     * TODO: example usage - In the meantime you can take a look at:
-     * https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
+     * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
      */
     markdown?: {
         extensions?: any[];
         renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
     };
+    /** additional quick start context props */
     contextProps?: QuickStartContextValues;
 }
 export declare const HelpTopicContainer: React.FC<HelpTopicContainerProps>;

package/dist/QuickStartDrawer.d.ts

@@ -3,32 +3,51 @@ import * as React from 'react';
 import { QuickStartContextValues } from './utils/quick-start-context';
 import { QuickStart, AllQuickStartStates } from './utils/quick-start-types';
 export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement> {
+    /** array of quick starts */
     quickStarts: QuickStart[];
+    /** id of the currently active quick start */
     activeQuickStartID: string;
+    /** setter for the active quick starts */
     setActiveQuickStartID: React.Dispatch<React.SetStateAction<string>>;
+    /** quick starts state object */
     allQuickStartStates: AllQuickStartStates;
+    /** setter for the quick starts state object */
     setAllQuickStartStates: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
+    /** content to render within the container */
     children?: React.ReactNode;
+    /** element to render the drawer panel into */
     appendTo?: HTMLElement | (() => HTMLElement);
+    /** if true, the panel will take up the full browser width */
     fullWidth?: boolean;
+    /** callback when an in-progress quick start is closed */
     onCloseInProgress?: any;
+    /** callback when a not-in-progress quick start is closed */
     onCloseNotInProgress?: any;
+    /** true to show footer buttons in the catalog tiles (default true) */
     showCardFooters?: boolean;
+    /** true to use legacy drawer header variant colors */
     useLegacyHeaderColors?: boolean;
+    /** text resources object */
     resourceBundle?: any;
+    /** language of the current resource bundle
+     * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+     */
     language?: string;
+    /** if true, will show a loading spinner on the catalog page (default false) */
     loading?: boolean;
+    /** if true, will update the browser URL with ?quickstart={ID} (default true) */
     useQueryParams?: boolean;
+    /** if true, the TaskReview component, aka "Check your work", will be shown regardless of task status */
     alwaysShowTaskReview?: boolean;
     /**
      * Additional markdown extensions and renderers to use
-     * TODO: example usage - In the meantime you can take a look at:
-     * https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
+     * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
      */
     markdown?: {
         extensions?: any[];
         renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
     };
+    /** additional quick start context props */
     contextProps?: QuickStartContextValues;
 }
 export declare const QuickStartContainer: React.FC<QuickStartContainerProps>;

package/dist/controller/QuickStartTaskHeader.d.ts

@@ -9,7 +9,7 @@ declare type QuickStartTaskHeaderProps = {
     size?: 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
     isActiveTask?: boolean;
     onTaskSelect: (index: number) => void;
-    chidlren?: React.ReactNode;
+    children?: React.ReactNode;
 };
 declare const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps>;
 export default QuickStartTaskHeader;

package/dist/index.es.js

@@ -1201,12 +1201,13 @@ const CopyClipboard = ({ element, rootSelector, docContext, }) => {
     const { getResource } = React.useContext(QuickStartContext);
     const [showSuccessContent, setShowSuccessContent] = React.useState(false);
     const textToCopy = React.useMemo(() => {
+        var _a;
         const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
-        return docContext.querySelector(`${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`).innerText;
+        return (_a = docContext.querySelector(`${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`)) === null || _a === void 0 ? void 0 : _a.innerText;
     }, [element, docContext, rootSelector]);
     useEventListener(element, 'click', React.useCallback(() => {
         navigator.clipboard
-            .writeText(textToCopy)
+            .writeText(textToCopy.trim())
             .then(() => {
             setShowSuccessContent(true);
         })
@@ -1234,15 +1235,15 @@ const useInlineCopyClipboardShowdownExtension = () => {
     return React.useMemo(() => ({
         type: 'lang',
         regex: /`([^`](.*?)[^`])`{{copy}}/g,
-        replace: (text, group, subGroup, groupType, groupId) => {
-            if (!group || !subGroup || !groupType || !groupId) {
+        replace: (text, group, _, groupId) => {
+            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}">
+                  <button class="pf-c-button pf-m-plain" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                     ${renderToStaticMarkup(React.createElement(CopyIcon, null))}
                   </button>
                 </span>
@@ -1256,16 +1257,16 @@ const useMultilineCopyClipboardShowdownExtension = () => {
     const { getResource } = React.useContext(QuickStartContext);
     return React.useMemo(() => ({
         type: 'lang',
-        regex: /```[\n]((.*?\n)+)```{{copy}}/g,
-        replace: (text, group, subgroup, groupType, groupId) => {
-            if (!group || !subgroup || !groupType || !groupId) {
+        regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
+        replace: (text, group, _1, _2, groupId) => {
+            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('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                    <button class="pf-c-button pf-m-plain" type="button" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                       ${renderToStaticMarkup(React.createElement(CopyIcon, null))}
                     </button>
                   </div>
@@ -1274,7 +1275,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>`;
@@ -1301,7 +1302,7 @@ const useAdmonitionShowdownExtension = () => {
     // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
     return React.useMemo(() => ({
         type: 'lang',
-        regex: /\[([\d\w\s-()$!]+)]{{(admonition) ([\w-]+)}}/g,
+        regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
         replace: (text, content, admonitionLabel, admonitionType, groupId) => {
             if (!content || !admonitionLabel || !admonitionType || !groupId) {
                 return text;
@@ -2371,7 +2372,7 @@ const HelpTopicPanelContent = (_a) => {
     const paddingContainer = (children) => React.createElement("div", { style: { padding: '24px' } }, children);
     const panelBodyItems = (React.createElement(React.Fragment, null,
         paddingContainer(React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
-        ((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
+        !!((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
         paddingContainer(React.createElement(Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => {
             return (React.createElement(StackItem, { key: index },
                 React.createElement(Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React.createElement(ExternalLinkAltIcon, null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href)));